You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Steps to Reproduce
Make an editor with the floating link insert
Stick it within a form
Try and insert a link from the insert toolbar
What I expect
The link to be inserted into the editor
## What happened
Pressing enter triggered the parent form's submit method which means the link is never inserted.
Solution
Add a button to allow the user to manually add the link to the editor via a button click
Wrap the floating inputs in a form element -- Realised this will result in a nested form and a hydration error
Add an event listener to the wrapping div and listen for onKeyDownCapture. When the key is Enter or the keyCode is 13 we call e.preventDefault() which stops the wrapping form from submitting.
As requested by @zbeyens I have added a hook to address udecode#3130 and, hopefully, close the issue.
The hook simply allows the user to pass `preventDefaultOnEnterKeydown` to the `<LinkFloatingToolbar/>` component. In doing so the user will not experience an issue I encountered whereby pressing enter prior to filling in both fields the overall form is submitted without the desired link element.
The hook can also take a callback function `onKeyDownCaptureCallback` which will allow the user to be able to use this functionality and still be able to add their own logic to the event -- we don't want to prevent them from being able to implement default functionality of their own.
I have added unit tests for the hook itself and it seems to be all good. Run the full monorepo test suite locally and, again, all good. Hopefully this closes the issue
Description
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.
Steps to Reproduce
What I expect
The link to be inserted into the editor
## What happened
Pressing enter triggered the parent form's submit method which means the link is never inserted.
Solution
Wrap the floating inputs in a form element-- Realised this will result in a nested form and a hydration erroronKeyDownCapture
. When the key isEnter
or thekeyCode
is13
we calle.preventDefault()
which stops the wrapping form from submitting.Notes
I have forked this repo and implemented solution number 3 here: https://github.com/PaulSinghDev/plate-update-floating-link
Click here to add a bounty via Algora.
Funding
The text was updated successfully, but these errors were encountered: