@haklex/rich-renderer-mermaid 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/MermaidRenderer-uLPYgYDI.js +586 -0
  2. package/dist/index.mjs +368 -287
  3. package/dist/rich-renderer-mermaid.css +2 -1
  4. package/dist/static.mjs +2 -4
  5. package/dist/svg-post-process.d.ts.map +1 -1
  6. package/package.json +11 -11
  7. package/dist/MermaidRenderer-CZN-HzPn.js +0 -606
package/dist/index.mjs CHANGED
@@ -1,294 +1,375 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
1
+ import { A as editorViewToggle, D as editorTplBtn, E as editorTitle, I as mermaidError, L as mermaidLoading, M as footerBtnCancel, N as footerBtnSave, O as editorViewItem, P as mermaidContainer, R as zoomBtn, S as editorPreviewErrorWrap, T as editorSep, _ as editorPopup, a as codeGutter, b as editorPreviewErrorMsg, c as editorFooter, d as editorHeaderRight, f as editorIconBtn, i as codeEditor, j as footerActions, k as editorViewItemActive, l as editorHeader, n as useMermaidRender, o as codeGutterLine, r as codeArea, s as editorBody, t as MermaidRenderer, u as editorHeaderLeft, v as editorPreviewEmpty, w as editorPreviewWrap, x as editorPreviewErrorTitle, y as editorPreviewErrorIcon, z as zoomControls } from "./MermaidRenderer-uLPYgYDI.js";
2
2
  import { useColorScheme } from "@haklex/rich-editor";
