richtext pod moves as cursor moves in text

[forrestbao]

What happens

When editing a richtext pod, if using an arrow key to move the cursor, the pod's location on the canvas changes.

See the video below. If I leave editing a pod, e.g., by clicking somewhere outside of the richtext pod, and then click somewhere inside the pod except a line end, the unexpected pod location shifting won't happen. But once I reach a line end, such as creating a new line, the bug appears again.

video1025589118.mp4

How to repeat

Create a new note pod. Type something. And then use any arrow key to move the cursor in the text. Note the difference when you reach a line end and not.

Expected behavior

When a pod, regardless of whether it is code or note, is in editing mode (#88), using arrow keys should only move the cursor but not the location of the pod.

[lihebi]

@li-xin-yi, after #168, the rich-text pod seems to still get selected in some cases, e.g.,:

• insert at the end of the first line
• whenever Enter is pressed

[li-xin-yi]

whenever Enter is pressed

I see. Not only the problem of richNode, codeNode behaves the same. This problem may be introduced in copy-paste PR, I mentioned that Esc, Space and Enter are selection keys by default, and I can't figure out the way to prevent them at that moment.

Any, I will investigate on it and try to fix.

[lihebi]

CodeNode does get selected, but it is not moving with the arrow keys. I think the Monaco editor hijacked the keys. We can probably do the same thing for the ProseMirror editor.

[li-xin-yi]

CodeNode does get selected, but it is not moving with the arrow keys. I think the Monaco editor hijacked the keys. We can probably do the same thing for the ProseMirror editor.

One idea: make the node unselectable (remove its tabindex or any otherway) in its onFocus and recover it onBlur. Ref: https://reactflow.dev/docs/guides/accessibility/#keyboard-controls, it is also the version brings in the feature of moving by arrow keys.

[lihebi]

Sounds like a good idea.

[li-xin-yi]

For now, you can set nodesFocusable=false to prevent the node selected by Enter or Tab. I tried and it works. But the purple border is gone on focused. I don't know either the reason or any other consequence.

[forrestbao]

I just found a corner case. If you create a new note node and start writing in it immediately, the node moves when you move the cursor in the text. But if you leave this newly created note node, and come back, the issue is gone.

[li-xin-yi]

If you create a new note node and start writing in it immediately, the node moves when you move the cursor in the text.

At least in current version, auto-focus is disabled. You have to focus it first and then edit.

BTW, other known issues: Space can also make the richtext pod selected again and move following the arrow keys.

[li-xin-yi]

For now, you can set nodesFocusable=false to prevent the node selected by Enter or Tab. I tried and it works. But the purple border is gone on focused. I don't know either the reason or any other consequence.

My fault. It is infeasible because it also disables Esc to unselect nodes. I have to find another solution.