diff --git a/src/app.postcss b/src/app.postcss index dadf9215..ce6711bb 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -9,3 +9,6 @@ .btn { @apply bg-indigo-500 hover:bg-indigo-700 rounded px-4 shadow; } +.action-btn { + @apply rounded p-2 bg-indigo-400 shadow flex-auto text-white hover:bg-indigo-500; +} diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte index 6fdfe397..33523b68 100644 --- a/src/lib/components/actions.svelte +++ b/src/lib/components/actions.svelte @@ -20,7 +20,6 @@ const exportImage = (event: Event, exporter: Exporter) => { const canvas: HTMLCanvasElement = document.createElement('canvas'); const svg: HTMLElement = document.querySelector('#container svg'); - debugger; const box: DOMRect = svg.getBoundingClientRect(); canvas.width = box.width; canvas.height = box.height; @@ -63,7 +62,7 @@ }; const isClipboardAvailable = () => { - return window?.hasOwnProperty('ClipboardItem'); + return Object.prototype.hasOwnProperty.call(window, 'ClipboardItem'); }; const clipboardCopy: Exporter = (canvas, context, image) => { @@ -72,9 +71,10 @@ canvas.toBlob((blob) => { try { - // @ts-ignore + // @ts-ignore: https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1004/files navigator.clipboard.write([ - // @ts-ignore + /* eslint-disable no-undef */ + // @ts-ignore: https://github.com/microsoft/TypeScript/issues/43821 new ClipboardItem({ [blob.type]: blob }) @@ -86,15 +86,15 @@ }; }; - const onCopyClipboard = (event) => { + const onCopyClipboard = (event: Event) => { exportImage(event, clipboardCopy); }; - const onDownloadPNG = (event) => { + const onDownloadPNG = (event: Event) => { exportImage(event, downloadImage); }; - const onDownloadSVG = (event) => { + const onDownloadSVG = () => { simulateDownload( `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.svg`, `data:image/svg+xml;base64,${getBase64SVG()}` @@ -106,13 +106,13 @@ document.execCommand('Copy'); }; - let iUrl; - let svgUrl; - let mdCode; + let iUrl: string; + let svgUrl: string; + let mdCode: string; let imagemodeselected = 'auto'; let userimagesize = 1080; - const unsubscribe = base64State.subscribe((b64Code) => { + base64State.subscribe((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})`; @@ -122,21 +122,21 @@
{#if isClipboardAvailable()} - {/if} - - - - @@ -160,9 +160,3 @@
- - diff --git a/src/lib/components/editor/util.js b/src/lib/components/editor/util.ts similarity index 93% rename from src/lib/components/editor/util.js rename to src/lib/components/editor/util.ts index ba5a6747..7ffcddeb 100644 --- a/src/lib/components/editor/util.js +++ b/src/lib/components/editor/util.ts @@ -1,4 +1,5 @@ -export const initEditor = (monaco) => { +// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types +export const initEditor = (monaco): void => { monaco.languages.register({ id: 'mermaid' }); // Register a tokens provider for the language @@ -47,7 +48,7 @@ export const initEditor = (monaco) => { // Register a completion item provider for the new language monaco.languages.registerCompletionItemProvider('mermaid', { provideCompletionItems: () => { - var suggestions = [ + const suggestions = [ { label: 'simpleText', kind: monaco.languages.CompletionItemKind.Text, diff --git a/src/lib/components/view.svelte b/src/lib/components/view.svelte index 6a5566a9..20f349e1 100644 --- a/src/lib/components/view.svelte +++ b/src/lib/components/view.svelte @@ -6,11 +6,11 @@ import type { Mermaid } from 'mermaid'; const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid; - let code: string = ''; + let code = ''; let container: HTMLDivElement; - let error: boolean = false; - let outOfSync: boolean = false; - let manualUpdate: boolean = true; + let error = false; + let outOfSync = false; + let manualUpdate = true; onMount(async () => { codeStore.subscribe((state) => { try { @@ -27,7 +27,7 @@ delete container.dataset.processed; mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid))); mermaid.init(container); - mermaid.render('graph-div', code, insertSvg); + mermaid.render('graph-div', code); container.parentElement.parentElement.parentElement.scrollTop = scroll; } else if (manualUpdate) { manualUpdate = false; @@ -48,7 +48,6 @@ } }); }); - const insertSvg = (svgCode, bindFunctions) => {};
diff --git a/src/lib/form.ts b/src/lib/form.ts deleted file mode 100644 index c52e9230..00000000 --- a/src/lib/form.ts +++ /dev/null @@ -1,60 +0,0 @@ -// this action (https://svelte.dev/tutorial/actions) allows us to -// progressively enhance a
that already works without JS -export function enhance( - form: HTMLFormElement, - { - pending, - error, - result - }: { - pending?: (data: FormData, form: HTMLFormElement) => void; - error?: (res: Response, error: Error, form: HTMLFormElement) => void; - result: (res: Response, form: HTMLFormElement) => void; - } -) { - let current_token: {}; - - async function handle_submit(e: Event) { - const token = (current_token = {}); - - e.preventDefault(); - - const body = new FormData(form); - - if (pending) pending(body, form); - - try { - const res = await fetch(form.action, { - method: form.method, - headers: { - accept: 'application/json' - }, - body - }); - - if (token !== current_token) return; - - if (res.ok) { - result(res, form); - } else if (error) { - error(res, null, form); - } else { - console.error(await res.text()); - } - } catch (e) { - if (error) { - error(null, e, form); - } else { - throw e; - } - } - } - - form.addEventListener('submit', handle_submit); - - return { - destroy() { - form.removeEventListener('submit', handle_submit); - } - }; -}