@wakastellar/ui 3.3.3 → 3.5.0

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

@@ -0,0 +1,312 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+// ─── Table Elements ──────────────────────────────────────────────────────────
+
+export interface PlateElementProps {
+  attributes?: Record<string, unknown>
+  children?: React.ReactNode
+  element?: Record<string, unknown>
+  className?: string
+}
+
+export function TableElement({ children, attributes, className }: PlateElementProps) {
+  return (
+    <table
+      {...attributes}
+      className={cn(
+        "w-full border-collapse text-sm my-4",
+        "border border-border rounded-lg overflow-hidden",
+        className
+      )}
+    >
+      <tbody>{children}</tbody>
+    </table>
+  )
+}
+TableElement.displayName = "TableElement"
+
+export function TableRowElement({ children, attributes, className }: PlateElementProps) {
+  return (
+    <tr
+      {...attributes}
+      className={cn("border-b border-border last:border-b-0", className)}
+    >
+      {children}
+    </tr>
+  )
+}
+TableRowElement.displayName = "TableRowElement"
+
+export function TableCellElement({ children, attributes, className }: PlateElementProps) {
+  return (
+    <td
+      {...attributes}
+      className={cn(
+        "px-3 py-2 text-sm text-foreground",
+        "border-r border-border last:border-r-0",
+        className
+      )}
+    >
+      {children}
+    </td>
+  )
+}
+TableCellElement.displayName = "TableCellElement"
+
+export function TableCellHeaderElement({ children, attributes, className }: PlateElementProps) {
+  return (
+    <th
+      {...attributes}
+      className={cn(
+        "px-3 py-2 text-xs font-bold uppercase tracking-wider",
+        "text-muted-foreground text-left bg-muted/50",
+        "border-r border-border last:border-r-0",
+        className
+      )}
+    >
+      {children}
+    </th>
+  )
+}
+TableCellHeaderElement.displayName = "TableCellHeaderElement"
+
+// ─── Layout Elements ─────────────────────────────────────────────────────────
+
+export function ColumnGroupElement({ children, attributes, className }: PlateElementProps) {
+  return (
+    <div
+      {...attributes}
+      className={cn("flex gap-6 my-4", className)}
+    >
+      {children}
+    </div>
+  )
+}
+ColumnGroupElement.displayName = "ColumnGroupElement"
+
+export function ColumnElement({ children, attributes, className }: PlateElementProps) {
+  return (
+    <div
+      {...attributes}
+      className={cn("flex-1 min-w-0", className)}
+    >
+      {children}
+    </div>
+  )
+}
+ColumnElement.displayName = "ColumnElement"
+
+// ─── Callout Element ─────────────────────────────────────────────────────────
+
+const CALLOUT_VARIANTS: Record<string, string> = {
+  info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950/30 dark:border-blue-800 dark:text-blue-200",
+  warning: "bg-amber-50 border-amber-200 text-amber-900 dark:bg-amber-950/30 dark:border-amber-800 dark:text-amber-200",
+  success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950/30 dark:border-green-800 dark:text-green-200",
+  error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950/30 dark:border-red-800 dark:text-red-200",
+  dark: "bg-card border-border text-card-foreground",
+}
+
+export function CalloutElement({ children, attributes, element, className }: PlateElementProps) {
+  const variant = (element?.variant as string) || "info"
+  const variantClasses = CALLOUT_VARIANTS[variant] ?? CALLOUT_VARIANTS.info
+
+  return (
+    <div
+      {...attributes}
+      className={cn(
+        "border rounded-xl p-4 my-3",
+        variantClasses,
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+CalloutElement.displayName = "CalloutElement"
+
+// ─── Heading Elements ────────────────────────────────────────────────────────
+
+export function H1Element({ children, attributes, className }: PlateElementProps) {
+  return (
+    <h1
+      {...attributes}
+      className={cn(
+        "text-2xl font-extrabold text-foreground mt-8 mb-2 first:mt-0",
+        className
+      )}
+    >
+      {children}
+    </h1>
+  )
+}
+H1Element.displayName = "H1Element"
+
+export function H2Element({ children, attributes, className }: PlateElementProps) {
+  return (
+    <h2
+      {...attributes}
+      className={cn(
+        "text-sm font-bold text-foreground uppercase tracking-wider",
+        "mt-6 mb-3 border-b-2 border-border pb-1.5",
+        className
+      )}
+    >
+      {children}
+    </h2>
+  )
+}
+H2Element.displayName = "H2Element"
+
+export function H3Element({ children, attributes, className }: PlateElementProps) {
+  return (
+    <h3
+      {...attributes}
+      className={cn(
+        "text-sm font-semibold text-primary italic mt-1 mb-4",
+        className
+      )}
+    >
+      {children}
+    </h3>
+  )
+}
+H3Element.displayName = "H3Element"
+
+export function H4Element({ children, attributes, className }: PlateElementProps) {
+  return (
+    <h4
+      {...attributes}
+      className={cn(
+        "text-xs font-bold text-primary uppercase tracking-wide mt-2 mb-0.5",
+        className
+      )}
+    >
+      {children}
+    </h4>
+  )
+}
+H4Element.displayName = "H4Element"
+
+export function H5Element({ children, attributes, className }: PlateElementProps) {
+  return (
+    <h5
+      {...attributes}
+      className={cn(
+        "text-xs font-semibold text-muted-foreground mt-2 mb-0.5",
+        className
+      )}
+    >
+      {children}
+    </h5>
+  )
+}
+H5Element.displayName = "H5Element"
+
+export function H6Element({ children, attributes, className }: PlateElementProps) {
+  return (
+    <h6
+      {...attributes}
+      className={cn(
+        "text-xs font-medium text-muted-foreground mt-2 mb-0.5",
+        className
+      )}
+    >
+      {children}
+    </h6>
+  )
+}
+H6Element.displayName = "H6Element"
+
+// ─── Blockquote Element ──────────────────────────────────────────────────────
+
+export function BlockquoteElement({ children, attributes, className }: PlateElementProps) {
+  return (
+    <blockquote
+      {...attributes}
+      className={cn(
+        "border-l-3 border-primary/50 pl-4 py-2",
+        "bg-muted/30 rounded-r-lg",
+        "italic text-muted-foreground",
+        "my-3",
+        className
+      )}
+    >
+      {children}
+    </blockquote>
+  )
+}
+BlockquoteElement.displayName = "BlockquoteElement"
+
+// ─── Paragraph Element ──────────────────────────────────────────────────────
+
+export function ParagraphElement({ children, attributes, className }: PlateElementProps) {
+  return (
+    <p
+      {...attributes}
+      className={cn(
+        "text-sm leading-relaxed text-foreground my-0.5",
+        className
+      )}
+    >
+      {children}
+    </p>
+  )
+}
+ParagraphElement.displayName = "ParagraphElement"
+
+// ─── Link Element ────────────────────────────────────────────────────────────
+
+export function LinkElement({ children, attributes, element, className }: PlateElementProps) {
+  return (
+    <a
+      {...attributes}
+      href={element?.url as string}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        "text-primary underline decoration-primary/30 hover:decoration-primary",
+        "transition-colors cursor-pointer",
+        className
+      )}
+    >
+      {children}
+    </a>
+  )
+}
+LinkElement.displayName = "LinkElement"
+
+// ─── Mention Element ─────────────────────────────────────────────────────────
+
+export function MentionElement({ children, attributes, element, className }: PlateElementProps) {
+  return (
+    <span
+      {...attributes}
+      contentEditable={false}
+      className={cn(
+        "inline-flex items-center rounded-md px-1.5 py-0.5",
+        "bg-primary/10 text-primary text-sm font-medium",
+        "border border-primary/20",
+        className
+      )}
+    >
+      @{(element?.value as string) || "unknown"}
+      {children}
+    </span>
+  )
+}
+MentionElement.displayName = "MentionElement"
+
+// ─── Separator Element ──────────────────────────────────────────────────────
+
+export function SeparatorElement({ attributes, className }: PlateElementProps) {
+  return (
+    <div {...attributes} className={cn("my-6", className)}>
+      <hr className="border-border" />
+    </div>
+  )
+}
+SeparatorElement.displayName = "SeparatorElement"

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

@@ -0,0 +1,101 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+// ─── Leaf Props ──────────────────────────────────────────────────────────────
+
+export interface PlateLeafProps {
+  attributes?: Record<string, unknown>
+  children?: React.ReactNode
+  leaf?: Record<string, unknown>
+  className?: string
+}
+
+// ─── Mark Leaves ─────────────────────────────────────────────────────────────
+
+export function BoldLeaf({ children, attributes, className }: PlateLeafProps) {
+  return (
+    <strong {...attributes} className={cn("font-bold", className)}>
+      {children}
+    </strong>
+  )
+}
+BoldLeaf.displayName = "BoldLeaf"
+
+export function ItalicLeaf({ children, attributes, className }: PlateLeafProps) {
+  return (
+    <em {...attributes} className={cn("italic", className)}>
+      {children}
+    </em>
+  )
+}
+ItalicLeaf.displayName = "ItalicLeaf"
+
+export function UnderlineLeaf({ children, attributes, className }: PlateLeafProps) {
+  return (
+    <span {...attributes} className={cn("underline decoration-foreground/50", className)}>
+      {children}
+    </span>
+  )
+}
+UnderlineLeaf.displayName = "UnderlineLeaf"
+
+export function StrikethroughLeaf({ children, attributes, className }: PlateLeafProps) {
+  return (
+    <s {...attributes} className={cn("line-through text-muted-foreground", className)}>
+      {children}
+    </s>
+  )
+}
+StrikethroughLeaf.displayName = "StrikethroughLeaf"
+
+export function CodeLeaf({ children, attributes, className }: PlateLeafProps) {
+  return (
+    <code
+      {...attributes}
+      className={cn(
+        "rounded-md bg-muted px-1.5 py-0.5",
+        "font-mono text-[0.85em] text-foreground",
+        className
+      )}
+    >
+      {children}
+    </code>
+  )
+}
+CodeLeaf.displayName = "CodeLeaf"
+
+export function HighlightLeaf({ children, attributes, className }: PlateLeafProps) {
+  return (
+    <mark
+      {...attributes}
+      className={cn(
+        "bg-yellow-200/60 dark:bg-yellow-500/30",
+        "rounded-sm px-0.5",
+        className
+      )}
+    >
+      {children}
+    </mark>
+  )
+}
+HighlightLeaf.displayName = "HighlightLeaf"
+
+export function SuperscriptLeaf({ children, attributes, className }: PlateLeafProps) {
+  return (
+    <sup {...attributes} className={cn("text-[0.75em]", className)}>
+      {children}
+    </sup>
+  )
+}
+SuperscriptLeaf.displayName = "SuperscriptLeaf"
+
+export function SubscriptLeaf({ children, attributes, className }: PlateLeafProps) {
+  return (
+    <sub {...attributes} className={cn("text-[0.75em]", className)}>
+      {children}
+    </sub>
+  )
+}
+SubscriptLeaf.displayName = "SubscriptLeaf"

package/src/components/editor/waka-editor-plugins.ts

@@ -0,0 +1,207 @@
+/**
+ * Default plugin configurations for WakaEditor
+ *
+ * Each plugin set can be toggled via WakaEditorProps flags.
+ * All plugins come from @platejs/* packages which are peerDependencies.
+ */
+
+import type { PlatePlugin } from "platejs/react"
+
+// ─── Core text formatting plugins ────────────────────────────────────────────
+
+/**
+ * Dynamically loads the core formatting plugins (marks + block elements).
+ * These are always included in the editor.
+ */
+export async function loadCorePlugins(): Promise<PlatePlugin[]> {
+  const [basicNodes, table, layout, callout] = await Promise.all([
+    import("@platejs/basic-nodes/react"),
+    import("@platejs/table/react"),
+    import("@platejs/layout/react"),
+    import("@platejs/callout/react"),
+  ])
+
+  return [
+    // Marks
+    basicNodes.BoldPlugin,
+    basicNodes.ItalicPlugin,
+    basicNodes.UnderlinePlugin,
+    basicNodes.StrikethroughPlugin,
+    basicNodes.CodePlugin,
+    basicNodes.HighlightPlugin,
+    basicNodes.SuperscriptPlugin,
+    basicNodes.SubscriptPlugin,
+    // Block elements
+    basicNodes.H1Plugin,
+    basicNodes.H2Plugin,
+    basicNodes.H3Plugin,
+    basicNodes.H4Plugin,
+    basicNodes.H5Plugin,
+    basicNodes.H6Plugin,
+    basicNodes.BlockquotePlugin,
+    // Table
+    table.TablePlugin,
+    table.TableRowPlugin,
+    table.TableCellPlugin,
+    table.TableCellHeaderPlugin,
+    // Layout
+    layout.ColumnPlugin,
+    layout.ColumnItemPlugin,
+    // Callout
+    callout.CalloutPlugin,
+  ]
+}
+
+// ─── Optional plugin loaders ──────────────────────────────────────────────────
+
+/** Loads the link plugin */
+export async function loadLinkPlugin(): Promise<PlatePlugin[]> {
+  const { LinkPlugin } = await import("@platejs/link/react")
+  return [
+    LinkPlugin.configure({
+      options: {
+        allowedSchemes: ["http", "https", "mailto", "tel"],
+      },
+    }),
+  ]
+}
+
+/** Loads media plugins (image, video, embed) */
+export async function loadMediaPlugins(): Promise<PlatePlugin[]> {
+  const { ImagePlugin, MediaEmbedPlugin } = await import("@platejs/media/react")
+  return [ImagePlugin, MediaEmbedPlugin]
+}
+
+/** Loads mention plugins */
+export async function loadMentionPlugins(): Promise<PlatePlugin[]> {
+  const { MentionPlugin, MentionInputPlugin } = await import("@platejs/mention/react")
+  return [
+    MentionPlugin.configure({
+      options: {
+        trigger: "@",
+        triggerPreviousCharPattern: /^$|^[\s"']$/,
+        insertSpaceAfterMention: true,
+      },
+    }),
+    MentionInputPlugin,
+  ]
+}
+
+/** Loads DnD (drag and drop) plugin */
+export async function loadDndPlugin(): Promise<PlatePlugin[]> {
+  const { DndPlugin } = await import("@platejs/dnd/react")
+  return [DndPlugin]
+}
+
+/** Loads TOC (table of contents) plugin */
+export async function loadTocPlugin(): Promise<PlatePlugin[]> {
+  const { TocPlugin } = await import("@platejs/toc/react")
+  return [TocPlugin]
+}
+
+/** Loads indent plugin */
+export async function loadIndentPlugin(): Promise<PlatePlugin[]> {
+  const { IndentPlugin } = await import("@platejs/indent/react")
+  return [IndentPlugin]
+}
+
+/** Loads markdown serialization plugin */
+export async function loadMarkdownPlugin(): Promise<PlatePlugin[]> {
+  const { MarkdownPlugin } = await import("@platejs/markdown")
+  return [MarkdownPlugin]
+}
+
+/** Loads selection plugin */
+export async function loadSelectionPlugin(): Promise<PlatePlugin[]> {
+  const { BlockSelectionPlugin } = await import("@platejs/selection/react")
+  return [BlockSelectionPlugin]
+}
+
+/** Loads AI plugins (AI menu + AI chat) */
+export async function loadAIPlugins(options?: {
+  endpoint?: string
+  systemPrompt?: string
+  headers?: Record<string, string>
+}): Promise<PlatePlugin[]> {
+  const { AIPlugin, AIChatPlugin } = await import("@platejs/ai/react")
+  const plugins: PlatePlugin[] = [AIPlugin]
+
+  if (options?.endpoint) {
+    plugins.push(
+      AIChatPlugin.configure({
+        options: {
+          chat: {
+            api: options.endpoint,
+            body: { system: options.systemPrompt ?? "You are a helpful writing assistant." },
+            headers: options.headers,
+          },
+        },
+      }) as PlatePlugin,
+    )
+  } else {
+    plugins.push(AIChatPlugin as PlatePlugin)
+  }
+
+  return plugins
+}
+
+/** Loads emoji plugin */
+export async function loadEmojiPlugin(): Promise<PlatePlugin[]> {
+  const { EmojiPlugin } = await import("@platejs/emoji/react")
+  return [EmojiPlugin as PlatePlugin]
+}
+
+/** Loads floating toolbar plugin */
+export async function loadFloatingPlugin(): Promise<PlatePlugin[]> {
+  // @platejs/floating provides hooks, not a plugin.
+  // Return empty; the WakaFloatingToolbar component uses the hook directly.
+  return []
+}
+
+/** Loads diff plugin for document comparison */
+export async function loadDiffPlugin(): Promise<PlatePlugin[]> {
+  // @platejs/diff provides utility functions (computeDiff), not editor plugins.
+  // Return empty; the WakaDiffViewer component uses the functions directly.
+  return []
+}
+
+/** Loads combobox/slash-command plugins */
+export async function loadComboboxPlugins(): Promise<PlatePlugin[]> {
+  const { SlashPlugin, SlashInputPlugin } = await import("@platejs/combobox/react")
+  return [
+    SlashPlugin.configure({
+      options: {
+        trigger: "/",
+        triggerPreviousCharPattern: /^$|^[\s"']$/,
+      },
+    }) as PlatePlugin,
+    SlashInputPlugin as PlatePlugin,
+  ]
+}
+
+// ─── Plugin presets ───────────────────────────────────────────────────────────
+
+export type WakaEditorPreset = "minimal" | "standard" | "full"
+
+/**
+ * Returns the list of optional plugin loaders based on a named preset.
+ */
+export function getPresetLoaders(preset: WakaEditorPreset) {
+  switch (preset) {
+    case "minimal":
+      return []
+    case "standard":
+      return [loadLinkPlugin, loadIndentPlugin]
+    case "full":
+      return [
+        loadLinkPlugin,
+        loadMediaPlugins,
+        loadMentionPlugins,
+        loadDndPlugin,
+        loadTocPlugin,
+        loadIndentPlugin,
+        loadMarkdownPlugin,
+        loadSelectionPlugin,
+      ]
+  }
+}