@spatika/editor 1.5.0

package/src/composites/TableGridPicker.tsx

@@ -0,0 +1,138 @@
+import { Columns3, Rows3 } from "lucide-react";
+import { useState, type MouseEvent } from "react";
+import { cn } from "../lib/cn";
+
+export const TABLE_GRID_SIZE = 10;
+export const TABLE_ROWS_MAX = 20;
+export const TABLE_COLS_MAX = 12;
+
+type TableGridPickerProps = {
+  onInsert: (rows: number, cols: number, withHeaderRow: boolean) => void;
+};
+
+function clampDimension(value: number, max: number) {
+  return Math.max(1, Math.min(max, value));
+}
+
+function pickCell(event: MouseEvent<HTMLElement>) {
+  const cell = (event.target as HTMLElement).closest<HTMLButtonElement>("[data-table-row]");
+  if (!cell) return null;
+  return {
+    rows: clampDimension(Number(cell.dataset.tableRow), TABLE_ROWS_MAX),
+    cols: clampDimension(Number(cell.dataset.tableCol), TABLE_COLS_MAX),
+  };
+}
+
+export function TableGridPicker({ onInsert }: TableGridPickerProps) {
+  const [rows, setRows] = useState(3);
+  const [cols, setCols] = useState(3);
+  const [withHeaderRow, setWithHeaderRow] = useState(true);
+  const [hover, setHover] = useState<{ rows: number; cols: number } | null>(null);
+
+  const previewRows = hover?.rows ?? rows;
+  const previewCols = hover?.cols ?? cols;
+
+  const handleGridMove = (event: MouseEvent<HTMLDivElement>) => {
+    const picked = pickCell(event);
+    if (picked) setHover(picked);
+  };
+
+  const handleGridClick = (event: MouseEvent<HTMLDivElement>) => {
+    const picked = pickCell(event);
+    if (picked) {
+      setRows(picked.rows);
+      setCols(picked.cols);
+      onInsert(picked.rows, picked.cols, withHeaderRow);
+    }
+  };
+
+  return (
+    <div className="spk-editor-table-picker">
+      <div className="spk-editor-table-picker-label" aria-live="polite">
+        {previewCols} × {previewRows}
+      </div>
+      <div
+        className="spk-editor-table-picker-grid"
+        role="grid"
+        aria-label="Choose table size"
+        onMouseMove={handleGridMove}
+        onMouseLeave={() => setHover(null)}
+        onClick={handleGridClick}
+      >
+        {Array.from({ length: TABLE_GRID_SIZE * TABLE_GRID_SIZE }, (_, index) => {
+          const rowIndex = Math.floor(index / TABLE_GRID_SIZE);
+          const colIndex = index % TABLE_GRID_SIZE;
+          const cellRows = rowIndex + 1;
+          const cellCols = colIndex + 1;
+          const active = cellRows <= previewRows && cellCols <= previewCols;
+
+          return (
+            <button
+              key={`${rowIndex}-${colIndex}`}
+              type="button"
+              role="gridcell"
+              data-table-row={cellRows}
+              data-table-col={cellCols}
+              className={cn(
+                "spk-editor-table-picker-cell",
+                active && "spk-editor-table-picker-cell--active",
+              )}
+              aria-label={`${cellCols} by ${cellRows} table`}
+              onMouseDown={(event) => event.preventDefault()}
+            />
+          );
+        })}
+      </div>
+      <div className="spk-editor-table-picker-size">
+        <label className="spk-editor-table-picker-size-field">
+          <Columns3 className="size-4" aria-hidden="true" />
+          <span className="sr-only">Columns</span>
+          <input
+            type="number"
+            min={1}
+            max={TABLE_COLS_MAX}
+            className="spk-editor-table-picker-size-input"
+            value={previewCols}
+            onChange={(event) => {
+              setHover(null);
+              setCols(clampDimension(Number.parseInt(event.target.value, 10) || 1, TABLE_COLS_MAX));
+            }}
+          />
+        </label>
+        <span className="spk-editor-table-picker-size-sep" aria-hidden="true">
+          ×
+        </span>
+        <label className="spk-editor-table-picker-size-field">
+          <Rows3 className="size-4" aria-hidden="true" />
+          <span className="sr-only">Rows</span>
+          <input
+            type="number"
+            min={1}
+            max={TABLE_ROWS_MAX}
+            className="spk-editor-table-picker-size-input"
+            value={previewRows}
+            onChange={(event) => {
+              setHover(null);
+              setRows(clampDimension(Number.parseInt(event.target.value, 10) || 1, TABLE_ROWS_MAX));
+            }}
+          />
+        </label>
+      </div>
+      <label className="spk-editor-toolbar-popover-check">
+        <input
+          type="checkbox"
+          checked={withHeaderRow}
+          onChange={(event) => setWithHeaderRow(event.target.checked)}
+        />
+        <span>Header row</span>
+      </label>
+      <button
+        type="button"
+        className="spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--primary spk-editor-table-picker-insert"
+        onClick={() => onInsert(previewRows, previewCols, withHeaderRow)}
+      >
+        Insert {previewCols} × {previewRows} table
+      </button>
+    </div>
+  );
+}

