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

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();
@@ -160,6 +239,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'"