@puredesktop/platform-editor 1.0.0-beta.1 → 2.1.0

package/src/mermaidPreview.ts

@@ -1,115 +1,115 @@
-import type mermaidType from 'mermaid'
-
-export type MermaidPreviewTheme = 'default' | 'dark'
-
-export interface RenderMermaidPreviewSvgOptions {
-  theme?: MermaidPreviewTheme
-}
-
-export interface ExpandMermaidBlocksOptions {
-  theme?: MermaidPreviewTheme
-  wrapperClass?: string
-}
-
-let mermaidPromise: Promise<typeof mermaidType> | null = null
-let mermaidInitializedTheme: MermaidPreviewTheme | null = null
-
-async function loadMermaid(
-  theme: MermaidPreviewTheme,
-): Promise<typeof mermaidType> {
-  mermaidPromise ??= import('mermaid').then(module => module.default)
-  const mermaid = await mermaidPromise
-  if (mermaidInitializedTheme !== theme) {
-    mermaid.initialize({
-      startOnLoad: false,
-      securityLevel: 'strict',
-      theme,
-      suppressErrorRendering: true,
-    })
-    mermaidInitializedTheme = theme
-  }
-  return mermaid
-}
-
-function platformThemeIsDark(): boolean {
-  if (typeof document === 'undefined') return false
-  return document.documentElement.dataset.platformTheme === 'dark'
-}
-
-function decodeHtmlEntities(text: string): string {
-  return text
-    .replace(/&lt;/g, '<')
-    .replace(/&gt;/g, '>')
-    .replace(/&amp;/g, '&')
-    .replace(/&quot;/g, '"')
-    .replace(/&#39;/g, "'")
-}
-
-const MERMAID_CODE_PATTERN =
-  /<code\b[^>]*class=["'][^"']*language-mermaid[^"']*["'][^>]*>([\s\S]*?)<\/code>/i
-
-const MERMAID_BLOCK_PATTERN =
-  /<(?:figure|div)\b[^>]*data-type=["']mermaid["'][^>]*>[\s\S]*?<\/(?:figure|div)>/gi
-
-/** Extract mermaid source from serialized editor/shell HTML (regex — safe for `-->`). */
-export function extractMermaidSourceFromHtml(html: string): string {
-  const match = html.match(MERMAID_CODE_PATTERN)
-  return decodeHtmlEntities(match?.[1] ?? '').trim()
-}
-
-export async function renderMermaidPreviewSvg(
-  sourceCode: string,
-  options: RenderMermaidPreviewSvgOptions = {},
-): Promise<string> {
-  const theme = options.theme ?? (platformThemeIsDark() ? 'dark' : 'default')
-  const mermaid = await loadMermaid(theme)
-  const diagram = sourceCode.trim() || 'flowchart TD\n  A[Empty diagram]'
-  const result = await mermaid.render(
-    `platform-mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-    diagram,
-  )
-  return result.svg
-}
-
-/** Replace stored mermaid blocks with rendered SVG (print/PDF/static HTML). */
-export async function expandMermaidBlocksForPrint(
-  html: string,
-  options: ExpandMermaidBlocksOptions = {},
-): Promise<string> {
-  const theme = options.theme ?? 'default'
-  const wrapperClass = options.wrapperClass ?? 'platform-print-mermaid'
-  const matches = [...html.matchAll(MERMAID_BLOCK_PATTERN)]
-  if (matches.length === 0) return html
-
-  const replacements: Array<{ start: number; end: number; text: string }> = []
-
-  for (const match of matches) {
-    const block = match[0]
-    const start = match.index ?? html.indexOf(block)
-    if (start < 0) continue
-    const source = extractMermaidSourceFromHtml(block)
-    if (!source) continue
-    try {
-      const svg = await renderMermaidPreviewSvg(source, { theme })
-      replacements.push({
-        start,
-        end: start + block.length,
-        text: `<figure data-type="mermaid"><div class="${wrapperClass}">${svg}</div></figure>`,
-      })
-    } catch {
-      // Keep source markup when render fails.
-    }
-  }
-
-  if (replacements.length === 0) return html
-
-  replacements.sort((a, b) => b.start - a.start)
-  let result = html
-  for (const replacement of replacements) {
-    result =
-      result.slice(0, replacement.start) +
-      replacement.text +
-      result.slice(replacement.end)
-  }
-  return result
-}
+import type mermaidType from 'mermaid'
+
+export type MermaidPreviewTheme = 'default' | 'dark'
+
+export interface RenderMermaidPreviewSvgOptions {
+  theme?: MermaidPreviewTheme
+}
+
+export interface ExpandMermaidBlocksOptions {
+  theme?: MermaidPreviewTheme
+  wrapperClass?: string
+}
+
+let mermaidPromise: Promise<typeof mermaidType> | null = null
+let mermaidInitializedTheme: MermaidPreviewTheme | null = null
+
+async function loadMermaid(
+  theme: MermaidPreviewTheme,
+): Promise<typeof mermaidType> {
+  mermaidPromise ??= import('mermaid').then(module => module.default)
+  const mermaid = await mermaidPromise
+  if (mermaidInitializedTheme !== theme) {
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      theme,
+      suppressErrorRendering: true,
+    })
+    mermaidInitializedTheme = theme
+  }
+  return mermaid
+}
+
+function platformThemeIsDark(): boolean {
+  if (typeof document === 'undefined') return false
+  return document.documentElement.dataset.platformTheme === 'dark'
+}
+
+function decodeHtmlEntities(text: string): string {
+  return text
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+}
+
+const MERMAID_CODE_PATTERN =
+  /<code\b[^>]*class=["'][^"']*language-mermaid[^"']*["'][^>]*>([\s\S]*?)<\/code>/i
+
+const MERMAID_BLOCK_PATTERN =
+  /<(?:figure|div)\b[^>]*data-type=["']mermaid["'][^>]*>[\s\S]*?<\/(?:figure|div)>/gi
+
+/** Extract mermaid source from serialized editor/shell HTML (regex — safe for `-->`). */
+export function extractMermaidSourceFromHtml(html: string): string {
+  const match = html.match(MERMAID_CODE_PATTERN)
+  return decodeHtmlEntities(match?.[1] ?? '').trim()
+}
+
+export async function renderMermaidPreviewSvg(
+  sourceCode: string,
+  options: RenderMermaidPreviewSvgOptions = {},
+): Promise<string> {
+  const theme = options.theme ?? (platformThemeIsDark() ? 'dark' : 'default')
+  const mermaid = await loadMermaid(theme)
+  const diagram = sourceCode.trim() || 'flowchart TD\n  A[Empty diagram]'
+  const result = await mermaid.render(
+    `platform-mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    diagram,
+  )
+  return result.svg
+}
+
+/** Replace stored mermaid blocks with rendered SVG (print/PDF/static HTML). */
+export async function expandMermaidBlocksForPrint(
+  html: string,
+  options: ExpandMermaidBlocksOptions = {},
+): Promise<string> {
+  const theme = options.theme ?? 'default'
+  const wrapperClass = options.wrapperClass ?? 'platform-print-mermaid'
+  const matches = [...html.matchAll(MERMAID_BLOCK_PATTERN)]
+  if (matches.length === 0) return html
+
+  const replacements: Array<{ start: number; end: number; text: string }> = []
+
+  for (const match of matches) {
+    const block = match[0]
+    const start = match.index ?? html.indexOf(block)
+    if (start < 0) continue
+    const source = extractMermaidSourceFromHtml(block)
+    if (!source) continue
+    try {
+      const svg = await renderMermaidPreviewSvg(source, { theme })
+      replacements.push({
+        start,
+        end: start + block.length,
+        text: `<figure data-type="mermaid"><div class="${wrapperClass}">${svg}</div></figure>`,
+      })
+    } catch {
+      // Keep source markup when render fails.
+    }
+  }
+
+  if (replacements.length === 0) return html
+
+  replacements.sort((a, b) => b.start - a.start)
+  let result = html
+  for (const replacement of replacements) {
+    result =
+      result.slice(0, replacement.start) +
+      replacement.text +
+      result.slice(replacement.end)
+  }
+  return result
+}