Merge pull request mermaid-js#395 from mermaid-js/develop

Develop

.dockerignore

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

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:16.10.0 as mermaid-live-editor-builder 
 COPY --chown=node:node . /home
 WORKDIR /home
 RUN yarn install

Dockerfile.dev

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

README.md

@@ -21,10 +21,18 @@ 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
 ```
 
+### Development
+
+```bash
+docker compose up --build
+```
+
 Then open http://localhost:8000
 
 ## Setup

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
+

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,15 +15,15 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.19",
-		"@sveltejs/kit": "1.0.0-next.170",
+		"@sveltejs/adapter-static": "1.0.0-next.20",
+		"@sveltejs/kit": "1.0.0-next.173",
 		"@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.31.2",
+		"@typescript-eslint/parser": "^4.31.2",
+		"autoprefixer": "^10.3.5",
 		"chai": "^4.3.4",
 		"cssnano": "^5.0.8",
-		"cypress": "8.4.0",
+		"cypress": "8.4.1",
 		"cypress-localstorage-commands": "^1.5.0",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.1.0",
@@ -32,16 +32,17 @@
 		"eslint-plugin-mocha": "^9.0.0",
 		"eslint-plugin-postcss-modules": "^1.2.1",
 		"eslint-plugin-svelte3": "^3.2.1",
-		"eslint-plugin-tailwindcss": "^1.14.3",
+		"eslint-plugin-tailwindcss": "^1.15.0",
 		"husky": "^7.0.2",
 		"lint-staged": "^11.1.2",
 		"mocha": "^9.1.1",
-		"postcss": "^8.3.6",
+		"node-html-parser": "^4.1.5",
+		"postcss": "^8.3.8",
 		"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",
+		"svelte": "^3.43.0",
+		"svelte-preprocess": "^4.9.5",
 		"tailwindcss": "^2.2.15",
 		"tslib": "^2.3.1",
 		"typescript": "^4.4.3"
@@ -51,11 +52,11 @@
 		"@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",
+		"daisyui": "^1.14.1",
+		"js-base64": "^3.7.2",
 		"mermaid": "^8.12.1",
 		"moment": "^2.29.1",
-		"monaco-editor": "^0.27.0",
+		"monaco-editor": "^0.28.1",
 		"random-word-slugs": "^0.0.5"
 	},
 	"lint-staged": {

src/app.html

@@ -21,27 +21,27 @@
 		/>
 		<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.28.1/min/vs/editor/editor.main.min.css"
 			crossorigin="anonymous"
 			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.28.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.28.1/min/vs/loader.min.js"
 			crossorigin="anonymous"
 			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.28.1/min/vs/editor/editor.main.nls.min.js"
 			crossorigin="anonymous"
 			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.28.1/min/vs/editor/editor.main.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>

src/lib/components/editor/util.ts

@@ -479,7 +479,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',