fix(notebooks): update monaco editor configuration

Teradata · Jul 1, 2024 · 310b2a8 · 310b2a8
1 parent e8106bd
commit 310b2a8
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 13 deletions.
diff --git a/libs/components/project.json b/libs/components/project.json
@@ -15,6 +15,12 @@
     "build": {
       "executor": "nx:run-commands",
       "options": {
+        "customWebpackConfig": {
+          "path": "./monaco-webpack.config.js",
+          "mergeRules": {
+            "module.rules": "prepend"
+          }
+        },
         "commands": [
           "mkdir -p dist/libs/components/",
           "vite build --config libs/components/vite.config.js  --outDir dist/libs/components",

diff --git a/libs/components/src/cell/cell.scss b/libs/components/src/cell/cell.scss
@@ -2,7 +2,6 @@
   --mdc-icon-button-size: 24px;
 
   font-family: var(--mdc-typography-body1-font-family);
-  height: 100%;
   width: 100%;
 }
 

diff --git a/libs/components/src/code-editor/code-editor.ts b/libs/components/src/code-editor/code-editor.ts
@@ -98,11 +98,12 @@ export class CovalentCodeEditor extends LitElement {
       inherit: true,
       rules: [],
       colors: {
-        'editor.background': '#fdf9fc',
+        'editor.background': '#f6f3f6ff',
       },
     });
     this.editor = monaco.editor.create(container, {
       ...this.options,
+      fontLigatures: '',
       value: this.getCode(),
       language: this.getLang(),
       theme: this.getTheme(),

diff --git a/libs/components/src/notebook/notebook.ts b/libs/components/src/notebook/notebook.ts
@@ -1,5 +1,6 @@
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import markdownit from 'markdown-it';
 import styles from './notebook.scss?inline';
 import '../cell/cell';
 import '../icon/icon';
@@ -26,9 +27,15 @@ export class CovalentNotebook extends LitElement {
   /**
    * The cells in a notebook
    */
-  @property({ type: Object })
+  @property({ type: Array })
   cells: CellData[] = [];
 
+  /**
+   * Default language for cells in the notebook
+   */
+  @property({ type: String })
+  defaultLanguage!: string;
+
   private _draggedCellIndex: number | null = null;
 
   private _selectedCellIndex: number | null = null;
@@ -140,7 +147,8 @@ export class CovalentNotebook extends LitElement {
 
   convertMarkdowntoHTML(cell: CellData) {
     if (cell.language === 'markdown' && cell.code) {
-      cell.output = cell.code;
+      const md = markdownit({ html: true });
+      cell.output = md.render(cell.code);
       cell.showEditor = false;
     }
   }
@@ -183,6 +191,57 @@ export class CovalentNotebook extends LitElement {
     }
   }
 
+  initializeMonaco(): void {
+    // Define the MonacoEnvironment to specify the worker URL
+    window.MonacoEnvironment = {
+      getWorker: function (_moduleId, label) {
+        switch (label) {
+          case 'json':
+            return new Worker(
+              new URL(
+                '../../../../node_modules/monaco-editor/esm/vs/language/json/json.worker',
+                import.meta.url
+              ),
+              { type: 'module' }
+            );
+          case 'css':
+            return new Worker(
+              new URL(
+                '../../../../node_modules/monaco-editor/esm/vs/language/css/css.worker',
+                import.meta.url
+              ),
+              { type: 'module' }
+            );
+          case 'html':
+            return new Worker(
+              new URL(
+                '../../../../node_modules/monaco-editor/esm/vs/language/html/html.worker',
+                import.meta.url
+              ),
+              { type: 'module' }
+            );
+          case 'typescript':
+          case 'javascript':
+            return new Worker(
+              new URL(
+                '../../../../node_modules/monaco-editor/esm/vs/language/typescript/ts.worker',
+                import.meta.url
+              ),
+              { type: 'module' }
+            );
+          default:
+            return new Worker(
+              new URL(
+                '../../../../node_modules/monaco-editor/esm/vs/editor/editor.worker.js',
+                import.meta.url
+              ),
+              { type: 'module' }
+            );
+        }
+      },
+    };
+  }
+
   dispatchCustomCellEvent(name: string, cell?: CellData) {
     if (!cell && this._selectedCellIndex) {
       cell = this.cells[this._selectedCellIndex];
@@ -198,7 +257,14 @@ export class CovalentNotebook extends LitElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has('cells')) {
+      this.cells.forEach((cell) => this.convertMarkdowntoHTML(cell));
+    }
+  }
+
   protected firstUpdated(): void {
+    this.initializeMonaco();
     this.cells.forEach((cell) => this.convertMarkdowntoHTML(cell));
     this.requestUpdate();
   }
@@ -271,15 +337,13 @@ export class CovalentNotebook extends LitElement {
       <section class="notebookActions">
         <cv-button
           outlined
-          @click=${() => this.addCell({ code: '', language: 'sql' })}
-        >
-          <cv-icon style="font-size: 20px;">add</cv-icon>SQL cell
-        </cv-button>
-        <cv-button
-          outlined
-          @click=${() => this.addCell({ code: '', language: 'python' })}
+          @click=${() =>
+            this.addCell({
+              code: '',
+              language: this.defaultLanguage || 'python',
+            })}
         >
-          <cv-icon style="font-size: 20px;">add</cv-icon>Python cell
+          <cv-icon style="font-size: 20px;">add</cv-icon>Code cell
         </cv-button>
         <cv-button
           outlined