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',