@wakastellar/ui 3.3.3 → 3.5.0

package/src/components/editor/waka-markdown-editor.tsx

@@ -0,0 +1,395 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Label } from "../label"
+import { Textarea } from "../textarea"
+import { Button } from "../button"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SlateNode = any
+
+export type MarkdownEditorMode = "rich" | "markdown" | "split"
+
+export interface WakaMarkdownEditorProps {
+  /** Markdown string content */
+  markdownValue?: string
+  /** Callback when markdown content changes */
+  onMarkdownChange?: (markdown: string) => void
+  /** Slate value (for rich text mode) */
+  slateValue?: SlateNode[]
+  /** Callback when slate value changes */
+  onSlateChange?: (value: SlateNode[]) => void
+  /** Initial view mode */
+  defaultMode?: MarkdownEditorMode
+  /** Read-only mode */
+  readOnly?: boolean
+  /** Placeholder */
+  placeholder?: string
+  /** CSS class */
+  className?: string
+  /** Editor area CSS class */
+  editorClassName?: string
+  /** Minimum height in px */
+  minHeight?: number
+  /** Label */
+  label?: string
+  /** Description */
+  description?: string
+  /** Error */
+  error?: string
+  /** Extra Plate plugins */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extraPlugins?: any[]
+  /** Ref to editor instance */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editorRef?: React.MutableRefObject<any>
+}
+
+// ─── Plate bundle ────────────────────────────────────────────────────────────
+
+interface PlateBundle {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Plate: React.ComponentType<any>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  PlateContent: React.ComponentType<any>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  usePlateEditor: (config: any) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  plugins: any[]
+  /** Serializes Slate nodes to Markdown */
+  serializeMd: (editor: unknown, opts?: { value?: SlateNode[] }) => string
+  /** Deserializes Markdown to Slate nodes */
+  deserializeMd: (editor: unknown, data: string) => SlateNode[]
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * WakaMarkdownEditor -- Dual-mode rich text / Markdown editor.
+ *
+ * Transparently syncs content between Plate (rich text) and raw Markdown.
+ * Supports three view modes:
+ * - `rich`: WYSIWYG Plate editor (default)
+ * - `markdown`: Raw Markdown textarea with monospace font
+ * - `split`: Side-by-side Plate + Markdown preview
+ *
+ * Uses `@platejs/markdown` for serialization/deserialization.
+ *
+ * Perfect for developer documentation, README editors,
+ * or any context where users need to switch between rich text and Markdown.
+ *
+ * @example
+ * ```tsx
+ * <WakaMarkdownEditor
+ *   markdownValue={md}
+ *   onMarkdownChange={setMd}
+ *   defaultMode="split"
+ * />
+ * ```
+ */
+export const WakaMarkdownEditor = React.forwardRef<HTMLDivElement, WakaMarkdownEditorProps>(
+  (
+    {
+      markdownValue = "",
+      onMarkdownChange,
+      slateValue,
+      onSlateChange,
+      defaultMode = "rich",
+      readOnly = false,
+      placeholder = "Commencez a ecrire...",
+      className,
+      editorClassName,
+      minHeight = 300,
+      label,
+      description,
+      error,
+      extraPlugins,
+      editorRef,
+    },
+    ref
+  ) => {
+    const [mode, setMode] = React.useState<MarkdownEditorMode>(defaultMode)
+    const [bundle, setBundle] = React.useState<PlateBundle | null>(null)
+    const [loadError, setLoadError] = React.useState(false)
+    const [localMd, setLocalMd] = React.useState(markdownValue)
+
+    // Sync external markdown changes
+    React.useEffect(() => { setLocalMd(markdownValue) }, [markdownValue])
+
+    // ── Load Plate ────────────────────────────────────────────────────────
+    React.useEffect(() => {
+      let cancelled = false
+
+      const load = async () => {
+        try {
+          const [plateReact, basicNodes, tableModule, layoutModule, calloutModule, linkModule, markdownModule] =
+            await Promise.all([
+              import("platejs/react"),
+              import("@platejs/basic-nodes/react"),
+              import("@platejs/table/react"),
+              import("@platejs/layout/react"),
+              import("@platejs/callout/react"),
+              import("@platejs/link/react"),
+              import("@platejs/markdown"),
+            ])
+
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const plugins: any[] = [
+            basicNodes.BoldPlugin, basicNodes.ItalicPlugin, basicNodes.UnderlinePlugin,
+            basicNodes.StrikethroughPlugin, basicNodes.CodePlugin, basicNodes.HighlightPlugin,
+            basicNodes.H1Plugin, basicNodes.H2Plugin, basicNodes.H3Plugin,
+            basicNodes.H4Plugin, basicNodes.BlockquotePlugin,
+            tableModule.TablePlugin, tableModule.TableRowPlugin,
+            tableModule.TableCellPlugin, tableModule.TableCellHeaderPlugin,
+            layoutModule.ColumnPlugin, layoutModule.ColumnItemPlugin,
+            calloutModule.CalloutPlugin,
+            linkModule.LinkPlugin.configure({
+              options: { allowedSchemes: ["http", "https", "mailto"] },
+            }),
+            markdownModule.MarkdownPlugin,
+          ]
+
+          if (!cancelled) {
+            setBundle({
+              Plate: plateReact.Plate,
+              PlateContent: plateReact.PlateContent,
+              usePlateEditor: plateReact.usePlateEditor,
+              plugins,
+              serializeMd: markdownModule.serializeMd,
+              deserializeMd: markdownModule.deserializeMd,
+            })
+          }
+        } catch (err) {
+          console.error("[WakaMarkdownEditor] Failed to load:", err)
+          if (!cancelled) setLoadError(true)
+        }
+      }
+
+      load()
+      return () => { cancelled = true }
+    }, [])
+
+    // ── Mode switcher ─────────────────────────────────────────────────────
+    const ModeSwitcher = (
+      <div className="flex items-center gap-1 p-1 border-b bg-muted/30">
+        {(["rich", "markdown", "split"] as MarkdownEditorMode[]).map((m) => (
+          <Button
+            key={m}
+            type="button"
+            variant={mode === m ? "secondary" : "ghost"}
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => setMode(m)}
+          >
+            {m === "rich" ? "Editeur" : m === "markdown" ? "Markdown" : "Split"}
+          </Button>
+        ))}
+      </div>
+    )
+
+    // ── Handle markdown textarea changes ──────────────────────────────────
+    const handleMdChange = React.useCallback(
+      (md: string) => {
+        setLocalMd(md)
+        onMarkdownChange?.(md)
+      },
+      [onMarkdownChange]
+    )
+
+    // ── Render ────────────────────────────────────────────────────────────
+    return (
+      <div ref={ref} className={cn("space-y-1.5", className)}>
+        {label && <Label>{label}</Label>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+        <div className={cn("border rounded-lg overflow-hidden", error && "border-destructive")}>
+          {!readOnly && ModeSwitcher}
+
+          {mode === "markdown" && (
+            <MarkdownPane
+              value={localMd}
+              onChange={handleMdChange}
+              readOnly={readOnly}
+              placeholder={placeholder}
+              minHeight={minHeight}
+              className={editorClassName}
+            />
+          )}
+
+          {mode === "rich" && bundle && (
+            <RichPane
+              bundle={bundle}
+              markdownValue={localMd}
+              slateValue={slateValue}
+              onSlateChange={onSlateChange}
+              onMarkdownChange={onMarkdownChange}
+              readOnly={readOnly}
+              placeholder={placeholder}
+              minHeight={minHeight}
+              className={editorClassName}
+              extraPlugins={extraPlugins}
+              editorRef={editorRef}
+            />
+          )}
+
+          {mode === "split" && bundle && (
+            <div className="flex divide-x" style={{ minHeight }}>
+              <div className="flex-1 min-w-0">
+                <RichPane
+                  bundle={bundle}
+                  markdownValue={localMd}
+                  slateValue={slateValue}
+                  onSlateChange={onSlateChange}
+                  onMarkdownChange={onMarkdownChange}
+                  readOnly={readOnly}
+                  placeholder={placeholder}
+                  minHeight={minHeight}
+                  className={editorClassName}
+                  extraPlugins={extraPlugins}
+                  editorRef={editorRef}
+                />
+              </div>
+              <div className="flex-1 min-w-0">
+                <MarkdownPane
+                  value={localMd}
+                  onChange={handleMdChange}
+                  readOnly={readOnly}
+                  placeholder="Markdown..."
+                  minHeight={minHeight}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Fallback while loading */}
+          {!bundle && mode !== "markdown" && (
+            <div className="relative" style={{ minHeight }}>
+              <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+                <span className="text-sm text-muted-foreground animate-pulse">
+                  {loadError ? "Erreur de chargement" : "Chargement..."}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+WakaMarkdownEditor.displayName = "WakaMarkdownEditor"
+
+// ─── Markdown pane ──────────────────────────────────────────────────────────
+
+function MarkdownPane({
+  value,
+  onChange,
+  readOnly,
+  placeholder,
+  minHeight,
+  className,
+}: {
+  value: string
+  onChange: (v: string) => void
+  readOnly?: boolean
+  placeholder?: string
+  minHeight?: number
+  className?: string
+}) {
+  return (
+    <Textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      style={{ minHeight }}
+      className={cn(
+        "rounded-none border-0 resize-none font-mono text-sm",
+        "focus-visible:ring-0 focus-visible:ring-offset-0",
+        className,
+      )}
+    />
+  )
+}
+
+// ─── Rich pane ──────────────────────────────────────────────────────────────
+
+function RichPane({
+  bundle: { Plate, PlateContent, usePlateEditor, plugins, serializeMd },
+  markdownValue,
+  slateValue,
+  onSlateChange,
+  onMarkdownChange,
+  readOnly,
+  placeholder,
+  minHeight,
+  className,
+  extraPlugins,
+  editorRef,
+}: {
+  bundle: PlateBundle
+  markdownValue: string
+  slateValue?: SlateNode[]
+  onSlateChange?: (v: SlateNode[]) => void
+  onMarkdownChange?: (md: string) => void
+  readOnly?: boolean
+  placeholder?: string
+  minHeight?: number
+  className?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extraPlugins?: any[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editorRef?: React.MutableRefObject<any>
+}) {
+  const allPlugins = React.useMemo(
+    () => [...plugins, ...(extraPlugins ?? [])],
+    [plugins, extraPlugins]
+  )
+
+  const editor = usePlateEditor({
+    plugins: allPlugins,
+    value: slateValue ?? [{ type: "p", children: [{ text: markdownValue || "" }] }],
+  })
+
+  React.useEffect(() => {
+    if (editorRef) editorRef.current = editor
+  }, [editor, editorRef])
+
+  const handleChange = React.useCallback(
+    ({ value: v }: { value: SlateNode[] }) => {
+      onSlateChange?.(v)
+      // Sync to Markdown
+      if (onMarkdownChange && serializeMd) {
+        try {
+          const md = serializeMd(editor, { value: v })
+          onMarkdownChange(md)
+        } catch {
+          // Serialization may fail during intermediate states
+        }
+      }
+    },
+    [editor, onSlateChange, onMarkdownChange, serializeMd]
+  )
+
+  return (
+    <Plate editor={editor} onChange={handleChange} readOnly={readOnly}>
+      <div style={{ minHeight }}>
+        <PlateContent
+          placeholder={placeholder}
+          readOnly={readOnly}
+          className={cn(
+            "prose prose-sm max-w-none p-4",
+            "focus-within:outline-none",
+            "[&_[data-slate-editor]]:outline-none [&_[data-slate-editor]]:min-h-[inherit]",
+            className,
+          )}
+        />
+      </div>
+    </Plate>
+  )
+}