Enabling / disabling extensions after initializations

[YousefED]

I don't think it's currently possible to remove / add new extensions after the editor has been initialised, correct?

My scenario is that I want the end-user to control the behaviour of the editor, and part of that would be to enable / disable / load extensions.

Is this something you're considering?

[lostdesign]

Could you hide the buttons or want to disable it completely to be certain? Why not put the init of the editor into a method that you can call? You could re-create the instance with the extension set you want?

e.g. in vue: created() calls init() -> init() -> creates the editor. Would allow for a button to trigger init() again, using a reactive extensions array?

[YousefED]

Recreating the editor would re-render the entire document I assume, so that would not be an ideal user experience. I'm looking for a similar functionality as unregisterPlugin and registerPlugin, but that only works for PM plugins, and not for TipTap Extensions.

[philippkuehn]

Hey, we don’t provide such an API because you can change the schema with extensions. Because the schema can also be generated server-side by a list of extensions, this should not be dynamic.

[YousefED]

Hey, we don’t provide such an API because you can change the schema with extensions. Because the schema can also be generated server-side by a list of extensions, this should not be dynamic.

I understand there's some trickiness with Schemas, not sure how that completely invalidates my use-case. e.g.; if I make sure the schema is still correct, or only disable plugins that are not affecting the schema, wouldn't it be still a valid use-case? E.g.; to turn off / on mentions, color decorations, etc.?

[lostdesign]

I do wonder however why a rerender is such an issue? Do they really frequently change the extensions? I'd even hide it in some settings pannel as I am going to do exactly what I described. For me a re-rendering will not be an issue.

[YousefED]

In my use-case it would be an issue. (l would like the user to be able to live-edit the extension code, and reupdate every keystroke to "hot reload"). If this is too specific for my use-case and you don't think it's relevant for other users, it makes sense you're not eager to implement registering and unregistering. If that's the case I can give it a go myself

[lostdesign]

I think the registering/deregistering of extensions is interesting still.

[deathg0d]

Hi @YousefED, did you solve this? I am also trying to provide a button that the user can click to enable and disable features like these: https://www.tiptap.dev/examples/savvy/

I would also like to add that I don't think this is a narrow use case at all. There are so many extensions that could benefit from this.

@lostdesign If there is an example I could follow for registering and unregistering extensions? Couldn't find much in the documentation.

[YousefED]

Hi @YousefED, did you solve this? I am also trying to provide a button that the user can click to enable and disable features like these: https://www.tiptap.dev/examples/savvy/

Haven't been able to look into this yet unfortunately

[kwarc-star]

@philippkuehn Any other way to achieve this? Enabling disabling dynamically would be pretty useful for many extensions.

[deathg0d]

Any update yet on this one?

[philippkuehn]

It’s difficult to solve with ProseMirror. In the end, I would also have to reinitialize the editor under the hood, which only makes things more complicated. If you need this feature, the easiest way is to manually destroy and mount the editor.

[vadimdemedes]

I've just ran into this limitation too. I have a mark extension that conditionally applies a class in renderHTML based on the this.options field. However, there seems to be no way to update options of an extension or reinitialize an extension.

ProseMirror allows reconfiguring options via reconfigure function, but TipTap doesn't expose anything like that.

Is there at least a workaround we can use, if it's not possible to support that natively in TipTap?

I do wonder however why a rerender is such an issue?

To answer an earlier question, recreating an editor loses user's selection, cursor position in the editor and unfocuses the editor. If this happens while user is typing, it's a pretty bad user experience to suddenly prevent them from typing.

[Nantris]

I think a hypothetical unregisterExtension or something like it should be allowed for any extension which doesn't modify the schema - which would be a lot of them I think.

On a related point, it doesn't seem like unregisterPlugin does anything to unregister ProseMirror plugins either???

Edit: I got this working but I don't recall what my bad assumption was.

[Kasheftin]

Is it possible to reconfigure tiptap extension? For example, I'm using @tiptap/extension-placeholder like this (vue3):

const editor = useEditor({
  ...
  extensions: [
    Placeholder.configure({
      placeholder: i18n.t('tiptap.placeholder')
    })
  ]
})

If a user changes the locale I want placeholder text to be updated. How to do this?

[hyanmandian]

Is it possible to reconfigure tiptap extension? For example, I'm using @tiptap/extension-placeholder like this (vue3):

const editor = useEditor({
  ...
  extensions: [
    Placeholder.configure({
      placeholder: i18n.t('tiptap.placeholder')
    })
  ]
})

If a user changes the locale I want placeholder text to be updated. How to do this?

I face the same issue and I did this:

useEffect(() => {
      if (!editor) return;

      for (const extension of editor.extensionManager.extensions) {
        if (extension.name === ExtensionPlaceholder.name) {
          extension.options.placeholder = placeholder;
        }
      }

      // Trigger an update
      editor.setOptions();
    }, [editor, placeholder]);

ugly but it works, another way to solve it is using the second parameter of useEditor (deps) but it destroys and recreate the editor :(

[hyanmandian]

Quickly update over my implementation. I found this https://codesandbox.io/p/sandbox/suggestion-mention-update-list-xypnd3?file=%2Fsrc%2FEditor.js%3A60%2C18 on Tiptap discord and I applied the same approach for placeholder and it works nicely :D