@wakastellar/ui 3.3.3 → 3.5.0

package/src/components/editor/blocks/waka-diagram-block.tsx

@@ -0,0 +1,293 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../utils/cn"
+import type { PlateElementProps } from "../waka-editor-elements"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export const DIAGRAM_BLOCK_TYPE = "diagram" as const
+
+/** Supported diagram syntax types */
+export type DiagramSyntax = "mermaid" | "plantuml" | "excalidraw"
+
+/** Slate node for diagram blocks */
+export interface DiagramElement {
+  type: typeof DIAGRAM_BLOCK_TYPE
+  /** Diagram syntax type */
+  syntax: DiagramSyntax
+  /** Raw source code of the diagram */
+  source: string
+  /** Optional title/caption */
+  caption?: string
+  children: Array<{ text: string }>
+}
+
+export interface WakaDiagramBlockProps extends PlateElementProps {
+  element?: DiagramElement & Record<string, unknown>
+  /**
+   * External render function: takes diagram source and syntax,
+   * returns sanitized SVG string or HTML.
+   *
+   * IMPORTANT: The consuming application is responsible for sanitizing
+   * the returned HTML (e.g. using DOMPurify) before it is rendered.
+   */
+  onRender?: (source: string, syntax: DiagramSyntax) => Promise<string>
+}
+
+// ============================================================================
+// Syntax Label
+// ============================================================================
+
+const SYNTAX_CONFIG: Record<DiagramSyntax, { label: string; color: string; icon: string }> = {
+  mermaid: {
+    label: "Mermaid",
+    color: "text-pink-600 dark:text-pink-400 bg-pink-50 dark:bg-pink-500/10",
+    icon: "M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z",
+  },
+  plantuml: {
+    label: "PlantUML",
+    color: "text-teal-600 dark:text-teal-400 bg-teal-50 dark:bg-teal-500/10",
+    icon: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6z",
+  },
+  excalidraw: {
+    label: "Excalidraw",
+    color: "text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10",
+    icon: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z",
+  },
+}
+
+// ============================================================================
+// Element Component
+// ============================================================================
+
+/**
+ * WakaDiagramBlock - A Plate.js block that embeds a diagram editor (Mermaid/PlantUML/Excalidraw)
+ * inline in the document. The user writes diagram source code and sees the rendered
+ * output below.
+ *
+ * The rendering is delegated to an external `onRender` callback, allowing the consuming
+ * app to use mermaid.js, kroki.io, or any other renderer. The consuming app MUST sanitize
+ * the rendered output (e.g. using DOMPurify) before returning it.
+ *
+ * If no `onRender` is provided, only the source code is displayed.
+ *
+ * Register in Plate editor:
+ * ```ts
+ * components: {
+ *   [DIAGRAM_BLOCK_TYPE]: (props) => <WakaDiagramBlock {...props} onRender={myRenderer} />,
+ * }
+ * ```
+ */
+export function WakaDiagramBlock({
+  attributes,
+  children,
+  element,
+  className,
+  onRender,
+}: WakaDiagramBlockProps) {
+  const el = element as DiagramElement | undefined
+  const syntax = el?.syntax || "mermaid"
+  const source = el?.source || ""
+  const config = SYNTAX_CONFIG[syntax]
+
+  const [isRendering, setIsRendering] = React.useState(false)
+  const [renderError, setRenderError] = React.useState<string | null>(null)
+  const [showSource, setShowSource] = React.useState(!onRender)
+  const previewRef = React.useRef<HTMLDivElement>(null)
+
+  // Trigger render when source changes, inject result safely via DOM ref
+  React.useEffect(() => {
+    if (!source || !onRender || showSource) return
+    let cancelled = false
+
+    const render = async () => {
+      setIsRendering(true)
+      setRenderError(null)
+      try {
+        const result = await onRender(source, syntax)
+        if (!cancelled && previewRef.current) {
+          // Clear previous content
+          previewRef.current.textContent = ""
+          // Parse the sanitized HTML and append as DOM nodes
+          const parser = new DOMParser()
+          const doc = parser.parseFromString(result, "text/html")
+          const fragment = document.createDocumentFragment()
+          Array.from(doc.body.childNodes).forEach((node) => {
+            fragment.appendChild(document.importNode(node, true))
+          })
+          previewRef.current.appendChild(fragment)
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setRenderError(err instanceof Error ? err.message : "Render failed")
+        }
+      } finally {
+        if (!cancelled) setIsRendering(false)
+      }
+    }
+
+    // Debounce rendering
+    const timeout = setTimeout(render, 500)
+    return () => {
+      cancelled = true
+      clearTimeout(timeout)
+    }
+  }, [source, syntax, onRender, showSource])
+
+  return (
+    <div
+      {...attributes}
+      contentEditable={false}
+      className={cn(
+        "my-4 rounded-lg overflow-hidden border border-border shadow-sm",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b border-border">
+        <div className="flex items-center gap-2">
+          <svg
+            className={cn("h-4 w-4", config.color.split(" ")[0])}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            aria-hidden="true"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d={config.icon} />
+          </svg>
+          <span className={cn("text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded", config.color)}>
+            {config.label}
+          </span>
+          {el?.caption && (
+            <span className="text-xs text-muted-foreground ml-2">{el.caption}</span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1">
+          {/* Toggle source/preview */}
+          <button
+            type="button"
+            onClick={() => setShowSource(true)}
+            className={cn(
+              "px-2 py-1 rounded text-[10px] font-medium transition-colors",
+              showSource
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            Source
+          </button>
+          <button
+            type="button"
+            onClick={() => setShowSource(false)}
+            className={cn(
+              "px-2 py-1 rounded text-[10px] font-medium transition-colors",
+              !showSource
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            Preview
+          </button>
+        </div>
+      </div>
+
+      {/* Source code */}
+      {showSource && (
+        <div className="border-b border-border">
+          <pre className={cn(
+            "text-[12px] font-mono leading-relaxed p-4 overflow-x-auto",
+            "bg-gray-950 dark:bg-gray-900 text-gray-100",
+            "max-h-[300px] overflow-y-auto"
+          )}>
+            <code>{source || `graph TD\n    A[Start] --> B[Process]\n    B --> C{Decision}\n    C -->|Yes| D[Result A]\n    C -->|No| E[Result B]`}</code>
+          </pre>
+        </div>
+      )}
+
+      {/* Rendered preview */}
+      {!showSource && (
+        <div className="p-4 bg-white dark:bg-gray-950 min-h-[120px] flex items-center justify-center">
+          {isRendering ? (
+            <div className="flex flex-col items-center gap-2 text-muted-foreground">
+              <svg className="h-6 w-6 animate-spin" viewBox="0 0 24 24" fill="none">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              <span className="text-xs">Rendering diagram...</span>
+            </div>
+          ) : renderError ? (
+            <div className="flex flex-col items-center gap-2 text-destructive">
+              <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+              <span className="text-xs">{renderError}</span>
+            </div>
+          ) : !onRender ? (
+            <div className="flex flex-col items-center gap-2 text-muted-foreground">
+              <svg className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d={config.icon} />
+              </svg>
+              <span className="text-xs">Provide an onRender callback to see the diagram preview</span>
+              <button
+                type="button"
+                onClick={() => setShowSource(true)}
+                className="text-xs text-primary hover:underline"
+              >
+                View source instead
+              </button>
+            </div>
+          ) : (
+            <div
+              ref={previewRef}
+              className="diagram-rendered w-full [&_svg]:max-w-full [&_svg]:h-auto"
+            />
+          )}
+        </div>
+      )}
+
+      {/* Hidden Slate children */}
+      <div className="hidden">{children}</div>
+    </div>
+  )
+}
+
+WakaDiagramBlock.displayName = "WakaDiagramBlock"
+
+// ============================================================================
+// Node Factory
+// ============================================================================
+
+export function createDiagramNodes(options?: Partial<Omit<DiagramElement, "type" | "children">>): DiagramElement[] {
+  return [
+    {
+      type: DIAGRAM_BLOCK_TYPE,
+      syntax: options?.syntax || "mermaid",
+      source: options?.source || "graph TD\n    A[Start] --> B[Process]\n    B --> C{Decision}\n    C -->|Yes| D[Result A]\n    C -->|No| E[Result B]",
+      caption: options?.caption,
+      children: [{ text: "" }],
+    },
+  ]
+}
+
+export async function createDiagramPlugin(onRender?: (source: string, syntax: DiagramSyntax) => Promise<string>) {
+  try {
+    const { createPlatePlugin } = await import("platejs/react")
+    return createPlatePlugin({
+      key: DIAGRAM_BLOCK_TYPE,
+      node: {
+        isElement: true,
+        isVoid: true,
+        type: DIAGRAM_BLOCK_TYPE,
+        component: (props: WakaDiagramBlockProps) => <WakaDiagramBlock {...props} onRender={onRender} />,
+      },
+    })
+  } catch {
+    console.warn("[WakaDiagramBlock] platejs not installed")
+    return null
+  }
+}