feat: Move error dialogue to bottom of editor.

cypress/e2e/diagramUpdate.spec.ts

@@ -81,14 +81,12 @@ A & B & C & D & E --> F & G & K & Z & i`);
     cy.visit(
       '/edit#pako:eNpljjEKwzAMRa8SNOcEnlt6gK5eVFvYJsgOqkwpIXevg9smEE1PnyfxF3DFExgISW-CczQ2D21cYU7a-SGYXRwyvTp9jUhuKlVP-eHy7zA-leQsMEmg_QOM0BLG5FujZVMsaCQmC6ahR5ks2Lw2r84ela4-aREwKpVGwKrl_s7ut3fnkjAIcg_XDzuaUhs'
     );
-    cy.get('#errorContainer').should('not.exist');
+    cy.contains('Diagram syntax error').should('not.exist');
     typeInEditor(`branch test`, { bottom: true, newline: true });
     cy.get('#editor').contains('branch test').should('exist');
-    cy.get('#errorContainer')
-      .contains(
-        'Error: Trying to checkout branch which is not yet created. (Help try using "branch master")'
-      )
-      .should('exist');
+    cy.contains(
+      'Error: Trying to checkout branch which is not yet created. (Help try using "branch master")'
+    ).should('exist');
   });
 
   it('should update diagram after entire text is removed', () => {

cypress/e2e/history.spec.ts

@@ -5,7 +5,10 @@ describe('Save History', () => {
     cy.clock(new Date(2022, 0, 1).getTime());
     cy.clearLocalStorage();
     cy.visit('/edit');
-
+    cy.on('uncaught:exception', (error) => {
+      // Skip the error from inside monaco.
+      return !error.message.includes('duration');
+    });
     cy.contains('History').click();
   });
 

cypress/e2e/util.ts

@@ -13,12 +13,12 @@ export const typeInEditor = (
   cy.get('#editor').click();
   cy.get('#editor').within(() => {
     if (bottom) {
-      cy.get('textarea').type('{pageDown}', { force: true });
+      cy.get('textarea').type('{pageDown}');
     }
     if (newline) {
-      cy.get('textarea').type('{enter}', { force: true });
+      cy.get('textarea').type('{enter}');
     }
-    cy.get('textarea').type(text, { force: true });
+    cy.get('textarea').type(text);
   });
 };
 

src/lib/components/Editor.svelte

@@ -9,15 +9,15 @@
 
 <script lang="ts">
   import type { EditorMode } from '$lib/types';
+  import { initEditor } from '$lib/util/monacoExtra';
   import { stateStore, updateCode, updateConfig } from '$lib/util/state';
+  import { logEvent } from '$lib/util/stats';
   import { themeStore } from '$lib/util/theme';
   import { errorDebug, syncDiagram } from '$lib/util/util';
   import * as monaco from 'monaco-editor';
-  import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
   import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-  import { onMount } from 'svelte';
-  import { initEditor } from '$lib/util/monacoExtra';
-  import { logEvent } from '$lib/util/stats';
+  import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+  import { onDestroy, onMount } from 'svelte';
 
   let divElement: HTMLDivElement | undefined;
   let editor: monaco.editor.IStandaloneCodeEditor | undefined;
@@ -118,16 +118,31 @@
     });
 
     if (divElement.parentElement) {
-      resizeObserver.observe(divElement.parentElement);
+      resizeObserver.observe(divElement);
     }
 
     if (window.Cypress) {
       window.editorLoaded = true;
     }
-    return () => {
-      editor?.dispose();
-    };
+  });
+
+  onDestroy(() => {
+    editor?.dispose();
   });
 </script>
 
-<div bind:this={divElement} id="editor" class="overflow-hidden" />
+<div class="flex h-full flex-col">
+  <div bind:this={divElement} id="editor" class="h-full flex-grow overflow-hidden" />
+  {#if $stateStore.error instanceof Error}
+    <div class="flex flex-col text-sm text-neutral-100">
+      <div class="flex items-center gap-2 bg-red-700 p-2">
+        <i class="fa fa-exclamation-circle w-4" aria-hidden="true" />
+        <p>Diagram syntax error</p>
+      </div>
+      <div class="max-h-32 overflow-auto bg-red-600 p-2 font-mono">
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html $stateStore.error?.toString().replaceAll('\n', '<br />')}
+      </div>
+    </div>
+  {/if}
+</div>

src/lib/components/View.svelte

@@ -16,7 +16,6 @@
   let rough: boolean;
   let view: HTMLDivElement;
   let error = false;
-  let errorLines: string[] = [];
   let outOfSync = false;
   let hide = false;
   let manualUpdate = true;
@@ -65,7 +64,6 @@
     const startTime = Date.now();
     if (state.error !== undefined) {
       error = true;
-      errorLines = state.error.toString().split('\n');
       return;
     }
     error = false;
@@ -165,23 +163,15 @@
   });
 </script>
 
-{#if (error && $stateStore.error instanceof Error) || outOfSync}
+{#if outOfSync}
   <div
-    class="absolute z-10 w-full p-2 font-mono {error
-      ? 'text-red-600'
-      : 'text-yellow-600'} bg-base-100 bg-opacity-80 text-left"
+    class="font-monotext-yellow-600 absolute z-10 w-full bg-base-100 bg-opacity-80 p-2 text-left"
     id="errorContainer">
-    {#if error}
-      {#each errorLines as line}
-        {line}<br />
-      {/each}
+    Diagram out of sync. <br />
+    {#if $stateStore.autoSync}
+      It will be updated automatically.
     {:else}
-      Diagram out of sync. <br />
-      {#if $stateStore.autoSync}
-        It will be updated automatically.
-      {:else}
-        Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
-      {/if}
+      Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
     {/if}
   </div>
 {/if}