Allow the <LinkFloatingToolbar /> component to be submitted with the 'enter' key when the <PlateEditor /> is contained within a <form></form> #3133
Conversation
The current floating link element exposes no button to trigger the insertion and relies on the user pressing enter. This is not a problem in itself but, if the user is placing the WYSIWYG editor within a form pressing enter will trigger the parent form's onSubmit method and the link will not be inserted. As such I have wrapped the floating insert in an blank form element which takes the form context away from the parent and means submission is handled by plate opposed to the wrapper.
In order to prevent hydration issues I have removed the nested form an instead opted for a keyDown listener which will preventDefault if the key is enter
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| onKeyDownCapture={(e) => { | ||
| if (e.key === "Enter" || e.keyCode === 13) { | ||
| e.preventDefault(); | ||
| } | ||
| }} |
There was a problem hiding this comment.
Could we move this logic to the package, in FloatingLinkUrlInput?
There was a problem hiding this comment.
@zbeyens Sure I'll test it out today to make sure it works the same :)
There was a problem hiding this comment.
@zbeyens if we add it to the FloatingLinkUrlInput it will not capture the event that the user presses enter after entering text into the label input field and will invoke the errant behaviour of calling the parent form's submit method. As such I think the most pragmatic approach is either leave it where it is one of:
- Move it to the next child down the tree (as this wraps both input fields)
- Add it to both input fields (seems a bit excessive and harder to manage)
There was a problem hiding this comment.
Makes sense. Since we try hard to follow shadcn pattern, I think adding a new hook useFormInputProps in @udecode/plate-utils would be optimal, that should be used by any editor input (your second suggestion).
There was a problem hiding this comment.
@zbeyens no probs at all, I will try get something pulled together over this weekend :)
I encountered an issue whereby having the plate editor nested within a
<form></form>lead to the<LinkFloatingToolbar />triggering the form's submission method.This meant that the link element was never added into the editor's context and that the user couldn't actually add one in via the insert menu.
Solution
The change is a very basic one and is nothing major. I simply added an
onKeyDownCaptureevent listener to the wrapping div element. Within the callback I simply check whether key pressed is theEnterkey and, if so, call thepreventDefault()method exposed on the event.I opened an issue for this the day I noticed it and thought it would probbably help to just run through the tests etc and then make the PR to make everyone's lidfe easier.
The issues which this closes is: #3130