@saena-io/create 0.1.0 → 0.2.0

package/template/base/src/components/ui/rich-text/table-toolbar.tsx

@@ -0,0 +1,232 @@
+import {
+  ArrowDown01Icon,
+  ArrowLeft01Icon,
+  ArrowRight01Icon,
+  ArrowUp01Icon,
+  CombineIcon,
+  Delete02Icon,
+  GridTableIcon,
+  LayoutTopIcon,
+  MultiplicationSignIcon,
+  SplitIcon,
+} from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import {
+  deleteColumn,
+  deleteRow,
+  deleteTable,
+  insertTable,
+  insertTableColumn,
+  insertTableRow,
+  mergeTableCells,
+  splitTableCell,
+} from '@platejs/table';
+import {
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '@saena-io/ui/components/dropdown-menu';
+import type { ToolbarNode } from '@saena-io/ui/components/toolbar';
+import { cn } from '@saena-io/ui/lib/utils';
+import { useState } from 'react';
+import type { RichTextEditor } from './plugins';
+
+// The Table control as a declarative toolbar menu node (see `tableMenuNode`): an Insert-table grid picker
+// plus Cell / Row / Column submenus and Delete table. Cell/Row/Column/Delete are disabled unless the caret
+// is inside a table. The 8×8 grid picker is custom menu content (not a menu item), so it closes the
+// dropdown via useToolbarMenuClose() after inserting. Building a similar tool = build the same node shape.
+
+/** Flip the table's first row between header cells (th) and body cells (td) — Plate has no built-in toggle. */
+function toggleHeaderRow(editor: RichTextEditor) {
+  const tableEntry = editor.api.node({ match: { type: 'table' } });
+  if (!tableEntry) return;
+  const [tableNode, tablePath] = tableEntry;
+  const firstRow = (tableNode as { children?: { children?: { type?: string }[] }[] }).children?.[0];
+  const firstCellType = firstRow?.children?.[0]?.type;
+  const nextType = firstCellType === 'th' ? 'td' : 'th';
+  editor.tf.setNodes(
+    { type: nextType },
+    {
+      at: [...tablePath, 0],
+      match: (n: { type?: unknown }) => n.type === 'td' || n.type === 'th',
+      mode: 'lowest',
+    },
+  );
+}
+
+/** The 8×8 grid-size picker; hovering sizes the selection, clicking inserts that table. Focusing the editor
+ *  afterwards dismisses the dropdown (focus leaves the menu), so no explicit close is needed. */
+function TableGridPicker({ editor }: { editor: RichTextEditor | null }) {
+  const [size, setSize] = useState({ rows: 0, cols: 0 });
+  const insertSize = (rows: number, cols: number) => {
+    if (!editor) return;
+    // Ensure an insertion point if the editor was never focused.
+    if (!editor.selection) {
+      const end = editor.api.end([]);
+      if (end) editor.tf.select(end);
+    }
+    insertTable(editor, { rowCount: rows, colCount: cols }, { select: true });
+    editor.tf.focus();
+  };
+  return (
+    <div className="flex flex-col gap-1.5" onMouseDown={(e) => e.preventDefault()}>
+      <div className="grid grid-cols-8 gap-0.5">
+        {Array.from({ length: 64 }, (_, i) => {
+          const r = Math.floor(i / 8);
+          const c = i % 8;
+          const on = r < size.rows && c < size.cols;
+          return (
+            <button
+              type="button"
+              key={`cell-${r}-${c}`}
+              aria-label={`${r + 1} by ${c + 1}`}
+              onMouseMove={() => setSize({ rows: r + 1, cols: c + 1 })}
+              onClick={() => insertSize(r + 1, c + 1)}
+              className={cn(
+                'size-4 rounded-[2px] border',
+                on ? 'border-primary bg-primary/20' : 'border-border bg-muted/50',
+              )}
+            />
+          );
+        })}
+      </div>
+      <div className="text-center text-muted-foreground text-xs">
+        {size.rows} × {size.cols}
+      </div>
+    </div>
+  );
+}
+
+/** The "Insert table" entry — a submenu holding the grid picker (custom content, not a menu item). */
+function TableGridSubmenu({ editor }: { editor: RichTextEditor | null }) {
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>
+        <HugeiconsIcon icon={GridTableIcon} strokeWidth={2} className="size-4" />
+        Insert table
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent className="w-auto p-2">
+        <TableGridPicker editor={editor} />
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  );
+}
+
+/** Builds the Table menu node for the toolbar config. */
+export function tableMenuNode(editor: RichTextEditor | null): ToolbarNode {
+  // "Caret inside a table" — scope to the selection's ancestors (not the whole doc).
+  const inTable = Boolean(editor?.selection && editor.api.above({ match: { type: 'table' } }));
+  const act = (fn: (e: RichTextEditor) => void) => () => {
+    if (!editor) return;
+    fn(editor);
+    editor.tf.focus();
+  };
+  return {
+    kind: 'menu',
+    id: 'table',
+    label: 'Table',
+    icon: GridTableIcon,
+    variant: 'plain',
+    items: [
+      { kind: 'custom', id: 'table-grid', collapsed: <TableGridSubmenu editor={editor} /> },
+      {
+        kind: 'menu',
+        id: 'table-cell',
+        label: 'Cell',
+        disabled: !inTable,
+        items: [
+          {
+            kind: 'button',
+            id: 'merge',
+            label: 'Merge cells',
+            icon: CombineIcon,
+            onSelect: act((e) => mergeTableCells(e)),
+          },
+          {
+            kind: 'button',
+            id: 'split',
+            label: 'Split cell',
+            icon: SplitIcon,
+            onSelect: act((e) => splitTableCell(e)),
+          },
+        ],
+      },
+      {
+        kind: 'menu',
+        id: 'table-row',
+        label: 'Row',
+        disabled: !inTable,
+        items: [
+          {
+            kind: 'button',
+            id: 'row-before',
+            label: 'Insert row before',
+            icon: ArrowUp01Icon,
+            onSelect: act((e) => insertTableRow(e, { before: true })),
+          },
+          {
+            kind: 'button',
+            id: 'row-after',
+            label: 'Insert row after',
+            icon: ArrowDown01Icon,
+            onSelect: act((e) => insertTableRow(e)),
+          },
+          {
+            kind: 'button',
+            id: 'row-delete',
+            label: 'Delete row',
+            icon: MultiplicationSignIcon,
+            onSelect: act((e) => deleteRow(e)),
+          },
+          { kind: 'separator', id: 'row-sep' },
+          {
+            kind: 'button',
+            id: 'row-header',
+            label: 'Toggle header row',
+            icon: LayoutTopIcon,
+            onSelect: act(toggleHeaderRow),
+          },
+        ],
+      },
+      {
+        kind: 'menu',
+        id: 'table-column',
+        label: 'Column',
+        disabled: !inTable,
+        items: [
+          {
+            kind: 'button',
+            id: 'col-before',
+            label: 'Insert column before',
+            icon: ArrowLeft01Icon,
+            onSelect: act((e) => insertTableColumn(e, { before: true })),
+          },
+          {
+            kind: 'button',
+            id: 'col-after',
+            label: 'Insert column after',
+            icon: ArrowRight01Icon,
+            onSelect: act((e) => insertTableColumn(e)),
+          },
+          {
+            kind: 'button',
+            id: 'col-delete',
+            label: 'Delete column',
+            icon: MultiplicationSignIcon,
+            onSelect: act((e) => deleteColumn(e)),
+          },
+        ],
+      },
+      { kind: 'separator', id: 'table-sep' },
+      {
+        kind: 'button',
+        id: 'delete-table',
+        label: 'Delete table',
+        icon: Delete02Icon,
+        destructive: true,
+        disabled: !inTable,
+        onSelect: act((e) => deleteTable(e)),
+      },
+    ],
+  };
+}

