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

Merge branch 'master' of https://github.com/mermaid-js/mermaid-live-editor into clipboard

Browse Source 
* 'master' of https://github.com/mermaid-js/mermaid-live-editor:
  Conflict resolution
  Remove npm files.
  Apply suggestions from code review
  Change default Writable type
  Responsive editors. Fixes #10
  Fix the problem that the use of br tag causes image export failure
This commit is contained in:
Sidharth Vinod
2020-12-21 08:21:14 +05:30
parent d4e5c0a209 e477abba23
commit b9fb7b224a
9 changed files with 44 additions and 7838 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
-7791
View File
File diff suppressed because it is too large Load Diff
package.json
+1
View File
@@ -14,6 +14,7 @@
"style-loader": "^0.23.1",
"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"
package.json.preview
-31
View File
@@ -1,31 +0,0 @@
{
"name": "mermaid-live-editor",
"version": "1.0.0",
"license": "MIT",
"devDependencies": {
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"serve": "^11.0.0",
"style-loader": "^0.23.1",
"svelte": "^3.0.0",
"svelte-loader": "2.13.3",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
},
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "webpack-dev-server --content-base docs"
},
"dependencies": {
"js-base64": "^2.5.1",
"json-lint": "^0.1.0",
"jsonlint": "^1.6.3",
"@mermaid-js/mermaid": "8.4.3-preview.795",
"moment": "^2.24.0",
"monaco-editor": "0.18.1",
"svelte-routing": "^1.4.0",
"svelte-spa-router": "^1.3.0"
}
}
src/code-store.js
+1 -1
View File
@@ -4,7 +4,7 @@ import mermaid from '@mermaid';
import { Base64 } from 'js-base64';
import { push, pop, replace } from 'svelte-spa-router';
export const codeStore = writable(undefined);
export const codeStore = writable({});
export const fromUrl = (data) => {
let code;
let state;
src/components/Config.svelte
+5 -4
View File
@@ -12,8 +12,8 @@
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
import Error from './Error.svelte';
import { initEditor } from './editor-utils';
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';
@@ -27,6 +27,7 @@
let decorations = [];
const decArr = [];
let resizeHandler = () => {};
let oldConf = {};
const handleConfUpdate = (conf) => {
@@ -65,7 +66,7 @@
theme: 'myCoolTheme',
language: 'JSON',
});
resizeHandler = getResizeHandler(edit);
let decorations = [];
edit.onDidChangeModelContent(function (e) {
const conf = edit.getValue();
@@ -106,7 +107,7 @@
</style>
<div id="editor-container">
<div id="editor-conf" />
<div id="editor-conf" use:watchResize={resizeHandler} />
{#if error}
<Error errorText={error} />
{/if}
src/components/Editor.svelte
+5 -2
View File
@@ -7,10 +7,11 @@
// import mermaid from '@mermaid-js/mermaid';
import mermaid from '@mermaid';
import Error from './Error.svelte';
import { initEditor } from './editor-utils';
import { getResizeHandler, 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 { watchResize } from 'svelte-watch-resize';
export let code = '';
const isDarkMode =
@@ -22,6 +23,7 @@
let decorations = [];
const decArr = [];
let editorElem = null;
let resizeHandler = () => {};
const handleCodeUpdate = (code) => {
try {
mermaid.parse(code);
@@ -77,6 +79,7 @@
theme: 'myCoolTheme',
language: 'mermaid',
});
resizeHandler = getResizeHandler(edit);
let decorations = [];
edit.onDidChangeModelContent(function (e) {
@@ -126,7 +129,7 @@
</style>
<div id="editor-container">
<div id="editor" />
<div id="editor" use:watchResize={resizeHandler} />
{#if error}
<Error errorText="Syntax Error" />
{/if}
src/components/Links.svelte
Regular → Executable
+9 -9
View File
@@ -4,9 +4,14 @@
import moment from 'moment';
import { codeStore } from '../code-store.js';
const getBase64SVG = () => {
const container = document.getElementById('container');
const svg = container.innerHTML.replaceAll('<br>', '<br/>');
return Base64.encode(svg);
};
const exportImage = (event, exporter) => {
var canvas = document.createElement('canvas');
const container = document.getElementById('container');
const svg = document.querySelector('#container svg');
const box = svg.getBoundingClientRect();
canvas.width = box.width;
@@ -27,10 +32,8 @@
var image = new Image();
image.onload = exporter(canvas, context, image);
console.warn('SVG', container.innerHTML);
image.src = `data:image/svg+xml;base64,${Base64.encode(
container.innerHTML
)}`;
console.warn('SVG', getBase64SVG());
image.src = `data:image/svg+xml;base64,${getBase64SVG()}`;
event.stopPropagation();
event.preventDefault();
};
@@ -76,10 +79,7 @@
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.href = `data:image/svg+xml;base64,${getBase64SVG()}`;
event.target.download = `mermaid-diagram-${moment().format(
'YYYYMMDDHHmmss'
)}.svg`;
src/components/editor-utils.js
+4
View File
@@ -80,3 +80,7 @@ export const initEditor = (monaco) => {
},
});
};
export const getResizeHandler = (editor) => {
return (node) => editor && editor.layout();
};
yarn.lock
+19
View File
@@ -428,6 +428,11 @@ base@^0.11.1:
mixin-deep "^1.2.0"
pascalcase "^0.1.1"
batch-processor@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
batch@0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -1475,6 +1480,13 @@ ee-first@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
element-resize-detector@^1.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.2.1.tgz#b0305194447a4863155e58f13323a0aef30851d1"
integrity sha512-BdFsPepnQr9fznNPF9nF4vQ457U/ZJXQDSNF1zBe7yaga8v9AdZf3/NElYxFdUh7SitSGt040QygiTo6dtatIw==
dependencies:
batch-processor "1.0.0"
elliptic@^6.0.0:
version "6.5.3"
resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
@@ -4391,6 +4403,13 @@ svelte-spa-router@^1.3.0:
dependencies:
regexparam "^1.3.0"
svelte-watch-resize@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/svelte-watch-resize/-/svelte-watch-resize-1.0.3.tgz#8cf78ac2e3142ec5f1e88cc06aea13a6bc07b1b3"
integrity sha512-ktqTnkdqfx4YRqeMJcX1jeSnQ2kJUVlj4/rLdaLbhM+RrxN87vS2EZ0cxlGZ7eXV86Ef05Q3dVqEiR+12PeoIw==
dependencies:
element-resize-detector "^1.1"
svelte@^3.0.0:
version "3.16.0"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.16.0.tgz#7ead284547240fcbcb985c73473dce811315fd15"