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",
"bracketSameLine": true,
"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",
"Pageview",
"pako",
"panzoom",
"pzoom",
"Serde",
"serdes",
"tailwindcss",
cypress/e2e/util.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export const typeInEditor = (
) => {
cy.window().should('have.property', 'editorLoaded', true);
cy.get('#editor').click();
cy.get('#editor').within(($editor) => {
cy.get('#editor').within(() => {
if (bottom) {
cy.get('textarea').type('{pageDown}', { force: true });
}
package.json
+26 -24
View File
@@ -23,15 +23,15 @@
},
"devDependencies": {
"@cypress/snapshot": "2.1.7",
"@sveltejs/adapter-static": "2.0.3",
"@sveltejs/kit": "1.28.0",
"@testing-library/jest-dom": "5.17.0",
"@testing-library/svelte": "3.2.2",
"@sveltejs/adapter-static": "3.0.1",
"@sveltejs/kit": "2.3.0",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@testing-library/svelte": "4.0.5",
"@types/pako": "2.0.3",
"@types/uuid": "9.0.7",
"@typescript-eslint/eslint-plugin": "5.62.0",
"@typescript-eslint/parser": "5.62.0",
"@vitest/ui": "^0.34.0",
"@typescript-eslint/eslint-plugin": "6.18.1",
"@typescript-eslint/parser": "6.18.1",
"@vitest/ui": "^1.1.3",
"autoprefixer": "^10.4.14",
"c8": "7.14.0",
"chai": "^4.3.7",
@@ -39,33 +39,35 @@
"cy-verify-downloads": "0.2.2",
"cypress": "12.17.4",
"cypress-localstorage-commands": "2.2.5",
"eslint": "8.55.0",
"eslint-config-prettier": "8.10.0",
"eslint": "8.56.0",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-cypress": "2.15.1",
"eslint-plugin-es": "4.1.0",
"eslint-plugin-no-only-tests": "^3.1.0",
"eslint-plugin-postcss-modules": "2.0.0",
"eslint-plugin-svelte3": "4.0.0",
"eslint-plugin-tailwindcss": "3.13.0",
"eslint-plugin-unicorn": "^46.0.0",
"eslint-plugin-vitest": "^0.3.0",
"eslint-plugin-tailwindcss": "3.13.1",
"eslint-plugin-unicorn": "^50.0.1",
"eslint-plugin-vitest": "^0.3.20",
"esserializer": "1.3.11",
"font-awesome": "^4.7.0",
"husky": "^8.0.3",
"jsdom": "21.1.2",
"lint-staged": "13.3.0",
"lint-staged": "15.2.0",
"node-html-parser": "^6.1.5",
"postcss": "^8.4.21",
"postcss-load-config": "4.0.2",
"prettier": "2.8.8",
"prettier-plugin-svelte": "^2.10.0",
"svelte": "3.59.2",
"svelte-preprocess": "5.1.1",
"tailwindcss": "^3.3.1",
"tslib": "^2.5.0",
"typescript": "5.3.2",
"vite": "^4.5.1",
"vitest": "^0.34.0"
"postcss": "^8.4.33",
"postcss-load-config": "5.0.2",
"prettier": "3.1.0",
"prettier-plugin-svelte": "^3.1.2",
"prettier-plugin-tailwindcss": "^0.5.11",
"svelte": "4.2.8",
"svelte-preprocess": "5.1.3",
"tailwindcss": "^3.4.1",
"tslib": "^2.6.2",
"typescript": "5.3.3",
"vite": "^5.0.11",
"vitest": "^1.1.3",
"vitest-dom": "^0.1.1"
},
"dependencies": {
"daisyui": "2.52.0",
src/app.html
+1 -1
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
src/app.postcss
+1 -1
View File
@@ -3,7 +3,7 @@
@tailwind utilities;
.input {
@apply flex-1 border-primary border-solid border-2 rounded;
@apply flex-1 rounded border-2 border-solid border-primary;
}
.action-btn {
@apply btn btn-primary;
src/lib/components/Actions.svelte
+6 -6
View File
@@ -185,7 +185,7 @@
</script>
<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()}
<button class="action-btn w-full" on:click={onCopyClipboard}
><i class="far fa-copy mr-2" /> Copy Image to clipboard
@@ -213,7 +213,7 @@
</button>
</a>
<div class="flex gap-2 items-center">
<div class="flex items-center gap-2">
PNG size
<label for="autosize">
<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto
@@ -238,7 +238,7 @@
{/if}
</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} />
<label for="markdown">
<button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
@@ -247,7 +247,7 @@
</label>
</div>
<div class="w-full flex gap-2 items-center">
<div class="flex w-full items-center gap-2">
<input
class="input"
id="gist"
@@ -259,8 +259,8 @@
</label>
</div>
{#if isNetlify}
<div class="w-full flex items-center justify-center">
<a class="link underline text-gray-500 text-sm" href="https://netlify.com">
<div class="flex w-full items-center justify-center">
<a class="link text-sm text-gray-500 underline" href="https://netlify.com">
This site is powered by Netlify
</a>
</div>
src/lib/components/Card/Card.svelte
+5 -3
View File
@@ -11,20 +11,22 @@
$: isTabsShown = isOpen && tabs.length > 0;
</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
role="toolbar"
tabindex="0"
class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer"
on:click={() => (isOpen = !isOpen)}
on:keypress={() => (isOpen = !isOpen)}>
<div class="flex justify-between">
<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" />
</div>
</div>
</div>
{#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 />
</div>
{/if}
src/lib/components/Card/Tabs.svelte
+4
View File
@@ -20,6 +20,8 @@
<div class="flex cursor-default">
<span
role="menubar"
tabindex="0"
class="mr-2 font-semibold"
on:click|stopPropagation={() => (isOpen = !isOpen)}
on:keypress|stopPropagation={() => (isOpen = !isOpen)}>
@@ -31,6 +33,8 @@
<ul class="tabs" transition:fade>
{#each tabs as tab}
<div
role="tab"
tabindex="0"
class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}"
on:click|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 = {
getWorker(_, label) {
if (label === 'json') {
src/lib/components/History/History.svelte
+11 -11
View File
@@ -57,13 +57,13 @@
input.type = 'file';
input.accept = 'application/json';
input.addEventListener('change', ({ target }: Event) => {
const file = (<HTMLInputElement>target).files[0];
const file = (target as HTMLInputElement)?.files?.[0];
if (!file) {
return;
}
const reader = new FileReader();
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);
};
reader.readAsText(file);
@@ -129,34 +129,34 @@
<div slot="actions">
<button
id="uploadHistory"
class="btn btn-xs btn-secondary w-12"
class="btn btn-secondary btn-xs w-12"
on:click|stopPropagation={() => uploadHistory()}
title="Upload history"><i class="fa fa-upload" /></button>
{#if $historyStore.length > 0}
<button
id="downloadHistory"
class="btn btn-xs btn-secondary w-12"
class="btn btn-secondary btn-xs w-12"
on:click|stopPropagation={() => downloadHistory()}
title="Download history"><i class="fa fa-download" /></button>
{/if}
|
<button
id="saveHistory"
class="btn btn-xs btn-success w-12"
class="btn btn-success btn-xs w-12"
on:click|stopPropagation={() => saveHistory()}
title="Save current state"><i class="far fa-save" /></button>
{#if $historyModeStore !== 'loader'}
<button
id="clearHistory"
class="btn btn-xs btn-error w-12"
class="btn btn-error btn-xs w-12"
on:click|stopPropagation={() => clearHistory()}
title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
{/if}
</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}
{#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-1">
<div class="flex flex-col text-base-content">
@@ -165,14 +165,14 @@
href={url}
target="_blank"
title="Open revision in new tab"
class="hover:underline text-blue-500">{name}</a>
class="text-blue-500 hover:underline">{name}</a>
{:else}
<span>{name}</span>
{/if}
<span class="text-gray-400 text-sm">{relativeTime(time)}</span>
<span class="text-sm text-gray-400">{relativeTime(time)}</span>
</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)}
><i class="fas fa-undo mr-1" />Restore</button>
{#if type !== 'loader'}
src/lib/components/Navbar.svelte
+13 -8
View File
@@ -62,8 +62,13 @@
{#if activePromotion}
<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">
<div class="flex flex-grow" on:click={trackBannerClick} on:keypress={trackBannerClick}>
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"
role="button"
tabindex="0"
on:click={trackBannerClick}
on:keypress={trackBannerClick}>
<svelte:component this={activePromotion.component} />
</div>
<button
@@ -77,8 +82,8 @@
</div>
{/if}
<div class="navbar shadow-lg bg-primary p-0">
<div class="flex-1 px-2 mx-2">
<div class="navbar bg-primary p-0 shadow-lg">
<div class="mx-2 flex-1 px-2">
<span class="text-lg font-bold">
<a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
</span>
@@ -86,7 +91,7 @@
<label
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
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -102,7 +107,7 @@
<!-- Cross SVG -->
<label
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
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -123,9 +128,9 @@
bind:checked={isMenuOpen}
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 />
<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 }}
<li>
<a class="btn btn-ghost" target="_blank" {href}>
src/lib/components/Preset.svelte
+3 -3
View File
@@ -153,14 +153,14 @@
</script>
<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}
<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)}>
{sample}
{#if newDiagrams.includes(sample)}
<span class="ml-2 fa fa-heart" />
<span class="fa fa-heart ml-2" />
{/if}
</button>
{/each}
src/lib/components/Theme.svelte
+7 -5
View File
@@ -26,14 +26,14 @@
];
</script>
<div class="hidden lg:block dropdown">
<div class="dropdown hidden lg:block">
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div tabindex="0" class="btn btn-ghost">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
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
stroke-linecap="round"
stroke-linejoin="round"
@@ -43,17 +43,19 @@
<svg
xmlns="http://www.w3.org/2000/svg"
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
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
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 -->
<ul tabindex="0" class="p-4 menu compact">
<ul tabindex="0" class="menu compact p-4">
{#each themes as theme}
<li class:bordered={$themeStore.theme !== undefined && theme.includes($themeStore.theme)}>
<span
role="menuitem"
tabindex="0"
class="btn btn-ghost justify-start"
on:click={() => setTheme(theme)}
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}
<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-yellow-600'} bg-base-100 bg-opacity-80 text-left"
id="errorContainer">
{#if error}
{@html $stateStore.error?.toString().replace(/\n/g, '<br />')}
{@html $stateStore.error?.toString().replaceAll('\n', '<br />')}
{:else}
Diagram out of sync. <br />
Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
@@ -140,7 +140,7 @@
</div>
{/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>
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');
}
gistHistory.reverse();
const entry = gistHistory.slice(-1).pop();
const entry = gistHistory.at(-1);
if (!entry) {
throw new Error('Invalid gist provided');
}
src/lib/util/persist.ts
+1 -1
View File
@@ -213,7 +213,7 @@ function getBrowserStorage(
disconnect();
}
},
getValue(key: string): any | null {
getValue(key: string): any {
const value = browserStorage.getItem(key);
return deserialize(value);
},
src/lib/util/promos/Holiday2023.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<a
href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023"
target="_blank"
class="tracking-wide flex-grow">
class="flex-grow tracking-wide">
Get AI, team collaboration, storage, and more with
<span class="font-bold underline">Mermaid Chart Pro. Start free trial today & get 25% off.</span>
</a>
src/lib/util/promos/Jan2024.svelte
+2 -2
View File
@@ -9,7 +9,7 @@
<a
href="https://www.mermaidchart.com/"
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)]}
<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>
src/lib/util/stats.ts
+1 -1
View File
@@ -35,7 +35,7 @@ export const detectType = (text: string): string | undefined => {
'mindmap'
];
const firstLine = text
.replace(/^\s*%%.*\n/g, '\n')
.replaceAll(/^\s*%%.*\n/g, '\n')
.trimStart()
.split(' ')[0]
.toLowerCase();
src/routes/+layout.svelte
+2 -2
View File
@@ -47,8 +47,8 @@
{#if $loadingStateStore.loading}
<div
class="w-screen h-screen z-50 absolute left-0 top-0 bg-gray-600 opacity-50 flex align-middle justify-center">
<div class="text-indigo-100 text-4xl font-bold my-auto">
class="absolute left-0 top-0 z-50 flex h-screen w-screen justify-center bg-gray-600 align-middle opacity-50">
<div class="my-auto text-4xl font-bold text-indigo-100">
<div class="loader mx-auto" />
<div>{$loadingStateStore.message}</div>
</div>
src/routes/edit/+page.svelte
+8 -8
View File
@@ -111,14 +111,14 @@
});
</script>
<div class="h-full flex flex-col overflow-hidden">
<div class="flex h-full flex-col overflow-hidden">
<Navbar />
<div class="flex-1 flex overflow-hidden">
<div class="hidden md:flex flex-col" id="editorPane" style="width: 40%">
<div class="flex flex-1 overflow-hidden">
<div class="hidden flex-col md:flex" id="editorPane" style="width: 40%">
<Card on:select={tabSelectHandler} {tabs} isCloseable={false} {activeTabID} title="Mermaid">
<div slot="actions" class="flex 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>
<input
type="checkbox"
@@ -155,10 +155,10 @@
</div>
</div>
<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}>
<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>
<input
type="checkbox"
@@ -176,7 +176,7 @@
target="_blank"
class="btn btn-secondary btn-xs gap-1 bg-[#FF3570]"
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>
</div>
@@ -184,7 +184,7 @@
<View />
</div>
</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.
</div>
</div>
src/tests/setup.ts
+2 -4
View File
@@ -1,7 +1,5 @@
import matchers from '@testing-library/jest-dom/matchers';
import { expect, beforeAll, vi } from 'vitest';
expect.extend(matchers);
import 'vitest-dom/extend-expect';
import { beforeAll, vi } from 'vitest';
// TODO: Remove once https://github.com/sveltejs/kit/issues/6259 is closed.
beforeAll(() => {
yarn.lock
+880 -835
View File
File diff suppressed because it is too large Load Diff