Can I dynamically add extensions to an editor created in useEditor later?

[masyuko0222]

I am trying to create a service with tiptap's Collaboration feature.
I would like to dynamically add settings (extensions) to an editor generated by useEditor after the fact.

I am trying to use @tiptap/extension-collaboration-cursor in it.
But it seems that provider information is required when adding CollaborationCursor settings.

const NoteEditor = ({ user, id, content }) => {
  const yDoc = new Y.Doc();

  const editor = useEditor({
    extensions: [
      StarterKit,
      Collaboration.configure({
        document: yDoc,
      }),
    CollaborationCursor.configure({
      provider: null, // null is not allowed 
      user: {
        name: user,
        color: '#f783ac',
      },
    }),
],
...

However I am initiating websocket provider (creating an instance) within useEffect().
This is because I followed the instructionsin the official documentation on Install Collaboration.

useEffect(() => {
  const wsProvider = new WebsocketProvider('ws://localhost:1234', id, yDoc);

  wsProvider.on('sync', (isSynced) => {
    if (isSynced) {
      if (!yDoc.getMap('config').get('initialContentLoaded') && editor) {
      yDoc.getMap('config').set('initialContentLoaded', true);
      editor.commands.setContent(content);
      }
    }
  });

  return () => {
    wsProvider?.destroy();
  };
}, []);

So after finish instantiating the provider with useEffect(), I want to add the CollabrationCursor setting to the editor, is there a good way to do this?

I am sorry that my English is so bad.

[masyuko0222]

all code

import PropTypes from 'prop-types';
import React, { useEffect } from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

import Collaboration from '@tiptap/extension-collaboration';
import CollaborationCursor from '@tiptap/extension-collaboration-cursor';
import { WebsocketProvider } from 'y-websocket';
import * as Y from 'yjs';

const NoteEditor = ({ user, id, content }) => {
  const yDoc = new Y.Doc();

  const editor = useEditor({
    extensions: [
      StarterKit,
      Collaboration.configure({
        document: yDoc,
      }),
      CollaborationCursor.configure({
        provider: null, // can not set
        user: {
          name: user,
          color: '#f783ac',
        },
      }),
    ],
    editorProps: {
      attributes: {
        class: 'mr-2 border border-gray-300 p-4 rounded focus:ring-blue-500',
        style: 'height: 24rem; overflow: auto;',
      },
    },
  });

  editor?.on('update', ({ editor }) => {
    const updatedContent = editor.getHTML();
    document.getElementById('note-editor-hidden').value = updatedContent;
  });

  useEffect(() => {
    const wsProvider = new WebsocketProvider('ws://localhost:1234', id, yDoc);

    wsProvider.on('sync', (isSynced) => {
      if (isSynced) {
        if (!yDoc.getMap('config').get('initialContentLoaded') && editor) {
          yDoc.getMap('config').set('initialContentLoaded', true);
          editor.commands.setContent(content);
        }
      }
    });

    return () => {
      wsProvider?.destroy();
    };
  }, []);

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

NoteEditor.propTypes = {
  user: PropTypes.string,
  id: PropTypes.string,
  content: PropTypes.string,
};

export default NoteEditor;

[bdbch]

Not without destroying and recreating the Tiptap editor instance. Extensions and Plugins are registered when the editor is created.

You could create your provider outside of your editor wrapper & conditionally render the editor including the useEditor hook when your provider is setup already.

[masyuko0222]

Thank you for your response.
I will try.

[MARIOMARUI]

哈哈哈