@estiva-app/ui 0.72.0 → 0.73.0-inline-text.1

package/dist/editor.js

@@ -456,10 +456,10 @@ var ComposeKeys = Extension2.create({
   }
 });
 function isEmptyDoc(editor) {
-  const doc = editor.state.doc;
-  if (doc.textContent.length > 0) return false;
+  const doc2 = editor.state.doc;
+  if (doc2.textContent.length > 0) return false;
   let empty = true;
-  doc.descendants((node) => {
+  doc2.descendants((node) => {
     if (node.isAtom && node.type.name !== "hardBreak") empty = false;
   });
   return empty;
@@ -527,8 +527,114 @@ function ComposeBox({ editor, onSend, placeholder, tools, attachments, ready = f
   ] }) });
 }
 
+// src/InlineText.tsx
+import { useCallback as useCallback3, useEffect as useEffect3, useImperativeHandle as useImperativeHandle2, useRef as useRef3, useState as useState3 } from "react";
+import { Extension as Extension3, Node as Node2 } from "@tiptap/core";
+import { history, redo, undo } from "@tiptap/pm/history";
+import { EditorContent as EditorContent2, useEditor } from "@tiptap/react";
+import { cn as cn2 } from "@estiva-app/ui";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var VARIANT = {
+  title: "text-h2 text-text-primary",
+  summary: "text-body-1 text-text-secondary"
+};
+var ROOM = "-mx-2 px-2 py-1";
+var OneLine = Node2.create({ name: "doc", topNode: true, content: "paragraph" });
+var Paragraph = Node2.create({
+  name: "paragraph",
+  content: "text*",
+  parseHTML: () => [{ tag: "p" }],
+  renderHTML: () => ["p", 0]
+});
+var Text = Node2.create({ name: "text" });
+var Undo = Extension3.create({
+  name: "inlineTextUndo",
+  addProseMirrorPlugins: () => [history()],
+  addKeyboardShortcuts() {
+    const run = (command) => () => command(this.editor.state, this.editor.view.dispatch);
+    return { "Mod-z": run(undo), "Shift-Mod-z": run(redo), "Mod-y": run(redo) };
+  }
+});
+var doc = (text) => ({ type: "doc", content: [{ type: "paragraph", content: text ? [{ type: "text", text }] : [] }] });
+var oneLine = (text) => text.replace(/\s+/g, " ").trim();
+function InlineText({ value, placeholder, label, onCommit, onText, onEnter, variant = "title", clearable = false, readOnly = false, className, ref }) {
+  const saved = useRef3(value);
+  const [empty, setEmpty] = useState3(!value);
+  const latest = useRef3({ onEnter, onText, onCommit, clearable });
+  latest.current = { onEnter, onText, onCommit, clearable };
+  const save = useCallback3(async (text) => {
+    const next = oneLine(text);
+    if (next === saved.current) return;
+    if (!next && !latest.current.clearable) return;
+    if (await latest.current.onCommit(next)) saved.current = next;
+  }, []);
+  const editor = useEditor({
+    extensions: [OneLine, Paragraph, Text, Undo],
+    content: doc(value),
+    editable: !readOnly,
+    editorProps: {
+      attributes: {
+        "aria-label": label,
+        role: "textbox",
+        "aria-multiline": "false",
+        "aria-placeholder": placeholder,
+        ...readOnly ? { "aria-readonly": "true" } : {},
+        class: "outline-none"
+      },
+      handleKeyDown: (view, event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          void save(view.state.doc.textContent);
+          latest.current.onEnter?.();
+          return true;
+        }
+        if (event.key === "Escape") {
+          view.dom.blur();
+          return true;
+        }
+        return false;
+      },
+      // A paste is its plain text on this one line, whatever it was copied from.
+      handlePaste: (view, event) => {
+        const text = event.clipboardData?.getData("text/plain");
+        if (text == null) return false;
+        view.dispatch(view.state.tr.insertText(text.replace(/\s+/g, " ")));
+        return true;
+      }
+    },
+    onFocus: ({ editor: e }) => latest.current.onText?.(e.getText()),
+    onUpdate: ({ editor: e }) => {
+      setEmpty(e.isEmpty);
+      latest.current.onText?.(e.getText());
+    },
+    onBlur: ({ editor: e }) => {
+      latest.current.onText?.(null);
+      if (e.isEmpty && saved.current && !latest.current.clearable) {
+        e.commands.setContent(doc(saved.current), { emitUpdate: false });
+        setEmpty(false);
+        return;
+      }
+      void save(e.getText());
+    }
+  }, [readOnly]);
+  useEffect3(() => {
+    if (!editor || editor.isDestroyed || value === saved.current || editor.isFocused) return;
+    if (oneLine(editor.getText()) !== saved.current) return;
+    editor.commands.setContent(doc(value), { emitUpdate: false });
+    saved.current = value;
+    setEmpty(!value);
+  }, [editor, value]);
+  useImperativeHandle2(ref, () => ({
+    focus: (at = "start") => editor?.commands.focus(at)
+  }), [editor]);
+  return /* @__PURE__ */ jsxs3("div", { className: cn2("relative", VARIANT[variant], className), children: [
+    /* @__PURE__ */ jsx4(EditorContent2, { editor, className: cn2(ROOM, !readOnly && "cursor-text") }),
+    empty && !readOnly && /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "pointer-events-none absolute left-0 top-1 text-text-muted", children: placeholder })
+  ] });
+}
+
 // src/CommentHighlights.ts
