Theo's Typesafe Cult•2y ago

Tiptap editor not updating as expected.

My tiptap editor is being passed the content value via props but when the prop updates, the content does not update. This is what my component looks like -

export const TextCell = ({ initialValue, columnId, rowIndex }: Props) => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `${initialValue}`,
    editorProps: {
      attributes: {
        class: "focus:outline-none min-w-[150px] p-1",
      },
    },
  });
  return <EditorContent editor={editor} />;
};

export const TextCell = ({ initialValue, columnId, rowIndex }: Props) => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `${initialValue}`,
    editorProps: {
      attributes: {
        class: "focus:outline-none min-w-[150px] p-1",
      },
    },
  });
  return <EditorContent editor={editor} />;
};

When i add the following useEffect, it works fine -

 useEffect(() => {
    editor?.commands.setContent(initialValue)
  }, [initialValue])

 useEffect(() => {
    editor?.commands.setContent(initialValue)
  }, [initialValue])

I was surprised by this behavior but does it make sense? If an input to useEditor changes, wouldn't it re-create the editor?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Tiptap editor not updating as expected.