@wakastellar/ui 3.3.3 → 3.5.0

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

@@ -0,0 +1,392 @@
+"use client"
+
+import * as React from "react"
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  Table,
+  Columns2,
+  Image,
+  Code,
+  Minus,
+  Quote,
+  MessageSquarePlus,
+  List,
+  ListOrdered,
+  Link,
+  Sparkles,
+  type LucideIcon,
+} from "lucide-react"
+import { cn } from "../../utils/cn"
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** A single slash command entry */
+export interface SlashCommand {
+  /** Unique key used for filtering */
+  key: string
+  /** Display label */
+  label: string
+  /** Optional description shown below the label */
+  description?: string
+  /** Lucide icon component */
+  icon: LucideIcon
+  /** Group name (commands are visually grouped) */
+  group: string
+  /** Search keywords for filtering */
+  keywords?: string[]
+  /**
+   * Action to execute when the command is selected.
+   * Receives the Plate editor instance.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  action: (editor: any) => void
+}
+
+export interface WakaSlashMenuProps {
+  /** Commands to display in the menu */
+  commands?: SlashCommand[]
+  /** CSS class for the menu container */
+  className?: string
+  /** Callback when a command is selected. Receives the command key. */
+  onSelect?: (key: string) => void
+}
+
+// ─── Default commands ────────────────────────────────────────────────────────
+
+/** Default slash commands for WakaStart editors */
+export const DEFAULT_SLASH_COMMANDS: SlashCommand[] = [
+  // Basic blocks
+  {
+    key: "h1",
+    label: "Titre 1",
+    description: "Titre principal de section",
+    icon: Heading1,
+    group: "Blocs de base",
+    keywords: ["heading", "titre", "h1"],
+    action: (e) => { try { e.tf.h1.toggle() } catch { /* */ } },
+  },
+  {
+    key: "h2",
+    label: "Titre 2",
+    description: "Sous-titre de section",
+    icon: Heading2,
+    group: "Blocs de base",
+    keywords: ["heading", "titre", "h2"],
+    action: (e) => { try { e.tf.h2.toggle() } catch { /* */ } },
+  },
+  {
+    key: "h3",
+    label: "Titre 3",
+    description: "Titre de sous-section",
+    icon: Heading3,
+    group: "Blocs de base",
+    keywords: ["heading", "titre", "h3"],
+    action: (e) => { try { e.tf.h3.toggle() } catch { /* */ } },
+  },
+  {
+    key: "bulletList",
+    label: "Liste a puces",
+    description: "Liste non ordonnee",
+    icon: List,
+    group: "Blocs de base",
+    keywords: ["bullet", "list", "unordered", "puces"],
+    action: (e) => { try { e.chain().focus().toggleBulletList().run() } catch { /* */ } },
+  },
+  {
+    key: "numberedList",
+    label: "Liste numerotee",
+    description: "Liste ordonnee",
+    icon: ListOrdered,
+    group: "Blocs de base",
+    keywords: ["numbered", "list", "ordered", "numerotee"],
+    action: (e) => { try { e.chain().focus().toggleOrderedList().run() } catch { /* */ } },
+  },
+  {
+    key: "blockquote",
+    label: "Citation",
+    description: "Bloc de citation",
+    icon: Quote,
+    group: "Blocs de base",
+    keywords: ["quote", "citation", "blockquote"],
+    action: (e) => { try { e.tf.blockquote.toggle() } catch { /* */ } },
+  },
+  // Advanced blocks
+  {
+    key: "table",
+    label: "Tableau",
+    description: "Inserer un tableau 3x3",
+    icon: Table,
+    group: "Blocs avances",
+    keywords: ["table", "tableau", "grid"],
+    action: (e) => { try { e.tf.table.insert({ rows: 3, cols: 3 }) } catch { /* */ } },
+  },
+  {
+    key: "columns",
+    label: "Colonnes",
+    description: "Mise en page multi-colonnes",
+    icon: Columns2,
+    group: "Blocs avances",
+    keywords: ["column", "colonne", "layout", "mise en page"],
+    action: (e) => { try { e.tf.column.insert() } catch { /* */ } },
+  },
+  {
+    key: "callout",
+    label: "Callout",
+    description: "Encart d'information colore",
+    icon: MessageSquarePlus,
+    group: "Blocs avances",
+    keywords: ["callout", "alert", "info", "encart"],
+    action: (e) => { try { e.tf.callout.insert() } catch { /* */ } },
+  },
+  {
+    key: "codeBlock",
+    label: "Bloc de code",
+    description: "Code source avec coloration",
+    icon: Code,
+    group: "Blocs avances",
+    keywords: ["code", "pre", "source"],
+    action: (e) => { try { e.chain().focus().toggleCodeBlock().run() } catch { /* */ } },
+  },
+  // Insertions
+  {
+    key: "link",
+    label: "Lien",
+    description: "Inserer un lien hypertexte",
+    icon: Link,
+    group: "Insertions",
+    keywords: ["link", "lien", "url", "href"],
+    action: (e) => { try { e.tf.link.toggle() } catch { /* */ } },
+  },
+  {
+    key: "image",
+    label: "Image",
+    description: "Inserer une image",
+    icon: Image,
+    group: "Insertions",
+    keywords: ["image", "photo", "picture", "img"],
+    action: (e) => { try { e.tf.image.insert({ url: "" }) } catch { /* */ } },
+  },
+  {
+    key: "divider",
+    label: "Separateur",
+    description: "Ligne horizontale de separation",
+    icon: Minus,
+    group: "Insertions",
+    keywords: ["divider", "separator", "hr", "line"],
+    action: (e) => { try { e.chain().focus().insertBreak().run() } catch { /* */ } },
+  },
+  // AI
+  {
+    key: "ai",
+    label: "Demander a l'IA",
+    description: "Generer du contenu avec l'assistant IA",
+    icon: Sparkles,
+    group: "IA",
+    keywords: ["ai", "ia", "assistant", "generate", "generer"],
+    action: () => {
+      // AI action is typically handled by the AI plugin
+      // This acts as a trigger for the AIChatPlugin
+    },
+  },
+]
+
+// ─── Slash menu rendering component ─────────────────────────────────────────
+
+/**
+ * WakaSlashMenu -- Configurable slash command palette.
+ *
+ * This component is designed to be used **inside** a Plate editor context
+ * as the combobox renderer for the `@platejs/combobox` SlashPlugin,
+ * or standalone as a command registry.
+ *
+ * When used standalone, provide `onSelect` to receive the selected command key.
+ * The consuming app is responsible for connecting it to the editor.
+ *
+ * @example
+ * ```tsx
+ * <WakaSlashMenu
+ *   commands={[...DEFAULT_SLASH_COMMANDS, myCustomCommand]}
+ *   onSelect={(key) => console.log("Selected:", key)}
+ * />
+ * ```
+ */
+export function WakaSlashMenu({
+  commands = DEFAULT_SLASH_COMMANDS,
+  className,
+  onSelect,
+}: WakaSlashMenuProps) {
+  const [search, setSearch] = React.useState("")
+  const [activeIndex, setActiveIndex] = React.useState(0)
+  const listRef = React.useRef<HTMLDivElement>(null)
+
+  // Filter commands
+  const filtered = React.useMemo(() => {
+    if (!search) return commands
+    const q = search.toLowerCase()
+    return commands.filter(
+      (cmd) =>
+        cmd.label.toLowerCase().includes(q) ||
+        cmd.key.toLowerCase().includes(q) ||
+        cmd.keywords?.some((kw) => kw.toLowerCase().includes(q))
+    )
+  }, [commands, search])
+
+  // Group commands
+  const groups = React.useMemo(() => {
+    const map = new Map<string, SlashCommand[]>()
+    for (const cmd of filtered) {
+      const group = cmd.group || "Autre"
+      if (!map.has(group)) map.set(group, [])
+      map.get(group)!.push(cmd)
+    }
+    return map
+  }, [filtered])
+
+  // Flatten for keyboard nav
+  const flatItems = React.useMemo(() => filtered, [filtered])
+
+  // Keyboard navigation
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault()
+        setActiveIndex((i) => Math.min(i + 1, flatItems.length - 1))
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault()
+        setActiveIndex((i) => Math.max(i - 1, 0))
+      } else if (e.key === "Enter" && flatItems[activeIndex]) {
+        e.preventDefault()
+        onSelect?.(flatItems[activeIndex].key)
+      }
+    },
+    [flatItems, activeIndex, onSelect]
+  )
+
+  // Reset active index on search change
+  React.useEffect(() => setActiveIndex(0), [search])
+
+  return (
+    <div
+      ref={listRef}
+      className={cn(
+        "w-72 max-h-80 overflow-y-auto",
+        "rounded-lg border bg-popover shadow-lg",
+        "p-1",
+        className
+      )}
+      role="listbox"
+      onKeyDown={handleKeyDown}
+    >
+      {/* Search input */}
+      <div className="px-2 pb-1.5">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Rechercher..."
+          className={cn(
+            "w-full rounded-md border bg-background px-2 py-1.5",
+            "text-sm placeholder:text-muted-foreground",
+            "focus:outline-none focus:ring-1 focus:ring-ring"
+          )}
+          autoFocus
+        />
+      </div>
+
+      {/* Commands */}
+      {flatItems.length === 0 && (
+        <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+          Aucune commande trouvee
+        </div>
+      )}
+
+      {Array.from(groups.entries()).map(([groupName, cmds]) => (
+        <div key={groupName}>
+          <div className="px-2 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            {groupName}
+          </div>
+          {cmds.map((cmd) => {
+            const globalIndex = flatItems.indexOf(cmd)
+            const Icon = cmd.icon
+            return (
+              <button
+                key={cmd.key}
+                role="option"
+                aria-selected={globalIndex === activeIndex}
+                className={cn(
+                  "flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-left",
+                  "text-sm transition-colors cursor-pointer",
+                  globalIndex === activeIndex
+                    ? "bg-accent text-accent-foreground"
+                    : "hover:bg-accent/50"
+                )}
+                onMouseEnter={() => setActiveIndex(globalIndex)}
+                onClick={() => onSelect?.(cmd.key)}
+              >
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-background">
+                  <Icon className="h-4 w-4" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="font-medium">{cmd.label}</div>
+                  {cmd.description && (
+                    <div className="text-xs text-muted-foreground truncate">
+                      {cmd.description}
+                    </div>
+                  )}
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+WakaSlashMenu.displayName = "WakaSlashMenu"
+
+// ─── Plugin helper ───────────────────────────────────────────────────────────
+
+/**
+ * Creates slash command plugin configuration for Plate.
+ * Call this function and spread the result into your plugins array.
+ *
+ * @example
+ * ```ts
+ * import { createSlashCommandPlugins } from "@wakastellar/ui/editor"
+ *
+ * const editor = usePlateEditor({
+ *   plugins: [
+ *     ...otherPlugins,
+ *     ...await createSlashCommandPlugins(),
+ *   ],
+ * })
+ * ```
+ */
+export async function createSlashCommandPlugins(
+  commands: SlashCommand[] = DEFAULT_SLASH_COMMANDS
+) {
+  try {
+    const { SlashPlugin, SlashInputPlugin } = await import("@platejs/combobox/react")
+    return [
+      SlashPlugin.configure({
+        options: {
+          trigger: "/",
+          triggerPreviousCharPattern: /^$|^[\s"']$/,
+          rules: commands.map((cmd) => ({
+            key: cmd.key,
+            text: cmd.label,
+            keywords: cmd.keywords,
+            onSelect: cmd.action,
+          })),
+        },
+      }),
+      SlashInputPlugin,
+    ]
+  } catch {
+    console.warn("[WakaSlashMenu] @platejs/combobox not installed, slash commands disabled")
+    return []
+  }
+}