@ai-matrx/rich-editor 0.1.2 → 0.2.0

package/dist/visual/VisualEditor.js

@@ -0,0 +1,312 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { redoDepth, undoDepth } from "@tiptap/pm/history";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { getSchema } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { cn } from "@ai-matrx/design-system";
+import { toast } from "@ai-matrx/rich-content/host/toast";
+import { TableWriteRefused } from "@ai-matrx/rich-content/utils/table-source";
+import { createRichEditorExtensions } from "../core/extensions.js";
+import { replaceSelectionWithMarkdown } from "../core/paste-markdown.js";
+import { insertMarkdownBlock } from "../core/block-insert.js";
+import {
+  buildVisualDocument,
+  captureBaseline,
+  serializeVisualDocument
+} from "../core/visual-document.js";
+import { findInDoc, replaceInDoc } from "../core/visual-find.js";
+import { locateCaret } from "../core/caret-context.js";
+import { createVisualExtensions } from "./visual-extensions.js";
+import { findHighlightKey } from "./decorations.js";
+import { BlockHandle } from "./BlockHandle.js";
+import { useSelectionZone } from "@ai-matrx/rich-content/selection-toolbar/selection-zones";
+import { RICH_EDITOR_HOST_KEY, islandSelectionOf, tableAnchorOf } from "./format-actions.js";
+import { useRichEditorContext } from "../editor/RichEditorContext.js";
+const HEADLESS_SCHEMA = getSchema(createRichEditorExtensions());
+const REPORT_DELAY_MS = 120;
+function VisualEditor({
+  initialText,
+  onChange,
+  onLoadStats,
+  shell,
+  placeholder,
+  focusMode,
+  handleRef
+}) {
+  const context = useRichEditorContext();
+  const container = useRef(null);
+  const [load] = useState(() => buildVisualDocument(initialText, HEADLESS_SCHEMA));
+  const baseline = useRef(null);
+  const timer = useRef(null);
+  const lastReported = useRef(initialText);
+  const findState = useRef({ matches: [], index: -1 });
+  const refusalShown = useRef(null);
+  const report = (editor2, strict = false) => {
+    if (!baseline.current) return lastReported.current;
+    let text;
+    try {
+      text = serializeVisualDocument(editor2.state.doc, baseline.current);
+      refusalShown.current = null;
+    } catch (error) {
+      if (!(error instanceof TableWriteRefused)) throw error;
+      if (strict) throw error;
+      if (refusalShown.current !== error.message) {
+        refusalShown.current = error.message;
+        toast.error(error.message);
+      }
+      return lastReported.current;
+    }
+    if (text !== lastReported.current) {
+      lastReported.current = text;
+      onChange(text);
+    }
+    return text;
+  };
+  const [extensions] = useState(() => createVisualExtensions({ placeholder, shell }));
+  const editorsBuilt = useRef(0);
+  const reload = useRef(null);
+  const plan = () => (reload.current ?? load).plan;
+  const editor = useEditor({
+    extensions,
+    content: load.json,
+    onBeforeCreate: ({ editor: next }) => {
+      editorsBuilt.current += 1;
+      if (editorsBuilt.current === 1) return;
+      reload.current = buildVisualDocument(lastReported.current, HEADLESS_SCHEMA);
+      baseline.current = null;
+      next.setOptions({ content: reload.current.json });
+    },
+    immediatelyRender: false,
+    editable: !context.readOnly,
+    editorProps: {
+      attributes: {
+        class: cn(
+          "rich-editor-prose prose prose-sm sm:prose-base dark:prose-invert max-w-none min-h-[60dvh] px-8 py-6 outline-none sm:px-12"
+        ),
+        spellcheck: "true",
+        "aria-label": "Document"
+      }
+    },
+    onCreate: ({ editor: created }) => {
+      if (!baseline.current) baseline.current = captureBaseline(created.state.doc, plan());
+      onLoadStats?.(plan().stats);
+    },
+    onUpdate: ({ editor: updated, transaction }) => {
+      if (!baseline.current) baseline.current = captureBaseline(transaction.before, plan());
+      if (timer.current !== null) window.clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => {
+        timer.current = null;
+        report(updated);
+      }, REPORT_DELAY_MS);
+    }
+  });
+  useEffect(() => {
+    editor?.setEditable(!context.readOnly);
+  }, [editor, context.readOnly]);
+  const liveEditor = useRef(null);
+  const reportRef = useRef(report);
+  useEffect(() => {
+    liveEditor.current = editor;
+    reportRef.current = report;
+  });
+  useEffect(
+    () => () => {
+      if (timer.current === null) return;
+      window.clearTimeout(timer.current);
+      timer.current = null;
+      const pending = liveEditor.current;
+      if (!pending) return;
+      try {
+        reportRef.current(pending);
+      } catch {
+      }
+    },
+    []
+  );
+  const setHighlights = (current) => {
+    if (!editor) return;
+    const { matches } = findState.current;
+    editor.view.dispatch(
+      editor.state.tr.setMeta(
+        findHighlightKey,
+        matches.map((match, index) => ({ from: match.from, to: match.to, current: index === current }))
+      )
+    );
+  };
+  useImperativeHandle(handleRef, () => ({
+    focus: () => editor?.commands.focus(),
+    selectedText: () => {
+      if (!editor) return "";
+      const { from, to } = editor.state.selection;
+      return editor.state.doc.textBetween(from, to, "\n");
+    },
+    replaceSelection: (text) => {
+      if (!editor) return;
+      editor.chain().focus().command(({ tr }) => {
+        replaceSelectionWithMarkdown(tr, editor.state.schema, text);
+        return true;
+      }).run();
+    },
+    insertText: (text, where) => {
+      if (!editor) return false;
+      let inserted = false;
+      try {
+        editor.commands.command(({ tr }) => {
+          inserted = insertMarkdownBlock(tr, editor.state.schema, text, where);
+          return inserted;
+        });
+      } catch (error) {
+        console.error("[RichEditor] block insert failed", error);
+        inserted = false;
+      }
+      return inserted;
+    },
+    historyDepth: () => editor ? { undo: undoDepth(editor.state), redo: redoDepth(editor.state) } : { undo: 0, redo: 0 },
+    flush: () => {
+      if (!editor) return lastReported.current;
+      if (timer.current !== null) {
+        window.clearTimeout(timer.current);
+        timer.current = null;
+      }
+      return report(editor, true);
+    },
+    scrollToHeading: (slug) => {
+      const element = container.current?.querySelector(`[data-heading-slug="${CSS.escape(slug)}"]`);
+      element?.scrollIntoView({ behavior: "smooth", block: "start" });
+      if (editor && element) {
+        const pos = editor.view.posAtDOM(element, 0);
+        editor.chain().setTextSelection(pos).focus(void 0, { scrollIntoView: false }).run();
+      }
+    },
+    placeCaret: (context2) => {
+      if (!editor) return false;
+      let flat = "";
+      const positions = [];
+      editor.state.doc.descendants((node, pos2) => {
+        if (node.isText && node.text) {
+          for (let i = 0; i < node.text.length; i++) positions.push(pos2 + i);
+          flat += node.text;
+        } else if (node.isBlock && flat.length > 0 && !flat.endsWith("\n")) {
+          positions.push(pos2);
+          flat += "\n";
+        }
+        return true;
+      });
+      const index = locateCaret(flat, context2);
+      if (index === null) return false;
+      const pos = index < positions.length ? positions[index] : editor.state.doc.content.size - 1;
+      try {
+        editor.view.dispatch(editor.state.tr.setSelection(TextSelection.near(editor.state.doc.resolve(pos))).scrollIntoView());
+        editor.view.focus();
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    find: (query, options, step) => {
+      if (!editor) return { count: 0, current: -1, skippedProtected: 0, error: null };
+      const result = findInDoc(editor.state.doc, query, options);
+      const previous = findState.current;
+      const cursor = editor.state.selection.from;
+      let index = result.matches.findIndex((match2) => match2.from >= cursor);
+      if (index === -1) index = result.matches.length ? 0 : -1;
+      if (step && previous.index >= 0 && result.matches.length) {
+        index = (previous.index + step + result.matches.length) % result.matches.length;
+      }
+      findState.current = { matches: result.matches, index };
+      setHighlights(index);
+      const match = result.matches[index];
+      if (match && step) {
+        editor.view.dispatch(
+          editor.state.tr.setSelection(TextSelection.create(editor.state.doc, match.from, match.to)).scrollIntoView()
+        );
+      }
+      return { count: result.matches.length, current: index, skippedProtected: result.skippedProtected, error: result.error };
+    },
+    replaceCurrent: (query, replacement, options) => {
+      if (!editor) return [];
+      const match = findState.current.matches[findState.current.index];
+      if (!match) return [];
+      let changed = [];
+      editor.commands.command(({ tr }) => {
+        changed = replaceInDoc(tr, [match], query, replacement, options);
+        return true;
+      });
+      return changed;
+    },
+    replaceAll: (query, replacement, options) => {
+      if (!editor) return [];
+      const { matches } = findInDoc(editor.state.doc, query, options);
+      let changed = [];
+      editor.commands.command(({ tr }) => {
+        changed = replaceInDoc(tr, matches, query, replacement, options);
+        return true;
+      });
+      return changed;
+    },
+    clearFind: () => {
+      findState.current = { matches: [], index: -1 };
+      setHighlights(-1);
+    },
+    editLink: (href) => {
+      if (!editor) return;
+      if (href) editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
+      else editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    },
+    currentLink: () => editor?.getAttributes("link").href ?? null
+  }));
+  const [zoneElement, setZoneElement] = useState(null);
+  const editorHalf = editor ? {
+    kind: "rich-editor",
+    editor,
+    onEditLink: shell.editLink,
+    offerVariables: context.variables !== null,
+    inTable: () => !editor.isDestroyed && editor.isActive("table")
+  } : null;
+  useSelectionZone(
+    zoneElement,
+    editorHalf ? {
+      editable: !context.readOnly,
+      host: { [RICH_EDITOR_HOST_KEY]: editorHalf },
+      // The caret in a table keeps the one toolbar up with the table actions; a
+      // selected code block (an island) gets it too, acting on the block's source.
+      caretAnchor: () => {
+        if (!editor || editor.isDestroyed || !editor.isFocused) return null;
+        const island = islandSelectionOf(editor);
+        if (island) return { left: island.box.left, top: island.box.top, bottom: island.box.top + 1, width: island.box.width };
+        if (context.readOnly) return null;
+        const box = tableAnchorOf(editor);
+        return box ? { left: box.left, top: box.top, bottom: box.top + 1, width: Math.min(box.width, 40) } : null;
+      },
+      caretText: () => editor && !editor.isDestroyed ? islandSelectionOf(editor)?.raw ?? "" : "",
+      // The model selection lands a beat after the DOM one: re-resolve the open toolbar then,
+      // so formatting is judged on the selection the person made, never the previous one.
+      subscribe: (onChange2) => {
+        if (!editor || editor.isDestroyed) return () => {
+        };
+        editor.on("selectionUpdate", onChange2);
+        return () => editor.off("selectionUpdate", onChange2);
+      }
+    } : null
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        container.current = node;
+        setZoneElement(node);
+      },
+      className: cn("rich-editor-visual relative h-full overflow-y-auto", focusMode && "rich-editor-focus"),
+      "data-testid": "rich-editor-visual",
+      children: [
+        /* @__PURE__ */ jsx(BlockHandle, { editor, container }),
+        /* @__PURE__ */ jsx(EditorContent, { editor, className: "mx-auto max-w-3xl pb-[40dvh]" })
+      ]
+    }
+  );
+}
+export {
+  VisualEditor
+};

