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

Merge pull request #5 from sidharthv96/hk2

Browse Source 
Hk2
This commit is contained in:
Sidharth Vinod
2021-01-15 00:37:41 +05:30
committed by GitHub
parent c8e3b05d5a 7a37e8582a
commit 8e913ac148
10 changed files with 208 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/codeql-analysis.yml
+67
View File
@@ -0,0 +1,67 @@
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
#
# ******** NOTE ********
# We have attempted to detect the languages in your repository. Please check
# the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages.
#
name: "CodeQL"
on:
push:
branches: [ master ]
pull_request:
# The branches below must be a subset of the branches above
branches: [ master ]
schedule:
- cron: '36 1 * * 2'
jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
language: [ 'javascript' ]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
# Learn more:
# https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
steps:
- name: Checkout repository
uses: actions/checkout@v2
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v1
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v1
# ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project
# uses a compiled language
#- run: |
# make bootstrap
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v1
.github/workflows/stale.yml
+18
View File
@@ -0,0 +1,18 @@
name: Mark stale issues and pull requests
on:
schedule:
- cron: "0 0 * * *"
jobs:
stale:
runs-on: ubuntu-latest
steps:
- uses: actions/stale@v3
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days'
stale-pr-message: 'This pr is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days'
.prettierignore
+1
View File
@@ -0,0 +1 @@
docs
LICENSE
+1 -1
View File
@@ -1,6 +1,6 @@
MIT License
Copyright (c) 2020 Knut Sveidqvist
Copyright (c) 2020 - 2021 Knut Sveidqvist
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
bin/beta-release
+1 -1
View File
@@ -1,6 +1,6 @@
#!/bin/bash
# Clone mermaid-js/docs parallel with the mermaid live editor
# Clone mermaid-js/docs parallel with the mermaid live editor.
# git clone git@github.com:mermaid-js/docs.git
# git clone https://github.com/mermaid-js/docs.git
docs/bundle.css
+9 -9
View File
@@ -1,4 +1,4 @@
#error.svelte-ardmue{background:darkred;color:white;flex:1;padding:10px}.invisible.svelte-ardmue{display:none}.visible.svelte-ardmue{display:block}
#error.svelte-1af9dx4{background:darkred;color:white;flex:1;padding:10px}.invisible.svelte-1af9dx4{display:none}.visible.svelte-1af9dx4{display:block}
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
@@ -2471,11 +2471,11 @@
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBzdGFuZGFsb25lPSdubycgPz4KPHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzEwcHgnIGhlaWdodD0nMTBweCc+Cgk8c3R5bGU+CiAgICBjaXJjbGUgewogICAgICBhbmltYXRpb246IGJhbGwgMC42cyBsaW5lYXIgaW5maW5pdGU7CiAgICB9CgogICAgY2lyY2xlOm50aC1jaGlsZCgyKSB7IGFuaW1hdGlvbi1kZWxheTogMC4wNzVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDMpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjE1czsgfQogICAgY2lyY2xlOm50aC1jaGlsZCg0KSB7IGFuaW1hdGlvbi1kZWxheTogMC4yMjVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDUpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjNzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDYpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjM3NXM7IH0KICAgIGNpcmNsZTpudGgtY2hpbGQoNykgeyBhbmltYXRpb24tZGVsYXk6IDAuNDVzOyB9CiAgICBjaXJjbGU6bnRoLWNoaWxkKDgpIHsgYW5pbWF0aW9uLWRlbGF5OiAwLjUyNXM7IH0KCiAgICBAa2V5ZnJhbWVzIGJhbGwgewogICAgICBmcm9tIHsgb3BhY2l0eTogMTsgfQogICAgICB0byB7IG9wYWNpdHk6IDAuMzsgfQogICAgfQoJPC9zdHlsZT4KCTxnIHN0eWxlPSJmaWxsOndoaXRlOyI+CgkJPGNpcmNsZSBjeD0nNScgY3k9JzEnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nNy44Mjg0JyBjeT0nMi4xNzE2JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzknIGN5PSc1JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJCTxjaXJjbGUgY3g9JzcuODI4NCcgY3k9JzcuODI4NCcgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PSc1JyBjeT0nOScgcj0nMScgc3R5bGU9J29wYWNpdHk6MC4zOycgLz4KCQk8Y2lyY2xlIGN4PScyLjE3MTYnIGN5PSc3LjgyODQnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMScgY3k9JzUnIHI9JzEnIHN0eWxlPSdvcGFjaXR5OjAuMzsnIC8+CgkJPGNpcmNsZSBjeD0nMi4xNzE2JyBjeT0nMi4xNzE2JyByPScxJyBzdHlsZT0nb3BhY2l0eTowLjM7JyAvPgoJPC9nPgo8L3N2Zz4K");
}
#editor.svelte-19z36gs{width:100%;height:400px;max-height:300px;flex:1}
#editor-conf.svelte-4auqqc{width:100%;height:200px;max-height:300px;flex:1}
#view.svelte-de7j0c{border:1px solor darkred;flex:1}#container.svelte-de7j0c{overflow-x:auto}.error.svelte-de7j0c{opacity:0.5}
#card.svelte-1f4byul{border:1px solid lightgray;margin-bottom:16px}#title.svelte-1f4byul{font-family:"Playfair Display", serif;font-weight:400;border-bottom:1px solid lightgray;font-size:1.25rem;background-color:#1e60ab;color:#eaebef}#content.svelte-1f4byul{padding-top:8px}.padding.svelte-1f4byul{padding:8px}
#tag.svelte-kzz8td{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-vfpbl8{margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid lightgray}#markdown.svelte-vfpbl8{padding:7px;font-family:monospace;font-size:14px;width:95%;margin:1rem 0;border:1px solid lightgray}label[for="markdown"].svelte-vfpbl8{cursor:pointer;margin:0 auto}.button-style.svelte-vfpbl8{background-color:#a2d9e2;color:#33a2c4;border-radius:0.25rem;padding:0.5rem;border:1px solid #a2d9e2;margin:0.25rem}.button-style.svelte-vfpbl8:hover{background-color:#fff;color:#33a2c4;border:1px solid #33a2c4}.button-style.svelte-vfpbl8:focus{outline:none}.link-style.svelte-vfpbl8{text-decoration:none;color:#33a2c4}#copy-section.svelte-vfpbl8{padding-top:1rem;text-align:center}
#body.svelte-g5aiet{font-family:"Roboto", sans-serif;background-color:#fcfbfc}#editor-root.svelte-g5aiet{display:flex;height:100%}#col1.svelte-g5aiet{width:35%}#col2.svelte-g5aiet{width:65%;padding-left:32px}#link-root.svelte-g5aiet{display:flex;height:fit-content}#link-col1.svelte-g5aiet{width:50%}#link-col2.svelte-g5aiet{width:50%;padding-left:32px}#app-title.svelte-g5aiet{font-family:"Playfair Display", serif;font-size:32px;font-weight:700;margin:0;color:#1e60ab;opacity:0.8}#title-container.svelte-g5aiet{width:fit-content;margin:0 auto 8px}#power.svelte-g5aiet{width:100%;display:flex;justify-content:flex-end;align-items:center;height:4rem}#sampleLoader.svelte-g5aiet{padding-left:10px;border-bottom:1px solid lightgray}#historyLoaderSubTitle.svelte-g5aiet{display:inline-block;color:#33a2c4;font-size:small;font-style:italic}.button-container.svelte-g5aiet{display:flex;align-items:center}.button-style.svelte-g5aiet{background-color:#a2d9e2;color:#33a2c4;border-radius:0.25rem;padding:0.5rem;border:1px solid #a2d9e2;margin:0.25rem}.button-style.svelte-g5aiet:hover{background-color:#fff;color:#33a2c4;border:1px solid #33a2c4}.button-style.svelte-g5aiet:focus{outline:none}.link-style.svelte-g5aiet{text-decoration:none;color:#33a2c4}
#view-page.svelte-ylwsal{display:flex;height:100%}
#editor.svelte-129q4vv{width:100%;height:400px;max-height:300px;flex:1}
#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}
#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
+12 -12
View File
File diff suppressed because one or more lines are too long
src/code-store.js
+17 -24
View File
@@ -1,35 +1,28 @@
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';
export const codeStore = writable({});
import { replace } from 'svelte-spa-router';
const isDarkMode =
window.matchMedia('(prefers-color-scheme: dark)').matches && false;
const defaultState = {
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]
`,
mermaid: { theme: isDarkMode ? 'dark' : 'default' },
};
export const codeStore = writable(defaultState);
export const fromUrl = (data) => {
let code;
let state;
const isDarkMode =
window.matchMedia('(prefers-color-scheme: dark)').matches && false;
try {
let stateStr = Base64.decode(data);
const 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;
} catch (e) {
// console.error('Init error', e);
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' } };
console.error('Init error', e);
state = defaultState;
}
codeStore.set(state);
src/components/Editor.svelte
+42 -41
View File
@@ -60,53 +60,54 @@
}
};
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',
});
resizeHandler = getResizeHandler(edit);
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;
}
});
initEditor(monaco);
onMount(async () => {
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
return './editor.worker.bundle.js';
},
};
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',
});
resizeHandler = getResizeHandler(edit);
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;
}
});
initEditor(monaco);
});
</script>
src/components/View.svelte
+40 -37
View File
@@ -53,49 +53,52 @@
};
let container;
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;');
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);
}
});
});
let insertSvg = function (svgCode, bindFunctions) {};
export let code = '';
export let configClasses = '';
export let codeClasses = '';
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;');
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>