@tessera-editor/react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/Tessera.tsx
-import { useCallback as useCallback3, useEffect as useEffect12, useMemo, useRef as useRef7, useState as useState13 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect13, useMemo, useRef as useRef9, useState as useState13 } from "react";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { DragHandle } from "@tiptap/extension-drag-handle-react";
 import {
@@ -28,7 +28,6 @@ function useTesseraContext() {
 // src/ImageNodeView.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function AiImageNodeView({ node, updateAttributes, selected, decorations }) {
-  console.log("[imgview] decorations:", Array.isArray(decorations), decorations?.length);
   const galleryAttrs = (() => {
     for (const deco of decorations ?? []) {
       const attrs = deco.type?.attrs;
@@ -41,13 +40,28 @@ function AiImageNodeView({ node, updateAttributes, selected, decorations }) {
   const { t } = useContext2(TesseraContext);
   const imgRef = useRef(null);
   const [preview, setPreview] = useState(null);
+  const [zoom, setZoom] = useState(1);
+  const clampZoom = (z) => Math.min(8, Math.max(0.2, z));
   useEffect(() => {
     if (!preview) return;
+    setZoom(1);
     const close = (e) => {
       if (e.key === "Escape") setPreview(null);
+      else if (e.key === "+" || e.key === "=") setZoom((z) => clampZoom(z * 1.25));
+      else if (e.key === "-") setZoom((z) => clampZoom(z / 1.25));
+      else if (e.key === "0") setZoom(1);
+    };
+    const onWheel = (e) => {
+      if (!e.ctrlKey) return;
+      e.preventDefault();
+      setZoom((z) => clampZoom(z * (e.deltaY < 0 ? 1.15 : 1 / 1.15)));
     };
     window.addEventListener("keydown", close);
-    return () => window.removeEventListener("keydown", close);
+    window.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      window.removeEventListener("keydown", close);
+      window.removeEventListener("wheel", onWheel);
+    };
   }, [preview]);
   const { src, alt, width, align } = node.attrs;
   const startResize = (event) => {
@@ -97,7 +111,28 @@ function AiImageNodeView({ node, updateAttributes, selected, decorations }) {
           /* @__PURE__ */ jsx("div", { className: "tessera-image-resize", onPointerDown: startResize, title: "\u2194" })
         ] }),
         preview ? createPortal(
-          /* @__PURE__ */ jsx("div", { className: "tessera-lightbox", onClick: () => setPreview(null), children: /* @__PURE__ */ jsx("img", { src: preview, alt: alt ?? "" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "tessera-lightbox", onClick: () => setPreview(null), children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: preview,
+                alt: alt ?? "",
+                style: { transform: `scale(${zoom})` },
+                onClick: (e) => e.stopPropagation(),
+                onDoubleClick: () => setZoom(1)
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "tessera-lightbox-bar", onClick: (e) => e.stopPropagation(), children: [
+              /* @__PURE__ */ jsx("button", { type: "button", title: t("imageZoomOut"), onClick: () => setZoom((z) => clampZoom(z / 1.25)), children: "\u2212" }),
+              /* @__PURE__ */ jsxs("span", { className: "tessera-lightbox-scale", children: [
+                Math.round(zoom * 100),
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx("button", { type: "button", title: t("imageZoomIn"), onClick: () => setZoom((z) => clampZoom(z * 1.25)), children: "+" }),
+              /* @__PURE__ */ jsx("button", { type: "button", title: t("imageZoomReset"), onClick: () => setZoom(1), children: "1:1" }),
+              /* @__PURE__ */ jsx("span", { className: "tessera-lightbox-hint", children: t("imageZoomHint") })
+            ] })
+          ] }),
           document.body
         ) : null,
         /* @__PURE__ */ jsxs("div", { className: "tessera-image-align", children: [
@@ -116,7 +151,8 @@ var ImageBlockView = ImageBlock.extend({
 });
 
 // src/TableNodeViews.tsx
-import { useContext as useContext3, useState as useState2 } from "react";
+import { useContext as useContext3, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import { NodeViewWrapper as NodeViewWrapper2, NodeViewContent, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
 import {
   AiTableCell,
@@ -124,6 +160,32 @@ import {
   TABLE_COLUMN_KINDS,
   tableToCsvAt
 } from "@tessera-editor/core";
+
+// src/portal.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+function useTesseraPortalRoot(editor) {
+  const [target, setTarget] = useState2(null);
+  useEffect2(() => {
+    const resolve = () => {
+      setTarget((prev) => {
+        if (prev && prev !== document.body) {
+          return prev;
+        }
+        return editor.view.dom.closest(".tessera-root") ?? document.body;
+      });
+    };
+    resolve();
+    editor.on("focus", resolve);
+    editor.on("selectionUpdate", resolve);
+    return () => {
+      editor.off("focus", resolve);
+      editor.off("selectionUpdate", resolve);
+    };
+  }, [editor]);
+  return target;
+}
+
+// src/TableNodeViews.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function kindLabel(t, kind) {
   switch (kind) {
@@ -153,9 +215,39 @@ function columnIndex(props) {
 }
 function AiTableHeaderView(props) {
   const { editor, t } = useContext3(TesseraContext);
-  const [open, setOpen] = useState2(false);
+  const portalRoot = useTesseraPortalRoot(editor);
+  const [open, setOpen] = useState3(false);
+  const [style, setStyle] = useState3({});
+  const thRef = useRef2(null);
+  const menuRef = useRef2(null);
   const index = columnIndex(props);
+  const toggle = () => {
+    const th = thRef.current;
+    if (th) {
+      const r = th.getBoundingClientRect();
+      const flip = window.innerHeight - r.bottom < 340 && r.top > 340;
+      const left = Math.min(Math.max(8, r.left), window.innerWidth - 198);
+      setStyle(
+        flip ? { left: `${left}px`, top: "auto", bottom: `${window.innerHeight - r.top + 6}px` } : { left: `${left}px`, top: `${r.bottom + 6}px`, bottom: "auto" }
+      );
+    }
+    setOpen((v) => !v);
+  };
+  useEffect3(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      const target = e.target;
+      if (menuRef.current?.contains(target) || target.closest(".tessera-col-menu-btn")) return;
+      setOpen(false);
+    };
+    window.addEventListener("mousedown", onDown);
+    return () => window.removeEventListener("mousedown", onDown);
+  }, [open]);
   const run = (fn) => {
+    if (!editor.isEditable) {
+      setOpen(false);
+      return;
+    }
     setOpen(false);
     const pos = props.getPos();
     if (typeof pos === "number") {
@@ -163,7 +255,7 @@ function AiTableHeaderView(props) {
     }
     void fn();
   };
-  return /* @__PURE__ */ jsxs2(NodeViewWrapper2, { as: "th", className: "tessera-th", "data-index": index, children: [
+  return /* @__PURE__ */ jsxs2(NodeViewWrapper2, { ref: thRef, as: "th", className: "tessera-th", "data-index": index, children: [
     /* @__PURE__ */ jsx2(NodeViewContent, { className: "tessera-th-content" }),
     /* @__PURE__ */ jsx2(
       "button",
@@ -173,36 +265,49 @@ function AiTableHeaderView(props) {
         contentEditable: false,
         title: t("colMenuTitle"),
         onMouseDown: (e) => e.preventDefault(),
-        onClick: () => setOpen((v) => !v),
+        onClick: toggle,
         children: "\u2304"
       }
     ),
-    open ? /* @__PURE__ */ jsxs2("div", { className: "tessera-popover tessera-col-menu", contentEditable: false, onMouseDown: (e) => e.preventDefault(), children: [
-      /* @__PURE__ */ jsx2("div", { className: "tessera-menu-section", children: TABLE_COLUMN_KINDS.map((kind) => /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.setColumnType(index, kind)), children: kindLabel(t, kind) }, kind)) }),
-      /* @__PURE__ */ jsx2("div", { className: "tessera-menu-sep" }),
-      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.sortTableByColumn(index, "asc")), children: t("colMenuSortAsc") }),
-      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.sortTableByColumn(index, "desc")), children: t("colMenuSortDesc") }),
-      /* @__PURE__ */ jsx2("div", { className: "tessera-menu-sep" }),
-      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.addColumnBefore()), children: t("colMenuInsertLeft") }),
-      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.addColumnAfter()), children: t("colMenuInsertRight") }),
-      /* @__PURE__ */ jsx2("button", { type: "button", className: "tessera-danger", onClick: () => run(() => editor.commands.deleteColumn()), children: t("colMenuDelete") }),
-      /* @__PURE__ */ jsx2("div", { className: "tessera-menu-sep" }),
-      /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.toggleHeaderRow()), children: t("tableToggleHeader") }),
-      /* @__PURE__ */ jsx2(
-        "button",
+    open && portalRoot ? createPortal2(
+      /* @__PURE__ */ jsxs2(
+        "div",
         {
-          type: "button",
-          onClick: () => run(() => {
-            const csv = tableToCsvAt(editor);
-            if (csv) {
-              void navigator.clipboard.writeText(csv);
-            }
-          }),
-          children: t("tableCopyCsv")
+          ref: menuRef,
+          className: "tessera-popover tessera-col-menu",
+          style: { position: "fixed", ...style },
+          contentEditable: false,
+          onMouseDown: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsx2("div", { className: "tessera-menu-section", children: TABLE_COLUMN_KINDS.map((kind) => /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.setColumnType(index, kind)), children: kindLabel(t, kind) }, kind)) }),
+            /* @__PURE__ */ jsx2("div", { className: "tessera-menu-sep" }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.sortTableByColumn(index, "asc")), children: t("colMenuSortAsc") }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.sortTableByColumn(index, "desc")), children: t("colMenuSortDesc") }),
+            /* @__PURE__ */ jsx2("div", { className: "tessera-menu-sep" }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.addColumnBefore()), children: t("colMenuInsertLeft") }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.addColumnAfter()), children: t("colMenuInsertRight") }),
+            /* @__PURE__ */ jsx2("button", { type: "button", className: "tessera-danger", onClick: () => run(() => editor.commands.deleteColumn()), children: t("colMenuDelete") }),
+            /* @__PURE__ */ jsx2("div", { className: "tessera-menu-sep" }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => run(() => editor.commands.toggleHeaderRow()), children: t("tableToggleHeader") }),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: () => run(() => {
+                  const csv = tableToCsvAt(editor);
+                  if (csv) {
+                    void navigator.clipboard.writeText(csv);
+                  }
+                }),
+                children: t("tableCopyCsv")
+              }
+            ),
+            /* @__PURE__ */ jsx2("button", { type: "button", className: "tessera-danger", onClick: () => run(() => editor.commands.deleteTable()), children: t("tableDelete") })
+          ]
         }
       ),