package/template/base/src/components/ui/rich-text/toggle-node.tsx

@@ -0,0 +1,36 @@
+import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { useToggleButton, useToggleButtonState } from '@platejs/toggle/react';
+import { Button } from '@saena-io/ui/components/button';
+import { cn } from '@saena-io/ui/lib/utils';
+import { PlateElement, type PlateElementProps } from 'platejs/react';
+
+// A collapsible "toggle" block: a disclosure chevron that shows/hides the blocks indented beneath it. The
+// @platejs/toggle plugin keeps per-block open/closed state (keyed by the block id the editor already assigns
+// for drag-and-drop) and hides the enclosed blocks when closed. Rendered under a concrete <Plate>, so the
+// toggle hooks resolve to the right editor — unlike the shared toolbar (the dual-pane controller hazard).
+export function ToggleElement(props: PlateElementProps) {
+  const state = useToggleButtonState(props.element.id as string);
+  const { open, buttonProps } = useToggleButton(state);
+  return (
+    <PlateElement {...props} className="relative mb-1 pl-6">
+      <Button
+        type="button"
+        size="icon-sm"
+        variant="ghost"
+        title={open ? 'Collapse' : 'Expand'}
+        aria-label={open ? 'Collapse' : 'Expand'}
+        className="-left-1 absolute top-0 size-6 text-muted-foreground"
+        contentEditable={false}
+        {...buttonProps}
+      >
+        <HugeiconsIcon
+          icon={ArrowRight01Icon}
+          strokeWidth={2}
+          className={cn('size-4 transition-transform', open && 'rotate-90')}
+        />
+      </Button>
+      {props.children}
+    </PlateElement>
+  );
+}

