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

### 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]
<img width="671" height="136" alt="스크린샷 2025-09-01 오후 11 26 14" src="https://github.com/user-attachments/assets/fcd0a107-4b22-42f2-978f-f0781c5fd675" />
[TO-BE]
<img width="669" height="136" alt="스크린샷 2025-09-01 오후 11 26 23" src="https://github.com/user-attachments/assets/475c05e6-ffae-4410-920f-7b0a9e44388d" />

Fixed an issue where the top area increased by 33px when search was activated. <- [referece](https://github.com/microsoft/monaco-editor/blob/5a7ba61be909ae9e4889768a3453ebb0dec392e2/monaco-editor/typedoc/monaco.d.ts#L3473)

#### 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](https://github.com/dididy/zeppelin/blob/fix/ZEPPELIN-6197/6229/zeppelin-web-angular/src/app/pages/workspace/notebook/action-bar/action-bar.component.ts#L220-L222)([ZEPPELIN-6279](https://issues.apache.org/jira/secure/RapidBoard.jspa?rapidView=632&view=detail&selectedIssue=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
<img width="605" height="1088" alt="image" src="https://github.com/user-attachments/assets/2c4bc264-07e5-4abe-93bb-a2656a86527b" />

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](https://issues.apache.org/jira/browse/ZEPPELIN-6197)]
* [[ZEPPELIN-6229](https://issues.apache.org/jira/browse/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


Closes #5064 from dididy/fix/ZEPPELIN-6197/6229.

Signed-off-by: ChanHo Lee <[email protected]>

Author: dididy

zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html

@@ -23,6 +23,7 @@
     [currentRevision]="currentRevision"
     (tableHideChange)="setAllParagraphTableHide($event)"
     (editorHideChange)="setAllParagraphEditorHide($event)"
+    #actionBar
   ></zeppelin-notebook-action-bar>
   <div class="flex-container">
     <div
@@ -87,6 +88,7 @@
             (selected)="onParagraphSelect($event)"
             (triggerSaveParagraph)="saveParagraph($event)"
             (saveNoteTimer)="startSaveTimer()"
+            (searchCode)="actionBar.searchCode()"
           ></zeppelin-notebook-paragraph>
         </div>
       </div>

zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts

@@ -198,6 +198,7 @@ export class NotebookComponent extends MessageListenersManager implements OnInit
           // Call when next tick
           setTimeout(() => {
             scrollIntoViewIfNeeded(paragraphComponent.getElement());
+            paragraphComponent.focusEditor();
           });
         }
       }

zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/code-editor/code-editor.component.ts

@@ -57,6 +57,7 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
   @Output() readonly textChanged = new EventEmitter<string>();
   @Output() readonly editorBlur = new EventEmitter<void>();
   @Output() readonly editorFocus = new EventEmitter<void>();
+  @Output() readonly toggleEditorShow = new EventEmitter<void>();
   private editor?: IStandaloneCodeEditor;
   private monacoDisposables: IDisposable[] = [];
   height = 18;
@@ -108,6 +109,72 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
     }
   }
 