-      /* @__PURE__ */ jsx2("button", { type: "button", className: "tessera-danger", onClick: () => run(() => editor.commands.deleteTable()), children: t("tableDelete") })
-    ] }) : null
+      portalRoot
+    ) : null
   ] });
 }
 function AiTableCellView(props) {
@@ -231,10 +336,10 @@ function AiTableCellView(props) {
     return types[cellIndex] ?? "text";
   })();
   if (kind === "text") {
-    return /* @__PURE__ */ jsx2(NodeViewWrapper2, { as: "td", className: "tessera-td", children: /* @__PURE__ */ jsx2(NodeViewContent, {}) });
+    return /* @__PURE__ */ jsx2(NodeViewWrapper2, { as: "td", className: "tessera-td", "data-index": columnIndex(props), children: /* @__PURE__ */ jsx2(NodeViewContent, {}) });
   }
   const setValue = (next) => props.updateAttributes({ value: next });
-  return /* @__PURE__ */ jsxs2(NodeViewWrapper2, { as: "td", className: `tessera-td tessera-td--${kind}`, children: [
+  return /* @__PURE__ */ jsxs2(NodeViewWrapper2, { as: "td", className: `tessera-td tessera-td--${kind}`, "data-index": columnIndex(props), children: [
     /* @__PURE__ */ jsx2(NodeViewContent, { className: "tessera-td-hidden" }),
     kind === "checkbox" ? /* @__PURE__ */ jsx2(
       "input",
@@ -289,7 +394,7 @@ function AiTableCellView(props) {
   ] });
 }
 function TagEditor({ multi, value, onChange }) {
-  const [input, setInput] = useState2("");
+  const [input, setInput] = useState3("");
   const commit = () => {
     const tag = input.trim();
     if (!tag) {
@@ -342,13 +447,13 @@ var AiTableHeaderViewExtension = AiTableHeader.extend({
 });
 
 // src/EmbedTocViews.tsx
-import { useContext as useContext4, useEffect as useEffect2, useState as useState3 } from "react";
+import { useContext as useContext4, useEffect as useEffect4, useState as useState4 } from "react";
 import { NodeViewWrapper as NodeViewWrapper3, ReactNodeViewRenderer as ReactNodeViewRenderer3 } from "@tiptap/react";
 import { EmbedBlock, TocBlock } from "@tessera-editor/core";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function EmbedView({ node, updateAttributes, selected }) {
   const { t } = useContext4(TesseraContext);
-  const [url, setUrl] = useState3(typeof node.attrs.src === "string" ? node.attrs.src : "");
+  const [url, setUrl] = useState4(typeof node.attrs.src === "string" ? node.attrs.src : "");
   const src = typeof node.attrs.src === "string" ? node.attrs.src : "";
   const height = typeof node.attrs.height === "number" ? node.attrs.height : 360;
   if (!src) {
@@ -396,8 +501,8 @@ function EmbedView({ node, updateAttributes, selected }) {
 }
 function TocView({ editor }) {
   const { t } = useContext4(TesseraContext);
-  const [items, setItems] = useState3([]);
-  useEffect2(() => {
+  const [items, setItems] = useState4([]);
+  useEffect4(() => {
     const scan = () => {
       const found = [];
       editor.state.doc.forEach((node, _offset, index) => {
@@ -443,21 +548,21 @@ var TocBlockView = TocBlock.extend({
 });
 
 // src/SlashMenu.tsx
-import { useEffect as useEffect3, useImperativeHandle, useRef as useRef2, useState as useState4, forwardRef } from "react";
+import { useEffect as useEffect5, useImperativeHandle, useRef as useRef3, useState as useState5, forwardRef } from "react";
 import { ReactRenderer } from "@tiptap/react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var SlashMenuView = forwardRef(
   function SlashMenuView2({ items, command, clientRect, t }, ref) {
-    const [selectedIndex, setSelectedIndex] = useState4(0);
-    const listRef = useRef2(null);
-    const [rect, setRect] = useState4(null);
-    useEffect3(() => {
+    const [selectedIndex, setSelectedIndex] = useState5(0);
+    const listRef = useRef3(null);
+    const [rect, setRect] = useState5(null);
+    useEffect5(() => {
       setRect(clientRect?.() ?? null);
     }, [items, clientRect]);
-    useEffect3(() => {
+    useEffect5(() => {
       setSelectedIndex(0);
     }, [items]);
-    useEffect3(() => {
+    useEffect5(() => {
       listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "nearest" });
     }, [selectedIndex]);
     useImperativeHandle(ref, () => ({
@@ -498,7 +603,7 @@ var SlashMenuView = forwardRef(
         width: 320
       };
     })() : { position: "fixed", left: -9999, top: -9999 };
-    return /* @__PURE__ */ jsx4("div", { className: "tessera-slash-menu", style, "data-testid": "slash-menu", children: Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ jsxs4("div", { className: "tessera-slash-group", children: [
+    return /* @__PURE__ */ jsx4("div", { ref: listRef, className: "tessera-slash-menu", style, "data-testid": "slash-menu", children: Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ jsxs4("div", { className: "tessera-slash-group", children: [
       /* @__PURE__ */ jsx4("div", { className: "tessera-slash-group-title", children: group === "ai" ? t("groupAi") : group === "advanced" ? t("groupAdvanced") : t("groupBasic") }),
       groupItems.map((item) => {
         flatIndex += 1;
@@ -573,20 +678,20 @@ function createSlashRenderer(t) {
 }
 
 // src/EmojiMenu.tsx
-import { useEffect as useEffect4, useImperativeHandle as useImperativeHandle2, useRef as useRef3, useState as useState5, forwardRef as forwardRef2 } from "react";
+import { useEffect as useEffect6, useImperativeHandle as useImperativeHandle2, useRef as useRef4, useState as useState6, forwardRef as forwardRef2 } from "react";
 import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var EmojiMenuView = forwardRef2(function EmojiMenuView2({ items, command, clientRect }, ref) {
-  const [selectedIndex, setSelectedIndex] = useState5(0);
-  const [rect, setRect] = useState5(null);
-  const gridRef = useRef3(null);
-  useEffect4(() => {
+  const [selectedIndex, setSelectedIndex] = useState6(0);
+  const [rect, setRect] = useState6(null);
+  const gridRef = useRef4(null);
+  useEffect6(() => {
     setRect(clientRect?.() ?? null);
   }, [items, clientRect]);
-  useEffect4(() => {
+  useEffect6(() => {
     setSelectedIndex(0);
   }, [items]);
-  useEffect4(() => {
+  useEffect6(() => {
     gridRef.current?.querySelectorAll(".tessera-emoji-item")[selectedIndex]?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
   useImperativeHandle2(ref, () => ({
@@ -677,53 +782,25 @@ function createEmojiRenderer() {
 }
 
 // src/EmptyLineToolbar.tsx
-import { useCallback, useContext as useContext5, useEffect as useEffect6, useLayoutEffect, useRef as useRef4, useState as useState7 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { defaultSlashItems } from "@tessera-editor/core";
+import { useCallback, useContext as useContext5, useEffect as useEffect7, useLayoutEffect, useRef as useRef5, useState as useState7 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { defaultSlashItems, filterSlashItems } from "@tessera-editor/core";
 import { aiSlashItems } from "@tessera-editor/ai";
-
-// src/portal.ts
-import { useEffect as useEffect5, useState as useState6 } from "react";
-function useTesseraPortalRoot(editor) {
-  const [target, setTarget] = useState6(null);
-  useEffect5(() => {
-    const resolve = () => {
-      setTarget((prev) => {
-        if (prev && prev !== document.body) {
-          return prev;
-        }
-        return editor.view.dom.closest(".tessera-root") ?? document.body;
-      });
-    };
-    resolve();
-    editor.on("focus", resolve);
-    editor.on("selectionUpdate", resolve);
-    return () => {
-      editor.off("focus", resolve);
-      editor.off("selectionUpdate", resolve);
-    };
-  }, [editor]);
-  return target;
-}
-
-// src/EmptyLineToolbar.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function buildItems(editor, t, hasAi) {
-  const base = defaultSlashItems(t);
-  if (!hasAi) {
-    return base;
-  }
-  return base;
+function buildItems(editor, t) {
+  const slash = editor.extensionManager.extensions.find((ext) => ext.name === "tesseraSlashMenu");
+  const excluded = slash?.options?.excludeItems;
+  return filterSlashItems(defaultSlashItems(t), excluded);
 }
 function EmptyLineToolbar() {
-  const { editor, t, ai } = useContext5(TesseraContext);
+  const { editor, t } = useContext5(TesseraContext);
   const [style, setStyle] = useState7(null);
   const [expanded, setExpanded] = useState7(false);
   const [panelPlacement, setPanelPlacement] = useState7("bottom");
   const [panelMaxHeight, setPanelMaxHeight] = useState7(void 0);
-  const composingRef = useRef4(false);
-  const rootRef = useRef4(null);
-  const panelRef = useRef4(null);
+  const composingRef = useRef5(false);
+  const rootRef = useRef5(null);
+  const panelRef = useRef5(null);
   const portalRoot = useTesseraPortalRoot(editor);
   const hideAll = useCallback(() => {
     setStyle(null);
@@ -760,7 +837,7 @@ function EmptyLineToolbar() {
     });
     dom.setAttribute("data-toolbar-line", "true");
   }, [editor, hideAll]);
-  useEffect6(() => {
+  useEffect7(() => {
     const hide = () => {
       setStyle(null);
       setExpanded(false);
@@ -815,13 +892,13 @@ function EmptyLineToolbar() {
   if (!style || !portalRoot) {
     return null;
   }
-  const items = buildItems(editor, t, !!ai);
+  const items = buildItems(editor, t);
   const runItem = (item) => {
     const { $from } = editor.state.selection;
     item.command({ editor, range: { from: $from.pos, to: $from.pos } });
     setExpanded(false);
   };
-  return createPortal2(
+  return createPortal3(
     /* @__PURE__ */ jsxs5(
       "div",
       {
@@ -869,24 +946,126 @@ function EmptyLineToolbar() {
   );
 }
 
-// src/SelectionToolbar.tsx
-import { useCallback as useCallback2, useContext as useContext7, useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState9 } from "react";
+// src/LinkEditor.tsx
+import { useContext as useContext6, useEffect as useEffect8, useRef as useRef6, useState as useState8 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
+import { findLinkRange, removeLinkRange, saveLinkRange } from "@tessera-editor/core";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function LinkEditor() {
+  const { editor, t } = useContext6(TesseraContext);
+  const portalRoot = useTesseraPortalRoot(editor);
+  const [range, setRange] = useState8(null);
+  const [text, setText] = useState8("");
+  const [href, setHref] = useState8("");
+  const [style, setStyle] = useState8({});
+  const panelRef = useRef6(null);
+  useEffect8(() => {
+    const onClick = (e) => {
+      const target = e.target;
+      const anchor = target.closest("a[href]");
+      if (!anchor || !editor.view.dom.contains(target)) {
+        setRange(null);
+        return;
+      }
+      if (!editor.isEditable) {
+        const href2 = anchor.getAttribute("href");
+        if (href2) {
+          window.open(href2, "_blank", "noopener,noreferrer");
+        }
+        return;
+      }
+      const found = findLinkRange(editor, editor.view.posAtDOM(anchor, 0));
+      if (found) openPanel(found);
+    };
+    const dom = editor.view.dom;
+    dom.addEventListener("click", onClick);
+    return () => dom.removeEventListener("click", onClick);
+  }, [editor]);
+  useEffect8(() => {
+    if (!range) return;
+    const onDown = (e) => {
+      if (!panelRef.current?.contains(e.target)) setRange(null);
+    };
+    window.addEventListener("mousedown", onDown);
+    return () => window.removeEventListener("mousedown", onDown);
+  }, [range]);
+  function openPanel(found) {
+    setRange(found);
+    setText(found.text);
+    setHref(found.href);
+    const a = editor.view.coordsAtPos(found.from);
+    const b = editor.view.coordsAtPos(found.to);
+    const left = Math.min(Math.max(8, (a.left + b.left) / 2 - 160), window.innerWidth - 328);
+    const bottom = Math.max(a.bottom, b.bottom);
+    const panelMax = 170;
+    const flip = bottom + 8 + panelMax > window.innerHeight && a.top - 8 - panelMax >= 0;
+    setStyle(
+      flip ? { left: `${left}px`, bottom: `${window.innerHeight - Math.min(a.top, b.top) + 8}px` } : { left: `${left}px`, top: `${bottom + 8}px` }
+    );
+  }
+  function save() {
+    if (!range || !text.trim()) return;
+    saveLinkRange(editor, range, { text, href });
+    setRange(null);
+  }
+  function remove() {
+    if (!range) return;
+    removeLinkRange(editor, range);
+    setRange(null);
+  }
+  function onInputKeyDown(e) {
+    if (e.key === "Enter") save();
+    if (e.key === "Escape") setRange(null);
+  }
+  if (!range || !portalRoot) return null;
+  return createPortal4(
+    /* @__PURE__ */ jsxs6("div", { ref: panelRef, className: "tessera-link-editor", style, onMouseDown: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          autoFocus: true,
+          value: text,
+          placeholder: t("linkTextPlaceholder"),
+          onChange: (e) => setText(e.target.value),
+          onKeyDown: onInputKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          value: href,
+          placeholder: t("linkPlaceholder"),
+          onChange: (e) => setHref(e.target.value),
+          onKeyDown: onInputKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsxs6("div", { className: "tessera-link-editor-row", children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", disabled: !text.trim(), onClick: save, children: t("linkSave") }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "tessera-danger", onClick: remove, children: t("linkRemove") })
+      ] })
+    ] }),
+    portalRoot
+  );
+}
+
+// src/SelectionToolbar.tsx
+import { useCallback as useCallback2, useContext as useContext8, useEffect as useEffect10, useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState10 } from "react";
+import { createPortal as createPortal6 } from "react-dom";
 import { docToMarkdown } from "@tessera-editor/core";
 import { IMPROVE_PRESETS, improveSelection } from "@tessera-editor/ai";
 
 // src/CommentPanel.tsx
-import { useContext as useContext6, useEffect as useEffect7, useState as useState8 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
+import { useContext as useContext7, useEffect as useEffect9, useState as useState9 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
 import { getCommentStore, getIdentityService, listCommentRanges } from "@tessera-editor/core";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function uid(prefix) {
   return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
 }
 function CommentPanel() {
-  const { editor, t } = useContext6(TesseraContext);
-  const [visible, setVisible] = useState8(false);
-  const [threads, setThreads] = useState8([]);
+  const { editor, t } = useContext7(TesseraContext);
+  const [visible, setVisible] = useState9(false);
+  const [threads, setThreads] = useState9([]);
   const refresh = async () => {
     const store2 = getCommentStore(editor);
     if (!store2) {
@@ -904,7 +1083,7 @@ function CommentPanel() {
     views.sort((a, b) => a.from - b.from);
     setThreads(views);
   };
-  useEffect7(() => {
+  useEffect9(() => {
     const open = () => {
       setVisible(true);
       void refresh();
@@ -940,48 +1119,48 @@ function CommentPanel() {
     editor.commands.removeCommentThread(thread.id);
     await refresh();
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "tessera-comment-panel", "data-testid": "comment-panel", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "tessera-ask-header", children: [
-      /* @__PURE__ */ jsxs6("span", { children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "tessera-comment-panel", "data-testid": "comment-panel", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "tessera-ask-header", children: [
+      /* @__PURE__ */ jsxs7("span", { children: [
         t("commentTitle"),
         " \xB7 ",
         threads.filter((x) => !x.resolved).length
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "tessera-history-actions", children: [
-        /* @__PURE__ */ jsx7("button", { type: "button", title: "\u2191", onClick: () => editor.commands.focusNextCommentThread(), children: "\u2191" }),
-        /* @__PURE__ */ jsx7("button", { type: "button", title: "\u2193", onClick: () => editor.commands.focusNextCommentThread(), children: "\u2193" }),
-        /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => setVisible(false), children: "\xD7" })
+      /* @__PURE__ */ jsxs7("div", { className: "tessera-history-actions", children: [
+        /* @__PURE__ */ jsx8("button", { type: "button", title: "\u2191", onClick: () => editor.commands.focusNextCommentThread(), children: "\u2191" }),
+        /* @__PURE__ */ jsx8("button", { type: "button", title: "\u2193", onClick: () => editor.commands.focusNextCommentThread(), children: "\u2193" }),
+        /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => setVisible(false), children: "\xD7" })
       ] })
     ] }),
-    !store ? /* @__PURE__ */ jsx7("div", { className: "tessera-ask-error", children: "CommentStore not injected" }) : null,
-    /* @__PURE__ */ jsxs6("div", { className: "tessera-ask-body", children: [
-      threads.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "tessera-toc-empty", children: t("commentEmpty") }) : null,
-      threads.map((thread) => /* @__PURE__ */ jsxs6("div", { className: `tessera-thread${thread.resolved ? " tessera-thread--resolved" : ""}`, children: [
-        /* @__PURE__ */ jsxs6("div", { className: "tessera-thread-quote", children: [
+    !store ? /* @__PURE__ */ jsx8("div", { className: "tessera-ask-error", children: "CommentStore not injected" }) : null,
+    /* @__PURE__ */ jsxs7("div", { className: "tessera-ask-body", children: [
+      threads.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "tessera-toc-empty", children: t("commentEmpty") }) : null,
+      threads.map((thread) => /* @__PURE__ */ jsxs7("div", { className: `tessera-thread${thread.resolved ? " tessera-thread--resolved" : ""}`, children: [
+        /* @__PURE__ */ jsxs7("div", { className: "tessera-thread-quote", children: [
           "\u201C",
           thread.quote,
           "\u201D"
         ] }),
-        thread.entries.map((entry) => /* @__PURE__ */ jsxs6("div", { className: "tessera-thread-entry", children: [
-          /* @__PURE__ */ jsx7("span", { className: "tessera-thread-author", children: entry.authorName }),
-          /* @__PURE__ */ jsx7("span", { className: "tessera-thread-text", children: entry.text })
+        thread.entries.map((entry) => /* @__PURE__ */ jsxs7("div", { className: "tessera-thread-entry", children: [
+          /* @__PURE__ */ jsx8("span", { className: "tessera-thread-author", children: entry.authorName }),
+          /* @__PURE__ */ jsx8("span", { className: "tessera-thread-text", children: entry.text })
         ] }, entry.id)),
-        /* @__PURE__ */ jsxs6("div", { className: "tessera-thread-actions", children: [
-          /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => void toggleResolve(thread), children: thread.resolved ? t("commentReopen") : t("commentResolve") }),
-          /* @__PURE__ */ jsx7("button", { type: "button", className: "tessera-danger", onClick: () => void removeThread(thread), children: t("commentDelete") }),
-          thread.resolved ? /* @__PURE__ */ jsx7("span", { className: "tessera-thread-badge", children: t("commentResolvedBadge") }) : null
+        /* @__PURE__ */ jsxs7("div", { className: "tessera-thread-actions", children: [
+          /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void toggleResolve(thread), children: thread.resolved ? t("commentReopen") : t("commentResolve") }),
+          /* @__PURE__ */ jsx8("button", { type: "button", className: "tessera-danger", onClick: () => void removeThread(thread), children: t("commentDelete") }),
+          thread.resolved ? /* @__PURE__ */ jsx8("span", { className: "tessera-thread-badge", children: t("commentResolvedBadge") }) : null
         ] })
       ] }, thread.id))
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "tessera-comment-hint", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "tessera-comment-hint", children: [
       "\u2318\u2325M / \u{1F4AC} \xB7 ",
       me.name
     ] })
   ] });
 }
 function CommentComposer({ onClose }) {
-  const { editor, t } = useContext6(TesseraContext);
-  const [text, setText] = useState8("");
+  const { editor, t } = useContext7(TesseraContext);
+  const [text, setText] = useState9("");
   const portalRoot = useTesseraPortalRoot(editor);
   const quote = editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to, " ");
   const submit = async () => {
@@ -1009,15 +1188,15 @@ function CommentComposer({ onClose }) {
   if (!portalRoot) {
     return null;
   }
-  return createPortal3(
-    /* @__PURE__ */ jsxs6("div", { className: "tessera-popover tessera-comment-composer", "data-testid": "comment-composer", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "tessera-thread-quote", children: [
+  return createPortal5(
+    /* @__PURE__ */ jsxs7("div", { className: "tessera-popover tessera-comment-composer", "data-testid": "comment-composer", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "tessera-thread-quote", children: [
         "\u201C",
         quote.slice(0, 60),
         quote.length > 60 ? "\u2026" : "",
         "\u201D"
       ] }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "textarea",
         {
           autoFocus: true,
@@ -1032,14 +1211,14 @@ function CommentComposer({ onClose }) {
           }
         }
       ),
-      /* @__PURE__ */ jsx7("div", { className: "tessera-comment-composer-actions", children: /* @__PURE__ */ jsx7("button", { type: "button", disabled: !text.trim(), onClick: () => void submit(), children: t("commentSend") }) })
+      /* @__PURE__ */ jsx8("div", { className: "tessera-comment-composer-actions", children: /* @__PURE__ */ jsx8("button", { type: "button", disabled: !text.trim(), onClick: () => void submit(), children: t("commentSend") }) })
     ] }),
     portalRoot
   );
 }
 
 // src/SelectionToolbar.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var TEXT_COLORS = ["#262629", "#d9414f", "#e8912d", "#31a56f", "#2f9ea8", "#4f6df5", "#7a4fd8", "#98a0ab"];
 var HIGHLIGHT_COLORS = ["#fff2a8", "#d6eaff", "#d3f5df", "#fdd9e7", "#e6dcff"];
 function FlipPopover({
@@ -1048,9 +1227,9 @@ function FlipPopover({
   testId,
   children
 }) {
-  const ref = useRef5(null);
-  const [placement, setPlacement] = useState9("bottom");
-  const [maxHeight, setMaxHeight] = useState9(void 0);
+  const ref = useRef7(null);
+  const [placement, setPlacement] = useState10("bottom");
+  const [maxHeight, setMaxHeight] = useState10(void 0);
   useLayoutEffect2(() => {
     const pop = ref.current;
     const toolbar = pop?.parentElement;
@@ -1066,7 +1245,7 @@ function FlipPopover({
     const avail = (flip ? spaceAbove : spaceBelow) - 12;
     setMaxHeight(avail > 100 && avail < natural ? avail : void 0);
   }, [posKey]);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       ref,
@@ -1079,12 +1258,15 @@ function FlipPopover({
   );
 }
 function SelectionToolbar({ onSession }) {
-  const { editor, t, ai } = useContext7(TesseraContext);
-  const [style, setStyle] = useState9(null);
-  const [popover, setPopover] = useState9(null);
-  const [linkValue, setLinkValue] = useState9("");
-  const composingRef = useRef5(false);
+  const { editor, t, ai, extraSelectionItems } = useContext8(TesseraContext);
+  const [style, setStyle] = useState10(null);
+  const [popover, setPopover] = useState10(null);
+  const [linkValue, setLinkValue] = useState10("");
+  const composingRef = useRef7(false);
   const portalRoot = useTesseraPortalRoot(editor);
+  const services = editor.storage.tesseraServices;
+  const hasComments = !!services?.comments;
+  const hasCollapsible = editor.extensionManager.extensions.some((ext) => ext.name === "collapsible");
   const reposition = useCallback2(() => {
     if (composingRef.current || !editor.isFocused) {
       setStyle(null);
@@ -1109,7 +1291,7 @@ function SelectionToolbar({ onSession }) {
       left: `${Math.max(8, Math.min(left, window.innerWidth - 380))}px`
     });
   }, [editor]);
-  useEffect8(() => {
+  useEffect10(() => {
     const hide = () => {
       setStyle(null);
       setPopover(null);
@@ -1153,8 +1335,8 @@ function SelectionToolbar({ onSession }) {
     return null;
   }
   const currentColor = editor.getAttributes("textStyle").color ?? null;
-  return createPortal4(
-    /* @__PURE__ */ jsxs7(
+  return createPortal6(
+    /* @__PURE__ */ jsxs8(
       "div",
       {
         className: "tessera-selection-toolbar",
@@ -1162,16 +1344,16 @@ function SelectionToolbar({ onSession }) {
         "data-testid": "selection-toolbar",
         onMouseDown: (e) => e.preventDefault(),
         children: [
-          ai ? /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipImprove"), className: "tessera-tb-ai", onClick: () => setPopover((p) => p === "improve" ? null : "improve"), children: "\u2728" }) : null,
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipBold"), active: editor.isActive("bold"), onClick: () => chain().toggleBold().run(), children: /* @__PURE__ */ jsx8("b", { children: "B" }) }),
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipItalic"), active: editor.isActive("italic"), onClick: () => chain().toggleItalic().run(), children: /* @__PURE__ */ jsx8("i", { children: "I" }) }),
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipUnderline"), active: editor.isActive("underline"), onClick: () => chain().toggleUnderline().run(), children: /* @__PURE__ */ jsx8("u", { children: "U" }) }),
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipStrike"), active: editor.isActive("strike"), onClick: () => chain().toggleStrike().run(), children: /* @__PURE__ */ jsx8("s", { children: "S" }) }),
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipCode"), active: editor.isActive("code"), onClick: () => chain().toggleCode().run(), children: "</>" }),
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipColor"), active: !!currentColor, onClick: () => setPopover((p) => p === "color" ? null : "color"), children: /* @__PURE__ */ jsx8("span", { className: "tessera-tb-colorchip", style: { background: currentColor ?? "#262629" } }) }),
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipHighlight"), active: editor.isActive("highlight"), onClick: () => setPopover((p) => p === "highlight" ? null : "highlight"), children: /* @__PURE__ */ jsx8("span", { className: "tessera-tb-colorchip", style: { background: "#fff2a8" } }) }),
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipLink"), active: editor.isActive("link"), onClick: () => setPopover((p) => p === "link" ? null : "link"), children: "\u{1F517}" }),
-          /* @__PURE__ */ jsx8(
+          ai ? /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipImprove"), className: "tessera-tb-ai", onClick: () => setPopover((p) => p === "improve" ? null : "improve"), children: "\u2728" }) : null,
+          /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipBold"), active: editor.isActive("bold"), onClick: () => chain().toggleBold().run(), children: /* @__PURE__ */ jsx9("b", { children: "B" }) }),
+          /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipItalic"), active: editor.isActive("italic"), onClick: () => chain().toggleItalic().run(), children: /* @__PURE__ */ jsx9("i", { children: "I" }) }),
+          /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipUnderline"), active: editor.isActive("underline"), onClick: () => chain().toggleUnderline().run(), children: /* @__PURE__ */ jsx9("u", { children: "U" }) }),
+          /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipStrike"), active: editor.isActive("strike"), onClick: () => chain().toggleStrike().run(), children: /* @__PURE__ */ jsx9("s", { children: "S" }) }),
+          /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipCode"), active: editor.isActive("code"), onClick: () => chain().toggleCode().run(), children: "</>" }),
+          /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipColor"), active: !!currentColor, onClick: () => setPopover((p) => p === "color" ? null : "color"), children: /* @__PURE__ */ jsx9("span", { className: "tessera-tb-colorchip", style: { background: currentColor ?? "#262629" } }) }),
+          /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipHighlight"), active: editor.isActive("highlight"), onClick: () => setPopover((p) => p === "highlight" ? null : "highlight"), children: /* @__PURE__ */ jsx9("span", { className: "tessera-tb-colorchip", style: { background: "#fff2a8" } }) }),
+          /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipLink"), active: editor.isActive("link"), onClick: () => setPopover((p) => p === "link" ? null : "link"), children: "\u{1F517}" }),
+          hasComments ? /* @__PURE__ */ jsx9(
             TbBtn,
             {
               title: t("tooltipCommentV11"),
@@ -1179,19 +1361,20 @@ function SelectionToolbar({ onSession }) {
               onClick: () => setPopover((p) => p === "comment" ? null : "comment"),
               children: "\u{1F4AC}"
             }
-          ),
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipTurnCollapsible"), onClick: () => chain().insertCollapsible().run(), children: "\u25B8" }),
-          /* @__PURE__ */ jsx8(TbBtn, { title: t("tooltipMore"), onClick: () => setPopover((p) => p === "more" ? null : "more"), children: "\u22EF" }),
-          popover === "color" ? /* @__PURE__ */ jsxs7(FlipPopover, { posKey: style, children: [
-            /* @__PURE__ */ jsx8("button", { type: "button", className: "tessera-color-swatch tessera-color-none", title: t("colorDefault"), onClick: () => chain().unsetColor().run() }),
-            TEXT_COLORS.map((color) => /* @__PURE__ */ jsx8("button", { type: "button", className: "tessera-color-swatch", style: { background: color }, onClick: () => chain().setColor(color).run() }, color))
+          ) : null,
+          hasCollapsible ? /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipTurnCollapsible"), onClick: () => chain().insertCollapsible().run(), children: "\u25B8" }) : null,
+          /* @__PURE__ */ jsx9(TbBtn, { title: t("tooltipMore"), onClick: () => setPopover((p) => p === "more" ? null : "more"), children: "\u22EF" }),
+          typeof extraSelectionItems === "function" ? extraSelectionItems({ editor, t }) : extraSelectionItems,
+          popover === "color" ? /* @__PURE__ */ jsxs8(FlipPopover, { posKey: style, children: [
+            /* @__PURE__ */ jsx9("button", { type: "button", className: "tessera-color-swatch tessera-color-none", title: t("colorDefault"), onClick: () => chain().unsetColor().run() }),
+            TEXT_COLORS.map((color) => /* @__PURE__ */ jsx9("button", { type: "button", className: "tessera-color-swatch", style: { background: color }, onClick: () => chain().setColor(color).run() }, color))
           ] }) : null,
-          popover === "highlight" ? /* @__PURE__ */ jsxs7(FlipPopover, { posKey: style, children: [
-            /* @__PURE__ */ jsx8("button", { type: "button", className: "tessera-color-swatch tessera-color-none", title: t("highlightNone"), onClick: () => chain().unsetHighlight().run() }),
-            HIGHLIGHT_COLORS.map((color) => /* @__PURE__ */ jsx8("button", { type: "button", className: "tessera-color-swatch", style: { background: color }, onClick: () => chain().toggleHighlight({ color }).run() }, color))
+          popover === "highlight" ? /* @__PURE__ */ jsxs8(FlipPopover, { posKey: style, children: [
+            /* @__PURE__ */ jsx9("button", { type: "button", className: "tessera-color-swatch tessera-color-none", title: t("highlightNone"), onClick: () => chain().unsetHighlight().run() }),
+            HIGHLIGHT_COLORS.map((color) => /* @__PURE__ */ jsx9("button", { type: "button", className: "tessera-color-swatch", style: { background: color }, onClick: () => chain().toggleHighlight({ color }).run() }, color))
           ] }) : null,
-          popover === "link" ? /* @__PURE__ */ jsxs7(FlipPopover, { posKey: style, className: "tessera-link-popover", children: [
-            /* @__PURE__ */ jsx8(
+          popover === "link" ? /* @__PURE__ */ jsxs8(FlipPopover, { posKey: style, className: "tessera-link-popover", children: [
+            /* @__PURE__ */ jsx9(
               "input",
               {
                 autoFocus: true,
@@ -1206,7 +1389,7 @@ function SelectionToolbar({ onSession }) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1219,7 +1402,7 @@ function SelectionToolbar({ onSession }) {
                 children: t("linkApply")
               }
             ),
-            editor.isActive("link") ? /* @__PURE__ */ jsx8(
+            editor.isActive("link") ? /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1232,7 +1415,7 @@ function SelectionToolbar({ onSession }) {
               }
             ) : null
           ] }) : null,
-          popover === "more" ? /* @__PURE__ */ jsx8(FlipPopover, { posKey: style, className: "tessera-popover-menu", children: /* @__PURE__ */ jsx8(
+          popover === "more" ? /* @__PURE__ */ jsx9(FlipPopover, { posKey: style, className: "tessera-popover-menu", children: /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -1246,8 +1429,8 @@ function SelectionToolbar({ onSession }) {
               children: t("tooltipCopyMarkdown")
             }
           ) }) : null,
-          popover === "improve" ? /* @__PURE__ */ jsx8(ImprovePopover, { posKey: style, onSession, onClose: () => setPopover(null) }) : null,
-          popover === "comment" ? /* @__PURE__ */ jsx8(CommentComposer, { onClose: () => setPopover(null) }) : null
+          popover === "improve" ? /* @__PURE__ */ jsx9(ImprovePopover, { posKey: style, onSession, onClose: () => setPopover(null) }) : null,
+          popover === "comment" ? /* @__PURE__ */ jsx9(CommentComposer, { onClose: () => setPopover(null) }) : null
         ]
       }
     ),
@@ -1261,7 +1444,7 @@ function TbBtn({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
@@ -1279,10 +1462,10 @@ function ImprovePopover({
   onSession,
   onClose
 }) {
-  const { editor, t, locale, ai } = useContext7(TesseraContext);
-  const [instruction, setInstruction] = useState9("");
-  const [busy, setBusy] = useState9(false);
-  const [error, setError] = useState9(null);
+  const { editor, t, locale, ai } = useContext8(TesseraContext);
+  const [instruction, setInstruction] = useState10("");
+  const [busy, setBusy] = useState10(false);
+  const [error, setError] = useState10(null);
   const run = async (presetInstruction) => {
     if (!ai) {
       setError(t("aiRuntimeMissing"));
@@ -1299,10 +1482,10 @@ function ImprovePopover({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs7(FlipPopover, { posKey, className: "tessera-improve-popover", testId: "improve-popover", children: [
-    IMPROVE_PRESETS.map((preset) => /* @__PURE__ */ jsx8("button", { type: "button", disabled: busy, onClick: () => run(preset.instruction), children: locale === "zh-CN" ? preset.labelZh : preset.labelEn }, preset.id)),
-    /* @__PURE__ */ jsxs7("div", { className: "tessera-improve-custom", children: [
-      /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8(FlipPopover, { posKey, className: "tessera-improve-popover", testId: "improve-popover", children: [
+    IMPROVE_PRESETS.map((preset) => /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy, onClick: () => run(preset.instruction), children: locale === "zh-CN" ? preset.labelZh : preset.labelEn }, preset.id)),
+    /* @__PURE__ */ jsxs8("div", { className: "tessera-improve-custom", children: [
+      /* @__PURE__ */ jsx9(
         "input",
         {
           value: instruction,
@@ -1315,26 +1498,26 @@ function ImprovePopover({
           }
         }
       ),
-      /* @__PURE__ */ jsx8("button", { type: "button", disabled: busy || !instruction.trim(), onClick: () => run(instruction.trim()), children: t("aiImproveRun") })
+      /* @__PURE__ */ jsx9("button", { type: "button", disabled: busy || !instruction.trim(), onClick: () => run(instruction.trim()), children: t("aiImproveRun") })
     ] }),
-    error ? /* @__PURE__ */ jsx8("div", { className: "tessera-popover-error", children: error }) : null
+    error ? /* @__PURE__ */ jsx9("div", { className: "tessera-popover-error", children: error }) : null
   ] });
 }
 
 // src/Panels.tsx
-import { useContext as useContext8, useEffect as useEffect9, useRef as useRef6, useState as useState10 } from "react";
+import { useContext as useContext9, useEffect as useEffect11, useRef as useRef8, useState as useState11 } from "react";
 import { findReplaceKey } from "@tessera-editor/core";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function FindReplacePanel() {
-  const { editor, t } = useContext8(TesseraContext);
-  const [visible, setVisible] = useState10(false);
-  const [query, setQuery] = useState10("");
-  const [replacement, setReplacement] = useState10("");
-  const [count, setCount] = useState10(0);
-  const [active, setActive] = useState10(0);
-  const queryRef = useRef6(query);
+  const { editor, t } = useContext9(TesseraContext);
+  const [visible, setVisible] = useState11(false);
+  const [query, setQuery] = useState11("");
+  const [replacement, setReplacement] = useState11("");
+  const [count, setCount] = useState11(0);
+  const [active, setActive] = useState11(0);
+  const queryRef = useRef8(query);
   queryRef.current = query;
-  useEffect9(() => {
+  useEffect11(() => {
     const open = () => {
       setVisible(true);
       requestAnimationFrame(() => {
@@ -1368,8 +1551,8 @@ function FindReplacePanel() {
     setQuery(value);
     editor.commands.setFindQuery(value);
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "tessera-find-panel", "data-testid": "find-panel", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9("div", { className: "tessera-find-panel", "data-testid": "find-panel", children: [
+    /* @__PURE__ */ jsx10(
       "input",
       {
         className: "tessera-find-input",
@@ -1387,10 +1570,10 @@ function FindReplacePanel() {
         }
       }
     ),
-    /* @__PURE__ */ jsx9("span", { className: "tessera-find-count", children: count > 0 ? `${active + 1}/${count}` : "0" }),
-    /* @__PURE__ */ jsx9("button", { type: "button", title: t("findPrev"), onClick: () => editor.commands.findPrev(), children: "\u2191" }),
-    /* @__PURE__ */ jsx9("button", { type: "button", title: t("findNext"), onClick: () => editor.commands.findNext(), children: "\u2193" }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("span", { className: "tessera-find-count", children: count > 0 ? `${active + 1}/${count}` : "0" }),
+    /* @__PURE__ */ jsx10("button", { type: "button", title: t("findPrev"), onClick: () => editor.commands.findPrev(), children: "\u2191" }),
+    /* @__PURE__ */ jsx10("button", { type: "button", title: t("findNext"), onClick: () => editor.commands.findNext(), children: "\u2193" }),
+    /* @__PURE__ */ jsx10(
       "input",
       {
         value: replacement,
@@ -1398,19 +1581,19 @@ function FindReplacePanel() {
         onChange: (e) => setReplacement(e.target.value)
       }
     ),
-    /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => editor.commands.replaceCurrent(replacement), children: t("replaceOne") }),
-    /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => editor.commands.replaceAll(replacement), children: t("replaceAll") }),
-    /* @__PURE__ */ jsx9("button", { type: "button", className: "tessera-find-close", title: t("findClose"), onClick: () => editor.commands.closeFindPanel(), children: "\xD7" })
+    /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => editor.commands.replaceCurrent(replacement), children: t("replaceOne") }),
+    /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => editor.commands.replaceAll(replacement), children: t("replaceAll") }),
+    /* @__PURE__ */ jsx10("button", { type: "button", className: "tessera-find-close", title: t("findClose"), onClick: () => editor.commands.closeFindPanel(), children: "\xD7" })
   ] });
 }
 function AskPanel() {
-  const { editor, t, ai } = useContext8(TesseraContext);
-  const [visible, setVisible] = useState10(false);
-  const [question, setQuestion] = useState10("");
-  const [answer, setAnswer] = useState10("");
-  const [thinking, setThinking] = useState10(false);
-  const [error, setError] = useState10(null);
-  useEffect9(() => {
+  const { editor, t, ai } = useContext9(TesseraContext);
+  const [visible, setVisible] = useState11(false);
+  const [question, setQuestion] = useState11("");
+  const [answer, setAnswer] = useState11("");
+  const [thinking, setThinking] = useState11(false);
+  const [error, setError] = useState11(null);
+  useEffect11(() => {
     const open = () => setVisible(true);
     editor.on("tessera:askPanel", open);
     return () => {
@@ -1435,19 +1618,19 @@ function AskPanel() {
       setThinking(false);
     }
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "tessera-ask-panel", "data-testid": "ask-panel", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "tessera-ask-header", children: [
-      /* @__PURE__ */ jsx9("span", { children: t("aiTitle") }),
-      /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => setVisible(false), children: "\xD7" })
+  return /* @__PURE__ */ jsxs9("div", { className: "tessera-ask-panel", "data-testid": "ask-panel", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "tessera-ask-header", children: [
+      /* @__PURE__ */ jsx10("span", { children: t("aiTitle") }),
+      /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => setVisible(false), children: "\xD7" })
     ] }),
-    ai ? null : /* @__PURE__ */ jsx9("div", { className: "tessera-ask-error", children: t("aiRuntimeMissing") }),
-    /* @__PURE__ */ jsxs8("div", { className: "tessera-ask-body", children: [
-      answer ? /* @__PURE__ */ jsx9("div", { className: "tessera-ask-answer", children: answer }) : null,
-      thinking ? /* @__PURE__ */ jsx9("div", { className: "tessera-ask-thinking", children: t("aiThinking") }) : null,
-      error ? /* @__PURE__ */ jsx9("div", { className: "tessera-ask-error", children: error }) : null
+    ai ? null : /* @__PURE__ */ jsx10("div", { className: "tessera-ask-error", children: t("aiRuntimeMissing") }),
+    /* @__PURE__ */ jsxs9("div", { className: "tessera-ask-body", children: [
+      answer ? /* @__PURE__ */ jsx10("div", { className: "tessera-ask-answer", children: answer }) : null,
+      thinking ? /* @__PURE__ */ jsx10("div", { className: "tessera-ask-thinking", children: t("aiThinking") }) : null,
+      error ? /* @__PURE__ */ jsx10("div", { className: "tessera-ask-error", children: error }) : null
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "tessera-ask-input", children: [
-      /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs9("div", { className: "tessera-ask-input", children: [
+      /* @__PURE__ */ jsx10(
         "input",
         {
           value: question,
@@ -1460,7 +1643,7 @@ function AskPanel() {
           }
         }
       ),
-      /* @__PURE__ */ jsx9("button", { type: "button", disabled: !ai || thinking || !question.trim(), onClick: ask, children: t("aiSend") })
+      /* @__PURE__ */ jsx10("button", { type: "button", disabled: !ai || thinking || !question.trim(), onClick: ask, children: t("aiSend") })
     ] })
   ] });
 }
@@ -1468,16 +1651,16 @@ function SuggestionBar({
   session,
   onClear
 }) {
-  const { t } = useContext8(TesseraContext);
+  const { t } = useContext9(TesseraContext);
   if (!session) {
     return null;
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "tessera-suggestion-bar", "data-testid": "suggestion-bar", children: [
-    /* @__PURE__ */ jsxs8("span", { className: "tessera-suggestion-label", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "tessera-suggestion-bar", "data-testid": "suggestion-bar", children: [
+    /* @__PURE__ */ jsxs9("span", { className: "tessera-suggestion-label", children: [
       "\u2728 ",
       t("aiStreaming")
     ] }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1489,7 +1672,7 @@ function SuggestionBar({
         children: t("aiAccept")
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1504,152 +1687,16 @@ function SuggestionBar({
   ] });
 }
 
-// src/HistoryPanel.tsx
-import { useContext as useContext9, useEffect as useEffect10, useState as useState11 } from "react";
-import {
-  diffDocs,
-  diffSummary,
-  getStorageService
-} from "@tessera-editor/core";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-function HistoryPanel() {
-  const { editor, t } = useContext9(TesseraContext);
-  const [visible, setVisible] = useState11(false);
-  const [snapshots, setSnapshots] = useState11([]);
-  const [selected, setSelected] = useState11(null);
-  const [entries, setEntries] = useState11(null);
-  const [summary, setSummary] = useState11({ added: 0, removed: 0, changed: 0 });
-  const refresh = async () => {
-    const storage = getStorageService(editor);
-    if (!storage) {
-      return;
-    }
-    const list = await storage.listSnapshots();
-    setSnapshots([...list].sort((a, b) => b.ts - a.ts));
-  };
-  useEffect10(() => {
-    const open = () => {
-      setVisible(true);
-      void refresh();
-    };
-    editor.on("tessera:historyPanel", open);
-    const saved = () => void refresh();
-    editor.on("tessera:snapshotSaved", saved);
-    return () => {
-      editor.off("tessera:historyPanel", open);
-      editor.off("tessera:snapshotSaved", saved);
-    };
-  }, [editor]);
-  if (!visible) {
-    return null;
-  }
-  const hasStorage = !!getStorageService(editor);
-  const select = (snap) => {
-    setSelected(snap);
-    const result = diffDocs(snap.doc, editor.getJSON());
-    setEntries(result);
-    setSummary(diffSummary(result.filter((e) => e.kind !== "unchanged")));
-  };
-  const restore = (snap) => {
-    if (!window.confirm(t("historyConfirmRestore"))) {
-      return;
-    }
-    editor.commands.setContent(snap.doc);
-    setVisible(false);
-  };
-  return /* @__PURE__ */ jsxs9("div", { className: "tessera-history-panel", "data-testid": "history-panel", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "tessera-ask-header", children: [
-      /* @__PURE__ */ jsx10("span", { children: t("historyTitle") }),
-      /* @__PURE__ */ jsxs9("div", { className: "tessera-history-actions", children: [
-        hasStorage ? /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => editor.commands.captureSnapshot(), children: t("historyCapture") }) : null,
-        /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => setVisible(false), children: "\xD7" })
-      ] })
-    ] }),
-    !hasStorage ? /* @__PURE__ */ jsx10("div", { className: "tessera-ask-error", children: t("aiRuntimeMissing").replace("AI Runtime", "StorageService") }) : null,
-    /* @__PURE__ */ jsxs9("div", { className: "tessera-history-body", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "tessera-history-list", children: [
-        snapshots.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "tessera-toc-empty", children: t("historyEmpty") }) : null,
-        snapshots.map((snap) => /* @__PURE__ */ jsxs9(
-          "button",
-          {
-            type: "button",
-            className: "tessera-history-item",
-            "data-selected": selected?.id === snap.id,
-            onClick: () => select(snap),
-            children: [
-              /* @__PURE__ */ jsx10("span", { className: "tessera-history-time", children: formatTime(snap.ts) }),
-              snap.label ? /* @__PURE__ */ jsx10("span", { className: "tessera-history-label", children: snap.label }) : null,
-              /* @__PURE__ */ jsx10(
-                "span",
-                {
-                  className: "tessera-history-action",
-                  role: "button",
-                  tabIndex: 0,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    restore(snap);
-                  },
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") restore(snap);
-                  },
-                  children: t("historyRestore")
-                }
-              )
-            ]
-          },
-          snap.id
-        ))
-      ] }),
-      selected ? /* @__PURE__ */ jsxs9("div", { className: "tessera-history-diff", children: [
-        /* @__PURE__ */ jsxs9("div", { className: "tessera-diff-summary", children: [
-          "+",
-          summary.added,
-          " ",
-          t("historyDiffAdded"),
-          " \xB7 \u2212",
-          summary.removed,
-          " ",
-          t("historyDiffRemoved"),
-          " \xB7 ~",
-          summary.changed,
-          " ",
-          t("historyDiffChanged")
-        ] }),
-        (entries ?? []).filter((e) => e.kind !== "unchanged").slice(0, 80).map((entry, i) => /* @__PURE__ */ jsxs9("div", { className: `tessera-diff-block tessera-diff-block--${entry.kind}`, children: [
-          /* @__PURE__ */ jsx10("span", { className: "tessera-diff-badge", children: entry.kind === "added" ? t("historyDiffAdded") : entry.kind === "removed" ? t("historyDiffRemoved") : t("historyDiffChanged") }),
-          entry.kind === "changed" && entry.wordDiff ? /* @__PURE__ */ jsx10("span", { className: "tessera-diff-text", children: entry.wordDiff.map((part, j) => /* @__PURE__ */ jsx10("span", { className: `tessera-diff-part tessera-diff-part--${part.type}`, children: part.text }, j)) }) : /* @__PURE__ */ jsx10("span", { className: "tessera-diff-text", children: blockText(entry) })
-        ] }, entry.id ?? i))
-      ] }) : null
-    ] })
-  ] });
-}
-function blockText(entry) {
-  const json = entry.after ?? entry.before;
-  const walk = (node) => {
-    if (!node || typeof node !== "object") {
-      return "";
-    }
-    const n = node;
-    return (n.text ?? "") + (n.content ?? []).map(walk).join("");
-  };
-  return walk(json).trim().slice(0, 120);
-}
-function formatTime(ts) {
-  const d = new Date(ts);
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
 // src/BlockMenu.tsx
-import { useContext as useContext10, useEffect as useEffect11, useState as useState12 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
+import { useContext as useContext10, useEffect as useEffect12, useState as useState12 } from "react";
+import { createPortal as createPortal7 } from "react-dom";
 import { tableToCsvAt as tableToCsvAt2 } from "@tessera-editor/core";
 import { Fragment, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function BlockContextMenuUI() {
   const { editor, t } = useContext10(TesseraContext);
   const [menu, setMenu] = useState12(null);
   const portalRoot = useTesseraPortalRoot(editor);
-  useEffect11(() => {
+  useEffect12(() => {
     const onMenu = (payload) => {
       const found = findBlockPosById(editor, payload.blockId);
       if (found !== null) {
@@ -1680,7 +1727,7 @@ function BlockContextMenuUI() {
     void navigator.clipboard.writeText(text);
     setMenu(null);
   };
-  return createPortal5(
+  return createPortal7(
     /* @__PURE__ */ jsxs10("div", { className: "tessera-block-menu", style, onMouseDown: (e) => e.stopPropagation(), children: [
       inTable ? /* @__PURE__ */ jsxs10(Fragment, { children: [
         /* @__PURE__ */ jsx11(MenuLabel, { children: t("rowMenuTitle") }),
@@ -1764,33 +1811,47 @@ var DRAG_HANDLE_POSITION_CONFIG = { placement: "left", strategy: "absolute" };
 function Tessera({
   content,
   locale = "zh-CN",
+  placeholder,
+  messages,
+  editable = true,
+  excludeBlocks,
   upload,
-  storage,
   comments,
   identity,
   ai: runtime,
-  historyIdleMs,
   docWidth,
+  extraSelectionItems,
   onUpdate,
   onCreate
 }) {
-  const t = useMemo(() => createTesseraT(locale), [locale]);
   const [session, setSession] = useState13(null);
-  const fileInputRef = useRef7(null);
-  const dragNodeRef = useRef7(null);
+  const fileInputRef = useRef9(null);
+  const dragNodeRef = useRef9(null);
   const handleDragNodeChange = useCallback3((data) => {
     dragNodeRef.current = data.node ? data : null;
   }, []);
-  const onUpdateRef = useRef7(onUpdate);
+  const onUpdateRef = useRef9(onUpdate);
   onUpdateRef.current = onUpdate;
-  const onCreateRef = useRef7(onCreate);
+  const onCreateRef = useRef9(onCreate);
   onCreateRef.current = onCreate;
-  const runtimeRef = useRef7(runtime);
+  const runtimeRef = useRef9(runtime);
   runtimeRef.current = runtime;
-  const initialContentRef = useRef7(content);
-  const editorRef = useRef7(null);
+  const placeholderRef = useRef9(placeholder);
+  placeholderRef.current = placeholder;
+  const messagesRef = useRef9(messages);
+  messagesRef.current = messages;
+  const excludeBlocksRef = useRef9(excludeBlocks);
+  excludeBlocksRef.current = excludeBlocks;
+  const initialContentRef = useRef9(content);
+  const editorRef = useRef9(null);
+  const t = useMemo(() => createTesseraT(locale, messagesRef.current), [locale]);
   const extensions = useMemo(
-    () => createTesseraExtensions({ locale, historyIdleMs }).map((ext) => {
+    () => createTesseraExtensions({
+      locale,
+      placeholder: placeholderRef.current,
+      messages: messagesRef.current,
+      excludeBlocks: excludeBlocksRef.current
+    }).map((ext) => {
       if (ext.name === "tesseraSlashMenu") {
         return ext.configure({
           render: createSlashRenderer(t),
@@ -1823,15 +1884,15 @@ function Tessera({
     // runtime is read through runtimeRef on purpose: rebuilding the extension
     // list after mount cannot apply anyway (extensions are only read when the
     // editor is created) and would only trigger the setOptions churn above
-    [locale, t, historyIdleMs]
+    [locale, t]
   );
   async function uploadAndInsert(file) {
     const ed = editorRef.current;
     if (!ed) {
       return;
     }
-    const storage2 = ed.storage;
-    const svc = storage2.tesseraServices?.upload;
+    const storage = ed.storage;
+    const svc = storage.tesseraServices?.upload;
     if (!svc) {
       return;
     }
@@ -1842,7 +1903,7 @@ function Tessera({
       console.error("[Tessera] image upload failed:", err);
     }
   }
-  const uploadAndInsertRef = useRef7(uploadAndInsert);
+  const uploadAndInsertRef = useRef9(uploadAndInsert);
   uploadAndInsertRef.current = uploadAndInsert;
   const editorProps = useMemo(
     () => ({
@@ -1874,28 +1935,36 @@ function Tessera({
     []
   );
   const handleUpdate = useCallback3(({ editor: e }) => onUpdateRef.current?.(e), []);
-  const handleCreate = useCallback3(({ editor: e }) => onCreateRef.current?.(e), []);
+  const handleCreate = useCallback3(({ editor: e }) => {
+    e.commands.normalizeTypedCells();
+    onCreateRef.current?.(e);
+  }, []);
   const editor = useEditor({
     extensions,
     content: initialContentRef.current,
+    editable,
     onUpdate: handleUpdate,
     onCreate: handleCreate,
     editorProps
   });
   editorRef.current = editor ?? null;
-  useEffect12(() => {
+  useEffect13(() => {
     if (editor) {
       const bag = editor.storage.tesseraServices ?? {};
       editor.storage.tesseraServices = {
         ...bag,
         upload,
-        storage,
         comments,
         identity
       };
     }
-  }, [editor, upload, storage, comments, identity]);
-  useEffect12(() => {
+  }, [editor, upload, comments, identity]);
+  useEffect13(() => {
+    if (editor) {
+      editor.setEditable(editable);
+    }
+  }, [editor, editable]);
+  useEffect13(() => {
     if (!editor) {
       return;
     }
@@ -1915,10 +1984,11 @@ function Tessera({
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ jsx12(TesseraContext.Provider, { value: { editor, locale, t, ai }, children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx12(TesseraContext.Provider, { value: { editor, locale, t, ai, extraSelectionItems }, children: /* @__PURE__ */ jsxs11(
     "div",
     {
       className: "tessera-root",
+      "data-readonly": editable ? void 0 : "true",
       style: { "--te-doc-max-width": docWidth ? `${docWidth}px` : void 0 },
       children: [
         /* @__PURE__ */ jsx12(EditorContent, { editor }),
@@ -1956,9 +2026,9 @@ function Tessera({
         ),
         /* @__PURE__ */ jsx12(EmptyLineToolbar, {}),
         /* @__PURE__ */ jsx12(SelectionToolbar, { onSession: setSession }),
+        /* @__PURE__ */ jsx12(LinkEditor, {}),
         /* @__PURE__ */ jsx12(FindReplacePanel, {}),
         /* @__PURE__ */ jsx12(AskPanel, {}),
-        /* @__PURE__ */ jsx12(HistoryPanel, {}),
         /* @__PURE__ */ jsx12(CommentPanel, {}),
         /* @__PURE__ */ jsx12(BlockContextMenuUI, {}),
         /* @__PURE__ */ jsx12(SuggestionBar, { session, onClear: () => setSession(null) }),
@@ -1992,7 +2062,6 @@ export {
   EmbedBlockView,
   EmptyLineToolbar,
   FindReplacePanel,
-  HistoryPanel,
   ImageBlockView,
   SelectionToolbar,
   SlashMenuView,