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

Merge remote-tracking branch 'origin/master' into develop

Browse Source 
* origin/master: (29 commits)
  Change dependabot Target branch
  Release
  Use hasOwnProperty
  Hide copy button if clipboardItem unavailable.
  Release
  Init Fix
  Release
  Fix import error-store
  Release
  Fix auto view redirect to edit
  Add favicon
  Fix Build
  Release
  Fix empty editor on load
  Webpack dev server
  Bump webpack-cli from 3.3.10 to 4.4.0
  Bump style-loader from 0.23.1 to 2.0.0
  Bump serve from 11.2.0 to 11.3.2
  Bump svelte-routing from 1.4.0 to 1.4.2
  Bump husky from 4.3.0 to 4.3.8
  ...
This commit is contained in:
Sidharth Vinod
2021-02-01 12:40:05 +05:30
parent a1d0b7b0c1 7fc6ccf7d3
commit d2f78a260c
18 changed files with 709 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/dependabot.yml
+8
View File
@@ -0,0 +1,8 @@
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
target-banch: "develop"
schedule:
interval: "weekly"
day: "friday"
docs/bundle.css
+2 -2
View File
@@ -1,4 +1,4 @@
#error.svelte-1af9dx4{background:darkred;color:white;flex:1;padding:10px}.invisible.svelte-1af9dx4{display:none}.visible.svelte-1af9dx4{display:block}
#error.svelte-104hor5{background:darkred;color:white;flex:1;padding:10px}.invisible.svelte-104hor5{display:none}.visible.svelte-104hor5{display:block}
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
@@ -3897,7 +3897,7 @@
#editor-conf.svelte-e1y9ss{width:100%;height:200px;max-height:300px;flex:1}
#view.svelte-adxv1m{border:1px solor darkred;flex:1}#container.svelte-adxv1m{overflow-x:auto}.error.svelte-adxv1m{opacity:0.5}
#card.svelte-m2i2uf{border:1px solid lightgray;margin-bottom:16px}#title.svelte-m2i2uf{font-family:'Playfair Display', serif;font-weight:400;border-bottom:1px solid lightgray;font-size:1.25rem;background-color:#1e60ab;color:#eaebef}#content.svelte-m2i2uf{padding-top:8px}.padding.svelte-m2i2uf{padding:8px}
#tag.svelte-1m053ch{height:auto;margin:0 8px 0 0;padding:0 7px;font-size:12px;line-height:20px;white-space:nowrap;border:1px solid #d9d9d9;border-radius:4px;cursor:default;font-size:smaller;color:#52c41a;background:#f6ffed;border-color:#b7eb8f;margin-left:8px}
#tag.svelte-1nm8e4l{height:auto;margin:0 8px 0 0;padding:0 7px;font-size:12px;line-height:20px;white-space:nowrap;border:1px solid #d9d9d9;border-radius:4px;cursor:default;font-size:smaller;color:#52c41a;background:#f6ffed;border-color:#b7eb8f;margin-left:8px}
#links.svelte-187ys3m{margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid lightgray}#markdown.svelte-187ys3m{padding:7px;font-family:monospace;font-size:14px;width:95%;margin:1rem 0;border:1px solid lightgray}label[for='markdown'].svelte-187ys3m{cursor:pointer;margin:0 auto}.button-style.svelte-187ys3m{background-color:#a2d9e2;color:#33a2c4;border-radius:0.25rem;padding:0.5rem;border:1px solid #a2d9e2;margin:0.25rem}.button-style.svelte-187ys3m:hover{background-color:#fff;color:#33a2c4;border:1px solid #33a2c4}.button-style.svelte-187ys3m:focus{outline:none}.link-style.svelte-187ys3m{text-decoration:none;color:#33a2c4}#copy-section.svelte-187ys3m{padding-top:1rem;text-align:center}
#body.svelte-mx8k4g{font-family:'Roboto', sans-serif;background-color:#fcfbfc}#editor-root.svelte-mx8k4g{display:flex;height:100%}#col1.svelte-mx8k4g{width:35%}#col2.svelte-mx8k4g{width:65%;padding-left:32px}#link-root.svelte-mx8k4g{display:flex;height:fit-content}#link-col1.svelte-mx8k4g{width:50%}#link-col2.svelte-mx8k4g{width:50%;padding-left:32px}#app-title.svelte-mx8k4g{font-family:'Playfair Display', serif;font-size:32px;font-weight:700;margin:0;color:#1e60ab;opacity:0.8}#title-container.svelte-mx8k4g{width:fit-content;margin:0 auto 8px}#power.svelte-mx8k4g{width:100%;display:flex;justify-content:flex-end;align-items:center;height:4rem}#sampleLoader.svelte-mx8k4g{padding-left:10px;border-bottom:1px solid lightgray}#historyLoaderSubTitle.svelte-mx8k4g{display:inline-block;color:#33a2c4;font-size:small;font-style:italic}.button-container.svelte-mx8k4g{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap}.button-style.svelte-mx8k4g{background-color:#a2d9e2;color:#33a2c4;border-radius:0.25rem;padding:0.5rem;border:1px solid #a2d9e2;margin:0.25rem}.button-style.svelte-mx8k4g:hover{background-color:#fff;color:#33a2c4;border:1px solid #33a2c4}.button-style.svelte-mx8k4g:focus{outline:none}.link-style.svelte-mx8k4g{text-decoration:none;color:#33a2c4}
#view-page.svelte-clxwlp{display:flex;height:100%}
docs/bundle.js
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/favicon.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 16 KiB