3
- import { usePortalTheme, presentDialog } from "@haklex/rich-editor-ui";
4
- import { FishSymbol, Copy, Download, RotateCcw, X, ZoomIn, ZoomOut, Maximize2, CircleAlert, Code2, Columns2, Eye } from "lucide-react";
5
- import { useCallback, useState, useRef, useEffect } from "react";
6
- import { TransformWrapper, TransformComponent, useControls } from "react-zoom-pan-pinch";
7
- import { u as useMermaidRender, e as editorPopup, m as mermaidLoading, a as mermaidError, b as mermaidContainer, c as mermaidEditHint, d as editorHeader, f as editorHeaderLeft, g as editorTitle, h as editorSep, i as editorTplBtn, j as editorHeaderRight, k as editorViewToggle, l as editorIconBtn, n as editorBody, o as editorPane, p as editorPaneFull, q as editorPaneHalf, r as editorPaneLabel, s as editorPreviewPane, t as editorFooter, v as footerActions, w as footerBtnCancel, x as footerBtnSave, z as zoomControls, y as zoomBtn, A as editorViewItem, B as editorViewItemActive, C as codeEditor, D as codeGutter, E as codeGutterLine, F as codeArea, G as editorPreviewWrap, H as editorPreviewEmpty, I as editorPreviewErrorWrap, J as editorPreviewErrorIcon, K as editorPreviewErrorTitle, L as editorPreviewErrorMsg } from "./MermaidRenderer-CZN-HzPn.js";
8
- import { M } from "./MermaidRenderer-CZN-HzPn.js";
9
- const TEMPLATES = [
10
- {
11
- label: "Flowchart",
12
- code: "graph TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Action 1]\n B -->|No| D[Action 2]\n C --> E[End]\n D --> E"
13
- },
14
- {
15
- label: "Sequence",
16
- code: "sequenceDiagram\n participant A as Client\n participant B as Server\n A->>B: Request\n B-->>A: Response"
17
- },
18
- {
19
- label: "Class",
20
- code: "classDiagram\n class Animal {\n +String name\n +makeSound()\n }\n class Dog {\n +bark()\n }\n Animal <|-- Dog"
21
- },
22
- {
23
- label: "State",
24
- code: "stateDiagram-v2\n [*] --> Idle\n Idle --> Processing: Submit\n Processing --> Success: Complete\n Processing --> Error: Fail\n Error --> Idle: Retry\n Success --> [*]"
25
- },
26
- {
27
- label: "Git",
28
- code: "gitGraph\n commit\n branch develop\n checkout develop\n commit\n checkout main\n merge develop\n commit"
29
- }
3
+ import { presentDialog, usePortalTheme } from "@haklex/rich-editor-ui";
4
+ import { CircleAlert, Code2, Columns2, Copy, Download, Eye, FishSymbol, Maximize2, RotateCcw, X, ZoomIn, ZoomOut } from "lucide-react";
5
+ import { useCallback, useEffect, useRef, useState } from "react";
6
+ import { TransformComponent, TransformWrapper, useControls } from "react-zoom-pan-pinch";
7
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
+ //#region src/MermaidEditRenderer.tsx
9
+ var TEMPLATES = [
10
+ {
11
+ label: "Flowchart",
12
+ code: "graph TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Action 1]\n B -->|No| D[Action 2]\n C --> E[End]\n D --> E"
13
+ },
14
+ {
15
+ label: "Sequence",
16
+ code: "sequenceDiagram\n participant A as Client\n participant B as Server\n A->>B: Request\n B-->>A: Response"
17
+ },
18
+ {
19
+ label: "Class",
20
+ code: "classDiagram\n class Animal {\n +String name\n +makeSound()\n }\n class Dog {\n +bark()\n }\n Animal <|-- Dog"
21
+ },
22
+ {
23
+ label: "State",
24
+ code: "stateDiagram-v2\n [*] --> Idle\n Idle --> Processing: Submit\n Processing --> Success: Complete\n Processing --> Error: Fail\n Error --> Idle: Retry\n Success --> [*]"
25
+ },
26
+ {
27
+ label: "Git",
28
+ code: "gitGraph\n commit\n branch develop\n checkout develop\n commit\n checkout main\n merge develop\n commit"
29
+ }
30
30
  ];
31
- const MermaidLivePreview = ({ code, svgRef, colorScheme }) => {
32
- const [debounced, setDebounced] = useState(code);
33
- useEffect(() => {
34
- const t = setTimeout(() => setDebounced(code), 300);
35
- return () => clearTimeout(t);
36
- }, [code]);
37
- const { loading, error, imgSrc, svg, width, height } = useMermaidRender(debounced, colorScheme);
38
- useEffect(() => {
39
- svgRef.current = svg;
40
- }, [svg, svgRef]);
41
- if (!debounced.trim()) {
42
- return /* @__PURE__ */ jsx("div", { className: editorPreviewWrap, children: /* @__PURE__ */ jsx("span", { className: editorPreviewEmpty, children: "Enter Mermaid code to see the preview" }) });
43
- }
44
- if (loading && !imgSrc) {
45
- return /* @__PURE__ */ jsx("div", { className: editorPreviewWrap, children: /* @__PURE__ */ jsx("div", { className: mermaidLoading, children: "Rendering" }) });
46
- }
47
- if (error && !imgSrc) {
48
- return /* @__PURE__ */ jsx("div", { className: editorPreviewWrap, children: /* @__PURE__ */ jsxs("div", { className: editorPreviewErrorWrap, children: [
49
- /* @__PURE__ */ jsx("span", { className: editorPreviewErrorIcon, children: /* @__PURE__ */ jsx(CircleAlert, { size: 16 }) }),
50
- /* @__PURE__ */ jsx("p", { className: editorPreviewErrorTitle, children: "Syntax Error" }),
51
- /* @__PURE__ */ jsx("p", { className: editorPreviewErrorMsg, children: error })
52
- ] }) });
53
- }
54
- return /* @__PURE__ */ jsx("div", { className: editorPreviewWrap, children: /* @__PURE__ */ jsxs(TransformWrapper, { initialScale: 1, maxScale: 5, minScale: 0.3, children: [
55
- /* @__PURE__ */ jsx(ZoomControls, {}),
56
- /* @__PURE__ */ jsx(
57
- TransformComponent,
58
- {
59
- wrapperStyle: { width: "100%", height: "100%" },
60
- contentStyle: {
61
- width: "100%",
62
- display: "flex",
63
- justifyContent: "center"
64
- },
65
- children: /* @__PURE__ */ jsx("img", { alt: "Mermaid diagram", height, src: imgSrc, width })
66
- }
67
- )
68
- ] }) });
31
+ var MermaidLivePreview = ({ code, svgRef, colorScheme }) => {
32
+ const [debounced, setDebounced] = useState(code);
33
+ useEffect(() => {
34
+ const t = setTimeout(() => setDebounced(code), 300);
35
+ return () => clearTimeout(t);
36
+ }, [code]);
37
+ const { loading, error, imgSrc, svg, width, height } = useMermaidRender(debounced, colorScheme);
38
+ useEffect(() => {
39
+ svgRef.current = svg;
40
+ }, [svg, svgRef]);
41
+ if (!debounced.trim()) return /* @__PURE__ */ jsx("div", {
42
+ className: editorPreviewWrap,
43
+ children: /* @__PURE__ */ jsx("span", {
44
+ className: editorPreviewEmpty,
45
+ children: "Enter Mermaid code to see the preview"
46
+ })
47
+ });
48
+ if (loading && !imgSrc) return /* @__PURE__ */ jsx("div", {
49
+ className: editorPreviewWrap,
50
+ children: /* @__PURE__ */ jsx("div", {
51
+ className: mermaidLoading,
52
+ children: "Rendering"
53
+ })
54
+ });
55
+ if (error && !imgSrc) return /* @__PURE__ */ jsx("div", {
56
+ className: editorPreviewWrap,
57
+ children: /* @__PURE__ */ jsxs("div", {
58
+ className: editorPreviewErrorWrap,
59
+ children: [
60
+ /* @__PURE__ */ jsx("span", {
61
+ className: editorPreviewErrorIcon,
62
+ children: /* @__PURE__ */ jsx(CircleAlert, { size: 16 })
63
+ }),
64
+ /* @__PURE__ */ jsx("p", {
65
+ className: editorPreviewErrorTitle,
66
+ children: "Syntax Error"
67
+ }),
68
+ /* @__PURE__ */ jsx("p", {
69
+ className: editorPreviewErrorMsg,
70
+ children: error
71
+ })
72
+ ]
73
+ })
74
+ });
75
+ return /* @__PURE__ */ jsx("div", {
76
+ className: editorPreviewWrap,
77
+ children: /* @__PURE__ */ jsxs(TransformWrapper, {
78
+ initialScale: 1,
79
+ maxScale: 5,
80
+ minScale: .3,
81
+ children: [/* @__PURE__ */ jsx(ZoomControls, {}), /* @__PURE__ */ jsx(TransformComponent, {
82
+ wrapperStyle: {
83
+ width: "100%",
84
+ height: "100%"
85
+ },
86
+ contentStyle: {
87
+ width: "100%",
88
+ display: "flex",
89
+ justifyContent: "center"
90
+ },
91
+ children: /* @__PURE__ */ jsx("img", {
92
+ alt: "Mermaid diagram",
93
+ height,
94
+ src: imgSrc,
95
+ width
96
+ })
97
+ })]
98
+ })
99
+ });
69
100
  };
70
- const CodeEditor = ({ value, onChange }) => {
71
- const textareaRef = useRef(null);
72
- const gutterRef = useRef(null);
73
- const lineCount = value.split("\n").length;
74
- const syncScroll = useCallback(() => {
75
- if (textareaRef.current && gutterRef.current) {
76
- gutterRef.current.scrollTop = textareaRef.current.scrollTop;
77
- }
78
- }, []);
79
- useEffect(() => {
80
- const el = textareaRef.current;
81
- if (!el) return;
82
- el.addEventListener("scroll", syncScroll);
83
- return () => el.removeEventListener("scroll", syncScroll);
84
- }, [syncScroll]);
85
- const handleKeyDown = useCallback(
86
- (e) => {
87
- if (e.key === "Tab") {
88
- e.preventDefault();
89
- const ta = e.currentTarget;
90
- const start = ta.selectionStart;
91
- const end = ta.selectionEnd;
92
- onChange(`${value.slice(0, Math.max(0, start))} ${value.slice(Math.max(0, end))}`);
93
- requestAnimationFrame(() => {
94
- ta.selectionStart = ta.selectionEnd = start + 2;
95
- });
96
- }
97
- },
98
- [value, onChange]
99
- );
100
- return /* @__PURE__ */ jsxs("div", { className: codeEditor, children: [
101
- /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: codeGutter, ref: gutterRef, children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx("div", { className: codeGutterLine, children: i + 1 }, i)) }),
102
- /* @__PURE__ */ jsx(
103
- "textarea",
104
- {
105
- className: codeArea,
106
- placeholder: "Enter Mermaid code...",
107
- ref: textareaRef,
108
- spellCheck: false,
109
- value,
110
- onChange: (e) => onChange(e.target.value),
111
- onKeyDown: handleKeyDown
112
- }
113
- )
114
- ] });
101
+ var CodeEditor = ({ value, onChange }) => {
102
+ const textareaRef = useRef(null);
103
+ const gutterRef = useRef(null);
104
+ const lineCount = value.split("\n").length;
105
+ const syncScroll = useCallback(() => {
106
+ if (textareaRef.current && gutterRef.current) gutterRef.current.scrollTop = textareaRef.current.scrollTop;
107
+ }, []);
108
+ useEffect(() => {
109
+ const el = textareaRef.current;
110
+ if (!el) return;
111
+ el.addEventListener("scroll", syncScroll);
112
+ return () => el.removeEventListener("scroll", syncScroll);
113
+ }, [syncScroll]);
114
+ const handleKeyDown = useCallback((e) => {
115
+ if (e.key === "Tab") {
116
+ e.preventDefault();
117
+ const ta = e.currentTarget;
118
+ const start = ta.selectionStart;
119
+ const end = ta.selectionEnd;
120
+ onChange(`${value.slice(0, Math.max(0, start))} ${value.slice(Math.max(0, end))}`);
121
+ requestAnimationFrame(() => {
122
+ ta.selectionStart = ta.selectionEnd = start + 2;
123
+ });
124
+ }
125
+ }, [value, onChange]);
126
+ return /* @__PURE__ */ jsxs("div", {
127
+ className: codeEditor,
128
+ children: [/* @__PURE__ */ jsx("div", {
129
+ "aria-hidden": "true",
130
+ className: codeGutter,
131
+ ref: gutterRef,
132
+ children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx("div", {
133
+ className: codeGutterLine,
134
+ children: i + 1
135
+ }, i))
136
+ }), /* @__PURE__ */ jsx("textarea", {
137
+ className: codeArea,
138
+ placeholder: "Enter Mermaid code...",
139
+ ref: textareaRef,
140
+ spellCheck: false,
141
+ value,
142
+ onChange: (e) => onChange(e.target.value),
143
+ onKeyDown: handleKeyDown
144
+ })]
145
+ });
115
146
  };
