На данный момент формат такой:
renderHTML({ HTMLAttributes }) {
return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
},
Теперь я мог бы сделать что-то вроде этого:
renderHTML({ HTMLAttributes }) {
return <div>hello</div>;
},
Итак, теперь у меня есть CustomImage.js:
const CustomImage = Image.extend({
addNodeView() {
return ReactNodeViewRenderer(NextImage);
},
});
export default CustomImage;
И NextImage:
const NextImage = () => {
return (
<NodeViewWrapper>
<div>hello</div>
</NodeViewWrapper>
);
};
export default NextImage;
И я использую это так:
html = generateHTML(JSON.parse(text), [
CustomImage
....
Функция renderHtml вызывается при запуске editor.getHTML()
Чтобы ответить на ваш вопрос, насколько мне известно, он должен соответствовать их формату. Чтобы достичь того, чего вы хотите, вы можете сделать что-то вроде этого:
renderHTML({ HTMLAttributes }) {
// On output
return [
"div",
mergeAttributes(HTMLAttributes), // mergeAttributes is a exported function from @tiptap/core
"hello",
];
},
Если вы, с другой стороны, хотите отобразить это в редакторе, вы должны использовать:
addNodeView() {
return ReactNodeViewRenderer(YourComponentHere);
},
И вы можете показать любой компонент, который хотите:
import { NodeViewWrapper } from "@tiptap/react";
import React from "react";
const YourComponentHere = ({ node, updateAttributes, selected, editor }) => {
return (
<NodeViewWrapper>
<div>hello</div>
</NodeViewWrapper>
);
};
Редактировать: Предполагая, что вы используете реакцию, вы должны использовать useEditor, если хотите использовать редактор подсказок.
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import CustomImage from './CustomImage'
const Tiptap = () => {
const editor = useEditor({
extensions: [
StarterKit,
CustomImage
],
content: '<p>Your inital content here</p>',
})
return (
<EditorContent editor = {editor} />
)
}
export default Tiptap
https://tiptap.dev/installation/react