@wakastellar/ui 3.3.3 → 3.5.0

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

@@ -0,0 +1,431 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Label } from "../label"
+import { Textarea } from "../textarea"
+import { WakaEditorToolbar, DEFAULT_TOOLBAR_GROUPS, type ToolbarGroup } from "./waka-editor-toolbar"
+import type { WakaEditorPreset } from "./waka-editor-plugins"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/**
+ * Slate/Plate node type. Using a generic type to avoid tight coupling
+ * with Plate internals while remaining compatible.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type SlateNode = any
+
+export interface WakaEditorProps {
+  /** Initial content as Slate value */
+  value?: SlateNode[]
+  /** Change callback with updated Slate value */
+  onChange?: (value: SlateNode[]) => void
+  /** Read-only mode */
+  readOnly?: boolean
+  /** Placeholder text */
+  placeholder?: string
+  /** Extra CSS class names on the root container */
+  className?: string
+  /** Extra CSS class names on the editable area */
+  editorClassName?: string
+  /** Minimum height of the editable area in px */
+  minHeight?: number
+  /** Label displayed above the editor */
+  label?: string
+  /** Description displayed below the label */
+  description?: string
+  /** Error message */
+  error?: string
+
+  // ── Plugin feature flags ──────────────────────────────────────────────────
+
+  /** Named preset: "minimal" | "standard" | "full" (default: "standard") */
+  preset?: WakaEditorPreset
+  /** Show AI assistant button in toolbar */
+  enableAI?: boolean
+  /** Enable Yjs collaboration (not yet implemented) */
+  enableCollaboration?: boolean
+  /** Enable inline comments (not yet implemented) */
+  enableComments?: boolean
+  /** Enable markdown import/export */
+  enableMarkdown?: boolean
+  /** Enable image and video embeds */
+  enableMedia?: boolean
+  /** Enable @mentions */
+  enableMentions?: boolean
+  /** Enable drag-and-drop reordering */
+  enableDnD?: boolean
+  /** Enable table of contents generation */
+  enableTOC?: boolean
+
+  // ── Toolbar ───────────────────────────────────────────────────────────────
+
+  /** Custom toolbar groups (overrides preset defaults) */
+  toolbarGroups?: ToolbarGroup[]
+  /** Hide the toolbar entirely */
+  hideToolbar?: boolean
+  /** Callback when AI button is clicked */
+  onAIClick?: () => void
+
+  // ── Advanced ──────────────────────────────────────────────────────────────
+
+  /** Extra Plate plugins to add on top of the preset */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extraPlugins?: any[]
+  /** Ref to the internal Plate editor instance */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editorRef?: React.MutableRefObject<any>
+}
+
+// ─── Plate component types (loaded dynamically) ─────────────────────────────
+
+interface PlateComponents {
+  Plate: React.ComponentType<{
+    editor: unknown
+    children?: React.ReactNode
+    onChange?: (ctx: { value: SlateNode[] }) => void
+    readOnly?: boolean
+  }>
+  PlateContent: React.ComponentType<{
+    placeholder?: string
+    className?: string
+    readOnly?: boolean
+  }>
+  usePlateEditor: (config: unknown) => unknown
+}
+
+// ─── Main component ─────────────────────────────────────────────────────────
+
+export const WakaEditor = React.forwardRef<HTMLDivElement, WakaEditorProps>(
+  (
+    {
+      value,
+      onChange,
+      readOnly = false,
+      placeholder = "Commencez a ecrire...",
+      className,
+      editorClassName,
+      minHeight = 200,
+      label,
+      description,
+      error,
+      preset = "standard",
+      enableAI = false,
+      enableMarkdown = false,
+      enableMedia = false,
+      enableMentions = false,
+      enableDnD = false,
+      enableTOC = false,
+      toolbarGroups = DEFAULT_TOOLBAR_GROUPS,
+      hideToolbar = false,
+      onAIClick,
+      extraPlugins,
+      editorRef,
+    },
+    ref
+  ) => {
+    const [plateState, setPlateState] = React.useState<{
+      components: PlateComponents
+      plugins: unknown[]
+    } | null>(null)
+    const [loadError, setLoadError] = React.useState(false)
+
+    // ── Load Plate and plugins asynchronously ─────────────────────────────
+    React.useEffect(() => {
+      let cancelled = false
+
+      const load = async () => {
+        try {
+          const [plateReact, pluginModule] = await Promise.all([
+            import("platejs/react"),
+            import("./waka-editor-plugins"),
+          ])
+
+          // Load core plugins
+          const corePlugins = await pluginModule.loadCorePlugins()
+
+          // Load preset-based optional plugins
+          const presetLoaders = pluginModule.getPresetLoaders(preset)
+          const optionalPluginSets = await Promise.all(
+            presetLoaders.map((loader) => loader())
+          )
+
+          // Load feature-flag plugins
+          const featureLoaders: Promise<unknown[]>[] = []
+          if (enableMarkdown) featureLoaders.push(pluginModule.loadMarkdownPlugin())
+          if (enableMedia) featureLoaders.push(pluginModule.loadMediaPlugins())
+          if (enableMentions) featureLoaders.push(pluginModule.loadMentionPlugins())
+          if (enableDnD) featureLoaders.push(pluginModule.loadDndPlugin())
+          if (enableTOC) featureLoaders.push(pluginModule.loadTocPlugin())
+
+          const featurePluginSets = await Promise.all(featureLoaders)
+
+          const allPlugins = [
+            ...corePlugins,
+            ...optionalPluginSets.flat(),
+            ...featurePluginSets.flat(),
+            ...(extraPlugins ?? []),
+          ]
+
+          if (!cancelled) {
+            setPlateState({
+              components: {
+                Plate: plateReact.Plate as PlateComponents["Plate"],
+                PlateContent: plateReact.PlateContent as PlateComponents["PlateContent"],
+                usePlateEditor: plateReact.usePlateEditor as PlateComponents["usePlateEditor"],
+              },
+              plugins: allPlugins,
+            })
+          }
+        } catch {
+          if (!cancelled) {
+            setLoadError(true)
+          }
+        }
+      }
+
+      load()
+      return () => {
+        cancelled = true
+      }
+    }, [preset, enableMarkdown, enableMedia, enableMentions, enableDnD, enableTOC, extraPlugins])
+
+    // ── Render with Plate ─────────────────────────────────────────────────
+    if (plateState) {
+      return (
+        <PlateEditorInner
+          ref={ref}
+          components={plateState.components}
+          plugins={plateState.plugins}
+          value={value}
+          onChange={onChange}
+          readOnly={readOnly}
+          placeholder={placeholder}
+          className={className}
+          editorClassName={editorClassName}
+          minHeight={minHeight}
+          label={label}
+          description={description}
+          error={error}
+          enableAI={enableAI}
+          toolbarGroups={toolbarGroups}
+          hideToolbar={hideToolbar}
+          onAIClick={onAIClick}
+          editorRef={editorRef}
+        />
+      )
+    }
+
+    // ── Fallback: loading or error ────────────────────────────────────────
+    return (
+      <FallbackEditor
+        ref={ref}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={className}
+        minHeight={minHeight}
+        label={label}
+        description={description}
+        error={error}
+        loading={!loadError}
+        readOnly={readOnly}
+      />
+    )
+  }
+)
+
+WakaEditor.displayName = "WakaEditor"
+
+// ─── Plate inner component ──────────────────────────────────────────────────
+
+interface PlateEditorInnerProps {
+  components: PlateComponents
+  plugins: unknown[]
+  value?: SlateNode[]
+  onChange?: (value: SlateNode[]) => void
+  readOnly?: boolean
+  placeholder?: string
+  className?: string
+  editorClassName?: string
+  minHeight?: number
+  label?: string
+  description?: string
+  error?: string
+  enableAI?: boolean
+  toolbarGroups?: ToolbarGroup[]
+  hideToolbar?: boolean
+  onAIClick?: () => void
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  editorRef?: React.MutableRefObject<any>
+}
+
+const PlateEditorInner = React.forwardRef<HTMLDivElement, PlateEditorInnerProps>(
+  (
+    {
+      components: { Plate, PlateContent, usePlateEditor },
+      plugins,
+      value,
+      onChange,
+      readOnly = false,
+      placeholder,
+      className,
+      editorClassName,
+      minHeight,
+      label,
+      description,
+      error,
+      enableAI,
+      toolbarGroups,
+      hideToolbar,
+      onAIClick,
+      editorRef,
+    },
+    ref
+  ) => {
+    const editor = usePlateEditor({
+      plugins,
+      value: value ?? [{ type: "p", children: [{ text: "" }] }],
+    })
+
+    // Expose editor ref
+    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 as never}
+          onChange={onChange ? ({ value: v }: { value: SlateNode[] }) => onChange(v) : undefined}
+          readOnly={readOnly}
+        >
+          <div
+            className={cn(
+              "border rounded-lg overflow-hidden",
+              error && "border-destructive",
+              readOnly && "opacity-80"
+            )}
+          >
+            {/* Toolbar */}
+            {!hideToolbar && !readOnly && (
+              <WakaEditorToolbar
+                editor={editor}
+                groups={toolbarGroups}
+                enableAI={enableAI}
+                onAIClick={onAIClick}
+              />
+            )}
+
+            {/* Editable area */}
+            <div style={{ minHeight }}>
+              <PlateContent
+                placeholder={placeholder}
+                readOnly={readOnly}
+                className={cn(
+                  "prose prose-sm max-w-none p-3",
+                  "focus-within:outline-none",
+                  "[&_[data-slate-editor]]:outline-none [&_[data-slate-editor]]:min-h-[inherit]",
+                  editorClassName
+                )}
+              />
+            </div>
+          </div>
+        </Plate>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+PlateEditorInner.displayName = "PlateEditorInner"
+
+// ─── Fallback editor (textarea) ─────────────────────────────────────────────
+
+interface FallbackEditorProps {
+  value?: SlateNode[]
+  onChange?: (value: SlateNode[]) => void
+  placeholder?: string
+  className?: string
+  minHeight?: number
+  label?: string
+  description?: string
+  error?: string
+  loading?: boolean
+  readOnly?: boolean
+}
+
+const FallbackEditor = React.forwardRef<HTMLDivElement, FallbackEditorProps>(
+  (
+    {
+      value,
+      onChange,
+      placeholder,
+      className,
+      minHeight,
+      label,
+      description,
+      error,
+      loading,
+      readOnly,
+    },
+    ref
+  ) => {
+    // Extract raw text from Slate value for fallback display
+    const rawText = React.useMemo(() => {
+      if (!value) return ""
+      const extractText = (nodes: SlateNode[]): string => {
+        return nodes
+          .map((node: SlateNode) => {
+            if (typeof node.text === "string") return node.text
+            if (node.children) return extractText(node.children as SlateNode[])
+            return ""
+          })
+          .join("\n")
+      }
+      return extractText(value)
+    }, [value])
+
+    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
+            value={rawText}
+            onChange={(e) => {
+              onChange?.([{ type: "p", children: [{ text: e.target.value }] }])
+            }}
+            placeholder={placeholder}
+            disabled={loading || readOnly}
+            style={{ minHeight }}
+            className={cn(error && "border-destructive")}
+          />
+          {loading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-background/50 rounded-lg">
+              <span className="text-sm text-muted-foreground animate-pulse">
+                Chargement de l&apos;editeur...
+              </span>
+            </div>
+          )}
+        </div>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+FallbackEditor.displayName = "FallbackEditor"

package/src/components/editor/waka-floating-toolbar.tsx

@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  Code,
+  Highlighter,
+  Link,
+  Sparkles,
+  type LucideIcon,
+} from "lucide-react"
+import { cn } from "../../utils/cn"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** A button definition for the floating toolbar */
+export interface FloatingToolbarButton {
+  key: string
+  icon: LucideIcon
+  label: string
+  shortcut?: string
+  /** Execute the action on the editor */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  action: (editor: any) => void
+  /** Check if this mark/block is active */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  isActive?: (editor: any) => boolean
+}
+
+export interface WakaFloatingToolbarProps {
+  /** The Plate editor instance */
+  editor: unknown
+  /** Additional buttons to display */
+  buttons?: FloatingToolbarButton[]
+  /** Whether to show the AI "Ask AI" button */
+  enableAI?: boolean
+  /** Callback when AI button is clicked */
+  onAIClick?: () => void
+  /** CSS class */
+  className?: string
+  /** Whether to show in read-only mode */
+  showWhenReadOnly?: boolean
+}
+
+// ─── Default buttons ─────────────────────────────────────────────────────────
+
+function safeAction(editor: unknown, fn: (e: Record<string, unknown>) => void) {
+  try { fn(editor as Record<string, unknown>) } catch { /* plugin not loaded */ }
+}
+
+function safeIsActive(editor: unknown, type: string): boolean {
+  try { return (editor as { isActive: (t: string) => boolean }).isActive(type) } catch { return false }
+}
+
+/** Default floating toolbar buttons */
+export const DEFAULT_FLOATING_BUTTONS: FloatingToolbarButton[] = [
+  {
+    key: "bold",
+    icon: Bold,
+    label: "Gras",
+    shortcut: "Ctrl+B",
+    action: (e) => safeAction(e, (ed) => (ed as { chain: () => { focus: () => { toggleBold: () => { run: () => void } } } }).chain().focus().toggleBold().run()),
+    isActive: (e) => safeIsActive(e, "bold"),
+  },
+  {
+    key: "italic",
+    icon: Italic,
+    label: "Italique",
+    shortcut: "Ctrl+I",
+    action: (e) => safeAction(e, (ed) => (ed as { chain: () => { focus: () => { toggleItalic: () => { run: () => void } } } }).chain().focus().toggleItalic().run()),
+    isActive: (e) => safeIsActive(e, "italic"),
+  },
+  {
+    key: "underline",
+    icon: Underline,
+    label: "Souligne",
+    shortcut: "Ctrl+U",
+    action: (e) => safeAction(e, (ed) => (ed as { chain: () => { focus: () => { toggleUnderline: () => { run: () => void } } } }).chain().focus().toggleUnderline().run()),
+    isActive: (e) => safeIsActive(e, "underline"),
+  },
+  {
+    key: "strikethrough",
+    icon: Strikethrough,
+    label: "Barre",
+    action: (e) => safeAction(e, (ed) => (ed as { chain: () => { focus: () => { toggleStrike: () => { run: () => void } } } }).chain().focus().toggleStrike().run()),
+    isActive: (e) => safeIsActive(e, "strikethrough"),
+  },
+  {
+    key: "code",
+    icon: Code,
+    label: "Code",
+    shortcut: "Ctrl+E",
+    action: (e) => safeAction(e, (ed) => (ed as { chain: () => { focus: () => { toggleCode: () => { run: () => void } } } }).chain().focus().toggleCode().run()),
+    isActive: (e) => safeIsActive(e, "code"),
+  },
+  {
+    key: "highlight",
+    icon: Highlighter,
+    label: "Surligner",
+    action: (e) => safeAction(e, (ed) => (ed as { chain: () => { focus: () => { toggleHighlight: () => { run: () => void } } } }).chain().focus().toggleHighlight().run()),
+    isActive: (e) => safeIsActive(e, "highlight"),
+  },
+  {
+    key: "link",
+    icon: Link,
+    label: "Lien",
+    shortcut: "Ctrl+K",
+    action: (e) => { try { (e as { tf: { link: { toggle: () => void } } }).tf.link.toggle() } catch { /* */ } },
+    isActive: (e) => safeIsActive(e, "a"),
+  },
+]
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * WakaFloatingToolbar -- Floating contextual toolbar that appears on text selection.
+ *
+ * This component should be placed **inside** a `<Plate>` context. It uses
+ * `@platejs/floating`'s `useFloatingToolbar` hook internally when available,
+ * or falls back to a static inline toolbar.
+ *
+ * For the floating behavior to work, the app must install `@platejs/floating`.
+ *
+ * @example
+ * ```tsx
+ * <Plate editor={editor}>
+ *   <WakaFloatingToolbar editor={editor} enableAI onAIClick={handleAI} />
+ *   <PlateContent />
+ * </Plate>
+ * ```
+ */
+export const WakaFloatingToolbar = React.forwardRef<HTMLDivElement, WakaFloatingToolbarProps>(
+  (
+    {
+      editor,
+      buttons = DEFAULT_FLOATING_BUTTONS,
+      enableAI = false,
+      onAIClick,
+      className,
+    },
+    ref
+  ) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [floatingHook, setFloatingHook] = React.useState<any>(null)
+
+    React.useEffect(() => {
+      import("@platejs/floating")
+        .then((mod) => {
+          if (mod.useFloatingToolbar) {
+            setFloatingHook(() => mod.useFloatingToolbar)
+          }
+        })
+        .catch(() => {
+          // @platejs/floating not installed, use static fallback
+        })
+    }, [])
+
+    const allButtons = React.useMemo(() => {
+      if (!enableAI) return buttons
+      return [
+        ...buttons,
+        {
+          key: "ai",
+          icon: Sparkles,
+          label: "Demander a l'IA",
+          action: () => onAIClick?.(),
+          isActive: () => false,
+        } as FloatingToolbarButton,
+      ]
+    }, [buttons, enableAI, onAIClick])
+
+    // If floating hook is available, use it for positioning
+    // Otherwise render a static toolbar bar
+    return (
+      <FloatingToolbarContent
+        ref={ref}
+        editor={editor}
+        buttons={allButtons}
+        className={className}
+        floatingHook={floatingHook}
+      />
+    )
+  }
+)
+
+WakaFloatingToolbar.displayName = "WakaFloatingToolbar"
+
+// ─── Inner rendering ────────────────────────────────────────────────────────
+
+interface FloatingToolbarContentProps {
+  editor: unknown
+  buttons: FloatingToolbarButton[]
+  className?: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  floatingHook: any
+}
+
+const FloatingToolbarContent = React.forwardRef<HTMLDivElement, FloatingToolbarContentProps>(
+  ({ editor, buttons, className, floatingHook }, ref) => {
+    // Use floating positioning if available
+    const floating = floatingHook
+      ? floatingHook({ editor })
+      : { ref: null, hidden: false, props: {} }
+
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        if (typeof ref === "function") ref(node)
+        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
+        if (floating.ref) {
+          if (typeof floating.ref === "function") floating.ref(node)
+          else floating.ref.current = node
+        }
+      },
+      [ref, floating.ref]
+    )
+
+    if (floating.hidden) return null
+
+    return (
+      <div
+        ref={mergedRef}
+        {...floating.props}
+        className={cn(
+          "flex items-center gap-0.5 p-1",
+          "rounded-lg border bg-popover shadow-lg",
+          "animate-in fade-in-0 zoom-in-95",
+          className
+        )}
+        role="toolbar"
+        aria-label="Barre d'outils flottante"
+      >
+        {buttons.map((btn, i) => {
+          const active = btn.isActive?.(editor) ?? false
+          const Icon = btn.icon
+          const title = btn.shortcut ? `${btn.label} (${btn.shortcut})` : btn.label
+
+          return (
+            <button
+              key={btn.key}
+              type="button"
+              title={title}
+              aria-label={btn.label}
+              aria-pressed={active}
+              className={cn(
+                "inline-flex h-7 w-7 items-center justify-center rounded-md",
+                "text-sm transition-colors",
+                active
+                  ? "bg-accent text-accent-foreground"
+                  : "hover:bg-accent/50 text-foreground/70 hover:text-foreground"
+              )}
+              onMouseDown={(e) => {
+                e.preventDefault() // Keep selection
+                btn.action(editor)
+              }}
+            >
+              <Icon className="h-3.5 w-3.5" />
+            </button>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+FloatingToolbarContent.displayName = "FloatingToolbarContent"