diff --git a/package.json b/package.json index 563543b9..5c11589b 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ }, "dependencies": { "js-base64": "^2.5.1", + "json-lint": "^0.1.0", + "jsonlint": "^1.6.3", "mermaid": "^8.4.2", "monaco-editor": "0.18.1", "svelte-routing": "^1.4.0", diff --git a/public/index.html b/public/index.html index 11bee83f..3befac76 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ Svelte app - + - - + + Online FlowChart & Diagrams Editor - Mermaid Live Editor + + + + diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 00000000..419a592b --- /dev/null +++ b/public/styles.css @@ -0,0 +1,30 @@ +html { + padding: 0; + width: 100%; + height: 100%; +} + +body { + padding: 32px; + font-family: 'trebuchet ms', verdana, arial; + position: relative; + width: 100%; + height: 100%; + box-sizing: border-box; + margin: 0; +} + +.mermaid { + /* font-family: 'trebuchet ms', verdana, arial; */ +} +.marketing-links { + font-size: 16px; +} + +.ant-card { + margin-bottom: 16px; +} + +i { + font-size: 11px; +} \ No newline at end of file diff --git a/src/App.svelte b/src/App.svelte index 9a6b1857..1c59bf27 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -25,6 +25,4 @@ - - - + diff --git a/src/code-store.js b/src/code-store.js index 62b9f992..7768c55c 100644 --- a/src/code-store.js +++ b/src/code-store.js @@ -11,8 +11,10 @@ export const fromUrl = data => { let stateStr = Base64.decode(data) state = JSON.parse(stateStr); + console.log('state from url', state) + if (state.code === undefined) { // not valid json - state = { code: str, mermaid: { theme: themeFromUrl } } +// state = { code: '', mermaid: { theme: themeFromUrl } } } code = state.code; } catch (e) { diff --git a/src/components/Card.svelte b/src/components/Card.svelte new file mode 100644 index 00000000..98556302 --- /dev/null +++ b/src/components/Card.svelte @@ -0,0 +1,31 @@ + + + + +
+
{title}
+
+ +
+
\ No newline at end of file diff --git a/src/components/Config.svelte b/src/components/Config.svelte new file mode 100644 index 00000000..89fce739 --- /dev/null +++ b/src/components/Config.svelte @@ -0,0 +1,110 @@ + + + + +
+
+ {#if error} + + {/if} +
diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte index e4cbdc48..b8e079e8 100644 --- a/src/components/Editor.svelte +++ b/src/components/Editor.svelte @@ -13,43 +13,34 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'; export let data; export let code = ''; +export let conf = { theme: 'default' }; let edit; +export let error = false; let decorations = []; const decArr = []; const handleCodeUpdate = code => { try { mermaid.parse(code); - let newState = { code, mermaid: { theme: 'default' } }; + let newState = { code, mermaid: conf }; updateCodeStore(newState); decArr.forEach(decor => { edit.deltaDecorations(decor, []); }); - // decorations = edit.deltaDecorations(decorations, [{ range: new monaco.Range(1,1,1,1), options : { } }]); + errorStore.set(undefined); const model = edit.getModel(); - // model.setValue(code); - // model.dispose(); } catch(e) { - console.log('Error in parsed', e); - errorStore.set(e); - const str = JSON.stringify({ code: code, mermaid: { theme: 'default' } }); - push('/edit/' + Base64.encode(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 model = edit.getModel(); - - // monaco.editor.setModelMarkers(model, 'test', { - // startLineineNumber: e.hash.loc.first_line, - // endLineNumumber: e.hash.loc.last_line, - // startColumn: e.hash.loc.first_column, - // endColumn: e.hash.loc.last_column, - // message: 'Syntax error', - // code: 'SXE', - // severity: 8 - // }); + if(e) { + errorStore.set(e); + console.log('Error in parsed', e.hash); + const str = JSON.stringify({ code: code, mermaid: conf }); + push('/edit/' + Base64.encode(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' }}] + )); + } } }; @@ -57,6 +48,9 @@ const unsubscribe = codeStore.subscribe( state => { if(!code && state) { code = state.code; } + if(state) { + conf = state.mermaid; + } if(!edit && code) { edit = monaco.editor.create(document.getElementById('editor'), { value: [ @@ -75,6 +69,14 @@ const unsubscribe = codeStore.subscribe( state => { } }); +const unsubscribeError = errorStore.subscribe( _error => { + if(_error) { + error = true; + } else { + error = false; + } +}); + initEditor(monaco); onMount(async () => { @@ -87,31 +89,22 @@ onMount(async () => { }); export let name; - export let params = {} + export let params = {};
- + {#if error} + + {/if}
diff --git a/src/components/Error.svelte b/src/components/Error.svelte index a3c10ff2..35f8ce3d 100644 --- a/src/components/Error.svelte +++ b/src/components/Error.svelte @@ -13,27 +13,29 @@ onMount(async () => { export let expected = ''; export let params = {} + export let errorText = ''; -const unsubscribeError = errorStore.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 = errorStore.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(' ');; +// } +// }); -
-
Expected: {expected}
-
-
Got: {token}
+
{errorText}
\ No newline at end of file diff --git a/src/components/View.svelte b/src/components/View.svelte index 6d5a8989..af6ce5cb 100644 --- a/src/components/View.svelte +++ b/src/components/View.svelte @@ -1,6 +1,7 @@ -
- - + #col1 { + width: 35%; + } + #col2 { + width: 65%; + padding-left: 32px; + } + #app-title { + border-bottom: 1px solid lightgrey; + padding-bottom: 32px; + margin-bottom: 32px; + font-size: 28px; + font-weight: 400; + margin-top: 0; + } + + +
+

Mermaid Live Editor

+
+
+ + +
+
+ + bla boac +
+
\ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 160623cd..2199a00b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -192,6 +192,11 @@ resolved "http://pacman01.inkclub.local:4873/@zeit%2fschemas/-/schemas-2.6.0.tgz#004e8e553b4cd53d538bd38eac7bcbf58a867fe3" integrity sha512-uUrgZ8AxS+Lio0fZKAipJjAh415JyrOZowliZAzmnJSsf7piVL5w+G0+gFJ0KSu3QRhvui/7zuvpLz03YjXAhg== +JSV@^4.0.x: + version "4.0.2" + resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57" + integrity sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c= + abbrev@1: version "1.1.1" resolved "http://pacman01.inkclub.local:4873/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" @@ -279,6 +284,11 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1: dependencies: color-convert "^1.9.0" +ansi-styles@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178" + integrity sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg= + anymatch@^2.0.0: version "2.0.0" resolved "http://pacman01.inkclub.local:4873/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb" @@ -684,6 +694,15 @@ chalk@2.4.2, chalk@^2.0.1, chalk@^2.4.2: escape-string-regexp "^1.0.5" supports-color "^5.3.0" +chalk@~0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f" + integrity sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8= + dependencies: + ansi-styles "~1.0.0" + has-color "~0.1.0" + strip-ansi "~0.1.0" + chokidar@^2.0.2, chokidar@^2.1.8: version "2.1.8" resolved "http://pacman01.inkclub.local:4873/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -2036,6 +2055,11 @@ handle-thing@^2.0.0: resolved "http://pacman01.inkclub.local:4873/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754" integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ== +has-color@~0.1.0: + version "0.1.7" + resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f" + integrity sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8= + has-flag@^3.0.0: version "3.0.0" resolved "http://pacman01.inkclub.local:4873/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" @@ -2548,6 +2572,11 @@ js-base64@^2.5.1: resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121" integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw== +json-lint@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/json-lint/-/json-lint-0.1.0.tgz#45b03fba86c4f30f2c6e70aa73a90d3fe18f9803" + integrity sha1-RbA/uobE8w8sbnCqc6kNP+GPmAM= + json-parse-better-errors@^1.0.2: version "1.0.2" resolved "http://pacman01.inkclub.local:4873/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9" @@ -2570,6 +2599,14 @@ json5@^1.0.1: dependencies: minimist "^1.2.0" +jsonlint@^1.6.3: + version "1.6.3" + resolved "https://registry.yarnpkg.com/jsonlint/-/jsonlint-1.6.3.tgz#cb5e31efc0b78291d0d862fbef05900adf212988" + integrity sha512-jMVTMzP+7gU/IyC6hvKyWpUU8tmTkK5b3BPNuMI9U8Sit+YAWLlZwB6Y6YrdCxfg2kNz05p3XY3Bmm4m26Nv3A== + dependencies: + JSV "^4.0.x" + nomnom "^1.5.x" + killable@^1.0.1: version "1.0.1" resolved "http://pacman01.inkclub.local:4873/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892" @@ -3077,6 +3114,14 @@ node-pre-gyp@^0.12.0: semver "^5.3.0" tar "^4" +nomnom@^1.5.x: + version "1.8.1" + resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7" + integrity sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc= + dependencies: + chalk "~0.4.0" + underscore "~1.6.0" + nopt@^4.0.1: version "4.0.1" resolved "http://pacman01.inkclub.local:4873/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d" @@ -4276,6 +4321,11 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@~0.1.0: + version "0.1.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991" + integrity sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE= + strip-css-comments@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/strip-css-comments/-/strip-css-comments-3.0.0.tgz#7a5625eff8a2b226cf8947a11254da96e13dae89" @@ -4495,6 +4545,11 @@ uglify-js@^3.5.1: commander "~2.20.3" source-map "~0.6.1" +underscore@~1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8" + integrity sha1-izixDKze9jM3uLJOT/htRa6lKag= + union-value@^1.0.0: version "1.0.1" resolved "http://pacman01.inkclub.local:4873/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"