Open sotaan opened 5 years ago
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
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)
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:
Tab
Enter
or Click
.tippy.onHide
.The code in the codesandbox changes the behavior in the following ways:
char
is the latest key press. apply
a transaction nor update
the state with each key press. update
only calls render
once depending on the state update conditions in the following order - onExit, onUpdate, onStart. 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.
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.
This is still an issue, right? I'm running into the same issue right now, and this seems like the canonical issue for this.
This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days
We are also impacted with this issue where we tried exiting from the suggestion node when pressing Escape.
Any thoughts here?
Hello, does anyone have any up-to-date solution or workaround. I did try implementing provided workaround but I am getting Applying a mismatched transaction
when exitSuggestion
is called inside handleExit
and on other places as well. My knowledge of TipTap and ProseMirror is for now not sufficient to find or build any solution 😢 . For error mentioned above I managed to eliminate it by wrapping exit function into setTimeout
, but this is a hack and not a way to go.
@jakedolan Would you be so kind to share any tips on up to date solution/workaround? 😊
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 inonKeyDown
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 thereplaceText
command maybe)?I admit I scratched my head for hours around this 😄