feat(editors): indicate when editor contains error or warning

package.json

@@ -60,7 +60,7 @@
     "getos": "^3.2.1",
     "mobx": "^6.5.0",
     "mobx-react": "^7.3.0",
-    "monaco-editor": "^0.21.3",
+    "monaco-editor": "^0.22.0",
     "namor": "^2.0.2",
     "node-watch": "^0.7.3",
     "p-debounce": "^2.0.0",
@@ -134,7 +134,7 @@
     "log-symbols": "^6.0.0",
     "markdownlint-cli2": "^0.18.0",
     "mini-css-extract-plugin": "^2.6.1",
-    "monaco-editor-webpack-plugin": "2.1.0",
+    "monaco-editor-webpack-plugin": "^3.0.0",
     "npm-run-all2": "^7.0.1",
     "postcss": "^8.4.25",
     "postcss-less": "^6.0.0",

src/less/components/editors.less

@@ -24,6 +24,20 @@
   }
 }
 
+// Set the toolbar text colour based on the mosaic's
+// current severity level.
+//    Hint=1,
+//    Info=2,
+//    Warning=4,
+//    Error=8
+.mosaic-toolbar-severity-level-8 {
+  color: @red4;
+}
+
+.mosaic-toolbar-severity-level-4 {
+  color: @orange4;
+}
+
 // TODO: support new file
 // update if list of Editor ID changes
 @editor-ids: main\.js, renderer\.js, index\.html, preload\.js, styles\.css;

src/renderer/app.tsx

@@ -68,6 +68,7 @@ export class App {
     }
 
     this.state.editorMosaic.set(editorValues);
+    this.state.editorMosaic.editorSeverityMap.clear();
 
     this.state.gistId = gistId || '';
     this.state.localPath = localFiddle?.filePath;

src/renderer/components/editors.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import type * as MonacoType from 'monaco-editor';
 import {
@@ -42,8 +43,6 @@ export const Editors = observer(
       super(props);
 
       this.onChange = this.onChange.bind(this);
-      this.renderEditor = this.renderEditor.bind(this);
-      this.renderTile = this.renderTile.bind(this);
       this.setFocused = this.setFocused.bind(this);
 
       this.state = {
@@ -184,81 +183,82 @@ export const Editors = observer(
       }
     }
 
-    /**
-     * Renders the little tool bar on top of each panel
-     */
-    public renderToolbar(
-      { title }: MosaicWindowProps<EditorId>,
-      id: EditorId,
-    ): JSX.Element {
-      const { appState } = this.props;
-
-      return (
-        <div role="toolbar">
-          {/* Left */}
-          <div>
-            <h5>{title}</h5>
-          </div>
-          {/* Middle */}
-          <div />
-          {/* Right */}
-          <div className="mosaic-controls">
-            <MaximizeButton id={id} appState={appState} />
-            <RemoveButton id={id} appState={appState} />
+    public render() {
+      const { editorMosaic } = this.props.appState;
+      // HACK: we use this to force re-renders of the toolbar when severity changes
+      const severityLevel = toJS(editorMosaic.editorSeverityMap);
+      /**
+       * Renders the little toolbar on top of each panel
+       */
+      const renderToolbar = (
+        { title }: MosaicWindowProps<EditorId>,
+        id: EditorId,
+      ) => {
+        const { appState } = this.props;
+        return (
+          <div role="toolbar">
+            {/* Left */}
+            <div>
+              <h5
+                className={`mosaic-toolbar-severity-level-${severityLevel.get(id)}`}
+              >
+                {title}
+              </h5>
+            </div>
+            {/* Middle */}
+            <div />
+            {/* Right */}
+            <div className="mosaic-controls">
+              <MaximizeButton id={id} appState={appState} />
+              <RemoveButton id={id} appState={appState} />
+            </div>
           </div>
-        </div>
-      );
-    }
-
-    /**
-     * Renders a Mosaic tile
-     */
-    public renderTile(id: EditorId, path: Array<MosaicBranch>): JSX.Element {
-      const content = this.renderEditor(id);
-      const title = getEditorTitle(id as EditorId);
-
-      return (
-        <MosaicWindow<EditorId>
-          className={id}
-          path={path}
-          title={title}
-          renderToolbar={(props: MosaicWindowProps<EditorId>) =>
-            this.renderToolbar(props, id)
-          }
-        >
-          {content}
-        </MosaicWindow>
-      );
-    }
-
-    /**
-     * Render an editor
-     */
-    public renderEditor(id: EditorId): JSX.Element | null {
-      const { appState } = this.props;
-      const { monaco } = this.state;
+        );
+      };
 
-      return (
-        <Editor
-          id={id}
-          monaco={monaco}
-          appState={appState}
-          monacoOptions={defaultMonacoOptions}
-          setFocused={this.setFocused}
-        />
-      );
-    }
+      /**
+       * Renders a Mosaic tile
+       */
+      const renderTile = (id: EditorId, path: Array<MosaicBranch>) => {
+        const content = renderEditor(id);
+        const title = getEditorTitle(id as EditorId);
+
+        return (
+          <MosaicWindow<EditorId>
+            className={id}
+            path={path}
+            title={title}
+            renderToolbar={(props: MosaicWindowProps<EditorId>) =>
+              renderToolbar(props, id)
+            }
+          >
+            {content}
+          </MosaicWindow>
+        );
+      };
 
-    public render() {
-      const { editorMosaic } = this.props.appState;
+      const renderEditor = (id: EditorId) => {
+        const { appState } = this.props;
+        const { monaco } = this.state;
+
+        return (
+          <Editor
+            id={id}
+            monaco={monaco}
+            appState={appState}
+            monacoOptions={defaultMonacoOptions}
+            setFocused={this.setFocused}
+          />
+        );
+      };
 
       return (
         <Mosaic<EditorId>
           className={`focused__${this.state.focused}`}
           onChange={this.onChange}
           value={editorMosaic.mosaic}
           zeroStateView={<RenderNonIdealState editorMosaic={editorMosaic} />}
-          renderTile={this.renderTile}
+          renderTile={renderTile}
         />
       );
     }

src/renderer/editor-mosaic.ts

@@ -1,4 +1,11 @@
-import { action, computed, makeObservable, observable, reaction } from 'mobx';
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  reaction,
+  runInAction,
+} from 'mobx';
 import type * as MonacoType from 'monaco-editor';
 import { MosaicDirection, MosaicNode, getLeaves } from 'react-mosaic-component';
 
@@ -84,6 +91,7 @@ export class EditorMosaic {
       setEditorFromBackup: action,
       addNewFile: action,
       renameFile: action,
+      editorSeverityMap: observable,
     });
 
     // whenever the mosaics are changed,
@@ -104,6 +112,9 @@ export class EditorMosaic {
         }
       },
     );
