You can detect this issue from the editor on the ProseMirror homepage.
The issue is: if I try to navigate inside a code block using the arrow keys from the top node before the code block, pressing the down arrow causes the cursor to go to the last line inside the code block instead of the first line?
How to reproduce the issue in the editor on the homepage:
Enter a new line and insert a code block by typing three backticks.
Type any number of lines inside the code block (more than one line).
Go to the node before the code block, and try to place the cursor inside the code block using the arrow keys.
You will find that the cursor goes to the last line of the code block instead of the first line?.
Tiptap and ReMirror handle this correct, and i search on source code on this two lib and i found that they not provide a custom for example plugin or keyDown handler for arrowDown to handle it but it handles natively, I Think he may be about nodes definition or something.
Are you seeing this in browsers other than Firefox? I can reproduce it there, but not in Chrome. It appears to be an issue in Firefox’s native cursor motion code related to the overflow-x: auto style on code blocks (when you disable that, it behaves as expected).
I have a similar problem with both Firefox and Chrome, using Tiptap: the ArrowUp key moves the cursor to the start of the code block, instead of placing it on the previous line in the code, at the same column (if the previous line is not shorter, otherwise it should put it at the end of the line).
I wrote a plugin to fix this behavior: it’s ugly, because now the cursor jumps to the start of the code and then back to the previous line, but it does the job.
It’s more likely I’m missing something, than a bug in browsers or libraries.
I cannot reproduce this in either Chrome or Firefox on a vanilla ProseMirror setup, so likely it is caused by some style or plugin that you have in your setup.
Thank you a lot for checking, @marijn, I did not expect that.
I posted it because it looked somehow related to the topic.
Before working out my ugly solution, I remember I looked into Prosemirror and Tiptap code for a redefinition of ArrowUp behavior, finding nothing.
So it should be something more subtle in Tiptap or CSS, or the combination of a pre with code, because code blocks are rendered as code elements inside a pre.
, You’re right—