package/dist/visual/auto-edit.d.ts

@@ -0,0 +1,3 @@
+import type { Editor } from "@tiptap/core";
+export declare function markAutoEdit(editor: Editor, pos: number): void;
+export declare function consumeAutoEdit(editor: Editor, pos: number): boolean;

package/dist/visual/auto-edit.js

@@ -0,0 +1,17 @@
+const pending = /* @__PURE__ */ new WeakMap();
+function markAutoEdit(editor, pos) {
+  if (pos < 0) return;
+  const set = pending.get(editor) ?? /* @__PURE__ */ new Set();
+  set.add(pos);
+  pending.set(editor, set);
+}
+function consumeAutoEdit(editor, pos) {
+  const set = pending.get(editor);
+  if (!set?.has(pos)) return false;
+  set.delete(pos);
+  return true;
+}
+export {
+  consumeAutoEdit,
+  markAutoEdit
+};

package/dist/visual/context-menu-caret.d.ts

@@ -0,0 +1,10 @@
+import { Extension } from "@tiptap/core";
+import type { EditorState, Selection } from "@tiptap/pm/state";
+/** What `view.posAtCoords` answers: the position, and the node it is inside. */
+export interface CoordsHit {
+    pos: number;
+    inside: number;
+}
+/** The selection a right-click at `hit` leaves, or null to keep the current one. */
+export declare function selectionForContextMenu(state: EditorState, hit: CoordsHit | null): Selection | null;
+export declare const ContextMenuCaret: Extension<any, any>;

