[UI][1/n] Edit/Command mode

[senwang86]

Summary

Adding edit and command mode into Codepod regarding issue #88

• Hitting "Enter" on a Scope will go to its upper-left most child
• Hitting "Enter" on a Code/Rich pod will go to "Edit" mode.
• Hitting "Esc" in "Edit" mode will go to "Command" mode.
• Hitting "Esc" on a pod in "Command" mode will go to its parent

Test

[lihebi]

Thanks! Esc works in Code cells but seems not in Rich cells.

[senwang86]

Thanks! Esc works in Code cells but seems not in Rich cells.

Just checked, it seems that onBlur() is correctly fired after pressing Esc, while the editor box is failed to to be selected as the code editor.

[lihebi]

Still one bug. In the edit mode of a Rich pod, Hitting Esc should select the Rich pod. But now it drops me to its parent scope.

[lihebi]

Still one bug. In the edit mode of a Rich pod, Hitting Esc should select the Rich pod. But now it drops me to its parent scope.

To be more specific, this bug happens when the Rich pod is inside a scope.

The cause is:

• Remirror doesn't stop the propagation of the key-press event; therefore, Esc was executed twice.
• Monaco did stop the event propagation, and thus it works fine in Code pods.

I tried a few methods, but none of them worked yet.

[lihebi]

Thanks!

[forrestbao]

Thanks @senwang86 but sorry I probably come across some corner cases:

1. When I press "Esc" on a pod, I do not always enter the command mode of its parent. If I first select and enter the parent scope, then I can. But the Escape should work without me doing that first. https://github.com/codepod-io/codepod/assets/438579/3bc802ab-b3c6-4b0b-aa1f-d2d8ea31b9a4
2. When I hit "Enter" on a scope, I sometimes got focused on the child of another scope instead of the scope. https://github.com/codepod-io/codepod/assets/438579/6b8c4f70-1893-4726-8b1d-20f815f0e061
3. When I hit "Enter" on a pod, I do not always go into the Edit mode. https://github.com/codepod-io/codepod/assets/438579/582eb194-041f-49f2-85b1-0fa0e395f080

You can test in this repo: https://app.codepod.io/repo/eyusr62dyglelzg7m4jz

[senwang86]

Thanks @senwang86 but sorry I probably come across some corner cases:

1. When I press "Esc" on a pod, I do not always enter the command mode of its parent. If I first select and enter the parent scope, then I can. But the Escape should work without me doing that first. https://github.com/codepod-io/codepod/assets/438579/3bc802ab-b3c6-4b0b-aa1f-d2d8ea31b9a4
2. When I hit "Enter" on a scope, I sometimes got focused on the child of another scope instead of the scope. https://github.com/codepod-io/codepod/assets/438579/6b8c4f70-1893-4726-8b1d-20f815f0e061
3. When I hit "Enter" on a pod, I do not always go into the Edit mode. https://github.com/codepod-io/codepod/assets/438579/582eb194-041f-49f2-85b1-0fa0e395f080

You can test in this repo: https://app.codepod.io/repo/eyusr62dyglelzg7m4jz

Really appreciate the test, I can reproduce the bug, the states are not updated in response to the "drag handle click" event. Let me send a patch later.

[lihebi]

BTW, I think Esc is not a good key for jump-to-parent. We have many context menus and pop-up menus, and we need to use <Esc> to close those menus. How about <shift>+<up> and <shift>+<down> for up and down jumps?

[lihebi]

How about <shift>+<up> and <shift>+<down> for up and down jumps?

Moving the shortcut discussion to #418