Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 28, 2023
Merged

Conversation

senwang86
Copy link
Collaborator

@senwang86 senwang86 commented Jul 25, 2023

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

edit_command_mode

@senwang86 senwang86 requested a review from lihebi July 25, 2023 07:17
@lihebi
Copy link
Collaborator

lihebi commented Jul 25, 2023

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

@senwang86
Copy link
Collaborator Author

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
Copy link
Collaborator

lihebi commented Jul 28, 2023

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
Copy link
Collaborator

lihebi commented Jul 28, 2023

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.

@@ -508,6 +508,8 @@ export const CodeNode = memo<NodeProps>(function ({
const autoRunLayout = useStore(store, (state) => state.autoRunLayout);

const prevLayout = useRef(layout);
const ref = useRef<HTMLDivElement>(null);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed?

@lihebi
Copy link
Collaborator

lihebi commented Jul 28, 2023

Thanks!

@lihebi lihebi merged commit 10a413e into codepod-io:main Jul 28, 2023
@forrestbao
Copy link
Collaborator

forrestbao commented Aug 2, 2023

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
Copy link
Collaborator Author

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
Copy link
Collaborator

lihebi commented Aug 3, 2023

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
Copy link
Collaborator

lihebi commented Aug 3, 2023

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

Moving the shortcut discussion to #418

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants