fix(notebook-cell): fix drag and drop issues (#2229)

* fix(notebook-cell): fix drag and drop issues

* fix(notebook-cell): stop propogation of editor events

* fix(notebook-cell): code-snippet border radius cutting off text

* fix(notebook-cell): propogate keyboard event on shift + enter

libs/components/src/code-editor/code-editor.ts

@@ -121,7 +121,7 @@ export class CovalentCodeEditor extends LitElement {
     this.dispatchEvent(
       new CustomEvent('editor-ready', {
         detail: { editor: this.editor },
-        bubbles: true,
+        bubbles: false,
         composed: true,
       })
     );
@@ -143,7 +143,7 @@ export class CovalentCodeEditor extends LitElement {
       this.editor?.onDidFocusEditorText(() => {
         this.dispatchEvent(
           new CustomEvent('editor-focus', {
-            bubbles: true,
+            bubbles: false,
             composed: true,
           })
         );
@@ -153,7 +153,7 @@ export class CovalentCodeEditor extends LitElement {
       this.editor?.onDidBlurEditorText(() => {
         this.dispatchEvent(
           new CustomEvent('editor-blur', {
-            bubbles: true,
+            bubbles: false,
             composed: true,
           })
         );

libs/components/src/icon-button/icon-button.scss

@@ -1,3 +1,7 @@
 :host {
   color: var(--mdc-theme-text-icon-on-background);
+
+  .mdc-icon-button {
+    cursor: var(--cv-icon-button-cursor, pointer);
+  }
 }

libs/components/src/notebook-cell/notebook-cell.scss

@@ -1,12 +1,13 @@
 :host {
-  --mdc-icon-button-size: 24px;
+  --mdc-icon-button-size: 2rem;
 
   font-family: var(--mdc-typography-body1-font-family);
   width: 100%;
 }
 
 cv-code-snippet {
   background-color: var(--cv-theme-surface);
+  border-radius: 0;
   box-sizing: border-box;
 }
 
@@ -48,6 +49,8 @@ cv-code-editor {
 }
 
 .timesExecuted {
+  --cv-icon-button-cursor: grab;
+
   align-items: center;
   box-sizing: border-box;
   color: var(--cv-theme-on-surface-38);
@@ -62,15 +65,21 @@ cv-code-editor {
     overflow: hidden;
     text-align: right;
     text-overflow: ellipsis;
+    user-select: none;
     white-space: nowrap;
     width: 50px;
   }
 
-  cv-icon {
+  cv-icon-button {
     color: var(--cv-theme-on-surface-variant);
+    cursor: grab;
     padding: 0.5rem;
     visibility: hidden;
     transition: visibility 0.3s ease;
+
+    &:active {
+      --cv-icon-button-cursor: grabbing;
+    }
   }
 }
 
@@ -82,7 +91,7 @@ cv-code-editor {
   }
 
   &:hover {
-    cv-icon {
+    cv-icon-button {
       visibility: visible;
     }
   }

libs/components/src/notebook-cell/notebook-cell.stories.js

@@ -15,7 +15,7 @@ export default {
     selected: true,
     hideCount: false,
     hideEditor: false,
-    theme: 'cv-light',
+    editorTheme: 'cv-light',
     timesExecuted: 2,
   },
 };
@@ -28,13 +28,13 @@ const Template = ({
   selected,
   hideCount,
   hideEditor,
-  theme,
+  editorTheme,
   timesExecuted,
   error,
   output,
 }) => {
   return `<div style="width: 60vw;">
-            <cv-notebook-cell code="${code}" index="${index}" language="${language}" timesExecuted="${timesExecuted}" editorTheme="${theme}" ${
+            <cv-notebook-cell code="${code}" index="${index}" language="${language}" timesExecuted="${timesExecuted}" editorTheme="${editorTheme}" ${
     hideEditor ? 'hideEditor' : ''
   } ${selected ? 'selected' : ''} ${loading ? 'loading' : ''} ${
     hideCount ? 'hideCount' : ''

libs/components/src/notebook-cell/notebook-cell.ts

@@ -2,11 +2,7 @@ import { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import styles from './notebook-cell.scss?inline';
 import { classMap } from 'lit/directives/class-map.js';
-import {
-  KeyCode,
-  KeyMod,
-  editor,
-} from 'monaco-editor/esm/vs/editor/editor.api.js';
+import { KeyCode, editor } from 'monaco-editor/esm/vs/editor/editor.api.js';
 
 import '../code-editor/code-editor';
 import '../code-snippet/code-snippet';
@@ -19,10 +15,6 @@ declare global {
   }
 }
 
-enum CvCellEvents {
-  RUN_CODE = 'cell-run-code',
-}
-
 /**
  * Notebook cell
  *
@@ -79,7 +71,7 @@ export class CovalentNotebookCell extends LitElement {
   hideCount = false;
 
   /**
-   * Whether the execution count is shown
+   * Theme for the code editor
    */
   @property({ type: String })
   editorTheme = '';
@@ -145,25 +137,20 @@ export class CovalentNotebookCell extends LitElement {
     this.code = e.detail.code;
   }
 
-  handleRun() {
-    this.dispatchEvent(
-      new CustomEvent(CvCellEvents.RUN_CODE, {
-        detail: { index: this.index, code: this.code },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  setEditorFocus(setFocus: boolean) {
+  setEditorFocus(e: CustomEvent, setFocus: boolean) {
+    e.stopImmediatePropagation();
     this._editorFocused = setFocus;
     this.requestUpdate();
   }
 
   setEditorInstance(e: CustomEvent) {
+    e.stopImmediatePropagation();
     this._editor = e.detail.editor;
-    this._editor.addCommand(KeyMod.Shift | KeyCode.Enter, () => {
-      // Prevent the default shift enter action (inserts line below) and do nothing
+    this._editor.onKeyDown((e) => {
+      if (e.shiftKey && e.keyCode === KeyCode.Enter) {
+        e.preventDefault(); // Prevents adding a new line
+        // The event will still propagate and can be capture with an event listener
+      }
     });
   }
 
@@ -234,8 +221,8 @@ export class CovalentNotebookCell extends LitElement {
       ? html`<cv-code-editor
           @code-change="${this.handleCodeChange}"
           @editor-ready="${this.setEditorInstance}"
-          @editor-focus="${() => this.setEditorFocus(true)}"
-          @editor-blur="${() => this.setEditorFocus(false)}"
+          @editor-focus="${(e: CustomEvent) => this.setEditorFocus(e, true)}"
+          @editor-blur="${(e: CustomEvent) => this.setEditorFocus(e, false)}"
           .code="${this.code}"
           .language="${this.language}"
           .options="${this.editorOptions}"
@@ -278,23 +265,19 @@ export class CovalentNotebookCell extends LitElement {
       focused: this._editorFocused,
     };
     return html`
-      <div
-        class="${classMap(classes)}"
-        draggable="true"
-        @contextmenu=${this.showContextMenu}
-      >
-        <div class="selectionIndicatorWrapper" draggable="false">
+      <div class="${classMap(classes)}" @contextmenu=${this.showContextMenu}>
+        <div class="selectionIndicatorWrapper">
           <div class="selectionIndicator"></div>
         </div>
 
-        <div class="timesExecutedWrapper" draggable="false">
+        <div class="timesExecutedWrapper">
           <div class="timesExecuted">
-            <cv-icon>drag_indicator</cv-icon>
+            <cv-icon-button icon="drag_indicator"></cv-icon-button>
             <div class="executionCount">${this.renderExecutionCount()}</div>
           </div>
         </div>
 
-        <div class="cellOutputWrapper" draggable="false">
+        <div class="cellOutputWrapper">
           ${this.renderEditor()} ${this.renderOutput()}
         </div>
       </div>