116
- const MermaidEditorContent = ({ initialContent, onSave, dismiss, colorScheme }) => {
117
- const [code, setCode] = useState(initialContent);
118
- const [activeView, setActiveView] = useState("split");
119
- const [copied, setCopied] = useState(false);
120
- const svgRef = useRef("");
121
- const handleCopy = useCallback(async () => {
122
- await navigator.clipboard.writeText(code);
123
- setCopied(true);
124
- setTimeout(() => setCopied(false), 2e3);
125
- }, [code]);
126
- const handleDownload = useCallback(() => {
127
- const raw = svgRef.current;
128
- if (!raw) return;
129
- const blob = new Blob([raw], { type: "image/svg+xml" });
130
- const url = URL.createObjectURL(blob);
131
- const a = document.createElement("a");
132
- a.href = url;
133
- a.download = "mermaid-diagram.svg";
134
- a.click();
135
- URL.revokeObjectURL(url);
136
- }, []);
137
- const handleReset = useCallback(() => setCode(initialContent), [initialContent]);
138
- const handleSave = useCallback(() => {
139
- onSave(code);
140
- dismiss();
141
- }, [code, onSave, dismiss]);
142
- const viewBtn = (mode, Icon) => /* @__PURE__ */ jsx(
143
- "button",
144
- {
145
- className: `${editorViewItem}${activeView === mode ? ` ${editorViewItemActive}` : ""}`,
146
- type: "button",
147
- onClick: () => setActiveView(mode),
148
- children: /* @__PURE__ */ jsx(Icon, { size: 14 })
149
- }
150
- );
151
- return /* @__PURE__ */ jsxs(Fragment, { children: [
152
- /* @__PURE__ */ jsxs("div", { className: editorHeader, children: [
153
- /* @__PURE__ */ jsxs("div", { className: editorHeaderLeft, children: [
154
- /* @__PURE__ */ jsxs("div", { className: editorTitle, children: [
155
- /* @__PURE__ */ jsx(FishSymbol, { size: 18 }),
156
- /* @__PURE__ */ jsx("span", { children: "Mermaid Editor" })
157
- ] }),
158
- /* @__PURE__ */ jsx("div", { className: editorSep }),
159
- TEMPLATES.map((tpl) => /* @__PURE__ */ jsx(
160
- "button",
161
- {
162
- className: editorTplBtn,
163
- type: "button",
164
- onClick: () => setCode(tpl.code),
165
- children: tpl.label
166
- },
167
- tpl.label
168
- ))
169
- ] }),
170
- /* @__PURE__ */ jsxs("div", { className: editorHeaderRight, children: [
171
- /* @__PURE__ */ jsxs("div", { className: editorViewToggle, children: [
172
- viewBtn("code", Code2),
173
- viewBtn("split", Columns2),
174
- viewBtn("preview", Eye)
175
- ] }),
176
- /* @__PURE__ */ jsx("div", { className: editorSep }),
177
- /* @__PURE__ */ jsx(
178
- "button",
179
- {
180
- className: editorIconBtn,
181
- title: copied ? "Copied!" : "Copy code",
182
- type: "button",
183
- onClick: handleCopy,
184
- children: /* @__PURE__ */ jsx(Copy, { size: 14 })
185
- }
186
- ),
187
- /* @__PURE__ */ jsx(
188
- "button",
189
- {
190
- className: editorIconBtn,
191
- title: "Download SVG",
192
- type: "button",
193
- onClick: handleDownload,
194
- children: /* @__PURE__ */ jsx(Download, { size: 14 })
195
- }
196
- ),
197
- /* @__PURE__ */ jsx("button", { className: editorIconBtn, title: "Reset", type: "button", onClick: handleReset, children: /* @__PURE__ */ jsx(RotateCcw, { size: 14 }) }),
198
- /* @__PURE__ */ jsx("div", { className: editorSep }),
199
- /* @__PURE__ */ jsx("button", { className: editorIconBtn, title: "Close", type: "button", onClick: dismiss, children: /* @__PURE__ */ jsx(X, { size: 14 }) })
200
- ] })
201
- ] }),
202
- /* @__PURE__ */ jsxs("div", { className: editorBody, children: [
203
- activeView !== "preview" && /* @__PURE__ */ jsxs(
204
- "div",
205
- {
206
- className: `${editorPane} ${activeView === "code" ? editorPaneFull : editorPaneHalf}`,
207
- children: [
208
- /* @__PURE__ */ jsx("div", { className: editorPaneLabel, children: "Editor" }),
209
- /* @__PURE__ */ jsx(CodeEditor, { value: code, onChange: setCode })
210
- ]
211
- }
212
- ),
213
- activeView !== "code" && /* @__PURE__ */ jsxs("div", { className: editorPreviewPane, children: [
214
- /* @__PURE__ */ jsx("div", { className: editorPaneLabel, children: "Preview" }),
215
- /* @__PURE__ */ jsx(MermaidLivePreview, { code, colorScheme, svgRef })
216
- ] })
217
- ] }),
218
- /* @__PURE__ */ jsx("div", { className: editorFooter, children: /* @__PURE__ */ jsxs("div", { className: footerActions, children: [
219
- /* @__PURE__ */ jsx("button", { className: footerBtnCancel, type: "button", onClick: dismiss, children: "Cancel" }),
220
- /* @__PURE__ */ jsx("button", { className: footerBtnSave, type: "button", onClick: handleSave, children: "Save" })
221
- ] }) })
222
- ] });
147
+ var MermaidEditorContent = ({ initialContent, onSave, dismiss, colorScheme }) => {
148
+ const [code, setCode] = useState(initialContent);
149
+ const [activeView, setActiveView] = useState("split");
150
+ const [copied, setCopied] = useState(false);
151
+ const svgRef = useRef("");
152
+ const handleCopy = useCallback(async () => {
153
+ await navigator.clipboard.writeText(code);
154
+ setCopied(true);
155
+ setTimeout(() => setCopied(false), 2e3);
156
+ }, [code]);
157
+ const handleDownload = useCallback(() => {
158
+ const raw = svgRef.current;
159
+ if (!raw) return;
160
+ const blob = new Blob([raw], { type: "image/svg+xml" });
161
+ const url = URL.createObjectURL(blob);
162
+ const a = document.createElement("a");
163
+ a.href = url;
164
+ a.download = "mermaid-diagram.svg";
165
+ a.click();
166
+ URL.revokeObjectURL(url);
167
+ }, []);
168
+ const handleReset = useCallback(() => setCode(initialContent), [initialContent]);
169
+ const handleSave = useCallback(() => {
170
+ onSave(code);
171
+ dismiss();
172
+ }, [
173
+ code,
174
+ onSave,
175
+ dismiss
176
+ ]);
177
+ const viewBtn = (mode, Icon) => /* @__PURE__ */ jsx("button", {
178
+ className: `${editorViewItem}${activeView === mode ? ` ${editorViewItemActive}` : ""}`,
179
+ type: "button",
180
+ onClick: () => setActiveView(mode),
181
+ children: /* @__PURE__ */ jsx(Icon, { size: 14 })
182
+ });
183
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
184
+ /* @__PURE__ */ jsxs("div", {
185
+ className: editorHeader,
186
+ children: [/* @__PURE__ */ jsxs("div", {
187
+ className: editorHeaderLeft,
188
+ children: [
189
+ /* @__PURE__ */ jsxs("div", {
190
+ className: editorTitle,
191
+ children: [/* @__PURE__ */ jsx(FishSymbol, { size: 18 }), /* @__PURE__ */ jsx("span", { children: "Mermaid Editor" })]
192
+ }),
193
+ /* @__PURE__ */ jsx("div", { className: editorSep }),
194
+ TEMPLATES.map((tpl) => /* @__PURE__ */ jsx("button", {
195
+ className: editorTplBtn,
196
+ type: "button",
197
+ onClick: () => setCode(tpl.code),
198
+ children: tpl.label
199
+ }, tpl.label))
200
+ ]
201
+ }), /* @__PURE__ */ jsxs("div", {
202
+ className: editorHeaderRight,
203
+ children: [
204
+ /* @__PURE__ */ jsxs("div", {
205
+ className: editorViewToggle,
206
+ children: [
207
+ viewBtn("code", Code2),
208
+ viewBtn("split", Columns2),
209
+ viewBtn("preview", Eye)
210
+ ]
211
+ }),
212
+ /* @__PURE__ */ jsx("div", { className: editorSep }),
213
+ /* @__PURE__ */ jsx("button", {
214
+ className: editorIconBtn,
215
+ title: copied ? "Copied!" : "Copy code",
216
+ type: "button",
217
+ onClick: handleCopy,
218
+ children: /* @__PURE__ */ jsx(Copy, { size: 14 })
219
+ }),
220
+ /* @__PURE__ */ jsx("button", {
221
+ className: editorIconBtn,
222
+ title: "Download SVG",
223
+ type: "button",
224
+ onClick: handleDownload,
225
+ children: /* @__PURE__ */ jsx(Download, { size: 14 })
226
+ }),
227
+ /* @__PURE__ */ jsx("button", {
228
+ className: editorIconBtn,
229
+ title: "Reset",
230
+ type: "button",
231
+ onClick: handleReset,
232
+ children: /* @__PURE__ */ jsx(RotateCcw, { size: 14 })
233
+ }),
234
+ /* @__PURE__ */ jsx("div", { className: editorSep }),
235
+ /* @__PURE__ */ jsx("button", {
236
+ className: editorIconBtn,
237
+ title: "Close",
238
+ type: "button",
239
+ onClick: dismiss,
240
+ children: /* @__PURE__ */ jsx(X, { size: 14 })
241
+ })
242
+ ]
243
+ })]
244
+ }),
245
+ /* @__PURE__ */ jsxs("div", {
246
+ className: editorBody,
247
+ children: [activeView !== "preview" && /* @__PURE__ */ jsxs("div", {
248
+ className: `_36yqiej ${activeView === "code" ? "_36yqiel" : "_36yqiek"}`,
249
+ children: [/* @__PURE__ */ jsx("div", {
250
+ className: "_36yqiem",
251
+ children: "Editor"
252
+ }), /* @__PURE__ */ jsx(CodeEditor, {
253
+ value: code,
254
+ onChange: setCode
255
+ })]
256
+ }), activeView !== "code" && /* @__PURE__ */ jsxs("div", {
257
+ className: "_36yqien",
258
+ children: [/* @__PURE__ */ jsx("div", {
259
+ className: "_36yqiem",
260
+ children: "Preview"
261
+ }), /* @__PURE__ */ jsx(MermaidLivePreview, {
262
+ code,
263
+ colorScheme,
264
+ svgRef
265
+ })]
266
+ })]
267
+ }),
268
+ /* @__PURE__ */ jsx("div", {
269
+ className: editorFooter,
270
+ children: /* @__PURE__ */ jsxs("div", {
271
+ className: footerActions,
272
+ children: [/* @__PURE__ */ jsx("button", {
273
+ className: footerBtnCancel,
274
+ type: "button",
275
+ onClick: dismiss,
276
+ children: "Cancel"
277
+ }), /* @__PURE__ */ jsx("button", {
278
+ className: footerBtnSave,
279
+ type: "button",
280
+ onClick: handleSave,
281
+ children: "Save"
282
+ })]
283
+ })
284
+ })
285
+ ] });
223
286
  };