package/dist/visual/context-menu-caret.js

@@ -0,0 +1,42 @@
+import { Extension } from "@tiptap/core";
+import { NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+function selectionForContextMenu(state, hit) {
+  if (!hit) return null;
+  const { doc, selection } = state;
+  const pos = Math.max(0, Math.min(hit.pos, doc.content.size));
+  if (!selection.empty && pos >= selection.from && pos <= selection.to) return null;
+  if (hit.inside >= 0) {
+    const node = doc.nodeAt(hit.inside);
+    if (node && node.isAtom && NodeSelection.isSelectable(node)) {
+      const next2 = NodeSelection.create(doc, hit.inside);
+      return next2.eq(selection) ? null : next2;
+    }
+  }
+  const next = TextSelection.near(doc.resolve(pos));
+  return next.eq(selection) ? null : next;
+}
+const key = new PluginKey("richEditorContextMenuCaret");
+const ContextMenuCaret = Extension.create({
+  name: "richEditorContextMenuCaret",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key,
+        props: {
+          handleDOMEvents: {
+            contextmenu: (view, event) => {
+              const hit = view.posAtCoords({ left: event.clientX, top: event.clientY });
+              const next = selectionForContextMenu(view.state, hit);
+              if (next) view.dispatch(view.state.tr.setSelection(next));
+              return false;
+            }
+          }
+        }
+      })
+    ];
+  }
+});
+export {
+  ContextMenuCaret,
+  selectionForContextMenu
+};

