[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;
@@ -120,6 +121,71 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
       '!suggestWidgetVisible'
     );
 
+    this.editor.addCommand(monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KeyE, () => {
+      this.toggleEditorShow.emit();
+    });
+
+    this.editor.addCommand(monaco.KeyMod.WinCtrl | monaco.KeyCode.KeyK, async () => {
+      if (this.editor) {
+        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
+          }
+        ]);
+      }
+    });
+
+    this.editor.addCommand(monaco.KeyMod.WinCtrl | monaco.KeyCode.KeyY, async () => {
+      if (this.editor) {
+        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
+            }
+          ]);
+        }
+      }
+    });
+
+    this.editor.addCommand(monaco.KeyMod.WinCtrl | monaco.KeyCode.KeyS, async () => {
+      if (this.editor) {
+        const controller = this.editor.getContribution(
+          'editor.contrib.findController'
+        ) as MonacoEditor.IEditorContribution & {
+          start(options: { forceRevealReplace: boolean; seedSearchStringFromSelection: boolean }): void;
+          getFindInputFocusElement(): HTMLElement | null;
+        };
+        if (controller) {
+          controller.start({
+            forceRevealReplace: false,
+            seedSearchStringFromSelection: true
+          });
+          controller.getFindInputFocusElement()?.focus();
+        }
+      }
+    });
+
     this.updateEditorOptions(this.editor);
     this.setParagraphMode();
     this.initEditorListener(this.editor);
@@ -160,6 +226,9 @@ export class NotebookParagraphCodeEditorComponent implements OnChanges, OnDestro
       scrollbar: {
         handleMouseWheel: false,
         alwaysConsumeMouseWheel: false
+      },
+      find: {
+        addExtraSpaceOnTop: false
       }
     });
   }

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'"

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

@@ -84,6 +84,7 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
   @Output() readonly triggerSaveParagraph = new EventEmitter<string>();
   @Output() readonly selected = new EventEmitter<string>();
   @Output() readonly selectAtIndex = new EventEmitter<number>();
+  @Output() readonly searchCode = new EventEmitter();
 
   private destroy$ = new Subject();
   private mode: Mode = 'command';
@@ -155,6 +156,11 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
     }
   }
 