224
- const ZoomControls = () => {
225
- const { zoomIn, zoomOut, resetTransform } = useControls();
226
- return /* @__PURE__ */ jsxs("div", { className: zoomControls, children: [
227
- /* @__PURE__ */ jsx("button", { className: zoomBtn, type: "button", onClick: () => zoomIn(), children: /* @__PURE__ */ jsx(ZoomIn, { size: 14 }) }),
228
- /* @__PURE__ */ jsx("button", { className: zoomBtn, type: "button", onClick: () => zoomOut(), children: /* @__PURE__ */ jsx(ZoomOut, { size: 14 }) }),
229
- /* @__PURE__ */ jsx("button", { className: zoomBtn, type: "button", onClick: () => resetTransform(), children: /* @__PURE__ */ jsx(Maximize2, { size: 14 }) })
230
- ] });
287
+ var ZoomControls = () => {
288
+ const { zoomIn, zoomOut, resetTransform } = useControls();
289
+ return /* @__PURE__ */ jsxs("div", {
290
+ className: zoomControls,
291
+ children: [
292
+ /* @__PURE__ */ jsx("button", {
293
+ className: zoomBtn,
294
+ type: "button",
295
+ onClick: () => zoomIn(),
296
+ children: /* @__PURE__ */ jsx(ZoomIn, { size: 14 })
297
+ }),
298
+ /* @__PURE__ */ jsx("button", {
299
+ className: zoomBtn,
300
+ type: "button",
301
+ onClick: () => zoomOut(),
302
+ children: /* @__PURE__ */ jsx(ZoomOut, { size: 14 })
303
+ }),
304
+ /* @__PURE__ */ jsx("button", {
305
+ className: zoomBtn,
306
+ type: "button",
307
+ onClick: () => resetTransform(),
308
+ children: /* @__PURE__ */ jsx(Maximize2, { size: 14 })
309
+ })
310
+ ]
311
+ });
231
312
  };
232
- const MermaidEditRenderer = ({ content, onContentChange }) => {
233
- const colorScheme = useColorScheme();
234
- const { loading, error, imgSrc, width, height } = useMermaidRender(content);
235
- const { className: portalClassName } = usePortalTheme();
236
- const handleClick = useCallback(() => {
237
- if (!onContentChange) return;
238
- presentDialog({
239
- content: ({ dismiss }) => /* @__PURE__ */ jsx(
240
- MermaidEditorContent,
241
- {
242
- colorScheme,
243
- dismiss,
244
- initialContent: content,
245
- onSave: onContentChange
246
- }
247
- ),
248
- className: editorPopup,
249
- portalClassName,
250
- theme: colorScheme,
251
- showCloseButton: false,
252
- clickOutsideToDismiss: false
253
- });
254
- }, [onContentChange, content, portalClassName, colorScheme]);
255
- if (loading) {
256
- return /* @__PURE__ */ jsx("div", { className: mermaidLoading, children: "Mermaid Loading" });
257
- }
258
- if (!imgSrc) {
259
- return /* @__PURE__ */ jsx("div", { className: mermaidError, children: error || "Render failed" });
260
- }
261
- return /* @__PURE__ */ jsxs("div", { className: mermaidContainer, children: [
262
- onContentChange && /* @__PURE__ */ jsx("span", { className: mermaidEditHint, onClick: handleClick, children: "Edit" }),
263
- /* @__PURE__ */ jsxs(
264
- TransformWrapper,
265
- {
266
- initialScale: 1,
267
- maxScale: 4,
268
- minScale: 0.5,
269
- wheel: {
270
- disabled: true
271
- },
272
- children: [
273
- /* @__PURE__ */ jsx(ZoomControls, {}),
274
- /* @__PURE__ */ jsx(
275
- TransformComponent,
276
- {
277
- wrapperStyle: { width: "100%" },
278
- contentStyle: {
279
- width: "100%",
280
- display: "flex",
281
- justifyContent: "center"
282
- },
283
- children: /* @__PURE__ */ jsx("img", { alt: "Mermaid diagram", height, src: imgSrc, width })
284
- }
285
- )
286
- ]
287
- }
288
- )
289
- ] });
290
- };
291
- export {
292
- MermaidEditRenderer,
293
- M as MermaidRenderer
313
+ var MermaidEditRenderer = ({ content, onContentChange }) => {
314
+ const colorScheme = useColorScheme();
315
+ const { loading, error, imgSrc, width, height } = useMermaidRender(content);
316
+ const { className: portalClassName } = usePortalTheme();
317
+ const handleClick = useCallback(() => {
318
+ if (!onContentChange) return;
319
+ presentDialog({
320
+ content: ({ dismiss }) => /* @__PURE__ */ jsx(MermaidEditorContent, {
321
+ colorScheme,
322
+ dismiss,
323
+ initialContent: content,
324
+ onSave: onContentChange
325
+ }),
326
+ className: editorPopup,
327
+ portalClassName,
328
+ theme: colorScheme,
329
+ showCloseButton: false,
330
+ clickOutsideToDismiss: false
331
+ });
332
+ }, [
333
+ onContentChange,
334
+ content,
335
+ portalClassName,
336
+ colorScheme
337
+ ]);
338
+ if (loading) return /* @__PURE__ */ jsx("div", {
339
+ className: mermaidLoading,
340
+ children: "Mermaid Loading"
341
+ });
342
+ if (!imgSrc) return /* @__PURE__ */ jsx("div", {
343
+ className: mermaidError,
344
+ children: error || "Render failed"
345
+ });
346
+ return /* @__PURE__ */ jsxs("div", {
347
+ className: mermaidContainer,
348
+ children: [onContentChange && /* @__PURE__ */ jsx("span", {
349
+ className: "_36yqie1",
350
+ onClick: handleClick,
351
+ children: "Edit"
352
+ }), /* @__PURE__ */ jsxs(TransformWrapper, {
353
+ initialScale: 1,
354
+ maxScale: 4,
355
+ minScale: .5,
356
+ wheel: { disabled: true },
357
+ children: [/* @__PURE__ */ jsx(ZoomControls, {}), /* @__PURE__ */ jsx(TransformComponent, {
358
+ wrapperStyle: { width: "100%" },
359
+ contentStyle: {
360
+ width: "100%",
361
+ display: "flex",
362
+ justifyContent: "center"
363
+ },
364
+ children: /* @__PURE__ */ jsx("img", {
365
+ alt: "Mermaid diagram",
366
+ height,
367
+ src: imgSrc,
368
+ width
369
+ })
370
+ })]
371
+ })]
372
+ });
294
373
  };
374
+ //#endregion
375
+ export { MermaidEditRenderer, MermaidRenderer };