Responsive editors. Fixes #10

package.json

@@ -14,6 +14,7 @@
     "style-loader": "^0.23.1",
     "svelte": "^3.0.0",
     "svelte-loader": "2.13.3",
+    "svelte-watch-resize": "^1.0.3",
     "webpack": "^4.30.0",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.3.1"

src/components/Config.svelte

@@ -12,8 +12,8 @@
   // import mermaid from '@mermaid-js/mermaid';
   import mermaid from '@mermaid';
   import Error from './Error.svelte';
-  import { initEditor } from './editor-utils';
-
+  import { getResizeHandler, initEditor } from './editor-utils';
+  import { watchResize } from 'svelte-watch-resize';
   import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
   import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
@@ -27,6 +27,7 @@
 
   let decorations = [];
   const decArr = [];
+  let resizeHandler = () => {};
 
   let oldConf = {};
   const handleConfUpdate = (conf) => {
@@ -65,7 +66,7 @@
         theme: 'myCoolTheme',
         language: 'JSON',
       });
-
+      resizeHandler = getResizeHandler(edit);
       let decorations = [];
       edit.onDidChangeModelContent(function (e) {
         const conf = edit.getValue();
@@ -106,7 +107,7 @@
 </style>
 
 <div id="editor-container">
-  <div id="editor-conf" />
+  <div id="editor-conf" use:watchResize={resizeHandler} />
   {#if error}
     <Error errorText={error} />
   {/if}

src/components/Editor.svelte

@@ -7,10 +7,11 @@
   // import mermaid from '@mermaid-js/mermaid';
   import mermaid from '@mermaid';
   import Error from './Error.svelte';
-  import { initEditor } from './editor-utils';
+  import { getResizeHandler, initEditor } from './editor-utils';
   import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
   import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+  import { watchResize } from 'svelte-watch-resize';
 
   export let code = '';
   const isDarkMode =
@@ -22,6 +23,7 @@
   let decorations = [];
   const decArr = [];
   let editorElem = null;
+  let resizeHandler = () => {};
   const handleCodeUpdate = (code) => {
     try {
       mermaid.parse(code);
@@ -77,6 +79,7 @@
         theme: 'myCoolTheme',
         language: 'mermaid',
       });
+      resizeHandler = getResizeHandler(edit);
 
       let decorations = [];
       edit.onDidChangeModelContent(function (e) {
@@ -126,7 +129,7 @@
 </style>
 
 <div id="editor-container">
-  <div id="editor" />
+  <div id="editor" use:watchResize={resizeHandler} />
   {#if error}
     <Error errorText="Syntax Error" />
   {/if}

src/components/editor-utils.js

@@ -80,3 +80,7 @@ export const initEditor = (monaco) => {
     },
   });
 };
+
+export const getResizeHandler = (editor) => {
+  return (node) => editor && editor.layout();
+};

yarn.lock

@@ -428,6 +428,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -1475,6 +1480,13 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
+element-resize-detector@^1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.1.tgz#b0305194447a4863155e58f13323a0aef30851d1"
+  integrity sha512-BdFsPepnQr9fznNPF9nF4vQ457U/ZJXQDSNF1zBe7yaga8v9AdZf3/NElYxFdUh7SitSGt040QygiTo6dtatIw==
+  dependencies:
+    batch-processor "1.0.0"
+
 elliptic@^6.0.0:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
@@ -4391,6 +4403,13 @@ svelte-spa-router@^1.3.0:
   dependencies:
     regexparam "^1.3.0"
 
+svelte-watch-resize@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/svelte-watch-resize/-/svelte-watch-resize-1.0.3.tgz#8cf78ac2e3142ec5f1e88cc06aea13a6bc07b1b3"
+  integrity sha512-ktqTnkdqfx4YRqeMJcX1jeSnQ2kJUVlj4/rLdaLbhM+RrxN87vS2EZ0cxlGZ7eXV86Ef05Q3dVqEiR+12PeoIw==
+  dependencies:
+    element-resize-detector "^1.1"
+
 svelte@^3.0.0:
   version "3.16.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.16.0.tgz#7ead284547240fcbcb985c73473dce811315fd15"