+  toggleEditorShow() {
+    this.setEditorHide(!this.paragraph.config.editorHide);
+    this.commitParagraph();
+  }
+
   saveParagraph() {
     const dirtyText = this.paragraph.text;
     if (dirtyText === undefined || dirtyText === this.originalText) {
@@ -356,7 +362,7 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
     this.cdr.markForCheck();
   }
 
-  moveUpParagraph() {
+  moveCursorUp() {
     const newIndex = this.note.paragraphs.findIndex(p => p.id === this.paragraph.id) - 1;
     if (newIndex < 0 || newIndex >= this.note.paragraphs.length) {
       return;
@@ -369,7 +375,7 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
     this.messageService.moveParagraph(this.paragraph.id, newIndex);
   }
 
-  moveDownParagraph() {
+  moveCursorDown() {
     const newIndex = this.note.paragraphs.findIndex(p => p.id === this.paragraph.id) + 1;
     if (newIndex < 0 || newIndex >= this.note.paragraphs.length) {
       return;
@@ -382,6 +388,41 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
     this.messageService.moveParagraph(this.paragraph.id, newIndex);
   }
 
+  moveParagraphUp() {
+    let newIndex = -1;
+    for (let i = 0; i < this.note.paragraphs.length; i++) {
+      if (this.note.paragraphs[i].id === this.paragraph.id) {
+        newIndex = i - 1;
+        break;
+      }
+    }
+    if (newIndex < 0 || newIndex >= this.note.paragraphs.length) {
+      return;
+    }
+    this.messageService.moveParagraph(this.paragraph.id, newIndex);
+  }
+
+  moveParagraphDown() {
+    let newIndex = -1;
+    for (let i = 0; i < this.note.paragraphs.length; i++) {
+      if (this.note.paragraphs[i].id === this.paragraph.id) {
+        newIndex = i + 1;
+        break;
+      }
+    }
+
+    if (newIndex < 0 || newIndex >= this.note.paragraphs.length) {
+      return;
+    }
+    this.messageService.moveParagraph(this.paragraph.id, newIndex);
+  }
+
+  clearParagraphOutput() {
+    if (!this.isEntireNoteRunning) {
+      this.messageService.paragraphClearOutput(this.paragraph.id);
+    }
+  }
+
   changeColWidth(needCommit: boolean, updateResult = true) {
     if (needCommit) {
       this.commitParagraph();
@@ -485,89 +526,15 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
           return; // ignore shortcut to make input work
         }
 
-        if (this.mode === 'command') {
-          switch (action) {
-            case ParagraphActions.InsertAbove:
-              this.insertParagraph('above');
-              break;
-            case ParagraphActions.InsertBelow:
-              this.insertParagraph('below');
-              break;
-            case ParagraphActions.SwitchEditorShow:
-              this.setEditorHide(!this.paragraph.config.editorHide);
-              this.commitParagraph();
-              break;
-            case ParagraphActions.SwitchOutputShow:
-              this.setTableHide(!this.paragraph.config.tableHide);
-              this.commitParagraph();
-              break;
-            case ParagraphActions.SwitchTitleShow:
-              this.paragraph.config.title = !this.paragraph.config.title;
-              this.commitParagraph();
-              break;
-            case ParagraphActions.SwitchLineNumber:
-              this.paragraph.config.lineNumbers = !this.paragraph.config.lineNumbers;
-              this.commitParagraph();
-              break;
-            case ParagraphActions.MoveToUp:
-              event.preventDefault();
-              this.moveUpParagraph();
-              break;
-            case ParagraphActions.MoveToDown:
-              event.preventDefault();
-              this.moveDownParagraph();
-              break;
-            case ParagraphActions.SwitchEnable:
-              this.paragraph.config.enabled = !this.paragraph.config.enabled;
-              this.commitParagraph();
-              break;
-            case ParagraphActions.ReduceWidth:
-              if (!this.paragraph.config.colWidth) {
-                throw new Error('colWidth is required');
-              }
-              this.paragraph.config.colWidth = Math.max(1, this.paragraph.config.colWidth - 1);
-              this.cdr.markForCheck();
-              this.changeColWidth(true);
-              break;
-            case ParagraphActions.IncreaseWidth:
-              if (!this.paragraph.config.colWidth) {
-                throw new Error('colWidth is required');
-              }
-              this.paragraph.config.colWidth = Math.min(12, this.paragraph.config.colWidth + 1);
-              this.cdr.markForCheck();
-              this.changeColWidth(true);
-              break;
-            case ParagraphActions.Delete:
-              this.removeParagraph();
-              break;
-            case ParagraphActions.SelectAbove:
-              event.preventDefault();
-              this.selectAtIndex.emit(this.index - 1);
-              break;
-            case ParagraphActions.SelectBelow:
-              event.preventDefault();
-              this.selectAtIndex.emit(this.index + 1);
-              break;
-            default:
-              break;
-          }
-        }
         switch (action) {
-          case ParagraphActions.Link:
-            this.openSingleParagraph(this.paragraph.id);
-            break;
-          case ParagraphActions.EditMode:
-            if (this.mode === 'command') {
-              event.preventDefault();
-            }
-            if (!this.paragraph.config.editorHide) {
-              this.switchMode('edit');
-            }
-            break;
           case ParagraphActions.Run:
             event.preventDefault();
             this.runParagraph();
             break;
+          case ParagraphActions.RunAbove:
+            this.waitConfirmFromEdit = true;
+            this.runAllAbove();
+            break;
           case ParagraphActions.RunBelow:
             this.waitConfirmFromEdit = true;
             this.runAllBelowAndCurrent();
@@ -576,6 +543,75 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit,
             event.preventDefault();
             this.cancelParagraph();
             break;
+          case ParagraphActions.MoveCursorUp:
+            event.preventDefault();
+            this.moveCursorUp();
+            break;
+          case ParagraphActions.MoveCursorDown:
+            event.preventDefault();
+            this.moveCursorDown();
+            break;
+          case ParagraphActions.Delete:
+            this.removeParagraph();
+            break;
+          case ParagraphActions.InsertAbove:
+            this.insertParagraph('above');
+            break;
+          case ParagraphActions.InsertBelow:
+            this.insertParagraph('below');
+            break;
+          case ParagraphActions.InsertCopyOfParagraphBelow:
+            this.cloneParagraph('below');
+            break;
+          case ParagraphActions.MoveParagraphUp:
+            event.preventDefault();
+            this.moveParagraphUp();
+            break;
+          case ParagraphActions.MoveParagraphDown:
+            event.preventDefault();
+            this.moveParagraphDown();
+            break;
+          case ParagraphActions.SwitchEnable:
+            this.paragraph.config.enabled = !this.paragraph.config.enabled;
+            this.commitParagraph();
+            break;
+          case ParagraphActions.SwitchOutputShow:
+            this.setTableHide(!this.paragraph.config.tableHide);
+            this.commitParagraph();
+            break;
+          case ParagraphActions.SwitchLineNumber:
+            this.paragraph.config.lineNumbers = !this.paragraph.config.lineNumbers;
+            this.commitParagraph();
+            break;
+          case ParagraphActions.SwitchTitleShow:
+            this.paragraph.config.title = !this.paragraph.config.title;
+            this.commitParagraph();
+            break;
+          case ParagraphActions.Clear:
+            this.clearParagraphOutput();
+            break;
+          case ParagraphActions.Link:
+            this.openSingleParagraph(this.paragraph.id);
+            break;
+          case ParagraphActions.ReduceWidth:
+            if (!this.paragraph.config.colWidth) {
+              throw new Error('colWidth is required');
+            }
+            this.paragraph.config.colWidth = Math.max(1, this.paragraph.config.colWidth - 1);
+            this.cdr.markForCheck();
+            this.changeColWidth(true);
+            break;
+          case ParagraphActions.IncreaseWidth:
+            if (!this.paragraph.config.colWidth) {
+              throw new Error('colWidth is required');
+            }
+            this.paragraph.config.colWidth = Math.min(12, this.paragraph.config.colWidth + 1);
+            this.cdr.markForCheck();
+            this.changeColWidth(true);
+            break;
+          case ParagraphActions.FindInCode:
+            this.searchCode.emit();
+            break;
           default:
             break;
         }