package.json
+8 -9
View File
@@ -6,25 +6,24 @@
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"file-loader": "^6.2.0",
"husky": "^4.3.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.2",
"mini-css-extract-plugin": "^0.6.0",
"monaco-editor-webpack-plugin": "^2.1.0",
"prettier": "^2.2.1",
"prettier-plugin-svelte": "^1.4.1",
"serve": "^11.0.0",
"style-loader": "^0.23.1",
"serve": "^11.3.2",
"style-loader": "^2.0.0",
"svelte": "^3.0.0",
"svelte-loader": "2.13.3",
"svelte-watch-resize": "^1.0.3",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"release": "cross-env NODE_ENV=production webpack -p",
"build": "cross-env NODE_ENV=production webpack",
"dev": "webpack-dev-server --content-base docs",
"release": "cross-env NODE_ENV=production webpack build",
"dev": "webpack serve --content-base docs",
"pretty": "prettier --write ./src/*"
},
"dependencies": {
@@ -34,7 +33,7 @@
"mermaid": "8.9.0",
"moment": "^2.24.0",
"monaco-editor": "0.21.2",
"svelte-routing": "^1.4.0",
"svelte-routing": "^1.4.2",
"svelte-spa-router": "^1.3.0"
},
"husky": {
src/code-error-store.js
-3
View File
@@ -1,3 +0,0 @@
import { writable } from 'svelte/store';
export const codeErrorStore = writable(undefined);
src/code-store.js
+7 -3
View File
@@ -1,6 +1,7 @@
import { writable, get } from 'svelte/store';
import { Base64 } from 'js-base64';
import { replace } from 'svelte-spa-router';
import { replace, location } from 'svelte-spa-router';
const isDarkMode =
window.matchMedia('(prefers-color-scheme: dark)').matches && false;
const defaultState = {
@@ -31,7 +32,7 @@ export const updateCodeStore = (newState) => {
};
export const updateCode = (code, updateEditor) => {
const state = get(codeStore);
codeStore.set({...state, code, updateEditor});
codeStore.set({ ...state, code, updateEditor });
};
export const updateConfig = (config, updateEditor) => {
const state = get(codeStore);
@@ -39,5 +40,8 @@ export const updateConfig = (config, updateEditor) => {
};
const unsubscribe = codeStore.subscribe((state) => {
replace('/edit/' + Base64.encodeURI(JSON.stringify(state)));
const currentLocation = get(location).split('/')[1];
replace(
`/${currentLocation || 'edit'}/` + Base64.encodeURI(JSON.stringify(state))
);
});
src/components/Config.svelte
+7 -23
View File
@@ -1,19 +1,13 @@
<script>
import { codeStore, updateConfig } from '../code-store.js';
import { configErrorStore } from '../config-error-store.js';
import { configErrorStore } from '../error-store.js';
import { onMount } from 'svelte';
import Error from './Error.svelte';
import { getResizeHandler, initEditor } from './editor-utils';
import { watchResize } from 'svelte-watch-resize';
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 error = false;
let edit;
let editorElem = null;
let resizeHandler = () => {};
@@ -25,15 +19,7 @@
updateConfig(conf, false);
configErrorStore.set(undefined);
};
const unsubscribeError = configErrorStore.subscribe((_error) => {
// console.log('Error ideintified' + _error.toString());
if (_error) {
error = _error.toString();
} else {
error = false;
}
});
const unsubscribe = codeStore.subscribe((state) => {
console.log(state.mermaid, state.updateEditor);
@@ -44,7 +30,7 @@
onMount(async () => {
console.log('Mounting config');
editorElem = document.getElementById('editor-conf');
const editorElem = document.getElementById('editor-conf');
edit = monaco.editor.create(editorElem, {
value: '',
theme: 'myCoolTheme',
@@ -55,9 +41,9 @@
try {
const conf = JSON.parse(edit.getValue());
handleConfUpdate(conf, false);
} catch (e) {
console.log('Error in parsed', e);
configErrorStore.set(e);
} catch (err) {
console.log('Error in parsed', err);
configErrorStore.set(err);
}
});
@@ -76,7 +62,5 @@
<div id="editor-container">
<div id="editor-conf" use:watchResize={resizeHandler} />
{#if error}
<Error errorText={error} />
{/if}
<Error errorStore={configErrorStore} />
</div>
src/components/Editor.svelte
+22 -34
View File
@@ -1,8 +1,7 @@
<script>
import { codeStore, updateCode } from '../code-store.js';
import { codeErrorStore } from '../code-error-store.js';
import { codeErrorStore } from '../error-store.js';
import { onMount } from 'svelte';
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
import Error from './Error.svelte';
import { getResizeHandler, initEditor } from './editor-utils';
@@ -10,7 +9,6 @@
import { watchResize } from 'svelte-watch-resize';
let edit;
export let error = false;
const decArr = [];
let editorElem = null;
@@ -29,27 +27,25 @@
updateCode(updatedCode, false);
codeErrorStore.set(undefined);
} catch (e) {
if (e) {
codeErrorStore.set(e);
console.log('Error in parsed', e.hash);
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('Syntax Error');
console.log('Error in parsed', e.hash);
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' },
},
]
)
);
}
};
@@ -72,13 +68,7 @@
handleCodeUpdate(edit.getValue(), false);
});
const unsubscribeError = codeErrorStore.subscribe((_error) => {
if (_error) {
error = true;
} else {
error = false;
}
});
initEditor(monaco);
});
</script>
@@ -93,7 +83,5 @@
<div id="editor-container">
<div id="editor" use:watchResize={resizeHandler} />
{#if error}
<Error errorText="Syntax Error" />
{/if}
<Error errorStore={codeErrorStore} />
</div>
src/components/Error.svelte
+12 -30
View File
@@ -1,33 +1,14 @@
<script>
import { codeErrorStore } from '../code-error-store.js';
import { onMount } from 'svelte';
onMount(async () => {});
// export let code = '';
export let classes = '';
// export let error = {};
// export let token = '';
// export let expected = '';
// 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(' ');;
// }
// });
export let errorStore;
let error;
errorStore.subscribe((_error) => {
if (_error) {
error = _error.toString();
} else {
error = false;
}
});
</script>
<style>
@@ -36,7 +17,6 @@
color: white;
flex: 1;
padding: 10px;
/* position: absolute; */
}
.invisible {
display: none;
@@ -46,4 +26,6 @@
}
</style>
<div id="error" class={classes}>{errorText}</div>
{#if error}
<div id="error" class={classes}>{error}</div>
{/if}
src/components/Links.svelte
+17 -12
View File
@@ -1,5 +1,4 @@
<script>
import { link } from 'svelte-spa-router';
import { Base64 } from 'js-base64';
import moment from 'moment';
import { codeStore } from '../code-store.js';
@@ -51,6 +50,10 @@
};
};
const isClipboardAvailable = () => {
return window.hasOwnProperty('ClipboardItem');
};
const clipboardCopy = (canvas, context, image) => {
return () => {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
@@ -91,7 +94,7 @@
document.execCommand('Copy');
};
let url = '/mermaid-live-editor/#/view';
let url;
let b64Code;
let iUrl;
let svgUrl;
@@ -102,7 +105,7 @@
const unsubscribe = codeStore.subscribe((state) => {
b64Code = Base64.encodeURI(JSON.stringify(state));
url = `/mermaid-live-editor/#/view/${b64Code}`;
url = `${window.location.pathname.split('#')[0]}#/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})`;
@@ -160,18 +163,20 @@
</style>
<div id="links">
<button class="button-style">
<a class="link-style" href={url} download="" on:click={onCopyClipboard}>
Copy Image
</a>
</button>
{#if isClipboardAvailable()}
<button class="button-style">
<a class="link-style" href={url} download="" on:click={onCopyClipboard}>
Copy Image
</a>
</button>
{/if}
<button class="button-style">
<a class="link-style" href={url} download="" on:click={onDownloadPNG}>
Download PNG
</a>
</button>
<button class="button-style">
<a class="link-style" href={url} use:link>Link to view</a>
<a class="link-style" href={url}>Link to view</a>
</button>
<button class="button-style">
<a class="link-style" href={url} download="" on:click={onDownloadSVG}>
@@ -192,13 +197,13 @@
<input id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
</div>
<p>
<label>PNG size:</label>
<label>PNG size:</label><br />
<input
type="radio"
value="auto"
id="autosize"
bind:group={imagemodeselected} />
<label for="autosize">auto</label>
<label for="autosize">auto</label><br />
<input
type="radio"
value="width"
@@ -211,7 +216,7 @@
min="3"
max="10000"
bind:value={userimagewidth}
disabled={imagemodeselected !== 'width'} />
disabled={imagemodeselected !== 'width'} /><br />
<input
type="radio"
value="height"
src/components/Tag.svelte
-9
View File
@@ -1,11 +1,3 @@
<script>
export let noPadding = false;
let contentClass = 'padding';
if (noPadding) {
contentClass = '';
}
</script>
<style>
#tag {
height: auto;
@@ -18,7 +10,6 @@
border-radius: 4px;
cursor: default;
font-size: smaller;
/* padding: 8px; */
color: #52c41a;
background: #f6ffed;
border-color: #b7eb8f;
src/components/View.svelte
+9 -16
View File
@@ -1,9 +1,7 @@
<script>
import { codeStore } from '../code-store.js';
import { codeErrorStore } from '../code-error-store.js';
import { configErrorStore } from '../config-error-store.js';
import { codeErrorStore, configErrorStore } from '../error-store.js';
import { onMount } from 'svelte';
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
const detectType = (text) => {
@@ -53,21 +51,21 @@
}, 5000);
};
let element;
let container;
export let code = '';
export let configClasses = '';
export let codeClasses = '';
onMount(async () => {
element = document.querySelector('graph-div');
const unsubscribe = codeStore.subscribe((state) => {
try {
if (container && state) {
code = state.code;
// Replacing special characters '<' and '>' with encoded '&lt;' and '&gt;'
let _code = code;
_code = _code.replace(/</g, '&lt;');
_code = _code.replace(/>/g, '&gt;');
code = state.code.replace(/</g, '&lt;').replace(/>/g, '&gt;');
container.innerHTML = _code;
container.innerHTML = code;
saveStatistcs(detectType(code));
delete container.dataset.processed;
mermaid.initialize(Object.assign({}, state.mermaid));
@@ -96,13 +94,8 @@
});
});
let insertSvg = function (svgCode, bindFunctions) {
// element.innerHTML = svgCode;
};
let insertSvg = function (svgCode, bindFunctions) {};
export let code = '';
export let configClasses = '';
export let codeClasses = '';
</script>
<style>
src/config-error-store.js → src/error-store.js
+1
View File
@@ -1,3 +1,4 @@
import { writable } from 'svelte/store';
export const codeErrorStore = writable(undefined);
export const configErrorStore = writable(undefined);
src/main.js
+1 -3
View File
@@ -2,9 +2,7 @@ import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world',
},
props: {},
});
window.app = app;
src/routes/Edit.svelte
+28 -80
View File
@@ -8,7 +8,6 @@
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;
@@ -30,6 +29,8 @@
mermaid: {},
updateEditor: true,
});
} else {
loadSampleDiagram('Flow Chart');
}
let code = null;
@@ -53,55 +54,21 @@
}, 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
const samples = {
'Flow Chart': `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
C -->|Three| F[fa:fa-car Car]`,
'Sequence Diagram': `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
`,
'Class Diagram': `classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
@@ -122,20 +89,16 @@
+bool is_wild
+run()
}
`;
break;
case 'StateDiagram':
code = `stateDiagram-v2
`,
'State Diagram': `stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
`;
break;
case 'GanttChart':
code = `gantt
`,
'Gantt Chart': `gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
@@ -144,17 +107,13 @@
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
`;
break;
case 'PieChart':
code = `pie title Pets adopted by volunteers
`,
'Pie Chart': `pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
`;
break;
case 'ERDiagram':
code = `erDiagram
`,
'ER Diagram': `erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
@@ -163,10 +122,11 @@
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
`;
break;
}
toUpdateCodeStore(code);
`,
};
function loadSampleDiagram(diagramType) {
toUpdateCodeStore(samples[diagramType]);
}
function toUpdateCodeStore(code) {
@@ -270,25 +230,13 @@
<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>
{#each Object.keys(samples) as diagramType, i}
<button
class="button-style"
on:click={(e) => loadSampleDiagram(diagramType)}>
{diagramType}
</button>
{/each}
</div>
</div>
<div id="editor-root">
src/routes/View.svelte
-11
View File
@@ -1,21 +1,10 @@
<script>
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');
});
// export let code = '';
// export let classes = '';
// export let error = {};
// export let token = '';
// export let expected = '';
// export let params = {};
</script>
<style>
yarn.lock
+583 -369
View File
File diff suppressed because it is too large Load Diff