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

Merge pull request #68 from sidharthv96/reformat

Browse Source 
Add code formatting and precommit hook
This commit is contained in:
Knut Sveidqvist
2020-12-17 20:55:25 +01:00
committed by GitHub
parent c34800ef33 6fde9e22a3
commit d5f59dbbaf
21 changed files with 2191 additions and 1089 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc
+3
View File
@@ -0,0 +1,3 @@
{
"singleQuote": true
}
package.json
+14 -1
View File
@@ -5,7 +5,11 @@
"devDependencies": {
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"husky": "^4.3.0",
"lint-staged": "^10.5.2",
"mini-css-extract-plugin": "^0.6.0",
"prettier": "^2.2.1",
"prettier-plugin-svelte": "^1.4.1",
"serve": "^11.0.0",
"style-loader": "^0.23.1",
"svelte": "^3.0.0",
@@ -17,7 +21,8 @@
"scripts": {
"release": "cross-env NODE_ENV=production webpack -p",
"build": "cross-env NODE_ENV=production webpack",
"dev": "webpack-dev-server --content-base docs"
"dev": "webpack-dev-server --content-base docs",
"pretty": "prettier --write ./src/*"
},
"dependencies": {
"mermaid": "8.8.4",
@@ -28,5 +33,13 @@
"monaco-editor": "0.18.1",
"svelte-routing": "^1.4.0",
"svelte-spa-router": "^1.3.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{ts,svelte,js,css,md}": "prettier --plugin-search-dir=. --write"
}
}
src/App.svelte
+18 -19
View File
@@ -1,32 +1,31 @@
<script>
import Router from "svelte-spa-router";
// Used for SSR. A falsy value is ignored by the Router.
import Edit from "./routes/Edit.svelte";
import View from "./routes/View.svelte";
import Router from 'svelte-spa-router';
// Used for SSR. A falsy value is ignored by the Router.
import Edit from './routes/Edit.svelte';
import View from './routes/View.svelte';
const routes = {
// Exact path
"/": Edit,
const routes = {
// Exact path
'/': Edit,
// Using named parameters, with last being optional
"/edit/:data": Edit,
// Using named parameters, with last being optional
'/edit/:data': Edit,
// Wildcard parameter
"/view/:data": View,
// Wildcard parameter
'/view/:data': View,
// Catch-all
// This is optional, but if present it must be the last
"*": Edit,
};
// Catch-all
// This is optional, but if present it must be the last
'*': Edit,
};
</script>
<style>
</style>
<svelte:head>
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet" />
</svelte:head>
<Router {routes} />
src/code-error-store.js
+1 -1
View File
@@ -1,3 +1,3 @@
import { writable } from 'svelte/store';
export const codeErrorStore = writable(undefined);
export const codeErrorStore = writable(undefined);
src/code-store.js
+19 -19
View File
@@ -1,42 +1,42 @@
import { writable, get } from 'svelte/store';
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
import { Base64 } from 'js-base64'
import {push, pop, replace} from 'svelte-spa-router'
import { Base64 } from 'js-base64';
import { push, pop, replace } from 'svelte-spa-router';
export const codeStore = writable(undefined);
export const fromUrl = data => {
export const fromUrl = (data) => {
let code;
let state;
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches && false
const isDarkMode =
window.matchMedia('(prefers-color-scheme: dark)').matches && false;
try {
let stateStr = Base64.decode(data)
console.log('state from url', stateStr)
let stateStr = Base64.decode(data);
console.log('state from url', stateStr);
state = JSON.parse(stateStr);
if (state.code === undefined) { // not valid json
// state = { code: '', mermaid: { theme: themeFromUrl } }
}
code = state.code;
if (state.code === undefined) {
// not valid json
// state = { code: '', mermaid: { theme: themeFromUrl } }
}
code = state.code;
} catch (e) {
// console.error('Init error', e);
code = `graph TD
code = `graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`;
state = { code, mermaid: { theme: isDarkMode?'dark':'default' } };
state = { code, mermaid: { theme: isDarkMode ? 'dark' : 'default' } };
}
codeStore.set(state);
};
export const updateCodeStore = newState => {
export const updateCodeStore = (newState) => {
codeStore.set(newState);
replace('/edit/' + Base64.encodeURI(JSON.stringify(newState)))
replace('/edit/' + Base64.encodeURI(JSON.stringify(newState)));
};
export const updateCode = (code, updateEditor) => {
const state = get(codeStore);
@@ -44,12 +44,12 @@ export const updateCode = (code, updateEditor) => {
state.updateEditor = updateEditor;
codeStore.set(state);
};
export const updateConfig = config => {
export const updateConfig = (config) => {
const state = get(codeStore);
state.mermaid = config;
codeStore.set(state);
};
const unsubscribe = codeStore.subscribe( state => {
replace('/edit/' + Base64.encodeURI(JSON.stringify(state)))
const unsubscribe = codeStore.subscribe((state) => {
replace('/edit/' + Base64.encodeURI(JSON.stringify(state)));
});
src/components/Card.svelte
+28 -28
View File
@@ -1,36 +1,36 @@
<script>
export let title = "";
export let noPadding = false;
let contentClass = "padding";
if (noPadding) {
contentClass = "";
}
export let title = '';
export let noPadding = false;
let contentClass = 'padding';
if (noPadding) {
contentClass = '';
}
</script>
<style>
#card {
border: 1px solid lightgray;
margin-bottom: 16px;
}
#title {
font-family: "Playfair Display", serif;
font-weight: 400;
border-bottom: 1px solid lightgray;
font-size: 1.25rem;
background-color: #1e60ab;
color: #eaebef;
}
#content {
padding-top: 8px;
}
.padding {
padding: 8px;
}
#card {
border: 1px solid lightgray;
margin-bottom: 16px;
}
#title {
font-family: 'Playfair Display', serif;
font-weight: 400;
border-bottom: 1px solid lightgray;
font-size: 1.25rem;
background-color: #1e60ab;
color: #eaebef;
}
#content {
padding-top: 8px;
}
.padding {
padding: 8px;
}
</style>
<div id="card">
<div id="title" class="padding">{title}</div>
<div id="content" class={contentClass}>
<slot />
</div>
<div id="title" class="padding">{title}</div>
<div id="content" class={contentClass}>
<slot />
</div>
</div>
src/components/Config.svelte
+95 -94
View File
@@ -1,112 +1,113 @@
<script>
import { codeStore, updateCodeStore, updateConfig, updateCode } from '../code-store.js';
import { configErrorStore } from '../config-error-store.js';
import { onMount } from 'svelte';
import {push, pop, replace} from 'svelte-spa-router'
import { Base64 } from 'js-base64'
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
import Error from './Error.svelte';
import { initEditor } from './editor-utils';
import {
codeStore,
updateCodeStore,
updateConfig,
updateCode,
} from '../code-store.js';
import { configErrorStore } from '../config-error-store.js';
import { onMount } from 'svelte';
import { push, pop, replace } from 'svelte-spa-router';
import { Base64 } from 'js-base64';
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
import Error from './Error.svelte';
import { 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 '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';
export let conf = '';
export let code = '';
export let error = false;
export let conf = '';
export let code = '';
export let error = false;
let edit;
let editorElem = null;
let edit;
let editorElem = null;
let decorations = [];
const decArr = [];
let decorations = [];
const decArr = [];
let oldConf = { };
const handleConfUpdate = conf => {
try {
console.log(conf);
JSON.parse(conf);
// let newState = { code, mermaid: JSON.parse(conf) };
// oldConf = newState.mermaid;
updateConfig(JSON.parse(conf));
configErrorStore.set(undefined);
// const model = edit.getModel();
// // model.setValue(conf);
// // model.dispose();
} catch(e) {
console.log('Error in parsed', e);
configErrorStore.set(e);
const str = JSON.stringify({ code, mermaid: oldConf });
replace('/edit/' + Base64.encodeURI(str))
}
};
let oldConf = {};
const handleConfUpdate = (conf) => {
try {
console.log(conf);
JSON.parse(conf);
// let newState = { code, mermaid: JSON.parse(conf) };
// oldConf = newState.mermaid;
updateConfig(JSON.parse(conf));
configErrorStore.set(undefined);
// const model = edit.getModel();
// // model.setValue(conf);
// // model.dispose();
} catch (e) {
console.log('Error in parsed', e);
configErrorStore.set(e);
const str = JSON.stringify({ code, mermaid: oldConf });
replace('/edit/' + Base64.encodeURI(str));
}
};
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'
});
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',
});
let decorations = [];
edit.onDidChangeModelContent(function (e) {
const conf = edit.getValue();
handleConfUpdate(conf);
});
handleConfUpdate(conf);
}
});
let decorations = [];
edit.onDidChangeModelContent(function (e) {
const conf = edit.getValue();
handleConfUpdate(conf);
});
handleConfUpdate(conf);
}
});
initEditor(monaco);
initEditor(monaco);
const unsubscribeError = configErrorStore.subscribe( _error => {
// console.log('Error ideintified' + _error.toString());
if(_error) {
error = _error.toString();
} else {
error = false;
}
});
onMount(async () => {
console.log('Mounting config');
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
return './editor.worker.bundle.js';
}
}
});
const unsubscribeError = configErrorStore.subscribe((_error) => {
// console.log('Error ideintified' + _error.toString());
if (_error) {
error = _error.toString();
} else {
error = false;
}
});
onMount(async () => {
console.log('Mounting config');
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
return './editor.worker.bundle.js';
},
};
});
</script>
<style>
#editor-conf {
width: 100%;
height: 200px;
max-height: 300px;
flex: 1;
}
#editor-conf {
width: 100%;
height: 200px;
max-height: 300px;
flex: 1;
}
</style>
<div id="editor-container">
<div id="editor-conf"> </div>
{#if error}
<Error errorText={error}/>
{/if}
<div id="editor-conf" />
{#if error}
<Error errorText={error} />
{/if}
</div>
src/components/Editor.svelte
+116 -103
View File
@@ -1,120 +1,133 @@
<script>
import { codeStore, updateCodeStore } from '../code-store.js';
import { codeErrorStore } from '../code-error-store.js';
import { onMount } from 'svelte';
import {push, pop, replace} from 'svelte-spa-router'
import { Base64 } from 'js-base64'
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
import Error from './Error.svelte';
import { 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 { codeStore, updateCodeStore } from '../code-store.js';
import { codeErrorStore } from '../code-error-store.js';
import { onMount } from 'svelte';
import { push, pop, replace } from 'svelte-spa-router';
import { Base64 } from 'js-base64';
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
import Error from './Error.svelte';
import { 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';
export let code = '';
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches && false
export let conf = { theme: isDarkMode?'dark':'default' };
let edit;
export let error = false;
export let code = '';
const isDarkMode =
window.matchMedia('(prefers-color-scheme: dark)').matches && false;
export let conf = { theme: isDarkMode ? 'dark' : 'default' };
let edit;
export let error = false;
let decorations = [];
const decArr = [];
let editorElem = null;
const handleCodeUpdate = code => {
try {
mermaid.parse(code);
let newState = { code, mermaid: conf, updateEditor: false };
updateCodeStore(newState);
decArr.forEach(decor => {
edit.deltaDecorations(decor, []);
});
let decorations = [];
const decArr = [];
let editorElem = null;
const handleCodeUpdate = (code) => {
try {
mermaid.parse(code);
let newState = { code, mermaid: conf, updateEditor: false };
updateCodeStore(newState);
decArr.forEach((decor) => {
edit.deltaDecorations(decor, []);
});
codeErrorStore.set(undefined);
const model = edit.getModel();
} catch(e) {
if(e) {
codeErrorStore.set(e);
console.log('Error in parsed', e.hash);
const str = JSON.stringify({ code: code, mermaid: conf });
replace('/edit/' + Base64.encodeURI(str))
const l = e.hash.line;
decArr.push(edit.deltaDecorations([], [
{ range: new monaco.Range(e.hash.loc.first_line,e.hash.loc.last_line,e.hash.loc.first_column,e.hash.loc.last_column), options: { inlineClassName: 'myInlineDecoration' }}]
));
}
}
};
codeErrorStore.set(undefined);
const model = edit.getModel();
} catch (e) {
if (e) {
codeErrorStore.set(e);
console.log('Error in parsed', e.hash);
const str = JSON.stringify({ code: code, mermaid: conf });
replace('/edit/' + Base64.encodeURI(str));
const l = e.hash.line;
decArr.push(
edit.deltaDecorations(
[],
[
{
range: new monaco.Range(
e.hash.loc.first_line,
e.hash.loc.last_line,
e.hash.loc.first_column,
e.hash.loc.last_column
),
options: { inlineClassName: 'myInlineDecoration' },
},
]
)
);
}
}
};
const unsubscribe = codeStore.subscribe( state => {
console.log('Code change');
if(editorElem === null) {
editorElem = document.getElementById('editor');
}
if(!code && state) {
code = state.code;
}
if(state) {
conf = state.mermaid;
}
if(!edit && code && (editorElem !== null)) {
edit = monaco.editor.create(editorElem, {
value: [
code,
].join('\n'),
theme: 'myCoolTheme',
language: 'mermaid'
});
const unsubscribe = codeStore.subscribe((state) => {
console.log('Code change');
if (editorElem === null) {
editorElem = document.getElementById('editor');
}
if (!code && state) {
code = state.code;
}
if (state) {
conf = state.mermaid;
}
if (!edit && code && editorElem !== null) {
edit = monaco.editor.create(editorElem, {
value: [code].join('\n'),
theme: 'myCoolTheme',
language: 'mermaid',
});
let decorations = [];
edit.onDidChangeModelContent(function (e) {
const code = edit.getValue();
handleCodeUpdate(code);
});
handleCodeUpdate(code);
}
if(state && state.updateEditor && edit && code && (editorElem !== null)) {
edit.setValue(state.code);
handleCodeUpdate(state.code);
}
});
let decorations = [];
edit.onDidChangeModelContent(function (e) {
const code = edit.getValue();
handleCodeUpdate(code);
});
handleCodeUpdate(code);
}
if (state && state.updateEditor && edit && code && editorElem !== null) {
edit.setValue(state.code);
handleCodeUpdate(state.code);
}
});
const unsubscribeError = codeErrorStore.subscribe( _error => {
if(_error) {
error = true;
} else {
error = false;
}
});
const unsubscribeError = codeErrorStore.subscribe((_error) => {
if (_error) {
error = true;
} else {
error = false;
}
});
initEditor(monaco);
initEditor(monaco);
onMount(async () => {
// editorElem = document.querySelector('#editor')
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
return './editor.worker.bundle.js';
}
}
});
onMount(async () => {
// editorElem = document.querySelector('#editor')
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
return './editor.worker.bundle.js';
},
};
});
// export let name;
// export let params = {};
// export let name;
// export let params = {};
</script>
<style>
#editor-container {}
#editor {
width: 100%;
height: 400px;
max-height: 300px;
flex: 1;
}
#editor-container {
}
#editor {
width: 100%;
height: 400px;
max-height: 300px;
flex: 1;
}
</style>
<div id="editor-container">
<div id="editor"> </div>
{#if error}
<Error errorText="Syntax Error"/>
{/if}
<div id="editor" />
{#if error}
<Error errorText="Syntax Error" />
{/if}
</div>
src/components/Error.svelte
+38 -42
View File
@@ -1,53 +1,49 @@
<script>
import { codeErrorStore } from '../code-error-store.js';
import { onMount } from 'svelte';
import { codeErrorStore } from '../code-error-store.js';
import { onMount } from 'svelte';
onMount(async () => {
});
onMount(async () => {});
// export let code = '';
export let classes = '';
// export let code = '';
export let classes = '';
// export let error = {};
// export let token = '';
// export let expected = '';
// export let error = {};
// export let token = '';
// export let expected = '';
// export let params = {}
export let errorText = '';
// export let params = {}
export let errorText = '';
// const unsubscribeError = codeErrorStore.subscribe( _error => {
// if(typeof _error === 'undefined') {
// classes = 'invisible';
// error = {};
// token='';
// expected='';
// } else {
// classes = 'visible';
// error = _error;
// console.log('error: ', _error);
// token = error.hash.token;
// expected = error.hash.expected.join(' ');;
// }
// });
// const unsubscribeError = codeErrorStore.subscribe( _error => {
// if(typeof _error === 'undefined') {
// classes = 'invisible';
// error = {};
// token='';
// expected='';
// } else {
// classes = 'visible';
// error = _error;
// console.log('error: ', _error);
// token = error.hash.token;
// expected = error.hash.expected.join(' ');;
// }
// });
</script>
<style>
#error {
background: darkred;
color: white;
flex: 1;
padding: 10px;
/* position: absolute; */
}
.invisible {
display: none;
}
.visible {
display: block;
}
#error {
background: darkred;
color: white;
flex: 1;
padding: 10px;
/* position: absolute; */
}
.invisible {
display: none;
}
.visible {
display: block;
}
</style>
<div id="error" class="{classes}">{errorText}
</div>
<div id="error" class={classes}>{errorText}</div>
src/components/Links.svelte
+170 -148
View File
@@ -1,176 +1,198 @@
<script>
import { codeErrorStore } from "../code-error-store.js";
import { link } from "svelte-spa-router";
import { Base64 } from "js-base64";
import { onMount } from "svelte";
import moment from "moment";
import { codeStore } from "../code-store.js";
import { codeErrorStore } from '../code-error-store.js';
import { link } from 'svelte-spa-router';
import { Base64 } from 'js-base64';
import { onMount } from 'svelte';
import moment from 'moment';
import { codeStore } from '../code-store.js';
onMount(async () => {});
onMount(async () => {});
export const onDownloadPNG = event => {
var canvas = document.createElement('canvas');
const container = document.getElementById('container');
const svg = document.querySelector('#container svg');
const box = svg.getBoundingClientRect();
canvas.width = box.width;
canvas.height = box.height;
if(imagemodeselected === "width") {
const ratio = box.height/box.width;
canvas.width = userimagewidth;
canvas.height = userimagewidth * ratio;
} else if(imagemodeselected === "height") {
const ratio = box.width/box.height;
canvas.width = userimageheight * ratio;
canvas.height = userimageheight;
}
const context = canvas.getContext('2d');
context.fillStyle = "white";
context.fillRect(0, 0, canvas.width, canvas.height);
export const onDownloadPNG = (event) => {
var canvas = document.createElement('canvas');
const container = document.getElementById('container');
const svg = document.querySelector('#container svg');
const box = svg.getBoundingClientRect();
canvas.width = box.width;
canvas.height = box.height;
if (imagemodeselected === 'width') {
const ratio = box.height / box.width;
canvas.width = userimagewidth;
canvas.height = userimagewidth * ratio;
} else if (imagemodeselected === 'height') {
const ratio = box.width / box.height;
canvas.width = userimageheight * ratio;
canvas.height = userimageheight;
}
const context = canvas.getContext('2d');
context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);
var image = new Image();
image.onload = function () {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
var image = new Image();
image.onload = function () {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
var a = document.createElement("a");
a.download = `mermaid-diagram-${moment().format(
"YYYYMMDDHHmmss"
)}.png`;
a.href = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
a.click();
};
console.warn("SVG", container.innerHTML);
image.src = `data:image/svg+xml;base64,${Base64.encode(
container.innerHTML
)}`;
event.stopPropagation();
event.preventDefault();
event.target.download = `mermaid-diagram-${moment().format(
"YYYYMMDDHHmmss"
)}.png`;
};
export const onDownloadSVG = (event) => {
console.log("event", event.target);
const container = document.getElementById("container");
event.target.href = `data:image/svg+xml;base64,${Base64.encode(
container.innerHTML
)}`;
event.target.download = `mermaid-diagram-${moment().format(
"YYYYMMDDHHmmss"
)}.svg`;
console.log("event", event);
};
export const onCopyMarkdown = (event) => {
event.target.select();
document.execCommand("Copy");
var a = document.createElement('a');
a.download = `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.png`;
a.href = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
a.click();
};
let url = '/mermaid-live-editor/#/view';
let b64Code;
let iUrl;
let svgUrl;
let mdCode;
let imagemodeselected = "auto";
let userimagewidth = 1920;
let userimageheight = 1080;
console.warn('SVG', container.innerHTML);
image.src = `data:image/svg+xml;base64,${Base64.encode(
container.innerHTML
)}`;
event.stopPropagation();
event.preventDefault();
event.target.download = `mermaid-diagram-${moment().format(
'YYYYMMDDHHmmss'
)}.png`;
};
export const onDownloadSVG = (event) => {
console.log('event', event.target);
const container = document.getElementById('container');
event.target.href = `data:image/svg+xml;base64,${Base64.encode(
container.innerHTML
)}`;
event.target.download = `mermaid-diagram-${moment().format(
'YYYYMMDDHHmmss'
)}.svg`;
console.log('event', event);
};
export const onCopyMarkdown = (event) => {
event.target.select();
document.execCommand('Copy');
};
const unsubscribe = codeStore.subscribe((state) => {
b64Code = Base64.encodeURI(JSON.stringify(state));
url = `/mermaid-live-editor/#/view/${b64Code}`;
iUrl = `https://mermaid.ink/img/${b64Code}`;
svgUrl = `https://mermaid.ink/svg/${b64Code}`;
mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
});
let url = '/mermaid-live-editor/#/view';
let b64Code;
let iUrl;
let svgUrl;
let mdCode;
let imagemodeselected = 'auto';
let userimagewidth = 1920;
let userimageheight = 1080;
const unsubscribe = codeStore.subscribe((state) => {
b64Code = Base64.encodeURI(JSON.stringify(state));
url = `/mermaid-live-editor/#/view/${b64Code}`;
iUrl = `https://mermaid.ink/img/${b64Code}`;
svgUrl = `https://mermaid.ink/svg/${b64Code}`;
mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
});
</script>
<style>
#links {
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid lightgray;
}
#markdown {
padding: 7px;
font-family: monospace;
font-size: 14px;
width: 95%;
margin: 1rem 0;
border: 1px solid lightgray;
}
label[for="markdown"] {
cursor: pointer;
margin: 0 auto;
}
/*
#links {
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid lightgray;
}
#markdown {
padding: 7px;
font-family: monospace;
font-size: 14px;
width: 95%;
margin: 1rem 0;
border: 1px solid lightgray;
}
label[for='markdown'] {
cursor: pointer;
margin: 0 auto;
}
/*
@media (prefers-color-scheme: dark) {
label[for="markdown"] {
color: #d8d8d8;
}
} */
.button-style {
background-color: #a2d9e2;
color: #33a2c4;
border-radius: 0.25rem;
padding: 0.5rem;
border: 1px solid #a2d9e2;
margin: 0.25rem;
}
.button-style:hover {
background-color: #fff;
color: #33a2c4;
border: 1px solid #33a2c4;
}
.button-style:focus {
outline: none;
}
.link-style {
text-decoration: none;
color: #33a2c4;
}
#copy-section {
padding-top: 1rem;
text-align: center;
}
.button-style {
background-color: #a2d9e2;
color: #33a2c4;
border-radius: 0.25rem;
padding: 0.5rem;
border: 1px solid #a2d9e2;
margin: 0.25rem;
}
.button-style:hover {
background-color: #fff;
color: #33a2c4;
border: 1px solid #33a2c4;
}
.button-style:focus {
outline: none;
}
.link-style {
text-decoration: none;
color: #33a2c4;
}
#copy-section {
padding-top: 1rem;
text-align: center;
}
</style>
<div id="links">
<button class="button-style">
<a class="link-style" href={url} use:link>Link to view</a>
</button>
<button class="button-style">
<a class="link-style" href={url} download="" on:click={onDownloadSVG}>
Download SVG
</a>
</button>
<button class="button-style">
<a class="link-style" href={iUrl}>Link to Image</a>
</button>
<button class="button-style">
<a class="link-style" href={svgUrl}>Link to SVG</a>
</button>
<button class="button-style">
<a class="link-style" href={url} download="" on:click={onDownloadPNG}>
Download PNG
</a>
</button>
(markdown is base64 encoded for these urls)
<button class="button-style">
<a class="link-style" href={url} use:link>Link to view</a>
</button>
<button class="button-style">
<a class="link-style" href={url} download="" on:click={onDownloadSVG}>
Download SVG
</a>
</button>
<button class="button-style">
<a class="link-style" href={iUrl}>Link to Image</a>
</button>
<button class="button-style">
<a class="link-style" href={svgUrl}>Link to SVG</a>
</button>
<button class="button-style">
<a class="link-style" href={url} download="" on:click={onDownloadPNG}>
Download PNG
</a>
</button>
(markdown is base64 encoded for these urls)
</div>
<div id="copy-section">
<label for="markdown" class="button-style">Copy Markdown</label>
<br />
<input id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
<label for="markdown" class="button-style">Copy Markdown</label>
<br />
<input id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
</div>
<p>
<label>PNG size:</label>
<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected}>
<input
type="radio"
value="auto"
id="autosize"
bind:group={imagemodeselected} />
<label for="autosize">auto</label>
<input type="radio" value="width" id="width-active" bind:group={imagemodeselected}>
<input
type="radio"
value="width"
id="width-active"
bind:group={imagemodeselected} />
<label for="width">width</label>
<input id="width" type="number" min="3" max="10000" bind:value={userimagewidth} disabled={imagemodeselected !== "width"}>
<input type="radio" value="height" id="height-active" bind:group={imagemodeselected}>
<input
id="width"
type="number"
min="3"
max="10000"
bind:value={userimagewidth}
disabled={imagemodeselected !== 'width'} />
<input
type="radio"
value="height"
id="height-active"
bind:group={imagemodeselected} />
<label for="height">height</label>
<input id="height" type="number" min="3" max="10000" bind:value={userimageheight} disabled={imagemodeselected !== "height"}><br>
<input
id="height"
type="number"
min="3"
max="10000"
bind:value={userimageheight}
disabled={imagemodeselected !== 'height'} /><br />
</p>
src/components/Tag.svelte
+14 -14
View File
@@ -1,14 +1,14 @@
<script>
export let noPadding = false;
let contentClass = 'padding';
if (noPadding) {
contentClass = '';
}
export let noPadding = false;
let contentClass = 'padding';
if (noPadding) {
contentClass = '';
}
</script>
<style>
#tag {
height: auto;
#tag {
height: auto;
margin: 0 8px 0 0;
padding: 0 7px;
font-size: 12px;
@@ -17,15 +17,15 @@
border: 1px solid #d9d9d9;
border-radius: 4px;
cursor: default;
font-size: smaller;
/* padding: 8px; */
color: #52c41a;
font-size: smaller;
/* padding: 8px; */
color: #52c41a;
background: #f6ffed;
border-color: #b7eb8f;
margin-left: 8px;
}
margin-left: 8px;
}
</style>
<div id="tag">
<slot></slot>
</div>
<slot />
</div>
src/components/View.svelte
+104 -109
View File
@@ -1,129 +1,124 @@
<script>
import { codeStore } from '../code-store.js';
import { codeErrorStore } from '../code-error-store.js';
import { configErrorStore } from '../config-error-store.js';
import { onMount } from 'svelte';
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
import { codeStore } from '../code-store.js';
import { codeErrorStore } from '../code-error-store.js';
import { configErrorStore } from '../config-error-store.js';
import { onMount } from 'svelte';
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
const detectType = text => {
text = text.replace(/^\s*%%.*\n/g, '\n');
console.debug('Detecting diagram type based on the text ' + text);
if (text.match(/^\s*sequenceDiagram/)) {
return 'sequence';
}
const detectType = (text) => {
text = text.replace(/^\s*%%.*\n/g, '\n');
console.debug('Detecting diagram type based on the text ' + text);
if (text.match(/^\s*sequenceDiagram/)) {
return 'sequence';
}
if (text.match(/^\s*gantt/)) {
return 'gantt';
}
if (text.match(/^\s*gantt/)) {
return 'gantt';
}
if (text.match(/^\s*classDiagram/)) {
return 'class';
}
if (text.match(/^\s*classDiagram/)) {
return 'class';
}
if (text.match(/^\s*stateDiagram/)) {
return 'state';
}
if (text.match(/^\s*stateDiagram/)) {
return 'state';
}
if (text.match(/^\s*gitGraph/)) {
return 'git';
}
if (text.match(/^\s*flowchart/)) {
return 'flowchart';
}
if (text.match(/^\s*info/)) {
return 'info';
}
if (text.match(/^\s*pie/)) {
return 'pie';
}
if (text.match(/^\s*gitGraph/)) {
return 'git';
}
if (text.match(/^\s*flowchart/)) {
return 'flowchart';
}
};
if (text.match(/^\s*info/)) {
return 'info';
}
if (text.match(/^\s*pie/)) {
return 'pie';
}
// manual debounce
let timeout;
const saveStatistcs = (graphType) => {
clearTimeout(timeout);
// Only save statistcs after a 5 sec delay
timeout = setTimeout(function () {
console.log('ga:', 'send', 'event', 'render', graphType, graphType);
ga('send', 'event', graphType, 'render', 'render');
}, 5000);
};
return 'flowchart';
};
let element;
let container;
onMount(async () => {
element = document.querySelector('graph-div');
});
// manual debounce
let timeout;
const saveStatistcs = graphType => {
clearTimeout(timeout);
// Only save statistcs after a 5 sec delay
timeout = setTimeout(
function() {
console.log('ga:', 'send', 'event', 'render', graphType, graphType);
ga('send', 'event', graphType, 'render', 'render');
},
5000);
};
let insertSvg = function (svgCode, bindFunctions) {
// element.innerHTML = svgCode;
};
export let code = '';
export let configClasses = '';
export let codeClasses = '';
const unsubscribe = codeStore.subscribe((state) => {
try {
if (container && state) {
code = state.code;
let element;
let container;
onMount(async () => {
element = document.querySelector("graph-div");
});
// mermaid.parse(code)
// Replacing special characters '<' and '>' with encoded '&lt;' and '&gt;'
let _code = code;
_code = _code.replace(/</g, '&lt;');
_code = _code.replace(/>/g, '&gt;');
let insertSvg = function(svgCode, bindFunctions){
// element.innerHTML = svgCode;
};
export let code = '';
export let configClasses = '';
export let codeClasses = '';
const unsubscribe = codeStore.subscribe( state => {
try {
if(container && state) {
code = state.code;
// mermaid.parse(code)
// Replacing special characters '<' and '>' with encoded '&lt;' and '&gt;'
let _code = code
_code = _code.replace(/</g, '&lt;')
_code = _code.replace(/>/g, '&gt;')
container.innerHTML = _code;
saveStatistcs(detectType(code));
delete container.dataset.processed
mermaid.initialize(Object.assign({}, state.mermaid))
mermaid.init(undefined, container)
if(code) mermaid.render('graph-div', code, insertSvg);
}
} catch(e) {
console.log('view fail', e);
}
});
const unsubscribeError = codeErrorStore.subscribe( _error => {
if(typeof _error === 'undefined') {
codeClasses = '';
} else {
codeClasses = 'error';
console.log('code error: ', _error);
}
});
const unsubscribeConfigError = configErrorStore.subscribe( _error => {
if(typeof _error === 'undefined') {
configClasses = '';
} else {
configClasses = 'error';
console.log('conf error: ', _error);
}
});
container.innerHTML = _code;
saveStatistcs(detectType(code));
delete container.dataset.processed;
mermaid.initialize(Object.assign({}, state.mermaid));
mermaid.init(undefined, container);
if (code) mermaid.render('graph-div', code, insertSvg);
}
} catch (e) {
console.log('view fail', e);
}
});
const unsubscribeError = codeErrorStore.subscribe((_error) => {
if (typeof _error === 'undefined') {
codeClasses = '';
} else {
codeClasses = 'error';
console.log('code error: ', _error);
}
});
const unsubscribeConfigError = configErrorStore.subscribe((_error) => {
if (typeof _error === 'undefined') {
configClasses = '';
} else {
configClasses = 'error';
console.log('conf error: ', _error);
}
});
</script>
<style>
#view {
border: 1px solor darkred;
flex: 1;
}
#container {
overflow-x: auto;
}
.error {
opacity: 0.5;
}
#view {
border: 1px solor darkred;
flex: 1;
}
#container {
overflow-x: auto;
}
.error {
opacity: 0.5;
}
</style>
<div id="view" class="{codeClasses} {configClasses}">
<div id="container" bind:this={container}></div>
<div id="container" bind:this={container} />
</div>
src/components/editor-utils.js
+54 -44
View File
@@ -1,32 +1,36 @@
export const initEditor = monaco => {
export const initEditor = (monaco) => {
monaco.languages.register({ id: 'mermaid' });
// Register a tokens provider for the language
monaco.languages.setMonarchTokensProvider('mermaid', {
typeKeywords: [
'graph', 'stateDiagram', 'sequenceDiagram', 'classDiagram', 'pie', 'flowchart', 'gantt'
],
keywords: [
'patricipant','as'
],
arrows: [
'---', '===', '-->', '==>'
'graph',
'stateDiagram',
'sequenceDiagram',
'classDiagram',
'pie',
'flowchart',
'gantt',
],
keywords: ['patricipant', 'as'],
arrows: ['---', '===', '-->', '==>'],
tokenizer: {
root: [
[/[{}]/, 'delimiter.bracket'],
[/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'keyword',
'@keywords': 'keyword'} }],
[/[-=>ox]+/, { cases: { '@arrows': 'transition'} }],
[/[\[\{\(}]+.+?[\)\]\}]+/, "string"],
[/\".*\"/, "string"],
]
[
/[a-z_$][\w$]*/,
{ cases: { '@typeKeywords': 'keyword', '@keywords': 'keyword' } },
],
[/[-=>ox]+/, { cases: { '@arrows': 'transition' } }],
[/[\[\{\(}]+.+?[\)\]\}]+/, 'string'],
[/\".*\"/, 'string'],
],
},
whitespace: [
[/[ \t\r\n]+/, 'white'],
[/\%\%.*$/, 'comment'],
],
[/[ \t\r\n]+/, 'white'],
[/\%\%.*$/, 'comment'],
],
});
monaco.editor.defineTheme('myCoolTheme', {
@@ -36,37 +40,43 @@ export const initEditor = monaco => {
{ token: 'keyword', foreground: '880000', fontStyle: 'bold' },
{ 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: 'transition', foreground: '008800', fontStyle: 'bold' },
{ token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' },
],
});
// Register a completion item provider for the new language
monaco.languages.registerCompletionItemProvider('mermaid', {
provideCompletionItems: () => {
var suggestions = [{
label: 'simpleText',
kind: monaco.languages.CompletionItemKind.Text,
insertText: 'simpleText'
}, {
label: 'testing',
kind: monaco.languages.CompletionItemKind.Keyword,
insertText: 'testing(${1:condition})',
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
}, {
label: 'ifelse',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'if (${1:condition}) {',
'\t$0',
'} else {',
'\t',
'}'
].join('\n'),
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'If-Else Statement'
}];
var suggestions = [
{
label: 'simpleText',
kind: monaco.languages.CompletionItemKind.Text,
insertText: 'simpleText',
},
{
label: 'testing',
kind: monaco.languages.CompletionItemKind.Keyword,
insertText: 'testing(${1:condition})',
insertTextRules:
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
},
{
label: 'ifelse',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'if (${1:condition}) {',
'\t$0',
'} else {',
'\t',
'}',
].join('\n'),
insertTextRules:
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'If-Else Statement',
},
];
return { suggestions: suggestions };
}
},
});
};
};
src/config-error-store.js
+1 -1
View File
@@ -1,3 +1,3 @@
import { writable } from 'svelte/store';
export const configErrorStore = writable(undefined);
export const configErrorStore = writable(undefined);
src/editor.js
+55 -53
View File
@@ -89,78 +89,80 @@ import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
// import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
monaco.languages.register({ id: 'mermaid' });
// Register a tokens provider for the language
monaco.languages.setMonarchTokensProvider('mermaid', {
tokenizer: {
root: [
[/\[graph.*/, "custom-error"],
[/\[notice.*/, "custom-notice"],
[/\[info.*/, "custom-info"],
[/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
]
}
tokenizer: {
root: [
[/\[graph.*/, 'custom-error'],
[/\[notice.*/, 'custom-notice'],
[/\[info.*/, 'custom-info'],
[/\[[a-zA-Z 0-9:]+\]/, 'custom-date'],
],
},
});
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
return './editor.worker.bundle.js';
}
}
getWorkerUrl: function (moduleId, label) {
return './editor.worker.bundle.js';
},
};
// Define a new theme that contains only rules that match this language
monaco.editor.defineTheme('myCoolTheme', {
base: 'vs',
inherit: false,
rules: [
{ token: 'custom-info', foreground: '808080' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'custom-notice', foreground: 'FFA500' },
{ token: 'custom-date', foreground: '008800' },
]
base: 'vs',
inherit: false,
rules: [
{ token: 'custom-info', foreground: '808080' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'custom-notice', foreground: 'FFA500' },
{ token: 'custom-date', foreground: '008800' },
],
});
// Register a completion item provider for the new language
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
provideCompletionItems: () => {
var suggestions = [{
label: 'simpleText',
kind: monaco.languages.CompletionItemKind.Text,
insertText: 'simpleText'
}, {
label: 'testing',
kind: monaco.languages.CompletionItemKind.Keyword,
insertText: 'testing(${1:condition})',
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
}, {
label: 'ifelse',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'if (${1:condition}) {',
'\t$0',
'} else {',
'\t',
'}'
].join('\n'),
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'If-Else Statement'
}];
return { suggestions: suggestions };
}
provideCompletionItems: () => {
var suggestions = [
{
label: 'simpleText',
kind: monaco.languages.CompletionItemKind.Text,
insertText: 'simpleText',
},
{
label: 'testing',
kind: monaco.languages.CompletionItemKind.Keyword,
insertText: 'testing(${1:condition})',
insertTextRules:
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
},
{
label: 'ifelse',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'if (${1:condition}) {',
'\t$0',
'} else {',
'\t',
'}',
].join('\n'),
insertTextRules:
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'If-Else Statement',
},
];
return { suggestions: suggestions };
},
});
const edit = monaco.editor.create(document.getElementById('editor'), {
value: [
code,
].join('\n'),
value: [code].join('\n'),
theme: 'myCoolTheme',
// value: getCode(),
//language: 'mySpecialLanguage'
language: 'mermaid'
language: 'mermaid',
});
edit.onDidChangeModelContent(function (e) {
codeStore.set(edit.getValue());
});
codeStore.set(edit.getValue());
});
src/main.js
+5 -6
View File
@@ -1,13 +1,12 @@
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
target: document.body,
props: {
name: 'world',
},
});
window.app = app;
export default app;
export default app;
src/mermaid-language/mermaid.contribution.js
+6 -4
View File
@@ -5,8 +5,10 @@
'use strict';
import { registerLanguage } from 'monaco-editor/dev/vs/basic-languages/_.contribution.js';
registerLanguage({
id: 'mermaid',
extensions: ['.mmd'],
aliases: ['mermaid', 'MERMAID'],
loader: function () { return import('./mermaid.js'); }
id: 'mermaid',
extensions: ['.mmd'],
aliases: ['mermaid', 'MERMAID'],
loader: function () {
return import('./mermaid.js');
},
});
src/mermaid-language/mermaid.js
+485 -81
View File
@@ -4,91 +4,495 @@
*--------------------------------------------------------------------------------------------*/
'use strict';
export var conf = {
comments: {
lineComment: '*',
},
brackets: [
['[', ']'],
['(', ')']
],
comments: {
lineComment: '*',
},
brackets: [
['[', ']'],
['(', ')'],
],
};
var abapKeywords = [
'abstract', 'add', 'add-corresponding', 'adjacent', 'alias', 'aliases', 'all', 'append', 'appending', 'ascending', 'as', 'assert', 'assign', 'assigned', 'assigning', 'association', 'authority-check',
'back', 'begin', 'binary', 'block', 'bound', 'break-point', 'by', 'byte',
'class', 'call', 'cast', 'changing', 'check', 'class-data', 'class-method', 'class-methods', 'clear', 'close', 'cnt', 'collect', 'commit', 'cond', 'character',
'corresponding', 'communication', 'component', 'compute', 'concatenate', 'condense', 'constants', 'conv', 'count',
'controls', 'convert', 'create', 'currency',
'data', 'descending', 'default', 'define', 'deferred', 'delete', 'describe', 'detail', 'display', 'divide', 'divide-corresponding', 'display-mode', 'duplicates',
'deleting',
'editor-call', 'end', 'endexec', 'endfunction', 'ending', 'endmodule', 'end-of-definition', 'end-of-page', 'end-of-selection', 'end-test-injection', 'end-test-seam', 'exit-command', 'endclass', 'endmethod', 'endform', 'endinterface',
'endprovide', 'endselect', 'endtry', 'endwhile', 'enum', 'event', 'events', 'exec', 'exit', 'export',
'exporting', 'extract', 'exception', 'exceptions',
'field-symbols', 'field-groups', 'field', 'first', 'fetch', 'fields', 'format', 'frame', 'free', 'from', 'function', 'find', 'for', 'found', 'function-pool',
'generate', 'get',
'handle', 'hide', 'hashed',
'include', 'import', 'importing', 'index', 'infotypes', 'initial', 'initialization',
'id', 'is', 'in', 'interface', 'interfaces', 'init', 'input', 'insert', 'instance', 'into',
'key',
'left-justified', 'leave', 'like', 'line', 'line-count', 'line-size', 'load', 'local', 'log-point', 'length', 'left', 'leading', 'lower',
'matchcode', 'method', 'mesh', 'message', 'message-id', 'methods', 'modify', 'module', 'move', 'move-corresponding', 'multiply', 'multiply-corresponding', 'match',
'new', 'new-line', 'new-page', 'new-section', 'next', 'no', 'no-gap', 'no-gaps', 'no-sign', 'no-zero', 'non-unique', 'number',
'occurrence', 'object', 'obligatory', 'of', 'output', 'overlay', 'optional', 'others', 'occurrences', 'occurs', 'offset', 'options',
'pack', 'parameters', 'perform', 'places', 'position', 'print-control', 'private', 'program', 'protected', 'provide', 'public', 'put',
'radiobutton', 'raising', 'ranges', 'receive', 'receiving', 'redefinition', 'reduce', 'reference', 'refresh', 'regex', 'reject', 'results', 'requested',
'ref', 'replace', 'report', 'reserve', 'restore', 'result', 'return', 'returning', 'right-justified', 'rollback', 'read', 'read-only', 'rp-provide-from-last', 'run',
'scan', 'screen', 'scroll', 'search', 'select', 'select-options', 'selection-screen', 'stamp', 'source', 'subkey',
'separated', 'set', 'shift', 'single', 'skip', 'sort', 'sorted', 'split', 'standard', 'stamp', 'starting', 'start-of-selection', 'sum', 'subtract-corresponding', 'statics', 'step', 'stop', 'structure', 'submatches', 'submit', 'subtract', 'summary', 'supplied', 'suppress', 'section', 'syntax-check', 'syntax-trace', 'system-call', 'switch',
'tables', 'table', 'task', 'testing', 'test-seam', 'test-injection', 'then', 'time', 'times', 'title', 'titlebar', 'to', 'top-of-page', 'trailing', 'transfer', 'transformation', 'translate', 'transporting', 'types', 'type', 'type-pool', 'type-pools',
'unassign', 'unique', 'uline', 'unpack', 'update', 'upper', 'using',
'value',
'when', 'while', 'window', 'write', 'where', 'with', 'work',
'at', 'case', 'catch', 'continue', 'do', 'elseif', 'else', 'endat', 'endcase', 'enddo', 'endif', 'endloop', 'endon', 'if', 'loop', 'on', 'raise', 'try',
'abs', 'sign', 'ceil', 'floor', 'trunc', 'frac', 'acos', 'asin', 'atan', 'cos', 'sin', 'tan', 'cosh', 'sinh', 'tanh', 'exp', 'log', 'log10', 'sqrt', 'strlen', 'xstrlen', 'charlen', 'lines', 'numofchar', 'dbmaxlen', 'round', 'rescale', 'nmax', 'nmin', 'cmax', 'cmin', 'boolc', 'boolx', 'xsdbool', 'contains', 'contains_any_of', 'contains_any_not_of', 'matches', 'line_exists', 'ipow', 'char_off', 'count', 'count_any_of', 'count_any_not_of', 'distance', 'condense', 'concat_lines_of', 'escape', 'find', 'find_end', 'find_any_of', 'find_any_not_of', 'insert', 'match', 'repeat', 'replace', 'reverse', 'segment', 'shift_left', 'shift_right', 'substring', 'substring_after', 'substring_from', 'substring_before', 'substring_to', 'to_upper', 'to_lower', 'to_mixed', 'from_mixed', 'translate', 'bit-set', 'line_index',
'definition', 'implementation', 'public', 'inheriting', 'final'
'abstract',
'add',
'add-corresponding',
'adjacent',
'alias',
'aliases',
'all',
'append',
'appending',
'ascending',
'as',
'assert',
'assign',
'assigned',
'assigning',
'association',
'authority-check',
'back',
'begin',
'binary',
'block',
'bound',
'break-point',
'by',
'byte',
'class',
'call',
'cast',
'changing',
'check',
'class-data',
'class-method',
'class-methods',
'clear',
'close',
'cnt',
'collect',
'commit',
'cond',
'character',
'corresponding',
'communication',
'component',
'compute',
'concatenate',
'condense',
'constants',
'conv',
'count',
'controls',
'convert',
'create',
'currency',
'data',
'descending',
'default',
'define',
'deferred',
'delete',
'describe',
'detail',
'display',
'divide',
'divide-corresponding',
'display-mode',
'duplicates',
'deleting',
'editor-call',
'end',
'endexec',
'endfunction',
'ending',
'endmodule',
'end-of-definition',
'end-of-page',
'end-of-selection',
'end-test-injection',
'end-test-seam',
'exit-command',
'endclass',
'endmethod',
'endform',
'endinterface',
'endprovide',
'endselect',
'endtry',
'endwhile',
'enum',
'event',
'events',
'exec',
'exit',
'export',
'exporting',
'extract',
'exception',
'exceptions',
'field-symbols',
'field-groups',
'field',
'first',
'fetch',
'fields',
'format',
'frame',
'free',
'from',
'function',
'find',
'for',
'found',
'function-pool',
'generate',
'get',
'handle',
'hide',
'hashed',
'include',
'import',
'importing',
'index',
'infotypes',
'initial',
'initialization',
'id',
'is',
'in',
'interface',
'interfaces',
'init',
'input',
'insert',
'instance',
'into',
'key',
'left-justified',
'leave',
'like',
'line',
'line-count',
'line-size',
'load',
'local',
'log-point',
'length',
'left',
'leading',
'lower',
'matchcode',
'method',
'mesh',
'message',
'message-id',
'methods',
'modify',
'module',
'move',
'move-corresponding',
'multiply',
'multiply-corresponding',
'match',
'new',
'new-line',
'new-page',
'new-section',
'next',
'no',
'no-gap',
'no-gaps',
'no-sign',
'no-zero',
'non-unique',
'number',
'occurrence',
'object',
'obligatory',
'of',
'output',
'overlay',
'optional',
'others',
'occurrences',
'occurs',
'offset',
'options',
'pack',
'parameters',
'perform',
'places',
'position',
'print-control',
'private',
'program',
'protected',
'provide',
'public',
'put',
'radiobutton',
'raising',
'ranges',
'receive',
'receiving',
'redefinition',
'reduce',
'reference',
'refresh',
'regex',
'reject',
'results',
'requested',
'ref',
'replace',
'report',
'reserve',
'restore',
'result',
'return',
'returning',
'right-justified',
'rollback',
'read',
'read-only',
'rp-provide-from-last',
'run',
'scan',
'screen',
'scroll',
'search',
'select',
'select-options',
'selection-screen',
'stamp',
'source',
'subkey',
'separated',
'set',
'shift',
'single',
'skip',
'sort',
'sorted',
'split',
'standard',
'stamp',
'starting',
'start-of-selection',
'sum',
'subtract-corresponding',
'statics',
'step',
'stop',
'structure',
'submatches',
'submit',
'subtract',
'summary',
'supplied',
'suppress',
'section',
'syntax-check',
'syntax-trace',
'system-call',
'switch',
'tables',
'table',
'task',
'testing',
'test-seam',
'test-injection',
'then',
'time',
'times',
'title',
'titlebar',
'to',
'top-of-page',
'trailing',
'transfer',
'transformation',
'translate',
'transporting',
'types',
'type',
'type-pool',
'type-pools',
'unassign',
'unique',
'uline',
'unpack',
'update',
'upper',
'using',
'value',
'when',
'while',
'window',
'write',
'where',
'with',
'work',
'at',
'case',
'catch',
'continue',
'do',
'elseif',
'else',
'endat',
'endcase',
'enddo',
'endif',
'endloop',
'endon',
'if',
'loop',
'on',
'raise',
'try',
'abs',
'sign',
'ceil',
'floor',
'trunc',
'frac',
'acos',
'asin',
'atan',
'cos',
'sin',
'tan',
'cosh',
'sinh',
'tanh',
'exp',
'log',
'log10',
'sqrt',
'strlen',
'xstrlen',
'charlen',
'lines',
'numofchar',
'dbmaxlen',
'round',
'rescale',
'nmax',
'nmin',
'cmax',
'cmin',
'boolc',
'boolx',
'xsdbool',
'contains',
'contains_any_of',
'contains_any_not_of',
'matches',
'line_exists',
'ipow',
'char_off',
'count',
'count_any_of',
'count_any_not_of',
'distance',
'condense',
'concat_lines_of',
'escape',
'find',
'find_end',
'find_any_of',
'find_any_not_of',
'insert',
'match',
'repeat',
'replace',
'reverse',
'segment',
'shift_left',
'shift_right',
'substring',
'substring_after',
'substring_from',
'substring_before',
'substring_to',
'to_upper',
'to_lower',
'to_mixed',
'from_mixed',
'translate',
'bit-set',
'line_index',
'definition',
'implementation',
'public',
'inheriting',
'final',
];
export var language = {
defaultToken: 'invalid',
ignoreCase: true,
tokenPostfix: '.abap',
keywords: abapKeywords,
typeKeywords: [
'abap_bool', 'string', 'xstring', 'any', 'clike', 'csequence', 'numeric',
'xsequence', 'c', 'n', 'i', 'p', 'f', 'd', 't', 'x'
defaultToken: 'invalid',
ignoreCase: true,
tokenPostfix: '.abap',
keywords: abapKeywords,
typeKeywords: [
'abap_bool',
'string',
'xstring',
'any',
'clike',
'csequence',
'numeric',
'xsequence',
'c',
'n',
'i',
'p',
'f',
'd',
't',
'x',
],
operators: [
'+',
'-',
'/',
'*',
'=',
'<',
'>',
'<=',
'>=',
'<>',
'><',
'=<',
'=>',
'EQ',
'NE',
'GE',
'LE',
'CS',
'CN',
'CA',
'CO',
'CP',
'NS',
'NA',
'NP',
],
symbols: /[=><!~?&+\-*\/\^%]+/,
tokenizer: {
root: [
[
/[a-z_$][\w$]*/,
{
cases: {
'@typeKeywords': 'keyword',
'@keywords': 'keyword',
'@default': 'identifier',
},
},
],
{ include: '@whitespace' },
[/[:,.]/, 'delimiter'],
[/[{}()\[\]]/, '@brackets'],
[/@symbols/, { cases: { '@operators': 'operator', '@default': '' } }],
[/'/, { token: 'string', bracket: '@open', next: '@stringquote' }],
[/\|/, { token: 'string', bracket: '@open', next: '@stringtemplate' }],
[/\d+/, 'number'],
],
operators: [
'+', '-', '/', '*',
'=', '<', '>', '<=', '>=', '<>', '><', '=<', '=>',
'EQ', 'NE', 'GE', 'LE',
'CS', 'CN', 'CA', 'CO', 'CP', 'NS', 'NA', 'NP',
stringtemplate: [
[/[^\\\|]+/, 'string'],
[/\\\|/, 'string'],
[/\|/, { token: 'string', bracket: '@close', next: '@pop' }],
],
symbols: /[=><!~?&+\-*\/\^%]+/,
tokenizer: {
root: [
[/[a-z_$][\w$]*/, { cases: { '@typeKeywords': 'keyword',
'@keywords': 'keyword',
'@default': 'identifier' } }],
{ include: '@whitespace' },
[/[:,.]/, 'delimiter'],
[/[{}()\[\]]/, '@brackets'],
[/@symbols/, { cases: { '@operators': 'operator',
'@default': '' } }],
[/'/, { token: 'string', bracket: '@open', next: '@stringquote' }],
[/\|/, { token: 'string', bracket: '@open', next: '@stringtemplate' }],
[/\d+/, 'number'],
],
stringtemplate: [
[/[^\\\|]+/, 'string'],
[/\\\|/, 'string'],
[/\|/, { token: 'string', bracket: '@close', next: '@pop' }]
],
stringquote: [
[/[^\\']+/, 'string'],
[/'/, { token: 'string', bracket: '@close', next: '@pop' }]
],
whitespace: [
[/[ \t\r\n]+/, ''],
[/^\*.*$/, 'comment'],
[/\".*$/, 'comment'],
],
},
stringquote: [
[/[^\\']+/, 'string'],
[/'/, { token: 'string', bracket: '@close', next: '@pop' }],
],
whitespace: [
[/[ \t\r\n]+/, ''],
[/^\*.*$/, 'comment'],
[/\".*$/, 'comment'],
],
},
};
src/routes/Edit.svelte
+292 -299
View File
@@ -1,106 +1,107 @@
<script>
import { onMount } from "svelte";
import { codeStore, updateCode, updateCodeStore } from "../code-store.js";
import Editor from "../components/Editor.svelte";
import Config from "../components/Config.svelte";
import View from "../components/View.svelte";
import Card from "../components/Card.svelte";
import Tag from "../components/Tag.svelte";
import Links from "../components/Links.svelte";
import { fromUrl } from "../code-store.js";
// import pkg from '@mermaid-js/mermaid/package.json'
import pkg from "@mermaid/package.json";
import moment from "moment";
export let mermaidVersion = pkg.version;
let historyList = [];
onMount(async () => {
ga("send", "pageview");
ga("send", "event", "version", mermaidVersion, mermaidVersion);
import { onMount } from 'svelte';
import { codeStore, updateCode, updateCodeStore } from '../code-store.js';
import Editor from '../components/Editor.svelte';
import Config from '../components/Config.svelte';
import View from '../components/View.svelte';
import Card from '../components/Card.svelte';
import Tag from '../components/Tag.svelte';
import Links from '../components/Links.svelte';
import { fromUrl } from '../code-store.js';
// import pkg from '@mermaid-js/mermaid/package.json'
import pkg from '@mermaid/package.json';
import moment from 'moment';
export let mermaidVersion = pkg.version;
let historyList = [];
onMount(async () => {
ga('send', 'pageview');
ga('send', 'event', 'version', mermaidVersion, mermaidVersion);
const historyListKey = "_mermaid_history_";
historyList = JSON.parse(localStorage.getItem(historyListKey) || "[]");
let hisCode = historyList.length > 0 ? historyList[historyList.length - 1] : null;
const historyListKey = '_mermaid_history_';
historyList = JSON.parse(localStorage.getItem(historyListKey) || '[]');
let hisCode =
historyList.length > 0 ? historyList[historyList.length - 1] : null;
if (params.data) {
fromUrl(params.data);
} else if (hisCode) {
updateCodeStore({
code: hisCode.code,
mermaid: { },
updateEditor: true,
});
}
if (params.data) {
fromUrl(params.data);
} else if (hisCode) {
updateCodeStore({
code: hisCode.code,
mermaid: {},
updateEditor: true,
});
}
let code = null;
codeStore.subscribe( state => {
code = state && state.code || code;
});
setInterval(() => {
if (code != hisCode) {
//save history
historyList.unshift({
time: new Date().toISOString(),
code: hisCode = code
});
if (historyList.length > 10) {
historyList.pop();
}
localStorage.setItem(historyListKey, JSON.stringify(historyList));
}
historyList = historyList; //triggered update
}, 1 * 60 * 1000);
let code = null;
codeStore.subscribe((state) => {
code = (state && state.code) || code;
});
// export let code = '';
// export let classes = '';
// export let error = {};
// export let token = '';
// export let expected = '';
export let params = {};
function loadFlowChart() {
loadSampleDiagram("FlowChart");
}
function loadSequenceDiagram() {
loadSampleDiagram("SequenceDiagram");
}
function loadClassDiagram() {
loadSampleDiagram("ClassDiagram");
}
function loadStateDiagram() {
loadSampleDiagram("StateDiagram");
}
function loadGanttChart() {
loadSampleDiagram("GanttChart");
}
function loadPieChart() {
loadSampleDiagram("PieChart");
}
function loadERDiagram() {
loadSampleDiagram("ERDiagram");
}
function loadSampleDiagram(diagramType) {
let code = "";
switch (diagramType) {
case "FlowChart":
code = `graph TD
setInterval(() => {
if (code != hisCode) {
//save history
historyList.unshift({
time: new Date().toISOString(),
code: (hisCode = code),
});
if (historyList.length > 10) {
historyList.pop();
}
localStorage.setItem(historyListKey, JSON.stringify(historyList));
}
historyList = historyList; //triggered update
}, 1 * 60 * 1000);
});
// export let code = '';
// export let classes = '';
// export let error = {};
// export let token = '';
// export let expected = '';
export let params = {};
function loadFlowChart() {
loadSampleDiagram('FlowChart');
}
function loadSequenceDiagram() {
loadSampleDiagram('SequenceDiagram');
}
function loadClassDiagram() {
loadSampleDiagram('ClassDiagram');
}
function loadStateDiagram() {
loadSampleDiagram('StateDiagram');
}
function loadGanttChart() {
loadSampleDiagram('GanttChart');
}
function loadPieChart() {
loadSampleDiagram('PieChart');
}
function loadERDiagram() {
loadSampleDiagram('ERDiagram');
}
function loadSampleDiagram(diagramType) {
let code = '';
switch (diagramType) {
case 'FlowChart':
code = `graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`;
break;
case "SequenceDiagram":
code = `sequenceDiagram
break;
case 'SequenceDiagram':
code = `sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
`;
break;
case "ClassDiagram":
code = `classDiagram
break;
case 'ClassDiagram':
code = `classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
@@ -122,9 +123,9 @@
+run()
}
`;
break;
case "StateDiagram":
code = `stateDiagram-v2
break;
case 'StateDiagram':
code = `stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
@@ -132,9 +133,9 @@
Moving --> Crash
Crash --> [*]
`;
break;
case "GanttChart":
code = `gantt
break;
case 'GanttChart':
code = `gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
@@ -144,16 +145,16 @@
Task in sec :2014-01-12 , 12d
another task : 24d
`;
break;
case "PieChart":
code = `pie title Pets adopted by volunteers
break;
case 'PieChart':
code = `pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
`;
break;
case "ERDiagram":
code = `erDiagram
break;
case 'ERDiagram':
code = `erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
@@ -163,219 +164,211 @@
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
`;
break;
}
toUpdateCodeStore(code);
break;
}
toUpdateCodeStore(code);
}
function toUpdateCodeStore(code) {
if (!code) return;
updateCode(code, true);
}
function toUpdateCodeStore(code) {
if (!code) return;
updateCode(code, true);
}
function relativeTime(t){
return `${moment(t).fromNow()} (${new Date(t).toLocaleString()})`;
}
function relativeTime(t) {
return `${moment(t).fromNow()} (${new Date(t).toLocaleString()})`;
}
</script>
<style>
#body {
font-family: "Roboto", sans-serif;
background-color: #fcfbfc;
}
#editor-root {
display: flex;
height: 100%;
}
#col1 {
width: 35%;
}
#col2 {
width: 65%;
padding-left: 32px;
}
#link-root {
display: flex;
height: fit-content;
}
#link-col1 {
width: 50%;
}
#link-col2 {
width: 50%;
padding-left: 32px;
}
#app-title {
font-family: "Playfair Display", serif;
font-size: 32px;
font-weight: 700;
margin: 0;
color: #1e60ab;
opacity: 0.8;
}
#title-container {
width: fit-content;
margin: 0 auto 8px;
}
#power {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
height: 4rem;
}
#sampleLoader {
padding-left: 10px;
border-bottom: 1px solid lightgray;
}
#historyLoaderSubTitle {
display: inline-block;
color: #33a2c4;
font-size: small;
font-style: italic;
}
.button-container {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
.button-style {
background-color: #a2d9e2;
color: #33a2c4;
border-radius: 0.25rem;
padding: 0.5rem;
border: 1px solid #a2d9e2;
margin: 0.25rem;
}
.button-style:hover {
background-color: #fff;
color: #33a2c4;
border: 1px solid #33a2c4;
}
.button-style:focus {
outline: none;
}
.link-style {
text-decoration: none;
color: #33a2c4;
}
#body {
font-family: 'Roboto', sans-serif;
background-color: #fcfbfc;
}
#editor-root {
display: flex;
height: 100%;
}
#col1 {
width: 35%;
}
#col2 {
width: 65%;
padding-left: 32px;
}
#link-root {
display: flex;
height: fit-content;
}
#link-col1 {
width: 50%;
}
#link-col2 {
width: 50%;
padding-left: 32px;
}
#app-title {
font-family: 'Playfair Display', serif;
font-size: 32px;
font-weight: 700;
margin: 0;
color: #1e60ab;
opacity: 0.8;
}
#title-container {
width: fit-content;
margin: 0 auto 8px;
}
#power {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
height: 4rem;
}
#sampleLoader {
padding-left: 10px;
border-bottom: 1px solid lightgray;
}
#historyLoaderSubTitle {
display: inline-block;
color: #33a2c4;
font-size: small;
font-style: italic;
}
.button-container {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
.button-style {
background-color: #a2d9e2;
color: #33a2c4;
border-radius: 0.25rem;
padding: 0.5rem;
border: 1px solid #a2d9e2;
margin: 0.25rem;
}
.button-style:hover {
background-color: #fff;
color: #33a2c4;
border: 1px solid #33a2c4;
}
.button-style:focus {
outline: none;
}
.link-style {
text-decoration: none;
color: #33a2c4;
}
</style>
<div id="body">
<div id="title-container">
<h1 id="app-title">Mermaid Live Editor</h1>
<div id="title-container">
<h1 id="app-title">Mermaid Live Editor</h1>
</div>
<div id="sampleLoader">
<div class="button-container">
<span id="sampleLoaderTitle"><strong>Diagram presets:</strong></span>
<button class="button-style" on:click={loadFlowChart}>
Flow Chart
</button>
<button class="button-style" on:click={loadSequenceDiagram}>
Sequence Diagram
</button>
<button class="button-style" on:click={loadClassDiagram}>
Class Diagram
</button>
<button class="button-style" on:click={loadStateDiagram}>
State Diagram
</button>
<button class="button-style" on:click={loadGanttChart}>
Gantt Chart
</button>
<button class="button-style" on:click={loadPieChart}> Pie Chart </button>
<button class="button-style" on:click={loadERDiagram}>
ER Diagram
</button>
</div>
<div id="sampleLoader">
<div class="button-container">
<span id="sampleLoaderTitle"><strong>Diagram presets:</strong></span>
<button class="button-style" on:click={loadFlowChart}>
Flow Chart
</button>
<button
class="button-style"
on:click={loadSequenceDiagram}>
Sequence Diagram
</button>
<button
class="button-style"
on:click={loadClassDiagram}>
Class Diagram
</button>
<button
class="button-style"
on:click={loadStateDiagram}>
State Diagram
</button>
<button class="button-style" on:click={loadGanttChart}>
Gantt Chart
</button>
<button class="button-style" on:click={loadPieChart}>
Pie Chart
</button>
<button class="button-style" on:click={loadERDiagram}>
ER Diagram
</button>
</div>
</div>
<div id="editor-root">
<div id="col1">
<Card title="Code" noPadding="true">
<Editor data={params.data} />
</Card>
<Card title="Mermaid Configuration">
<Config />
</Card>
</div>
<div id="editor-root">
<div id="col1">
<Card title="Code" noPadding="true">
<Editor data={params.data} />
</Card>
<Card title="Mermaid Configuration">
<Config />
</Card>
</div>
<div id="col2">
<Card title="Preview">
<View />
</Card>
<div id="link-root">
<div id="link-col1">
<Card title="Editing history">
<span id="historyLoaderSubTitle">Automatically saves once every minute, up to 10 records.</span>
<br />
<div id="historyList" class="button-container">
{#if historyList.length > 0}
{#each historyList as item, i}
<button class="button-style" on:click="{e => toUpdateCodeStore(item.code)}">
{relativeTime(item.time)}
</button>
{/each}
{:else}
No records.
{/if}
</div>
</Card>
<Card title="Links">
<div class="button-container">
<button class="button-style">
<a
href="https://mermaid-js.github.io/mermaid"
target="_blank"
class="link-style">
Mermaid Documentation
</a>
</button>
<button class="button-style">
<a
href="https://github.com/mermaid-js/mermaid"
target="_blank"
class="link-style">
Mermaid on GitHub
</a>
</button>
<button class="button-style">
<a
href="https://github.com/mermaid-js/mermaid-live-editor"
target="_blank"
class="link-style">
Live Editor on GitHub
</a>
</button>
<button class="button-style">
<a
href="https://github.com/mermaid-js/mermaid-cli"
target="_blank"
class="link-style">
Mermaid CLI
</a>
</button>
</div>
</Card>
</div>
<div id="link-col2">
<Card title="Actions">
<Links />
</Card>
</div>
<div id="col2">
<Card title="Preview">
<View />
</Card>
<div id="link-root">
<div id="link-col1">
<Card title="Editing history">
<span id="historyLoaderSubTitle">Automatically saves once every
minute, up to 10 records.</span>
<br />
<div id="historyList" class="button-container">
{#if historyList.length > 0}
{#each historyList as item, i}
<button
class="button-style"
on:click={(e) => toUpdateCodeStore(item.code)}>
{relativeTime(item.time)}
</button>
{/each}
{:else}No records.{/if}
</div>
</Card>
<Card title="Links">
<div class="button-container">
<button class="button-style">
<a
href="https://mermaid-js.github.io/mermaid"
target="_blank"
class="link-style">
Mermaid Documentation
</a>
</button>
<button class="button-style">
<a
href="https://github.com/mermaid-js/mermaid"
target="_blank"
class="link-style">
Mermaid on GitHub
</a>
</button>
<button class="button-style">
<a
href="https://github.com/mermaid-js/mermaid-live-editor"
target="_blank"
class="link-style">
Live Editor on GitHub
</a>
</button>
<button class="button-style">
<a
href="https://github.com/mermaid-js/mermaid-cli"
target="_blank"
class="link-style">
Mermaid CLI
</a>
</button>
</div>
</Card>
</div>
<div id="link-col2">
<Card title="Actions">
<Links />
</Card>
</div>
</div>
</div>
<div id="power">
Powered by mermaid
<Tag color="green">{mermaidVersion}</Tag>
</div>
</div>
<div id="power">
Powered by mermaid
<Tag color="green">{mermaidVersion}</Tag>
</div>
</div>
src/routes/View.svelte
+20 -20
View File
@@ -1,30 +1,30 @@
<script>
import { onMount } from 'svelte';
import Editor from '../components/Editor.svelte';
import View from '../components/View.svelte';
// import { fromUrl } from '../code-store.js';
import { onMount } from 'svelte';
import Editor from '../components/Editor.svelte';
import View from '../components/View.svelte';
// import { fromUrl } from '../code-store.js';
onMount(async () => {
// fromUrl(params.data);
ga('send', 'pageview');
});
onMount(async () => {
// fromUrl(params.data);
ga('send', 'pageview');
});
// export let code = '';
// export let classes = '';
// export let code = '';
// export let classes = '';
// export let error = {};
// export let token = '';
// export let expected = '';
// export let params = {};
// export let error = {};
// export let token = '';
// export let expected = '';
// export let params = {};
</script>
<style>
#view-page {
display: flex;
height: 100%;
}
#view-page {
display: flex;
height: 100%;
}
</style>
<div id="view-page">
<View />
</div>
<View />
</div>
yarn.lock
+653 -3
View File
File diff suppressed because it is too large Load Diff