package/dist/visual/decorations.d.ts

@@ -0,0 +1,9 @@
+import { Extension } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+export interface FindHighlight {
+    from: number;
+    to: number;
+    current: boolean;
+}
+export declare const findHighlightKey: PluginKey<FindHighlight[]>;
+export declare const RichDecorations: Extension<any, any>;

package/dist/visual/decorations.js

@@ -0,0 +1,131 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { headingPlainText, slugsFor } from "../core/outline.js";
+import { TASK_DONE, TASK_OPEN } from "../core/commands.js";
+const findHighlightKey = new PluginKey("richEditorFind");
+const decorationsKey = new PluginKey("richEditorDecorations");
+function taskCheckbox(checked, pos) {
+  const box = document.createElement("input");
+  box.type = "checkbox";
+  box.checked = checked;
+  box.className = "rich-editor-task-box";
+  box.setAttribute("aria-label", checked ? "Mark as not done" : "Mark as done");
+  box.dataset.itemPos = String(pos);
+  box.contentEditable = "false";
+  return box;
+}
+function buildDecorations(doc) {
+  const decorations = [];
+  const headings = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name === "heading") {
+      headings.push({ pos, size: node.nodeSize, text: headingPlainText(node.textContent) });
+      return false;
+    }
+    if (node.type.name === "listItem" && typeof node.attrs.mdTask === "string") {
+      const checked = /\[[xX]\]/.test(node.attrs.mdTask);
+      decorations.push(
+        Decoration.node(pos, pos + node.nodeSize, {
+          class: `rich-editor-task-item${checked ? " is-checked" : ""}`
+        }),
+        Decoration.widget(pos + 1, () => taskCheckbox(checked, pos), {
+          side: -1,
+          key: `task-${pos}-${checked}`,
+          ignoreSelection: true
+        })
+      );
+    }
+    if (node.isText && node.text && node.text.includes("[^")) {
+      for (const match of node.text.matchAll(/\[\^[^\]\s]+\](:)?/g)) {
+        const from = pos + (match.index ?? 0);
+        decorations.push(
+          Decoration.inline(from, from + match[0].length, {
+            class: match[1] ? "rich-editor-footnote-def" : "rich-editor-footnote-ref"
+          })
+        );
+      }
+    }
+    return true;
+  });
+  const slugs = slugsFor(headings.map((heading) => heading.text));
+  headings.forEach((heading, index) => {
+    decorations.push(
+      Decoration.node(heading.pos, heading.pos + heading.size, {
+        id: slugs[index] ?? "",
+        "data-heading-slug": slugs[index] ?? ""
+      })
+    );
+  });
+  return DecorationSet.create(doc, decorations);
+}
+function findDecorations(state) {
+  const highlights = findHighlightKey.getState(state) ?? [];
+  if (!highlights.length) return DecorationSet.empty;
+  return DecorationSet.create(
+    state.doc,
+    highlights.filter((highlight) => highlight.to <= state.doc.content.size).map(
+      (highlight) => Decoration.inline(highlight.from, highlight.to, {
+        class: highlight.current ? "rich-editor-find-current" : "rich-editor-find-match"
+      })
+    )
+  );
+}
+const RichDecorations = Extension.create({
+  name: "richDecorations",
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    return [
+      new Plugin({
+        key: decorationsKey,
+        state: {
+          init: (_config, state) => buildDecorations(state.doc),
+          apply: (tr, previous) => tr.docChanged ? buildDecorations(tr.doc) : previous
+        },
+        props: {
+          decorations: (state) => decorationsKey.getState(state),
+          handleDOMEvents: {
+            mousedown: (_view, event) => {
+              const target = event.target;
+              if (target?.classList.contains("rich-editor-task-box")) {
+                event.preventDefault();
+                const pos = Number(target.dataset.itemPos);
+                const item = editor.state.doc.nodeAt(pos);
+                if (item?.type.name === "listItem" && editor.isEditable) {
+                  const checked = /\[[xX]\]/.test(String(item.attrs.mdTask));
+                  editor.commands.command(({ tr }) => {
+                    tr.setNodeMarkup(pos, void 0, { ...item.attrs, mdTask: checked ? TASK_OPEN : TASK_DONE });
+                    return true;
+                  });
+                }
+                return true;
+              }
+              return false;
+            }
+          }
+        }
+      }),
+      new Plugin({
+        key: findHighlightKey,
+        state: {
+          init: () => [],
+          apply: (tr, previous) => {
+            const next = tr.getMeta(findHighlightKey);
+            if (next) return next;
+            if (!tr.docChanged) return previous;
+            return previous.map((highlight) => ({
+              ...highlight,
+              from: tr.mapping.map(highlight.from),
+              to: tr.mapping.map(highlight.to)
+            })).filter((highlight) => highlight.to > highlight.from);
+          }
+        },
+        props: { decorations: findDecorations }
+      })
+    ];
+  }
+});
+export {
+  RichDecorations,
+  findHighlightKey
+};

