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

useEditor

changes, wouldn't it re-create the editor?

TTC

Theo's Typesafe Cult•4y ago

jairrard

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

useEditor

changes, wouldn't it re-create the editor?

Tiptap editor not updating as expected.

Similar Threads

Tiptap editor not updating as expected.

Similar Threads

Similar Threads

Similar Threads