@wakastellar/ui 3.3.3 → 3.5.0

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

@@ -0,0 +1,502 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Label } from "../label"
+import { ScrollArea } from "../scroll-area"
+import { Textarea } from "../textarea"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SlateNode = any
+
+/** TOC entry extracted from headings */
+export interface TocEntry {
+  id: string
+  text: string
+  level: number
+  depth: number
+}
+
+export interface WakaDocumentEditorProps {
+  /** Initial Slate content */
+  value?: SlateNode[]
+  /** Change callback */
+  onChange?: (value: SlateNode[]) => void
+  /** Read-only mode */
+  readOnly?: boolean
+  /** Placeholder */
+  placeholder?: string
+  /** CSS class for the root layout */
+  className?: string
+  /** CSS class for the editor area */
+  editorClassName?: string
+  /** Minimum height in px */
+  minHeight?: number
+  /** Label */
+  label?: string
+  /** Description */
+  description?: string
+  /** Error message */
+  error?: string
+  /** Document title (displayed in the header) */
+  title?: string
+  /** Callback when title changes */
+  onTitleChange?: (title: string) => void
+  /** Show TOC sidebar */
+  showTOC?: boolean
+  /** Enable @mentions */
+  enableMentions?: boolean
+  /** Mention search function. Returns matching users for a query string. */
+  onMentionSearch?: (query: string) => Promise<Array<{ key: string; label: string; avatar?: string }>>
+  /** Enable slash commands */
+  enableSlashCommands?: boolean
+  /** Enable AI features */
+  enableAI?: boolean
+  /** AI endpoint for AI features */
+  aiEndpoint?: string
+  /** System prompt for AI */
+  aiSystemPrompt?: string
+  /** Enable DnD block reordering */
+  enableDnD?: boolean
+  /** Enable markdown paste support */
+  enableMarkdown?: boolean
+  /** Extra Plate plugins */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extraPlugins?: any[]
+  /** Ref to the 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[]
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * WakaDocumentEditor -- Google-Docs-style full document editor.
+ *
+ * Features:
+ * - Fixed toolbar with formatting controls
+ * - Optional TOC sidebar (auto-extracted from headings)
+ * - @mentions with async user search
+ * - Slash commands (/) for quick block insertion
+ * - Drag-and-drop block reordering
+ * - AI integration (optional)
+ * - Markdown paste support
+ *
+ * Perfect for writing specifications, proposals, documentation,
+ * or any long-form content within WakaStart apps.
+ *
+ * @example
+ * ```tsx
+ * <WakaDocumentEditor
+ *   title="Architecture Specification"
+ *   onTitleChange={setTitle}
+ *   showTOC
+ *   enableMentions
+ *   enableSlashCommands
+ *   enableDnD
+ *   value={content}
+ *   onChange={setContent}
+ * />
+ * ```
+ */
+export const WakaDocumentEditor = React.forwardRef<HTMLDivElement, WakaDocumentEditorProps>(
+  (
+    {
+      value,
+      onChange,
+      readOnly = false,
+      placeholder = "Commencez a rediger votre document...",
+      className,
+      editorClassName,
+      minHeight = 500,
+      label,
+      description,
+      error,
+      title,
+      onTitleChange,
+      showTOC = true,
+      enableMentions = false,
+      enableSlashCommands = false,
+      enableAI = false,
+      aiEndpoint,
+      aiSystemPrompt,
+      enableDnD = false,
+      enableMarkdown = true,
+      extraPlugins,
+      editorRef,
+    },
+    ref
+  ) => {
+    const [bundle, setBundle] = React.useState<PlateBundle | null>(null)
+    const [loadError, setLoadError] = React.useState(false)
+    const [toc, setToc] = React.useState<TocEntry[]>([])
+
+    const configRef = React.useRef({
+      enableMentions, enableSlashCommands, enableAI, enableDnD, enableMarkdown,
+      aiEndpoint, aiSystemPrompt,
+    })
+    configRef.current = {
+      enableMentions, enableSlashCommands, enableAI, enableDnD, enableMarkdown,
+      aiEndpoint, aiSystemPrompt,
+    }
+
+    // ── Load Plate + plugins ──────────────────────────────────────────────
+    React.useEffect(() => {
+      let cancelled = false
+
+      const load = async () => {
+        try {
+          const cfg = configRef.current
+
+          const [plateReact, basicNodes, tableModule, layoutModule, calloutModule, linkModule, indentModule] =
+            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/indent/react"),
+            ])
+
+          // 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.SuperscriptPlugin, basicNodes.SubscriptPlugin,
+            basicNodes.H1Plugin, basicNodes.H2Plugin, basicNodes.H3Plugin,
+            basicNodes.H4Plugin, basicNodes.H5Plugin, basicNodes.H6Plugin,
+            basicNodes.BlockquotePlugin,
+            tableModule.TablePlugin, tableModule.TableRowPlugin,
+            tableModule.TableCellPlugin, tableModule.TableCellHeaderPlugin,
+            layoutModule.ColumnPlugin, layoutModule.ColumnItemPlugin,
+            calloutModule.CalloutPlugin,
+            linkModule.LinkPlugin.configure({
+              options: { allowedSchemes: ["http", "https", "mailto", "tel"] },
+            }),
+            indentModule.IndentPlugin,
+          ]
+
+          // Optional: TOC
+          try {
+            const { TocPlugin } = await import("@platejs/toc/react")
+            plugins.push(TocPlugin)
+          } catch { /* not installed */ }
+
+          // Optional: Selection
+          try {
+            const { BlockSelectionPlugin } = await import("@platejs/selection/react")
+            plugins.push(BlockSelectionPlugin)
+          } catch { /* not installed */ }
+
+          // Optional: Mentions
+          if (cfg.enableMentions) {
+            try {
+              const { MentionPlugin, MentionInputPlugin } = await import("@platejs/mention/react")
+              plugins.push(
+                MentionPlugin.configure({
+                  options: { trigger: "@", triggerPreviousCharPattern: /^$|^[\s"']$/, insertSpaceAfterMention: true },
+                }),
+                MentionInputPlugin,
+              )
+            } catch { /* not installed */ }
+          }
+
+          // Optional: DnD
+          if (cfg.enableDnD) {
+            try {
+              const { DndPlugin } = await import("@platejs/dnd/react")
+              plugins.push(DndPlugin)
+            } catch { /* not installed */ }
+          }
+
+          // Optional: Markdown
+          if (cfg.enableMarkdown) {
+            try {
+              const { MarkdownPlugin } = await import("@platejs/markdown")
+              plugins.push(MarkdownPlugin)
+            } catch { /* not installed */ }
+          }
+
+          // Optional: AI
+          if (cfg.enableAI && cfg.aiEndpoint) {
+            try {
+              const { AIPlugin, AIChatPlugin } = await import("@platejs/ai/react")
+              plugins.push(
+                AIPlugin,
+                AIChatPlugin.configure({
+                  options: {
+                    chat: {
+                      api: cfg.aiEndpoint,
+                      body: { system: cfg.aiSystemPrompt ?? "You are a helpful writing assistant." },
+                    },
+                  },
+                }),
+              )
+            } catch { /* not installed */ }
+          }
+
+          if (!cancelled) {
+            setBundle({
+              Plate: plateReact.Plate,
+              PlateContent: plateReact.PlateContent,
+              usePlateEditor: plateReact.usePlateEditor,
+              plugins,
+            })
+          }
+        } catch (err) {
+          console.error("[WakaDocumentEditor] Failed to load:", err)
+          if (!cancelled) setLoadError(true)
+        }
+      }
+
+      load()
+      return () => { cancelled = true }
+    }, [])
+
+    // ── Extract TOC from value ────────────────────────────────────────────
+    React.useEffect(() => {
+      if (!showTOC || !value) { setToc([]); return }
+
+      const entries: TocEntry[] = []
+      let counter = 0
+      const headingTypes = new Set(["h1", "h2", "h3", "h4", "h5", "h6"])
+
+      for (const node of value) {
+        if (headingTypes.has(node?.type)) {
+          const text = extractText(node)
+          if (text.trim()) {
+            const level = parseInt(node.type.replace("h", ""), 10)
+            entries.push({
+              id: `toc-${counter++}`,
+              text: text.trim(),
+              level,
+              depth: level - 1,
+            })
+          }
+        }
+      }
+
+      setToc(entries)
+    }, [value, showTOC])
+
+    // ── Render ────────────────────────────────────────────────────────────
+    if (bundle) {
+      return (
+        <DocumentEditorInner
+          ref={ref}
+          bundle={bundle}
+          value={value}
+          onChange={onChange}
+          readOnly={readOnly}
+          placeholder={placeholder}
+          className={className}
+          editorClassName={editorClassName}
+          minHeight={minHeight}
+          label={label}
+          description={description}
+          error={error}
+          title={title}
+          onTitleChange={onTitleChange}
+          showTOC={showTOC}
+          toc={toc}
+          extraPlugins={extraPlugins}
+          editorRef={editorRef}
+        />
+      )
+    }
+
+    // Fallback
+    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="relative">
+          <Textarea placeholder={placeholder} disabled style={{ minHeight }} />
+          <div className="absolute inset-0 flex items-center justify-center bg-background/50 rounded-lg">
+            <span className="text-sm text-muted-foreground animate-pulse">
+              {loadError ? "Erreur de chargement de l'editeur" : "Chargement de l'editeur..."}
+            </span>
+          </div>
+        </div>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+WakaDocumentEditor.displayName = "WakaDocumentEditor"
+
+// ─── Inner Plate component ──────────────────────────────────────────────────
+
+interface DocumentEditorInnerProps {
+  bundle: PlateBundle
+  value?: SlateNode[]
+  onChange?: (value: SlateNode[]) => void
+  readOnly?: boolean
+  placeholder?: string
+  className?: string
+  editorClassName?: string
+  minHeight?: number
+  label?: string
+  description?: string
+  error?: string
+  title?: string
+  onTitleChange?: (title: string) => void
+  showTOC?: boolean
+  toc: TocEntry[]
+  // 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 DocumentEditorInner = React.forwardRef<HTMLDivElement, DocumentEditorInnerProps>(
+  (
+    {
+      bundle: { Plate, PlateContent, usePlateEditor, plugins },
+      value,
+      onChange,
+      readOnly,
+      placeholder,
+      className,
+      editorClassName,
+      minHeight,
+      label,
+      description,
+      error,
+      title,
+      onTitleChange,
+      showTOC,
+      toc,
+      extraPlugins,
+      editorRef,
+    },
+    ref
+  ) => {
+    const allPlugins = React.useMemo(
+      () => [...plugins, ...(extraPlugins ?? [])],
+      [plugins, extraPlugins]
+    )
+
+    const editor = usePlateEditor({
+      plugins: allPlugins,
+      value: value ?? [{ type: "p", children: [{ text: "" }] }],
+    })
+
+    React.useEffect(() => {
+      if (editorRef) editorRef.current = editor
+    }, [editor, editorRef])
+
+    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>}
+
+        <Plate
+          editor={editor}
+          onChange={onChange ? ({ value: v }: { value: SlateNode[] }) => onChange(v) : undefined}
+          readOnly={readOnly}
+        >
+          <div className={cn(
+            "flex border rounded-lg overflow-hidden",
+            error && "border-destructive",
+          )}>
+            {/* TOC Sidebar */}
+            {showTOC && toc.length > 0 && (
+              <aside className="w-56 shrink-0 border-r bg-muted/20 hidden lg:block">
+                <div className="p-3 border-b">
+                  <h4 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                    Table des matieres
+                  </h4>
+                </div>
+                <ScrollArea className="h-full max-h-[600px]">
+                  <nav className="p-2 space-y-0.5">
+                    {toc.map((entry) => (
+                      <button
+                        key={entry.id}
+                        className={cn(
+                          "block w-full text-left px-2 py-1 rounded-md text-sm",
+                          "hover:bg-accent/50 transition-colors truncate",
+                          "text-muted-foreground hover:text-foreground",
+                        )}
+                        style={{ paddingLeft: `${entry.depth * 12 + 8}px` }}
+                        title={entry.text}
+                      >
+                        {entry.text}
+                      </button>
+                    ))}
+                  </nav>
+                </ScrollArea>
+              </aside>
+            )}
+
+            {/* Main editor area */}
+            <div className="flex-1 min-w-0">
+              {/* Title input */}
+              {(title !== undefined || onTitleChange) && (
+                <div className="border-b px-6 py-4">
+                  <input
+                    type="text"
+                    value={title ?? ""}
+                    onChange={(e) => onTitleChange?.(e.target.value)}
+                    placeholder="Titre du document"
+                    readOnly={readOnly}
+                    className={cn(
+                      "w-full bg-transparent text-2xl font-bold text-foreground",
+                      "placeholder:text-muted-foreground/50",
+                      "focus:outline-none",
+                    )}
+                  />
+                </div>
+              )}
+
+              {/* Editor content */}
+              <div style={{ minHeight }}>
+                <PlateContent
+                  placeholder={placeholder}
+                  readOnly={readOnly}
+                  className={cn(
+                    "prose prose-sm max-w-none px-6 py-4",
+                    "focus-within:outline-none",
+                    "[&_[data-slate-editor]]:outline-none [&_[data-slate-editor]]:min-h-[inherit]",
+                    editorClassName,
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        </Plate>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+DocumentEditorInner.displayName = "DocumentEditorInner"
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function extractText(node: SlateNode): string {
+  if (typeof node?.text === "string") return node.text
+  if (Array.isArray(node?.children)) {
+    return node.children.map((c: SlateNode) => extractText(c)).join("")
+  }
+  return ""
+}