package/src/composites/ToolbarButton.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ToolbarButton } from "./ToolbarButton";
+
+describe("ToolbarButton", () => {
+  it("fires onClick and marks active state", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <ToolbarButton aria-label="Bold" active onClick={onClick}>
+        B
+      </ToolbarButton>,
+    );
+    const button = screen.getByRole("button", { name: "Bold" });
+    expect(button).toHaveAttribute("data-active", "true");
+    expect(button).toHaveClass("spk-editor-toolbar-btn--active");
+    await user.click(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/composites/ToolbarButton.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+/** Compact icon control for the editor toolbar. Avoids a @spatika/react dependency. */
+export const ToolbarButton = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    active?: boolean;
+    children: ReactNode;
+  }
+>(function ToolbarButton({ className, active, children, ...props }, ref) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      data-slot="editor-toolbar-button"
+      data-active={active ? "true" : undefined}
+      className={cn("spk-editor-toolbar-btn", active && "spk-editor-toolbar-btn--active", className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});

package/src/composites/ToolbarFormatPanels.test.tsx

@@ -0,0 +1,46 @@
+import type { Editor } from "@tiptap/core";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { HighlightColorPanel, TextColorPanel } from "./ToolbarFormatPanels";
+
+function createEditor() {
+  const run = vi.fn();
+  const chain = {
+    focus: vi.fn().mockReturnThis(),
+    setColor: vi.fn().mockReturnThis(),
+    unsetColor: vi.fn().mockReturnThis(),
+    setHighlight: vi.fn().mockReturnThis(),
+    unsetHighlight: vi.fn().mockReturnThis(),
+    run,
+  };
+  return {
+    getAttributes: vi.fn((mark: string) => {
+      if (mark === "textStyle") return { color: undefined };
+      if (mark === "highlight") return { color: undefined };
+      return {};
+    }),
+    chain: vi.fn(() => chain),
+    chainRef: chain,
+  } as unknown as Editor & { chainRef: typeof chain };
+}
+
+describe("ToolbarFormatPanels", () => {
+  it("applies a text color and closes", async () => {
+    const editor = createEditor();
+    const close = vi.fn();
+    render(<TextColorPanel editor={editor} close={close} />);
+    await userEvent.click(screen.getByRole("listitem", { name: "Red text" }));
+    expect(editor.chainRef.setColor).toHaveBeenCalledWith("#dc2626");
+    expect(close).toHaveBeenCalled();
+  });
+
+  it("clears highlight color and closes", async () => {
+    const editor = createEditor();
+    const close = vi.fn();
+    render(<HighlightColorPanel editor={editor} close={close} />);
+    await userEvent.click(screen.getByRole("listitem", { name: "Remove highlight" }));
+    expect(editor.chainRef.unsetHighlight).toHaveBeenCalled();
+    expect(close).toHaveBeenCalled();
+  });
+});

package/src/composites/ToolbarFormatPanels.tsx

@@ -0,0 +1,78 @@
+import type { Editor } from "@tiptap/core";
+import type { CSSProperties } from "react";
+import { EDITOR_HIGHLIGHT_COLORS, EDITOR_TEXT_COLORS } from "../lib/editor-format-colors";
+import { cn } from "../lib/cn";
+
+type PanelProps = {
+  editor: Editor;
+  close: () => void;
+};
+
+function ColorSwatchGrid({
+  colors,
+  activeValue,
+  onSelect,
+}: {
+  colors: typeof EDITOR_TEXT_COLORS;
+  activeValue: string | null | undefined;
+  onSelect: (value: string | null) => void;
+}) {
+  return (
+    <div className="spk-editor-color-grid" role="list">
+      {colors.map((color) => {
+        const isActive =
+          color.value === null ? !activeValue : activeValue?.toLowerCase() === color.value.toLowerCase();
+        return (
+          <button
+            key={color.id}
+            type="button"
+            role="listitem"
+            aria-label={color.label}
+            aria-pressed={isActive}
+            className={cn(
+              "spk-editor-color-swatch",
+              color.value === null && "spk-editor-color-swatch--default",
+              isActive && "spk-editor-color-swatch--active",
+            )}
+            style={color.value ? ({ "--swatch-color": color.value } as CSSProperties) : undefined}
+            onClick={() => onSelect(color.value)}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export function TextColorPanel({ editor, close }: PanelProps) {
+  const activeColor = (editor.getAttributes("textStyle").color as string | undefined) ?? null;
+
+  const apply = (value: string | null) => {
+    if (value === null) {
+      editor.chain().focus().unsetColor().run();
+    } else {
+      editor.chain().focus().setColor(value).run();
+    }
+    close();
+  };
+
+  return (
+    <ColorSwatchGrid colors={EDITOR_TEXT_COLORS} activeValue={activeColor} onSelect={apply} />
+  );
+}
+
+export function HighlightColorPanel({ editor, close }: PanelProps) {
+  const activeColor = (editor.getAttributes("highlight").color as string | undefined) ?? null;
+
+  const apply = (value: string | null) => {
+    if (value === null) {
+      editor.chain().focus().unsetHighlight().run();
+    } else {
+      editor.chain().focus().setHighlight({ color: value }).run();
+    }
+    close();
+  };
+
+  return (
+    <ColorSwatchGrid colors={EDITOR_HIGHLIGHT_COLORS} activeValue={activeColor} onSelect={apply} />
+  );
+}

package/src/composites/ToolbarInsertPanels.test.tsx

@@ -0,0 +1,60 @@
+import type { Editor } from "@tiptap/core";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ImageInsertPanel, LinkInsertPanel, TableInsertPanel } from "./ToolbarInsertPanels";
+
+function createEditor() {
+  const run = vi.fn();
+  const chain = {
+    focus: vi.fn().mockReturnThis(),
+    extendMarkRange: vi.fn().mockReturnThis(),
+    setLink: vi.fn().mockReturnThis(),
+    unsetLink: vi.fn().mockReturnThis(),
+    setImage: vi.fn().mockReturnThis(),
+    insertTable: vi.fn().mockReturnThis(),
+    run,
+  };
+  return {
+    getAttributes: vi.fn().mockReturnValue({ href: undefined }),
+    chain: vi.fn(() => chain),
+  } as unknown as Editor;
+}
+
+describe("ToolbarInsertPanels", () => {
+  it("applies a link from the panel", async () => {
+    const editor = createEditor();
+    const close = vi.fn();
+    render(<LinkInsertPanel editor={editor} close={close} />);
+    await userEvent.clear(screen.getByLabelText("URL"));
+    await userEvent.type(screen.getByLabelText("URL"), "https://spatika.dev");
+    await userEvent.click(screen.getByRole("button", { name: "Apply" }));
+    expect(editor.chain).toHaveBeenCalled();
+    expect(close).toHaveBeenCalled();
+  });
+
+  it("inserts an image from the panel URL field", async () => {
+    const editor = createEditor();
+    const close = vi.fn();
+    render(<ImageInsertPanel editor={editor} close={close} />);
+    expect(screen.getByText("Click to upload or drag and drop")).toBeInTheDocument();
+    await userEvent.type(screen.getByLabelText("Image URL"), "https://example.com/a.png");
+    await userEvent.click(screen.getByRole("button", { name: "Insert" }));
+    expect(editor.chain).toHaveBeenCalled();
+    expect(close).toHaveBeenCalled();
+  });
+
+  it("inserts a table from the grid picker", async () => {
+    const editor = createEditor();
+    const close = vi.fn();
+    render(<TableInsertPanel editor={editor} close={close} />);
+    await userEvent.click(screen.getByRole("gridcell", { name: "5 by 4 table" }));
+    const chain = editor.chain();
+    expect(chain.insertTable).toHaveBeenCalledWith({
+      rows: 4,
+      cols: 5,
+      withHeaderRow: true,
+    });
+    expect(close).toHaveBeenCalled();
+  });
+});

package/src/composites/ToolbarInsertPanels.tsx

@@ -0,0 +1,200 @@
+import type { Editor } from "@tiptap/core";
+import { ImagePlus, Upload } from "lucide-react";
+import { useRef, useState } from "react";
+import type { ImageInsertConfig } from "../lib/types";
+import { cn } from "../lib/cn";
+import { insertImageFilesIntoEditor } from "../lib/insert-editor-images";
+import { TableGridPicker } from "./TableGridPicker";
+
+type PanelProps = {
+  editor: Editor;
+  close: () => void;
+};
+
+type ImagePanelProps = PanelProps & {
+  config?: ImageInsertConfig;
+};
+
+export function LinkInsertPanel({ editor, close }: PanelProps) {
+  const previous = editor.getAttributes("link").href as string | undefined;
+  const [url, setUrl] = useState(previous ?? "https://");
+
+  const apply = () => {
+    const trimmed = url.trim();
+    if (!trimmed) {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    } else {
+      editor.chain().focus().extendMarkRange("link").setLink({ href: trimmed }).run();
+    }
+    close();
+  };
+
+  const remove = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    close();
+  };
+
+  return (
+    <div className="spk-editor-toolbar-popover-form">
+      <label className="spk-editor-toolbar-popover-field">
+        <span>URL</span>
+        <input
+          type="url"
+          className="spk-editor-toolbar-popover-input"
+          value={url}
+          placeholder="https://"
+          onChange={(event) => setUrl(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") apply();
+            if (event.key === "Escape") close();
+          }}
+          autoFocus
+        />
+      </label>
+      <div className="spk-editor-toolbar-popover-actions">
+        {previous ? (
+          <button type="button" className="spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--ghost" onClick={remove}>
+            Remove
+          </button>
+        ) : null}
+        <button type="button" className="spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--ghost" onClick={close}>
+          Cancel
+        </button>
+        <button type="button" className="spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--primary" onClick={apply}>
+          Apply
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function insertImageSrc(editor: Editor, src: string) {
+  editor.chain().focus().setImage({ src }).run();
+}
+
+export function ImageInsertPanel({ editor, close, config }: ImagePanelProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [url, setUrl] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [dragging, setDragging] = useState(false);
+
+  const maxFiles = config?.maxFiles ?? 3;
+  const maxSizeBytes = config?.maxSizeBytes ?? 5 * 1024 * 1024;
+  const accept = config?.accept ?? "image/*";
+  const limitMb = Math.round(maxSizeBytes / (1024 * 1024));
+
+  const handleFiles = async (files: FileList | File[]) => {
+    setError(null);
+    const inserted = await insertImageFilesIntoEditor(editor, files, config);
+    if (!inserted) {
+      setError("Could not insert image.");
+      return;
+    }
+    close();
+  };
+
+  const insertFromUrl = () => {
+    const trimmed = url.trim();
+    if (!trimmed) return;
+    insertImageSrc(editor, trimmed);
+    close();
+  };
+
+  return (
+    <div className="spk-editor-toolbar-popover-form spk-editor-image-insert">
+      <button
+        type="button"
+        className={cn(
+          "spk-editor-image-dropzone",
+          dragging && "spk-editor-image-dropzone--active",
+        )}
+        onClick={() => inputRef.current?.click()}
+        onDragEnter={(event) => {
+          event.preventDefault();
+          setDragging(true);
+        }}
+        onDragOver={(event) => {
+          event.preventDefault();
+          setDragging(true);
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(event) => {
+          event.preventDefault();
+          setDragging(false);
+          if (event.dataTransfer.files.length) {
+            void handleFiles(event.dataTransfer.files);
+          }
+        }}
+      >
+        <span className="spk-editor-image-dropzone-icon" aria-hidden="true">
+          <Upload className="size-5" />
+        </span>
+        <span className="spk-editor-image-dropzone-title">Click to upload or drag and drop</span>
+        <span className="spk-editor-image-dropzone-hint">
+          Maximum {maxFiles} files, {limitMb}MB each
+        </span>
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={maxFiles > 1}
+        className="sr-only"
+        onChange={(event) => {
+          if (event.target.files?.length) {
+            void handleFiles(event.target.files);
+          }
+        }}
+      />
+      {error ? <p className="spk-editor-image-insert-error">{error}</p> : null}
+      <div className="spk-editor-image-insert-divider">
+        <span>or paste a URL</span>
+      </div>
+      <label className="spk-editor-toolbar-popover-field">
+        <span>Image URL</span>
+        <input
+          type="url"
+          className="spk-editor-toolbar-popover-input"
+          value={url}
+          placeholder="https://example.com/photo.jpg"
+          onChange={(event) => setUrl(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") insertFromUrl();
+            if (event.key === "Escape") close();
+          }}
+        />
+      </label>
+      <div className="spk-editor-toolbar-popover-actions">
+        <button type="button" className="spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--ghost" onClick={close}>
+          Cancel
+        </button>
+        <button
+          type="button"
+          className="spk-editor-toolbar-popover-btn spk-editor-toolbar-popover-btn--primary"
+          onClick={insertFromUrl}
+          disabled={!url.trim()}
+        >
+          <ImagePlus className="size-4" aria-hidden="true" />
+          Insert
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function TableInsertPanel({ editor, close }: PanelProps) {
+  const insert = (nextRows: number, nextCols: number, withHeaderRow: boolean) => {
+    editor
+      .chain()
+      .focus()
+      .insertTable({
+        rows: nextRows,
+        cols: nextCols,
+        withHeaderRow,
+      })
+      .run();
+    close();
+  };
+
+  return <TableGridPicker onInsert={insert} />;
+}

package/src/composites/ToolbarPopover.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Link2 } from "lucide-react";
+import { ToolbarPopover } from "./ToolbarPopover";
+
+describe("ToolbarPopover", () => {
+  it("opens a glass panel and closes on cancel", async () => {
+    const close = vi.fn();
+    render(
+      <ToolbarPopover label="Insert link" title="Insert link" icon={<Link2 className="size-4" />}>
+        {({ close: closePanel }) => (
+          <button type="button" onClick={() => { close(); closePanel(); }}>
+            Done
+          </button>
+        )}
+      </ToolbarPopover>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Insert link" }));
+    expect(screen.getByRole("dialog", { name: "Insert link" })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Done" }));
+    expect(close).toHaveBeenCalled();
+  });
+});

package/src/composites/ToolbarPopover.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/cn";
+import { ToolbarButton } from "./ToolbarButton";
+
+type ToolbarPopoverProps = {
+  label: string;
+  icon: ReactNode;
+  title: string;
+  className?: string;
+  active?: boolean;
+  children: (api: { close: () => void }) => ReactNode;
+};
+
+export function ToolbarPopover({
+  label,
+  icon,
+  title,
+  className,
+  active = false,
+  children,
+}: ToolbarPopoverProps) {
+  const [open, setOpen] = useState(false);
+  const [panelStyle, setPanelStyle] = useState<{ top: number; left: number } | null>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+
+  const close = () => setOpen(false);
+
+  useLayoutEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const updatePosition = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setPanelStyle({
+        top: rect.bottom + 6,
+        left: rect.left,
+      });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (rootRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [open]);
+
+  const panel =
+    open && panelStyle ? (
+      <div
+        ref={panelRef}
+        id={titleId}
+        className="spk-editor-toolbar-popover-panel spk-editor-toolbar-popover-panel--portal"
+        role="dialog"
+        aria-label={title}
+        style={{ top: panelStyle.top, left: panelStyle.left }}
+        onMouseDown={(event) => event.stopPropagation()}
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        <div className="spk-editor-toolbar-popover-title">{title}</div>
+        {children({ close })}
+      </div>
+    ) : null;
+
+  return (
+    <div ref={rootRef} className={cn("spk-editor-toolbar-popover", className)}>
+      <ToolbarButton
+        ref={triggerRef}
+        aria-label={label}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        aria-controls={open ? titleId : undefined}
+        active={open || active}
+        onClick={() => setOpen((value) => !value)}
+      >
+        {icon}
+      </ToolbarButton>
+      {typeof document !== "undefined" && panel ? createPortal(panel, document.body) : null}
+    </div>
+  );
+}