tiptap Quit suggestions and remove decoration

I wanted to let the user cancel his suggestion and insert an hashtag instead. With the current implementation of the Plugin, I can refactor the onExit callback provided like in the example and call it manually in onKeyDown when user pressed Escape key. My problem is that the decoration is still here until the user press space key. Is there any way to remove the decoration (using the replaceText command maybe)?

I admit I scratched my head for hours around this 😄

Feb 26 '19 19:02 sotaan

Was this ever resolved? I'm currently trying to figure out how I can cancel the suggestion upon pressing the Escape key much like how if you type "@hans" in the github comment form below and press escape it will close the suggestion and convert it back to a node.

Any help would be appreciated, pulling my hair out with this when it should be so simple.

@hanspagel

Jul 12 '21 13:07 deanmikan

I have the same issue here, we need to allow spaces in the suggestion input, and I have the feeling that it was the only way to quit the suggestion mode. So when Suggestion have the option allowSpaces: true, there is no way to quit it.

Hitting escape could be a good way to solve it, but clicking anywhere on the editor could be cool also (that's what Notion is doing)

Nov 09 '21 15:11 charesbast

I tackled this for my codebase recently. It required customizing the Suggestion plugin to handle this "trap" when using allowSpaces: true. This is necessary in part due to the regex pattern for allowing spaces will always return a match in the current node keeping the suggestion continuously active.

You can see a working version of it here using Vue 2. You can click outside of the suggestion to close it, click Escape, or Shift+Tab to deactivate the suggestion. Typing a second char (default: '@') will start a new suggestion and deactivate the former. https://codesandbox.io/s/tiptap-mention-ddfcm?file=/src/components/TipTap.vue

Aside: Not sure why the codesandbox throws prop mutation warnings in the MentionList. I don't see the same warnings in my dev environment where that warning is set to throw an error. And I don't see where items or command are being updated, but I must be missing something in the sandbox.

Accessibility note: Shift+Tab may not be appropriate to close the suggestion as the focus may still be in the Editor, but if you want to have a Tab select, you will need to handle Shift+Tab so it's key press doesn't create a mention from the current selected value unintentionally.

Beyond the updated Suggestion plugin, this solution also requires the following:

CustomMention extends the Mention package so that you can override the suggestion plugin.
MentionList component handles all the key presses that you desire. Also, consider a 'no match' option that exits the suggestion on Tab Enter or Click.
Updated Editor -> CustomMention -> configuration that handles the Tippy rendered component and destroying it correctly re: tippy.onHide.

The code in the codesandbox changes the behavior in the following ways:

The suggestion is activated only when the char is the latest key press.
If suggestion is not active, don't apply a transaction nor update the state with each key press.
The state update only calls render once depending on the state update conditions in the following order - onExit, onUpdate, onStart.
If the suggestion is exited, with or without a selection, the suggestion is deactivated and will only be activated again with a new char key press.

Lastly, I am sure my implementation of this functionality could be further refined, but seems pretty close. @philippkuehn or @hanspagel I would be happy to submit a PR to suggestions for this when allowSpaces: true or please adapt the work above to avoid undesirable behavior changes.

Nov 09 '21 21:11 jakedolan

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.