Mention Extension Not Rendering Suggestions When Editor Markup Changes

[zdychacek]

Hello,

Thank you for this awesome editor. I use it with the Mention extension and have encountered a situation for which I would like to ask for help.

When I need to render an editor instance in various ways (e.g., one as a read-only variant and another in an editing state), the Mention extension stops working if the Editor component returns different markup. In such cases, the suggestion menu does not appear, even though the tippy.js container is appended to the DOM without any rendered content.

I have provided a link to a CodeSandbox example where I simulate the different markup by switching the isEditable property:

https://codesandbox.io/p/sandbox/l6kw7y

The expected behavior is that the suggestion list should render even when the mode is switched.

I would appreciate any help 🙏

Thank you.

Ondrej

[piszczu4]

The same issue here - @zdychacek did you manage to find a solution?

[zdychacek]

Not yet 😢

[kart-c]

The useEditor hook takes a dependency array to watch for changes. In your case, you can add the isEditable in the dependency array to resolve the issue Updated sandbox.

Although I would suggest an alternative approach. For enabling and disabling the editor instance provides a method called setEditable which takes a boolean as an argument.
For reference - https://tiptap.dev/docs/editor/api/editor#seteditable

[zdychacek]

@kart-c It works! Did not know about dependency option. Thank you very much! 👍