[ZEPPELIN-6197/6229] Fixed the shortcuts in the New UI so that they match the Classic UI and work correctly

[dididy]

What is this PR for?

Unlike the Classic UI, the New UI either lacked implementations for several shortcuts or had shortcuts assigned differently from the Classic UI. I consider this a significant issue, and after addressing other related derivative issues, I am finally submitting it.

d96ae5b - Remove the top margin in the editor search

[AS-IS]

[TO-BE]

Fixed an issue where the top area increased by 33px when search was activated. <- referece

0d24eb4 - Handle focus on PARAGRAPH_MOVED receive

When performing "Move Paragraph Up" or "Move Paragraph Down," the paragraph moves up or down after receiving PARAGRAPH_MOVED. During this process, focus was being skipped, so I added it.

1d3d294 - Overriding shortcuts conflict with the editor

In the New UI, we use the Monaco editor, where reserved shortcuts had to be explicitly overridden. I added shortcut functionality for four actions: "Toggle Editor", "Cut the Line", "Paste the Line", and "Search Inside the Code".

57f45e1 - Make action bar searchCode accessible to siblings

There are paragraph.component.ts and action-bar.component.ts that share notebook.component.ts as their parent. In the Classic UI, "Find in Code" is a shortcut that activates the search button in the action-bar. Although this functionality is currently marked as TODO(ZEPPELIN-6279) in the New UI, I set up the connection by adding a Template Reference Variable and Event Binding in notebook.component.html. With this setup, paragraph.component.ts can invoke the searchCode() method of action-bar.component.ts.

b027a33 - Ensure shortcut keys work correctly

All shortcut orders have been updated based on the Classic UI. There was logic to handle key bindings differently for macOS, but upon review, it was unnecessary and has been removed. On macOS, typing a combination of Alt and an English letter can produce a different character, so to ensure correct behavior, this resulting character combination is included in the shortcut handling. I added several actions that were not yet implemented.

The distinction between command mode and edit mode for shortcuts was meaningless, so it was removed. The original implementation seemed intended to mimic a vi-like behavior, but this would have made the shortcut system different from the Classic UI.

In the Classic UI, "Auto Completion" had a shortcut to trigger it manually. In the New UI, auto completion is triggered automatically when typing, so "Auto Completion" shortcut was unnecessary and has been removed in this PR.

What type of PR is it?

Bug Fix

Todos

What is the Jira issue?

• [ZEPPELIN-6197]
• [ZEPPELIN-6229]

How should this be tested?

Screenshots (if appropriate)

Questions:

• Does the license files need to update? N
• Is there breaking changes for older versions? N
• Does this needs documentation? N

[tbonelee]

Thanks for taking care of this important task. All of the key bindings you added worked well in my local environment. Perhaps next time we could split this kind of work into separate issues (e.g., fixing just the key bindings themselves and fixing the behavior of each key binding).

[dididy]

I corrected the keyboard shortcuts in the dropdown that appears when clicking the settings icon at the top-right of a paragraph; they had differed from the original. The same issue existed in the Classic UI and has been fixed there as well.

e787a62
[NewUI: As-Is]

[NewUI: To-Be]

bd4952b
[Classic UI: As-IS]

[Classic UI: To-Be]