Revert "Use monaco-mermaid"

Use `monaco-mermaid`

.dockerignore

@@ -0,0 +1,5 @@
+**/node_modules
+**/.git
+**/.svelte-kit
+**/dist
+**/docs

.github/dependabot.yml

@@ -6,15 +6,18 @@ updates:
     schedule:
       interval: weekly
       day: friday
+      time: '07:00'
   - package-ecosystem: github-actions
     directory: /
     target-branch: develop
     schedule:
       interval: weekly
       day: friday
+      time: '07:00'
   - package-ecosystem: npm
     directory: /
     target-branch: develop
     schedule:
       interval: weekly
       day: friday
+      time: '07:00'

.github/workflows/update-browserlist.yml

@@ -0,0 +1,16 @@
+name: Update Browserslist
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npx browserslist@latest --update-db
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v7
+        with:
+          author_name: ${{ github.actor }}
+          author_email: ${{ github.actor }}@users.noreply.github.com
+          message: 'Update Browserslist'

.github/workflows/update-monaco-editor.yml

@@ -0,0 +1,20 @@
+name: Update Monaco-editor
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [opened]
+    branches:
+      - 'dependabot/npm_and_yarn/develop/monaco-editor-**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: ./bin/update-monaco
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v7
+        with:
+          author_name: ${{ github.actor }}
+          author_email: ${{ github.actor }}@users.noreply.github.com
+          message: 'Update Monaco-editor'

.prettierrc

