Hello! I’m having some issues getting backspace to work correctly when using atomic ranges + Decoration.replace. When I press backspace in front of a widget, it deletes one character of the matched string instead of deleting the widget entirely. There is also a weird issue where the cursor appears on the left hand side of the widget instead of on the right
I followed the example as closely as possible and included most of the extensions recommended by minimalSetup but I am still seeing this issue.
Does the problem occur for you in the bottom demo in this example? In general, a script that helps reproduce a problem is a lot more useful than a screencasts. And if you are going to post code, post the text, not a screenshot of the code, obviously, since that can’t be copied.
Sorry about that, I recreated my usage (with the removal of some business logic) of Codemirror in a sandbox here.
Unfortunately I wasn’t able to recreate the behavior shown in the screencast in either the example or in the sandbox. However I did encounter a potentially similar error in both environments with the backspace behavior when I triggered a match in the middle of a string of chars, and then pressed backspace. In this instance, backspace deleted the beginning of the string instead of the whole atom.
Could this be related at all? Or if not, do you have any suggestions on how I could investigate the backspace behavior I’m seeing? I’m unsure of what else could be affecting the atom deletion behavior
atomicRanges affects keyboard cursor motion and deletion, but does not prevent selections that point into the ranges in general. You could use a transaction filter if you want to guarantee that no functionality ever puts a selection end at some position.
This doesn’t seem related. Unless your setup uses its own custom commands (or no binding at all) for backspace. And without a way to reproduce the issue I can’t say much about it.
I was able to solve this. In our package.json we were importing @codemirror/view, @codemirror/state, and @codemirror/commands as individual modules. However it turns out that both the modules of @codemirror/state and @codemirror/commands were importing their own version of @codemirror/view which was breaking instanceof checks within the packages. The solution for us was to update our rollup.config.js to mark that @codemirror/view was an external package. I hope this helps