+    // TODO: evaluate if we need to dispose of the listener when this class is
+    // destroyed via FinalizationRegistry
+    window.monaco.editor.onDidChangeMarkers(this.setSeverityLevels.bind(this));
   }
 
   /** File is visible, focus file content */
@@ -160,8 +171,17 @@ export class EditorMosaic {
     // create a monaco model with the file's contents
     const { monaco } = window;
     const language = monacoLanguage(id);
-    const model = monaco.editor.createModel(value, language);
 
+    // set a URI for each editor for stable identification for monaco features
+    const uri = monaco.Uri.parse(`inmemory://fiddle/${id}`);
+    let model: MonacoType.editor.ITextModel;
+    const maybeModel = monaco.editor.getModel(uri);
+    if (maybeModel) {
+      model = maybeModel;
+      model.setValue(value);
+    } else {
+      model = monaco.editor.createModel(value, language, uri);
+    }
     // if we have an editor available, use the monaco model now.
     // otherwise, save the file in `this.backups` for future use.
     const backup: EditorBackup = { model };
@@ -263,6 +283,7 @@ export class EditorMosaic {
 
     this.backups.delete(id);
     this.editors.set(id, editor);
+    this.editorSeverityMap.set(id, window.monaco.MarkerSeverity.Hint);
     this.setEditorFromBackup(editor, backup);
   }
 
@@ -342,6 +363,10 @@ export class EditorMosaic {
     }
   };
 
+  public getAllEditorIds(): EditorId[] {
+    return [...this.editors.keys()];
+  }
+
   public getAllEditors(): Editor[] {
     return [...this.editors.values()];
   }
@@ -380,4 +405,28 @@ export class EditorMosaic {
       disposable.dispose();
     });
   }
+
+  public editorSeverityMap = observable.map<
+    EditorId,
+    MonacoType.MarkerSeverity
+  >();
+
+  public setSeverityLevels() {
+    runInAction(() => {
+      for (const id of this.getAllEditorIds()) {
+        const markers = window.monaco.editor.getModelMarkers({
+          resource: window.monaco.Uri.parse(`inmemory://fiddle/${id}`),
+        });
+
+        const maxSeverity: MonacoType.MarkerSeverity = markers.reduce(
+          (max, marker) => {
+            return Math.max(max, marker.severity);
+          },
+          window.monaco.MarkerSeverity.Hint,
+        );
+
+        this.editorSeverityMap.set(id, maxSeverity);
+      }
+    });
+  }
 }

tests/mocks/monaco.ts

@@ -26,6 +26,7 @@ export class MonacoMock {
   public latestModel: any;
   public editor = {
     create: vi.fn(() => (this.latestEditor = new MonacoEditorMock())),
+    getModel: vi.fn(),
     createModel: vi.fn((value: string, language: string) => {
       const model = new MonacoModelMock(value, language);
       this.latestModel = model;
@@ -35,6 +36,8 @@ export class MonacoMock {
     onDidFocusEditorText: vi.fn(),
     revealLine: vi.fn(),
     setTheme: vi.fn(),
+    onDidChangeMarkers: vi.fn(),
+    getModelMarkers: vi.fn(() => []),
   };
   public languages = {
     register: vi.fn(),
@@ -46,6 +49,15 @@ export class MonacoMock {
       },
     },
   };
+  public Uri = {
+    parse: vi.fn((uri: string) => ({ toString: () => uri })),
+  };
+  public MarkerSeverity = {
+    Hint: 1,
+    Info: 2,
+    Warning: 4,
+    Error: 8,
+  };
   public KeyMod = {
     CtrlCmd: vi.fn(),
   };