@@ -1,7 +1,7 @@
 {
 	"singleQuote": true,
 	"svelteSortOrder": "options-scripts-markup-styles",
-	"svelteBracketNewLine": false,
+	"bracketSameLine": true,
 	"useTabs": true,
 	"trailingComma": "none",
 	"printWidth": 100

Dockerfile

@@ -6,7 +6,7 @@
 # Stop               : press ctrl + c 
 #                                     or 
 #                                        docker stop mermaid-live-editor
-FROM node:16.9.1 as mermaid-live-editor-builder 
+FROM node:17.3.1 as mermaid-live-editor-builder 
 COPY --chown=node:node . /home
 WORKDIR /home
 RUN yarn install

Dockerfile.dev

@@ -0,0 +1,8 @@
+FROM node:17
+WORKDIR /app
+COPY package.json .
+COPY yarn.lock .
+RUN npm install
+COPY . .
+RUN ls
+CMD ["yarn", "dev"]

README.md

@@ -21,10 +21,23 @@ You can try out a live version [here](https://mermaid.live/).
 
 ## Docker
 
+### Run published image
+
 ```bash
 docker run --publish 8000:80 ghcr.io/mermaid-js/mermaid-live-editor
 ```
 
+### To configure renderer URL
+
+When building, Set the Environment variable MERMAID_RENDERER_URL to the rendering service.
+Default is `https://mermaid.ink`
+
+### Development
+
+```bash
+docker compose up --build
+```
+
 Then open http://localhost:8000
 
 ## Setup
@@ -47,6 +60,7 @@ This app is created with Svelte Kit.
 
 ## Release
 
-When a PR is created targeting master, it will be built and deployed as a beta in http://mermaid-js.github.io/mermaid-live-editor/beta
+When a PR is created targeting master, it will be built and deployed by Netlify.
+The URL will be indicated in a Comment in the PR.
 
 Once the PR is merged, it will automatically be released.

bin/update-monaco

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+monacoVersion="$(jq -r '.dependencies."monaco-editor"' package.json)"
+monacoVersion="${monacoVersion:1}"
+
+if [[ $(uname) == "Darwin" ]]; 
+then
+    sed -i '' -E "s/monaco-editor\/[^/]*/monaco-editor\/$monacoVersion/g" ./src/app.html
+else
+    sed -i'' -E "s/monaco-editor\/[^/]*/monaco-editor\/$monacoVersion/g" ./src/app.html
+fi
+

cypress/integration/loadSite.spec.ts

@@ -17,9 +17,8 @@ describe('Site Loads', () => {
 		);
 		cy.url().should(
 			'include',
-			'/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
+			'/edit#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
 		);
-
 		cy.contains('History').click();
 		cy.getLocalStorage('codeStore').snapshot();
 	});
@@ -61,20 +60,21 @@ describe('Site Loads', () => {
 		cy.getLocalStorage('codeStore').snapshot();
 	});
 
-	it('should prevent setting the "securityLevel" option via URL', () => {
-		const b64State = toBase64(
-			`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,
-			true
-		);
-		cy.on('window:confirm', () => true);
-		cy.visit(`/edit#${b64State}`);
-		cy.contains('Config').click();
-		cy.contains('forest');
-		cy.contains('securityLevel').should('not.exist');
-		cy.get('#view').find('img').should('not.exist');
-		cy.get('#view').contains('<img');
-		cy.get('#view').contains('src="https://via.placeholder.com/64"');
-	});
+	// Disabled temporarily. Should be enabled after the issue is fixed in Mermaid.
+	// it('should prevent setting the "securityLevel" option via URL', () => {
+	// 	const b64State = toBase64(
+	// 		`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,
+	// 		true
+	// 	);
+	// 	cy.on('window:confirm', () => true);
+	// 	cy.visit(`/edit#${b64State}`);
+	// 	cy.contains('Config').click();
+	// 	cy.contains('forest');
+	// 	cy.contains('securityLevel').should('not.exist');
+	// 	cy.get('#view').find('img').should('not.exist');
+	// 	cy.get('#view').contains('<img');
+	// 	cy.get('#view').contains(`src='https://via.placeholder.com/64'`);
+	// });
 
 	it('should allow persisting "securityLevel" using confirm dialogue', () => {
 		const b64State = toBase64(
@@ -88,4 +88,9 @@ describe('Site Loads', () => {
 		cy.contains('securityLevel');
 		cy.get('#view').find('img').should('be.visible');
 	});
+
+	it('should show troubleshooting steps if loading fails', () => {
+		cy.visit('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg');
+		cy.contains('Please Click here to Raise an issue in github.');
+	});
 });

cypress/snapshots.js

@@ -16,7 +16,7 @@ module.exports = {
       "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "8.4.0",
+  "__version": "9.1.1",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}"

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3.7'
+services:
+  mermaid:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    volumes:
+      - ./src:/app/src
+    ports:
+      - 8080:8080
+      - 24678:24678

package.json

@@ -2,7 +2,7 @@
 	"name": "mermaid-live-editor",
 	"version": "2.0.67",
 	"scripts": {
-		"dev": "svelte-kit dev",
+		"dev": "svelte-kit dev --host 0.0.0.0",
 		"build": "svelte-kit build",
 		"preview": "svelte-kit preview",
 		"lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
@@ -15,48 +15,49 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.19",
-		"@sveltejs/kit": "1.0.0-next.147",
+		"@sveltejs/adapter-static": "1.0.0-next.22",
+		"@sveltejs/kit": "1.0.0-next.202",
 		"@types/mermaid": "^8.2.7",
-		"@typescript-eslint/eslint-plugin": "^4.31.1",
-		"@typescript-eslint/parser": "^4.31.1",
-		"autoprefixer": "^10.3.4",
+		"@typescript-eslint/eslint-plugin": "^4.33.0",
+		"@typescript-eslint/parser": "^4.33.0",
+		"autoprefixer": "^10.4.0",
 		"chai": "^4.3.4",
-		"cssnano": "^5.0.8",
-		"cypress": "8.4.0",
-		"cypress-localstorage-commands": "^1.5.0",
+		"cssnano": "^5.0.14",
+		"cypress": "9.2.0",
+		"cypress-localstorage-commands": "^1.6.1",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-cypress": "^2.12.1",
 		"eslint-plugin-es": "^4.1.0",
-		"eslint-plugin-mocha": "^9.0.0",
-		"eslint-plugin-postcss-modules": "^1.2.1",
+		"eslint-plugin-mocha": "^10.0.3",
+		"eslint-plugin-postcss-modules": "^2.0.0",
 		"eslint-plugin-svelte3": "^3.2.1",
-		"eslint-plugin-tailwindcss": "^1.14.3",
-		"husky": "^7.0.2",
-		"lint-staged": "^11.1.2",
-		"mocha": "^9.1.1",
-		"postcss": "^8.3.6",
+		"eslint-plugin-tailwindcss": "^1.17.2",
+		"husky": "^7.0.4",
+		"lint-staged": "^12.1.4",
+		"mocha": "^9.1.3",
+		"node-html-parser": "^5.2.0",
+		"postcss": "^8.4.5",
 		"postcss-load-config": "^3.1.0",
-		"prettier": "~2.4.1",
-		"prettier-plugin-svelte": "^2.4.0",
-		"svelte": "^3.42.6",
-		"svelte-preprocess": "^4.9.4",
-		"tailwindcss": "^2.2.15",
+		"prettier": "~2.5.1",
+		"prettier-plugin-svelte": "^2.5.1",
+		"svelte": "^3.46.1",
+		"svelte-preprocess": "^4.10.1",
+		"tailwindcss": "^3.0.13",
 		"tslib": "^2.3.1",
-		"typescript": "^4.4.3"
+		"typescript": "^4.5.4"
 	},
 	"type": "module",
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.2.0",
-		"analytics": "^0.7.14",
-		"daisyui": "^1.14.0",
-		"js-base64": "^3.7.1",
-		"mermaid": "^8.12.1",
+		"analytics": "^0.7.19",
+		"daisyui": "1.21.0",
+		"js-base64": "^3.7.2",
+		"mermaid": "8.13.8",
 		"moment": "^2.29.1",
-		"monaco-editor": "^0.27.0",
-		"random-word-slugs": "^0.0.5"
+		"monaco-editor": "^0.31.1",
+		"random-word-slugs": "^0.1.6"
 	},
 	"lint-staged": {
 		"*.{ts,svelte,js,css,md,json}": [

src/app.html

@@ -6,45 +6,38 @@
 		<title>Online FlowChart &amp; Diagrams Editor - Mermaid Live Editor</title>
 		<meta
 			name="og:image"
-			content="https://github.com/mermaid-js/mermaid/raw/develop/img/header.png"
-		/>
+			content="https://github.com/mermaid-js/mermaid/raw/develop/img/header.png" />
 		<link rel="canonical" href="https://mermaid.live" />
 		<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."
-		/>
+			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." />
 		<link rel="icon" type="image/png" href="favicon.png" />
 		<link rel="manifest" href="manifest.json" />
 		<link
 			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
-		/>
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
 		<link
 			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/editor/editor.main.min.css"
+			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/editor/editor.main.min.css"
 			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-		/>
+			referrerpolicy="no-referrer" />
 		<script>
 			var require = {
-				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs' }
+				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs' }
 			};
 		</script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/loader.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/loader.min.js"
 			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-		></script>
+			referrerpolicy="no-referrer"></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/editor/editor.main.nls.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/editor/editor.main.nls.min.js"
 			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-		></script>
+			referrerpolicy="no-referrer"></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs/editor/editor.main.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/editor/editor.main.js"
 			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-		></script>
+			referrerpolicy="no-referrer"></script>
 
 		%svelte.head%
 	</head>

src/lib/components/actions.svelte

@@ -2,8 +2,8 @@
 	import { browser } from '$app/env';
 
 	import Card from '$lib/components/card/card.svelte';
-	import type { State } from '$lib/types';
-	import { codeStore } from '$lib/util/state';
+	import { rendererUrl } from '$lib/util/env';
+	import { base64State, codeStore } from '$lib/util/state';
 	import { toBase64 } from 'js-base64';
 	import moment from 'moment';
 
@@ -137,15 +137,15 @@
 	if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
 		isNetlify = true;
 	}
-	codeStore.subscribe((state: State) => {
-		const stateCopy = JSON.parse(JSON.stringify(state));
+	base64State.subscribe((encodedState: string) => {
+		const stateCopy = JSON.parse(JSON.stringify($codeStore));
 		if (typeof stateCopy.mermaid === 'string') {
 			stateCopy.mermaid = JSON.parse(stateCopy.mermaid);
 		}
 		const b64Code = toBase64(JSON.stringify(stateCopy), true);
-		iUrl = `https://mermaid.ink/img/${b64Code}`;
-		svgUrl = `https://mermaid.ink/svg/${b64Code}`;
-		mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${window.location.hash})`;
+		iUrl = `${rendererUrl}/img/${b64Code}`;
+		svgUrl = `${rendererUrl}/svg/${b64Code}`;
+		mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${encodedState})`;
 	});
 </script>
 

src/lib/components/editor/util.ts

@@ -59,7 +59,8 @@ export const initEditor = (monacoEditor): void => {
 				'activate',
 				'deactivate',
 				'autonumber',
-				'title'
+				'title',
+				'actor'
 			]
 		},
 		classDiagram: {
@@ -371,7 +372,8 @@ export const initEditor = (monacoEditor): void => {
 		rules: [
 			{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
 			{ token: 'transition', foreground: '008800', fontStyle: 'bold' }
-		]
+		],
+		colors: {}
 	});
 
 	monacoEditor.editor.defineTheme('mermaid', {
@@ -389,7 +391,8 @@ export const initEditor = (monacoEditor): void => {
 			{ token: 'comment', foreground: '888c89' },
 			{ token: 'variable', foreground: 'A22889' },
 			{ token: 'type', foreground: '2BDEA8' }
-		]
+		],
+		colors: {}
 	});
 
 	// Register a completion item provider for the mermaid language
@@ -479,7 +482,7 @@ export const initEditor = (monacoEditor): void => {
 					kind: monacoEditor.languages.CompletionItemKind.Snippet,
 					insertText: ['element ${1:test_entity} {', '\t$0', '}'].join('\n'),
 					insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-					documentation: 'User-journey Section'
+					documentation: 'Requirement Diagram Element'
 				},
 				{
 					label: 'options',

src/lib/components/preset.svelte

@@ -69,24 +69,6 @@
           ORDER ||--|{ ORDER-ITEM : includes
           PRODUCT-CATEGORY ||--|{ PRODUCT : contains
           PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-            `,
-		'Git Graph': `gitGraph:
-options
-{
-    "nodeSpacing": 150,
-    "nodeRadius": 10
-}
-end
-commit
-branch newbranch
-checkout newbranch
-commit
-commit
-checkout master
-commit
-commit
-merge newbranch
-
             `,
 		'User Journey': `  journey
     title My working day

src/lib/util/env.ts

@@ -0,0 +1 @@
+export const rendererUrl = import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink';

src/lib/util/state.ts

@@ -1,4 +1,5 @@
 import { writable, get, derived } from 'svelte/store';
+import type { Readable } from 'svelte/store';
 import { toBase64, fromBase64 } from 'js-base64';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
 import type { State } from '$lib/types';
@@ -24,8 +25,19 @@ export const defaultState: State = {
 	updateDiagram: true
 };
 
+const urlParseFailedState = `graph TD
+    A[Loading URL failed. We can try to figure out why.] -->|Decode JSON| B(Please check the console to see the JSON and error details.)
+    B --> C{Is the JSON correct?}
+    C -->|Yes| D(Please Click here to Raise an issue in github.<br/>Including the broken link in the issue <br/> will speed up the fix.)
+    C -->|No| E{Did someone <br/>send you this link?}
+    E -->|Yes| F[Ask them to send <br/>you the complete link]
+    E -->|No| G{Did you copy <br/> the complete URL?}
+    G --> |Yes| D
+    G --> |"No :("| H(Try using the Timeline tab in History <br/>from same browser you used to create the diagram.)
+    click D href "https://github.com/mermaid-js/mermaid-live-editor/issues/new?assignees=&labels=bug&template=bug_report.md&title=Broken%20link" "Raise issue"`;
+
 export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore');
-export const base64State = derived([codeStore], ([code], set) => {
+export const base64State: Readable<string> = derived([codeStore], ([code], set) => {
 	set(toBase64(JSON.stringify(code), true));
 });
 
@@ -49,11 +61,11 @@ export const loadState = (data: string): void => {
 
 		state.mermaid = JSON.stringify(mermaidConfig, null, 2);
 	} catch (e) {
+		state = get(codeStore);
 		if (data) {
 			console.error('Init error', e);
+			state.code = urlParseFailedState;
 		}
-		state = get(codeStore);
-		console.log(state);
 	}
 	updateCodeStore({ ...state, updateEditor: true });
 };

svelte.config.js

@@ -24,6 +24,7 @@ const config = {
 		target: '#svelte',
 		trailingSlash: 'ignore',
 		vite: {
+			envPrefix: 'MERMAID_',
 			optimizeDeps: { include: ['mermaid'] }
 		}
 	}

tailwind.config.cjs

@@ -1,7 +1,6 @@
 module.exports = {
-	mode: 'jit',
 	plugins: [require('daisyui')],
-	purge: ['./src/**/*.{html,js,svelte,ts}'],
+	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {}
 	},