+  // Handle Ctrl+Alt+E: Toggle editor show/hide
+  handleToggleEditorShow() {
+    this.toggleEditorShow.emit();
+  }
+
+  // Handle Ctrl+K: Cut current line to clipboard
+  async handleCutLine() {
+    if (!this.editor) {
+      return;
+    }
+
+    const position = this.editor.getPosition();
+    const model = this.editor.getModel();
+    if (!position || !model) {
+      return;
+    }
+
+    const lineNumber = position.lineNumber;
+    const lineContent = model.getLineContent(lineNumber);
+
+    if (!lineContent) {
+      return;
+    }
+
+    await navigator.clipboard.writeText(lineContent);
+
+    this.editor.executeEdits('cut-line', [
+      {
+        range: new monaco.Range(lineNumber, 1, lineNumber, lineContent.length + 1),
+        text: '',
+        forceMoveMarkers: true
+      }
+    ]);
+  }
+
+  // Handle Ctrl+Y: Paste from clipboard at current position
+  async handlePasteFromClipboard() {
+    if (!this.editor) {
+      return;
+    }
+
+    const text = await navigator.clipboard.readText();
+    const position = this.editor.getPosition();
+    if (position) {
+      this.editor.executeEdits('my-source', [
+        {
+          range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+          text: text,
+          forceMoveMarkers: true
+        }
+      ]);
+    }
+  }
+
+  // Handle Ctrl+S: Show find widget
+  handleShowFind() {
+    if (this.editor) {
+      this.editor.getAction('actions.find').run();
+
+      // Focus on the find widget input field
+      const findInput = document.querySelector('.find-widget .input') as HTMLInputElement;
+      findInput.focus();
+      findInput.select();
+    }
+  }
+
   initializedEditor(editor: IEditor) {
     this.editor = editor as IStandaloneCodeEditor;
     this.editor.addCommand(
@@ -119,6 +186,18 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
       },
       '!suggestWidgetVisible'
     );
+    this.editor.addCommand(monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KeyE, () => {
+      this.handleToggleEditorShow();
+    });
+    this.editor.addCommand(monaco.KeyMod.WinCtrl | monaco.KeyCode.KeyK, () => {
+      this.handleCutLine();
+    });
+    this.editor.addCommand(monaco.KeyMod.WinCtrl | monaco.KeyCode.KeyY, () => {
+      this.handlePasteFromClipboard();
+    });
+    this.editor.addCommand(monaco.KeyMod.WinCtrl | monaco.KeyCode.KeyS, () => {
+      this.handleShowFind();
+    });
 
     this.updateEditorOptions(this.editor);
     this.setParagraphMode();
@@ -161,6 +240,9 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
       scrollbar: {
         handleMouseWheel: false,
         alwaysConsumeMouseWheel: false
+      },
+      find: {
+        addExtraSpaceOnTop: false
       }
     });
   }

zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/control/control.component.ts

@@ -85,6 +85,14 @@ export class NotebookParagraphControlComponent implements OnInit, OnChanges {
     trigger(): void;
   }> = [];
 
