Hej, tworze edytor RichText i mam nastepujący problem. Ten komponent re-renderuje sie przy kazdym kliknieciu i wyglada nastepuajco:
export function Editor() {
const editor = useEditor({
extensions: [StarterKit, Link.configure({ openOnClick: false })],
editorProps: {
attributes: {
class: "Editor",
},
},
content: `
<h1>Welcome to your fresh Tiptap Code Sandbox</h1>
<p>See us <a href="https://www.google.com/">here<a/></p>
`,
});
const [open, setOpen] = useState(false);
useEffect(() => {
if (!editor) return;
setOpen(!editor.state.selection.empty);
}, [editor?.state]);
console.log(open);
return (
<div>
{editor && (
<ControlledBubbleMenu
editor={editor}
// open={!editor.state.selection.empty}
open={open}
// open={true}
>
<span style={{ backgroundColor: "red" }}>Bubble Menu Content</span>
</ControlledBubbleMenu>
)}
<EditorContent editor={editor} />
{/* {editor && <LinkBubbleMenu editor={editor} />} */}
</div>
);
}
Wprowadzilem tutaj state open, ktorego poczatkowa wartosc wynosi !editor.state.selection.empty. Chcialbym zeby ten state byl updateowany przy kazdym rerenderingu. Jesli zrobie tak:
const [open, setOpen] = useState(() => !editor.state.selection.empty);
to niestety open nie bedzie sie updatowalo. Wprowadzilem wiec useEffect
useEffect(() => {
if (!editor) return;
setOpen(!editor.state.selection.empty);
}, [editor?.state]);
I to dziala poprawnie. Pytanie tylko czy dokladnie tak powinno sie to rozwiazac czy jest poprawniejszy sposob? Chcialbym dodatkowo wprowadzic analogiczne rozwiazanie dla stateow ktorych poczatkowa wartosc wyznaczana jest przez prop pdoawany do komponentu Editor. Czyli jesli np. Editor przyjmuje defaultContent jako prop to czy poprawnym rozwiazaniem jest
ponizszy kod
const [content, setContent] = useState(() => defaultContent);
czy analogicznie musze zrobic tak:
useEffect(() => {
setContent(defaultContent);
}, [defaultContent]);