How to keep state between Editor and Extensions?

[tomtobac]

Hello there 👋

I have the following component in my React app, and I'm trying to keep its state synced with my extension and its props. My current approach uses useEffect to dispatch the latest prop changes with the extension but I feel like this is not the right approach, or is it?

I thought when the Tiptap component was rerendered due to the props changes, the extension Placeholder.configure would be tacking the new properties, but it is not.

const Tiptap = (content: string, isReadyOnly: boolean) => {
  const editor = useEditor({
    extensions: [
      // ...other plugins
      Placeholder.configure({
        isReadyOnly: isReadyOnly,
      }),
    ],
    editable: !isReadyOnly,
  });
	
  // sync readOnly state with the plugin
  useEffect(() => {
    if (editor) {
      editor.view.dispatch(editor.state.tr.setMeta('readonly', readOnly));
    }
  }, [editor, readOnly]);

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

  return <EditorContent editor={editor} />;
};

export const Placeholder = Extension.create<{
  placeholder: string;
  isReadyOnly: boolean;
}>({
  name: 'placeholder',

  addOptions() {
    return {
      placeholder: 'Write something...',
      isReadyOnly: false
    };
  },

  addProseMirrorPlugins() {
    let focusedPos: number | null = null;
    const pluginOptions = this.options;

    const plugin = new Plugin({
      key: new PluginKey('placeholder'),
      state: {
        init() {
          return { editable: true };
        },
        apply(tr, value) {
          // Check for both transaction metadata and editor.editable
          const editable = tr.getMeta('editable');
          const readonly = tr.getMeta('readonly');

          if (editable !== undefined) {
            return { editable };
          }
          if (readonly !== undefined) {
            return { editable: !readonly };
          }
          return value;
        }
      },
      props: {
        decorations(state: EditorState) {
          const decorations: Decoration[] = [];
          const pluginState = plugin.getState(state);

          if (pluginState?.editable) {
            focusedPos =
              state.selection.$head.parent.type.name === 'paragraph'
                ? state.selection.$head.before()
                : null;

            state.doc.descendants((node: Node, pos: number) => {
              if (node.type.name !== 'paragraph') return;

              const isEmpty = node.content.size === 0;
              if (!isEmpty) return;

              if (pos === focusedPos) {
                decorations.push(
                  Decoration.node(pos, pos + node.nodeSize, {
                    class: 'is-empty',
                    'data-placeholder': pluginOptions.placeholder
                  })
                );
              }
            });
          }

          return DecorationSet.create(state.doc, decorations);
        }
      }
    });

    return [plugin];
  }
});

[guanriyue]

Let me understand your requirement: You want to dynamically modify the placeholder, similar to [placeholder, setPlaceholder] = useState(''), and consume this placeholder?

Unfortunately, Tiptap does not support this operation. All required extensions are specified when the editor is created and cannot be modified during the editor's lifecycle. This means that when the placeholder changes, you need to recreate the entire editor.
However, you can take an alternative approach.

Tiptap is built on top of ProseMirror, and the TiptapPlaceholderExtension essentially registers a plugin within the editor. Note that ProseMirror supports dynamically registering plugins, and Tiptap provides registerPlugin and unregisterPlugin methods on its editor instance.

So you can achieve dynamic placeholder support in the following way:

const MyPlaceholderReactComponent = (props: { children?: string }) => {
  const pluginKey = useMemo(() => {
    // your pluginKey here
  }, []);

  const plugin = useMemo(() => {
    // your plugin here
  }, []);

  useEffect(() => {
    editor.registerPlugin(plugin);

    return () => {
      editor.unregisterPlugin(pluginKey);
    };
  }, [editor, plugin]);

  return null;
};

Use this component like this:

<MyPlaceholderReactComponent>
  {placeholder}
</MyPlaceholderReactComponent>

[guanriyue]

If you don't want to specifically create a pluginKey, you can try customizing a registerPlugin function, something like this:

https://github.com/guanriyue/journal/blob/main/packages/prosemirror/utils/src/registerPlugin.ts