-import { Extension as Extension3 } from "@tiptap/core";
+import { Extension as Extension4 } from "@tiptap/core";
 import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
 import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "@tiptap/pm/view";
 var commentHighlightsKey = new PluginKey2("commentHighlights");
@@ -539,7 +645,7 @@ var COMMENT_HIGHLIGHT_CLASSES = {
 var QUOTE_WHOLE_MAX = 1e3;
 var QUOTE_END_LENGTH = 150;
 var QUOTE_CONTEXT_LENGTH = 32;
-function placesIn(doc) {
+function placesIn(doc2) {
   const places = /* @__PURE__ */ new Map();
   const walk = (parent, parentPos) => {
     parent.forEach((node, offset, index) => {
@@ -549,7 +655,7 @@ function placesIn(doc) {
       if (!node.isTextblock && !node.isLeaf) walk(node, pos + 1);
     });
   };
-  walk(doc, 0);
+  walk(doc2, 0);
   return places;
 }
 function textOf(block) {
@@ -578,7 +684,7 @@ function find(text, words, from, context) {
   }
   return first;
 }
-function runIn(doc, places, ids) {
+function runIn(doc2, places, ids) {
   const present = ids.map((id) => places.get(id)).filter((p) => !!p);
   if (present.length === 0) return null;
   const byParent = /* @__PURE__ */ new Map();
@@ -587,7 +693,7 @@ function runIn(doc, places, ids) {
   const low = Math.min(...group.map((p) => p.index));
   const high = Math.max(...group.map((p) => p.index));
   const contentStart = group[0].parent;
-  const parent = contentStart === 0 ? doc : doc.nodeAt(contentStart - 1);
+  const parent = contentStart === 0 ? doc2 : doc2.nodeAt(contentStart - 1);
   if (!parent) return group;
   const run = [];
   parent.forEach((node, offset, index) => {
@@ -595,8 +701,8 @@ function runIn(doc, places, ids) {
   });
   return run;
 }
-function placeOf(doc, anchor, places = placesIn(doc)) {
-  const run = runIn(doc, places, anchor.blocks);
+function placeOf(doc2, anchor, places = placesIn(doc2)) {
+  const run = runIn(doc2, places, anchor.blocks);
   if (!run) return { state: "detached" };
   const from = run[0].pos;
   const to = run[run.length - 1].pos + run[run.length - 1].node.nodeSize;
@@ -626,7 +732,7 @@ function placeOf(doc, anchor, places = placesIn(doc)) {
   if (endAt === -1 || quote.end === "") return reworded;
   return { state: "resolved", from: a.starts[startAt], to: b.ends[endAt + quote.end.length - 1], words: true };
 }
-var CommentHighlights = Extension3.create({
+var CommentHighlights = Extension4.create({
   name: "commentHighlights",
   addOptions() {
     return { onSelect: null };
@@ -723,10 +829,10 @@ function offsetIn(block, pos) {
   return at === -1 ? block.starts.length : at;
 }
 function anchorOfSelection(editor) {
-  const { doc, selection } = editor.state;
+  const { doc: doc2, selection } = editor.state;
   if (selection.empty) return null;
   const { $from, $to } = selection;
-  const places = placesIn(doc);
+  const places = placesIn(doc2);
   const around = (depth) => {
     for (let d = depth; d > 0; d--) {
       const id = $from.node(d).attrs.blockId;
@@ -785,7 +891,7 @@ function anchorOfSelection(editor) {
 }
 
 // src/PastedImages.ts
-import { Extension as Extension4 } from "@tiptap/core";
+import { Extension as Extension5 } from "@tiptap/core";
 import { Plugin as Plugin3, PluginKey as PluginKey3 } from "@tiptap/pm/state";
 var IMAGE_EXTENSIONS = {
   "image/png": "png",
@@ -821,7 +927,7 @@ function pastedImages(source, at = /* @__PURE__ */ new Date()) {
     (file) => hasUsableName(file.name) ? file : new File([file], pastedImageName(file.type, at, generated++), { type: file.type, lastModified: file.lastModified })
   );
 }
-var PastedImages = Extension4.create({
+var PastedImages = Extension5.create({
   name: "pastedImages",
   addOptions() {
     return { onImages: () => false };
@@ -843,7 +949,7 @@ var PastedImages = Extension4.create({
 });
 
 // src/PastedMarkdown.ts
-import { Extension as Extension5 } from "@tiptap/core";
+import { Extension as Extension6 } from "@tiptap/core";
 import { Slice } from "@tiptap/pm/model";
 import { Plugin as Plugin4, PluginKey as PluginKey4 } from "@tiptap/pm/state";
 function inTableCell($context) {
@@ -854,7 +960,7 @@ function inTableCell($context) {
   return false;
 }
 var hasTable = (blocks) => blocks.some((block) => block.type === "table" || hasTable(block.content ?? []));
-var PastedMarkdown = Extension5.create({
+var PastedMarkdown = Extension6.create({
   name: "pastedMarkdown",
   addOptions() {
     return { read: () => void 0 };
@@ -911,7 +1017,7 @@ import { Selection } from "@tiptap/pm/state";
 import { MenuItem, MenuSub } from "@estiva-app/ui";
 
 // src/ComposerTriggers.tsx
-import { Extension as Extension6 } from "@tiptap/core";
+import { Extension as Extension7 } from "@tiptap/core";
 import { PluginKey as PluginKey5 } from "@tiptap/pm/state";
 import Mention from "@tiptap/extension-mention";
 import Suggestion from "@tiptap/suggestion";
@@ -920,7 +1026,7 @@ import { Avatar } from "@estiva-app/ui";
 import { EnterHint } from "@estiva-app/ui";
 import { inlineChipClassName } from "@estiva-app/ui";
 import { WithTooltip } from "@estiva-app/ui";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var PEOPLE_LIMIT = 6;
 function filterPeople(people, query) {
   const q = query.toLowerCase();
@@ -938,8 +1044,8 @@ function peopleMenu(urgent) {
     row: (person) => ({
       label: person.name,
       description: person.description,
-      leading: person.avatar ?? /* @__PURE__ */ jsx4(Avatar, { size: 32, alt: person.name }),
-      hint: /* @__PURE__ */ jsx4(EnterHint, {}),
+      leading: person.avatar ?? /* @__PURE__ */ jsx5(Avatar, { size: 32, alt: person.name }),
+      hint: /* @__PURE__ */ jsx5(EnterHint, {}),
       size: "tall"
     })
   };
@@ -1068,9 +1174,9 @@ var CaptionedReference = Mention.extend({
     return ReactNodeViewRenderer(
       ({ node }) => (
         // The caption is cut at 24ch, so the whole of it is on hover, in the package's tooltip (UIG-14) — as Peek's sent chip has it.
-        /* @__PURE__ */ jsx4(NodeViewWrapper, { as: "span", children: /* @__PURE__ */ jsx4(WithTooltip, { inline: true, label: captionOf(node.attrs.label, node.attrs.snippet), children: /* @__PURE__ */ jsxs3("span", { className: inlineChipClassName("neutral", "max-w-[24ch] cursor-default"), children: [
-          /* @__PURE__ */ jsx4("span", { className: "flex items-center justify-center w-4 h-4 shrink-0 text-text-secondary", children: iconFor?.(node.attrs.uri ?? null) ?? icon }),
-          /* @__PURE__ */ jsx4("span", { className: "truncate", children: captionOf(node.attrs.label, node.attrs.snippet) })
+        /* @__PURE__ */ jsx5(NodeViewWrapper, { as: "span", children: /* @__PURE__ */ jsx5(WithTooltip, { inline: true, label: captionOf(node.attrs.label, node.attrs.snippet), children: /* @__PURE__ */ jsxs4("span", { className: inlineChipClassName("neutral", "max-w-[24ch] cursor-default"), children: [
+          /* @__PURE__ */ jsx5("span", { className: "flex items-center justify-center w-4 h-4 shrink-0 text-text-secondary", children: iconFor?.(node.attrs.uri ?? null) ?? icon }),
+          /* @__PURE__ */ jsx5("span", { className: "truncate", children: captionOf(node.attrs.label, node.attrs.snippet) })
         ] }) }) })
       ),
       { as: "span" }
@@ -1093,11 +1199,11 @@ function referenceMenu({ ariaLabel, sectionLabel, icon, iconFor }) {
       return groups;
     },
     itemKey: (item) => `reference-${item.id}`,
-    row: (item) => ({ leading: item.icon ?? iconFor?.(item.uri) ?? icon, label: captionOf(item.label, item.snippet), description: item.description, hint: /* @__PURE__ */ jsx4(EnterHint, {}) })
+    row: (item) => ({ leading: item.icon ?? iconFor?.(item.uri) ?? icon, label: captionOf(item.label, item.snippet), description: item.description, hint: /* @__PURE__ */ jsx5(EnterHint, {}) })
   };
 }
 var listed = (options, query) => options.sections ? options.sections(query).flatMap((section) => section.items.map((item) => ({ ...item, section: section.label }))) : filterReferences(options.items(), query);
-var ReferenceTrigger = Extension6.create({
+var ReferenceTrigger = Extension7.create({
   name: "referenceTrigger",
   addOptions() {
     return { items: () => [], nodeName: "captionedReference", ariaLabel: "References", sectionLabel: "References", icon: null };
@@ -1213,7 +1319,7 @@ function filterSlashSections(sections, query) {
   const q = query.toLowerCase();
   return sections.map((section) => ({ ...section, commands: q ? section.commands.filter((command) => matches(command, q)) : section.commands }));
 }
-var SlashCommands = Extension6.create({
+var SlashCommands = Extension7.create({
   name: "slashCommands",
   addOptions() {
     return { sections: [formatSection()] };
@@ -1247,7 +1353,7 @@ var SlashCommands = Extension6.create({
 });
 
 // src/EditorBlockHandle.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function editorBlocks(view) {
   const out = [];
   view.state.doc.forEach((node, pos) => {
@@ -1314,8 +1420,8 @@ function EditorBlockHandle({ editor, turnInto = turnIntoRows, actions, children,
         const node = pos === void 0 ? null : editor.state.doc.nodeAt(pos);
         if (pos === void 0 || !node) return null;
         const turnRows = typeof turnInto === "function" ? turnInto(node, editor) : node.isTextblock ? turnInto : [];
-        return /* @__PURE__ */ jsxs4(Fragment, { children: [
-          turnRows.length > 0 && /* @__PURE__ */ jsx5(MenuSub, { label: "Turn into", children: turnRows.map((row) => /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsxs5(Fragment, { children: [
+          turnRows.length > 0 && /* @__PURE__ */ jsx6(MenuSub, { label: "Turn into", children: turnRows.map((row) => /* @__PURE__ */ jsx6(
             MenuItem,
             {
               label: row.label,
@@ -1327,8 +1433,8 @@ function EditorBlockHandle({ editor, turnInto = turnIntoRows, actions, children,
             },
             row.label
           )) }),
-          /* @__PURE__ */ jsx5(MenuItem, { label: "Duplicate", leading: /* @__PURE__ */ jsx5(IconCopy, { size: 16, stroke: 1.5, className: "text-text-secondary" }), onClick: () => duplicateBlock(editor, pos) }),
-          /* @__PURE__ */ jsx5(MenuItem, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx5(IconTrash, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: () => deleteBlock(editor, pos) })
+          /* @__PURE__ */ jsx6(MenuItem, { label: "Duplicate", leading: /* @__PURE__ */ jsx6(IconCopy, { size: 16, stroke: 1.5, className: "text-text-secondary" }), onClick: () => duplicateBlock(editor, pos) }),
+          /* @__PURE__ */ jsx6(MenuItem, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx6(IconTrash, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: () => deleteBlock(editor, pos) })
         ] });
       },
       startDrag: (block, event) => {
@@ -1350,7 +1456,7 @@ function EditorBlockHandle({ editor, turnInto = turnIntoRows, actions, children,
       }
     };
   }, [editor, turnInto]);
-  return /* @__PURE__ */ jsx5(BlockHandle, { editing, actions, className, children });
+  return /* @__PURE__ */ jsx6(BlockHandle, { editing, actions, className, children });
 }
 var LISTS = ["bulletList", "orderedList"];
 var isList = (node) => LISTS.includes(node.type.name);
@@ -1456,14 +1562,14 @@ function turnIntoRows(node, editor) {
 }
 
 // src/EditorTableControls.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
 import { TextSelection } from "@tiptap/pm/state";
 import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, deleteColumn, deleteRow, deleteTable, toggleHeader } from "@tiptap/pm/tables";
 import { IconColumnInsertLeft, IconColumnInsertRight, IconGripHorizontal, IconGripVertical, IconPlus, IconRowInsertBottom, IconRowInsertTop, IconTrash as IconTrash2 } from "@tabler/icons-react";
-import { cn as cn2 } from "@estiva-app/ui";
+import { cn as cn3 } from "@estiva-app/ui";
 import { IconButton as IconButton2 } from "@estiva-app/ui";
 import { Menu, MenuItem as MenuItem2, MenuSeparator } from "@estiva-app/ui";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function inCell(editor, cell, command) {
   const { view } = editor;
   if (!view.dom.contains(cell)) return false;
@@ -1509,13 +1615,13 @@ function place(frame, { table, row, cell }) {
 }
 var ICON = { size: 16, stroke: 1.5, className: "text-text-secondary" };
 var keepFocus = (e) => e.preventDefault();
-var HANDLE_BOX = cn2(FLOATING_SURFACE_CLASSES, "shadow-none");
+var HANDLE_BOX = cn3(FLOATING_SURFACE_CLASSES, "shadow-none");
 function EditorTableControls({ editor, children, className }) {
-  const frame = useRef3(null);
-  const [hovered, setHovered] = useState3(null);
-  const [menu, setMenu] = useState3(null);
+  const frame = useRef4(null);
+  const [hovered, setHovered] = useState4(null);
+  const [menu, setMenu] = useState4(null);
   const editable = !!editor && editor.isEditable;
-  const follow = useCallback3(
+  const follow = useCallback4(
     (target) => {
       if (!editor || !frame.current || !(target instanceof Element)) return;
       if (target.closest("[data-table-control]")) return;
@@ -1531,7 +1637,7 @@ function EditorTableControls({ editor, children, className }) {
     },
     [editor]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (!editor) return;
     const changed = ({ transaction }) => {
       if (transaction.docChanged && !menu) setHovered(null);
@@ -1547,11 +1653,11 @@ function EditorTableControls({ editor, children, className }) {
     setMenu(null);
     setHovered(null);
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: frame,
-      className: cn2("relative", className),
+      className: cn3("relative", className),
       onMouseMove: (e) => {
         if (!menu) follow(e.target);
       },
@@ -1560,39 +1666,39 @@ function EditorTableControls({ editor, children, className }) {
       },
       children: [
         children,
-        shown && editor && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-          /* @__PURE__ */ jsx6("div", { "data-table-control": true, className: cn2(HANDLE_BOX, "absolute -translate-x-1/2 -translate-y-1/2"), style: { left: shown.tableBox.left, top: shown.rowBox.top + shown.rowBox.height / 2 }, children: /* @__PURE__ */ jsxs5(
+        shown && editor && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx7("div", { "data-table-control": true, className: cn3(HANDLE_BOX, "absolute -translate-x-1/2 -translate-y-1/2"), style: { left: shown.tableBox.left, top: shown.rowBox.top + shown.rowBox.height / 2 }, children: /* @__PURE__ */ jsxs6(
             Menu,
             {
               open: menu === "row",
               onOpenChange: (open) => setMenu(open ? "row" : null),
-              trigger: /* @__PURE__ */ jsx6(IconButton2, { "aria-label": "Row menu", tooltip: "Row", className: "h-6 w-4 p-0", children: /* @__PURE__ */ jsx6(IconGripVertical, { size: 16, stroke: 1.5 }) }),
+              trigger: /* @__PURE__ */ jsx7(IconButton2, { "aria-label": "Row menu", tooltip: "Row", className: "h-6 w-4 p-0", children: /* @__PURE__ */ jsx7(IconGripVertical, { size: 16, stroke: 1.5 }) }),
               children: [
-                !isHeaderRow(shown.row) && /* @__PURE__ */ jsx6(MenuItem2, { label: "Insert above", leading: /* @__PURE__ */ jsx6(IconRowInsertTop, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowBefore)) }),
-                /* @__PURE__ */ jsx6(MenuItem2, { label: "Insert below", leading: /* @__PURE__ */ jsx6(IconRowInsertBottom, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowAfter)) }),
-                /* @__PURE__ */ jsx6(MenuSeparator, {}),
-                /* @__PURE__ */ jsx6(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx6(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableRow(editor, shown.cell)) }),
-                /* @__PURE__ */ jsx6(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx6(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => inCell(editor, shown.cell, deleteTable)) })
+                !isHeaderRow(shown.row) && /* @__PURE__ */ jsx7(MenuItem2, { label: "Insert above", leading: /* @__PURE__ */ jsx7(IconRowInsertTop, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowBefore)) }),
+                /* @__PURE__ */ jsx7(MenuItem2, { label: "Insert below", leading: /* @__PURE__ */ jsx7(IconRowInsertBottom, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowAfter)) }),
+                /* @__PURE__ */ jsx7(MenuSeparator, {}),
+                /* @__PURE__ */ jsx7(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx7(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableRow(editor, shown.cell)) }),
+                /* @__PURE__ */ jsx7(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx7(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => inCell(editor, shown.cell, deleteTable)) })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx6("div", { "data-table-control": true, className: cn2(HANDLE_BOX, "absolute -translate-x-1/2 -translate-y-1/2"), style: { left: shown.columnBox.left + shown.columnBox.width / 2, top: shown.tableBox.top }, children: /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsx7("div", { "data-table-control": true, className: cn3(HANDLE_BOX, "absolute -translate-x-1/2 -translate-y-1/2"), style: { left: shown.columnBox.left + shown.columnBox.width / 2, top: shown.tableBox.top }, children: /* @__PURE__ */ jsxs6(
             Menu,
             {
               open: menu === "column",
               onOpenChange: (open) => setMenu(open ? "column" : null),
-              trigger: /* @__PURE__ */ jsx6(IconButton2, { "aria-label": "Column menu", tooltip: "Column", className: "h-4 w-6 p-0", children: /* @__PURE__ */ jsx6(IconGripHorizontal, { size: 16, stroke: 1.5 }) }),
+              trigger: /* @__PURE__ */ jsx7(IconButton2, { "aria-label": "Column menu", tooltip: "Column", className: "h-4 w-6 p-0", children: /* @__PURE__ */ jsx7(IconGripHorizontal, { size: 16, stroke: 1.5 }) }),
               children: [
-                /* @__PURE__ */ jsx6(MenuItem2, { label: "Insert left", leading: /* @__PURE__ */ jsx6(IconColumnInsertLeft, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnBefore)) }),
-                /* @__PURE__ */ jsx6(MenuItem2, { label: "Insert right", leading: /* @__PURE__ */ jsx6(IconColumnInsertRight, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnAfter)) }),
-                /* @__PURE__ */ jsx6(MenuSeparator, {}),
-                /* @__PURE__ */ jsx6(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx6(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableColumn(editor, shown.cell)) }),
-                /* @__PURE__ */ jsx6(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx6(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => inCell(editor, shown.cell, deleteTable)) })
+                /* @__PURE__ */ jsx7(MenuItem2, { label: "Insert left", leading: /* @__PURE__ */ jsx7(IconColumnInsertLeft, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnBefore)) }),
+                /* @__PURE__ */ jsx7(MenuItem2, { label: "Insert right", leading: /* @__PURE__ */ jsx7(IconColumnInsertRight, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnAfter)) }),
+                /* @__PURE__ */ jsx7(MenuSeparator, {}),
+                /* @__PURE__ */ jsx7(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx7(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableColumn(editor, shown.cell)) }),
+                /* @__PURE__ */ jsx7(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx7(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => inCell(editor, shown.cell, deleteTable)) })
               ]
             }
           ) }),
-          shown.row === shown.table.rows[shown.table.rows.length - 1] && /* @__PURE__ */ jsx6("div", { "data-table-control": true, className: cn2(HANDLE_BOX, "absolute flex h-4"), style: { left: shown.tableBox.left, top: shown.tableBox.top + shown.tableBox.height, width: shown.tableBox.width }, children: /* @__PURE__ */ jsx6(IconButton2, { "aria-label": "Add row", tooltip: "Add row", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableRow(editor, shown.table)), children: /* @__PURE__ */ jsx6(IconPlus, { size: 12, stroke: 1.5 }) }) }),
-          shown.cell === shown.row.cells[shown.row.cells.length - 1] && /* @__PURE__ */ jsx6("div", { "data-table-control": true, className: cn2(HANDLE_BOX, "absolute flex w-4"), style: { left: shown.tableBox.left + shown.tableBox.width, top: shown.tableBox.top, height: shown.tableBox.height }, children: /* @__PURE__ */ jsx6(IconButton2, { "aria-label": "Add column", tooltip: "Add column", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableColumn(editor, shown.table)), children: /* @__PURE__ */ jsx6(IconPlus, { size: 12, stroke: 1.5 }) }) })
+          shown.row === shown.table.rows[shown.table.rows.length - 1] && /* @__PURE__ */ jsx7("div", { "data-table-control": true, className: cn3(HANDLE_BOX, "absolute flex h-4"), style: { left: shown.tableBox.left, top: shown.tableBox.top + shown.tableBox.height, width: shown.tableBox.width }, children: /* @__PURE__ */ jsx7(IconButton2, { "aria-label": "Add row", tooltip: "Add row", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableRow(editor, shown.table)), children: /* @__PURE__ */ jsx7(IconPlus, { size: 12, stroke: 1.5 }) }) }),
+          shown.cell === shown.row.cells[shown.row.cells.length - 1] && /* @__PURE__ */ jsx7("div", { "data-table-control": true, className: cn3(HANDLE_BOX, "absolute flex w-4"), style: { left: shown.tableBox.left + shown.tableBox.width, top: shown.tableBox.top, height: shown.tableBox.height }, children: /* @__PURE__ */ jsx7(IconButton2, { "aria-label": "Add column", tooltip: "Add column", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableColumn(editor, shown.table)), children: /* @__PURE__ */ jsx7(IconPlus, { size: 12, stroke: 1.5 }) }) })
         ] })
       ]
     }
@@ -1600,7 +1706,7 @@ function EditorTableControls({ editor, children, className }) {
 }
 
 // src/BlockNodes.tsx
-import { Extension as Extension10, InputRule, Node as Node2 } from "@tiptap/core";
+import { Extension as Extension11, InputRule, Node as Node3 } from "@tiptap/core";
 import { DOMSerializer } from "@tiptap/pm/model";
 import { Plugin as Plugin8, PluginKey as PluginKey9 } from "@tiptap/pm/state";
 import { Mapping, ReplaceAroundStep } from "@tiptap/pm/transform";
@@ -1609,15 +1715,15 @@ import { Checkbox } from "@estiva-app/ui";
 import { calloutLook } from "@estiva-app/ui";
 
 // src/ReferenceMenu.tsx
-import { useCallback as useCallback4 } from "react";
-import { Extension as Extension9 } from "@tiptap/core";
+import { useCallback as useCallback5 } from "react";
+import { Extension as Extension10 } from "@tiptap/core";
 import { useEditorState } from "@tiptap/react";
 import { NodeSelection as NodeSelection2, Plugin as Plugin7, PluginKey as PluginKey8, TextSelection as TextSelection2 } from "@tiptap/pm/state";
 import { ReplaceStep } from "@tiptap/pm/transform";
 import { IconCheck } from "@tabler/icons-react";
 
 // src/LinkChips.ts
-import { Extension as Extension7 } from "@tiptap/core";
+import { Extension as Extension8 } from "@tiptap/core";
 import { closeHistory } from "@tiptap/pm/history";
 import { Plugin as Plugin5, PluginKey as PluginKey6 } from "@tiptap/pm/state";
 var key = new PluginKey6("linkChips");
@@ -1638,10 +1744,10 @@ function urlRuns(text) {
   }
   return out;
 }
-function findLinkChips(doc, selection, referenceOf, pasted = []) {
+function findLinkChips(doc2, selection, referenceOf, pasted = []) {
   const found = { chips: [], fills: [], open: [] };
   const open = /* @__PURE__ */ new Set();
-  doc.descendants((node, pos) => {
+  doc2.descendants((node, pos) => {
     if (node.type.spec.code) return false;
     if (node.type.name === "reference") {
       const href = typeof node.attrs.href === "string" ? node.attrs.href : "";
@@ -1695,7 +1801,7 @@ function refreshLinkChips(editor) {
   const tr = apply(editor.state, findLinkChips(editor.state.doc, editor.state.selection, chips.options.referenceOf, chips.pasted));
   if (tr) editor.view.dispatch(tr);
 }
-var LinkChips = Extension7.create({
+var LinkChips = Extension8.create({
   name: "linkChips",
   addOptions() {
     return { referenceOf: null, ask: null, limit: 24 };
@@ -1768,18 +1874,18 @@ import { MenuItem as MenuItem3, MenuSection, MenuSeparator as MenuSeparator2 } f
 import { Popover as Popover2 } from "@estiva-app/ui";
 
 // src/ReferenceCards.ts
-import { Extension as Extension8 } from "@tiptap/core";
+import { Extension as Extension9 } from "@tiptap/core";
 import { NodeSelection, Plugin as Plugin6, PluginKey as PluginKey7 } from "@tiptap/pm/state";
 import { Decoration as Decoration3, DecorationSet as DecorationSet3 } from "@tiptap/pm/view";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 function layoutOf(raw) {
   if (typeof raw !== "string" || raw === "" || raw === "none") return void 0;
   return raw === "detailed" ? "detailed" : "compact";
 }
-function referenceCardPlacements(doc) {
+function referenceCardPlacements(doc2) {
   const out = [];
   const seen = /* @__PURE__ */ new Map();
-  doc.descendants((node, pos, parent) => {
+  doc2.descendants((node, pos, parent) => {
     if (!node.isTextblock) return true;
     const cards = [];
     node.forEach((child) => {
@@ -1812,16 +1918,16 @@ function elementFor(storage, slotKey) {
 function storageOf(editor) {
   return editor.storage.referenceCards;
 }
-var ReferenceCards = Extension8.create({
+var ReferenceCards = Extension9.create({
   name: "referenceCards",
   addStorage() {
     return { elements: /* @__PURE__ */ new Map() };
   },
   addProseMirrorPlugins() {
     const storage = this.storage;
-    const decorate = (doc) => DecorationSet3.create(
-      doc,
-      referenceCardPlacements(doc).map(
+    const decorate = (doc2) => DecorationSet3.create(
+      doc2,
+      referenceCardPlacements(doc2).map(
         (p) => Decoration3.widget(p.pos, () => elementFor(storage, p.key), {
           key: p.key,
           side: 1,
@@ -1844,8 +1950,8 @@ var ReferenceCards = Extension8.create({
   }
 });
 function useReferenceCards(editor) {
-  const [slots, setSlots] = useState4([]);
-  useEffect4(() => {
+  const [slots, setSlots] = useState5([]);
+  useEffect5(() => {
     if (!editor) return;
     const storage = storageOf(editor);
     if (!storage) return;
@@ -1910,7 +2016,7 @@ function setReferenceCardAt(editor, pos, layout) {
 }
 
 // src/ReferenceMenu.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var key3 = new PluginKey8("referenceMenu");
 var LAYOUTS = [
   { layout: "none", label: "None" },
@@ -1990,7 +2096,7 @@ function caretAfter(state, pos) {
   const node = state.doc.nodeAt(pos);
   return state.tr.setSelection(TextSelection2.create(state.doc, pos + (node?.nodeSize ?? 1)));
 }
-var ReferenceMenu = Extension9.create({
+var ReferenceMenu = Extension10.create({
   name: "referenceMenu",
   // Before the editor's own keys, so Enter on a highlighted row is the row's, not a new line.
   priority: 1e3,
@@ -2072,7 +2178,7 @@ function ReferenceMenuView({ editor }) {
       return { pos: open.pos, active: open.active, named: !!node.attrs.uri, layout };
     }
   });
-  const keepFocus2 = useCallback4((list) => {
+  const keepFocus2 = useCallback5((list) => {
     const panel = list?.closest('[role="dialog"]');
     if (!panel) return;
     const keep = (event) => event.preventDefault();
@@ -2089,7 +2195,7 @@ function ReferenceMenuView({ editor }) {
   };
   return (
     // finalFocus={false}: focus never left the text.
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       Popover2,
       {
         anchor,
@@ -2101,8 +2207,8 @@ function ReferenceMenuView({ editor }) {
         align: "left",
         ariaLabel: "Link",
         finalFocus: false,
-        children: shown && /* @__PURE__ */ jsxs6("div", { ref: keepFocus2, role: "menu", "aria-label": "Link", className: "flex flex-col gap-0.5", children: [
-          opens && /* @__PURE__ */ jsx7(
+        children: shown && /* @__PURE__ */ jsxs7("div", { ref: keepFocus2, role: "menu", "aria-label": "Link", className: "flex flex-col gap-0.5", children: [
+          opens && /* @__PURE__ */ jsx8(
             MenuItem3,
             {
               role: "menuitem",
@@ -2115,9 +2221,9 @@ function ReferenceMenuView({ editor }) {
               }
             }
           ),
-          shown.named && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-            opens && /* @__PURE__ */ jsx7(MenuSeparator2, {}),
-            /* @__PURE__ */ jsx7("div", { role: "group", "aria-label": "Card", children: /* @__PURE__ */ jsx7(MenuSection, { label: "Card", children: LAYOUTS.map(({ layout, label }, i) => /* @__PURE__ */ jsx7(
+          shown.named && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+            opens && /* @__PURE__ */ jsx8(MenuSeparator2, {}),
+            /* @__PURE__ */ jsx8("div", { role: "group", "aria-label": "Card", children: /* @__PURE__ */ jsx8(MenuSection, { label: "Card", children: LAYOUTS.map(({ layout, label }, i) => /* @__PURE__ */ jsx8(
               MenuItem3,
               {
                 role: "menuitemradio",
@@ -2125,7 +2231,7 @@ function ReferenceMenuView({ editor }) {
                 tabIndex: -1,
                 label,
                 selected: shown.active === i + (opens ? 1 : 0),
-                trailing: shown.layout === layout ? /* @__PURE__ */ jsx7(IconCheck, { size: 16, "aria-hidden": true }) : void 0,
+                trailing: shown.layout === layout ? /* @__PURE__ */ jsx8(IconCheck, { size: 16, "aria-hidden": true }) : void 0,
                 onMouseDown: (event) => {
                   event.preventDefault();
                   run(layout);
@@ -2141,7 +2247,7 @@ function ReferenceMenuView({ editor }) {
 }
 
 // src/BlockNodes.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var BLOCK_TYPES = [
   "paragraph",
   "heading",
@@ -2174,9 +2280,9 @@ function holdsText(node) {
   });
   return found;
 }
-function claimsIn(doc) {
+function claimsIn(doc2) {
   const claims = /* @__PURE__ */ new Map();
-  doc.descendants((node, pos, parent) => {
+  doc2.descendants((node, pos, parent) => {
     const fixed = node.type.name === "unknownBlock";
     if (!fixed && !BLOCK_TYPE_SET.has(node.type.name)) return;
     if (parent?.type.name === "listItem" && LISTS2.has(node.type.name)) return;
@@ -2211,8 +2317,8 @@ function textStart({ pos, node }) {
   }
   return start;
 }
-function repeatedBlockIds(doc, before, mapping) {
-  const claims = claimsIn(doc);
+function repeatedBlockIds(doc2, before, mapping) {
+  const claims = claimsIn(doc2);
   let previous;
   const losers = [];
   for (const [id, copies] of claims) {
@@ -2238,7 +2344,7 @@ var idOf = (node) => {
   const id = node.attrs.blockId;
   return typeof id === "string" && id !== "" ? id : void 0;
 };
-function addressedBlocks(doc) {
+function addressedBlocks(doc2) {
   const out = [];
   const visit = (node, pos) => {
     if (!BLOCK_TYPE_SET.has(node.type.name)) return;
@@ -2248,15 +2354,15 @@ function addressedBlocks(doc) {
       for (const list of innerLists(node, pos)) list.node.forEach((child, offset) => visit(child, list.pos + 1 + offset));
     }
   };
-  doc.forEach((node, offset) => visit(node, offset));
+  doc2.forEach((node, offset) => visit(node, offset));
   return out;
 }
-function unnamedBlocks(doc) {
-  return addressedBlocks(doc).filter((b) => idOf(b.node) === void 0).map((b) => b.pos);
+function unnamedBlocks(doc2) {
+  return addressedBlocks(doc2).filter((b) => idOf(b.node) === void 0).map((b) => b.pos);
 }
-function hiddenIds(doc) {
+function hiddenIds(doc2) {
   const out = [];
-  doc.descendants((node, pos) => {
+  doc2.descendants((node, pos) => {
     if (!FLATTENED.has(node.type.name)) return;
     node.forEach((child, offset) => {
       const inner = child.isTextblock || node.type.name === "listItem" && LISTS2.has(child.type.name);
@@ -2265,10 +2371,10 @@ function hiddenIds(doc) {
   });
   return out;
 }
-function handedOver(doc, before, mapping, unnamed) {
+function handedOver(doc2, before, mapping, unnamed) {
   const out = /* @__PURE__ */ new Map();
   if (unnamed.length === 0) return out;
-  const now = new Set(addressedBlocks(doc).map((b) => idOf(b.node)));
+  const now = new Set(addressedBlocks(doc2).map((b) => idOf(b.node)));
   const gone = addressedBlocks(before).filter((b) => !b.node.isLeaf && idOf(b.node) !== void 0 && !now.has(idOf(b.node))).map((b) => ({ ...b, start: textStart(b) })).sort((a, b) => a.start - b.start || b.pos - a.pos);
   for (const old of gone) {
     const id = idOf(old.node);
@@ -2277,7 +2383,7 @@ function handedOver(doc, before, mapping, unnamed) {
     let inner;
     for (const pos of unnamed) {
       if (out.has(pos)) continue;
-      if (pos < at && at < pos + doc.nodeAt(pos).nodeSize && (inner === void 0 || pos > inner)) inner = pos;
+      if (pos < at && at < pos + doc2.nodeAt(pos).nodeSize && (inner === void 0 || pos > inner)) inner = pos;
     }
     if (inner !== void 0) {
       out.set(inner, id);
@@ -2299,7 +2405,7 @@ function bringsInBlocks(transactions) {
     })
   );
 }
-var BlockId = Extension10.create({
+var BlockId = Extension11.create({
   name: "blockId",
   onCreate() {
     const { state, view } = this.editor;
@@ -2347,7 +2453,7 @@ var BlockId = Extension10.create({
   }
 });
 var webUrl = (raw) => raw && /^https?:\/\/\S+$/i.test(raw) ? raw : null;
-var ReferenceNode = Node2.create({
+var ReferenceNode = Node3.create({
   name: "reference",
   group: "inline",
   inline: true,
@@ -2386,7 +2492,7 @@ var ReferenceNode = Node2.create({
     return ReactNodeViewRenderer2(({ node, editor, getPos }) => {
       const uri = String(node.attrs.uri ?? "");
       const href = typeof node.attrs.href === "string" && node.attrs.href ? node.attrs.href : void 0;
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         NodeViewWrapper2,
         {
           as: "span",
@@ -2397,13 +2503,13 @@ var ReferenceNode = Node2.create({
             event.preventDefault();
             event.stopPropagation();
           },
-          children: uri ? /* @__PURE__ */ jsx8(View, { uri, ...href ? { href } : {} }) : /* @__PURE__ */ jsx8("span", { children: href })
+          children: uri ? /* @__PURE__ */ jsx9(View, { uri, ...href ? { href } : {} }) : /* @__PURE__ */ jsx9("span", { children: href })
         }
       );
     });
   }
 });
-var UnknownBlock = Node2.create({
+var UnknownBlock = Node3.create({
   name: "unknownBlock",
   group: "block",
   atom: true,
@@ -2428,7 +2534,7 @@ var UnknownBlock = Node2.create({
 function UnknownBlockView({ node }) {
   const source = node.attrs.source;
   const text = String(node.attrs.text ?? "");
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     NodeViewWrapper2,
     {
       "data-block-id": source?.id,
@@ -2438,7 +2544,7 @@ function UnknownBlockView({ node }) {
     }
   );
 }
-var AttachmentNode = Node2.create({
+var AttachmentNode = Node3.create({
   name: "attachment",
   group: "block",
   atom: true,
@@ -2468,7 +2574,7 @@ var AttachmentNode = Node2.create({
   addNodeView() {
     const View = this.options.view;
     if (!View) return null;
-    return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx8(NodeViewWrapper2, { className: "my-2", children: /* @__PURE__ */ jsx8(View, { attrs: node.attrs }) }));
+    return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx9(NodeViewWrapper2, { className: "my-2", children: /* @__PURE__ */ jsx9(View, { attrs: node.attrs }) }));
   }
 });
 var TICK = "checklistTick";
@@ -2537,7 +2643,7 @@ function listItemView(editor, node, view, getPos) {
     }
   };
 }
-var Checklist = Extension10.create({
+var Checklist = Extension11.create({
   name: "checklist",
   // Before the list item's own Enter and Backspace.
   priority: 101,
@@ -2609,7 +2715,7 @@ var Checklist = Extension10.create({
     ];
   }
 });
-var Callout = Extension10.create({
+var Callout = Extension11.create({
   name: "callout",
   addGlobalAttributes() {
     return [
@@ -2641,6 +2747,7 @@ export {
   EditorBlockHandle,
   EditorTableControls,
   FORMATS,
+  InlineText,
   KeptSelection,
   LinkChips,
   PastedImages,