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.
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: