@estiva-app/ui 0.66.0 → 0.68.0

package/dist/editor.js

@@ -83,7 +83,7 @@ var ICONS = {
 var SETTLE_MS = 250;
 var GAP = 8;
 var POPOVER_GAP = 4;
-function SelectionToolbar({ editor, marks = ["bold", "italic", "underline"], link = false }) {
+function SelectionToolbar({ editor, marks = ["bold", "italic", "underline"], link = false, children }) {
   const [anchor, setAnchor] = useState(null);
   const [mode, setMode] = useState("marks");
   const [url, setUrl] = useState("");
@@ -273,7 +273,8 @@ function SelectionToolbar({ editor, marks = ["bold", "italic", "underline"], lin
               onClick: openField,
               children: /* @__PURE__ */ jsx(IconLink, { size: 16, stroke: 1.5 })
             }
-          )
+          ),
+          children
         ] })
       )
     }
@@ -580,6 +581,155 @@ function EditorBlockHandle({ editor, turnInto = [], actions, children, className
   return /* @__PURE__ */ jsx3(BlockHandle, { editing, actions, className, children });
 }
 
+// src/EditorTableControls.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3, useState as useState2 } 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 } from "@estiva-app/ui";
+import { IconButton } from "@estiva-app/ui";
+
+// src/looks.ts
+var FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
+
+// src/EditorTableControls.tsx
+import { Menu, MenuItem as MenuItem2, MenuSeparator } from "@estiva-app/ui";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function inCell(editor, cell, command) {
+  const { view } = editor;
+  if (!view.dom.contains(cell)) return false;
+  const at = view.posAtDOM(cell, 0);
+  view.dispatch(view.state.tr.setSelection(TextSelection.near(view.state.doc.resolve(at))));
+  const done = command(view.state, view.dispatch, view);
+  editor.commands.focus();
+  return done;
+}
+function isHeaderRow(row) {
+  return row.cells.length > 0 && Array.from(row.cells).every((c) => c.tagName === "TH");
+}
+function deleteTableRow(editor, cell) {
+  const row = cell.closest("tr");
+  const table = cell.closest("table");
+  if (!row || !table || table.rows.length <= 1) return inCell(editor, cell, deleteTable);
+  const header = isHeaderRow(row);
+  return inCell(editor, cell, header ? (state, dispatch, view) => deleteRow(state, dispatch) && (!view || toggleHeader("row")(view.state, view.dispatch)) : deleteRow);
+}
+function deleteTableColumn(editor, cell) {
+  const row = cell.closest("tr");
+  return inCell(editor, cell, row && row.cells.length > 1 ? deleteColumn : deleteTable);
+}
+function appendTableRow(editor, table) {
+  const last = table.rows[table.rows.length - 1]?.cells[0];
+  return !!last && inCell(editor, last, addRowAfter);
+}
+function appendTableColumn(editor, table) {
+  const first = table.rows[0];
+  const last = first?.cells[first.cells.length - 1];
+  return !!last && inCell(editor, last, addColumnAfter);
+}
+function place(frame, { table, row, cell }) {
+  const at = frame.getBoundingClientRect();
+  const t = table.getBoundingClientRect();
+  const r = row.getBoundingClientRect();
+  const c = cell.getBoundingClientRect();
+  return {
+    tableBox: { top: t.top - at.top, left: t.left - at.left, width: t.width, height: t.height },
+    rowBox: { top: r.top - at.top, height: r.height },
+    columnBox: { left: c.left - at.left, width: c.width }
+  };
+}
+var ICON = { size: 16, stroke: 1.5, className: "text-text-secondary" };
+var keepFocus = (e) => e.preventDefault();
+var HANDLE_BOX = cn(FLOATING_SURFACE_CLASSES, "shadow-none");
+function EditorTableControls({ editor, children, className }) {
+  const frame = useRef3(null);
+  const [hovered, setHovered] = useState2(null);
+  const [menu, setMenu] = useState2(null);
+  const editable = !!editor && editor.isEditable;
+  const follow = useCallback2(
+    (target) => {
+      if (!editor || !frame.current || !(target instanceof Element)) return;
+      if (target.closest("[data-table-control]")) return;
+      const cell = target.closest("td, th");
+      const row = cell?.closest("tr");
+      const table = row?.closest("table");
+      if (!cell || !row || !table || !editor.view.dom.contains(table)) {
+        setHovered(null);
+        return;
+      }
+      const next = { table, row, cell, ...place(frame.current, { table, row, cell }) };
+      setHovered((was) => was && was.cell === cell && JSON.stringify([was.tableBox, was.rowBox, was.columnBox]) === JSON.stringify([next.tableBox, next.rowBox, next.columnBox]) ? was : next);
+    },
+    [editor]
+  );
+  useEffect2(() => {
+    if (!editor) return;
+    const changed = ({ transaction }) => {
+      if (transaction.docChanged && !menu) setHovered(null);
+    };
+    editor.on("transaction", changed);
+    return () => {
+      editor.off("transaction", changed);
+    };
+  }, [editor, menu]);
+  const shown = editable ? hovered : null;
+  const run = (act) => () => {
+    if (editor) act();
+    setMenu(null);
+    setHovered(null);
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: frame,
+      className: cn("relative", className),
+      onMouseMove: (e) => {
+        if (!menu) follow(e.target);
+      },
+      onMouseLeave: () => {
+        if (!menu) setHovered(null);
+      },
+      children: [
+        children,
+        shown && editor && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx4("div", { "data-table-control": true, className: cn(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__ */ jsxs3(
+            Menu,
+            {
+              open: menu === "row",
+              onOpenChange: (open) => setMenu(open ? "row" : null),
+              trigger: /* @__PURE__ */ jsx4(IconButton, { "aria-label": "Row menu", tooltip: "Row", className: "h-6 w-4 p-0", children: /* @__PURE__ */ jsx4(IconGripVertical, { size: 16, stroke: 1.5 }) }),
+              children: [
+                !isHeaderRow(shown.row) && /* @__PURE__ */ jsx4(MenuItem2, { label: "Insert above", leading: /* @__PURE__ */ jsx4(IconRowInsertTop, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowBefore)) }),
+                /* @__PURE__ */ jsx4(MenuItem2, { label: "Insert below", leading: /* @__PURE__ */ jsx4(IconRowInsertBottom, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addRowAfter)) }),
+                /* @__PURE__ */ jsx4(MenuSeparator, {}),
+                /* @__PURE__ */ jsx4(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx4(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableRow(editor, shown.cell)) }),
+                /* @__PURE__ */ jsx4(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx4(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => inCell(editor, shown.cell, deleteTable)) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx4("div", { "data-table-control": true, className: cn(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__ */ jsxs3(
+            Menu,
+            {
+              open: menu === "column",
+              onOpenChange: (open) => setMenu(open ? "column" : null),
+              trigger: /* @__PURE__ */ jsx4(IconButton, { "aria-label": "Column menu", tooltip: "Column", className: "h-4 w-6 p-0", children: /* @__PURE__ */ jsx4(IconGripHorizontal, { size: 16, stroke: 1.5 }) }),
+              children: [
+                /* @__PURE__ */ jsx4(MenuItem2, { label: "Insert left", leading: /* @__PURE__ */ jsx4(IconColumnInsertLeft, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnBefore)) }),
+                /* @__PURE__ */ jsx4(MenuItem2, { label: "Insert right", leading: /* @__PURE__ */ jsx4(IconColumnInsertRight, { ...ICON }), onClick: run(() => inCell(editor, shown.cell, addColumnAfter)) }),
+                /* @__PURE__ */ jsx4(MenuSeparator, {}),
+                /* @__PURE__ */ jsx4(MenuItem2, { label: "Delete", destructive: true, leading: /* @__PURE__ */ jsx4(IconTrash2, { size: 16, stroke: 1.5, className: "text-error-default" }), onClick: run(() => deleteTableColumn(editor, shown.cell)) }),
+                /* @__PURE__ */ jsx4(MenuItem2, { label: "Delete table", destructive: true, leading: /* @__PURE__ */ jsx4(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__ */ jsx4("div", { "data-table-control": true, className: cn(HANDLE_BOX, "absolute flex h-4"), style: { left: shown.tableBox.left, top: shown.tableBox.top + shown.tableBox.height, width: shown.tableBox.width }, children: /* @__PURE__ */ jsx4(IconButton, { "aria-label": "Add row", tooltip: "Add row", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableRow(editor, shown.table)), children: /* @__PURE__ */ jsx4(IconPlus, { size: 12, stroke: 1.5 }) }) }),
+          shown.cell === shown.row.cells[shown.row.cells.length - 1] && /* @__PURE__ */ jsx4("div", { "data-table-control": true, className: cn(HANDLE_BOX, "absolute flex w-4"), style: { left: shown.tableBox.left + shown.tableBox.width, top: shown.tableBox.top, height: shown.tableBox.height }, children: /* @__PURE__ */ jsx4(IconButton, { "aria-label": "Add column", tooltip: "Add column", className: "h-full w-full p-0", onMouseDown: keepFocus, onClick: run(() => appendTableColumn(editor, shown.table)), children: /* @__PURE__ */ jsx4(IconPlus, { size: 12, stroke: 1.5 }) }) })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/ComposerTriggers.tsx
 import { Extension as Extension3 } from "@tiptap/core";
 import { PluginKey as PluginKey3 } from "@tiptap/pm/state";
@@ -589,7 +739,7 @@ import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import { Avatar } from "@estiva-app/ui";
 import { EnterHint } from "@estiva-app/ui";
 import { inlineChipClassName } 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();
@@ -607,8 +757,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"
     })
   };
@@ -735,9 +885,9 @@ var CaptionedReference = Mention.extend({
   addNodeView() {
     const { icon, iconFor } = this.options;
     return ReactNodeViewRenderer(
-      ({ node }) => /* @__PURE__ */ jsxs3(NodeViewWrapper, { as: "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) })
+      ({ node }) => /* @__PURE__ */ jsxs4(NodeViewWrapper, { as: "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" }
     );
@@ -759,7 +909,7 @@ 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);
@@ -913,14 +1063,540 @@ var SlashCommands = Extension3.create({
 });
 
 // src/BlockNodes.tsx
-import { Extension as Extension4, InputRule, Node as Node2 } from "@tiptap/core";
+import { Extension as Extension7, InputRule, Node as Node2 } from "@tiptap/core";
 import { DOMSerializer } from "@tiptap/pm/model";
-import { Plugin as Plugin3, PluginKey as PluginKey4 } from "@tiptap/pm/state";
+import { Plugin as Plugin6, PluginKey as PluginKey7 } from "@tiptap/pm/state";
 import { Mapping, ReplaceAroundStep } from "@tiptap/pm/transform";
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2, ReactRenderer as ReactRenderer2 } from "@tiptap/react";
 import { Checkbox } from "@estiva-app/ui";
 import { calloutLook } from "@estiva-app/ui";
-import { jsx as jsx5 } from "react/jsx-runtime";
+
+// src/ReferenceMenu.tsx
+import { useCallback as useCallback3 } from "react";
+import { Extension as Extension6 } from "@tiptap/core";
+import { useEditorState } from "@tiptap/react";
+import { NodeSelection as NodeSelection2, Plugin as Plugin5, PluginKey as PluginKey6, 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 Extension4 } from "@tiptap/core";
+import { Plugin as Plugin3, PluginKey as PluginKey4 } from "@tiptap/pm/state";
+var key = new PluginKey4("linkChips");
+var CHIPS_MADE = "linkChipsMade";
+var PASTES_KEPT = 8;
+var LINK_OR_URL = /(\[[^[\]\n]+\]\((?:https?:\/\/|mailto:)[^\s)]+\))|(https?:\/\/[^\s<>"'`]+)/g;
+var TRAILING = /* @__PURE__ */ new Set([".", ",", ";", ":", "!", "?", ")", "]"]);
+function urlRuns(text) {
+  if (!text.includes("://")) return [];
+  const out = [];
+  for (const m of text.matchAll(LINK_OR_URL)) {
+    if (m[1]) continue;
+    const start = m.index;
+    if (text.slice(Math.max(0, start - 2), start) === "](" || text[start - 1] === "[") continue;
+    let end = m[0].length;
+    while (end > 0 && TRAILING.has(m[0][end - 1])) end--;
+    out.push({ url: m[0].slice(0, end), from: start, to: start + end, end: start + m[0].length });
+  }
+  return out;
+}
+function findLinkChips(doc, selection, referenceOf, pasted = []) {
+  const found = { chips: [], fills: [], open: [] };
+  const open = /* @__PURE__ */ new Set();
+  doc.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 : "";
+      if (href && !node.attrs.uri) {
+        const uri = referenceOf?.(href);
+        if (uri) found.fills.push({ pos, uri });
+        else open.add(href);
+      }
+      return false;
+    }
+    if (!node.isText || !node.text) return true;
+    if (node.marks.some((m) => m.type.spec.code || m.type.name === "code" || m.type.name === "link")) return false;
+    for (const run of urlRuns(node.text)) {
+      const from = pos + run.from;
+      const to = pos + run.to;
+      const wasPasted = pasted.some((range) => range.from <= from && pos + run.end <= range.to);
+      const typing = selection && selection.to > from && selection.from <= pos + run.end;
+      if (typing && !(selection.empty && wasPasted)) continue;
+      const uri = referenceOf?.(run.url);
+      if (uri) found.chips.push({ from, to, url: run.url, uri, marks: node.marks.map((m) => m.type.name), pasted: wasPasted });
+      else open.add(run.url);
+    }
+    return false;
+  });
+  found.open = [...open];
+  return found;
+}
+function apply(state, found) {
+  if (!found.chips.length && !found.fills.length) return null;
+  const type = state.schema.nodes.reference;
+  if (!type) return null;
+  const tr = state.tr;
+  for (const { pos, uri } of found.fills) {
+    const node = tr.doc.nodeAt(pos);
+    if (node) tr.setNodeMarkup(pos, void 0, { ...node.attrs, uri });
+  }
+  for (const chip of [...found.chips].reverse()) {
+    tr.replaceWith(chip.from, chip.to, type.create({ uri: chip.uri, href: chip.url, marks: chip.marks }));
+  }
+  return tr.setMeta("addToHistory", false).setMeta(CHIPS_MADE, { pasted: found.chips.some((chip) => chip.pasted) });
+}
+function refreshLinkChips(editor) {
+  if (editor.isDestroyed) return;
+  const chips = key.getState(editor.state);
+  if (!chips) return;
+  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 = Extension4.create({
+  name: "linkChips",
+  addOptions() {
+    return { referenceOf: null, ask: null, limit: 24 };
+  },
+  addProseMirrorPlugins() {
+    const options = this.options;
+    const editor = this.editor;
+    return [
+      new Plugin3({
+        key,
+        // The options, where `refreshLinkChips` can read them from the state alone, and where the last pastes landed.
+        state: {
+          init: () => ({ options, pasted: [] }),
+          apply: (tr, value, before, after) => {
+            if (!tr.docChanged) return value;
+            const pasted = value.pasted.map((range) => ({ from: tr.mapping.map(range.from, 1), to: tr.mapping.map(range.to, -1), size: range.to - range.from })).filter((range) => range.from < range.to && range.to - range.from === range.size).map(({ from, to }) => ({ from, to }));
+            if (tr.getMeta("uiEvent") === "paste") {
+              const from = tr.mapping.map(before.selection.from, -1);
+              if (from < after.selection.to) pasted.push({ from, to: after.selection.to });
+            }
+            return { options, pasted: pasted.slice(-PASTES_KEPT) };
+          }
+        },
+        appendTransaction: (trs, _old, state) => {
+          if (!trs.some((tr) => tr.docChanged || tr.selectionSet)) return null;
+          return apply(state, findLinkChips(state.doc, state.selection, options.referenceOf, key.getState(state)?.pasted));
+        },
+        view: (view) => {
+          const asked = /* @__PURE__ */ new Set();
+          const look = (state) => {
+            if (!options.ask) return;
+            const { open } = findLinkChips(state.doc, state.selection, options.referenceOf, key.getState(state)?.pasted);
+            const fresh = open.filter((url) => !asked.has(url)).slice(0, Math.max(0, options.limit - asked.size));
+            if (!fresh.length) return;
+            for (const url of fresh) asked.add(url);
+            const forget = () => {
+              for (const url of fresh) asked.delete(url);
+            };
+            let answer;
+            try {
+              answer = options.ask(fresh);
+            } catch {
+              forget();
+              return;
+            }
+            void Promise.resolve(answer).then(() => refreshLinkChips(editor), forget);
+          };
+          look(view.state);
+          queueMicrotask(() => {
+            try {
+              refreshLinkChips(editor);
+            } catch {
+            }
+          });
+          return {
+            update: (next, prev) => {
+              if (next.state.doc !== prev.doc || !next.state.selection.eq(prev.selection)) look(next.state);
+            }
+          };
+        }
+      })
+    ];
+  }
+});
+
+// src/ReferenceMenu.tsx
+import { MenuItem as MenuItem3, MenuSection, MenuSeparator as MenuSeparator2 } from "@estiva-app/ui";
+import { Popover as Popover2 } from "@estiva-app/ui";
+
+// src/ReferenceCards.ts
+import { Extension as Extension5 } from "@tiptap/core";
+import { NodeSelection, Plugin as Plugin4, PluginKey as PluginKey5 } from "@tiptap/pm/state";
+import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "@tiptap/pm/view";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+function layoutOf(raw) {
+  if (typeof raw !== "string" || raw === "" || raw === "none") return void 0;
+  return raw === "detailed" ? "detailed" : "compact";
+}
+function referenceCardPlacements(doc) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Map();
+  doc.descendants((node, pos, parent) => {
+    if (!node.isTextblock) return true;
+    const cards = [];
+    node.forEach((child) => {
+      if (child.type.name !== "reference") return;
+      const layout = layoutOf(child.attrs.embed);
+      if (layout && child.attrs.uri) cards.push({ uri: String(child.attrs.uri), layout });
+    });
+    if (cards.length) {
+      const id = node.attrs.blockId ?? parent?.attrs.blockId;
+      const base = id ? `b:${String(id)}` : `p:${pos}`;
+      const n = seen.get(base) ?? 0;
+      seen.set(base, n + 1);
+      out.push({ key: n ? `${base}:${n}` : base, pos: pos + node.nodeSize - 1, cards });
+    }
+    return false;
+  });
+  return out;
+}
+var key2 = new PluginKey5("referenceCards");
+function elementFor(storage, slotKey) {
+  let element = storage.elements.get(slotKey);
+  if (!element) {
+    element = document.createElement("div");
+    element.setAttribute("data-reference-cards", slotKey);
+    element.setAttribute("contenteditable", "false");
+    storage.elements.set(slotKey, element);
+  }
+  return element;
+}
+function storageOf(editor) {
+  return editor.storage.referenceCards;
+}
+var ReferenceCards = Extension5.create({
+  name: "referenceCards",
+  addStorage() {
+    return { elements: /* @__PURE__ */ new Map() };
+  },
+  addProseMirrorPlugins() {
+    const storage = this.storage;
+    const decorate = (doc) => DecorationSet2.create(
+      doc,
+      referenceCardPlacements(doc).map(
+        (p) => Decoration2.widget(p.pos, () => elementFor(storage, p.key), {
+          key: p.key,
+          side: 1,
+          ignoreSelection: true,
+          // A click on a card is the card's, not a caret placement in the line.
+          stopEvent: () => true
+        })
+      )
+    );
+    return [
+      new Plugin4({
+        key: key2,
+        state: {
+          init: (_, state) => decorate(state.doc),
+          apply: (tr, set) => tr.docChanged ? decorate(tr.doc) : set
+        },
+        props: { decorations: (state) => key2.getState(state) }
+      })
+    ];
+  }
+});
+function useReferenceCards(editor) {
+  const [slots, setSlots] = useState3([]);
+  useEffect3(() => {
+    if (!editor) return;
+    const storage = storageOf(editor);
+    if (!storage) return;
+    let last = "";
+    const read = () => {
+      if (editor.isDestroyed) return;
+      const next = referenceCardPlacements(editor.state.doc).map((p) => ({ key: p.key, element: elementFor(storage, p.key), cards: p.cards }));
+      const signature = JSON.stringify(next.map((s) => [s.key, s.cards]));
+      if (signature === last) return;
+      last = signature;
+      const live = new Set(next.map((s) => s.key));
+      for (const k of storage.elements.keys()) if (!live.has(k)) storage.elements.delete(k);
+      setSlots(next);
+    };
+    read();
+    editor.on("transaction", read);
+    return () => {
+      editor.off("transaction", read);
+    };
+  }, [editor]);
+  return slots;
+}
+function referenceAtSelection(state) {
+  const { selection } = state;
+  let found = null;
+  if (selection instanceof NodeSelection) {
+    if (selection.node.type.name === "reference") found = { pos: selection.from, node: selection.node };
+  } else if (!selection.empty) {
+    let only = true;
+    state.doc.nodesBetween(selection.from, selection.to, (node2, pos2) => {
+      if (node2.type.name === "reference") {
+        if (found) only = false;
+        found = { pos: pos2, node: node2 };
+        return false;
+      }
+      if (node2.isText) {
+        const from = Math.max(selection.from, pos2) - pos2;
+        const to = Math.min(selection.to, pos2 + node2.nodeSize) - pos2;
+        if ((node2.text ?? "").slice(from, to).trim() !== "") only = false;
+      }
+      return true;
+    });
+    if (!only) found = null;
+  }
+  if (!found) return null;
+  const { pos, node } = found;
+  if (!node.attrs.uri) return null;
+  return { pos, uri: String(node.attrs.uri ?? ""), layout: layoutOf(node.attrs.embed) ?? "none" };
+}
+function setReferenceCard(editor, layout) {
+  const at = referenceAtSelection(editor.state);
+  return at ? setReferenceCardAt(editor, at.pos, layout) : false;
+}
+function setReferenceCardAt(editor, pos, layout) {
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node || node.type.name !== "reference" || !node.attrs.uri) return false;
+  const wasNode = editor.state.selection instanceof NodeSelection && editor.state.selection.from === pos;
+  const tr = editor.state.tr.setNodeMarkup(pos, void 0, { ...node.attrs, embed: layout === "none" ? null : layout });
+  if (wasNode) tr.setSelection(NodeSelection.create(tr.doc, pos));
+  editor.view.dispatch(tr);
+  return true;
+}
+
+// src/ReferenceMenu.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var key3 = new PluginKey6("referenceMenu");
+var LAYOUTS = [
+  { layout: "none", label: "None" },
+  { layout: "compact", label: "Compact" },
+  { layout: "detailed", label: "Detailed" }
+];
+function chipTarget(view, pos) {
+  const dom = view.nodeDOM(pos);
+  return dom instanceof HTMLElement ? dom.querySelector("a[href], button") : null;
+}
+function webHref(view, pos) {
+  const href = view.state.doc.nodeAt(pos)?.attrs.href;
+  return typeof href === "string" && /^https?:\/\//i.test(href) ? href : "";
+}
+function rowsOf(view, pos) {
+  const open = chipTarget(view, pos) || webHref(view, pos) ? ["open"] : [];
+  return view.state.doc.nodeAt(pos)?.attrs.uri ? [...open, ...LAYOUTS.map((card) => card.layout)] : open;
+}
+function chipAt(state, pos) {
+  const node = state.doc.nodeAt(pos);
+  return node && node.type.name === "reference" ? node : null;
+}
+function justPlaced(tr, state) {
+  if (!tr.docChanged || tr.getMeta("history$") || tr.getMeta("preventUpdate")) return null;
+  const whole = tr.steps.some((step) => step instanceof ReplaceStep && step.from === 0 && step.to === tr.before.content.size);
+  if (whole && tr.getMeta("uiEvent") !== "paste") return null;
+  const made = tr.getMeta(CHIPS_MADE);
+  if (made && !made.pasted) return null;
+  const { selection } = state;
+  if (!selection.empty) return null;
+  let at = selection.from;
+  let before = selection.$from.nodeBefore;
+  if (!made && before?.isText && before.text === " ") {
+    at -= 1;
+    before = state.doc.resolve(at).nodeBefore;
+  }
+  if (!before || before.type.name !== "reference" || !before.attrs.uri) return null;
+  const pos = at - before.nodeSize;
+  const old = tr.mapping.invert().map(pos);
+  const was = tr.before.nodeAt(old);
+  if (was && was.type.name === "reference" && was.attrs.uri === before.attrs.uri && tr.mapping.map(old, 1) === pos) return null;
+  return pos;
+}
+function dispatchMenu(view, next) {
+  view.dispatch(view.state.tr.setMeta(key3, next));
+}
+var passing = false;
+function openChip(view, pos) {
+  const target = chipTarget(view, pos);
+  if (target) {
+    passing = true;
+    try {
+      target.click();
+    } finally {
+      passing = false;
+    }
+    return;
+  }
+  const href = webHref(view, pos);
+  if (href) window.open(href, "_blank", "noopener,noreferrer");
+}
+function choose(editor, pos, row) {
+  dispatchMenu(editor.view, null);
+  if (row === "open") openChip(editor.view, pos);
+  else if (row) setReferenceCardAt(editor, pos, row);
+}
+function isReferenceMenuOpen(state) {
+  return !!key3.getState(state);
+}
+function referenceMenuClick(editor, pos) {
+  if (passing || editor.isDestroyed || !editor.isEditable || key3.getState(editor.state) === void 0) return false;
+  if (!chipAt(editor.state, pos) || rowsOf(editor.view, pos).length === 0) return false;
+  editor.view.dispatch(caretAfter(editor.state, pos).setMeta(key3, { pos, active: -1 }));
+  return true;
+}
+function caretAfter(state, pos) {
+  const node = state.doc.nodeAt(pos);
+  return state.tr.setSelection(TextSelection2.create(state.doc, pos + (node?.nodeSize ?? 1)));
+}
+var ReferenceMenu = Extension6.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,
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    return [
+      new Plugin5({
+        key: key3,
+        state: {
+          init: () => null,
+          apply: (tr, value, before, after) => {
+            const meta = tr.getMeta(key3);
+            if (meta !== void 0) return meta;
+            const placed = justPlaced(tr, after);
+            if (placed !== null) return { pos: placed, active: -1 };
+            if (!value) return null;
+            const pos = tr.mapping.map(value.pos);
+            if (!chipAt(after, pos)) return null;
+            if (tr.docChanged && !tr.getMeta("appendedTransaction") && tr.getMeta(CHIPS_MADE) === void 0) return null;
+            const onChip = after.selection instanceof NodeSelection2 && after.selection.from === pos;
+            if (tr.selectionSet && !after.selection.eq(before.selection) && !onChip) return null;
+            return pos === value.pos ? value : { ...value, pos };
+          }
+        },
+        props: {
+          handleDOMEvents: {
+            // Focus gone, the keys no longer reach the menu, and a card chosen now would miss the save on leaving (code review).
+            blur: (view) => {
+              if (key3.getState(view.state)) dispatchMenu(view, null);
+              return false;
+            }
+          },
+          handleKeyDown: (view, event) => {
+            if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return false;
+            const open = key3.getState(view.state);
+            if (!open) {
+              const { selection } = view.state;
+              if (event.key !== "Enter" || !view.editable || !(selection instanceof NodeSelection2) || selection.node.type.name !== "reference") return false;
+              if (rowsOf(view, selection.from).length === 0) return false;
+              view.dispatch(caretAfter(view.state, selection.from).setMeta(key3, { pos: selection.from, active: 0 }));
+              return true;
+            }
+            const rows = rowsOf(view, open.pos);
+            if (event.key === "Escape") {
+              dispatchMenu(view, null);
+              return true;
+            }
+            if (rows.length === 0) return false;
+            if (event.key === "ArrowDown") {
+              dispatchMenu(view, { ...open, active: (open.active + 1) % rows.length });
+              return true;
+            }
+            if (event.key === "ArrowUp") {
+              dispatchMenu(view, { ...open, active: open.active <= 0 ? rows.length - 1 : open.active - 1 });
+              return true;
+            }
+            if (event.key === "Enter" && open.active >= 0) {
+              choose(editor, open.pos, rows[open.active]);
+              return true;
+            }
+            return false;
+          }
+        }
+      })
+    ];
+  }
+});
+function ReferenceMenuView({ editor }) {
+  const shown = useEditorState({
+    editor,
+    selector: ({ editor: ed }) => {
+      if (!ed || ed.isDestroyed) return null;
+      const open = key3.getState(ed.state);
+      if (!open) return null;
+      const node = chipAt(ed.state, open.pos);
+      if (!node) return null;
+      const embed = node.attrs.embed;
+      const layout = embed === "detailed" ? "detailed" : typeof embed === "string" && embed !== "" && embed !== "none" ? "compact" : "none";
+      return { pos: open.pos, active: open.active, named: !!node.attrs.uri, layout };
+    }
+  });
+  const keepFocus2 = useCallback3((list) => {
+    const panel = list?.closest('[role="dialog"]');
+    if (!panel) return;
+    const keep = (event) => event.preventDefault();
+    panel.addEventListener("mousedown", keep);
+    return () => panel.removeEventListener("mousedown", keep);
+  }, []);
+  const live = shown && editor && !editor.isDestroyed ? editor : null;
+  const dom = live && shown ? live.view.nodeDOM(shown.pos) : null;
+  const anchor = dom instanceof HTMLElement ? dom : null;
+  const rows = live && shown ? rowsOf(live.view, shown.pos) : [];
+  const opens = rows[0] === "open";
+  const run = (row) => {
+    if (editor && shown) choose(editor, shown.pos, row);
+  };
+  return (
+    // finalFocus={false}: focus never left the text.
+    /* @__PURE__ */ jsx6(
+      Popover2,
+      {
+        anchor,
+        open: !!shown && !!anchor && rows.length > 0,
+        onOpenChange: (next) => {
+          if (!next && editor && !editor.isDestroyed && key3.getState(editor.state)) dispatchMenu(editor.view, null);
+        },
+        side: "bottom",
+        align: "left",
+        ariaLabel: "Link",
+        finalFocus: false,
+        children: shown && /* @__PURE__ */ jsxs5("div", { ref: keepFocus2, role: "menu", "aria-label": "Link", className: "flex flex-col gap-0.5", children: [
+          opens && /* @__PURE__ */ jsx6(
+            MenuItem3,
+            {
+              role: "menuitem",
+              tabIndex: -1,
+              label: "Open",
+              selected: shown.active === 0,
+              onMouseDown: (event) => {
+                event.preventDefault();
+                run("open");
+              }
+            }
+          ),
+          shown.named && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            opens && /* @__PURE__ */ jsx6(MenuSeparator2, {}),
+            /* @__PURE__ */ jsx6("div", { role: "group", "aria-label": "Card", children: /* @__PURE__ */ jsx6(MenuSection, { label: "Card", children: LAYOUTS.map(({ layout, label }, i) => /* @__PURE__ */ jsx6(
+              MenuItem3,
+              {
+                role: "menuitemradio",
+                "aria-checked": shown.layout === layout,
+                tabIndex: -1,
+                label,
+                selected: shown.active === i + (opens ? 1 : 0),
+                trailing: shown.layout === layout ? /* @__PURE__ */ jsx6(IconCheck, { size: 16, "aria-hidden": true }) : void 0,
+                onMouseDown: (event) => {
+                  event.preventDefault();
+                  run(layout);
+                }
+              },
+              layout
+            )) }) })
+          ] })
+        ] })
+      }
+    )
+  );
+}
+
+// src/BlockNodes.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
 var BLOCK_TYPES = [
   "paragraph",
   "heading",
@@ -1078,7 +1754,7 @@ function bringsInBlocks(transactions) {
     })
   );
 }
-var BlockId = Extension4.create({
+var BlockId = Extension7.create({
   name: "blockId",
   onCreate() {
     const { state, view } = this.editor;
@@ -1090,8 +1766,8 @@ var BlockId = Extension4.create({
   },
   addProseMirrorPlugins() {
     return [
-      new Plugin3({
-        key: new PluginKey4("blockIdSplit"),
+      new Plugin6({
+        key: new PluginKey7("blockIdSplit"),
         appendTransaction: (transactions, old, state) => {
           if (!bringsInBlocks(transactions)) return null;
           const mapping = new Mapping();
@@ -1125,6 +1801,7 @@ var BlockId = Extension4.create({
     ];
   }
 });
+var webUrl = (raw) => raw && /^https?:\/\/\S+$/i.test(raw) ? raw : null;
 var ReferenceNode = Node2.create({
   name: "reference",
   group: "inline",
@@ -1137,20 +1814,48 @@ var ReferenceNode = Node2.create({
   },
   addAttributes() {
     return {
-      uri: { default: "" },
-      marks: { default: [] }
+      // A pasted URL chip keeps only its URL: what it names is the editor's to resolve (`LinkChips`), never
+      // the clipboard's, which could show one object while saving another URL (security review).
+      uri: { default: "", parseHTML: (element) => webUrl(element.getAttribute("data-href")) ? "" : element.getAttribute("data-reference") ?? "" },
+      marks: { default: [] },
+      embed: { default: null, parseHTML: (element) => element.getAttribute("data-embed") },
+      extra: { default: null, parseHTML: () => null },
+      // An http(s) URL only: `LinkChips` makes no other, and a pasted `javascript:` must not reach a saved link.
+      href: { default: null, parseHTML: (element) => webUrl(element.getAttribute("data-href")) }
     };
   },
   parseHTML() {
     return [{ tag: "span[data-reference]" }];
   },
   renderHTML({ node }) {
-    return ["span", { "data-reference": String(node.attrs.uri) }, String(node.attrs.uri)];
+    const embed = typeof node.attrs.embed === "string" ? { "data-embed": node.attrs.embed } : {};
+    const href = typeof node.attrs.href === "string" && node.attrs.href ? { "data-href": node.attrs.href } : {};
+    return ["span", { "data-reference": String(node.attrs.uri), ...embed, ...href }, String(node.attrs.href || node.attrs.uri)];
+  },
+  renderText({ node }) {
+    return String(node.attrs.href || node.attrs.uri);
   },
   addNodeView() {
     const View = this.options.view;
     if (!View) return null;
-    return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx5(NodeViewWrapper2, { as: "span", className: "inline", children: /* @__PURE__ */ jsx5(View, { uri: String(node.attrs.uri ?? "") }) }));
+    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__ */ jsx7(
+        NodeViewWrapper2,
+        {
+          as: "span",
+          className: "inline",
+          onClickCapture: (event) => {
+            const pos = getPos();
+            if (typeof pos !== "number" || !referenceMenuClick(editor, pos)) return;
+            event.preventDefault();
+            event.stopPropagation();
+          },
+          children: uri ? /* @__PURE__ */ jsx7(View, { uri, ...href ? { href } : {} }) : /* @__PURE__ */ jsx7("span", { children: href })
+        }
+      );
+    });
   }
 });
 var UnknownBlock = Node2.create({
@@ -1178,7 +1883,7 @@ var UnknownBlock = Node2.create({
 function UnknownBlockView({ node }) {
   const source = node.attrs.source;
   const text = String(node.attrs.text ?? "");
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     NodeViewWrapper2,
     {
       "data-block-id": source?.id,
@@ -1218,7 +1923,7 @@ var AttachmentNode = Node2.create({
   addNodeView() {
     const View = this.options.view;
     if (!View) return null;
-    return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx5(NodeViewWrapper2, { className: "my-2", children: /* @__PURE__ */ jsx5(View, { attrs: node.attrs }) }));
+    return ReactNodeViewRenderer2(({ node }) => /* @__PURE__ */ jsx7(NodeViewWrapper2, { className: "my-2", children: /* @__PURE__ */ jsx7(View, { attrs: node.attrs }) }));
   }
 });
 var TICK = "checklistTick";
@@ -1236,7 +1941,7 @@ function itemAtCaret(state) {
   if (item.type.name !== "listItem" || $from.index(-1) !== 0) return null;
   return { node: item, pos: $from.before(-1) };
 }
-var sameAttrs = (a, b) => Object.keys({ ...a.attrs, ...b.attrs }).every((key) => a.attrs[key] === b.attrs[key]);
+var sameAttrs = (a, b) => Object.keys({ ...a.attrs, ...b.attrs }).every((key4) => a.attrs[key4] === b.attrs[key4]);
 function listItemView(editor, node, view, getPos) {
   const toDOM = node.type.spec.toDOM;
   const { dom, contentDOM } = toDOM ? DOMSerializer.renderSpec(document, toDOM(node)) : { dom: document.createElement("li"), contentDOM: void 0 };
@@ -1287,7 +1992,7 @@ function listItemView(editor, node, view, getPos) {
     }
   };
 }
-var Checklist = Extension4.create({
+var Checklist = Extension7.create({
   name: "checklist",
   // Before the list item's own Enter and Backspace.
   priority: 101,
@@ -1352,14 +2057,14 @@ var Checklist = Extension4.create({
   addProseMirrorPlugins() {
     const editor = this.editor;
     return [
-      new Plugin3({
-        key: new PluginKey4("checklist"),
+      new Plugin6({
+        key: new PluginKey7("checklist"),
         props: { nodeViews: { listItem: (node, view, getPos) => listItemView(editor, node, view, getPos) } }
       })
     ];
   }
 });
-var Callout = Extension4.create({
+var Callout = Extension7.create({
   name: "callout",
   addGlobalAttributes() {
     return [
@@ -1385,25 +2090,36 @@ export {
   Checklist,
   CodeBlockColours,
   EditorBlockHandle,
+  EditorTableControls,
   FORMATS,
   KeptSelection,
+  LinkChips,
   PastedImages,
   PersonMention,
+  ReferenceCards,
+  ReferenceMenu,
+  ReferenceMenuView,
   ReferenceNode,
   ReferenceTrigger,
   SelectionToolbar,
   SlashCommands,
   UnknownBlock,
   UrgentPersonMention,
+  appendTableColumn,
+  appendTableRow,
   applyFormat,
   blockDropCursor,
   deleteBlock,
+  deleteTableColumn,
+  deleteTableRow,
   duplicateBlock,
   filterPeople,
   filterReferences,
   filterSlashSections,
+  findLinkChips,
   formatSection,
   isChecklistTick,
+  isReferenceMenuOpen,
   isSuggestionActive,
   isSuggestionOpen,
   moveBlock,
@@ -1411,10 +2127,17 @@ export {
   pastedImageName,
   pastedImages,
   peopleMenu,
+  referenceAtSelection,
+  referenceCardPlacements,
   referenceMenu,
+  referenceMenuClick,
+  refreshLinkChips,
+  setReferenceCard,
+  setReferenceCardAt,
   startBlockDrag,
   suggestionPopup,
   typeTrigger,
-  urgentPubkeys
+  urgentPubkeys,
+  useReferenceCards
 };
 //# sourceMappingURL=editor.js.map