diff --git a/src/lib/components/Privacy.svelte b/src/lib/components/Privacy.svelte
index 3644076a..6567def9 100644
--- a/src/lib/components/Privacy.svelte
+++ b/src/lib/components/Privacy.svelte
@@ -1,31 +1,46 @@
-
+
+
diff --git a/src/lib/components/Share.svelte b/src/lib/components/Share.svelte
new file mode 100644
index 00000000..b0dddf5c
--- /dev/null
+++ b/src/lib/components/Share.svelte
@@ -0,0 +1,48 @@
+
+
+
diff --git a/src/lib/components/SyncRoughToolbar.svelte b/src/lib/components/SyncRoughToolbar.svelte
new file mode 100644
index 00000000..62b4be58
--- /dev/null
+++ b/src/lib/components/SyncRoughToolbar.svelte
@@ -0,0 +1,21 @@
+
+
+
diff --git a/src/lib/components/Theme.svelte b/src/lib/components/Theme.svelte
deleted file mode 100644
index f60c09ac..00000000
--- a/src/lib/components/Theme.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
diff --git a/src/lib/components/ThemeIcon.svelte b/src/lib/components/ThemeIcon.svelte
new file mode 100644
index 00000000..2a072a20
--- /dev/null
+++ b/src/lib/components/ThemeIcon.svelte
@@ -0,0 +1,39 @@
+
+
+
diff --git a/src/lib/components/VersionSecurityToolbar.svelte b/src/lib/components/VersionSecurityToolbar.svelte
new file mode 100644
index 00000000..14b319bf
--- /dev/null
+++ b/src/lib/components/VersionSecurityToolbar.svelte
@@ -0,0 +1,28 @@
+
+
+
diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte
index 0fb12dd7..e0702f64 100644
--- a/src/lib/components/View.svelte
+++ b/src/lib/components/View.svelte
@@ -1,56 +1,39 @@
-{#if outOfSync}
-
- Diagram out of sync. {cmdKey} + Enter to sync.
- {/if}
-
+
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 00000000..88920c9b
--- /dev/null
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,69 @@
+
+
+
+
+{#if href}
+
+ {@render children?.()}
+
+{:else}
+
+ {@render children?.()}
+
+{/if}
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 00000000..b79e44a8
--- /dev/null
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1,9 @@
+export {
+ default as Button,
+ buttonVariants,
+ default as Root,
+ type ButtonProps,
+ type ButtonSize,
+ type ButtonVariant,
+ type ButtonProps as Props
+} from './button.svelte';
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 00000000..b1de6663
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+ {@render children?.()}
+
+ Close
+
+
+
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 00000000..6d2b04fd
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,15 @@
+
+
+
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 00000000..88af15c0
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,19 @@
+
+
+
+ {@render children?.()}
+
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 00000000..0bc0d2ad
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,19 @@
+
+
+
+ {@render children?.()}
+
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 00000000..07932582
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,18 @@
+
+
+
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 00000000..5da14f94
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,15 @@
+
+
+
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 00000000..c3483281
--- /dev/null
+++ b/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,36 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Title from './dialog-title.svelte';
+
+const Root: typeof DialogPrimitive.Root = DialogPrimitive.Root;
+const Trigger: typeof DialogPrimitive.Trigger = DialogPrimitive.Trigger;
+const Close: typeof DialogPrimitive.Close = DialogPrimitive.Close;
+const Portal: typeof DialogPrimitive.Portal = DialogPrimitive.Portal;
+
+export {
+ Close,
+ Content,
+ Description,
+ //
+ Root as Dialog,
+ Close as DialogClose,
+ Content as DialogContent,
+ Description as DialogDescription,
+ Footer as DialogFooter,
+ Header as DialogHeader,
+ Overlay as DialogOverlay,
+ Portal as DialogPortal,
+ Title as DialogTitle,
+ Trigger as DialogTrigger,
+ Footer,
+ Header,
+ Overlay,
+ Portal,
+ Root,
+ Title,
+ Trigger
+};
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
new file mode 100644
index 00000000..be0783a3
--- /dev/null
+++ b/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from './input.svelte';
+
+export {
+ Root,
+ //
+ Root as Input
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
new file mode 100644
index 00000000..5d1c70e3
--- /dev/null
+++ b/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,43 @@
+
+
+{#if type === 'file'}
+
+{:else}
+
+{/if}
diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts
new file mode 100644
index 00000000..244795d8
--- /dev/null
+++ b/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+ Root,
+ Content,
+ Trigger,
+ Close,
+ //
+ Root as Popover,
+ Content as PopoverContent,
+ Trigger as PopoverTrigger,
+ Close as PopoverClose
+};
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 00000000..abe2949f
--- /dev/null
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,27 @@
+
+
+
+
diff --git a/src/lib/components/ui/resizable/index.ts b/src/lib/components/ui/resizable/index.ts
new file mode 100644
index 00000000..927c86d7
--- /dev/null
+++ b/src/lib/components/ui/resizable/index.ts
@@ -0,0 +1,13 @@
+import { Pane } from 'paneforge';
+import Handle from './resizable-handle.svelte';
+import PaneGroup from './resizable-pane-group.svelte';
+
+export {
+ PaneGroup,
+ Pane,
+ Handle,
+ //
+ PaneGroup as ResizablePaneGroup,
+ Pane as ResizablePane,
+ Handle as ResizableHandle
+};
diff --git a/src/lib/components/ui/resizable/resizable-handle.svelte b/src/lib/components/ui/resizable/resizable-handle.svelte
new file mode 100644
index 00000000..22755a57
--- /dev/null
+++ b/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -0,0 +1,29 @@
+
+
+
div]:rotate-90',
+ className
+ )}
+ {...restProps}>
+ {#if withHandle}
+
+
+ {/if}
+
diff --git a/src/lib/components/ui/resizable/resizable-pane-group.svelte b/src/lib/components/ui/resizable/resizable-pane-group.svelte
new file mode 100644
index 00000000..c798226b
--- /dev/null
+++ b/src/lib/components/ui/resizable/resizable-pane-group.svelte
@@ -0,0 +1,21 @@
+
+
+
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
new file mode 100644
index 00000000..2402e13e
--- /dev/null
+++ b/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from './separator.svelte';
+
+export {
+ Root,
+ //
+ Root as Separator
+};
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 00000000..a1590bf4
--- /dev/null
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,21 @@
+
+
+
diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 00000000..fcaf06bf
--- /dev/null
+++ b/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from './sonner.svelte';
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 00000000..06609dcb
--- /dev/null
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,20 @@
+
+
+
diff --git a/src/lib/components/ui/switch/index.ts b/src/lib/components/ui/switch/index.ts
new file mode 100644
index 00000000..7fdb93ac
--- /dev/null
+++ b/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from './switch.svelte';
+
+export {
+ Root,
+ //
+ Root as Switch
+};
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 00000000..158e1836
--- /dev/null
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,25 @@
+
+
+
+
diff --git a/src/lib/components/ui/toggle-group/index.ts b/src/lib/components/ui/toggle-group/index.ts
new file mode 100644
index 00000000..1ee4c602
--- /dev/null
+++ b/src/lib/components/ui/toggle-group/index.ts
@@ -0,0 +1,10 @@
+import Root from './toggle-group.svelte';
+import Item from './toggle-group-item.svelte';
+
+export {
+ Root,
+ Item,
+ //
+ Root as ToggleGroup,
+ Item as ToggleGroupItem
+};
diff --git a/src/lib/components/ui/toggle-group/toggle-group-item.svelte b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
new file mode 100644
index 00000000..087ccba3
--- /dev/null
+++ b/src/lib/components/ui/toggle-group/toggle-group-item.svelte
@@ -0,0 +1,29 @@
+
+
+
diff --git a/src/lib/components/ui/toggle-group/toggle-group.svelte b/src/lib/components/ui/toggle-group/toggle-group.svelte
new file mode 100644
index 00000000..027ba590
--- /dev/null
+++ b/src/lib/components/ui/toggle-group/toggle-group.svelte
@@ -0,0 +1,40 @@
+
+
+
+
+
+
diff --git a/src/lib/components/ui/toggle/index.ts b/src/lib/components/ui/toggle/index.ts
new file mode 100644
index 00000000..4a0d9d7e
--- /dev/null
+++ b/src/lib/components/ui/toggle/index.ts
@@ -0,0 +1,13 @@
+import Root from './toggle.svelte';
+export {
+ toggleVariants,
+ type ToggleSize,
+ type ToggleVariant,
+ type ToggleVariants
+} from './toggle.svelte';
+
+export {
+ Root,
+ //
+ Root as Toggle
+};
diff --git a/src/lib/components/ui/toggle/toggle.svelte b/src/lib/components/ui/toggle/toggle.svelte
new file mode 100644
index 00000000..6cc3e5a4
--- /dev/null
+++ b/src/lib/components/ui/toggle/toggle.svelte
@@ -0,0 +1,50 @@
+
+
+
+
+
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 00000000..eae8afaf
--- /dev/null
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,18 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
+
+export {
+ Content,
+ Provider,
+ Root,
+ //
+ Root as Tooltip,
+ Content as TooltipContent,
+ Provider as TooltipProvider,
+ Trigger as TooltipTrigger,
+ Trigger
+};
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 00000000..8402ed93
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,20 @@
+
+
+
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 00000000..85e0b108
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,8 @@
+export const TID = {
+ copyMarkdown: 'copy-markdown',
+ diagramDocumentationButton: 'diagram-documentation-button',
+ downloadPNG: 'download-PNG',
+ downloadSVG: 'download-SVG',
+ errorContainer: 'error-container',
+ themeToggleButton: 'theme-toggle-button'
+} as const;
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index 7092203d..8e49b1cc 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -1,3 +1,7 @@
+import type { Component } from 'svelte';
+import type { HTMLInputTypeAttribute } from 'svelte/elements';
+import 'unplugin-icons/types/svelte';
+
export interface MarkerData {
severity: number;
message: string;
@@ -15,17 +19,19 @@ export interface TabEvents {
export interface Tab {
id: string;
title: string;
- icon: string;
+ icon: Component;
}
export interface State {
code: string;
mermaid: string;
updateDiagram: boolean;
- autoSync: boolean;
rough: boolean;
- editorMode?: EditorMode;
+ // All new options must be optional, as users would have old states saved
+ renderCount?: number;
panZoom?: boolean;
+ grid?: boolean;
+ editorMode?: EditorMode;
pan?: { x: number; y: number };
zoom?: number;
loader?: LoaderConfig;
@@ -33,6 +39,7 @@ export interface State {
export interface ValidatedState extends State {
editorMode: EditorMode;
+ diagramType?: string;
error?: Error;
errorMarkers: MarkerData[];
serialized: string;
@@ -50,10 +57,15 @@ export interface FileLoaderConfig {
codeURL: string;
configURL?: string;
}
-export interface LoaderConfig {
- type: 'gist' | 'files';
- config: GistLoaderConfig | FileLoaderConfig;
-}
+export type LoaderConfig =
+ | {
+ type: 'gist';
+ config: GistLoaderConfig;
+ }
+ | {
+ type: 'files';
+ config: FileLoaderConfig;
+ };
export type HistoryType = 'auto' | 'manual' | 'loader';
export type HistoryEntry = { id: string; state: State; time: number; url?: string } & (
| {
@@ -87,3 +99,5 @@ export interface ErrorHash {
last_column: number;
};
}
+
+export type InputType = Exclude
;
diff --git a/src/lib/util/autoSync.ts b/src/lib/util/autoSync.ts
index 7b7faf06..ca5557e6 100644
--- a/src/lib/util/autoSync.ts
+++ b/src/lib/util/autoSync.ts
@@ -1,6 +1,4 @@
import debounce from 'lodash-es/debounce';
-import { get } from 'svelte/store';
-import { stateStore } from './state';
let shouldSync = true;
let updater: () => void;
@@ -16,10 +14,6 @@ const debouncedRender = debounce(() => {
export const recordRenderTime = (renderTimeMs: number, updaterFunction: () => void): void => {
resolveRenderPromise?.();
- const { autoSync } = get(stateStore);
- if (!autoSync) {
- return;
- }
updater = updaterFunction;
const isSlow = renderTimeMs > slowRenderThreshold;
if (!shouldSync) {
diff --git a/src/lib/util/env.ts b/src/lib/util/env.ts
index c9961211..28350049 100644
--- a/src/lib/util/env.ts
+++ b/src/lib/util/env.ts
@@ -1,7 +1,7 @@
export const env = {
- rendererUrl: import.meta.env.MERMAID_RENDERER_URL ?? '',
- krokiRendererUrl: import.meta.env.MERMAID_KROKI_RENDERER_URL ?? '',
analyticsUrl: import.meta.env.MERMAID_ANALYTICS_URL ?? '',
domain: import.meta.env.MERMAID_DOMAIN ?? '',
- isEnabledMermaidChartLinks: import.meta.env.MERMAID_IS_ENABLED_MERMAID_CHART_LINKS == 'true'
+ isEnabledMermaidChartLinks: import.meta.env.MERMAID_IS_ENABLED_MERMAID_CHART_LINKS === 'true',
+ krokiRendererUrl: import.meta.env.MERMAID_KROKI_RENDERER_URL ?? '',
+ rendererUrl: import.meta.env.MERMAID_RENDERER_URL ?? ''
} as const;
diff --git a/src/lib/util/fileLoaders/gist.ts b/src/lib/util/fileLoaders/gist.ts
index 8875e4b9..828a07e7 100644
--- a/src/lib/util/fileLoaders/gist.ts
+++ b/src/lib/util/fileLoaders/gist.ts
@@ -61,12 +61,12 @@ const getGistData = async (gistURL: string): Promise => {
}
const currentItem = history[0];
return {
- // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
- url: `${html_url}/${currentItem.version}`,
+ author: currentItem.user.login,
code,
config,
- author: currentItem.user.login,
time: new Date(currentItem.committed_at).getTime(),
+ // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+ url: `${html_url}/${currentItem.version}`,
version: currentItem.version.slice(-7)
};
} else {
@@ -79,10 +79,10 @@ const getStateFromGist = (gist: GistData, gistURL: string = gist.url): State =>
...defaultState,
code: gist.code,
loader: {
- type: 'gist',
config: {
url: gistURL
- }
+ },
+ type: 'gist'
}
};
gist.config && (state.mermaid = gist.config);
@@ -120,11 +120,11 @@ export const loadGistData = async (gistURL: string): Promise => {
const state = getStateFromGist(entry, gistURL);
for (const gist of gistHistory) {
addHistoryEntry({
+ name: `${gist.author} v${gist.version}`,
state: getStateFromGist(gist),
time: gist.time,
type: 'loader',
- url: gist.url,
- name: `${gist.author} v${gist.version}`
+ url: gist.url
});
}
return state;
diff --git a/src/lib/util/fileLoaders/loader.ts b/src/lib/util/fileLoaders/loader.ts
index ce2ea348..137b26c9 100644
--- a/src/lib/util/fileLoaders/loader.ts
+++ b/src/lib/util/fileLoaders/loader.ts
@@ -1,7 +1,7 @@
-import { loadGistData } from './gist';
-import { updateCodeStore, defaultState } from '$lib/util/state';
-import { fetchText } from '$lib/util/util';
import type { Loader, State } from '$lib/types';
+import { defaultState, updateCodeStore } from '$lib/util/state';
+import { fetchText } from '$lib/util/util';
+import { loadGistData } from './gist';
const loaders: Record = {
gist: loadGistData
@@ -27,14 +27,14 @@ export const loadDataFromUrl = async (): Promise => {
}
state = {
code,
- mermaid: config,
loader: {
- type: 'files',
config: {
codeURL,
configURL
- }
- }
+ },
+ type: 'files'
+ },
+ mermaid: config
};
} else {
for (const [key, value] of searchParams.entries()) {
@@ -52,7 +52,6 @@ export const loadDataFromUrl = async (): Promise => {
loaded &&
updateCodeStore({
...state,
- autoSync: true,
updateDiagram: true
});
};
diff --git a/src/lib/util/mermaid.ts b/src/lib/util/mermaid.ts
index c4a5c6c5..12693c10 100644
--- a/src/lib/util/mermaid.ts
+++ b/src/lib/util/mermaid.ts
@@ -18,6 +18,24 @@ export const render = async (
return await mermaid.render(id, code);
};
-export const parse = async (code: string): Promise => {
+export const parse = async (code: string) => {
return await mermaid.parse(code);
};
+
+export const standardizeDiagramType = (diagramType: string) => {
+ switch (diagramType) {
+ case 'class':
+ case 'classDiagram': {
+ return 'classDiagram';
+ }
+ case 'graph':
+ case 'flowchart':
+ case 'flowchart-elk':
+ case 'flowchart-v2': {
+ return 'flowchart';
+ }
+ default: {
+ return diagramType;
+ }
+ }
+};
diff --git a/src/lib/util/monacoExtra.ts b/src/lib/util/monacoExtra.ts
index a0b4db76..e54d1777 100644
--- a/src/lib/util/monacoExtra.ts
+++ b/src/lib/util/monacoExtra.ts
@@ -20,139 +20,7 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
keywords: string[];
}
> = {
- flowchart: {
- typeKeywords: ['flowchart', 'flowchart-v2', 'graph'],
- blockKeywords: ['subgraph', 'end'],
- keywords: [
- 'TB',
- 'TD',
- 'BT',
- 'RL',
- 'LR',
- 'click',
- 'call',
- 'href',
- '_self',
- '_blank',
- '_parent',
- '_top',
- 'linkStyle',
- 'style',
- 'classDef',
- 'class',
- 'direction',
- 'interpolate'
- ]
- },
- sequenceDiagram: {
- typeKeywords: ['sequenceDiagram'],
- blockKeywords: ['alt', 'par', 'and', 'loop', 'else', 'end', 'rect', 'opt', 'alt', 'rect'],
- keywords: [
- 'participant',
- 'as',
- 'Note',
- 'note',
- 'right of',
- 'left of',
- 'over',
- 'activate',
- 'deactivate',
- 'autonumber',
- 'title',
- 'actor',
- 'accDescription',
- 'link',
- 'links'
- ]
- },
- classDiagram: {
- typeKeywords: ['classDiagram', 'classDiagram-v2'],
- blockKeywords: ['class'],
- keywords: [
- 'link',
- 'click',
- 'callback',
- 'call',
- 'href',
- 'cssClass',
- 'direction',
- 'TB',
- 'BT',
- 'RL',
- 'LR',
- 'title',
- 'accDescription',
- 'order'
- ]
- },
- stateDiagram: {
- typeKeywords: ['stateDiagram', 'stateDiagram-v2'],
- blockKeywords: ['state', 'note', 'end'],
- keywords: ['state', 'as', 'hide empty description', 'direction', 'TB', 'BT', 'RL', 'LR']
- },
- erDiagram: {
- typeKeywords: ['erDiagram'],
- blockKeywords: [],
- keywords: ['title', 'accDescription']
- },
- journey: {
- typeKeywords: ['journey'],
- blockKeywords: ['section'],
- keywords: ['title']
- },
- info: {
- typeKeywords: ['info'],
- blockKeywords: [],
- keywords: ['showInfo']
- },
- gantt: {
- typeKeywords: ['gantt'],
- blockKeywords: [],
- keywords: [
- 'title',
- 'dateFormat',
- 'axisFormat',
- 'todayMarker',
- 'section',
- 'excludes',
- 'inclusiveEndDates'
- ]
- },
- requirementDiagram: {
- typeKeywords: ['requirement', 'requirementDiagram'],
- blockKeywords: [...requirementDiagrams, 'element'],
- keywords: []
- },
- gitGraph: {
- typeKeywords: ['gitGraph'],
- blockKeywords: [],
- keywords: [
- 'accTitle',
- 'accDescr',
- 'commit',
- 'cherry-pick',
- 'branch',
- 'merge',
- 'reset',
- 'checkout',
- 'LR',
- 'BT',
- 'id',
- 'msg',
- 'type',
- 'tag',
- 'NORMAL',
- 'REVERSE',
- 'HIGHLIGHT'
- ]
- },
- pie: {
- typeKeywords: ['pie'],
- blockKeywords: [],
- keywords: ['showData', 'title', 'accDescr', 'accTitle']
- },
c4Diagram: {
- typeKeywords: ['C4Context', 'C4Container', 'C4Component', 'C4Dynamic', 'C4Deployment'],
blockKeywords: [
'Boundary',
'Enterprise_Boundary',
@@ -203,21 +71,153 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
'Rel_R',
'Rel_Back',
'RelIndex'
- ]
+ ],
+ typeKeywords: ['C4Context', 'C4Container', 'C4Component', 'C4Dynamic', 'C4Deployment']
+ },
+ classDiagram: {
+ blockKeywords: ['class'],
+ keywords: [
+ 'link',
+ 'click',
+ 'callback',
+ 'call',
+ 'href',
+ 'cssClass',
+ 'direction',
+ 'TB',
+ 'BT',
+ 'RL',
+ 'LR',
+ 'title',
+ 'accDescription',
+ 'order'
+ ],
+ typeKeywords: ['classDiagram', 'classDiagram-v2']
+ },
+ erDiagram: {
+ blockKeywords: [],
+ keywords: ['title', 'accDescription'],
+ typeKeywords: ['erDiagram']
+ },
+ flowchart: {
+ blockKeywords: ['subgraph', 'end'],
+ keywords: [
+ 'TB',
+ 'TD',
+ 'BT',
+ 'RL',
+ 'LR',
+ 'click',
+ 'call',
+ 'href',
+ '_self',
+ '_blank',
+ '_parent',
+ '_top',
+ 'linkStyle',
+ 'style',
+ 'classDef',
+ 'class',
+ 'direction',
+ 'interpolate'
+ ],
+ typeKeywords: ['flowchart', 'flowchart-v2', 'graph']
+ },
+ gantt: {
+ blockKeywords: [],
+ keywords: [
+ 'title',
+ 'dateFormat',
+ 'axisFormat',
+ 'todayMarker',
+ 'section',
+ 'excludes',
+ 'inclusiveEndDates'
+ ],
+ typeKeywords: ['gantt']
+ },
+ gitGraph: {
+ blockKeywords: [],
+ keywords: [
+ 'accTitle',
+ 'accDescr',
+ 'commit',
+ 'cherry-pick',
+ 'branch',
+ 'merge',
+ 'reset',
+ 'checkout',
+ 'LR',
+ 'BT',
+ 'id',
+ 'msg',
+ 'type',
+ 'tag',
+ 'NORMAL',
+ 'REVERSE',
+ 'HIGHLIGHT'
+ ],
+ typeKeywords: ['gitGraph']
+ },
+ info: {
+ blockKeywords: [],
+ keywords: ['showInfo'],
+ typeKeywords: ['info']
+ },
+ journey: {
+ blockKeywords: ['section'],
+ keywords: ['title'],
+ typeKeywords: ['journey']
+ },
+ pie: {
+ blockKeywords: [],
+ keywords: ['showData', 'title', 'accDescr', 'accTitle'],
+ typeKeywords: ['pie']
+ },
+ requirementDiagram: {
+ blockKeywords: [...requirementDiagrams, 'element'],
+ keywords: [],
+ typeKeywords: ['requirement', 'requirementDiagram']
},
sankey: {
- typeKeywords: ['sankey-beta'],
blockKeywords: [],
- keywords: []
+ keywords: [],
+ typeKeywords: ['sankey-beta']
+ },
+ sequenceDiagram: {
+ blockKeywords: ['alt', 'par', 'and', 'loop', 'else', 'end', 'rect', 'opt', 'alt', 'rect'],
+ keywords: [
+ 'participant',
+ 'as',
+ 'Note',
+ 'note',
+ 'right of',
+ 'left of',
+ 'over',
+ 'activate',
+ 'deactivate',
+ 'autonumber',
+ 'title',
+ 'actor',
+ 'accDescription',
+ 'link',
+ 'links'
+ ],
+ typeKeywords: ['sequenceDiagram']
+ },
+ stateDiagram: {
+ blockKeywords: ['state', 'note', 'end'],
+ keywords: ['state', 'as', 'hide empty description', 'direction', 'TB', 'BT', 'RL', 'LR'],
+ typeKeywords: ['stateDiagram', 'stateDiagram-v2']
}
};
const configDirectiveHandler = [
/^\s*%%(?={)/,
{
- token: 'string',
next: '@configDirective',
- nextEmbedded: 'javascript'
+ nextEmbedded: 'javascript',
+ token: 'string'
}
] as Monaco.languages.IShortMonarchLanguageRule1;
@@ -241,157 +241,26 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
{}
),
tokenizer: {
- root: [
- [/^\s*gitGraph/m, 'typeKeyword', 'gitGraph'],
- [/^\s*info/m, 'typeKeyword', 'info'],
- [/^\s*pie/m, 'typeKeyword', 'pie'],
- [/^\s*(flowchart|flowchart-v2|graph)/m, 'typeKeyword', 'flowchart'],
- [/^\s*sequenceDiagram/, 'typeKeyword', 'sequenceDiagram'],
- [/^\s*classDiagram(-v2)?/, 'typeKeyword', 'classDiagram'],
- [/^\s*journey/, 'typeKeyword', 'journey'],
- [/^\s*gantt/, 'typeKeyword', 'gantt'],
- [/^\s*stateDiagram(-v2)?/, 'typeKeyword', 'stateDiagram'],
- [/^\s*er(Diagram)?/, 'typeKeyword', 'erDiagram'],
- [/^\s*requirement(Diagram)?/, 'typeKeyword', 'requirementDiagram'],
- [/^\s*sankey-beta/m, 'typeKeyword', 'sankey'],
- [
- /^\s*(C4Context|C4Container|C4Component|C4Dynamic|C4Deployment)/m,
- 'typeKeyword',
- 'c4Diagram'
- ],
- configDirectiveHandler,
- [/%%[^${].*$/, 'comment']
- ],
- configDirective: [[/%%$/, { token: 'string', next: '@pop', nextEmbedded: '@pop' }]],
- gitGraph: [
- configDirectiveHandler,
- [/option(?=s)/, { token: 'typeKeyword', next: 'optionsGitGraph' }],
- [/(accTitle|accDescr)(\s*:)(\s*[^\n\r]+$)/, ['keyword', 'delimiter.bracket', 'string']],
- [
- /(^\s*branch)(.*?)(\s+order)(:\s*)(\d+\s*$)/,
- ['keyword', 'variable', 'keyword', 'delimiter.bracket', 'number']
- ],
- [/".*?"/, 'string'],
- [
- /(^\s*)(branch|reset|merge|checkout)(\s*\S+)/m,
- ['delimiter.bracket', 'keyword', 'variable']
- ],
- [
- /[A-Za-z][\w$]*/,
- {
- cases: {
- '@gitGraphBlockKeywords': 'typeKeyword',
- '@gitGraphKeywords': 'keyword'
- }
- }
- ],
- [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
- [/\^/, 'delimiter.bracket']
- ],
- optionsGitGraph: [
- [
- /s$/,
- {
- token: 'typeKeyword',
- nextEmbedded: 'json'
- }
- ],
- ['end', { token: 'typeKeyword', next: '@pop', nextEmbedded: '@pop' }]
- ],
- info: [
- [
- /[A-Za-z][\w$]*/,
- {
- cases: {
- '@infoBlockKeywords': 'typeKeyword',
- '@infoKeywords': 'keyword'
- }
- }
- ]
- ],
- pie: [
+ c4Diagram: [
configDirectiveHandler,
[/(title|accDescription)(.*$)/, ['keyword', 'string']],
+ [/\(/, { next: 'c4DiagramParenthesis', token: 'delimiter.bracket' }],
[
- /[A-Za-z][\w$]*/,
+ /[A-Z_a-z-][\w$]*/,
{
cases: {
- '@pieBlockKeywords': 'typeKeyword',
- '@pieKeywords': 'keyword'
- }
- }
- ],
- [/".*?"/, 'string'],
- [/\s*\d+/, 'number'],
- [/:/, 'delimiter.bracket'],
- [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
- ],
- flowchart: [
- configDirectiveHandler,
- [/[ox]?(--+|==+)[ox]/, 'transition'],
- [
- /[A-Za-z][\w$]*/,
- {
- cases: {
- '@flowchartBlockKeywords': 'typeKeyword',
- '@flowchartKeywords': 'keyword',
+ '@c4DiagramBlockKeywords': 'typeKeyword',
+ '@c4DiagramKeywords': 'keyword',
'@default': 'variable'
}
}
],
- [/\|+.+?\|+/, 'string'],
- [/\[+(\\.+?[/\\]|\/.+?[/\\])]+/, 'string'],
- [/[>[]+[^[\]|]+?]+/, 'string'],
- [/{+.+?}+/, 'string'],
- [/\(+.+?\)+/, 'string'],
- [/-\.+->?/, 'transition'],
- [/(-[.-])([^>-][^-]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']],
- [/(==+)([^=]+?)(={3,}|={2,}>)/, ['transition', 'string', 'transition']],
- [/|===+|---+/, 'transition'],
- [/:::/, 'transition'],
- [/[&;]/, 'delimiter.bracket'],
- [/".*?"/, 'string'],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
],
- sequenceDiagram: [
- configDirectiveHandler,
- [/(title:?|accDescription)([^\n\r;]*$)/, ['keyword', 'string']],
- [/(autonumber)([^\S\n\r]+off[^\S\n\r]*$)/, ['keyword', 'keyword']],
- [/(autonumber)((?:[^\S\n\r]+\d+){2}[^\S\n\r]*$)/, ['keyword', 'number']],
- [/(autonumber)([^\S\n\r]+\d+[^\S\n\r]*$)/, ['keyword', 'number']],
- [
- /(link\s+)(.*?)(:)(\s*.*?)(\s*@)(\s*[^\n\r;]+)/,
- ['keyword', 'variable', 'delimiter.bracket', 'string', 'delimiter.bracket', 'string']
- ],
- [
- /((?:links|properties)\s+)([^\n\r:]*?)(:\s+)/,
- [
- { token: 'keyword' },
- { token: 'variable' },
- {
- token: 'delimiter.bracket',
- nextEmbedded: 'javascript',
- next: '@sequenceDiagramLinksProps'
- }
- ]
- ],
- [
- /[A-Za-z][\w$]*/,
- {
- cases: {
- '@sequenceDiagramBlockKeywords': 'typeKeyword',
- '@sequenceDiagramKeywords': 'keyword',
- '@default': 'variable'
- }
- }
- ],
- [/(--?>?>|--?[)x])[+-]?/, 'transition'],
- [/(:)([^\n:]*?$)/, ['delimiter.bracket', 'string']],
- [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
- ],
- sequenceDiagramLinksProps: [
- // [/^:/, { token: 'delimiter.bracket', nextEmbedded: 'json' }],
- [/$|;/, { nextEmbedded: '@pop', next: '@pop', token: 'delimiter.bracket' }]
+ c4DiagramParenthesis: [
+ [/,/, 'delimiter.bracket'],
+ [/\)/, { next: '@pop', token: 'delimiter.bracket' }],
+ [/[^),]/, 'string']
],
classDiagram: [
configDirectiveHandler,
@@ -419,33 +288,43 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
[/:::/, 'transition'],
[/:|\+|-|#|~|\*\s*$|\$\s*$|\(|\)|{|}/, 'delimiter.bracket']
],
- journey: [
+ configDirective: [[/%%$/, { next: '@pop', nextEmbedded: '@pop', token: 'string' }]],
+ erDiagram: [
configDirectiveHandler,
- [/(title)(.*)/, ['keyword', 'string']],
- [/(section)(.*)/, ['typeKeyword', 'string']],
+ [/(title|accDescription)(.*$)/, ['keyword', 'string']],
+ [/[|}][o|](--|\.\.)[o|][{|]/, 'transition'],
+ [/".*?"/, 'string'],
+ [/(:)(.*?$)/, ['delimiter.bracket', 'string']],
+ [/[:{}]/, 'delimiter.bracket'],
+ [/([A-Za-z]+)(\s+[A-Za-z]+)/, ['type', 'variable']],
+ [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+ [/[A-Z_a-z-][\w$]*/, 'variable']
+ ],
+ flowchart: [
+ configDirectiveHandler,
+ [/[ox]?(--+|==+)[ox]/, 'transition'],
[
/[A-Za-z][\w$]*/,
{
cases: {
- '@journeyBlockKeywords': 'typeKeyword',
- '@journeyKeywords': 'keyword',
- '@default': 'variable'
+ '@default': 'variable',
+ '@flowchartBlockKeywords': 'typeKeyword',
+ '@flowchartKeywords': 'keyword'
}
}
],
- [
- /(^\s*.+?)(:)(.*?)(:)(.*?)([$,])/,
- [
- 'string',
- 'delimiter.bracket',
- 'number',
- 'delimiter.bracket',
- 'variable',
- 'delimiter.bracket'
- ]
- ],
- [/,/, 'delimiter.bracket'],
- [/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', 'variable']],
+ [/\|+.+?\|+/, 'string'],
+ [/\[+(\\.+?[/\\]|\/.+?[/\\])]+/, 'string'],
+ [/[>[]+[^[\]|]+?]+/, 'string'],
+ [/{+.+?}+/, 'string'],
+ [/\(+.+?\)+/, 'string'],
+ [/-\.+->?/, 'transition'],
+ [/(-[.-])([^>-][^-]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']],
+ [/(==+)([^=]+?)(={3,}|={2,}>)/, ['transition', 'string', 'transition']],
+ [/|===+|---+/, 'transition'],
+ [/:::/, 'transition'],
+ [/[&;]/, 'delimiter.bracket'],
+ [/".*?"/, 'string'],
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
],
gantt: [
@@ -465,9 +344,189 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
[/:/, 'delimiter.bracket']
],
+ gitGraph: [
+ configDirectiveHandler,
+ [/option(?=s)/, { next: 'optionsGitGraph', token: 'typeKeyword' }],
+ [/(accTitle|accDescr)(\s*:)(\s*[^\n\r]+$)/, ['keyword', 'delimiter.bracket', 'string']],
+ [
+ /(^\s*branch)(.*?)(\s+order)(:\s*)(\d+\s*$)/,
+ ['keyword', 'variable', 'keyword', 'delimiter.bracket', 'number']
+ ],
+ [/".*?"/, 'string'],
+ [
+ /(^\s*)(branch|reset|merge|checkout)(\s*\S+)/m,
+ ['delimiter.bracket', 'keyword', 'variable']
+ ],
+ [
+ /[A-Za-z][\w$]*/,
+ {
+ cases: {
+ '@gitGraphBlockKeywords': 'typeKeyword',
+ '@gitGraphKeywords': 'keyword'
+ }
+ }
+ ],
+ [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+ [/\^/, 'delimiter.bracket']
+ ],
+ info: [
+ [
+ /[A-Za-z][\w$]*/,
+ {
+ cases: {
+ '@infoBlockKeywords': 'typeKeyword',
+ '@infoKeywords': 'keyword'
+ }
+ }
+ ]
+ ],
+ journey: [
+ configDirectiveHandler,
+ [/(title)(.*)/, ['keyword', 'string']],
+ [/(section)(.*)/, ['typeKeyword', 'string']],
+ [
+ /[A-Za-z][\w$]*/,
+ {
+ cases: {
+ '@default': 'variable',
+ '@journeyBlockKeywords': 'typeKeyword',
+ '@journeyKeywords': 'keyword'
+ }
+ }
+ ],
+ [
+ /(^\s*.+?)(:)(.*?)(:)(.*?)([$,])/,
+ [
+ 'string',
+ 'delimiter.bracket',
+ 'number',
+ 'delimiter.bracket',
+ 'variable',
+ 'delimiter.bracket'
+ ]
+ ],
+ [/,/, 'delimiter.bracket'],
+ [/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', 'variable']],
+ [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+ ],
+ optionsGitGraph: [
+ [
+ /s$/,
+ {
+ nextEmbedded: 'json',
+ token: 'typeKeyword'
+ }
+ ],
+ ['end', { next: '@pop', nextEmbedded: '@pop', token: 'typeKeyword' }]
+ ],
+ pie: [
+ configDirectiveHandler,
+ [/(title|accDescription)(.*$)/, ['keyword', 'string']],
+ [
+ /[A-Za-z][\w$]*/,
+ {
+ cases: {
+ '@pieBlockKeywords': 'typeKeyword',
+ '@pieKeywords': 'keyword'
+ }
+ }
+ ],
+ [/".*?"/, 'string'],
+ [/\s*\d+/, 'number'],
+ [/:/, 'delimiter.bracket'],
+ [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+ ],
+ requirementDiagram: [
+ configDirectiveHandler,
+ [/->|<-|-/, 'transition'],
+ [/(\d+\.)*\d+/, 'number'],
+ [
+ /[A-Z_a-z-][\w$]*/,
+ {
+ cases: {
+ '@default': 'variable',
+ '@requirementDiagramBlockKeywords': 'typeKeyword'
+ }
+ }
+ ],
+ [/[/:{}]/, 'delimiter.bracket'],
+ [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
+ [/".*?"/, 'string']
+ ],
+ root: [
+ [/^\s*gitGraph/m, 'typeKeyword', 'gitGraph'],
+ [/^\s*info/m, 'typeKeyword', 'info'],
+ [/^\s*pie/m, 'typeKeyword', 'pie'],
+ [/^\s*(flowchart|flowchart-v2|graph)/m, 'typeKeyword', 'flowchart'],
+ [/^\s*sequenceDiagram/, 'typeKeyword', 'sequenceDiagram'],
+ [/^\s*classDiagram(-v2)?/, 'typeKeyword', 'classDiagram'],
+ [/^\s*journey/, 'typeKeyword', 'journey'],
+ [/^\s*gantt/, 'typeKeyword', 'gantt'],
+ [/^\s*stateDiagram(-v2)?/, 'typeKeyword', 'stateDiagram'],
+ [/^\s*er(Diagram)?/, 'typeKeyword', 'erDiagram'],
+ [/^\s*requirement(Diagram)?/, 'typeKeyword', 'requirementDiagram'],
+ [/^\s*sankey-beta/m, 'typeKeyword', 'sankey'],
+ [
+ /^\s*(C4Context|C4Container|C4Component|C4Dynamic|C4Deployment)/m,
+ 'typeKeyword',
+ 'c4Diagram'
+ ],
+ configDirectiveHandler,
+ [/%%[^${].*$/, 'comment']
+ ],
+ sankey: [
+ configDirectiveHandler,
+ [/(title)(.*)/, ['keyword', 'string']],
+ [/(accTitle|accDescr)(\s*:)(\s*[^\n\r]+$)/, ['keyword', 'delimiter.bracket', 'string']],
+ [/".*?"/, 'string'],
+ [/[A-Za-z]+/, 'string'],
+ [/\s*\d+/, 'number'],
+ [/,/, 'delimiter.bracket'],
+ [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+ ],
+ sequenceDiagram: [
+ configDirectiveHandler,
+ [/(title:?|accDescription)([^\n\r;]*$)/, ['keyword', 'string']],
+ [/(autonumber)([^\S\n\r]+off[^\S\n\r]*$)/, ['keyword', 'keyword']],
+ [/(autonumber)((?:[^\S\n\r]+\d+){2}[^\S\n\r]*$)/, ['keyword', 'number']],
+ [/(autonumber)([^\S\n\r]+\d+[^\S\n\r]*$)/, ['keyword', 'number']],
+ [
+ /(link\s+)(.*?)(:)(\s*.*?)(\s*@)(\s*[^\n\r;]+)/,
+ ['keyword', 'variable', 'delimiter.bracket', 'string', 'delimiter.bracket', 'string']
+ ],
+ [
+ /((?:links|properties)\s+)([^\n\r:]*?)(:\s+)/,
+ [
+ { token: 'keyword' },
+ { token: 'variable' },
+ {
+ next: '@sequenceDiagramLinksProps',
+ nextEmbedded: 'javascript',
+ token: 'delimiter.bracket'
+ }
+ ]
+ ],
+ [
+ /[A-Za-z][\w$]*/,
+ {
+ cases: {
+ '@default': 'variable',
+ '@sequenceDiagramBlockKeywords': 'typeKeyword',
+ '@sequenceDiagramKeywords': 'keyword'
+ }
+ }
+ ],
+ [/(--?>?>|--?[)x])[+-]?/, 'transition'],
+ [/(:)([^\n:]*?$)/, ['delimiter.bracket', 'string']],
+ [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
+ ],
+ sequenceDiagramLinksProps: [
+ // [/^:/, { token: 'delimiter.bracket', nextEmbedded: 'json' }],
+ [/$|;/, { next: '@pop', nextEmbedded: '@pop', token: 'delimiter.bracket' }]
+ ],
stateDiagram: [
configDirectiveHandler,
- [/note[^:]*$/, { token: 'typeKeyword', next: 'stateDiagramNote' }],
+ [/note[^:]*$/, { next: 'stateDiagramNote', token: 'typeKeyword' }],
['hide empty description', 'keyword'],
[/^\s*state\s(?!.*{)/, 'keyword'],
[/(<<)(fork|join|choice)(>>)/, 'annotation'],
@@ -476,9 +535,9 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
/[A-Za-z][\w$]*/,
{
cases: {
+ '@default': 'variable',
'@stateDiagramBlockKeywords': 'typeKeyword',
- '@stateDiagramKeywords': 'keyword',
- '@default': 'variable'
+ '@stateDiagramKeywords': 'keyword'
}
}
],
@@ -490,99 +549,40 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
[/\[.*?]/, 'string']
],
stateDiagramNote: [
- [/^\s*end note$/, { token: 'typeKeyword', next: '@pop' }],
+ [/^\s*end note$/, { next: '@pop', token: 'typeKeyword' }],
[/.*/, 'string']
- ],
- erDiagram: [
- configDirectiveHandler,
- [/(title|accDescription)(.*$)/, ['keyword', 'string']],
- [/[|}][o|](--|\.\.)[o|][{|]/, 'transition'],
- [/".*?"/, 'string'],
- [/(:)(.*?$)/, ['delimiter.bracket', 'string']],
- [/[:{}]/, 'delimiter.bracket'],
- [/([A-Za-z]+)(\s+[A-Za-z]+)/, ['type', 'variable']],
- [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
- [/[A-Z_a-z-][\w$]*/, 'variable']
- ],
- requirementDiagram: [
- configDirectiveHandler,
- [/->|<-|-/, 'transition'],
- [/(\d+\.)*\d+/, 'number'],
- [
- /[A-Z_a-z-][\w$]*/,
- {
- cases: {
- '@requirementDiagramBlockKeywords': 'typeKeyword',
- '@default': 'variable'
- }
- }
- ],
- [/[/:{}]/, 'delimiter.bracket'],
- [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
- [/".*?"/, 'string']
- ],
- c4Diagram: [
- configDirectiveHandler,
- [/(title|accDescription)(.*$)/, ['keyword', 'string']],
- [/\(/, { token: 'delimiter.bracket', next: 'c4DiagramParenthesis' }],
- [
- /[A-Z_a-z-][\w$]*/,
- {
- cases: {
- '@c4DiagramBlockKeywords': 'typeKeyword',
- '@c4DiagramKeywords': 'keyword',
- '@default': 'variable'
- }
- }
- ],
- [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
- ],
- c4DiagramParenthesis: [
- [/,/, 'delimiter.bracket'],
- [/\)/, { next: '@pop', token: 'delimiter.bracket' }],
- [/[^),]/, 'string']
- ],
- sankey: [
- configDirectiveHandler,
- [/(title)(.*)/, ['keyword', 'string']],
- [/(accTitle|accDescr)(\s*:)(\s*[^\n\r]+$)/, ['keyword', 'delimiter.bracket', 'string']],
- [/".*?"/, 'string'],
- [/[A-Za-z]+/, 'string'],
- [/\s*\d+/, 'number'],
- [/,/, 'delimiter.bracket'],
- [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
]
}
});
monacoEditor.editor.defineTheme('mermaid-dark', {
base: 'vs-dark',
- inherit: true,
colors: {},
+ inherit: true,
rules: [
- { token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
- { token: 'transition', foreground: '008800', fontStyle: 'bold' },
- { token: 'identifier', foreground: '9cdcfe' }
+ { fontStyle: 'bold', foreground: '9650c8', token: 'typeKeyword' },
+ { fontStyle: 'bold', foreground: '008800', token: 'transition' },
+ { foreground: '9cdcfe', token: 'identifier' }
]
});
monacoEditor.editor.defineTheme('mermaid', {
base: 'vs',
- inherit: true,
colors: {},
+ inherit: true,
rules: [
- { token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
- { token: 'keyword', foreground: '649696' },
- { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
- { token: 'string', foreground: 'AA8500' },
- { token: 'transition', foreground: '008800', fontStyle: 'bold' },
- { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' },
- { token: 'annotation', foreground: '4b4b96' },
- { token: 'number', foreground: '4b4b96' },
- { token: 'comment', foreground: '888c89' },
- { token: 'variable', foreground: 'A22889' },
- { token: 'type', foreground: '2BDEA8' },
- { token: 'identifier', foreground: '9cdcfe' }
+ { fontStyle: 'bold', foreground: '9650c8', token: 'typeKeyword' },
+ { foreground: '649696', token: 'keyword' },
+ { fontStyle: 'bold', foreground: 'ff0000', token: 'custom-error' },
+ { foreground: 'AA8500', token: 'string' },
+ { fontStyle: 'bold', foreground: '008800', token: 'transition' },
+ { fontStyle: 'bold', foreground: '000000', token: 'delimiter.bracket' },
+ { foreground: '4b4b96', token: 'annotation' },
+ { foreground: '4b4b96', token: 'number' },
+ { foreground: '888c89', token: 'comment' },
+ { foreground: 'A22889', token: 'variable' },
+ { foreground: '2BDEA8', token: 'type' },
+ { foreground: '9cdcfe', token: 'identifier' }
]
});
@@ -597,16 +597,16 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
monacoEditor.languages.setLanguageConfiguration('mermaid', {
autoClosingPairs: [
{
- open: '(',
- close: ')'
+ close: ')',
+ open: '('
},
{
- open: '{',
- close: '}'
+ close: '}',
+ open: '{'
},
{
- open: '[',
- close: ']'
+ close: ']',
+ open: '['
}
],
brackets: [
diff --git a/src/lib/util/notify.ts b/src/lib/util/notify.ts
index 3c9e6ded..5c1c7023 100644
--- a/src/lib/util/notify.ts
+++ b/src/lib/util/notify.ts
@@ -1,5 +1,7 @@
+import { toast } from 'svelte-sonner';
+
export const notify = (message: string): void => {
- alert(message);
+ toast(message);
};
export const prompt = (message: string): boolean => {
diff --git a/src/lib/util/panZoom.ts b/src/lib/util/panZoom.ts
new file mode 100644
index 00000000..97844bd6
--- /dev/null
+++ b/src/lib/util/panZoom.ts
@@ -0,0 +1,108 @@
+import type { State } from '$/types';
+import type { Point } from 'mermaid/dist/types.js';
+import panzoom from 'svg-pan-zoom';
+type PanZoom = typeof panzoom;
+
+export class PanZoomState {
+ private pan?: Point;
+ private zoom?: number;
+ private pzoom: PanZoom | undefined;
+ private isDirty = false;
+ private resizeObserver: ResizeObserver;
+
+ public isPanEnabled: boolean;
+ public onPanZoomChange?: (pan: Point, zoom: number) => void;
+
+ constructor() {
+ this.isPanEnabled = true;
+ this.resizeObserver = new ResizeObserver(() => {
+ this.resize();
+ if (!this.isDirty) {
+ this.reset();
+ }
+ });
+ }
+
+ public updateElement(diagramView: SVGElement, { pan, zoom }: Pick) {
+ this.pzoom = panzoom(diagramView, {
+ center: true,
+ controlIconsEnabled: false,
+ fit: true,
+ maxZoom: 12,
+ minZoom: 0.2,
+ onPan: (pan) => {
+ this.pan = pan;
+ this.zoom = this.pzoom?.getZoom();
+ this.isDirty = true;
+ if (this.zoom) {
+ this.onPanZoomChange?.(this.pan, this.zoom);
+ }
+ },
+ onZoom: (zoom) => {
+ this.zoom = zoom;
+ this.pan = this.pzoom?.getPan();
+ this.isDirty = true;
+ if (this.pan) {
+ this.onPanZoomChange?.(this.pan, this.zoom);
+ }
+ },
+ panEnabled: true,
+ zoomEnabled: true
+ });
+
+ this.pzoom.disableDblClickZoom();
+
+ this.resizeObserver.disconnect();
+ this.resizeObserver.observe(diagramView);
+
+ // TODO: Investigate why this is necessary
+ if (pan !== undefined && zoom !== undefined && Number.isFinite(zoom)) {
+ this.restorePanZoom(pan, zoom);
+ }
+
+ // we start out with both pan and zoom enabled so that the tool can auto position view refreshed
+ // then set enable/disable pan based on state
+ if (this.isPanEnabled) {
+ this.pzoom.enablePan();
+ this.pzoom.enableZoom();
+ } else {
+ this.pzoom.disableZoom();
+ this.pzoom.disablePan();
+ }
+
+ if (pan === undefined && zoom === undefined) {
+ this.reset();
+ }
+ }
+
+ public restorePanZoom(pan: Point, zoom: number) {
+ if (!this.pzoom) {
+ console.error('PanZoomState.restorePanZoom: pzoom is not initialized');
+ return;
+ }
+ this.pzoom.zoom(zoom);
+ this.pzoom.pan(pan);
+ }
+
+ public resize() {
+ this.pzoom?.resize();
+ if (!this.isDirty) {
+ this.reset();
+ }
+ }
+
+ public zoomIn() {
+ this.pzoom?.zoomIn();
+ }
+
+ public zoomOut() {
+ this.pzoom?.zoomOut();
+ }
+
+ public reset() {
+ this.pzoom?.reset();
+ // Zoom out a bit to avoid overlap with the toolbar
+ this.pzoom?.zoom(0.875);
+ this.isDirty = false;
+ }
+}
diff --git a/src/lib/util/persist.ts b/src/lib/util/persist.ts
index 2c63b9a2..dfdbaa13 100644
--- a/src/lib/util/persist.ts
+++ b/src/lib/util/persist.ts
@@ -204,6 +204,13 @@ function getBrowserStorage(
connect();
}
},
+ deleteValue(key: string) {
+ browserStorage.removeItem(key);
+ },
+ getValue(key: string): any {
+ const value = browserStorage.getItem(key);
+ return deserialize(value);
+ },
removeListener(key: string, listener: (newValue: any) => void) {
const index = listeners.indexOf({ key, listener });
if (index !== -1) {
@@ -213,13 +220,6 @@ function getBrowserStorage(
disconnect();
}
},
- getValue(key: string): any {
- const value = browserStorage.getItem(key);
- return deserialize(value);
- },
- deleteValue(key: string) {
- browserStorage.removeItem(key);
- },
setValue(key: string, value: any) {
browserStorage.setItem(key, serialize(value));
}
diff --git a/src/lib/util/promos/January2025.svelte b/src/lib/util/promos/January2025.svelte
index 339a4fb2..f59dd24a 100644
--- a/src/lib/util/promos/January2025.svelte
+++ b/src/lib/util/promos/January2025.svelte
@@ -1,4 +1,5 @@
-
- {@render children?.()}
+
+ {@render children()}
{#if $loadingStateStore.loading}
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index e8c19b47..ad91fe2d 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -1,263 +1,112 @@
-
+
+
+
+
+
+
+
+
+
-
-
- {#snippet actions()}
-
-
-
- Auto sync
-
-
+
+
+
+
+ {#snippet actions()}
+
- {#if !$stateStore.autoSync}
-
- {/if}
-
-
-
-
-
+
- {/snippet}
-
-
-
-
-
-
-
-
- {#snippet actions()}
-
- {/snippet}
-
-
-
-
-
- Code editing not supported on mobile. Please use a desktop browser.
-
-
+
+
+
+
+ Code editing not supported on mobile. Please use a desktop browser.
+
+
+ {#if isHistoryOpen}
+
+
+ {/if}
+
-
-
diff --git a/src/routes/view/+page.svelte b/src/routes/view/+page.svelte
index b2d25334..0f915b09 100644
--- a/src/routes/view/+page.svelte
+++ b/src/routes/view/+page.svelte
@@ -1,6 +1,6 @@
@@ -9,4 +9,4 @@
-
+
diff --git a/src/tests/setup.ts b/src/tests/setup.ts
index b2e0c4d6..2240083c 100644
--- a/src/tests/setup.ts
+++ b/src/tests/setup.ts
@@ -1,6 +1,4 @@
-import '@testing-library/jest-dom/vitest';
import { beforeAll, vi } from 'vitest';
-import 'vitest-dom/extend-expect';
// TODO: Remove once https://github.com/sveltejs/kit/issues/6259 is closed.
beforeAll(() => {
diff --git a/static/icons/code.svg b/static/icons/code.svg
new file mode 100644
index 00000000..84006ab9
--- /dev/null
+++ b/static/icons/code.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/static/mermaidchart-logo.svg b/static/mermaidchart-logo.svg
index d7c8b59e..040245d2 100755
--- a/static/mermaidchart-logo.svg
+++ b/static/mermaidchart-logo.svg
@@ -1 +1,4 @@
-
+
+
diff --git a/svelte.config.js b/svelte.config.js
index 0180e1c2..7d17fce0 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,6 +11,9 @@ const config = {
})
],
kit: {
+ alias: {
+ '$/*': './src/lib/*'
+ },
adapter: adapter({
pages: 'docs'
})
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
deleted file mode 100644
index 18cb32c1..00000000
--- a/tailwind.config.cjs
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = {
- plugins: [require('daisyui')],
- content: ['./src/**/*.{html,js,svelte,ts}'],
- theme: {
- extend: {}
- },
- variants: {
- extend: {}
- }
-};
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..8eb91f36
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,96 @@
+import tailwindcssAnimate from 'tailwindcss-animate';
+import { fontFamily } from 'tailwindcss/defaultTheme';
+
+/** @type {import('tailwindcss').Config} */
+const config = {
+ darkMode: ['class'],
+ content: ['./src/**/*.{html,js,svelte,ts}'],
+ safelist: ['dark'],
+ theme: {
+ container: {
+ center: true,
+ padding: '2rem',
+ screens: {
+ '2xl': '1400px'
+ }
+ },
+ extend: {
+ colors: {
+ border: 'hsl(var(--border) /
)',
+ input: 'hsl(var(--input) / )',
+ ring: 'hsl(var(--ring) / )',
+ background: 'hsl(var(--background) / )',
+ foreground: 'hsl(var(--foreground) / )',
+ primary: {
+ DEFAULT: 'hsl(var(--primary) / )',
+ foreground: 'hsl(var(--primary-foreground) / )'
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary) / )',
+ foreground: 'hsl(var(--secondary-foreground) / )'
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive) / )',
+ foreground: 'hsl(var(--destructive-foreground) / )'
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted) / )',
+ foreground: 'hsl(var(--muted-foreground) / )'
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent) / )',
+ foreground: 'hsl(var(--accent-foreground) / )'
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover) / )',
+ foreground: 'hsl(var(--popover-foreground) / )'
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card) / )',
+ foreground: 'hsl(var(--card-foreground) / )'
+ },
+ sidebar: {
+ DEFAULT: 'hsl(var(--sidebar-background))',
+ foreground: 'hsl(var(--sidebar-foreground))',
+ primary: 'hsl(var(--sidebar-primary))',
+ 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+ accent: 'hsl(var(--sidebar-accent))',
+ 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+ border: 'hsl(var(--sidebar-border))',
+ ring: 'hsl(var(--sidebar-ring))'
+ }
+ },
+ borderRadius: {
+ xl: 'calc(var(--radius) + 4px)',
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)'
+ },
+ fontFamily: {
+ sans: [...fontFamily.sans]
+ },
+ keyframes: {
+ 'accordion-down': {
+ from: { height: '0' },
+ to: { height: 'var(--bits-accordion-content-height)' }
+ },
+ 'accordion-up': {
+ from: { height: 'var(--bits-accordion-content-height)' },
+ to: { height: '0' }
+ },
+ 'caret-blink': {
+ '0%,70%,100%': { opacity: '1' },
+ '20%,50%': { opacity: '0' }
+ }
+ },
+ animation: {
+ 'accordion-down': 'accordion-down 0.2s ease-out',
+ 'accordion-up': 'accordion-up 0.2s ease-out',
+ 'caret-blink': 'caret-blink 1.25s ease-out infinite'
+ }
+ }
+ },
+ plugins: [tailwindcssAnimate]
+};
+
+export default config;
diff --git a/tests/actions.spec.ts b/tests/actions.spec.ts
index f710e55c..4f9aae94 100644
--- a/tests/actions.spec.ts
+++ b/tests/actions.spec.ts
@@ -1,17 +1,14 @@
-import { expect, test } from '@playwright/test';
-import { typeInEditor, verifyFileSizeGreaterThan } from './utils';
+import { expect, test } from './test';
test.describe('Check actions', () => {
- test.beforeEach(async ({ page }) => {
- await page.goto('/edit');
- await page.getByText('Actions', { exact: true }).click();
+ test.beforeEach(async ({ editPage }) => {
+ await editPage.toggleActions();
});
- test('should update markdown code', async ({ page }) => {
- const markdown = page.locator('#markdown');
- const oldText = await markdown.inputValue();
- await typeInEditor(page, 'C --> HistoryTest', { bottom: true, newline: true });
- const newText = await markdown.inputValue();
+ test('should update markdown code', async ({ editPage }) => {
+ const oldText = await editPage.markdownInput.inputValue();
+ await editPage.typeInEditor('C --> HistoryTest', { bottom: true, newline: true });
+ const newText = await editPage.markdownInput.inputValue();
expect(newText).not.toBe(oldText);
});
@@ -23,26 +20,16 @@ test.describe('Check actions', () => {
await expect(page.getByText('Go shopping!!')).toBeVisible();
});
- test('should download png and svg', async ({ page }) => {
- const downloadPNGPromise = verifyFileSizeGreaterThan(page, 'diagram', 'png', 29_000);
- await page.locator('#downloadPNG').click();
- const firstPngSize = await downloadPNGPromise;
-
- const downloadSVGPromise = verifyFileSizeGreaterThan(page, 'diagram', 'svg', 10_000);
- await page.locator('#downloadSVG').click();
- const firstSvgSize = await downloadSVGPromise;
+ test('should download png and svg', async ({ editPage }) => {
+ const firstPngSize = await editPage.checkAndDownloadPNG(80_000);
+ const firstSvgSize = await editPage.downloadSVG(10_000);
// Verify downloaded file is different for different diagrams
- await page.getByText('Sample Diagrams').click();
- await page.getByText('ER', { exact: true }).click();
+ await editPage.toggleSampleDiagrams();
+ await editPage.loadSampleDiagram('ER');
- const downloadPNGPromise2 = verifyFileSizeGreaterThan(page, 'diagram', 'png', 35_000);
- await page.locator('#downloadPNG').click();
- const secondPngSize = await downloadPNGPromise2;
-
- const downloadSVGPromise2 = verifyFileSizeGreaterThan(page, 'diagram', 'svg', 11_000);
- await page.locator('#downloadSVG').click();
- const secondSvgSize = await downloadSVGPromise2;
+ const secondPngSize = await editPage.checkAndDownloadPNG(110_000);
+ const secondSvgSize = await editPage.downloadSVG(11_000);
// Verify files are actually different
expect(firstPngSize).not.toBe(secondPngSize);
diff --git a/tests/diagramUpdate.spec.ts b/tests/diagramUpdate.spec.ts
index aaa1dfec..08a1d778 100644
--- a/tests/diagramUpdate.spec.ts
+++ b/tests/diagramUpdate.spec.ts
@@ -1,63 +1,10 @@
-import { expect, test } from '@playwright/test';
-import { typeInEditor } from './utils';
+import { test } from './test';
test.describe('Auto sync tests', () => {
- test.beforeEach(async ({ page }) => {
- await page.goto('/');
- await expect(page).toHaveURL(/.*\/edit#pako/);
- });
-
- test('should dim diagram when code is edited', async ({ page }) => {
- await page.getByText('Auto sync').click();
- await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
- await expect(page.locator('#errorContainer')).not.toBeVisible();
- await typeInEditor(page, ' C --> Test', { bottom: true });
- await expect(page.locator('#view')).toHaveClass(/outOfSync/);
- await expect(page.locator('#errorContainer')).toContainText('Diagram out of sync.');
- const codeStore = await page.evaluate(() => localStorage.getItem('codeStore'));
- expect(codeStore).toBeTruthy();
- });
-
- test('should update diagram when shortcut is used', async ({ page }) => {
- await page.getByText('Auto sync').click();
- await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
- await typeInEditor(page, ' C --> Test');
- await expect(page.locator('#view')).toHaveClass(/outOfSync/);
- await expect(page.locator('#errorContainer')).toContainText('Diagram out of sync.');
- await page.locator('#editor').click();
- await page.keyboard.press('Control+Enter');
- await expect(page.locator('#errorContainer')).not.toBeVisible();
- await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
- });
-
- test('should show/hide sync button with auto sync', async ({ page }) => {
- await expect(page.locator('[data-cy=sync]')).not.toBeVisible();
- await page.getByText('Auto sync').click();
- await expect(page.locator('[data-cy=sync]')).toBeVisible();
- await page.locator('#autoSync').check();
- await expect(page.locator('[data-cy=sync]')).not.toBeVisible();
- });
-
- test('should not dim diagram when code is in sync', async ({ page }) => {
- await page.getByText('Auto sync').click();
- await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
- await typeInEditor(page, ' C --> Test');
- await expect(page.locator('#view')).toHaveClass(/outOfSync/);
- await page.locator('[data-cy=sync]').click();
- await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
- await page.locator('#autoSync').check();
- await typeInEditor(page, 'ing');
- await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
- const codeStore = await page.evaluate(() => localStorage.getItem('codeStore'));
- expect(codeStore).toBeTruthy();
- });
-
test('should automatically defer rendering when complex diagrams are edited', async ({
- page
+ editPage
}) => {
- await expect(page.locator('#view')).not.toHaveClass(/outOfSync/);
- await typeInEditor(
- page,
+ await editPage.typeInEditor(
`
A & B & C & D & E --> F & G & H & I & J & K
A & B & C & D & E --> F & G & H & I & J & K
@@ -66,62 +13,35 @@ A & B & C & D & E --> F & G & H & I & J & K
A & B & C & D & E --> F & G & H & I & J & K
A & B & C & D & E --> F & G & H & I & J & K
A & B & C & D & E --> F & G & H & I & J & K
-A & B & C & D & E --> F & G & H & I & J & K`
+A & B & C & D & E --> F & G & H & I & J & K & LongTest`
);
- await expect(page.locator('#view')).toHaveClass(/outOfSync/);
- await expect(page.locator('#errorContainer')).toContainText(
- 'It will be updated automatically.'
- );
- // The class should be removed automatically after 1 second
- await expect(page.locator('#view')).not.toHaveClass(/outOfSync/, { timeout: 2000 });
+ await editPage.checkTextNotInView('LongTest');
+ await editPage.checkTextInView('LongTest');
});
- test('supports commenting code out/in', async ({ page }) => {
- await page.locator('#editor').getByText('fa-car').click();
- await page.waitForTimeout(1000);
- await page.keyboard.press('Control+/');
-
- await expect(page.locator('#view').getByText('Car')).not.toBeVisible();
-
- await page.keyboard.press('Control+/');
- await expect(page.locator('#view').getByText('Car')).toBeVisible();
+ test('supports commenting code out/in', async ({ editPage }) => {
+ await editPage.toggleComment('fa-car');
+ await editPage.checkTextNotInView('Car');
+ await editPage.toggleComment('fa-car');
+ await editPage.checkTextInView('Car');
});
- test('supports editing code when code is incorrect', async ({ page }) => {
- await page.goto(
+ test('supports editing code when code is incorrect', async ({ editPage }) => {
+ await editPage.start(
'/edit#pako:eNpljjEKwzAMRa8SNOcEnlt6gK5eVFvYJsgOqkwpIXevg9smEE1PnyfxF3DFExgISW-CczQ2D21cYU7a-SGYXRwyvTp9jUhuKlVP-eHy7zA-leQsMEmg_QOM0BLG5FujZVMsaCQmC6ahR5ks2Lw2r84ela4-aREwKpVGwKrl_s7ut3fnkjAIcg_XDzuaUhs'
);
- await expect(page.getByText('Diagram syntax error')).not.toBeVisible();
- await typeInEditor(page, 'branch test', { bottom: true, newline: true });
- await expect(page.locator('#editor')).toContainText('branch test');
- await expect(
- page.getByText('Error: Trying to checkout branch which is not yet created.')
- ).toBeVisible();
+ await editPage.typeInEditor('branch test', { bottom: true, newline: true });
+ await editPage.checkTextNotInView('test');
+ await editPage.checkInEditor('branch test');
+ await editPage.checkError('Error: Trying to checkout branch which is not yet created.');
});
- test('should update diagram after entire text is removed', async ({ page }) => {
- await page.locator('#editor').click();
- await page.keyboard.press('Control+KeyA');
- await page.keyboard.press('Backspace');
- await typeInEditor(
- page,
+ test('should update diagram after entire text is removed', async ({ editPage }) => {
+ await editPage.clearEditor();
+ await editPage.typeInEditor(
`graph LR
A-->Bike`
);
- await expect(page.locator('#view').getByText('Bike')).toBeVisible();
- });
-});
-
-test.describe('Pan and Zoom', () => {
- test.beforeEach(async ({ page }) => {
- await page.goto('/');
- });
-
- test('should toggle pan and zoom', async ({ page }) => {
- await expect(page.locator('#svg-pan-zoom-reset-pan-zoom')).not.toBeVisible();
- await page.getByText('Pan & Zoom').click();
- await expect(page.locator('#svg-pan-zoom-reset-pan-zoom')).toBeVisible();
- await page.getByText('Pan & Zoom').click();
- await expect(page.locator('#svg-pan-zoom-reset-pan-zoom')).not.toBeVisible();
+ await editPage.checkTextInView('Bike');
});
});
diff --git a/tests/docMap.spec.ts b/tests/docMap.spec.ts
index d7c35daf..649ac56a 100644
--- a/tests/docMap.spec.ts
+++ b/tests/docMap.spec.ts
@@ -1,42 +1,38 @@
-import { expect, test } from '@playwright/test';
+import { test } from './test';
test.describe('Editor docs tests', () => {
- test.beforeEach(async ({ page }) => {
- await page.goto('/edit');
- await page.getByText('Sample Diagrams').click();
+ test.beforeEach(async ({ editPage }) => {
+ await editPage.toggleSampleDiagrams();
});
- test('Test default loading', async ({ page }) => {
- await expect(page.locator('[data-cy=docs][href^="https://mermaid.js.org/"]')).toBeVisible();
+ test('Test default loading', async ({ editPage }) => {
+ await editPage.checkDocURL(/mermaid\.js\.org\//);
});
test('Test to see if the correct URL loads when changing from one diagram to other', async ({
- page
+ editPage
}) => {
- await page.getByText('Flow', { exact: true }).click();
- await expect(page.locator('[data-cy=docs][href$="/syntax/flowchart.html"]')).toBeVisible();
+ await editPage.loadSampleDiagram('Flow');
+ await editPage.checkDocURL(/syntax\/flowchart\.html/);
+ await editPage.setEditorMode('Config');
+ await editPage.checkDocURL(/syntax\/flowchart\.html#configuration/);
+ await editPage.setEditorMode('Code');
+ await editPage.checkDocURL(/syntax\/flowchart\.html/);
- await page.getByText('Config').click();
- await expect(
- page.locator('[data-cy=docs][href$="/syntax/flowchart.html#configuration"]')
- ).toBeVisible();
-
- await page.getByText('Sequence').click();
- await expect(
- page.locator('[data-cy=docs][href$="/syntax/sequenceDiagram.html#configuration"]')
- ).toBeVisible();
-
- await page.getByText('Code', { exact: true }).click();
- await expect(
- page.locator('[data-cy=docs][href$="/syntax/sequenceDiagram.html"]')
- ).toBeVisible();
+ await editPage.loadSampleDiagram('Sequence');
+ await editPage.checkDocURL(/syntax\/sequenceDiagram\.html/);
+ await editPage.setEditorMode('Config');
+ await editPage.checkDocURL(/syntax\/sequenceDiagram\.html#configuration/);
+ await editPage.setEditorMode('Code');
+ await editPage.checkDocURL(/syntax\/sequenceDiagram\.html/);
});
- test("Test to check URLs for a case where config URL doesn't exist", async ({ page }) => {
- await page.getByText('State').click();
- await expect(page.locator('[data-cy=docs][href$="/syntax/stateDiagram.html"]')).toBeVisible();
-
- await page.getByText('Config').click();
- await expect(page.locator('[data-cy=docs][href$="/syntax/stateDiagram.html"]')).toBeVisible();
+ test("Test to check URLs for a case where config URL doesn't exist", async ({ editPage }) => {
+ await editPage.loadSampleDiagram('State');
+ await editPage.checkDocURL(/syntax\/stateDiagram\.html/);
+ await editPage.setEditorMode('Config');
+ await editPage.checkDocURL(/syntax\/stateDiagram\.html/);
+ await editPage.setEditorMode('Code');
+ await editPage.checkDocURL(/syntax\/stateDiagram\.html/);
});
});
diff --git a/tests/history.spec.ts b/tests/history.spec.ts
index 6b0d003d..0b81569e 100644
--- a/tests/history.spec.ts
+++ b/tests/history.spec.ts
@@ -1,7 +1,7 @@
import { expect, test } from '@playwright/test';
import { typeInEditor } from './utils';
-test.describe('Save History', () => {
+test.describe.skip('Save History', () => {
test.beforeEach(async ({ page }) => {
await page.addInitScript(() => {
Object.defineProperty(Date, 'now', {
diff --git a/tests/loadSite.spec.ts b/tests/loadSite.spec.ts
index fff88111..1e78791f 100644
--- a/tests/loadSite.spec.ts
+++ b/tests/loadSite.spec.ts
@@ -1,46 +1,43 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from './test';
test.describe('Site Loads', () => {
- test.beforeEach(async ({ page }) => {
- await page.goto('/');
- await expect(page).toHaveURL(/.*\/edit#pako/);
- });
-
- test('Check Home page load', async ({ page }) => {
- await expect(page).toHaveURL(/.*\/edit/);
- await page.getByText('History').click();
- const codeStore = await page.evaluate(() => localStorage.getItem('codeStore'));
+ test('Check Home page load', async ({ editPage }) => {
+ await editPage.setEditorMode('Config');
+ const codeStore = await editPage.page.evaluate(() => localStorage.getItem('codeStore'));
expect(codeStore).toBeTruthy();
});
- test('should keep code after reload', async ({ page }) => {
- await expect(page.locator('#editor')).toContainText('Car');
+ test('should keep code after reload', async ({ editPage, page }) => {
+ await editPage.checkInEditor('Car');
+ await editPage.checkTextInView('Car');
await page.reload();
- await expect(page.locator('#editor')).toContainText('Car');
+ await editPage.checkInEditor('Car');
+ await editPage.checkTextInView('Car');
});
- test('Check Redirect from old URL', async ({ page }) => {
- await page.goto(
+ test('Check Redirect from old URL', async ({ page, editPage }) => {
+ await editPage.start(
'/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
);
await expect(page).toHaveURL(/.*\/edit#pako:eNp/);
});
- test('should load sample diagrams when clicked', async ({ page }) => {
- await page.getByText('Sample Diagrams').click();
- await page.getByText('Pie').click();
- await expect(page.getByText('pie title Pets adopted by volunteers')).toBeVisible();
- await page.getByText('Class').click();
- await expect(page.getByText('classDiagram')).toBeVisible();
+ test('should load sample diagrams when clicked', async ({ editPage }) => {
+ await editPage.toggleSampleDiagrams();
+ await editPage.loadSampleDiagram('Pie');
+ await editPage.checkInEditor('pie title Pets adopted by volunteers');
+ await editPage.checkTextInView('Pets adopted by volunteers');
+ await editPage.loadSampleDiagram('Class');
+ await editPage.checkInEditor('classDiagram');
});
- test.describe('github', () => {
- test('should load diagram from gist', async ({ page }) => {
- await page.goto(
+ test.describe.skip('github', () => {
+ test('should load diagram from gist', async ({ editPage, page }) => {
+ await editPage.start(
`/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a`
);
await page.getByText('History').click();
- await expect(page.locator('#view').getByText('Go shopping!!')).toBeVisible();
+ await editPage.checkTextInView('Go shopping!!');
await expect(page.getByText('Revisions')).toBeVisible();
await expect(page.getByText('sidharthv96 v8f8f1e2')).toBeVisible();
await expect(page.getByText('sidharthv96 v7851e19')).toBeVisible();
@@ -48,66 +45,64 @@ test.describe('Site Loads', () => {
expect(codeStore).toBeTruthy();
});
- test('should load diagram from gist revision', async ({ page }) => {
- await page.goto(
+ test('should load diagram from gist revision', async ({ editPage, page }) => {
+ await editPage.start(
'/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19'
);
await page.getByText('History').click();
- await expect(page.locator('#view').getByText('Party')).toBeVisible();
+ await editPage.checkTextInView('Party');
await expect(page.getByText('Revisions')).toBeVisible();
await expect(page.getByText('sidharthv96 v7851e19')).toBeVisible();
const codeStore = await page.evaluate(() => localStorage.getItem('codeStore'));
expect(codeStore).toBeTruthy();
});
- test('should load diagram from raw files', async ({ page }) => {
- await page.goto(
+ test('should load diagram from raw files', async ({ editPage, page }) => {
+ await editPage.start(
'/edit?code=https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd&config=https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json'
);
- await expect(page.locator('#view').getByText('Party')).toBeVisible();
+ await editPage.checkTextInView('Party');
const codeStore = await page.evaluate(() => localStorage.getItem('codeStore'));
expect(codeStore).toBeTruthy();
});
});
- test('should show troubleshooting steps if loading fails', async ({ page }) => {
- await page.goto('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg');
+ test('should show troubleshooting steps if loading fails', async ({ editPage, page }) => {
+ await editPage.start('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg');
await page.reload({ waitUntil: 'networkidle' });
- await expect(
- page.locator('#view').getByText('Please Click here to Raise an issue in github.')
- ).toBeVisible();
+ await editPage.checkTextInView('Please Click here to Raise an issue in github.');
});
});
test.describe('Verify types of URLs', () => {
- test('should load compressed URL', async ({ page }) => {
- await page.goto(
+ test('should load compressed URL', async ({ editPage }) => {
+ await editPage.start(
'/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ'
);
- await expect(page.locator('#view').getByText('New Year')).toBeVisible();
- await page.goto(
+ await editPage.checkTextInView('New Year');
+ await editPage.start(
'/edit#pako:eNptkU1PwzAMhv9K5BOI9Q9EXBDbJA477YYqITcxndV8QD40weh_Jy1rGR0-OY_tV2_sEyivCSQogzGuGduAtnaixINji0bcf1WVWGfVXdMtx8M1faYm4B8sxR27JLClJd6nwK4VLTlN4bI4jMQd2pLe3C4KFhNNcLQ92jv9ADGLNoTdozc-zIV4ZDsNlud7RtVN7_5Sb_jYrFcN3iN_0pPbEqUZK3QbTP_Ojyv4NdR4bwTHlyMbPcOQ3WJ2CliBpWCRdbnLqFJDOpClGmRJNYauhtr1pS-_6bKMjebkA8hXNJFWgDn5_YdTIFPINDWdb3vu6r8BaWOZRQ'
);
- await expect(page.locator('#view').getByText('Animal')).toBeVisible();
+ await editPage.checkTextInView('Animal');
});
test.describe('Uncompressed URLs', () => {
- test('should load URL without specifier', async ({ page }) => {
- await page.goto(
+ test('should load URL without specifier', async ({ editPage }) => {
+ await editPage.start(
'/edit/#eyJjb2RlIjoiZ3JhcGhcbiAgICBUZXN0TGFiZWwiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
);
- await expect(page.locator('#view').getByText('TestLabel')).toBeVisible();
- await page.goto(
+ await editPage.checkTextInView('TestLabel');
+ await editPage.start(
'/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
);
- await expect(page.locator('#view').getByText('Animal')).toBeVisible();
+ await editPage.checkTextInView('Animal');
});
- test('should load URL with "base64" specifier', async ({ page }) => {
- await page.goto(
+ test('should load URL with "base64" specifier', async ({ editPage }) => {
+ await editPage.start(
'/edit/#base64:eyJjb2RlIjoiZ3JhcGhcbiAgICBUZXN0TGFiZWwiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
);
- await expect(page.locator('#view').getByText('TestLabel')).toBeVisible();
+ await editPage.checkTextInView('TestLabel');
});
});
});
diff --git a/tests/test.ts b/tests/test.ts
new file mode 100644
index 00000000..3c4fec2c
--- /dev/null
+++ b/tests/test.ts
@@ -0,0 +1,117 @@
+import { TID } from '$/constants';
+import { test as base, expect, type Locator, type Page } from '@playwright/test';
+import { verifyFileSizeGreaterThan, type EditorOptions } from './utils';
+
+export class EditorPage {
+ readonly editor: Locator;
+ readonly markdownInput: Locator;
+ readonly view: Locator;
+
+ constructor(readonly page: Page) {
+ this.editor = page.locator('css=.monaco-editor');
+ this.markdownInput = page.getByTestId(TID.copyMarkdown);
+ this.view = page.locator('#view');
+ }
+
+ async start(url = '/edit') {
+ await this.page.goto(url);
+ await expect(this.page)
+ .toHaveURL(/.*\/edit#pako/)
+ .catch(() => {});
+ }
+
+ async typeInEditor(text: string, { bottom = true, newline = false }: EditorOptions = {}) {
+ await this.editor.click();
+ if (bottom) {
+ await this.page.keyboard.press('PageDown');
+ }
+ if (newline) {
+ await this.page.keyboard.press('Enter');
+ }
+ await this.page.keyboard.type(text, { delay: 10 });
+ }
+
+ async clearEditor() {
+ await this.editor.click();
+ await this.page.keyboard.press('Control+KeyA');
+ await this.page.keyboard.press('Backspace');
+ }
+
+ async toggleActions() {
+ await this.page.getByText('Actions', { exact: true }).click();
+ }
+
+ async toggleSampleDiagrams() {
+ await this.page.getByText('Sample Diagrams', { exact: true }).click();
+ }
+
+ async checkAndDownloadPNG(expectedSize: number) {
+ const downloadPNGPromise = verifyFileSizeGreaterThan(this.page, 'diagram', 'png', expectedSize);
+ await this.page.getByTestId(TID.downloadPNG).click();
+ return await downloadPNGPromise;
+ }
+
+ async downloadSVG(expectedSize: number) {
+ const downloadSVGPromise = verifyFileSizeGreaterThan(this.page, 'diagram', 'svg', expectedSize);
+ await this.page.getByTestId(TID.downloadSVG).click();
+ return await downloadSVGPromise;
+ }
+
+ async loadSampleDiagram(diagramName: string) {
+ await this.page.getByText(diagramName, { exact: true }).click();
+ }
+
+ async checkTextInView(text: string) {
+ await expect(this.view).toContainText(text);
+ }
+
+ async checkTextNotInView(text: string) {
+ await expect(this.view).not.toContainText(text);
+ }
+
+ async checkError(text: string) {
+ await expect(this.page.getByTestId(TID.errorContainer)).toContainText(text);
+ }
+
+ async checkInEditor(text: string) {
+ await expect(this.editor).toContainText(text);
+ }
+
+ async toggleComment(text: string) {
+ await this.editor.getByText(text).click();
+ await this.page.keyboard.press('Control+/');
+ }
+
+ async setEditorMode(mode: 'Code' | 'Config') {
+ await this.page.getByRole('tab').getByText(mode).click();
+ }
+
+ async checkDocURL(url: string | RegExp) {
+ await expect(this.page.getByTestId(TID.diagramDocumentationButton)).toHaveAttribute(
+ 'href',
+ url
+ );
+ }
+
+ async toggleTheme() {
+ await this.page.getByTestId(TID.themeToggleButton).click();
+ }
+
+ async checkTheme(theme: 'light' | 'dark') {
+ await expect(this.page.getByTestId(TID.themeToggleButton)).toHaveAttribute(
+ 'title',
+ `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`
+ );
+ }
+}
+
+export const test = base.extend<{ editPage: EditorPage }>({
+ editPage: async ({ page }, use) => {
+ const editorPage = new EditorPage(page);
+ await editorPage.start();
+ await editorPage.toggleSampleDiagrams();
+ await use(editorPage);
+ }
+});
+
+export { expect } from '@playwright/test';
diff --git a/tests/themes.spec.ts b/tests/themes.spec.ts
index 55c7f905..42c3774c 100644
--- a/tests/themes.spec.ts
+++ b/tests/themes.spec.ts
@@ -1,46 +1,26 @@
-import { expect, test } from '@playwright/test';
+import { test } from './test';
test.describe('Test themes', () => {
test.describe('Test color scheme preference', () => {
- test('should respect prefers-color-scheme light', async ({ page }) => {
+ test('should respect prefers-color-scheme light', async ({ page, editPage }) => {
// Test light mode
await page.emulateMedia({ colorScheme: 'light' });
- await page.goto('/edit');
- await expect(page.getByText('light').locator('..')).toHaveClass(/bordered/);
- await expect(page.getByText('dark').locator('..')).not.toHaveClass(/bordered/);
+ await editPage.start();
+ await editPage.checkTheme('light');
});
- test('should respect prefers-color-scheme dark', async ({ page }) => {
+ test('should respect prefers-color-scheme dark', async ({ page, editPage }) => {
// Test dark mode
await page.emulateMedia({ colorScheme: 'dark' });
- await page.goto('/edit');
- await expect(page.getByText('dark').locator('..')).toHaveClass(/bordered/);
- await expect(page.getByText('light').locator('..')).not.toHaveClass(/bordered/);
- });
- });
-
- test.describe('Test light themes', () => {
- test.beforeEach(async ({ page }) => {
- await page.setViewportSize({ width: 1440, height: 768 });
- await page.goto('/edit');
- await page.getByText('Theme').click();
+ await editPage.start();
+ await editPage.checkTheme('dark');
});
- test('should set light theme as default', async ({ page }) => {
- await expect(page.getByText('light').locator('..')).toHaveClass(/bordered/);
- await expect(page.getByText('dark').locator('..')).not.toHaveClass(/bordered/);
- const themeStore = await page.evaluate(() => localStorage.getItem('themeStore'));
- expect(themeStore).toBeTruthy();
- });
-
- test('should change themes when clicked', async ({ page }) => {
- await expect(page.getByText('light').locator('..')).toHaveClass(/bordered/);
- await page.getByText('cupcake').click();
- await expect(page.getByText('cupcake').locator('..')).toHaveClass(/bordered/);
- await expect(page.getByText('light').locator('..')).not.toHaveClass(/bordered/);
- await expect(page.getByText('dark').locator('..')).not.toHaveClass(/bordered/);
- const themeStore = await page.evaluate(() => localStorage.getItem('themeStore'));
- expect(themeStore).toBeTruthy();
+ test('should change themes when clicked', async ({ editPage }) => {
+ await editPage.toggleTheme();
+ await editPage.checkTheme('dark');
+ await editPage.toggleTheme();
+ await editPage.checkTheme('light');
});
});
});
diff --git a/tests/utils.ts b/tests/utils.ts
index 0c4864c1..f2842c9a 100644
--- a/tests/utils.ts
+++ b/tests/utils.ts
@@ -21,8 +21,8 @@ export async function typeInEditor(
text: string,
{ bottom = true, newline = false }: EditorOptions = {}
) {
- await page.locator('#editor').click();
- const editor = page.locator('#editor');
+ const editor = page.locator('css=.monaco-editor');
+ await editor.click();
if (bottom) {
await editor.locator('textarea').press('PageDown');
diff --git a/vite.config.js b/vite.config.js
index 2aabcaa0..55510981 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,11 +1,32 @@
import { sveltekit } from '@sveltejs/kit/vite';
-import { svelteTesting } from '@testing-library/svelte/vite';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import Icons from 'unplugin-icons/vite';
import { defineConfig } from 'vitest/config';
+/**
+ * HMR creates state inconsistencies, so we always reload the page.
+ * @type {import('vite').PluginOption} PluginOption
+ */
+const alwaysFullReload = {
+ name: 'always-full-reload',
+ handleHotUpdate({ server }) {
+ server.ws.send({ type: 'full-reload' });
+ return [];
+ }
+};
+
export default defineConfig({
- plugins: [sveltekit(), svelteTesting()],
+ plugins: [
+ sveltekit(),
+ Icons({
+ compiler: 'svelte',
+ customCollections: {
+ custom: FileSystemIconLoader('./static/icons')
+ }
+ }),
+ alwaysFullReload
+ ],
envPrefix: 'MERMAID_',
- optimizeDeps: { include: ['mermaid'] },
server: {
port: 3000,
host: true
+ 
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 50ad17e0..93964362 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,29 +1,34 @@
-
+
+
Save
- to Mermaid Chart
- {/if}
-