Merge pull request #84 from mermaid-js/sidv/monaco

Update Monaco Editor

.github/workflows/deploy.yml

@@ -0,0 +1,26 @@
+name: Deploy Live Editor
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '12'
+
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Build & Deploy
+        run: |
+          npm i -g yarn
+          yarn install
+          yarn release
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git add ./docs/*
+          git commit -m "Release"
+          git push

bin/beta-release

@@ -9,6 +9,7 @@ yarn release
 pushd .
 cp -r docs/* ../docs/mermaid-live-editor-beta
 cd ../docs
-git commit * -m "Beta updated with latest changes"
+git add .
+git commit -m "Beta updated with latest changes"
 git push
 popd

docs/index.html

@@ -35,7 +35,7 @@
 </style>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   <title>Online FlowChart &amp; Diagrams Editor - Mermaid Live Editor</title>
-  <meta name="og:image" content="https://mermaid-js.github.io/images/header.png">
+  <meta name="og:image" content="https://github.com/mermaid-js/mermaid/raw/develop/img/header.png">
   <link rel="canonical" href="https://mermaid-js.github.io/mermaid-live-editor/">
   <meta name="description" content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript.">
   </head>

docs/styles.css

@@ -41,3 +41,8 @@ i {
 .mermaidTooltip {
   position: absolute;
 }
+
+@font-face{
+	font-family: "codicon";
+	src: url("codicon.ttf") format("truetype");
+}

package.json

@@ -5,9 +5,11 @@
   "devDependencies": {
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
+    "file-loader": "^6.2.0",
     "husky": "^4.3.0",
     "lint-staged": "^10.5.2",
     "mini-css-extract-plugin": "^0.6.0",
+    "monaco-editor-webpack-plugin": "^2.1.0",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^1.4.1",
     "serve": "^11.0.0",
@@ -26,12 +28,12 @@
     "pretty": "prettier --write ./src/*"
   },
   "dependencies": {
-    "mermaid": "8.8.4",
     "js-base64": "^2.5.1",
     "json-lint": "^0.1.0",
     "jsonlint": "^1.6.3",
+    "mermaid": "8.8.4",
     "moment": "^2.24.0",
-    "monaco-editor": "0.18.1",
+    "monaco-editor": "0.21.2",
     "svelte-routing": "^1.4.0",
     "svelte-spa-router": "^1.3.0"
   },

src/components/Config.svelte

@@ -49,35 +49,6 @@
     }
   };
 
-  const unsubscribe = codeStore.subscribe((state) => {
-    if (editorElem === null) {
-      console.log('Starting stuff', document.getElementById('editor-conf'));
-      editorElem = document.getElementById('editor-conf');
-    }
-    if (!conf && state) {
-      conf = JSON.stringify(state.mermaid, null, 2);
-    }
-    if (state) {
-      code = state.code;
-    }
-    if (!edit && conf && editorElem !== null) {
-      edit = monaco.editor.create(editorElem, {
-        value: [conf].join('\n'),
-        theme: 'myCoolTheme',
-        language: 'JSON',
-      });
-      resizeHandler = getResizeHandler(edit);
-      let decorations = [];
-      edit.onDidChangeModelContent(function (e) {
-        const conf = edit.getValue();
-        handleConfUpdate(conf);
-      });
-      handleConfUpdate(conf);
-    }
-  });
-
-  initEditor(monaco);
-
   const unsubscribeError = configErrorStore.subscribe((_error) => {
     // console.log('Error ideintified' + _error.toString());
     if (_error) {
@@ -89,11 +60,34 @@
 
   onMount(async () => {
     console.log('Mounting config');
-    self.MonacoEnvironment = {
-      getWorkerUrl: function (moduleId, label) {
-        return './editor.worker.bundle.js';
-      },
-    };
+
+    const unsubscribe = codeStore.subscribe((state) => {
+      if (editorElem === null) {
+        console.log('Starting stuff', document.getElementById('editor-conf'));
+        editorElem = document.getElementById('editor-conf');
+      }
+      if (!conf && state) {
+        conf = JSON.stringify(state.mermaid, null, 2);
+      }
+      if (state) {
+        code = state.code;
+      }
+      if (!edit && conf && editorElem !== null) {
+        edit = monaco.editor.create(editorElem, {
+          value: [conf].join('\n'),
+          theme: 'myCoolTheme',
+          language: 'json',
+        });
+        resizeHandler = getResizeHandler(edit);
+        edit.onDidChangeModelContent(function (e) {
+          const conf = edit.getValue();
+          handleConfUpdate(conf);
+        });
+        handleConfUpdate(conf);
+      }
+    });
+
+    initEditor(monaco);
   });
 </script>
 

src/components/Editor.svelte

@@ -8,9 +8,7 @@
   import mermaid from '@mermaid';
   import Error from './Error.svelte';
   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 * as monaco from 'monaco-editor';
   import { watchResize } from 'svelte-watch-resize';
 
   export let code = '';
@@ -63,13 +61,6 @@
   };
 
   onMount(async () => {
-    // editorElem = document.querySelector('#editor')
-    self.MonacoEnvironment = {
-      getWorkerUrl: function (moduleId, label) {
-        return './editor.worker.bundle.js';
-      },
-    };
-
     const unsubscribe = codeStore.subscribe((state) => {
       console.log('Code change');
       if (editorElem === null) {

webpack.config.js

@@ -1,4 +1,5 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const path = require('path');
 
 const mode = process.env.NODE_ENV || 'development';
@@ -14,7 +15,7 @@ module.exports = {
 			 "@mermaid": 'mermaid'
 			//  "@mermaid": '@mermaid-js/mermaid'
 		},
-		extensions: ['.mjs', '.js', '.svelte'],
+		extensions: ['.mjs', '.js', '.svelte', '.ttf'],
 		mainFields: ['svelte', 'browser', 'module', 'main']
 	},
 	output: {
@@ -44,13 +45,28 @@ module.exports = {
 					prod ? MiniCssExtractPlugin.loader : 'style-loader',
 					'css-loader'
 				]
-			}
+			},
+			{
+				test: /\.ttf$/,
+				use: [
+					{
+					  loader: 'file-loader',
+					  options: {
+						name: '[name].[ext]'
+					  },
+					},
+				  ],
+			  }
 		]
 	},
 	mode,
 	plugins: [
 		new MiniCssExtractPlugin({
 			filename: '[name].css'
+		}),
+		new MonacoWebpackPlugin({
+			languages: ['json'],
+			features: ['!referenceSearch']
 		})
 	],
 	devtool: prod ? false: 'source-map'