forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #607 from mermaid-js/develop

Browse Source 
Develop
This commit is contained in:
Sidharth Vinod
2022-01-21 14:19:39 +05:30
committed by GitHub
parent fc78a26245 44ebcd3725
commit b5978e6faf
17 changed files with 159 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/update-browserlist.yml
+1 -1
View File
@@ -9,7 +9,7 @@ jobs:
- uses: actions/checkout@v2
- run: npx browserslist@latest --update-db
- name: Commit changes
uses: EndBug/add-and-commit@v7
uses: EndBug/add-and-commit@v8
with:
author_name: ${{ github.actor }}
author_email: ${{ github.actor }}@users.noreply.github.com
.github/workflows/update-monaco-editor.yml
+1 -1
View File
@@ -13,7 +13,7 @@ jobs:
- uses: actions/checkout@v2
- run: ./bin/update-monaco
- name: Commit changes
uses: EndBug/add-and-commit@v7
uses: EndBug/add-and-commit@v8
with:
author_name: ${{ github.actor }}
author_email: ${{ github.actor }}@users.noreply.github.com
.vscode/settings.json
Vendored
+4
View File
@@ -0,0 +1,4 @@
{
"editor.formatOnSave": true,
"cSpell.words": ["pako", "Serde", "serdes"]
}
Dockerfile
+1 -1
View File
@@ -6,7 +6,7 @@
# Stop : press ctrl + c
# or
# docker stop mermaid-live-editor
FROM node:17.3.1 as mermaid-live-editor-builder
FROM node:17.4.0 as mermaid-live-editor-builder
COPY --chown=node:node . /home
WORKDIR /home
RUN yarn install
cypress/integration/loadSite.spec.ts
+27
View File
@@ -93,4 +93,31 @@ describe('Site Loads', () => {
cy.visit('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg');
cy.contains('Please Click here to Raise an issue in github.');
});
it('should load uncompressed URL', () => {
cy.visit(
'/edit/#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
);
cy.contains('New Year');
cy.visit(
'/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
);
cy.contains('Animal');
cy.visit(
'/edit/#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
);
cy.contains('New Year');
});
it('should load compressed URL', () => {
cy.visit(
'/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ'
);
cy.contains('New Year');
cy.visit(
'/edit#pako:eNptkU1PwzAMhv9K5BOI9Q9EXBDbJA477YYqITcxndV8QD40weh_Jy1rGR0-OY_tV2_sEyivCSQogzGuGduAtnaixINji0bcf1WVWGfVXdMtx8M1faYm4B8sxR27JLClJd6nwK4VLTlN4bI4jMQd2pLe3C4KFhNNcLQ92jv9ADGLNoTdozc-zIV4ZDsNlud7RtVN7_5Sb_jYrFcN3iN_0pPbEqUZK3QbTP_Ojyv4NdR4bwTHlyMbPcOQ3WJ2CliBpWCRdbnLqFJDOpClGmRJNYauhtr1pS-_6bKMjebkA8hXNJFWgDn5_YdTIFPINDWdb3vu6r8BaWOZRQ'
);
cy.reload();
cy.contains('Animal');
});
});
cypress/snapshots.js
+1 -1
View File
@@ -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": "9.1.1",
"__version": "9.2.0",
"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}"
package.json
+5 -3
View File
@@ -16,8 +16,9 @@
"devDependencies": {
"@cypress/snapshot": "^2.1.7",
"@sveltejs/adapter-static": "1.0.0-next.26",
"@sveltejs/kit": "1.0.0-next.232",
"@sveltejs/kit": "1.0.0-next.236",
"@types/mermaid": "^8.2.7",
"@types/pako": "^1.0.3",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"autoprefixer": "^10.4.2",
@@ -34,7 +35,7 @@
"eslint-plugin-svelte3": "^3.4.0",
"eslint-plugin-tailwindcss": "^3.3.0",
"husky": "^7.0.4",
"lint-staged": "^12.2.1",
"lint-staged": "^12.2.2",
"mocha": "^9.1.4",
"node-html-parser": "^5.2.0",
"postcss": "^8.4.5",
@@ -45,7 +46,7 @@
"svelte-preprocess": "^4.10.2",
"tailwindcss": "^3.0.13",
"tslib": "^2.3.1",
"typescript": "^4.5.4"
"typescript": "^4.5.5"
},
"type": "module",
"dependencies": {
@@ -57,6 +58,7 @@
"mermaid": "8.13.9",
"moment": "^2.29.1",
"monaco-editor": "^0.31.1",
"monaco-mermaid": "^1.0.2",
"pako": "2.0.4",
"random-word-slugs": "^0.1.6"
},
src/hooks.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import type { Handle } from '@sveltejs/kit/types/hooks';
export const handle: Handle = async ({ request, resolve }) => {
const response = await resolve(request, {
export const handle: Handle = async ({ event, resolve }) => {
const response = await resolve(event, {
ssr: false
});
src/lib/components/actions.svelte
+14 -42
View File
@@ -2,11 +2,11 @@
import { browser } from '$app/env';
import Card from '$lib/components/card/card.svelte';
import { rendererUrl, krokiRendererUrl } from '$lib/util/env';
import { base64State, codeStore } from '$lib/util/state';
import { toBase64, btoa as jsbtoa } from 'js-base64';
import { krokiRendererUrl, rendererUrl } from '$lib/util/env';
import { pakoSerde } from '$lib/util/serde';
import { serializedState, codeStore } from '$lib/util/state';
import { toBase64 } from 'js-base64';
import moment from 'moment';
import pako from 'pako';
type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
@@ -18,7 +18,7 @@
}
const svgString = svg.outerHTML
.replaceAll('<br>', '<br/>')
.replaceAll(/<img([^>]*)>/g, (m, g) => `<img ${g} />`);
.replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
return toBase64(svgString);
};
@@ -79,7 +79,7 @@
canvas.toBlob((blob) => {
try {
// @ts-ignore: https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1004/files
navigator.clipboard.write([
void navigator.clipboard.write([
/* eslint-disable no-undef */
// @ts-ignore: https://github.com/microsoft/TypeScript/issues/43821
new ClipboardItem({
@@ -109,7 +109,7 @@
};
const onCopyMarkdown = () => {
document.getElementById('markdown').select();
(document.getElementById('markdown') as HTMLInputElement).select();
document.execCommand('Copy');
};
@@ -128,33 +128,9 @@
window.location.href = `${window.location.pathname}?gist=${gistURL}`;
};
const textEncode = (str) => {
if (window.TextEncoder) {
return new TextEncoder('utf-8').encode(str);
}
let utf8 = unescape(encodeURIComponent(str));
let result = new Uint8Array(utf8.length);
for (let i = 0; i < utf8.length; i++) {
result[i] = utf8.charCodeAt(i);
}
return result;
};
const onKrokiClick = () => {
const krokiCode = getKrokiCode($codeStore.code);
const krokiUrl = `${krokiRendererUrl}/mermaid/svg/${krokiCode}`;
return window.open(krokiUrl, '_blank');
};
const getKrokiCode = (source) => {
const data = textEncode(source);
const compressed = pako.deflate(data, { level: 9, to: 'string' });
let result = jsbtoa(compressed).replace(/\+/g, '-').replace(/\//g, '_');
return result;
};
let iUrl: string;
let svgUrl: string;
let krokiUrl: string;
let mdCode: string;
let imagemodeselected = 'auto';
let userimagesize = 1080;
@@ -163,14 +139,10 @@
if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
isNetlify = true;
}
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 = `${rendererUrl}/img/${b64Code}`;
svgUrl = `${rendererUrl}/svg/${b64Code}`;
serializedState.subscribe((encodedState: string) => {
iUrl = `${rendererUrl}/img/${encodedState}`;
svgUrl = `${rendererUrl}/svg/${encodedState}`;
krokiUrl = `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize($codeStore.code)}`;
mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${encodedState})`;
});
</script>
@@ -194,8 +166,8 @@
<button class="action-btn flex-auto">
<a target="_blank" href={svgUrl}><i class="fas fa-external-link-alt mr-2" /> SVG</a>
</button>
<button class="action-btn flex-auto" on:click={onKrokiClick}>
<i class="fas fa-external-link-alt mr-2" /> Kroki
<button class="action-btn flex-auto">
<a target="_blank" href={krokiUrl}><i class="fas fa-external-link-alt mr-2" /> Kroki</a>
</button>
<div class="flex gap-2 items-center">
src/lib/components/editor/editor.svelte → src/lib/components/editor.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
import { themeStore } from '$lib/util/theme';
import type monaco from 'monaco-editor';
import { createEventDispatcher, onMount } from 'svelte';
import { initEditor } from './util';
import initEditor from 'monaco-mermaid';
let divEl: HTMLDivElement = null;
let editor: monaco.editor.IStandaloneCodeEditor;
src/lib/components/editor/util.ts
-552
View File
@@ -1,552 +0,0 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const initEditor = (monacoEditor): void => {
monacoEditor.languages.register({ id: 'mermaid' });
const requirementDiagrams = [
'requirement',
'functionalRequirement',
'interfaceRequirement',
'performanceRequirement',
'physicalRequirement',
'designConstraint'
];
const keywords: {
[key: string]: {
typeKeywords: string[];
blockKeywords: string[];
keywords: string[];
};
} = {
flowchart: {
typeKeywords: ['flowchart', 'flowchart-v2', 'graph'],
blockKeywords: ['subgraph', 'end'],
keywords: [
'TB',
'TD',
'BT',
'RL',
'LR',
'click',
'call',
'href',
'_self',
'_blank',
'_parent',
'_top',
'linkStyle',
'style',
'classDef',
'class',
'direction',
'interpolate'
]
},
sequenceDiagram: {
typeKeywords: ['sequenceDiagram'],
blockKeywords: ['alt', 'par', 'and', 'loop', 'else', 'end', 'rect', 'opt', 'alt', 'rect'],
keywords: [
'participant',
'as',
'Note',
'note',
'right of',
'left of',
'over',
'activate',
'deactivate',
'autonumber',
'title',
'actor'
]
},
classDiagram: {
typeKeywords: ['classDiagram', 'classDiagram-v2'],
blockKeywords: ['class'],
keywords: [
'link',
'click',
'callback',
'call',
'href',
'cssClass',
'direction',
'TB',
'BT',
'RL',
'LR'
]
},
stateDiagram: {
typeKeywords: ['stateDiagram', 'stateDiagram-v2'],
blockKeywords: ['state', 'note', 'end'],
keywords: ['state', 'as', 'hide empty description', 'direction', 'TB', 'BT', 'RL', 'LR']
},
erDiagram: {
typeKeywords: ['erDiagram'],
blockKeywords: [],
keywords: []
},
journey: {
typeKeywords: ['journey'],
blockKeywords: ['section'],
keywords: ['title']
},
info: {
typeKeywords: ['info'],
blockKeywords: [],
keywords: ['showInfo']
},
gantt: {
typeKeywords: ['gantt'],
blockKeywords: [],
keywords: [
'title',
'dateFormat',
'axisFormat',
'todayMarker',
'section',
'excludes',
'inclusiveEndDates'
]
},
requirementDiagram: {
typeKeywords: ['requirement', 'requirementDiagram'],
blockKeywords: requirementDiagrams.concat('element'),
keywords: []
},
gitGraph: {
typeKeywords: ['gitGraph'],
blockKeywords: [],
keywords: ['commit', 'branch', 'merge', 'reset', 'checkout', 'LR', 'BT']
},
pie: {
typeKeywords: ['pie'],
blockKeywords: [],
keywords: ['title', 'showData']
}
};
// Register a tokens provider for the mermaid language
monacoEditor.languages.setMonarchTokensProvider('mermaid', {
...Object.entries(keywords)
.map((entry) =>
Object.fromEntries(
Object.entries(entry[1]).map((deepEntry) => [
entry[0] + deepEntry[0][0].toUpperCase() + deepEntry[0].slice(1),
deepEntry[1]
])
)
)
.reduce((overallKeywords, nextKeyword) => ({ ...overallKeywords, ...nextKeyword }), {}),
tokenizer: {
root: [
[/%%(?=.*%%$)/, { token: 'string', nextEmbedded: 'json' }],
[/%%$/, { token: 'string', nextEmbedded: '@pop' }],
[/^\s*gitGraph/m, 'typeKeyword', 'gitGraph'],
[/^\s*info/m, 'typeKeyword', 'info'],
[/^\s*pie/m, 'typeKeyword', 'pie'],
[/^\s*(flowchart|flowchart-v2|graph)/m, 'typeKeyword', 'flowchart'],
[/^\s*sequenceDiagram/, 'typeKeyword', 'sequenceDiagram'],
[/^\s*classDiagram(-v2)?/, 'typeKeyword', 'classDiagram'],
[/^\s*journey/, 'typeKeyword', 'journey'],
[/^\s*gantt/, 'typeKeyword', 'gantt'],
[/^\s*stateDiagram(-v2)?/, 'typeKeyword', 'stateDiagram'],
[/^\s*erDiagram/, 'typeKeyword', 'erDiagram'],
[/^\s*requirement(Diagram)?/, 'typeKeyword', 'requirementDiagram'],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
],
gitGraph: [
[/option(?=s)/, { token: 'typeKeyword', next: 'optionsGitGraph' }],
[/(^\s*branch|reset|merge|checkout)(.*$)/, ['keyword', 'variable']],
[
/[a-zA-Z][\w$]*/,
{
cases: {
'@gitGraphBlockKeywords': 'typeKeyword',
'@gitGraphKeywords': 'keyword'
}
}
],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
[/".*?"/, 'string'],
[/\^/, 'delimiter.bracket']
],
optionsGitGraph: [
[/s$/, { token: 'typeKeyword', nextEmbedded: 'json', matchOnlyAtLineStart: false }],
['end', { token: 'typeKeyword', next: '@pop', nextEmbedded: '@pop' }]
],
info: [
[
/[a-zA-Z][\w$]*/,
{
cases: {
'@infoBlockKeywords': 'typeKeyword',
'@infoKeywords': 'keyword'
}
}
]
],
pie: [
[/(title)(.*$)/, ['keyword', 'string']],
[
/[a-zA-Z][\w$]*/,
{
cases: {
'@pieBlockKeywords': 'typeKeyword',
'@pieKeywords': 'keyword'
}
}
],
[/".*?"/, 'string'],
[/\s*\d+/, 'number'],
[/:/, 'delimiter.bracket'],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
],
flowchart: [
[/[ox]?(--+|==+)[ox]/, 'transition'],
[
/[a-zA-Z][\w$]*/,
{
cases: {
'@flowchartBlockKeywords': 'typeKeyword',
'@flowchartKeywords': 'keyword',
'@default': 'variable'
}
}
],
[/\|+.+?\|+/, 'string'],
[/\[+(\\.+?[\\/]|\/.+?[/\\])\]+/, 'string'],
[/[[>]+[^\]|[]+?\]+/, 'string'],
[/{+.+?}+/, 'string'],
[/\(+.+?\)+/, 'string'],
[/-\.+->?/, 'transition'],
[/(-[-.])([^->]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']],
[/(==+)([^=]+?)(={3,}|={2,}>)/, ['transition', 'string', 'transition']],
[/<?(--+|==+)>|===+|---+/, 'transition'],
[/:::/, 'transition'],
[/[;&]/, 'delimiter.bracket'],
[/".*?"/, 'string'],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
],
sequenceDiagram: [
[
/[a-zA-Z][\w$]*/,
{
cases: {
'@sequenceDiagramBlockKeywords': 'typeKeyword',
'@sequenceDiagramKeywords': 'keyword',
'@default': 'variable'
}
}
],
[/(--?>?>|--?[)x])[+-]?/, 'transition'],
[/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
],
classDiagram: [
[/(?!class\s)([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']],
[/(\*|<\|?|o)?(--|\.\.)(\*|\|?>|o)?/, 'transition'],
[/^\s*class\s(?!.*\{)/, 'keyword'],
[
/[a-zA-Z][\w$]*/,
{
cases: {
'@classDiagramBlockKeywords': 'typeKeyword',
'@classDiagramKeywords': 'keyword',
'@default': 'variable'
}
}
],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
[/(<<)(.+?)(>>)/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']],
[/".*?"/, 'string'],
[/:::/, 'transition'],
[/:|\+|-|#|~|\*\s*$|\$\s*$|\(|\)|{|}/, 'delimiter.bracket']
],
journey: [
[/(title)(.*)/, ['keyword', 'string']],
[/(section)(.*)/, ['typeKeyword', 'string']],
[
/[a-zA-Z][\w$]*/,
{
cases: {
'@journeyBlockKeywords': 'typeKeyword',
'@journeyKeywords': 'keyword',
'@default': 'variable'
}
}
],
[
/(^\s*.+?)(:)(.*?)(:)(.*?)([,$])/,
[
'string',
'delimiter.bracket',
'number',
'delimiter.bracket',
'variable',
'delimiter.bracket'
]
],
[/,/, 'delimiter.bracket'],
[/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', 'variable']],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
],
gantt: [
[/(title)(.*)/, ['keyword', 'string']],
[/(section)(.*)/, ['typeKeyword', 'string']],
[
/[a-zA-Z][\w$]*/,
{
cases: {
'@ganttBlockKeywords': 'typeKeyword',
'@ganttKeywords': 'keyword'
}
}
],
[/(^\s*.*?)(:)/, ['string', 'delimiter.bracket']],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
[/:/, 'delimiter.bracket']
],
stateDiagram: [
[/note[^:]*$/, { token: 'typeKeyword', next: 'stateDiagramNote' }],
['hide empty description', 'keyword'],
[/^\s*state\s(?!.*\{)/, 'keyword'],
[/(<<)(fork|join|choice)(>>)/, 'annotation'],
[/(\[\[)(fork|join|choice)(]])/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']],
[
/[a-zA-Z][\w$]*/,
{
cases: {
'@stateDiagramBlockKeywords': 'typeKeyword',
'@stateDiagramKeywords': 'keyword',
'@default': 'variable'
}
}
],
[/".*?"/, 'string'],
[/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']],
[/{|}/, 'delimiter.bracket'],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
[/-->/, 'transition'],
[/\[.*?]/, 'string']
],
stateDiagramNote: [
[/^\s*end note$/, { token: 'typeKeyword', next: '@pop' }],
[/.*/, 'string']
],
erDiagram: [
[/[}|][o|](--|\.\.)[o|][{|]/, 'transition'],
[/".*?"/, 'string'],
[/(:)(.*?$)/, ['delimiter.bracket', 'string']],
[/:|{|}/, 'delimiter.bracket'],
[/([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
[/[a-zA-Z_-][\w$]*/, 'variable']
],
requirementDiagram: [
[/->|<-|-/, 'transition'],
[/(\d+\.)*\d+/, 'number'],
[
/[a-zA-Z_-][\w$]*/,
{
cases: {
'@requirementDiagramBlockKeywords': 'typeKeyword',
'@default': 'variable'
}
}
],
[/:|{|}|\//, 'delimiter.bracket'],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
[/".*?"/, 'string']
]
}
});
monacoEditor.editor.defineTheme('mermaid-dark', {
base: 'vs-dark',
inherit: true,
rules: [
{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
{ token: 'transition', foreground: '008800', fontStyle: 'bold' }
],
colors: {}
});
monacoEditor.editor.defineTheme('mermaid', {
base: 'vs',
inherit: true,
rules: [
{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
{ token: 'keyword', foreground: '649696' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'string', foreground: 'AA8500' },
{ token: 'transition', foreground: '008800', fontStyle: 'bold' },
{ token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' },
{ token: 'annotation', foreground: '4b4b96' },
{ token: 'number', foreground: '4b4b96' },
{ token: 'comment', foreground: '888c89' },
{ token: 'variable', foreground: 'A22889' },
{ token: 'type', foreground: '2BDEA8' }
],
colors: {}
});
// Register a completion item provider for the mermaid language
monacoEditor.languages.registerCompletionItemProvider('mermaid', {
provideCompletionItems: () => {
const suggestions = [
{
label: 'loop',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['loop ${1:Loop text}', '\t$0', 'end'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Sequence Diagram Loops'
},
{
label: 'alt',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['alt ${1:Describing text}', '\t$0', 'else', '\t', 'end'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Alternative Path'
},
{
label: 'opt',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['opt ${1:Describing text}', '\t$0', 'end'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Optional Path'
},
{
label: 'par',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: [
'par ${1:[Action 1]}',
'\t$0',
'and ${2:[Action 2]}',
'\t',
'and ${3:[Action 3]}',
'\t',
'end'
].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Parallel Actions'
},
{
label: 'rect',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['rect ${1:rgb(0, 255, 0)}', '\t$0', 'end'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Background Color'
},
{
label: 'subgraph',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['subgraph ${1:title}', '\t$0', 'end'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Subgraph'
},
{
label: 'class',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['class ${1:className} {', '\t$0', '}'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Class'
},
{
label: 'state',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['state ${1:stateName} {', '\t$0', '}'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'State'
},
{
label: 'note',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['note ${1:right of State1}', '\t$0', 'end note'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'State'
},
{
label: 'section',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['section ${1:Go to work}', '\t$0'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'User-journey Section'
},
{
label: 'element',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['element ${1:test_entity} {', '\t$0', '}'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Requirement Diagram Element'
},
{
label: 'options',
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: ['options', '{', ' $0', '}', 'end'].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'Git Graph Options'
},
...requirementDiagrams.map((requirementDiagramType) => ({
label: requirementDiagramType,
kind: monacoEditor.languages.CompletionItemKind.Snippet,
insertText: [
requirementDiagramType + ' ${1:test_req} {',
'\tid: 1',
'\ttext: the test text.',
'\trisk: high',
'\tverifyMethod: test',
'}'
].join('\n'),
insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: requirementDiagramType
.split(/(?=[A-Z])/)
.map((part) => part[0].toUpperCase() + part.slice(1))
.join(' ')
})),
...[
...new Set(
Object.values(keywords)
.map((diagramKeywords) =>
Object.entries(diagramKeywords)
.filter((keywordType) => keywordType[0] !== 'annotations')
.map((entry) => entry[1])
)
.flat(2)
)
].map((keyword) => ({
label: keyword,
kind: monacoEditor.languages.CompletionItemKind.Keyword,
insertText: keyword
}))
];
return { suggestions: suggestions };
}
});
monacoEditor.languages.setLanguageConfiguration('mermaid', {
autoClosingPairs: [
{
open: '(',
close: ')'
},
{
open: '{',
close: '}'
},
{
open: '[',
close: ']'
}
],
brackets: [
['(', ')'],
['{', '}'],
['[', ']']
]
});
};
src/lib/util/env.ts
+4 -2
View File
@@ -1,2 +1,4 @@
export const rendererUrl = import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink';
export const krokiRendererUrl = import.meta.env.MERMAID_KROKI_RENDERER_URL ?? 'https://kroki.io';
export const rendererUrl: string =
(import.meta.env.MERMAID_RENDERER_URL as string) ?? 'https://mermaid.ink';
export const krokiRendererUrl: string =
(import.meta.env.MERMAID_KROKI_RENDERER_URL as string) ?? 'https://kroki.io';
src/lib/util/serde.ts
+61
View File
@@ -0,0 +1,61 @@
import { deflate, inflate } from 'pako';
import { toUint8Array, fromUint8Array, toBase64, fromBase64 } from 'js-base64';
import type { State } from '$lib/types';
interface Serde {
serialize: (state: string) => string;
deserialize: (state: string) => string;
}
const base64Serde: Serde = {
serialize: (state: string): string => {
return toBase64(state, true);
},
deserialize: (state: string): string => {
return fromBase64(state);
}
};
export const pakoSerde: Serde = {
serialize: (state: string): string => {
const data = new TextEncoder().encode(state);
const compressed = deflate(data, { level: 9 });
return fromUint8Array(compressed, true);
},
deserialize: (state: string): string => {
const data = toUint8Array(state);
return inflate(data, { to: 'string' });
}
};
const serdes: { [key: string]: Serde } = {
base64: base64Serde,
pako: pakoSerde
};
type SerdeType = keyof typeof serdes;
export const serializeState = (state: State): string => {
const json = JSON.stringify(state);
const defaultSerde: SerdeType = 'pako';
const serialized = serdes[defaultSerde].serialize(json);
return `${defaultSerde}:${serialized}`;
};
export const deserializeState = (state: string): State => {
let type: SerdeType, serialized: string;
if (state.includes(':')) {
let tempType: string;
[tempType, serialized] = state.split(':');
if (tempType in serdes) {
type = tempType;
} else {
throw new Error(`Unknown serde type: ${tempType}`);
}
} else {
type = 'base64';
serialized = state;
}
const json = serdes[type].deserialize(serialized);
return JSON.parse(json) as State;
};
src/lib/util/state.ts
+7 -8
View File
@@ -1,9 +1,9 @@
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';
import { saveStatistics } from './stats';
import { serializeState, deserializeState } from './serde';
export const defaultState: State = {
code: `graph TD
@@ -37,17 +37,16 @@ const urlParseFailedState = `graph TD
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: Readable<string> = derived([codeStore], ([code], set) => {
set(toBase64(JSON.stringify(code), true));
export const serializedState: Readable<string> = derived([codeStore], ([code], set) => {
set(serializeState(code));
});
export const loadState = (data: string): void => {
let state: State;
console.log('Loading', data);
try {
const stateStr = fromBase64(data);
console.log(`Trying to load state: ${stateStr}`);
state = JSON.parse(stateStr);
const mermaidConfig =
state = deserializeState(data);
const mermaidConfig: { [key: string]: string } =
typeof state.mermaid === 'string' ? JSON.parse(state.mermaid) : state.mermaid;
if (
mermaidConfig.securityLevel &&
@@ -116,7 +115,7 @@ export const toggleDarkTheme = (dark: boolean): void => {
};
export const initURLSubscription = (): void => {
base64State.subscribe((state: string) => {
serializedState.subscribe((state: string) => {
history.replaceState(undefined, undefined, `#${state}`);
});
};
src/routes/edit.svelte
+5 -5
View File
@@ -1,12 +1,12 @@
<script lang="ts">
import Editor from '$lib/components/editor/editor.svelte';
import Editor from '$lib/components/editor.svelte';
import Navbar from '$lib/components/navbar.svelte';
import Preset from '$lib/components/preset.svelte';
import Actions from '$lib/components/actions.svelte';
import View from '$lib/components/view.svelte';
import Card from '$lib/components/card/card.svelte';
import History from '$lib/components/history/history.svelte';
import { updateCode, updateConfig, codeStore, base64State } from '$lib/util/state';
import { updateCode, updateConfig, codeStore, serializedState } from '$lib/util/state';
import { initHandler, syncDiagram } from '$lib/util/util';
import { errorStore } from '$lib/util/error';
import { onMount } from 'svelte';
@@ -15,7 +15,7 @@
import type { EditorUpdateEvent, State, Tab } from '$lib/types';
import { base } from '$app/paths';
base64State; // Weird fix for error > base64State is not defined. Treeshaking?
serializedState; // Weird fix for error > serializedState is not defined. Treeshaking?
let selectedMode = 'code';
const languageMap = {
code: 'mermaid',
@@ -82,7 +82,7 @@
startLineNumber: e.hash.loc.first_line,
startColumn: e.hash.loc.first_column,
endLineNumber: e.hash.loc.last_line,
endColumn: e.hash.loc.last_column + 1,
endColumn: (e.hash.loc.last_column as number) + 1,
message: e.str
};
errorMarkers.push(marker);
@@ -96,7 +96,7 @@
};
const viewDiagram = () => {
window.open(`${base}/view#${$base64State}`, '_blank').focus();
window.open(`${base}/view#${$serializedState}`, '_blank').focus();
};
onMount(async () => {
tsconfig.json
+3 -2
View File
@@ -2,7 +2,7 @@
"compilerOptions": {
"moduleResolution": "node",
"module": "es2020",
"lib": ["es2020", "ESNext", "DOM.Iterable"],
"lib": ["es2020", "ESNext", "DOM.Iterable", "DOM"],
"target": "es2019",
/**
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
@@ -33,6 +33,7 @@
"src/**/*.svelte",
"cypress/**/*.ts",
"cypress/**/*.js",
"static/**/*.js"
"static/**/*.js",
"src/pako.mts"
]
}
yarn.lock
+22 -12
View File
@@ -204,10 +204,10 @@
dependencies:
tiny-glob "^0.2.9"
"@sveltejs/kit@1.0.0-next.232":
version "1.0.0-next.232"
resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.232.tgz#a8879e331d37259d99f72cbcffa00d177106b896"
integrity sha512-STQ0hnJozIop8k9I313nwVasBIQ45Z2K1pUOkDVjCSOGijgsj+De5q0prQBtL1ZlqqisfkYlOf8W9gvDSyTLEA==
"@sveltejs/kit@1.0.0-next.236":
version "1.0.0-next.236"
resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.236.tgz#d0742b68cf2441a241732e461d64a4ae11e9dbb2"
integrity sha512-V/K6KZwZlfM2jDiL7luisRkPujf/pAT2SUpgOEONk44WwUwYwd928qN2u0Z6SAfQFCDAxUI8pMHP2OC1bm352Q==
dependencies:
"@sveltejs/vite-plugin-svelte" "^1.0.0-next.32"
sade "^1.7.4"
@@ -250,6 +250,11 @@
resolved "https://registry.npmjs.org/@types/node/-/node-14.17.0.tgz"
integrity sha512-w8VZUN/f7SSbvVReb9SWp6cJFevxb4/nkG65yLAya//98WgocKm5PLDAtSs5CtJJJM+kHmJjO/6mmYW4MHShZA==
"@types/pako@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@types/pako/-/pako-1.0.3.tgz#2e61c2b02020b5f44e2e5e946dfac74f4ec33c58"
integrity sha512-EDxOsHAD5dqjbjEUM1xwa7rpKPFb8ECBE5irONTQU7/OsO3thI5YrNEWSPNMvYmvFM0l/OLQJ6Mgw7PEdXSjhg==
"@types/parse-json@^4.0.0":
version "4.0.0"
resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
@@ -2911,10 +2916,10 @@ lines-and-columns@^1.1.6:
resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz"
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
lint-staged@^12.2.1:
version "12.2.1"
resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.1.tgz#e37b5a81deaabf5823f43b3aa903a70c15c9d0b3"
integrity sha512-VCVcA9C2Vt5HHxSR4EZVZFJcQRJH984CGBeY+cJ/xed4mBd+JidbM/xbKcCq5ASaygAV0iITtdsCTnID7h/1OQ==
lint-staged@^12.2.2:
version "12.2.2"
resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.2.tgz#e03d93b41092316e0f38b37c9630da807aae3cca"
integrity sha512-bcHEoM1M/f+K1BYdHcEuIn8K+zMOSJR3mkny6PAuQiTgcSUcRbUWaUD6porAYypxF4k1vYZZ2HutZt1p94Z1jQ==
dependencies:
cli-truncate "^3.1.0"
colorette "^2.0.16"
@@ -3150,6 +3155,11 @@ monaco-editor@^0.31.1:
resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.31.1.tgz#67f597b3e45679d1f551237e12a3a42c4438b97b"
integrity sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==
monaco-mermaid@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.2.tgz#a96d2c5dfbf9fc591cb7c61dff40a3d188021337"
integrity sha512-H0waK3QyTklsE3hKW4bvDFt+8Wcfghszi125wQVS89gzlHZMxZh5w1RqQe85d4FSmjwc3t1o71pCkyEYiZJiXg==
mri@^1.1.0:
version "1.1.6"
resolved "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz"
@@ -4394,10 +4404,10 @@ type-fest@^0.21.3:
resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
typescript@^4.5.4:
version "4.5.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8"
integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==
typescript@^4.5.5:
version "4.5.5"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
universal-analytics@^0.4.20:
version "0.4.23"