+  formatShortcut(shortcut: string, isMac: boolean) {
+    if (isMac) {
+      return shortcut.replace('Alt', 'Option');
+    }
+
+    return shortcut;
+  }
+
   updateListOfMenu() {
     this.listOfMenu = [
       {
@@ -93,23 +101,23 @@ export class NotebookParagraphControlComponent implements OnInit, OnChanges {
         disabled: this.isEntireNoteRunning,
         icon: 'play-circle',
         trigger: () => this.trigger(this.runParagraph),
-        shortCut: this.isMac ? '⇧+⌘+Enter' : 'Shift+Ctrl+Enter'
+        shortCut: this.formatShortcut('Shift+Enter', this.isMac)
       },
       {
         label: 'Run all above',
         show: !this.first,
         disabled: this.isEntireNoteRunning,
         icon: 'up-square',
         trigger: () => this.trigger(this.runAllAbove),
-        shortCut: this.isMac ? '⇧+⌘+Enter' : 'Shift+Ctrl+Enter'
+        shortCut: this.formatShortcut('Shift+Ctrl+Up', this.isMac)
       },
       {
         label: 'Run all below',
         show: !this.last,
         disabled: this.isEntireNoteRunning,
         icon: 'down-square',
         trigger: () => this.trigger(this.runAllBelowAndCurrent),
-        shortCut: this.isMac ? '⇧+⌘+Enter' : 'Shift+Ctrl+Enter'
+        shortCut: this.formatShortcut('Shift+Ctrl+Down', this.isMac)
       },
       {
         label: 'Link this paragraph',
@@ -119,79 +127,79 @@ export class NotebookParagraphControlComponent implements OnInit, OnChanges {
         trigger: () => {
           this.openSingleParagraph.emit(this.pid);
         },
-        shortCut: this.isMac ? '⌥+⌘+T' : 'Alt+Ctrl+T'
+        shortCut: this.formatShortcut('Ctrl+Alt+W', this.isMac)
       },
       {
         label: 'Clear output',
         show: true,
         disabled: this.isEntireNoteRunning,
         icon: 'fire',
         trigger: () => this.clearParagraphOutput(),
-        shortCut: this.isMac ? '⌥+⌘+L' : 'Alt+Ctrl+L'
+        shortCut: this.formatShortcut('Ctrl+Alt+L', this.isMac)
       },
       {
         label: 'Remove',
         show: this.paragraphLength > 1,
         disabled: this.isEntireNoteRunning,
         icon: 'delete',
         trigger: () => this.onRemoveParagraph(),
-        shortCut: this.isMac ? '⇧+Del (Command)' : 'Shift+Del (Command)'
+        shortCut: this.formatShortcut('Ctrl+Alt+D', this.isMac)
       },
       {
-        label: 'Move up',
+        label: 'Move paragraph up',
         show: !this.first,
         disabled: this.isEntireNoteRunning,
         icon: 'up',
         trigger: () => this.trigger(this.moveUp),
-        shortCut: `${this.isMac ? '⌘' : 'Ctrl'}+K (Command)`
+        shortCut: this.formatShortcut('Ctrl+Alt+K', this.isMac)
       },
       {
-        label: 'Move down',
+        label: 'Move paragraph down',
         show: !this.last,
         disabled: this.isEntireNoteRunning,
         icon: 'down',
         trigger: () => this.trigger(this.moveDown),
-        shortCut: `${this.isMac ? '⌘' : 'Ctrl'}+J (Command)`
+        shortCut: this.formatShortcut('Ctrl+Alt+J', this.isMac)
       },
       {
         label: 'Insert new',
         show: true,
         disabled: this.isEntireNoteRunning,
         icon: 'plus',
         trigger: () => this.trigger(this.insertNew),
-        shortCut: `B (Command)`
+        shortCut: this.formatShortcut('Ctrl+Alt+B', this.isMac)
       },
       {
         label: 'Clone paragraph',
         show: true,
         disabled: this.isEntireNoteRunning,
         icon: 'copy',
         trigger: () => this.trigger(this.cloneParagraph),
-        shortCut: `C (Command)`
+        shortCut: this.formatShortcut('Shift+Ctrl+C', this.isMac)
       },
       {
         label: this.title ? 'Hide Title' : 'Show Title',
         show: true,
         disabled: false,
         icon: 'font-colors',
         trigger: () => this.toggleTitle(),
-        shortCut: `T (Command)`
+        shortCut: this.formatShortcut('Ctrl+Alt+T', this.isMac)
       },
       {
         label: this.lineNumbers ? 'Hide line numbers' : 'Show line numbers',
         show: true,
         disabled: false,
         icon: 'ordered-list',
         trigger: () => this.toggleLineNumbers(),
-        shortCut: `L (Command)`
+        shortCut: this.formatShortcut('Ctrl+Alt+M', this.isMac)
       },
       {
         label: this.enabled ? 'Disable run' : 'Enable run',
         show: true,
         disabled: this.isEntireNoteRunning,
         icon: 'api',
         trigger: () => this.toggleEnabled(),
-        shortCut: `R (Command)`
+        shortCut: this.formatShortcut('Ctrl+Alt+R', this.isMac)
       }
     ];
   }

zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.html

@@ -82,6 +82,7 @@
       (editorBlur)="onEditorBlur()"
       (editorFocus)="onEditorFocus()"
       (textChanged)="textChanged($event)"
+      (toggleEditorShow)="toggleEditorShow()"
     ></zeppelin-notebook-paragraph-code-editor>
     <zeppelin-notebook-paragraph-progress
       *ngIf="paragraph.status === 'RUNNING'"