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

Merge pull request #1370 from mermaid-js/release-promotion

Browse Source 
Release live editor
This commit is contained in:
Sidharth Vinod
2024-01-11 22:44:43 +05:30
committed by GitHub
parent 9e0fa86127 eaecb488ec
commit 9a15de1467
25 changed files with 1002 additions and 939 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.node-version
+1
View File
@@ -0,0 +1 @@
18
.prettierrc
+3 -1
View File
@@ -3,5 +3,7 @@
"svelteSortOrder": "options-scripts-markup-styles", "svelteSortOrder": "options-scripts-markup-styles",
"bracketSameLine": true, "bracketSameLine": true,
"trailingComma": "none", "trailingComma": "none",
"printWidth": 100 "printWidth": 100,
"tailwindConfig": "./tailwind.config.cjs",
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
} }
.vscode/settings.json
Vendored
+2
View File
@@ -16,6 +16,8 @@
"mindmap", "mindmap",
"Pageview", "Pageview",
"pako", "pako",
"panzoom",
"pzoom",
"Serde", "Serde",
"serdes", "serdes",
"tailwindcss", "tailwindcss",
cypress/e2e/util.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export const typeInEditor = (
) => { ) => {
cy.window().should('have.property', 'editorLoaded', true); cy.window().should('have.property', 'editorLoaded', true);
cy.get('#editor').click(); cy.get('#editor').click();
cy.get('#editor').within(($editor) => { cy.get('#editor').within(() => {
if (bottom) { if (bottom) {
cy.get('textarea').type('{pageDown}', { force: true }); cy.get('textarea').type('{pageDown}', { force: true });
} }
package.json
+26 -24
View File
@@ -23,15 +23,15 @@
}, },
"devDependencies": { "devDependencies": {
"@cypress/snapshot": "2.1.7", "@cypress/snapshot": "2.1.7",
"@sveltejs/adapter-static": "2.0.3", "@sveltejs/adapter-static": "3.0.1",
"@sveltejs/kit": "1.28.0", "@sveltejs/kit": "2.3.0",
"@testing-library/jest-dom": "5.17.0", "@sveltejs/vite-plugin-svelte": "^3.0.1",
"@testing-library/svelte": "3.2.2", "@testing-library/svelte": "4.0.5",
"@types/pako": "2.0.3", "@types/pako": "2.0.3",
"@types/uuid": "9.0.7", "@types/uuid": "9.0.7",
"@typescript-eslint/eslint-plugin": "5.62.0", "@typescript-eslint/eslint-plugin": "6.18.1",
"@typescript-eslint/parser": "5.62.0", "@typescript-eslint/parser": "6.18.1",
"@vitest/ui": "^0.34.0", "@vitest/ui": "^1.1.3",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"c8": "7.14.0", "c8": "7.14.0",
"chai": "^4.3.7", "chai": "^4.3.7",
@@ -39,33 +39,35 @@
"cy-verify-downloads": "0.2.2", "cy-verify-downloads": "0.2.2",
"cypress": "12.17.4", "cypress": "12.17.4",
"cypress-localstorage-commands": "2.2.5", "cypress-localstorage-commands": "2.2.5",
"eslint": "8.55.0", "eslint": "8.56.0",
"eslint-config-prettier": "8.10.0", "eslint-config-prettier": "9.1.0",
"eslint-plugin-cypress": "2.15.1", "eslint-plugin-cypress": "2.15.1",
"eslint-plugin-es": "4.1.0", "eslint-plugin-es": "4.1.0",
"eslint-plugin-no-only-tests": "^3.1.0", "eslint-plugin-no-only-tests": "^3.1.0",
"eslint-plugin-postcss-modules": "2.0.0", "eslint-plugin-postcss-modules": "2.0.0",
"eslint-plugin-svelte3": "4.0.0", "eslint-plugin-svelte3": "4.0.0",
"eslint-plugin-tailwindcss": "3.13.0", "eslint-plugin-tailwindcss": "3.13.1",
"eslint-plugin-unicorn": "^46.0.0", "eslint-plugin-unicorn": "^50.0.1",
"eslint-plugin-vitest": "^0.3.0", "eslint-plugin-vitest": "^0.3.20",
"esserializer": "1.3.11", "esserializer": "1.3.11",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"husky": "^8.0.3", "husky": "^8.0.3",
"jsdom": "21.1.2", "jsdom": "21.1.2",
"lint-staged": "13.3.0", "lint-staged": "15.2.0",
"node-html-parser": "^6.1.5", "node-html-parser": "^6.1.5",
"postcss": "^8.4.21", "postcss": "^8.4.33",
"postcss-load-config": "4.0.2", "postcss-load-config": "5.0.2",
"prettier": "2.8.8", "prettier": "3.1.0",
"prettier-plugin-svelte": "^2.10.0", "prettier-plugin-svelte": "^3.1.2",
"svelte": "3.59.2", "prettier-plugin-tailwindcss": "^0.5.11",
"svelte-preprocess": "5.1.1", "svelte": "4.2.8",
"tailwindcss": "^3.3.1", "svelte-preprocess": "5.1.3",
"tslib": "^2.5.0", "tailwindcss": "^3.4.1",
"typescript": "5.3.2", "tslib": "^2.6.2",
"vite": "^4.5.1", "typescript": "5.3.3",
"vitest": "^0.34.0" "vite": "^5.0.11",
"vitest": "^1.1.3",
"vitest-dom": "^0.1.1"
}, },
"dependencies": { "dependencies": {
"daisyui": "2.52.0", "daisyui": "2.52.0",
src/app.html
+1 -1
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
src/app.postcss
+1 -1
View File
@@ -3,7 +3,7 @@
@tailwind utilities; @tailwind utilities;
.input { .input {
@apply flex-1 border-primary border-solid border-2 rounded; @apply flex-1 rounded border-2 border-solid border-primary;
} }
.action-btn { .action-btn {
@apply btn btn-primary; @apply btn btn-primary;
src/lib/components/Actions.svelte
+6 -6
View File
@@ -185,7 +185,7 @@
</script> </script>
<Card title="Actions" isOpen={false}> <Card title="Actions" isOpen={false}>
<div class="flex flex-wrap gap-2 m-2"> <div class="m-2 flex flex-wrap gap-2">
{#if isClipboardAvailable()} {#if isClipboardAvailable()}
<button class="action-btn w-full" on:click={onCopyClipboard} <button class="action-btn w-full" on:click={onCopyClipboard}
><i class="far fa-copy mr-2" /> Copy Image to clipboard ><i class="far fa-copy mr-2" /> Copy Image to clipboard
@@ -213,7 +213,7 @@
</button> </button>
</a> </a>
<div class="flex gap-2 items-center"> <div class="flex items-center gap-2">
PNG size PNG size
<label for="autosize"> <label for="autosize">
<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto <input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto
@@ -238,7 +238,7 @@
{/if} {/if}
</div> </div>
<div class="w-full flex gap-2 items-center"> <div class="flex w-full items-center gap-2">
<input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} /> <input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
<label for="markdown"> <label for="markdown">
<button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}> <button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
@@ -247,7 +247,7 @@
</label> </label>
</div> </div>
<div class="w-full flex gap-2 items-center"> <div class="flex w-full items-center gap-2">
<input <input
class="input" class="input"
id="gist" id="gist"
@@ -259,8 +259,8 @@
</label> </label>
</div> </div>
{#if isNetlify} {#if isNetlify}
<div class="w-full flex items-center justify-center"> <div class="flex w-full items-center justify-center">
<a class="link underline text-gray-500 text-sm" href="https://netlify.com"> <a class="link text-sm text-gray-500 underline" href="https://netlify.com">
This site is powered by Netlify This site is powered by Netlify
</a> </a>
</div> </div>
src/lib/components/Card/Card.svelte
+5 -3
View File
@@ -11,20 +11,22 @@
$: isTabsShown = isOpen && tabs.length > 0; $: isTabsShown = isOpen && tabs.length > 0;
</script> </script>
<div class="card rounded overflow-hidden m-2 flex-grow flex flex-col shadow-2xl"> <div class="card m-2 flex flex-grow flex-col overflow-hidden rounded shadow-2xl">
<div <div
role="toolbar"
tabindex="0"
class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer" class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer"
on:click={() => (isOpen = !isOpen)} on:click={() => (isOpen = !isOpen)}
on:keypress={() => (isOpen = !isOpen)}> on:keypress={() => (isOpen = !isOpen)}>
<div class="flex justify-between"> <div class="flex justify-between">
<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} {activeTabID} /> <Tabs on:select {tabs} bind:isOpen {title} {isCloseable} {activeTabID} />
<div class="flex gap-x-4 items-center {isTabsShown ? '-mt-2' : ''}"> <div class="flex items-center gap-x-4 {isTabsShown ? '-mt-2' : ''}">
<slot name="actions" /> <slot name="actions" />
</div> </div>
</div> </div>
</div> </div>
{#if isOpen} {#if isOpen}
<div class="card-body p-0 flex-grow overflow-auto text-base-content" transition:slide> <div class="card-body flex-grow overflow-auto p-0 text-base-content" transition:slide>
<slot /> <slot />
</div> </div>
{/if} {/if}
src/lib/components/Card/Tabs.svelte
+4
View File
@@ -20,6 +20,8 @@
<div class="flex cursor-default"> <div class="flex cursor-default">
<span <span
role="menubar"
tabindex="0"
class="mr-2 font-semibold" class="mr-2 font-semibold"
on:click|stopPropagation={() => (isOpen = !isOpen)} on:click|stopPropagation={() => (isOpen = !isOpen)}
on:keypress|stopPropagation={() => (isOpen = !isOpen)}> on:keypress|stopPropagation={() => (isOpen = !isOpen)}>
@@ -31,6 +33,8 @@
<ul class="tabs" transition:fade> <ul class="tabs" transition:fade>
{#each tabs as tab} {#each tabs as tab}
<div <div
role="tab"
tabindex="0"
class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}" class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}"
on:click|stopPropagation={() => toggleTabs(tab)} on:click|stopPropagation={() => toggleTabs(tab)}
on:keypress|stopPropagation={() => toggleTabs(tab)}> on:keypress|stopPropagation={() => toggleTabs(tab)}>
src/lib/components/Editor.svelte
+1 -1
View File
@@ -64,7 +64,7 @@
} }
}; };
onMount(async () => { onMount(() => {
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorker(_, label) { getWorker(_, label) {
if (label === 'json') { if (label === 'json') {
src/lib/components/History/History.svelte
+11 -11
View File
@@ -57,13 +57,13 @@
input.type = 'file'; input.type = 'file';
input.accept = 'application/json'; input.accept = 'application/json';
input.addEventListener('change', ({ target }: Event) => { input.addEventListener('change', ({ target }: Event) => {
const file = (<HTMLInputElement>target).files[0]; const file = (target as HTMLInputElement)?.files?.[0];
if (!file) { if (!file) {
return; return;
} }
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
const data: HistoryEntry[] = JSON.parse(e.target.result as string); const data: HistoryEntry[] = JSON.parse(e.target?.result as string);
restoreHistory(data); restoreHistory(data);
}; };
reader.readAsText(file); reader.readAsText(file);
@@ -129,34 +129,34 @@
<div slot="actions"> <div slot="actions">
<button <button
id="uploadHistory" id="uploadHistory"
class="btn btn-xs btn-secondary w-12" class="btn btn-secondary btn-xs w-12"
on:click|stopPropagation={() => uploadHistory()} on:click|stopPropagation={() => uploadHistory()}
title="Upload history"><i class="fa fa-upload" /></button> title="Upload history"><i class="fa fa-upload" /></button>
{#if $historyStore.length > 0} {#if $historyStore.length > 0}
<button <button
id="downloadHistory" id="downloadHistory"
class="btn btn-xs btn-secondary w-12" class="btn btn-secondary btn-xs w-12"
on:click|stopPropagation={() => downloadHistory()} on:click|stopPropagation={() => downloadHistory()}
title="Download history"><i class="fa fa-download" /></button> title="Download history"><i class="fa fa-download" /></button>
{/if} {/if}
| |
<button <button
id="saveHistory" id="saveHistory"
class="btn btn-xs btn-success w-12" class="btn btn-success btn-xs w-12"
on:click|stopPropagation={() => saveHistory()} on:click|stopPropagation={() => saveHistory()}
title="Save current state"><i class="far fa-save" /></button> title="Save current state"><i class="far fa-save" /></button>
{#if $historyModeStore !== 'loader'} {#if $historyModeStore !== 'loader'}
<button <button
id="clearHistory" id="clearHistory"
class="btn btn-xs btn-error w-12" class="btn btn-error btn-xs w-12"
on:click|stopPropagation={() => clearHistory()} on:click|stopPropagation={() => clearHistory()}
title="Delete all saved states"><i class="fas fa-trash-alt" /></button> title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
{/if} {/if}
</div> </div>
<ul class="p-2 space-y-2 overflow-auto h-56" id="historyList"> <ul class="h-56 space-y-2 overflow-auto p-2" id="historyList">
{#if $historyStore.length > 0} {#if $historyStore.length > 0}
{#each $historyStore as { id, state, time, name, url, type }} {#each $historyStore as { id, state, time, name, url, type }}
<li class="rounded p-2 shadow flex-col"> <li class="flex-col rounded p-2 shadow">
<div class="flex"> <div class="flex">
<div class="flex-1"> <div class="flex-1">
<div class="flex flex-col text-base-content"> <div class="flex flex-col text-base-content">
@@ -165,14 +165,14 @@
href={url} href={url}
target="_blank" target="_blank"
title="Open revision in new tab" title="Open revision in new tab"
class="hover:underline text-blue-500">{name}</a> class="text-blue-500 hover:underline">{name}</a>
{:else} {:else}
<span>{name}</span> <span>{name}</span>
{/if} {/if}
<span class="text-gray-400 text-sm">{relativeTime(time)}</span> <span class="text-sm text-gray-400">{relativeTime(time)}</span>
</div> </div>
</div> </div>
<div class="flex gap-2 content-center"> <div class="flex content-center gap-2">
<button class="btn btn-success" on:click={() => restoreHistoryItem(state)} <button class="btn btn-success" on:click={() => restoreHistoryItem(state)}
><i class="fas fa-undo mr-1" />Restore</button> ><i class="fas fa-undo mr-1" />Restore</button>
{#if type !== 'loader'} {#if type !== 'loader'}
src/lib/components/Navbar.svelte
+13 -8
View File
@@ -62,8 +62,13 @@
{#if activePromotion} {#if activePromotion}
<div <div
class="z-10 w-full h-fit top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white"> class="top-bar z-10 flex h-fit w-full items-center justify-center bg-gradient-to-r from-[#bd34fe] to-[#ff3670] p-1 text-center text-white">
<div class="flex flex-grow" on:click={trackBannerClick} on:keypress={trackBannerClick}> <div
class="flex flex-grow"
role="button"
tabindex="0"
on:click={trackBannerClick}
on:keypress={trackBannerClick}>
<svelte:component this={activePromotion.component} /> <svelte:component this={activePromotion.component} />
</div> </div>
<button <button
@@ -77,8 +82,8 @@
</div> </div>
{/if} {/if}
<div class="navbar shadow-lg bg-primary p-0"> <div class="navbar bg-primary p-0 shadow-lg">
<div class="flex-1 px-2 mx-2"> <div class="mx-2 flex-1 px-2">
<span class="text-lg font-bold"> <span class="text-lg font-bold">
<a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a> <a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
</span> </span>
@@ -86,7 +91,7 @@
<label <label
for="menu-toggle" for="menu-toggle"
class={isMenuOpen ? 'hidden' : 'pointer-cursor lg:hidden fixed right-4 z-[1000]'}> class={isMenuOpen ? 'hidden' : 'pointer-cursor fixed right-4 z-[1000] lg:hidden'}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -102,7 +107,7 @@
<!-- Cross SVG --> <!-- Cross SVG -->
<label <label
for="menu-toggle" for="menu-toggle"
class={isMenuOpen ? 'pointer-cursor lg:hidden fixed right-4 z-[1000]' : 'hidden'}> class={isMenuOpen ? 'pointer-cursor fixed right-4 z-[1000] lg:hidden' : 'hidden'}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -123,9 +128,9 @@
bind:checked={isMenuOpen} bind:checked={isMenuOpen}
on:click={toggleMenu} /> on:click={toggleMenu} />
<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu"> <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
<Theme /> <Theme />
<ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0"> <ul class="items-center justify-between pt-4 text-base lg:flex lg:pt-0">
{#each links as { title, href, icon, img }} {#each links as { title, href, icon, img }}
<li> <li>
<a class="btn btn-ghost" target="_blank" {href}> <a class="btn btn-ghost" target="_blank" {href}>
src/lib/components/Preset.svelte
+3 -3
View File
@@ -153,14 +153,14 @@
</script> </script>
<Card title="Sample Diagrams" isOpen={false}> <Card title="Sample Diagrams" isOpen={false}>
<div class="flex flex-wrap p-2 gap-2"> <div class="flex flex-wrap gap-2 p-2">
{#each diagramOrder as sample} {#each diagramOrder as sample}
<button <button
class="btn btn-sm btn-primary w-28 normal-case flex-grow" class="btn btn-primary btn-sm w-28 flex-grow normal-case"
on:click={() => loadSampleDiagram(sample)}> on:click={() => loadSampleDiagram(sample)}>
{sample} {sample}
{#if newDiagrams.includes(sample)} {#if newDiagrams.includes(sample)}
<span class="ml-2 fa fa-heart" /> <span class="fa fa-heart ml-2" />
{/if} {/if}
</button> </button>
{/each} {/each}
src/lib/components/Theme.svelte
+7 -5
View File
@@ -26,14 +26,14 @@
]; ];
</script> </script>
<div class="hidden lg:block dropdown"> <div class="dropdown hidden lg:block">
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div tabindex="0" class="btn btn-ghost"> <div tabindex="0" class="btn btn-ghost">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="inline-block w-6 h-6 stroke-current md:mr-2" class="inline-block h-6 w-6 stroke-current md:mr-2"
><path ><path
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@@ -43,17 +43,19 @@
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1792 1792" viewBox="0 0 1792 1792"
class="inline-block w-4 h-4 ml-1 fill-current" class="ml-1 inline-block h-4 w-4 fill-current"
><path ><path
d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" /></svg> d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" /></svg>
</div> </div>
<div <div
class="mt-14 overflow-y-auto shadow-2xl top-px dropdown-content h-96 w-56 bg-base-200 text-base-content"> class="dropdown-content top-px mt-14 h-96 w-56 overflow-y-auto bg-base-200 text-base-content shadow-2xl">
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul tabindex="0" class="p-4 menu compact"> <ul tabindex="0" class="menu compact p-4">
{#each themes as theme} {#each themes as theme}
<li class:bordered={$themeStore.theme !== undefined && theme.includes($themeStore.theme)}> <li class:bordered={$themeStore.theme !== undefined && theme.includes($themeStore.theme)}>
<span <span
role="menuitem"
tabindex="0"
class="btn btn-ghost justify-start" class="btn btn-ghost justify-start"
on:click={() => setTheme(theme)} on:click={() => setTheme(theme)}
on:keypress={() => setTheme(theme)}>{theme}</span> on:keypress={() => setTheme(theme)}>{theme}</span>
src/lib/components/View.svelte
+3 -3
View File
@@ -127,12 +127,12 @@
{#if (error && $stateStore.error instanceof Error) || outOfSync} {#if (error && $stateStore.error instanceof Error) || outOfSync}
<div <div
class="absolute w-full p-2 z-10 font-mono {error class="absolute z-10 w-full p-2 font-mono {error
? 'text-red-600' ? 'text-red-600'
: 'text-yellow-600'} bg-base-100 bg-opacity-80 text-left" : 'text-yellow-600'} bg-base-100 bg-opacity-80 text-left"
id="errorContainer"> id="errorContainer">
{#if error} {#if error}
{@html $stateStore.error?.toString().replace(/\n/g, '<br />')} {@html $stateStore.error?.toString().replaceAll('\n', '<br />')}
{:else} {:else}
Diagram out of sync. <br /> Diagram out of sync. <br />
Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync. Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
@@ -140,7 +140,7 @@
</div> </div>
{/if} {/if}
<div id="view" bind:this={view} class="p-2 h-full" class:error class:outOfSync> <div id="view" bind:this={view} class="h-full p-2" class:error class:outOfSync>
<div id="container" bind:this={container} class="h-full overflow-auto" class:hide /> <div id="container" bind:this={container} class="h-full overflow-auto" class:hide />
</div> </div>
src/lib/util/fileLoaders/gist.ts
+1 -1
View File
@@ -109,7 +109,7 @@ export const loadGistData = async (gistURL: string): Promise<State> => {
throw new Error('Invalid gist provided'); throw new Error('Invalid gist provided');
} }
gistHistory.reverse(); gistHistory.reverse();
const entry = gistHistory.slice(-1).pop(); const entry = gistHistory.at(-1);
if (!entry) { if (!entry) {
throw new Error('Invalid gist provided'); throw new Error('Invalid gist provided');
} }
src/lib/util/persist.ts
+1 -1
View File
@@ -213,7 +213,7 @@ function getBrowserStorage(
disconnect(); disconnect();
} }
}, },
getValue(key: string): any | null { getValue(key: string): any {
const value = browserStorage.getItem(key); const value = browserStorage.getItem(key);
return deserialize(value); return deserialize(value);
}, },
src/lib/util/promos/Holiday2023.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<a <a
href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023" href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023"
target="_blank" target="_blank"
class="tracking-wide flex-grow"> class="flex-grow tracking-wide">
Get AI, team collaboration, storage, and more with Get AI, team collaboration, storage, and more with
<span class="font-bold underline">Mermaid Chart Pro. Start free trial today & get 25% off.</span> <span class="font-bold underline">Mermaid Chart Pro. Start free trial today & get 25% off.</span>
</a> </a>
src/lib/util/promos/Jan2024.svelte
+2 -2
View File
@@ -9,7 +9,7 @@
<a <a
href="https://www.mermaidchart.com/" href="https://www.mermaidchart.com/"
target="_blank" target="_blank"
class="tracking-wide flex-grow justify-center align-middle flex gap-6"> class="flex flex-grow justify-center gap-6 align-middle tracking-wide">
{taglines[Math.floor(Math.random() * taglines.length)]} {taglines[Math.floor(Math.random() * taglines.length)]}
<button class="font-light text-sm p-1 rounded bg-gray-800 px-4">Try it now</button> <button class="rounded bg-gray-800 p-1 px-4 text-sm font-light">Try it now</button>
</a> </a>
src/lib/util/stats.ts
+17 -17
View File
@@ -35,7 +35,7 @@ export const detectType = (text: string): string | undefined => {
'mindmap' 'mindmap'
]; ];
const firstLine = text const firstLine = text
.replace(/^\s*%%.*\n/g, '\n') .replaceAll(/^\s*%%.*\n/g, '\n')
.trimStart() .trimStart()
.split(' ')[0] .split(' ')[0]
.toLowerCase(); .toLowerCase();
@@ -57,22 +57,22 @@ export const saveStatistics = (graph: string): void => {
length < 10 length < 10
? '0-10' ? '0-10'
: length < 25 : length < 25
? '10-25' ? '10-25'
: length < 50 : length < 50
? '25-50' ? '25-50'
: length < 100 : length < 100
? '50-100' ? '50-100'
: length < 200 : length < 200
? '100-200' ? '100-200'
: length < 500 : length < 500
? '200-500' ? '200-500'
: length < 700 : length < 700
? '500-700' ? '500-700'
: length < 1000 : length < 1000
? '700-1000' ? '700-1000'
: length < 1500 : length < 1500
? '1000-1500' ? '1000-1500'
: '1500+'; : '1500+';
logEvent('render', { graphType, length, lengthBucket }); logEvent('render', { graphType, length, lengthBucket });
}; };
src/routes/+layout.svelte
+2 -2
View File
@@ -47,8 +47,8 @@
{#if $loadingStateStore.loading} {#if $loadingStateStore.loading}
<div <div
class="w-screen h-screen z-50 absolute left-0 top-0 bg-gray-600 opacity-50 flex align-middle justify-center"> class="absolute left-0 top-0 z-50 flex h-screen w-screen justify-center bg-gray-600 align-middle opacity-50">
<div class="text-indigo-100 text-4xl font-bold my-auto"> <div class="my-auto text-4xl font-bold text-indigo-100">
<div class="loader mx-auto" /> <div class="loader mx-auto" />
<div>{$loadingStateStore.message}</div> <div>{$loadingStateStore.message}</div>
</div> </div>
src/routes/edit/+page.svelte
+8 -8
View File
@@ -111,14 +111,14 @@
}); });
</script> </script>
<div class="h-full flex flex-col overflow-hidden"> <div class="flex h-full flex-col overflow-hidden">
<Navbar /> <Navbar />
<div class="flex-1 flex overflow-hidden"> <div class="flex flex-1 overflow-hidden">
<div class="hidden md:flex flex-col" id="editorPane" style="width: 40%"> <div class="hidden flex-col md:flex" id="editorPane" style="width: 40%">
<Card on:select={tabSelectHandler} {tabs} isCloseable={false} {activeTabID} title="Mermaid"> <Card on:select={tabSelectHandler} {tabs} isCloseable={false} {activeTabID} title="Mermaid">
<div slot="actions" class="flex flex-row items-center"> <div slot="actions" class="flex flex-row items-center">
<div class="form-control flex-row items-center"> <div class="form-control flex-row items-center">
<label class="cursor-pointer label" for="autoSync"> <label class="label cursor-pointer" for="autoSync">
<span> Auto sync</span> <span> Auto sync</span>
<input <input
type="checkbox" type="checkbox"
@@ -155,10 +155,10 @@
</div> </div>
</div> </div>
<div id="resizeHandler" class="hidden md:block" /> <div id="resizeHandler" class="hidden md:block" />
<div class="flex-1 flex flex-col overflow-hidden"> <div class="flex flex-1 flex-col overflow-hidden">
<Card title="Diagram" isCloseable={false}> <Card title="Diagram" isCloseable={false}>
<div slot="actions" class="flex flex-row items-center gap-2"> <div slot="actions" class="flex flex-row items-center gap-2">
<label class="cursor-pointer label py-0" for="panZoom"> <label class="label cursor-pointer py-0" for="panZoom">
<span>Pan & Zoom</span> <span>Pan & Zoom</span>
<input <input
type="checkbox" type="checkbox"
@@ -176,7 +176,7 @@
target="_blank" target="_blank"
class="btn btn-secondary btn-xs gap-1 bg-[#FF3570]" class="btn btn-secondary btn-xs gap-1 bg-[#FF3570]"
title="Save diagram in Mermaid Chart" title="Save diagram in Mermaid Chart"
><img src="./mermaidchart-logo.svg" class="w-5 h-5" alt="Mermaid chart logo" />Save to ><img src="./mermaidchart-logo.svg" class="h-5 w-5" alt="Mermaid chart logo" />Save to
Mermaid Chart</a> Mermaid Chart</a>
</div> </div>
@@ -184,7 +184,7 @@
<View /> <View />
</div> </div>
</Card> </Card>
<div class="md:hidden rounded shadow p-2 mx-2"> <div class="mx-2 rounded p-2 shadow md:hidden">
Code editing not supported on mobile. Please use a desktop browser. Code editing not supported on mobile. Please use a desktop browser.
</div> </div>
</div> </div>
src/tests/setup.ts
+2 -4
View File
@@ -1,7 +1,5 @@
import matchers from '@testing-library/jest-dom/matchers'; import 'vitest-dom/extend-expect';
import { expect, beforeAll, vi } from 'vitest'; import { beforeAll, vi } from 'vitest';
expect.extend(matchers);
// TODO: Remove once https://github.com/sveltejs/kit/issues/6259 is closed. // TODO: Remove once https://github.com/sveltejs/kit/issues/6259 is closed.
beforeAll(() => { beforeAll(() => {
yarn.lock
+880 -835
View File
File diff suppressed because it is too large Load Diff