package/dist/visual/format-actions.d.ts

@@ -0,0 +1,20 @@
+import type { Editor } from "@tiptap/core";
+import type { ActionProvider } from "@ai-matrx/alchemy/actions";
+export declare const RICH_EDITOR_HOST_KEY = "richEditor";
+export interface RichEditorSelectionHost {
+    kind: "rich-editor";
+    editor: Editor;
+    onEditLink: () => void;
+    offerVariables: boolean;
+    /** The caret or selection is inside a table (its table actions show). */
+    inTable: () => boolean;
+}
+/** A selected code block / island (a NodeSelection on it): its box and its source. */
+export declare function islandSelectionOf(editor: Editor): {
+    box: DOMRect;
+    raw: string;
+} | null;
+/** The table the caret is in, as a box (the toolbar's caret-mode anchor), or null. */
+export declare function tableAnchorOf(editor: Editor): DOMRect | null;
+/** The formatting provider (declared on load; the toolbar root registers it). */
+export declare const richEditorFormatProvider: ActionProvider;

package/dist/visual/format-actions.js

@@ -0,0 +1,128 @@
+import { NodeSelection } from "@tiptap/pm/state";
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  ArrowDownToLine,
+  ArrowLeftToLine,
+  ArrowRightToLine,
+  ArrowUpToLine,
+  Braces,
+  Columns3,
+  Rows3,
+  Trash2
+} from "lucide-react";
+import { registerAlchemyIcon } from "@ai-matrx/rich-content/utils/alchemy-icon-keys";
+import { declareSelectionProvider, hostHalf, placeSelectionActions, shownInSelectionMode } from "@ai-matrx/rich-content/selection-toolbar/selection-actions";
+import { insertCodeBlock, insertVariable, setColumnAlign, toggleTaskList } from "../core/commands.js";
+import { registerVisualFormatResolver } from "../format/format-actions.js";
+import { visualFormatTarget } from "./visual-format-target.js";
+import { markAutoEdit } from "./auto-edit.js";
+import { toVariableName } from "../core/variables.js";
+const RICH_EDITOR_HOST_KEY = "richEditor";
+function islandSelectionOf(editor) {
+  const { selection } = editor.state;
+  if (!(selection instanceof NodeSelection) || selection.node.type.name !== "islandBlock") return null;
+  const dom = editor.view.nodeDOM(selection.from);
+  if (!(dom instanceof HTMLElement)) return null;
+  return { box: dom.getBoundingClientRect(), raw: String(selection.node.attrs.raw ?? "") };
+}
+function tableAnchorOf(editor) {
+  if (!editor.isEditable || !editor.isActive("table")) return null;
+  const { $from } = editor.state.selection;
+  for (let depth = $from.depth; depth > 0; depth -= 1) {
+    if ($from.node(depth).type.name === "table") {
+      const dom = editor.view.nodeDOM($from.before(depth));
+      if (dom instanceof HTMLElement) return dom.getBoundingClientRect();
+    }
+  }
+  return null;
+}
+function editorOf(target) {
+  const half = hostHalf(target, RICH_EDITOR_HOST_KEY);
+  return half?.kind === "rich-editor" && !half.editor.isDestroyed ? half : null;
+}
+function visualTargetOf(target) {
+  const visual = editorOf(target);
+  if (!visual) return null;
+  const { editor } = visual;
+  return visualFormatTarget(editor, {
+    link: () => (visual.onEditLink(), true),
+    taskList: () => toggleTaskList(editor),
+    codeBlock: () => {
+      markAutoEdit(editor, insertCodeBlock(editor));
+      return true;
+    }
+  });
+}
+registerVisualFormatResolver(visualTargetOf);
+const VARIABLE_ACTION = {
+  id: "selection:format-variable",
+  label: "Turn into a {{variable}}",
+  icon: registerAlchemyIcon(Braces),
+  category: "edit",
+  order: 50,
+  placement: "primary",
+  preserveSelection: true,
+  eligible: (t) => {
+    const host = editorOf(t);
+    if (!host || !host.offerVariables || !shownInSelectionMode("selection:format-variable", t)) return { status: "absent" };
+    if (!visualFormatTarget(host.editor).canFormat()) return { status: "absent" };
+    return { status: "available" };
+  },
+  run: (t) => {
+    const host = editorOf(t);
+    if (!host) return;
+    const { editor } = host;
+    const { from, to } = editor.state.selection;
+    const name = toVariableName(editor.state.doc.textBetween(from, to, " "));
+    if (name) insertVariable(editor, name);
+  }
+};
+const TABLE_TOOLS = [
+  { id: "row-above", label: "Add row above", icon: ArrowUpToLine, run: (e) => e.chain().focus().addRowBefore().run() },
+  { id: "row-below", label: "Add row below", icon: ArrowDownToLine, run: (e) => e.chain().focus().addRowAfter().run() },
+  { id: "col-left", label: "Add column left", icon: ArrowLeftToLine, run: (e) => e.chain().focus().addColumnBefore().run() },
+  { id: "col-right", label: "Add column right", icon: ArrowRightToLine, run: (e) => e.chain().focus().addColumnAfter().run() },
+  { id: "align-left", more: true, label: "Align column left", icon: AlignLeft, run: (e) => setColumnAlign(e, "left") },
+  { id: "align-center", more: true, label: "Center column", icon: AlignCenter, run: (e) => setColumnAlign(e, "center") },
+  { id: "align-right", more: true, label: "Align column right", icon: AlignRight, run: (e) => setColumnAlign(e, "right") },
+  { id: "del-row", label: "Delete row", icon: Rows3, run: (e) => e.chain().focus().deleteRow().run(), destructive: true, more: true },
+  { id: "del-col", label: "Delete column", icon: Columns3, run: (e) => e.chain().focus().deleteColumn().run(), destructive: true, more: true },
+  { id: "del-table", label: "Delete table (Undo brings it back)", icon: Trash2, run: (e) => e.chain().focus().deleteTable().run(), destructive: true, more: true }
+];
+const TABLE_ACTIONS = TABLE_TOOLS.map((spec, index) => {
+  const id = `selection:table-${spec.id}`;
+  return {
+    id,
+    label: spec.label,
+    icon: registerAlchemyIcon(spec.icon),
+    category: "edit",
+    order: 100 + index,
+    placement: spec.more ? "overflow" : "primary",
+    preserveSelection: true,
+    ...spec.destructive ? { destructive: true } : {},
+    eligible: (t) => {
+      const host = editorOf(t);
+      if (!host || !shownInSelectionMode(id, t) || !host.editor.isEditable || !host.inTable()) return { status: "absent" };
+      return { status: "available" };
+    },
+    run: (t) => {
+      const host = editorOf(t);
+      if (host) spec.run(host.editor);
+    }
+  };
+});
+const richEditorFormatProvider = {
+  id: "rich-editor-format",
+  tier: "T0",
+  declaredIds: () => [VARIABLE_ACTION, ...TABLE_ACTIONS].map((a) => a.id),
+  actions: (target) => editorOf(target) ? placeSelectionActions([VARIABLE_ACTION, ...TABLE_ACTIONS], target) : []
+};
+declareSelectionProvider(richEditorFormatProvider);
+export {
+  RICH_EDITOR_HOST_KEY,
+  islandSelectionOf,
+  richEditorFormatProvider,
+  tableAnchorOf
+};