@wakastellar/ui 3.3.3 → 3.5.0

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

@@ -0,0 +1,358 @@
+"use client"
+
+import * as React from "react"
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  Code,
+  Highlighter,
+  Heading1,
+  Heading2,
+  Heading3,
+  Quote,
+  Table,
+  Columns2,
+  Link,
+  Image,
+  Minus,
+  Sparkles,
+  MessageSquarePlus,
+  AlignLeft,
+  type LucideIcon,
+} from "lucide-react"
+import { Button } from "../button"
+import { Separator } from "../separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "../tooltip"
+import { cn } from "../../utils/cn"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export type ToolbarAction =
+  | "bold"
+  | "italic"
+  | "underline"
+  | "strikethrough"
+  | "code"
+  | "highlight"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "blockquote"
+  | "callout"
+  | "table"
+  | "columns"
+  | "link"
+  | "image"
+  | "separator"
+  | "ai"
+
+/** A group of toolbar buttons rendered together with separators between groups */
+export type ToolbarGroup = ToolbarAction[]
+
+export interface WakaEditorToolbarProps {
+  /** Button groups to render */
+  groups?: ToolbarGroup[]
+  /** The Plate editor instance (typed as unknown to avoid tight coupling) */
+  editor: unknown
+  /** Extra CSS class names */
+  className?: string
+  /** Whether to show AI button */
+  enableAI?: boolean
+  /** Callback when AI button is clicked */
+  onAIClick?: () => void
+}
+
+// ─── Button registry ─────────────────────────────────────────────────────────
+
+interface ToolbarButtonConfig {
+  icon: LucideIcon
+  label: string
+  shortcut?: string
+  action: (editor: Record<string, unknown>) => void
+  isActive?: (editor: Record<string, unknown>) => boolean
+}
+
+function safeChain(editor: Record<string, unknown>, fn: (chain: Record<string, unknown>) => void) {
+  try {
+    const chain = (editor as { chain: () => { focus: () => Record<string, unknown> } }).chain().focus()
+    fn(chain)
+  } catch {
+    // Plugin not loaded, silently ignore
+  }
+}
+
+function safeIsActive(editor: Record<string, unknown>, type: string, attrs?: object): boolean {
+  try {
+    return (editor as { isActive: (t: string, a?: object) => boolean }).isActive(type, attrs)
+  } catch {
+    return false
+  }
+}
+
+const BUTTON_REGISTRY: Record<ToolbarAction, ToolbarButtonConfig> = {
+  bold: {
+    icon: Bold,
+    label: "Gras",
+    shortcut: "Ctrl+B",
+    action: (e) => safeChain(e, (c) => (c as { toggleBold: () => { run: () => void } }).toggleBold().run()),
+    isActive: (e) => safeIsActive(e, "bold"),
+  },
+  italic: {
+    icon: Italic,
+    label: "Italique",
+    shortcut: "Ctrl+I",
+    action: (e) => safeChain(e, (c) => (c as { toggleItalic: () => { run: () => void } }).toggleItalic().run()),
+    isActive: (e) => safeIsActive(e, "italic"),
+  },
+  underline: {
+    icon: Underline,
+    label: "Souligné",
+    shortcut: "Ctrl+U",
+    action: (e) => safeChain(e, (c) => (c as { toggleUnderline: () => { run: () => void } }).toggleUnderline().run()),
+    isActive: (e) => safeIsActive(e, "underline"),
+  },
+  strikethrough: {
+    icon: Strikethrough,
+    label: "Barré",
+    shortcut: "Ctrl+Shift+S",
+    action: (e) => safeChain(e, (c) => (c as { toggleStrike: () => { run: () => void } }).toggleStrike().run()),
+    isActive: (e) => safeIsActive(e, "strikethrough"),
+  },
+  code: {
+    icon: Code,
+    label: "Code",
+    shortcut: "Ctrl+E",
+    action: (e) => safeChain(e, (c) => (c as { toggleCode: () => { run: () => void } }).toggleCode().run()),
+    isActive: (e) => safeIsActive(e, "code"),
+  },
+  highlight: {
+    icon: Highlighter,
+    label: "Surligné",
+    action: (e) => safeChain(e, (c) => (c as { toggleHighlight: () => { run: () => void } }).toggleHighlight().run()),
+    isActive: (e) => safeIsActive(e, "highlight"),
+  },
+  h1: {
+    icon: Heading1,
+    label: "Titre 1",
+    action: (e) => {
+      try {
+        (e as { tf: { h1: { toggle: () => void } } }).tf.h1.toggle()
+      } catch {
+        safeChain(e, (c) => (c as { toggleHeading: (o: { level: number }) => { run: () => void } }).toggleHeading({ level: 1 }).run())
+      }
+    },
+    isActive: (e) => safeIsActive(e, "heading", { level: 1 }),
+  },
+  h2: {
+    icon: Heading2,
+    label: "Titre 2",
+    action: (e) => {
+      try {
+        (e as { tf: { h2: { toggle: () => void } } }).tf.h2.toggle()
+      } catch {
+        safeChain(e, (c) => (c as { toggleHeading: (o: { level: number }) => { run: () => void } }).toggleHeading({ level: 2 }).run())
+      }
+    },
+    isActive: (e) => safeIsActive(e, "heading", { level: 2 }),
+  },
+  h3: {
+    icon: Heading3,
+    label: "Titre 3",
+    action: (e) => {
+      try {
+        (e as { tf: { h3: { toggle: () => void } } }).tf.h3.toggle()
+      } catch {
+        safeChain(e, (c) => (c as { toggleHeading: (o: { level: number }) => { run: () => void } }).toggleHeading({ level: 3 }).run())
+      }
+    },
+    isActive: (e) => safeIsActive(e, "heading", { level: 3 }),
+  },
+  blockquote: {
+    icon: Quote,
+    label: "Citation",
+    action: (e) => {
+      try {
+        (e as { tf: { blockquote: { toggle: () => void } } }).tf.blockquote.toggle()
+      } catch {
+        safeChain(e, (c) => (c as { toggleBlockquote: () => { run: () => void } }).toggleBlockquote().run())
+      }
+    },
+    isActive: (e) => safeIsActive(e, "blockquote"),
+  },
+  callout: {
+    icon: MessageSquarePlus,
+    label: "Callout",
+    action: (e) => {
+      try {
+        (e as { tf: { callout: { insert: () => void } } }).tf.callout.insert()
+      } catch {
+        // Callout plugin not loaded
+      }
+    },
+    isActive: (e) => safeIsActive(e, "callout"),
+  },
+  table: {
+    icon: Table,
+    label: "Tableau",
+    action: (e) => {
+      try {
+        (e as { tf: { table: { insert: (o: { rows: number; cols: number }) => void } } }).tf.table.insert({ rows: 3, cols: 3 })
+      } catch {
+        // Table plugin not loaded
+      }
+    },
+    isActive: (e) => safeIsActive(e, "table"),
+  },
+  columns: {
+    icon: Columns2,
+    label: "Colonnes",
+    action: (e) => {
+      try {
+        (e as { tf: { column: { insert: () => void } } }).tf.column.insert()
+      } catch {
+        // Column plugin not loaded
+      }
+    },
+    isActive: (e) => safeIsActive(e, "column_group"),
+  },
+  link: {
+    icon: Link,
+    label: "Lien",
+    shortcut: "Ctrl+K",
+    action: (e) => {
+      try {
+        (e as { tf: { link: { toggle: () => void } } }).tf.link.toggle()
+      } catch {
+        // Link plugin not loaded
+      }
+    },
+    isActive: (e) => safeIsActive(e, "a"),
+  },
+  image: {
+    icon: Image,
+    label: "Image",
+    action: (e) => {
+      try {
+        (e as { tf: { image: { insert: (o: { url: string }) => void } } }).tf.image.insert({ url: "" })
+      } catch {
+        // Image plugin not loaded
+      }
+    },
+    isActive: () => false,
+  },
+  separator: {
+    icon: Minus,
+    label: "Séparateur",
+    action: (e) => {
+      try {
+        safeChain(e, (c) => (c as { insertBreak: () => { run: () => void } }).insertBreak().run())
+      } catch {
+        // silent
+      }
+    },
+    isActive: () => false,
+  },
+  ai: {
+    icon: Sparkles,
+    label: "Assistant IA",
+    action: () => {
+      // Handled externally via onAIClick
+    },
+    isActive: () => false,
+  },
+}
+
+// ─── Default groups ──────────────────────────────────────────────────────────
+
+export const DEFAULT_TOOLBAR_GROUPS: ToolbarGroup[] = [
+  ["bold", "italic", "underline", "strikethrough", "code", "highlight"],
+  ["h1", "h2", "h3"],
+  ["blockquote", "callout", "table", "columns"],
+  ["link", "image", "separator"],
+]
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export function WakaEditorToolbar({
+  groups = DEFAULT_TOOLBAR_GROUPS,
+  editor,
+  className,
+  enableAI = false,
+  onAIClick,
+}: WakaEditorToolbarProps) {
+  const allGroups = React.useMemo(() => {
+    if (enableAI) {
+      return [...groups, ["ai"] as ToolbarGroup]
+    }
+    return groups
+  }, [groups, enableAI])
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div
+        role="toolbar"
+        aria-label="Barre d'outils de formatage"
+        className={cn(
+          "flex flex-wrap items-center gap-0.5 p-1",
+          "border-b bg-muted/30",
+          className
+        )}
+      >
+        {allGroups.map((group, groupIndex) => (
+          <React.Fragment key={groupIndex}>
+            {groupIndex > 0 && (
+              <Separator orientation="vertical" className="mx-1 h-6" />
+            )}
+            {group.map((action) => {
+              const config = BUTTON_REGISTRY[action]
+              if (!config) return null
+
+              const isActive = config.isActive?.(editor as Record<string, unknown>) ?? false
+              const tooltipText = config.shortcut
+                ? `${config.label} (${config.shortcut})`
+                : config.label
+
+              const Icon = config.icon
+
+              return (
+                <Tooltip key={action}>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      variant={isActive ? "secondary" : "ghost"}
+                      size="icon"
+                      className="h-7 w-7"
+                      onClick={() => {
+                        if (action === "ai" && onAIClick) {
+                          onAIClick()
+                          return
+                        }
+                        config.action(editor as Record<string, unknown>)
+                      }}
+                      aria-label={config.label}
+                      aria-pressed={isActive}
+                    >
+                      <Icon className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className="text-xs">
+                    {tooltipText}
+                  </TooltipContent>
+                </Tooltip>
+              )
+            })}
+          </React.Fragment>
+        ))}
+      </div>
+    </TooltipProvider>
+  )
+}
+
+WakaEditorToolbar.displayName = "WakaEditorToolbar"