@puredesktop/platform-editor 1.0.0-beta.1

package/src/mermaidPreview.ts

@@ -0,0 +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
+}