package/template/base/src/components/ui/rich-text/toolbar-slots.ts

@@ -0,0 +1,41 @@
+import type { ToolbarGroup, ToolbarNode } from '@saena-io/ui/components/toolbar';
+import type { RichTextExtension, ToolbarItem } from './extension';
+
+/**
+ * Place extension-contributed controls into the toolbar by their `slot` (see extension.ts). Items whose slot
+ * matches a core group are appended to it — after the built-in controls, so those keep their positions — and
+ * sorted by `order`; `ai` / `end` items have no core group, so they form their own trailing group (AI first,
+ * then a catch-all "More"). Mutates `groups`, which the toolbar rebuilds each render (no shared state).
+ *
+ * Pure (no React rendering) and free of editor/platejs imports — split out from toolbar.tsx so the placement
+ * rules are unit-testable in isolation.
+ */
+export function mergeExtensionItems(groups: ToolbarGroup[], extensions: RichTextExtension[]): void {
+  const addonItems = extensions.flatMap((e) => e.toolbar ?? []);
+  if (addonItems.length === 0) return;
+  const toNode = (it: ToolbarItem): ToolbarNode => ({
+    kind: 'custom',
+    id: it.id,
+    expanded: it.render(),
+  });
+  const nodesForSlot = (slot: string) =>
+    addonItems
+      .filter((i) => i.slot === slot)
+      .sort((a, b) => a.order - b.order)
+      .map(toNode);
+  // Append into the matching core group (kept in place so built-in controls don't move).
+  for (const group of groups) {
+    const extra = nodesForSlot(group.id);
+    if (extra.length > 0) group.items = [...group.items, ...extra];
+  }
+  // Slots with no core group get a trailing group of their own.
+  const coreIds = new Set(groups.map((g) => g.id));
+  for (const { slot, label } of [
+    { slot: 'ai', label: 'AI' },
+    { slot: 'end', label: 'More' },
+  ] as const) {
+    if (coreIds.has(slot)) continue;
+    const items = nodesForSlot(slot);
+    if (items.length > 0) groups.push({ id: slot, label, collapse: 'never', items });
+  }
+}