react-prosemirror icon indicating copy to clipboard operation
react-prosemirror copied to clipboard

backspace does not work on first keystroke for new single character text block

Open plaisted opened this issue 1 year ago • 6 comments

This is using the latest react-editor-view branch. Sounds sort of similar some of the issues in #42

When a new paragraph or heading is added with a single character, backspace does not work. To remove the character backspace must be hit twice. Note this does not seem to be isolated to backspace, as shift left also fails to highlight the character.

  • I am also using the baseKeyMap (for backspace) but I've validated none of the commands are used so this goes to the normal keystroke handling for the content editable.
  • The first backspace does create a transaction but there are no steps associated with it
  • Prosemirror document state is identical for both backspaces (one that works and one that doesn't).
  • If I load the same state fresh in a new prosemirror instance backspace works fine, this only occurs in the editor when the single character node is created
  • If I add more characters (or paragraphs after it) every works as expected

https://github.com/nytimes/react-prosemirror/assets/20848495/6c321086-ca14-48d7-b91b-aab084fdcf3e

plaisted avatar Jun 23 '24 19:06 plaisted

Thanks for the report @plaisted! Can you confirm which version you're using? We recently changed the deletion behavior in the react-editor-view branch; I'm trying to figure out whether we broke this recently or may have just fixed it

smoores-dev avatar Jun 23 '24 22:06 smoores-dev

Hi @smoores-dev , I'm using 0.7.0-next.5 which is the latest published version.

plaisted avatar Jun 23 '24 22:06 plaisted

@plaisted would you be able to either share your schema and node views, or create a minimal reproduction in codepen or some such? I'm actually unable to reproduce locally!

smoores-dev avatar Jun 28 '24 21:06 smoores-dev

I saved a branch with the issue but will take some with to extract everything into something shareable.

plaisted avatar Jun 29 '24 11:06 plaisted

Thanks, I appreciate it!

smoores-dev avatar Jun 29 '24 13:06 smoores-dev

Howdy! I’ve had a chance to look into this a bit more, and here’s what I’ve learned:

  • This isn't a "real" bug; it's only in Strict mode, in a development build. This won't be a problem in production (unless you’re using Concurrent Mode features)
  • The reason that Strict mode does what it does is to prepare developers for React Concurrent mode. This issue with Strict mode does mean that react-prosemirror may experience subtle issues (potentially just this relatively minor one, but potentially others as well) in Concurrent mode. This is fine; I don’t know that concurrent mode makes a lot of sense for rich text editors anyway (it's better for situations where user input in one component can cause significant rerenders in another, like filtering search results). But I am planning on taking a look at whether it's possible to resolve this issue anyway.

Just wanted to make sure it was clear that this isn't blocking and won't be a problem for users in production!

smoores-dev avatar Sep 05 '24 19:09 smoores-dev

This should be resolved in the 0.7.0-next.11! Please note that there is a small breaking change in that version: NodeView components now receive a nodeProps.getPos prop (typed as () => number) rather than nodePos.pos, to prevent them from re-rendering on every update.

smoores-dev avatar Nov 15 '24 00:11 smoores-dev