quill
quill copied to clipboard
slab
Documentation request: preventing invalid cursor movement
I recognize that I have a custom use case trying to implement checkboxes, but would like to contribute to the Quill documentation if someone points me in the right direction.
Steps for Reproduction
- Visit this CodePen.
- Place the cursor at the beginning of the line marked "Bread"
- Press the ← (left) arrow once
- Expected: cursor moves backwards to end of the line marked "Milk". Compare to cursor movement within the bulleted list at the bottom
- Observed: cursor moves flush with the right side of the checkbox
- Press the ← (left) arrow a second time
- Observed: cursor moves flush with the left side of the checkbox. Any characters typed now will appear at the end of the "Bread" line
- Press the ← (left) arrow a third time
- Observed: cursor moves to the end of the "Milk" line as we expected for the first keypress.
- Click immediately to the left of the checkbox next to "Apples"
- Expected: this behavior is somewhat undefined, but we'd still expect a valid cursor location
- Observed: cursor moves to invalid location from step (4)
Platforms: MacOS, Chrome 104
Version: 1.3.6
Possibly related: #2671, #1403
Other notes: With my initial implementation (which closely mirrored the base ListItem implementation) I was able to move the cursor inside the checkbox and type characters -- this had no effect on the document that Quill reported. Adding domNode.setAttribute('contenteditable', 'false') fixed this, but there is no analogous fix for the current cursor-movement problem.
add a new matcher of arrow operation about checklist blot to the keyboard module is a choice.
@TonyYu2015 Thanks for the suggestion! I was debating between a keyboard hook and an event listener on the .task element.
Upon reflection, it appears that this ticket is a request for what the "most Quill-ish way" to implement this would be -- I want to hook in at the appropriate level to cut down on edge cases. For example, if there's a generalized way to validate cursor location, then we could solve arrow key behavior and click behavior at the same time.
@MatteoGauthier Unfortunately not. I haven't had the chance to work with Quill much lately, but I'm considering rendering the checkbox outside the QuillJS DOM element and using absolute positioning to make it work the way I want
Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide :pray:
