@wakastellar/ui 3.3.3 → 3.5.0

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

@@ -0,0 +1,432 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../utils/cn"
+import type { SlashCommand } from "../waka-slash-menu"
+import { DEFAULT_SLASH_COMMANDS } from "../waka-slash-menu"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/** Extended slash command with WakaStart-specific blocks */
+export interface WakaSlashBlockCommand extends SlashCommand {
+  /** Preview/thumbnail for the block */
+  preview?: React.ReactNode
+  /** Whether this is a WakaStart custom block (vs standard Plate block) */
+  isCustom?: boolean
+}
+
+export interface WakaSlashMenuBlockProps {
+  /** All available commands (merges with defaults) */
+  commands?: WakaSlashBlockCommand[]
+  /** Filter query (typed after "/") */
+  query?: string
+  /** Called when a command is selected */
+  onSelect?: (command: WakaSlashBlockCommand) => void
+  /** Active (highlighted) index */
+  activeIndex?: number
+  /** Callback when active index changes */
+  onActiveIndexChange?: (index: number) => void
+  /** CSS class */
+  className?: string
+}
+
+// ============================================================================
+// Default WakaStart Block Commands
+// ============================================================================
+
+/**
+ * WakaStart-specific slash commands for custom blocks.
+ * These extend the standard Plate slash commands with blocks specific
+ * to the WakaStart specification and project management workflow.
+ */
+export const WAKA_BLOCK_COMMANDS: WakaSlashBlockCommand[] = [
+  // User Story
+  {
+    key: "user-story",
+    label: "User Story",
+    description: "Structured user story (As a / I want / So that)",
+    icon: (() => {
+      // Lazy icon - we use a simple component approach
+      const { Users } = require("lucide-react") as { Users: React.ComponentType<{ className?: string }> }
+      return Users
+    })(),
+    group: "WakaStart Blocks",
+    keywords: ["user", "story", "agile", "requirement", "persona"],
+    isCustom: true,
+    action: (editor) => {
+      try {
+        const { createUserStoryNodes } = require("./waka-user-story-block")
+        editor.insertNodes(createUserStoryNodes())
+      } catch { /* */ }
+    },
+  },
+  // Acceptance Criteria
+  {
+    key: "acceptance-criteria",
+    label: "Acceptance Criteria",
+    description: "Gherkin-format criteria (Given / When / Then)",
+    icon: (() => {
+      const { CheckCircle2 } = require("lucide-react") as { CheckCircle2: React.ComponentType<{ className?: string }> }
+      return CheckCircle2
+    })(),
+    group: "WakaStart Blocks",
+    keywords: ["acceptance", "criteria", "gherkin", "given", "when", "then", "test"],
+    isCustom: true,
+    action: (editor) => {
+      try {
+        const { createAcceptanceCriteriaNodes } = require("./waka-acceptance-criteria-block")
+        editor.insertNodes(createAcceptanceCriteriaNodes())
+      } catch { /* */ }
+    },
+  },
+  // API Endpoint
+  {
+    key: "api-endpoint",
+    label: "API Endpoint",
+    description: "REST API documentation (method, route, body, response)",
+    icon: (() => {
+      const { Zap } = require("lucide-react") as { Zap: React.ComponentType<{ className?: string }> }
+      return Zap
+    })(),
+    group: "WakaStart Blocks",
+    keywords: ["api", "endpoint", "rest", "route", "get", "post", "put", "delete"],
+    isCustom: true,
+    action: (editor) => {
+      try {
+        const { createApiEndpointNodes } = require("./waka-api-endpoint-block")
+        editor.insertNodes(createApiEndpointNodes())
+      } catch { /* */ }
+    },
+  },
+  // Diagram
+  {
+    key: "diagram",
+    label: "Diagram",
+    description: "Mermaid / PlantUML diagram with live preview",
+    icon: (() => {
+      const { GitBranch } = require("lucide-react") as { GitBranch: React.ComponentType<{ className?: string }> }
+      return GitBranch
+    })(),
+    group: "WakaStart Blocks",
+    keywords: ["diagram", "mermaid", "plantuml", "flowchart", "sequence", "graph"],
+    isCustom: true,
+    action: (editor) => {
+      try {
+        const { createDiagramNodes } = require("./waka-diagram-block")
+        editor.insertNodes(createDiagramNodes())
+      } catch { /* */ }
+    },
+  },
+  // AI Assist
+  {
+    key: "ai-assist",
+    label: "AI Assistant",
+    description: "Ask the AI to generate content for your document",
+    icon: (() => {
+      const { Sparkles } = require("lucide-react") as { Sparkles: React.ComponentType<{ className?: string }> }
+      return Sparkles
+    })(),
+    group: "WakaStart Blocks",
+    keywords: ["ai", "ia", "assistant", "generate", "write", "help", "claude"],
+    isCustom: true,
+    action: (editor) => {
+      try {
+        const { createAiAssistNodes } = require("./waka-ai-assist-block")
+        editor.insertNodes(createAiAssistNodes())
+      } catch { /* */ }
+    },
+  },
+  // Version Diff
+  {
+    key: "version-diff",
+    label: "Version Diff",
+    description: "Compare two versions of text with visual diff",
+    icon: (() => {
+      const { GitCompare } = require("lucide-react") as { GitCompare: React.ComponentType<{ className?: string }> }
+      return GitCompare
+    })(),
+    group: "WakaStart Blocks",
+    keywords: ["diff", "version", "compare", "change", "history", "git"],
+    isCustom: true,
+    action: (editor) => {
+      try {
+        const { createVersionDiffNodes } = require("./waka-version-diff-block")
+        editor.insertNodes(createVersionDiffNodes())
+      } catch { /* */ }
+    },
+  },
+  // Embed
+  {
+    key: "embed",
+    label: "Embed",
+    description: "Embed external content (Figma, YouTube, CodeSandbox...)",
+    icon: (() => {
+      const { ExternalLink } = require("lucide-react") as { ExternalLink: React.ComponentType<{ className?: string }> }
+      return ExternalLink
+    })(),
+    group: "WakaStart Blocks",
+    keywords: ["embed", "figma", "youtube", "codesandbox", "loom", "iframe", "video"],
+    isCustom: true,
+    action: (editor) => {
+      try {
+        const { createEmbedNodes } = require("./waka-embed-block")
+        editor.insertNodes(createEmbedNodes(""))
+      } catch { /* */ }
+    },
+  },
+  // Code Playground
+  {
+    key: "code-playground",
+    label: "Code Playground",
+    description: "Executable code block with console output",
+    icon: (() => {
+      const { Terminal } = require("lucide-react") as { Terminal: React.ComponentType<{ className?: string }> }
+      return Terminal
+    })(),
+    group: "WakaStart Blocks",
+    keywords: ["code", "playground", "run", "execute", "terminal", "console", "sandbox"],
+    isCustom: true,
+    action: (editor) => {
+      try {
+        const { createCodePlaygroundNodes } = require("./waka-code-playground-block")
+        editor.insertNodes(createCodePlaygroundNodes())
+      } catch { /* */ }
+    },
+  },
+  // Comment Thread
+  {
+    key: "comment-thread",
+    label: "Comment Thread",
+    description: "Inline discussion thread (like Google Docs)",
+    icon: (() => {
+      const { MessageSquare } = require("lucide-react") as { MessageSquare: React.ComponentType<{ className?: string }> }
+      return MessageSquare
+    })(),
+    group: "WakaStart Blocks",
+    keywords: ["comment", "thread", "discussion", "review", "feedback", "note"],
+    isCustom: true,
+    action: (editor) => {
+      try {
+        const { createCommentThreadNodes } = require("./waka-comment-thread-block")
+        editor.insertNodes(createCommentThreadNodes())
+      } catch { /* */ }
+    },
+  },
+]
+
+/**
+ * Get all slash commands: standard Plate commands + WakaStart custom blocks.
+ */
+export function getAllWakaSlashCommands(extraCommands?: WakaSlashBlockCommand[]): WakaSlashBlockCommand[] {
+  return [
+    ...DEFAULT_SLASH_COMMANDS.map((cmd) => ({ ...cmd, isCustom: false })),
+    ...WAKA_BLOCK_COMMANDS,
+    ...(extraCommands || []),
+  ]
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * WakaSlashMenuBlock - An enhanced slash menu that includes all standard Plate
+ * blocks PLUS WakaStart-specific custom blocks (User Story, API Endpoint,
+ * Diagram, AI Assist, Code Playground, etc.).
+ *
+ * This replaces the standard WakaSlashMenu when you want the full WakaStart
+ * block vocabulary available in your editor.
+ *
+ * @example
+ * ```tsx
+ * // In your Plate slash plugin configuration:
+ * const slashPlugins = await createWakaSlashPlugins()
+ *
+ * // Or use the menu component standalone:
+ * <WakaSlashMenuBlock
+ *   query={searchQuery}
+ *   onSelect={(cmd) => cmd.action(editor)}
+ * />
+ * ```
+ */
+export function WakaSlashMenuBlock({
+  commands,
+  query = "",
+  onSelect,
+  activeIndex: controlledIndex,
+  onActiveIndexChange,
+  className,
+}: WakaSlashMenuBlockProps) {
+  const allCommands = React.useMemo(
+    () => commands || getAllWakaSlashCommands(),
+    [commands]
+  )
+
+  const [internalIndex, setInternalIndex] = React.useState(0)
+  const activeIndex = controlledIndex ?? internalIndex
+  const setActiveIndex = onActiveIndexChange || setInternalIndex
+
+  // Filter commands
+  const filtered = React.useMemo(() => {
+    if (!query) return allCommands
+    const q = query.toLowerCase()
+    return allCommands.filter(
+      (cmd) =>
+        cmd.label.toLowerCase().includes(q) ||
+        cmd.key.toLowerCase().includes(q) ||
+        cmd.description?.toLowerCase().includes(q) ||
+        cmd.keywords?.some((kw) => kw.toLowerCase().includes(q))
+    )
+  }, [allCommands, query])
+
+  // Group commands
+  const groups = React.useMemo(() => {
+    const map = new Map<string, WakaSlashBlockCommand[]>()
+    for (const cmd of filtered) {
+      const group = cmd.group || "Other"
+      if (!map.has(group)) map.set(group, [])
+      map.get(group)!.push(cmd)
+    }
+    return map
+  }, [filtered])
+
+  // Reset active index on filter change
+  React.useEffect(() => setActiveIndex(0), [query])
+
+  // Keyboard navigation
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault()
+        setActiveIndex(Math.min(activeIndex + 1, filtered.length - 1))
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault()
+        setActiveIndex(Math.max(activeIndex - 1, 0))
+      } else if (e.key === "Enter" && filtered[activeIndex]) {
+        e.preventDefault()
+        onSelect?.(filtered[activeIndex])
+      }
+    },
+    [filtered, activeIndex, onSelect, setActiveIndex]
+  )
+
+  return (
+    <div
+      className={cn(
+        "w-80 max-h-96 overflow-y-auto",
+        "rounded-lg border bg-popover shadow-xl",
+        "p-1",
+        className
+      )}
+      role="listbox"
+      onKeyDown={handleKeyDown}
+      aria-label="Slash commands"
+    >
+      {filtered.length === 0 && (
+        <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+          No blocks found for "{query}"
+        </div>
+      )}
+
+      {Array.from(groups.entries()).map(([groupName, cmds]) => (
+        <div key={groupName} className="mb-1">
+          <div className="px-2 py-1.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 flex items-center gap-2">
+            {groupName}
+            {groupName === "WakaStart Blocks" && (
+              <span className="px-1 py-0.5 rounded bg-primary/10 text-primary text-[8px] font-bold normal-case tracking-normal">
+                Custom
+              </span>
+            )}
+          </div>
+          {cmds.map((cmd) => {
+            const globalIndex = filtered.indexOf(cmd)
+            const Icon = cmd.icon as React.ComponentType<{ className?: string }>
+            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-2 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)}
+              >
+                <div className={cn(
+                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border",
+                  cmd.isCustom
+                    ? "border-primary/20 bg-primary/5"
+                    : "border-border bg-background"
+                )}>
+                  {typeof Icon === "function" ? <Icon className="h-4 w-4" /> : Icon}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-1.5">
+                    <span className="font-medium text-sm">{cmd.label}</span>
+                    {cmd.isCustom && (
+                      <span className="h-1.5 w-1.5 rounded-full bg-primary flex-shrink-0" />
+                    )}
+                  </div>
+                  {cmd.description && (
+                    <div className="text-[11px] text-muted-foreground truncate mt-0.5">
+                      {cmd.description}
+                    </div>
+                  )}
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+WakaSlashMenuBlock.displayName = "WakaSlashMenuBlock"
+
+// ============================================================================
+// Plugin Helper
+// ============================================================================
+
+/**
+ * Creates slash command plugin configuration with all WakaStart blocks registered.
+ *
+ * @example
+ * ```ts
+ * const plugins = await createWakaSlashPlugins()
+ * // Add to editor plugins array
+ * ```
+ */
+export async function createWakaSlashPlugins(
+  extraCommands?: WakaSlashBlockCommand[]
+) {
+  try {
+    const { SlashPlugin, SlashInputPlugin } = await import("@platejs/combobox/react")
+    const allCommands = getAllWakaSlashCommands(extraCommands)
+
+    return [
+      SlashPlugin.configure({
+        options: {
+          trigger: "/",
+          triggerPreviousCharPattern: /^$|^[\s"']$/,
+          rules: allCommands.map((cmd) => ({
+            key: cmd.key,
+            text: cmd.label,
+            keywords: cmd.keywords,
+            onSelect: cmd.action,
+          })),
+        },
+      }),
+      SlashInputPlugin,
+    ]
+  } catch {
+    console.warn("[WakaSlashMenuBlock] @platejs/combobox not installed, slash commands disabled")
+    return []
+  }
+}