@sofereditor/react 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -27,6 +27,7 @@ __export(index_exports, {
   LinkDialog: () => LinkDialog,
   NodeView: () => NodeView,
   PageConfigDialog: () => PageConfigDialog,
+  RemoteCursorsOverlay: () => RemoteCursorsOverlay,
   Toolbar: () => Toolbar,
   applyDomSelection: () => applyDomSelection,
   contentHeight: () => contentHeight,
@@ -38,6 +39,7 @@ __export(index_exports, {
   getCellElement: () => getCellElement,
   getFragmentForOffset: () => getFragmentForOffset,
   isTableRectSelection: () => isTableRectSelection,
+  locatePoint: () => locatePoint,
   readDomSelection: () => readDomSelection,
   renderInline: () => renderInline,
   selectionsEqual: () => selectionsEqual,
@@ -51,8 +53,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Editor.tsx
-var import_react12 = require("react");
-var import_core5 = require("@sofereditor/core");
+var import_react14 = require("react");
+var import_core6 = require("@sofereditor/core");
 
 // src/dom-bridge.ts
 function findContainingBlockElement(node, root) {
@@ -252,6 +254,7 @@ function locatePoint(root, pos) {
   let remaining = Math.max(0, pos.offset - containerStart);
   let result = null;
   let lastImg = null;
+  let lastText = null;
   function visit(n) {
     if (result) return;
     if (n.nodeType === Node.TEXT_NODE) {
@@ -262,6 +265,7 @@ function locatePoint(root, pos) {
       }
       remaining -= len;
       lastImg = null;
+      lastText = n;
       return;
     }
     if (n.nodeType !== Node.ELEMENT_NODE) return;
@@ -291,6 +295,10 @@ function locatePoint(root, pos) {
     const parent = lastImg.parentNode;
     if (parent) return { node: parent, offset: indexInParent(lastImg) + 1 };
   }
+  if (lastText) {
+    const t = lastText;
+    return { node: t, offset: (t.textContent ?? "").length };
+  }
   return { node: container, offset: 0 };
 }
 function selectionsEqual(a, b) {
@@ -311,6 +319,9 @@ function applyDomSelection(root, modelSel) {
   const anchorPt = locatePoint(root, modelSel.anchor);
   const focusPt = locatePoint(root, modelSel.focus);
   if (!anchorPt || !focusPt) return;
+  if (domSel.anchorNode === anchorPt.node && domSel.anchorOffset === anchorPt.offset && domSel.focusNode === focusPt.node && domSel.focusOffset === focusPt.offset) {
+    return;
+  }
   try {
     domSel.removeAllRanges();
     domSel.setBaseAndExtent(anchorPt.node, anchorPt.offset, focusPt.node, focusPt.offset);
@@ -318,18 +329,253 @@ function applyDomSelection(root, modelSel) {
   }
 }
 
+// src/BehindImageSelectAffordance.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ACCENT = "#3b82f6";
+function BehindImageSelectAffordance({
+  blockIndex,
+  offset,
+  cellIndex,
+  rootRef,
+  onSelect
+}) {
+  const [rect, setRect] = (0, import_react.useState)(null);
+  const locateImage = (0, import_react.useCallback)(() => {
+    const root = rootRef.current;
+    if (!root) return null;
+    let container = null;
+    if (cellIndex != null) {
+      container = root.querySelector(
+        `[data-block-index="${blockIndex}"] [data-cell-index="${cellIndex}"]`
+      );
+    } else {
+      container = getFragmentForOffset(root, blockIndex, offset);
+    }
+    if (!container) return null;
+    const fragmentStart = container.dataset.fragmentStart ? Number.parseInt(container.dataset.fragmentStart, 10) || 0 : 0;
+    const localOffset = offset - fragmentStart;
+    return container.querySelector(
+      `img[data-embed="image"][data-embed-offset="${localOffset}"]`
+    );
+  }, [rootRef, blockIndex, offset, cellIndex]);
+  const measure = (0, import_react.useCallback)(() => {
+    const img = locateImage();
+    const root = rootRef.current;
+    if (!img || !root) {
+      setRect((prev) => prev === null ? prev : null);
+      return;
+    }
+    const r = img.getBoundingClientRect();
+    const rr = root.getBoundingClientRect();
+    const next = {
+      top: r.top - rr.top + root.scrollTop,
+      left: r.left - rr.left + root.scrollLeft,
+      width: r.width,
+      height: r.height
+    };
+    setRect(
+      (prev) => prev && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
+    );
+  }, [locateImage, rootRef]);
+  (0, import_react.useLayoutEffect)(() => {
+    measure();
+    let cancelled = false;
+    const remeasure = () => {
+      if (!cancelled) measure();
+    };
+    const id = typeof requestAnimationFrame === "function" ? requestAnimationFrame(remeasure) : (queueMicrotask(remeasure), 0);
+    return () => {
+      cancelled = true;
+      if (typeof cancelAnimationFrame === "function" && typeof id === "number" && id > 0) {
+        cancelAnimationFrame(id);
+      }
+    };
+  }, [measure]);
+  (0, import_react.useEffect)(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const onScroll = () => measure();
+    window.addEventListener("resize", onScroll);
+    root.addEventListener("scroll", onScroll);
+    return () => {
+      window.removeEventListener("resize", onScroll);
+      root.removeEventListener("scroll", onScroll);
+    };
+  }, [measure, rootRef]);
+  if (!rect) return null;
+  const outlineStyle = {
+    position: "absolute",
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+    border: `1.5px dashed ${ACCENT}`,
+    borderRadius: 2,
+    boxSizing: "border-box",
+    pointerEvents: "none",
+    zIndex: 4
+  };
+  const badgeStyle = {
+    position: "absolute",
+    top: rect.top - 2,
+    left: rect.left - 2,
+    width: 24,
+    height: 24,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: ACCENT,
+    color: "#fff",
+    borderRadius: 4,
+    cursor: "pointer",
+    pointerEvents: "auto",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+    zIndex: 5
+  };
+  const onBadgeDown = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onSelect();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: outlineStyle, contentEditable: false, "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: badgeStyle,
+        contentEditable: false,
+        onPointerDown: onBadgeDown,
+        role: "button",
+        "aria-label": "Selecionar imagem",
+        title: "Selecionar imagem",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20" })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/LinkHoverTooltip.tsx
+var import_react_dom = require("react-dom");
+
+// src/platform.ts
+var IS_MAC = (() => {
+  if (typeof navigator === "undefined") return false;
+  const platform = navigator.userAgentData?.platform || navigator.platform || navigator.userAgent || "";
+  return /mac|iphone|ipad|ipod/i.test(platform);
+})();
+var MOD_SYMBOL = IS_MAC ? "\u2318" : "\u2303";
+function hasOpenModifier(e) {
+  return IS_MAC ? e.metaKey : e.ctrlKey;
+}
+
+// src/LinkHoverTooltip.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MAX_WIDTH = 360;
+var GAP = 6;
+function LinkHoverTooltip({ href, rect }) {
+  const above = rect.top > 48;
+  const viewportW = typeof window !== "undefined" ? window.innerWidth : MAX_WIDTH + 16;
+  const left = Math.max(8, Math.min(rect.left, viewportW - MAX_WIDTH - 8));
+  const style = {
+    position: "fixed",
+    left,
+    top: above ? rect.top - GAP : rect.bottom + GAP,
+    transform: above ? "translateY(-100%)" : void 0,
+    maxWidth: MAX_WIDTH,
+    background: "#1f2937",
+    color: "#fff",
+    fontSize: 12,
+    lineHeight: 1.4,
+    padding: "6px 9px",
+    borderRadius: 6,
+    boxShadow: "0 4px 14px rgba(0,0,0,0.28)",
+    zIndex: 60,
+    pointerEvents: "none"
+  };
+  const urlStyle = {
+    display: "block",
+    maxWidth: MAX_WIDTH - 18,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontWeight: 600
+  };
+  const hintStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    marginTop: 3,
+    fontSize: 11,
+    opacity: 0.85
+  };
+  const keycapStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 16,
+    height: 16,
+    padding: "0 4px",
+    fontSize: 11,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    background: "rgba(255,255,255,0.16)",
+    border: "1px solid rgba(255,255,255,0.4)",
+    borderRadius: 4,
+    boxShadow: "inset 0 -1px 0 rgba(0,0,0,0.25)"
+  };
+  if (typeof document === "undefined") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style, contentEditable: false, "aria-hidden": true, role: "tooltip", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: urlStyle, children: href }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: hintStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { style: keycapStyle, children: MOD_SYMBOL }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { opacity: 0.8 }, children: "+ clique para abrir" })
+      ] })
+    ] }),
+    document.body
+  );
+}
+
 // src/EditorContext.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/LinkDialog.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_react2 = require("react");
+
+// src/dialogCenterStyle.ts
+var DIALOG_CENTER_STYLE = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  margin: 0,
+  maxHeight: "90vh",
+  overflow: "auto"
+};
+
+// src/LinkDialog.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function LinkDialog() {
   const { linkRequest, resolveLinkRequest } = useEditorContext();
-  const dialogRef = (0, import_react.useRef)(null);
-  const inputRef = (0, import_react.useRef)(null);
-  const [href, setHref] = (0, import_react.useState)("");
-  (0, import_react.useEffect)(() => {
+  const dialogRef = (0, import_react2.useRef)(null);
+  const inputRef = (0, import_react2.useRef)(null);
+  const [href, setHref] = (0, import_react2.useState)("");
+  (0, import_react2.useEffect)(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (linkRequest) {
@@ -357,20 +603,21 @@ function LinkDialog() {
   const onCancel = () => {
     resolveLinkRequest(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "dialog",
     {
       ref: dialogRef,
       className: "ed-link-dialog",
+      style: DIALOG_CENTER_STYLE,
       onClose: onCancel,
       onCancel: (e) => {
         e.preventDefault();
         onCancel();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit, className: "ed-link-dialog-form", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ed-link-dialog-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "ed-link-href", children: "URL" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit, className: "ed-link-dialog-form", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ed-link-dialog-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: "ed-link-href", children: "URL" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "input",
             {
               id: "ed-link-href",
@@ -384,11 +631,11 @@ function LinkDialog() {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ed-link-dialog-actions", children: [
-          linkRequest.initialHref ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: onRemove, className: "ed-link-dialog-remove", children: "Remover link" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ed-link-dialog-confirm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", className: "ed-link-dialog-apply", children: "Aplicar" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ed-link-dialog-actions", children: [
+          linkRequest.initialHref ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: onRemove, className: "ed-link-dialog-remove", children: "Remover link" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ed-link-dialog-confirm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: "ed-link-dialog-apply", children: "Aplicar" })
           ] })
         ] })
       ] })
@@ -397,21 +644,21 @@ function LinkDialog() {
 }
 
 // src/PageConfigDialog.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_core = require("@sofereditor/core");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function PageConfigDialog() {
   const { pageConfigRequest, resolvePageConfigRequest, setPageSettings } = useEditorContext();
-  const dialogRef = (0, import_react2.useRef)(null);
-  const [sizePreset, setSizePreset] = (0, import_react2.useState)("a4");
-  const [widthMm, setWidthMm] = (0, import_react2.useState)(210);
-  const [heightMm, setHeightMm] = (0, import_react2.useState)(297);
-  const [marginPreset, setMarginPreset] = (0, import_react2.useState)("normal");
-  const [marginTopMm, setMarginTopMm] = (0, import_react2.useState)(25.4);
-  const [marginBottomMm, setMarginBottomMm] = (0, import_react2.useState)(25.4);
-  const [marginLeftMm, setMarginLeftMm] = (0, import_react2.useState)(25.4);
-  const [marginRightMm, setMarginRightMm] = (0, import_react2.useState)(25.4);
-  (0, import_react2.useEffect)(() => {
+  const dialogRef = (0, import_react3.useRef)(null);
+  const [sizePreset, setSizePreset] = (0, import_react3.useState)("a4");
+  const [widthMm, setWidthMm] = (0, import_react3.useState)(210);
+  const [heightMm, setHeightMm] = (0, import_react3.useState)(297);
+  const [marginPreset, setMarginPreset] = (0, import_react3.useState)("normal");
+  const [marginTopMm, setMarginTopMm] = (0, import_react3.useState)(25.4);
+  const [marginBottomMm, setMarginBottomMm] = (0, import_react3.useState)(25.4);
+  const [marginLeftMm, setMarginLeftMm] = (0, import_react3.useState)(25.4);
+  const [marginRightMm, setMarginRightMm] = (0, import_react3.useState)(25.4);
+  (0, import_react3.useEffect)(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (pageConfigRequest) {
@@ -430,13 +677,13 @@ function PageConfigDialog() {
       dialog.close();
     }
   }, [pageConfigRequest]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (sizePreset === "custom") return;
     const p = import_core.PAGE_PRESETS[sizePreset];
     setWidthMm(roundMm((0, import_core.pxToMm)(p.width)));
     setHeightMm(roundMm((0, import_core.pxToMm)(p.height)));
   }, [sizePreset]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (marginPreset === "custom") return;
     const px = import_core.MARGIN_PRESETS[marginPreset];
     const mm = roundMm((0, import_core.pxToMm)(px));
@@ -446,7 +693,7 @@ function PageConfigDialog() {
     setMarginRightMm(mm);
   }, [marginPreset]);
   const customWidth = sizePreset === "custom";
-  const previewPx = (0, import_react2.useMemo)(
+  const previewPx = (0, import_react3.useMemo)(
     () => ({
       width: Math.round((0, import_core.mmToPx)(widthMm)),
       height: Math.round((0, import_core.mmToPx)(heightMm))
@@ -468,23 +715,24 @@ function PageConfigDialog() {
     resolvePageConfigRequest(true);
   };
   const onCancel = () => resolvePageConfigRequest(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "dialog",
     {
       ref: dialogRef,
       className: "ed-page-config-dialog",
+      style: DIALOG_CENTER_STYLE,
       onClose: onCancel,
       onCancel: (e) => {
         e.preventDefault();
         onCancel();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: onApply, className: "ed-page-config-form", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: "Configurar p\xE1gina" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("fieldset", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("legend", { children: "Tamanho" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ed-page-config-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit: onApply, className: "ed-page-config-form", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: "Configurar p\xE1gina" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("fieldset", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("legend", { children: "Tamanho" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ed-page-config-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -496,8 +744,8 @@ function PageConfigDialog() {
               " ",
               "A4 (210 \xD7 297 mm)"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -509,8 +757,8 @@ function PageConfigDialog() {
               " ",
               "Carta (216 \xD7 279 mm)"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -522,8 +770,8 @@ function PageConfigDialog() {
               " ",
               "Of\xEDcio (216 \xD7 330 mm)"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -536,11 +784,11 @@ function PageConfigDialog() {
               "Personalizado"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ed-page-config-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ed-page-config-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
               "Largura (mm)",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "number",
@@ -553,10 +801,10 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
               "Altura (mm)",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "number",
@@ -569,7 +817,7 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "ed-page-config-preview", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "ed-page-config-preview", children: [
               previewPx.width,
               " \xD7 ",
               previewPx.height,
@@ -577,11 +825,11 @@ function PageConfigDialog() {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("fieldset", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("legend", { children: "Margens" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ed-page-config-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("fieldset", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("legend", { children: "Margens" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ed-page-config-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -593,8 +841,8 @@ function PageConfigDialog() {
               " ",
               "Normal (25,4 mm)"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -606,8 +854,8 @@ function PageConfigDialog() {
               " ",
               "Estreita (12,7 mm)"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -619,8 +867,8 @@ function PageConfigDialog() {
               " ",
               "Larga (50,8 mm)"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "radio",
@@ -633,11 +881,11 @@ function PageConfigDialog() {
               "Personalizada"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ed-page-config-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ed-page-config-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
               "Topo",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "number",
@@ -652,10 +900,10 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
               "Inferior",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "number",
@@ -670,10 +918,10 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
               "Esquerda",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "number",
@@ -688,10 +936,10 @@ function PageConfigDialog() {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { children: [
               "Direita",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   type: "number",
@@ -708,9 +956,9 @@ function PageConfigDialog() {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ed-page-config-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "submit", className: "ed-page-config-apply", children: "Aplicar" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ed-page-config-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "ed-page-config-apply", children: "Aplicar" })
         ] })
       ] })
     }
@@ -745,15 +993,15 @@ function detectMarginPreset(s) {
 }
 
 // src/ImageCaptionDialog.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ImageCaptionDialog() {
   const { imageCaptionRequest, resolveImageCaptionRequest } = useEditorContext();
-  const dialogRef = (0, import_react3.useRef)(null);
-  const inputRef = (0, import_react3.useRef)(null);
-  const [caption, setCaption] = (0, import_react3.useState)("");
-  const [align, setAlign] = (0, import_react3.useState)("center");
-  (0, import_react3.useEffect)(() => {
+  const dialogRef = (0, import_react4.useRef)(null);
+  const inputRef = (0, import_react4.useRef)(null);
+  const [caption, setCaption] = (0, import_react4.useState)("");
+  const [align, setAlign] = (0, import_react4.useState)("center");
+  (0, import_react4.useEffect)(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (imageCaptionRequest) {
@@ -778,20 +1026,21 @@ function ImageCaptionDialog() {
   };
   const onRemove = () => resolveImageCaptionRequest({ caption: "", align });
   const onCancel = () => resolveImageCaptionRequest(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "dialog",
     {
       ref: dialogRef,
       className: "ed-caption-dialog ed-link-dialog",
+      style: DIALOG_CENTER_STYLE,
       onClose: onCancel,
       onCancel: (e) => {
         e.preventDefault();
         onCancel();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit, className: "ed-link-dialog-form", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ed-link-dialog-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: "ed-caption-input", children: "Legenda" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit, className: "ed-link-dialog-form", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ed-link-dialog-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: "ed-caption-input", children: "Legenda" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
               id: "ed-caption-input",
@@ -804,10 +1053,10 @@ function ImageCaptionDialog() {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ed-link-dialog-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Alinhamento" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ed-caption-align-group", role: "radiogroup", "aria-label": "Alinhamento da legenda", children: ["left", "center", "right"].map((value) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "ed-caption-align-option", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ed-link-dialog-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Alinhamento" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ed-caption-align-group", role: "radiogroup", "aria-label": "Alinhamento da legenda", children: ["left", "center", "right"].map((value) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "ed-caption-align-option", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "input",
               {
                 type: "radio",
@@ -820,11 +1069,11 @@ function ImageCaptionDialog() {
             value === "left" ? "Esquerda" : value === "center" ? "Centro" : "Direita"
           ] }, value)) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ed-link-dialog-actions", children: [
-          imageCaptionRequest.initialCaption ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: onRemove, className: "ed-link-dialog-remove", children: "Remover legenda" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ed-link-dialog-confirm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: "ed-link-dialog-apply", children: "Aplicar" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ed-link-dialog-actions", children: [
+          imageCaptionRequest.initialCaption ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick: onRemove, className: "ed-link-dialog-remove", children: "Remover legenda" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ed-link-dialog-confirm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick: onCancel, children: "Cancelar" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: "ed-link-dialog-apply", children: "Aplicar" })
           ] })
         ] })
       ] })
@@ -833,18 +1082,18 @@ function ImageCaptionDialog() {
 }
 
 // src/EditorContext.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var EditorContext = (0, import_react4.createContext)(null);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var EditorContext = (0, import_react5.createContext)(null);
 function EditorProvider({ editor, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(EditorContext.Provider, { value: editor, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(EditorContext.Provider, { value: editor, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LinkDialog, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PageConfigDialog, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ImageCaptionDialog, {})
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LinkDialog, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PageConfigDialog, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageCaptionDialog, {})
   ] });
 }
 function useEditorContext() {
-  const ctx = (0, import_react4.useContext)(EditorContext);
+  const ctx = (0, import_react5.useContext)(EditorContext);
   if (!ctx) {
     throw new Error("useEditorContext must be used inside an <EditorProvider>");
   }
@@ -852,8 +1101,8 @@ function useEditorContext() {
 }
 
 // src/ImageResizeOverlay.tsx
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ImageResizeOverlay({
   rootRef,
   blockIndex,
@@ -861,11 +1110,13 @@ function ImageResizeOverlay({
   cellIndex,
   embed,
   onCommit,
-  onCommitMove
+  onCommitMove,
+  onReanchor
 }) {
-  const [rect, setRect] = (0, import_react5.useState)(null);
-  const imgRef = (0, import_react5.useRef)(null);
-  const locateImage = (0, import_react5.useCallback)(() => {
+  const [rect, setRect] = (0, import_react6.useState)(null);
+  const [isMoving, setIsMoving] = (0, import_react6.useState)(false);
+  const imgRef = (0, import_react6.useRef)(null);
+  const locateImage = (0, import_react6.useCallback)(() => {
     const root = rootRef.current;
     if (!root) return null;
     let container = null;
@@ -883,7 +1134,7 @@ function ImageResizeOverlay({
       `img[data-embed="image"][data-embed-offset="${localOffset}"]`
     );
   }, [rootRef, blockIndex, offset, cellIndex]);
-  const measure = (0, import_react5.useCallback)(() => {
+  const measure = (0, import_react6.useCallback)(() => {
     const img = locateImage();
     if (!img) {
       setRect((prev) => prev === null ? prev : null);
@@ -904,22 +1155,28 @@ function ImageResizeOverlay({
       (prev) => prev && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
     );
   }, [locateImage, rootRef]);
-  (0, import_react5.useLayoutEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     measure();
     let cancelled = false;
+    let frame = 0;
+    let rafId = 0;
     const remeasure = () => {
       if (cancelled) return;
       measure();
+      if (!locateImage() && frame++ < 30) {
+        rafId = typeof requestAnimationFrame === "function" ? requestAnimationFrame(remeasure) : (queueMicrotask(remeasure), 0);
+      }
     };
-    const id = typeof requestAnimationFrame === "function" ? requestAnimationFrame(remeasure) : (queueMicrotask(remeasure), 0);
+    rafId = typeof requestAnimationFrame === "function" ? requestAnimationFrame(remeasure) : (queueMicrotask(remeasure), 0);
     return () => {
       cancelled = true;
-      if (typeof cancelAnimationFrame === "function" && typeof id === "number" && id > 0) {
-        cancelAnimationFrame(id);
+      if (typeof cancelAnimationFrame === "function" && typeof rafId === "number" && rafId > 0) {
+        cancelAnimationFrame(rafId);
       }
     };
   }, [
     measure,
+    locateImage,
     embed.width,
     embed.height,
     embed.align,
@@ -928,7 +1185,7 @@ function ImageResizeOverlay({
     embed.offsetX,
     embed.offsetY
   ]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const onScroll = () => measure();
@@ -939,7 +1196,7 @@ function ImageResizeOverlay({
       root.removeEventListener("scroll", onScroll);
     };
   }, [measure, rootRef]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (typeof ResizeObserver === "undefined") return;
     const img = locateImage();
     const root = rootRef.current;
@@ -952,14 +1209,36 @@ function ImageResizeOverlay({
   if (!rect) return null;
   const layout = embed.layout ?? "inline";
   const movable = layout !== "inline" && onCommitMove !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: "ed-image-overlay",
       style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },
       contentEditable: false,
       children: [
-        movable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isMoving && // Non-clipped drag preview (Tier 2): the overlay lives in .ed-root and
+        // follows the cursor, so the image stays visible while it crosses the
+        // page boundary (the real, clipped figure is hidden during the drag).
+        // Inline styles only — the package does not ship CSS.
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "img",
+          {
+            src: embed.src,
+            alt: "",
+            "aria-hidden": true,
+            draggable: false,
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "fill",
+              opacity: 0.8,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        movable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           MoveHandle,
           {
             layout,
@@ -967,10 +1246,17 @@ function ImageResizeOverlay({
             startOffsetY: embed.offsetY ?? 0,
             imgRef,
             onCommit: onCommitMove,
-            onLiveChange: measure
+            onLiveChange: measure,
+            rootRef,
+            blockIndex,
+            offset,
+            cellIndex,
+            onReanchor,
+            onMoveStart: () => setIsMoving(true),
+            onMoveEnd: () => setIsMoving(false)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Handle,
           {
             corner: "nw",
@@ -981,7 +1267,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Handle,
           {
             corner: "ne",
@@ -992,7 +1278,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Handle,
           {
             corner: "sw",
@@ -1003,7 +1289,7 @@ function ImageResizeOverlay({
             onLiveChange: measure
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Handle,
           {
             corner: "se",
@@ -1024,9 +1310,16 @@ function MoveHandle({
   startOffsetY,
   imgRef,
   onCommit,
-  onLiveChange
+  onLiveChange,
+  rootRef,
+  blockIndex,
+  offset,
+  cellIndex,
+  onReanchor,
+  onMoveStart,
+  onMoveEnd
 }) {
-  const dragRef = (0, import_react5.useRef)(null);
+  const dragRef = (0, import_react6.useRef)(null);
   const onPointerDown = (e) => {
     if (e.button !== 0) return;
     if (!imgRef.current) return;
@@ -1039,35 +1332,65 @@ function MoveHandle({
       liveOX: startOffsetX,
       liveOY: startOffsetY
     };
+    const styled = imgRef.current.closest(".ed-figure") ?? imgRef.current;
+    styled.style.opacity = "0";
+    onMoveStart?.();
   };
   const onPointerMove = (e) => {
     const d = dragRef.current;
     if (!d || !imgRef.current) return;
     const dx = e.clientX - d.startX;
     const dy = e.clientY - d.startY;
-    const img = imgRef.current;
+    const styled = imgRef.current.closest(".ed-figure") ?? imgRef.current;
     let nox = startOffsetX;
     let noy = startOffsetY;
     if (layout === "wrap-left") {
       nox = Math.max(8, startOffsetX + dx);
       noy = Math.max(0, startOffsetY + dy);
-      img.style.marginRight = `${nox}px`;
-      img.style.marginTop = `${noy}px`;
+      styled.style.marginRight = `${nox}px`;
+      styled.style.marginTop = `${noy}px`;
     } else if (layout === "wrap-right") {
       nox = Math.max(8, startOffsetX - dx);
       noy = Math.max(0, startOffsetY + dy);
-      img.style.marginLeft = `${nox}px`;
-      img.style.marginTop = `${noy}px`;
+      styled.style.marginLeft = `${nox}px`;
+      styled.style.marginTop = `${noy}px`;
     } else if (layout === "behind" || layout === "front") {
       nox = startOffsetX + dx;
       noy = startOffsetY + dy;
-      img.style.left = `${nox}px`;
-      img.style.top = `${noy}px`;
+      styled.style.left = `${nox}px`;
+      styled.style.top = `${noy}px`;
     }
     d.liveOX = nox;
     d.liveOY = noy;
     onLiveChange();
   };
+  const clampOffsetToFragment = (frag, oy) => {
+    const img = imgRef.current;
+    if (!img) return oy;
+    const page = frag.closest(".ed-page");
+    const content = page?.querySelector(".ed-page-content");
+    if (!content) return oy;
+    const fragRect = frag.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    const imgH = img.getBoundingClientRect().height;
+    const minLocalTop = contentRect.top - fragRect.top;
+    const maxLocalTop = contentRect.bottom - fragRect.top - imgH;
+    return Math.round(Math.max(minLocalTop, Math.min(oy, maxLocalTop)));
+  };
+  const clampedCommit = (ox, oy) => {
+    const img = imgRef.current;
+    const root = rootRef.current;
+    if (!img || !root || layout !== "behind" && layout !== "front") {
+      onCommit(ox, oy);
+      return;
+    }
+    const frag = getFragmentForOffset(root, blockIndex, offset);
+    if (!frag) {
+      onCommit(ox, oy);
+      return;
+    }
+    onCommit(ox, clampOffsetToFragment(frag, oy));
+  };
   const finish = (e) => {
     const d = dragRef.current;
     if (!d) return;
@@ -1076,9 +1399,77 @@ function MoveHandle({
       e.target.releasePointerCapture(e.pointerId);
     } catch {
     }
-    onCommit(Math.round(d.liveOX), Math.round(d.liveOY));
+    if (imgRef.current) {
+      const styled = imgRef.current.closest(".ed-figure") ?? imgRef.current;
+      styled.style.opacity = "";
+    }
+    onMoveEnd?.();
+    const img = imgRef.current;
+    const root = rootRef.current;
+    const liveOX = Math.round(d.liveOX);
+    const liveOY = Math.round(d.liveOY);
+    if (!img || !root || onReanchor === void 0 || cellIndex != null) {
+      clampedCommit(liveOX, liveOY);
+      return;
+    }
+    const imgRect = img.getBoundingClientRect();
+    const centerY = imgRect.top + imgRect.height / 2;
+    const pages = Array.from(root.querySelectorAll(".ed-page"));
+    let destPage = null;
+    let bestPageDist = Infinity;
+    for (const pg of pages) {
+      const r = pg.getBoundingClientRect();
+      if (centerY >= r.top && centerY <= r.bottom) {
+        destPage = pg;
+        break;
+      }
+      const dist = centerY < r.top ? r.top - centerY : centerY - r.bottom;
+      if (dist < bestPageDist) {
+        bestPageDist = dist;
+        destPage = pg;
+      }
+    }
+    const currentFrag = getFragmentForOffset(root, blockIndex, offset);
+    const currentPage = currentFrag?.closest(".ed-page") ?? null;
+    if (destPage == null || destPage === currentPage) {
+      clampedCommit(liveOX, liveOY);
+      return;
+    }
+    const blocksOnPage = Array.from(
+      destPage.querySelectorAll("[data-block-index]")
+    );
+    let destFrag = null;
+    let bestBlockDist = Infinity;
+    for (const b of blocksOnPage) {
+      const dist = Math.abs(b.getBoundingClientRect().top - imgRect.top);
+      if (dist < bestBlockDist) {
+        bestBlockDist = dist;
+        destFrag = b;
+      }
+    }
+    if (!destFrag) {
+      clampedCommit(liveOX, liveOY);
+      return;
+    }
+    const destBlockIndex = findBlockIndex(destFrag, root);
+    if (destBlockIndex == null) {
+      clampedCommit(liveOX, liveOY);
+      return;
+    }
+    const destOffset = destFrag.dataset.fragmentStart ? Number.parseInt(destFrag.dataset.fragmentStart, 10) || 0 : 0;
+    const fragRect = destFrag.getBoundingClientRect();
+    const newOffsetX = Math.round(imgRect.left - fragRect.left);
+    const newOffsetY = clampOffsetToFragment(
+      destFrag,
+      Math.round(imgRect.top - fragRect.top)
+    );
+    onReanchor(
+      { blockIndex: destBlockIndex, offset: destOffset, cellIndex: void 0 },
+      newOffsetX,
+      newOffsetY
+    );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: "ed-image-move",
@@ -1098,7 +1489,7 @@ function Handle({
   onCommit,
   onLiveChange
 }) {
-  const dragRef = (0, import_react5.useRef)(null);
+  const dragRef = (0, import_react6.useRef)(null);
   const onPointerDown = (e) => {
     if (e.button !== 0) return;
     if (!imgRef.current) return;
@@ -1141,7 +1532,7 @@ function Handle({
     }
     onCommit(Math.round(d.liveW), Math.round(d.liveH));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       className: `ed-image-handle ${corner}`,
@@ -1153,17 +1544,187 @@ function Handle({
   );
 }
 
+// src/RemoteCursorsOverlay.tsx
+var import_react7 = require("react");
+var import_core2 = require("@sofereditor/core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DEFAULT_COLOR = "#3b82f6";
+function RemoteCursorsOverlay({
+  rootRef,
+  doc,
+  awareness,
+  revision
+}) {
+  const [views, setViews] = (0, import_react7.useState)([]);
+  const rafRef = (0, import_react7.useRef)(null);
+  const measure = (0, import_react7.useCallback)(() => {
+    const root = rootRef.current;
+    if (!root) {
+      setViews((prev) => prev.length === 0 ? prev : []);
+      return;
+    }
+    const rr = root.getBoundingClientRect();
+    const out = [];
+    awareness.getStates().forEach((state, clientId) => {
+      if (clientId === awareness.clientID) return;
+      const s = state;
+      if (!s.cursor) return;
+      const sel = (0, import_core2.decodeSelection)(doc, s.cursor);
+      if (!sel) return;
+      const color = s.user?.color || DEFAULT_COLOR;
+      const name = s.user?.name || "An\xF4nimo";
+      const focus = locatePoint(root, sel.focus);
+      let caret = null;
+      if (focus) {
+        try {
+          const range = document.createRange();
+          range.setStart(focus.node, focus.offset);
+          range.collapse(true);
+          let rect = range.getBoundingClientRect();
+          if (rect.height === 0 && focus.node.nodeType === Node.ELEMENT_NODE) {
+            rect = focus.node.getBoundingClientRect();
+          }
+          caret = {
+            top: rect.top - rr.top + root.scrollTop,
+            left: rect.left - rr.left + root.scrollLeft,
+            height: rect.height || 18
+          };
+        } catch {
+        }
+      }
+      const collapsed = sel.anchor.blockIndex === sel.focus.blockIndex && (sel.anchor.cellIndex ?? -1) === (sel.focus.cellIndex ?? -1) && sel.anchor.offset === sel.focus.offset;
+      const selection = [];
+      if (!collapsed && focus) {
+        const anchor = locatePoint(root, sel.anchor);
+        if (anchor) {
+          try {
+            const r = document.createRange();
+            r.setStart(anchor.node, anchor.offset);
+            r.setEnd(focus.node, focus.offset);
+            if (r.collapsed) {
+              r.setStart(focus.node, focus.offset);
+              r.setEnd(anchor.node, anchor.offset);
+            }
+            for (const cr of Array.from(r.getClientRects())) {
+              if (cr.width === 0 || cr.height === 0) continue;
+              selection.push({
+                top: cr.top - rr.top + root.scrollTop,
+                left: cr.left - rr.left + root.scrollLeft,
+                width: cr.width,
+                height: cr.height
+              });
+            }
+          } catch {
+          }
+        }
+      }
+      out.push({ clientId, name, color, caret, selection });
+    });
+    setViews(out);
+  }, [rootRef, doc, awareness]);
+  const scheduleMeasure = (0, import_react7.useCallback)(() => {
+    if (rafRef.current != null) return;
+    const raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(() => cb(0), 16);
+    rafRef.current = raf(() => {
+      rafRef.current = null;
+      measure();
+    });
+  }, [measure]);
+  (0, import_react7.useEffect)(() => {
+    const onChange = () => scheduleMeasure();
+    awareness.on("change", onChange);
+    scheduleMeasure();
+    return () => awareness.off("change", onChange);
+  }, [awareness, scheduleMeasure]);
+  (0, import_react7.useEffect)(() => {
+    scheduleMeasure();
+  }, [revision, scheduleMeasure]);
+  (0, import_react7.useEffect)(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const onScroll = () => scheduleMeasure();
+    root.addEventListener("scroll", onScroll, { passive: true });
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => scheduleMeasure());
+      ro.observe(root);
+    }
+    return () => {
+      root.removeEventListener("scroll", onScroll);
+      ro?.disconnect();
+    };
+  }, [rootRef, scheduleMeasure]);
+  if (views.length === 0) return null;
+  const layer = {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 6
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ed-remote-cursors", "aria-hidden": true, style: layer, children: views.map((v) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+    v.selection.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: r.top,
+          left: r.left,
+          width: r.width,
+          height: r.height,
+          background: v.color,
+          opacity: 0.22,
+          borderRadius: 2
+        }
+      },
+      i
+    )),
+    v.caret && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: v.caret.top,
+          left: v.caret.left,
+          height: v.caret.height,
+          width: 2,
+          background: v.color
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: -15,
+              left: -1,
+              fontSize: 10,
+              lineHeight: "14px",
+              padding: "0 4px",
+              borderRadius: 3,
+              color: "#fff",
+              background: v.color,
+              whiteSpace: "nowrap",
+              fontFamily: "system-ui, sans-serif",
+              userSelect: "none"
+            },
+            children: v.name
+          }
+        )
+      }
+    )
+  ] }, v.clientId)) });
+}
+
 // src/NodeView.tsx
-var import_react8 = require("react");
-var import_core3 = require("@sofereditor/core");
+var import_react10 = require("react");
+var import_core4 = require("@sofereditor/core");
 
 // src/renderInline.tsx
-var import_react6 = require("react");
-var import_core2 = require("@sofereditor/core");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_core3 = require("@sofereditor/core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function renderInline(delta, keyPrefix) {
   if (delta.length === 0 || delta.length === 1 && typeof delta[0].insert === "string" && delta[0].insert === "") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", { "data-empty": "true" });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("br", { "data-empty": "true" });
   }
   let offset = 0;
   const wrapAnchors = [];
@@ -1173,18 +1734,18 @@ function renderInline(delta, keyPrefix) {
       const text = op.insert;
       if (text.length === 0) continue;
       const key = `${keyPrefix}-${offset}`;
-      body.push(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.Fragment, { children: wrap(text, op.attributes) }, key));
+      body.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.Fragment, { children: wrap(text, op.attributes) }, key));
       offset += text.length;
-    } else if ((0, import_core2.isImageEmbed)(op.insert)) {
+    } else if ((0, import_core3.isImageEmbed)(op.insert)) {
       const key = `${keyPrefix}-${offset}`;
       const layout = op.insert.layout ?? "inline";
       const commentMarkId = op.attributes?.comment?.markId;
       if (layout === "wrap-left" || layout === "wrap-right") {
         wrapAnchors.push(
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageEmbedView, { embed: op.insert, offset, wrapAnchor: true }, `${key}-anchor`)
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageEmbedView, { embed: op.insert, offset, wrapAnchor: true }, `${key}-anchor`)
         );
         body.push(
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "span",
             {
               "data-embed-phantom": "true",
@@ -1196,10 +1757,10 @@ function renderInline(delta, keyPrefix) {
           )
         );
       } else {
-        const imgNode = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ImageEmbedView, { embed: op.insert, offset }, key);
+        const imgNode = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageEmbedView, { embed: op.insert, offset }, key);
         if (commentMarkId) {
           body.push(
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-comment-id": commentMarkId, className: "ed-comment", children: imgNode }, `${key}-cmt`)
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-comment-id": commentMarkId, className: "ed-comment", children: imgNode }, `${key}-cmt`)
           );
         } else {
           body.push(imgNode);
@@ -1210,7 +1771,7 @@ function renderInline(delta, keyPrefix) {
       offset += 1;
     }
   }
-  if (wrapAnchors.length === 0 && body.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", { "data-empty": "true" });
+  if (wrapAnchors.length === 0 && body.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("br", { "data-empty": "true" });
   return [...wrapAnchors, ...body];
 }
 var PHANTOM_STYLE = {
@@ -1220,6 +1781,11 @@ var PHANTOM_STYLE = {
   overflow: "hidden",
   verticalAlign: "baseline"
 };
+var LINK_STYLE = {
+  color: "#2563eb",
+  textDecoration: "underline",
+  cursor: "text"
+};
 function imageEmbedPropsEqual(a, b) {
   if (a.offset !== b.offset || a.wrapAnchor !== b.wrapAnchor) return false;
   const x = a.embed;
@@ -1230,7 +1796,7 @@ function imageEmbedPropsEqual(a, b) {
   // because Y.js stores the embed in its content map and re-exposes it.
   x.src === y.src;
 }
-var ImageEmbedView = (0, import_react6.memo)(ImageEmbedViewImpl, imageEmbedPropsEqual);
+var ImageEmbedView = (0, import_react8.memo)(ImageEmbedViewImpl, imageEmbedPropsEqual);
 function ImageEmbedViewImpl({
   embed,
   offset,
@@ -1285,8 +1851,12 @@ function ImageEmbedViewImpl({
       };
       break;
   }
-  const imgStyle = hasCaption ? { width: embed.width, height: embed.height, display: "block" } : outerStyle;
-  const img = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const imgStyle = {
+    width: embed.width,
+    height: embed.height,
+    display: "block"
+  };
+  const img = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "img",
     {
       src: embed.src,
@@ -1305,19 +1875,18 @@ function ImageEmbedViewImpl({
       alt: ""
     }
   );
-  if (!hasCaption) return img;
   const captionAlign = embed.captionAlign ?? "center";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "figure",
     {
       className: "ed-figure",
       contentEditable: false,
-      "data-embed-figure": "true",
+      "data-embed-figure": hasCaption ? "true" : void 0,
       "data-embed-layout": layout,
       style: outerStyle,
       children: [
         img,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        hasCaption && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "figcaption",
           {
             className: "ed-figcaption",
@@ -1333,34 +1902,38 @@ function ImageEmbedViewImpl({
 function wrap(text, attrs) {
   let node = text;
   if (!attrs) return node;
-  if (attrs.bold) node = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: node });
-  if (attrs.italic) node = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("em", { children: node });
-  if (attrs.underline) node = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("u", { children: node });
-  if (attrs.strike) node = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("s", { children: node });
+  if (attrs.bold) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: node });
+  if (attrs.italic) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("em", { children: node });
+  if (attrs.underline) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("u", { children: node });
+  if (attrs.strike) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { children: node });
   const styleParts = {};
   if (attrs.color) styleParts.color = attrs.color;
   if (attrs.fontFamily) styleParts.fontFamily = attrs.fontFamily;
   if (attrs.fontSize) styleParts.fontSize = attrs.fontSize;
   if (Object.keys(styleParts).length > 0) {
-    node = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styleParts, children: node });
+    node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: styleParts, children: node });
   }
   if (attrs.link?.href) {
-    node = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "a",
       {
         href: attrs.link.href,
         title: attrs.link.title,
         rel: "noopener noreferrer",
         target: "_blank",
+        style: LINK_STYLE,
         onClick: (e) => {
-          if (!(e.metaKey || e.ctrlKey)) e.preventDefault();
+          e.preventDefault();
+          if (hasOpenModifier(e) && attrs.link?.href) {
+            window.open(attrs.link.href, "_blank", "noopener,noreferrer");
+          }
         },
         children: node
       }
     );
   }
   if (attrs.comment?.markId) {
-    node = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-comment-id": attrs.comment.markId, className: "ed-comment", children: node });
+    node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-comment-id": attrs.comment.markId, className: "ed-comment", children: node });
   }
   return node;
 }
@@ -1404,14 +1977,14 @@ function sliceDelta(delta, start, end) {
 }
 
 // src/TableResizeOverlay.tsx
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function TableResizeOverlay({ tableRef, blockIndex, cols }) {
   const editor = useEditorContext();
-  const [positions, setPositions] = (0, import_react7.useState)(null);
-  const [layout, setLayout] = (0, import_react7.useState)(null);
-  const draggingRef = (0, import_react7.useRef)(null);
-  const measure = (0, import_react7.useCallback)(() => {
+  const [positions, setPositions] = (0, import_react9.useState)(null);
+  const [layout, setLayout] = (0, import_react9.useState)(null);
+  const draggingRef = (0, import_react9.useRef)(null);
+  const measure = (0, import_react9.useCallback)(() => {
     const table = tableRef.current;
     if (!table) return;
     const tableRect = table.getBoundingClientRect();
@@ -1441,17 +2014,17 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     }
     setLayout({ rights, height: tableRect.height });
   }, [cols, tableRef]);
-  (0, import_react7.useLayoutEffect)(() => {
+  (0, import_react9.useLayoutEffect)(() => {
     measure();
   }, [measure]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const table = tableRef.current;
     if (!table) return;
     const ro = new ResizeObserver(() => measure());
     ro.observe(table);
     return () => ro.disconnect();
   }, [measure, tableRef]);
-  const onPointerDown = (0, import_react7.useCallback)(
+  const onPointerDown = (0, import_react9.useCallback)(
     (col) => (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1465,7 +2038,7 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     },
     [layout, tableRef]
   );
-  const onPointerMove = (0, import_react7.useCallback)(
+  const onPointerMove = (0, import_react9.useCallback)(
     (e) => {
       const d = draggingRef.current;
       if (!d) return;
@@ -1475,7 +2048,7 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     },
     [blockIndex, editor]
   );
-  const onPointerUp = (0, import_react7.useCallback)((e) => {
+  const onPointerUp = (0, import_react9.useCallback)((e) => {
     draggingRef.current = null;
     setPositions(null);
     try {
@@ -1494,7 +2067,7 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
     zIndex: 5
   });
   void positions;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: layout.rights.map((x, c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: layout.rights.map((x, c) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       contentEditable: false,
@@ -1511,10 +2084,10 @@ function TableResizeOverlay({ tableRef, blockIndex, cols }) {
 }
 
 // src/NodeView.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function NodeView({ block, index, children, fragment, tableFragment }) {
   if (block.type === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableView, { block, index, tableFragment });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableView, { block, index, tableFragment });
   }
   const inline = fragment ? renderInline(sliceDelta(block.delta, fragment.start, fragment.end), index) : renderInline(block.delta, index);
   const common = commonBlockProps(block.attrs, index, block.type, fragment);
@@ -1522,7 +2095,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
     case "heading": {
       const level = clampLevel(block.attrs.level);
       const Tag = `h${level}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         Tag,
         {
           ...common,
@@ -1532,7 +2105,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
       );
     }
     case "blockquote":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "blockquote",
         {
           ...common,
@@ -1541,18 +2114,18 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
         }
       );
     case "codeBlock":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "pre",
         {
           ...common,
           "data-language": block.attrs.language ?? void 0,
           className: `ed-block ed-codeblock${alignClass(block.attrs.align)}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { children: inline })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { children: inline })
         }
       );
     case "listItem": {
       const level = clampListLevel(block.attrs.listLevel);
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "li",
         {
           ...common,
@@ -1568,7 +2141,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
     }
     case "paragraph":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           ...common,
@@ -1613,18 +2186,18 @@ function TableView({ block, index, tableFragment }) {
   const cols = clampPositive(block.attrs.cols);
   const cells = block.cells ?? [];
   const widths = readColWidths(block.attrs.colWidths, cols);
-  const tableRef = (0, import_react8.useRef)(null);
+  const tableRef = (0, import_react10.useRef)(null);
   const rowStart = tableFragment?.rowStart ?? 0;
   const rowEnd = tableFragment?.rowEnd ?? rows;
   const isFirstFragment = !tableFragment || tableFragment.index === 0;
   const editor = useEditorContext();
-  const rect = (0, import_react8.useMemo)(() => {
+  const rect = (0, import_react10.useMemo)(() => {
     if (editor.selection.anchor.blockIndex !== index) return null;
     if (editor.selection.focus.blockIndex !== index) return null;
-    return (0, import_core3.tableRectSelection)(editor.doc, editor.selection);
+    return (0, import_core4.tableRectSelection)(editor.doc, editor.selection);
   }, [editor.doc, editor.selection, index]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ed-table-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ed-table-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "table",
       {
         ref: tableRef,
@@ -1632,10 +2205,10 @@ function TableView({ block, index, tableFragment }) {
         "data-block-type": "table",
         className: "ed-block ed-table",
         children: [
-          widths && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("colgroup", { children: widths.map((w, c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("col", { style: w != null ? { width: `${w}px` } : void 0 }, c)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: Array.from({ length: rowEnd - rowStart }, (_, i) => {
+          widths && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("colgroup", { children: widths.map((w, c) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("col", { style: w != null ? { width: `${w}px` } : void 0 }, c)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: Array.from({ length: rowEnd - rowStart }, (_, i) => {
             const r = rowStart + i;
-            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { "data-cell-row": r, children: Array.from({ length: cols }, (_2, c) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { "data-cell-row": r, children: Array.from({ length: cols }, (_2, c) => {
               const flat = r * cols + c;
               const cell = cells[flat];
               if (cell?.attrs.covered === true) return null;
@@ -1643,7 +2216,7 @@ function TableView({ block, index, tableFragment }) {
               const colspan = spanAttr(cell?.attrs.colspan);
               const delta = cell?.delta ?? [];
               const inRect = rect !== null && r >= rect.top && r <= rect.bottom && c >= rect.left && c <= rect.right;
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "td",
                 {
                   "data-cell-index": flat,
@@ -1653,6 +2226,7 @@ function TableView({ block, index, tableFragment }) {
                   "data-cell-colspan": colspan,
                   rowSpan: rowspan > 1 ? rowspan : void 0,
                   colSpan: colspan > 1 ? colspan : void 0,
+                  style: cell?.attrs.align ? { textAlign: cell.attrs.align } : void 0,
                   className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
                   children: renderInline(delta, `t${index}-c${flat}`)
                 },
@@ -1663,7 +2237,7 @@ function TableView({ block, index, tableFragment }) {
         ]
       }
     ),
-    isFirstFragment && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableResizeOverlay, { tableRef, blockIndex: index, cols })
+    isFirstFragment && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableResizeOverlay, { tableRef, blockIndex: index, cols })
   ] });
 }
 function readColWidths(raw, cols) {
@@ -1685,7 +2259,7 @@ function clampPositive(n) {
 }
 
 // src/usePagination.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 var A4_PAGE = {
   width: 794,
   height: 1123,
@@ -1711,10 +2285,10 @@ function defaultPageLayout(topLevelCount) {
   };
 }
 function usePageLayout(rootRef, geometry, topLevelCount, deps) {
-  const [phase, setPhase] = (0, import_react9.useState)("measure");
-  const [layout, setLayout] = (0, import_react9.useState)(() => defaultPageLayout(topLevelCount));
-  const lastDepsRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useLayoutEffect)(() => {
+  const [phase, setPhase] = (0, import_react11.useState)("measure");
+  const [layout, setLayout] = (0, import_react11.useState)(() => defaultPageLayout(topLevelCount));
+  const lastDepsRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useLayoutEffect)(() => {
     const currentDeps = [...deps, topLevelCount, geometry];
     if (lastDepsRef.current !== null && shallowArrayEqual(lastDepsRef.current, currentDeps)) {
       return;
@@ -1726,7 +2300,7 @@ function usePageLayout(rootRef, geometry, topLevelCount, deps) {
     });
     setPhase("measure");
   });
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react11.useLayoutEffect)(() => {
     if (phase !== "measure") return;
     const root = rootRef.current;
     if (!root) return;
@@ -2198,48 +2772,48 @@ function layoutsDeepEqual(a, b) {
 }
 
 // src/useEditor.ts
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/usePageSettings.ts
-var import_react10 = require("react");
+var import_react12 = require("react");
 function usePageSettings(doc) {
-  const cacheRef = (0, import_react10.useRef)(null);
-  const subscribe = (0, import_react10.useCallback)(
+  const cacheRef = (0, import_react12.useRef)(null);
+  const subscribe = (0, import_react12.useCallback)(
     (notify) => doc.observePageSettings(notify),
     [doc]
   );
-  const getSnapshot = (0, import_react10.useCallback)(() => {
+  const getSnapshot = (0, import_react12.useCallback)(() => {
     const next = doc.getPageSettings();
     const prev = cacheRef.current;
     if (prev && shallowEqual(prev, next)) return prev;
     cacheRef.current = next;
     return next;
   }, [doc]);
-  return (0, import_react10.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react12.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
 }
 function shallowEqual(a, b) {
   return a.width === b.width && a.height === b.height && a.marginTop === b.marginTop && a.marginBottom === b.marginBottom && a.marginLeft === b.marginLeft && a.marginRight === b.marginRight && a.preset === b.preset && a.systemHeaderTitle === b.systemHeaderTitle && a.systemHeaderAuthor === b.systemHeaderAuthor;
 }
 
 // src/useEditor.ts
-var import_core4 = require("@sofereditor/core");
+var import_core5 = require("@sofereditor/core");
 var MAX_INSERT_WIDTH = 600;
 function useEditor(opts = {}) {
-  const doc = (0, import_react11.useMemo)(() => opts.document ?? new import_core4.EditorDocument(), [opts.document]);
-  const history = (0, import_react11.useMemo)(() => new import_core4.EditorHistory(doc), [doc]);
-  const [snapshot, setSnapshot] = (0, import_react11.useState)(() => doc.toJSON());
-  const [selection, setSelectionState] = (0, import_react11.useState)(
-    () => (0, import_core4.collapsedSelection)({ blockIndex: 0, offset: 0 })
+  const doc = (0, import_react13.useMemo)(() => opts.document ?? new import_core5.EditorDocument(), [opts.document]);
+  const history = (0, import_react13.useMemo)(() => new import_core5.EditorHistory(doc), [doc]);
+  const [snapshot, setSnapshot] = (0, import_react13.useState)(() => doc.toJSON());
+  const [selection, setSelectionState] = (0, import_react13.useState)(
+    () => (0, import_core5.collapsedSelection)({ blockIndex: 0, offset: 0 })
   );
-  const selectionRef = (0, import_react11.useRef)(selection);
+  const selectionRef = (0, import_react13.useRef)(selection);
   selectionRef.current = selection;
-  const pendingMarksRef = (0, import_react11.useRef)({});
-  const [pendingMarks, setPendingMarksState] = (0, import_react11.useState)({});
-  const setPendingMarks = (0, import_react11.useCallback)((next) => {
+  const pendingMarksRef = (0, import_react13.useRef)({});
+  const [pendingMarks, setPendingMarksState] = (0, import_react13.useState)({});
+  const setPendingMarks = (0, import_react13.useCallback)((next) => {
     pendingMarksRef.current = next;
     setPendingMarksState(next);
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     let scheduled = false;
     let cancelled = false;
     let frame = 0;
@@ -2266,8 +2840,8 @@ function useEditor(opts = {}) {
       doc.ydoc.off("afterTransaction", schedule);
     };
   }, [doc]);
-  const getSelection = (0, import_react11.useCallback)(() => selectionRef.current, []);
-  const setSelection = (0, import_react11.useCallback)(
+  const getSelection = (0, import_react13.useCallback)(() => selectionRef.current, []);
+  const setSelection = (0, import_react13.useCallback)(
     (sel) => {
       const prev = selectionRef.current;
       selectionRef.current = sel;
@@ -2282,19 +2856,19 @@ function useEditor(opts = {}) {
     },
     []
   );
-  const ctxRef = (0, import_react11.useRef)({ doc, getSelection, setSelection });
+  const ctxRef = (0, import_react13.useRef)({ doc, getSelection, setSelection });
   ctxRef.current = { doc, getSelection, setSelection };
-  const consumePendingMarks = (0, import_react11.useCallback)(() => {
+  const consumePendingMarks = (0, import_react13.useCallback)(() => {
     const current = pendingMarksRef.current;
     if (Object.keys(current).length === 0) return void 0;
     pendingMarksRef.current = {};
     setPendingMarksState({});
     return current;
   }, []);
-  const isMarkActive = (0, import_react11.useCallback)(
+  const isMarkActive = (0, import_react13.useCallback)(
     (name, value) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core4.orderedRange)(sel);
+      const { start, end } = (0, import_core5.orderedRange)(sel);
       if (start.blockIndex === end.blockIndex && start.offset === end.offset) {
         const pending = pendingMarksRef.current[name];
         if (pending !== void 0) {
@@ -2303,7 +2877,7 @@ function useEditor(opts = {}) {
         }
         const yText2 = doc.getBlockText(start.blockIndex);
         if (!yText2 || start.offset === 0) return false;
-        return (0, import_core4.isMarkUniformInRange)(yText2, start.offset - 1, start.offset, name, value);
+        return (0, import_core5.isMarkUniformInRange)(yText2, start.offset - 1, start.offset, name, value);
       }
       if (start.blockIndex !== end.blockIndex) {
         for (let i = start.blockIndex; i <= end.blockIndex; i++) {
@@ -2312,19 +2886,19 @@ function useEditor(opts = {}) {
           const s = i === start.blockIndex ? start.offset : 0;
           const e = i === end.blockIndex ? end.offset : yText2.length;
           if (s >= e) continue;
-          if (!(0, import_core4.isMarkUniformInRange)(yText2, s, e, name, value)) return false;
+          if (!(0, import_core5.isMarkUniformInRange)(yText2, s, e, name, value)) return false;
         }
         return true;
       }
       const yText = doc.getBlockText(start.blockIndex);
       if (!yText) return false;
-      return (0, import_core4.isMarkUniformInRange)(yText, start.offset, end.offset, name, value);
+      return (0, import_core5.isMarkUniformInRange)(yText, start.offset, end.offset, name, value);
     },
     [doc]
   );
-  const getActiveMarks = (0, import_react11.useCallback)(() => {
+  const getActiveMarks = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
-    const { start, end } = (0, import_core4.orderedRange)(sel);
+    const { start, end } = (0, import_core5.orderedRange)(sel);
     if (start.blockIndex !== end.blockIndex) {
       return {};
     }
@@ -2332,14 +2906,14 @@ function useEditor(opts = {}) {
     if (!yText) return {};
     if (start.offset === end.offset) {
       if (start.offset === 0) return {};
-      return (0, import_core4.getMarksInRange)(yText, start.offset - 1, start.offset);
+      return (0, import_core5.getMarksInRange)(yText, start.offset - 1, start.offset);
     }
-    return (0, import_core4.getMarksInRange)(yText, start.offset, end.offset);
+    return (0, import_core5.getMarksInRange)(yText, start.offset, end.offset);
   }, [doc]);
-  const toggleMark = (0, import_react11.useCallback)(
+  const toggleMark = (0, import_react13.useCallback)(
     (name, value) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core4.orderedRange)(sel);
+      const { start, end } = (0, import_core5.orderedRange)(sel);
       const isCollapsed = start.blockIndex === end.blockIndex && start.offset === end.offset;
       if (isCollapsed) {
         const next = { ...pendingMarksRef.current };
@@ -2352,39 +2926,39 @@ function useEditor(opts = {}) {
         setPendingMarks(next);
         return;
       }
-      (0, import_core4.toggleMark)(ctxRef.current, name, value);
+      (0, import_core5.toggleMark)(ctxRef.current, name, value);
     },
     [isMarkActive, setPendingMarks]
   );
-  const setMark = (0, import_react11.useCallback)(
+  const setMark = (0, import_react13.useCallback)(
     (name, value) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core4.orderedRange)(sel);
+      const { start, end } = (0, import_core5.orderedRange)(sel);
       const isCollapsed = start.blockIndex === end.blockIndex && start.offset === end.offset;
       if (isCollapsed) {
         setPendingMarks({ ...pendingMarksRef.current, [name]: value });
         return;
       }
-      (0, import_core4.setMark)(ctxRef.current, name, value);
+      (0, import_core5.setMark)(ctxRef.current, name, value);
     },
     [setPendingMarks]
   );
-  const removeMark = (0, import_react11.useCallback)(
+  const removeMark = (0, import_react13.useCallback)(
     (name) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core4.orderedRange)(sel);
+      const { start, end } = (0, import_core5.orderedRange)(sel);
       const isCollapsed = start.blockIndex === end.blockIndex && start.offset === end.offset;
       if (isCollapsed) {
         setPendingMarks({ ...pendingMarksRef.current, [name]: null });
         return;
       }
-      (0, import_core4.removeMark)(ctxRef.current, name);
+      (0, import_core5.removeMark)(ctxRef.current, name);
     },
     [setPendingMarks]
   );
-  const getBlockType = (0, import_react11.useCallback)(() => {
+  const getBlockType = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
-    const { start, end } = (0, import_core4.orderedRange)(sel);
+    const { start, end } = (0, import_core5.orderedRange)(sel);
     const first = doc.getBlockType(start.blockIndex);
     if (first === void 0) return "paragraph";
     for (let i = start.blockIndex + 1; i <= end.blockIndex; i++) {
@@ -2392,10 +2966,10 @@ function useEditor(opts = {}) {
     }
     return first;
   }, [doc]);
-  const getBlockAttr = (0, import_react11.useCallback)(
+  const getBlockAttr = (0, import_react13.useCallback)(
     (key) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core4.orderedRange)(sel);
+      const { start, end } = (0, import_core5.orderedRange)(sel);
       const first = doc.getBlockAttrs(start.blockIndex)[key];
       for (let i = start.blockIndex + 1; i <= end.blockIndex; i++) {
         const next = doc.getBlockAttrs(i)[key];
@@ -2405,19 +2979,32 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const setBlockType = (0, import_react11.useCallback)((type, attrs) => {
-    (0, import_core4.setBlockType)(ctxRef.current, type, attrs);
+  const setBlockType = (0, import_react13.useCallback)((type, attrs) => {
+    (0, import_core5.setBlockType)(ctxRef.current, type, attrs);
   }, []);
-  const setBlockAttr = (0, import_react11.useCallback)(
+  const setBlockAttr = (0, import_react13.useCallback)(
     (key, value) => {
-      (0, import_core4.setBlockAttr)(ctxRef.current, key, value);
+      (0, import_core5.setBlockAttr)(ctxRef.current, key, value);
     },
     []
   );
-  const isListActive = (0, import_react11.useCallback)(
+  const setAlign = (0, import_react13.useCallback)((value) => {
+    const sel = selectionRef.current;
+    const inCell = sel.focus.cellIndex != null;
+    if (inCell) (0, import_core5.setCellAttr)(ctxRef.current, "align", value);
+    else (0, import_core5.setBlockAttr)(ctxRef.current, "align", value);
+  }, []);
+  const getAlign = (0, import_react13.useCallback)(() => {
+    const sel = selectionRef.current;
+    if (sel.focus.cellIndex != null && doc.isTable(sel.focus.blockIndex)) {
+      return doc.getCellAttrs(sel.focus.blockIndex, sel.focus.cellIndex).align;
+    }
+    return getBlockAttr("align");
+  }, [doc, getBlockAttr]);
+  const isListActive = (0, import_react13.useCallback)(
     (kind) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core4.orderedRange)(sel);
+      const { start, end } = (0, import_core5.orderedRange)(sel);
       for (let i = start.blockIndex; i <= end.blockIndex; i++) {
         if (doc.getBlockType(i) !== "listItem") return false;
         if (doc.getBlockAttrs(i).listKind !== kind) return false;
@@ -2426,110 +3013,116 @@ function useEditor(opts = {}) {
     },
     [doc]
   );
-  const toggleList = (0, import_react11.useCallback)((kind) => {
-    (0, import_core4.toggleList)(ctxRef.current, kind);
+  const toggleList = (0, import_react13.useCallback)((kind) => {
+    (0, import_core5.toggleList)(ctxRef.current, kind);
   }, []);
-  const indentList = (0, import_react11.useCallback)(() => {
-    (0, import_core4.indentList)(ctxRef.current);
+  const indentList = (0, import_react13.useCallback)(() => {
+    (0, import_core5.indentList)(ctxRef.current);
   }, []);
-  const dedentList = (0, import_react11.useCallback)(() => {
-    (0, import_core4.dedentList)(ctxRef.current);
+  const dedentList = (0, import_react13.useCallback)(() => {
+    (0, import_core5.dedentList)(ctxRef.current);
   }, []);
-  const splitListItem = (0, import_react11.useCallback)(() => {
-    return (0, import_core4.splitListItem)(ctxRef.current);
+  const splitListItem = (0, import_react13.useCallback)(() => {
+    return (0, import_core5.splitListItem)(ctxRef.current);
   }, []);
-  const isInTable = (0, import_react11.useCallback)(() => {
+  const isInTable = (0, import_react13.useCallback)(() => {
     return selectionRef.current.focus.cellIndex != null;
   }, []);
-  const getTableLocation = (0, import_react11.useCallback)(() => {
-    return (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const getTableLocation = (0, import_react13.useCallback)(() => {
+    return (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
   }, [doc]);
-  const insertTable = (0, import_react11.useCallback)((rows, cols) => {
-    (0, import_core4.insertTable)(ctxRef.current, rows, cols);
+  const insertTable = (0, import_react13.useCallback)((rows, cols) => {
+    (0, import_core5.insertTable)(ctxRef.current, rows, cols);
   }, []);
-  const deleteTable = (0, import_react11.useCallback)((blockIndex) => {
+  const deleteTable = (0, import_react13.useCallback)((blockIndex) => {
     const idx = blockIndex ?? selectionRef.current.focus.blockIndex;
-    (0, import_core4.deleteTable)(ctxRef.current, idx);
+    (0, import_core5.deleteTable)(ctxRef.current, idx);
   }, []);
-  const insertRowAbove = (0, import_react11.useCallback)(() => {
-    const loc = (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const insertRowAbove = (0, import_react13.useCallback)(() => {
+    const loc = (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core4.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "before");
+    (0, import_core5.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "before");
   }, [doc]);
-  const insertRowBelow = (0, import_react11.useCallback)(() => {
-    const loc = (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const insertRowBelow = (0, import_react13.useCallback)(() => {
+    const loc = (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core4.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "after");
+    (0, import_core5.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "after");
   }, [doc]);
-  const deleteCurrentRow = (0, import_react11.useCallback)(() => {
-    const loc = (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const deleteCurrentRow = (0, import_react13.useCallback)(() => {
+    const loc = (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core4.deleteTableRow)(ctxRef.current, loc.blockIndex, loc.row);
+    (0, import_core5.deleteTableRow)(ctxRef.current, loc.blockIndex, loc.row);
   }, [doc]);
-  const insertColumnLeft = (0, import_react11.useCallback)(() => {
-    const loc = (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const insertColumnLeft = (0, import_react13.useCallback)(() => {
+    const loc = (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core4.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "before");
+    (0, import_core5.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "before");
   }, [doc]);
-  const insertColumnRight = (0, import_react11.useCallback)(() => {
-    const loc = (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const insertColumnRight = (0, import_react13.useCallback)(() => {
+    const loc = (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core4.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "after");
+    (0, import_core5.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "after");
   }, [doc]);
-  const deleteCurrentColumn = (0, import_react11.useCallback)(() => {
-    const loc = (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const deleteCurrentColumn = (0, import_react13.useCallback)(() => {
+    const loc = (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core4.deleteTableColumn)(ctxRef.current, loc.blockIndex, loc.col);
+    (0, import_core5.deleteTableColumn)(ctxRef.current, loc.blockIndex, loc.col);
   }, [doc]);
-  const moveToNextCell = (0, import_react11.useCallback)(() => {
-    (0, import_core4.moveToNextCell)(ctxRef.current);
+  const moveToNextCell = (0, import_react13.useCallback)(() => {
+    (0, import_core5.moveToNextCell)(ctxRef.current);
   }, []);
-  const moveToPrevCell = (0, import_react11.useCallback)(() => {
-    (0, import_core4.moveToPrevCell)(ctxRef.current);
+  const moveToPrevCell = (0, import_react13.useCallback)(() => {
+    (0, import_core5.moveToPrevCell)(ctxRef.current);
   }, []);
-  const mergeRight = (0, import_react11.useCallback)(() => {
-    const loc = (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const mergeRight = (0, import_react13.useCallback)(() => {
+    const loc = (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return false;
-    return (0, import_core4.mergeRight)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
+    return (0, import_core5.mergeRight)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const mergeDown = (0, import_react11.useCallback)(() => {
-    const loc = (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const mergeDown = (0, import_react13.useCallback)(() => {
+    const loc = (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return false;
-    return (0, import_core4.mergeDown)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
+    return (0, import_core5.mergeDown)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const splitCell = (0, import_react11.useCallback)(() => {
-    const loc = (0, import_core4.tableLocationOf)(doc, selectionRef.current.focus);
+  const splitCell = (0, import_react13.useCallback)(() => {
+    const loc = (0, import_core5.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return false;
-    return (0, import_core4.splitCell)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
+    return (0, import_core5.splitCell)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
-  const setColumnWidth = (0, import_react11.useCallback)(
+  const setColumnWidth = (0, import_react13.useCallback)(
     (blockIndex, col, widthPx) => {
-      (0, import_core4.setColumnWidth)(ctxRef.current, blockIndex, col, widthPx);
+      (0, import_core5.setColumnWidth)(ctxRef.current, blockIndex, col, widthPx);
     },
     []
   );
-  const getTableRect = (0, import_react11.useCallback)(
-    () => (0, import_core4.tableRectSelection)(doc, selectionRef.current),
+  const getTableRect = (0, import_react13.useCallback)(
+    () => (0, import_core5.tableRectSelection)(doc, selectionRef.current),
     [doc]
   );
-  const hasTableRectSelection = (0, import_react11.useCallback)(() => {
-    return (0, import_core4.tableRectSelection)(doc, selectionRef.current) !== null;
+  const hasTableRectSelection = (0, import_react13.useCallback)(() => {
+    return (0, import_core5.tableRectSelection)(doc, selectionRef.current) !== null;
   }, [doc]);
-  const mergeSelection = (0, import_react11.useCallback)(() => {
-    return (0, import_core4.mergeSelection)(ctxRef.current);
+  const mergeSelection = (0, import_react13.useCallback)(() => {
+    return (0, import_core5.mergeSelection)(ctxRef.current);
   }, []);
-  const insertImage = (0, import_react11.useCallback)((embed) => {
-    (0, import_core4.insertImage)(ctxRef.current, embed);
+  const insertImage = (0, import_react13.useCallback)((embed) => {
+    (0, import_core5.insertImage)(ctxRef.current, embed);
   }, []);
-  const setImageAttrs = (0, import_react11.useCallback)(
+  const setImageAttrs = (0, import_react13.useCallback)(
     (blockIndex, offset, partial, cellIndex, newOffset) => {
-      (0, import_core4.setImageAttrs)(ctxRef.current, blockIndex, offset, partial, cellIndex, newOffset);
+      (0, import_core5.setImageAttrs)(ctxRef.current, blockIndex, offset, partial, cellIndex, newOffset);
     },
     []
   );
-  const uploadImageRef = (0, import_react11.useRef)(opts.uploadImage);
+  const moveEmbedAnchor = (0, import_react13.useCallback)(
+    (from, to, newOffsetX, newOffsetY) => {
+      (0, import_core5.moveEmbedAnchor)(ctxRef.current, from, to, newOffsetX, newOffsetY);
+    },
+    []
+  );
+  const uploadImageRef = (0, import_react13.useRef)(opts.uploadImage);
   uploadImageRef.current = opts.uploadImage;
-  const insertImageFromFile = (0, import_react11.useCallback)(async (file) => {
+  const insertImageFromFile = (0, import_react13.useCallback)(async (file) => {
     if (!file.type.startsWith("image/")) return;
     const dataUrl = await readAsDataURL(file);
     const dims = await readImageDimensions(dataUrl);
@@ -2541,9 +3134,9 @@ function useEditor(opts = {}) {
     }
     const upload = uploadImageRef.current;
     const src = upload ? await upload(file) : dataUrl;
-    (0, import_core4.insertImage)(ctxRef.current, { type: "image", src, width: w, height: h });
+    (0, import_core5.insertImage)(ctxRef.current, { type: "image", src, width: w, height: h });
   }, []);
-  const getSelectedEmbed = (0, import_react11.useCallback)(() => {
+  const getSelectedEmbed = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
     if (sel.anchor.blockIndex !== sel.focus.blockIndex) return null;
     if ((sel.anchor.cellIndex ?? -1) !== (sel.focus.cellIndex ?? -1)) return null;
@@ -2560,7 +3153,7 @@ function useEditor(opts = {}) {
         cursor += op.insert.length;
         continue;
       }
-      if (cursor === start && (0, import_core4.isImageEmbed)(op.insert)) {
+      if (cursor === start && (0, import_core5.isImageEmbed)(op.insert)) {
         return {
           blockIndex: sel.anchor.blockIndex,
           cellIndex: sel.anchor.cellIndex,
@@ -2572,39 +3165,48 @@ function useEditor(opts = {}) {
     }
     return null;
   }, [doc]);
-  const [linkRequest, setLinkRequest] = (0, import_react11.useState)(null);
-  const requestLink = (0, import_react11.useCallback)((initialHref = "") => {
+  const [linkRequest, setLinkRequest] = (0, import_react13.useState)(null);
+  const linkRequestRef = (0, import_react13.useRef)(null);
+  const requestLink = (0, import_react13.useCallback)((initialHref = "") => {
     return new Promise((resolve) => {
-      setLinkRequest({ initialHref, resolve });
-    });
-  }, []);
-  const resolveLinkRequest = (0, import_react11.useCallback)((href) => {
-    setLinkRequest((prev) => {
-      if (prev) prev.resolve(href);
-      return null;
+      const req = { initialHref, resolve, selection: selectionRef.current };
+      linkRequestRef.current = req;
+      setLinkRequest(req);
     });
   }, []);
+  const resolveLinkRequest = (0, import_react13.useCallback)(
+    (href) => {
+      const req = linkRequestRef.current;
+      linkRequestRef.current = null;
+      setLinkRequest(null);
+      if (req) {
+        setSelection(req.selection);
+        req.resolve(href);
+      }
+    },
+    [setSelection]
+  );
   const pageSettings = usePageSettings(doc);
-  const setPageSettings = (0, import_react11.useCallback)(
+  const setPageSettings = (0, import_react13.useCallback)(
     (partial) => {
       doc.setPageSettings(partial);
     },
     [doc]
   );
-  const [pageConfigRequest, setPageConfigRequest] = (0, import_react11.useState)(null);
-  const requestPageConfig = (0, import_react11.useCallback)(() => {
+  const [pageConfigRequest, setPageConfigRequest] = (0, import_react13.useState)(null);
+  const requestPageConfig = (0, import_react13.useCallback)(() => {
     return new Promise((resolve) => {
       setPageConfigRequest({ initial: doc.getPageSettings(), resolve });
     });
   }, [doc]);
-  const resolvePageConfigRequest = (0, import_react11.useCallback)((applied) => {
+  const resolvePageConfigRequest = (0, import_react13.useCallback)((applied) => {
     setPageConfigRequest((prev) => {
       if (prev) prev.resolve(applied);
       return null;
     });
   }, []);
-  const [imageCaptionRequest, setImageCaptionRequest] = (0, import_react11.useState)(null);
-  const requestImageCaption = (0, import_react11.useCallback)(
+  const [imageCaptionRequest, setImageCaptionRequest] = (0, import_react13.useState)(null);
+  const requestImageCaption = (0, import_react13.useCallback)(
     (initialCaption = "", initialAlign = "center") => {
       return new Promise((resolve) => {
         setImageCaptionRequest({ initialCaption, initialAlign, resolve });
@@ -2612,7 +3214,7 @@ function useEditor(opts = {}) {
     },
     []
   );
-  const resolveImageCaptionRequest = (0, import_react11.useCallback)((result) => {
+  const resolveImageCaptionRequest = (0, import_react13.useCallback)((result) => {
     setImageCaptionRequest((prev) => {
       if (prev) prev.resolve(result);
       return null;
@@ -2636,6 +3238,8 @@ function useEditor(opts = {}) {
     getBlockAttr,
     setBlockType,
     setBlockAttr,
+    setAlign,
+    getAlign,
     isListActive,
     toggleList,
     indentList,
@@ -2665,6 +3269,7 @@ function useEditor(opts = {}) {
     mergeSelection,
     insertImage,
     setImageAttrs,
+    moveEmbedAnchor,
     insertImageFromFile,
     getSelectedEmbed,
     pageSettings,
@@ -2706,54 +3311,99 @@ function sameValue(a, b) {
 }
 
 // src/Editor.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultFooter = ({ pageNumber, pageCount }) => `${pageNumber} / ${pageCount}`;
 function Editor({
   editor: providedEditor,
   className,
   pageGeometry,
   renderPageHeader,
-  renderPageFooter = defaultFooter
+  renderPageFooter = defaultFooter,
+  awareness
 }) {
   const internal = useEditor();
   const editor = providedEditor ?? internal;
   const { doc, history, snapshot, getSelection, setSelection } = editor;
-  const rootRef = (0, import_react12.useRef)(null);
-  const isComposingRef = (0, import_react12.useRef)(false);
-  const suppressSelectionSyncRef = (0, import_react12.useRef)(false);
-  const ctxRef = (0, import_react12.useRef)({ doc, getSelection, setSelection });
+  const rootRef = (0, import_react14.useRef)(null);
+  const isComposingRef = (0, import_react14.useRef)(false);
+  const [hoveredBehind, setHoveredBehind] = (0, import_react14.useState)(null);
+  const hoveredBehindRef = (0, import_react14.useRef)(null);
+  const [hoveredLink, setHoveredLink] = (0, import_react14.useState)(null);
+  const hoveredLinkElRef = (0, import_react14.useRef)(null);
+  const suppressSelectionSyncRef = (0, import_react14.useRef)(false);
+  (0, import_react14.useEffect)(() => {
+    if (!awareness) return;
+    const root = rootRef.current;
+    if (!root) return;
+    let raf = null;
+    const publish = () => {
+      raf = null;
+      const sel = readDomSelection(root);
+      awareness.setLocalStateField(
+        "cursor",
+        sel ? (0, import_core6.encodeSelection)(doc, sel) ?? null : null
+      );
+    };
+    const onSelChange = () => {
+      const s = document.getSelection();
+      if (!s || s.rangeCount === 0) return;
+      if (s.anchorNode && !root.contains(s.anchorNode)) return;
+      if (raf != null) return;
+      raf = requestAnimationFrame(publish);
+    };
+    const onBlur = () => awareness.setLocalStateField("cursor", null);
+    document.addEventListener("selectionchange", onSelChange);
+    root.addEventListener("blur", onBlur, true);
+    return () => {
+      document.removeEventListener("selectionchange", onSelChange);
+      root.removeEventListener("blur", onBlur, true);
+      if (raf != null) cancelAnimationFrame(raf);
+      awareness.setLocalStateField("cursor", null);
+    };
+  }, [awareness, doc]);
+  const ctxRef = (0, import_react14.useRef)({ doc, getSelection, setSelection });
   ctxRef.current = { doc, getSelection, setSelection };
-  const historyRef = (0, import_react12.useRef)(history);
+  const historyRef = (0, import_react14.useRef)(history);
   historyRef.current = history;
-  const editorRef = (0, import_react12.useRef)(editor);
+  const editorRef = (0, import_react14.useRef)(editor);
   editorRef.current = editor;
-  (0, import_react12.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     if (isComposingRef.current) return;
     if (document.activeElement !== root) return;
     const current = readDomSelection(root);
     if (current && selectionsEqual(current, editor.selection)) return;
+    if (isTableRectSelection(editor.selection)) {
+      applyDomSelection(root, editor.selection);
+      suppressSelectionSyncRef.current = false;
+      return;
+    }
     suppressSelectionSyncRef.current = true;
     applyDomSelection(root, editor.selection);
-    queueMicrotask(() => {
-      suppressSelectionSyncRef.current = false;
-    });
   });
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = () => {
-      if (suppressSelectionSyncRef.current) return;
       if (isComposingRef.current) return;
-      if (document.activeElement !== root) return;
+      if (document.activeElement !== root) {
+        suppressSelectionSyncRef.current = false;
+        return;
+      }
       const modelSel = readDomSelection(root);
+      if (suppressSelectionSyncRef.current) {
+        if (modelSel && selectionsEqual(modelSel, editorRef.current.getSelection())) {
+          suppressSelectionSyncRef.current = false;
+        }
+        return;
+      }
       if (modelSel) setSelection(modelSel);
     };
     document.addEventListener("selectionchange", handler);
     return () => document.removeEventListener("selectionchange", handler);
   }, [setSelection]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     let drag = null;
@@ -2824,7 +3474,7 @@ function Editor({
       document.removeEventListener("pointerup", onPointerUp);
     };
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const onDragOver = (e) => {
@@ -2862,7 +3512,7 @@ function Editor({
       root.removeEventListener("drop", onDrop);
     };
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const onPointerDown = (e) => {
@@ -2890,7 +3540,95 @@ function Editor({
     root.addEventListener("pointerdown", onPointerDown);
     return () => root.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const same = (a, b) => a === b || !!a && !!b && a.blockIndex === b.blockIndex && a.offset === b.offset && (a.cellIndex ?? -1) === (b.cellIndex ?? -1);
+    const set = (next) => {
+      if (same(next, hoveredBehindRef.current)) return;
+      hoveredBehindRef.current = next;
+      setHoveredBehind(next);
+    };
+    let raf = 0;
+    const onMove = (e) => {
+      if (raf) return;
+      const x = e.clientX;
+      const y = e.clientY;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        const imgs = root.querySelectorAll(
+          'img[data-embed="image"][data-embed-layout="behind"]'
+        );
+        let hit = null;
+        for (const img of imgs) {
+          const r = img.getBoundingClientRect();
+          if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) {
+            hit = img;
+            break;
+          }
+        }
+        if (!hit) {
+          set(null);
+          return;
+        }
+        const blockEl = hit.closest("[data-block-index]");
+        const offsetAttr = hit.dataset.embedOffset;
+        if (!blockEl || offsetAttr == null) {
+          set(null);
+          return;
+        }
+        const blockIndex = Number.parseInt(blockEl.dataset.blockIndex, 10);
+        const fragmentStart = Number.parseInt(blockEl.dataset.fragmentStart ?? "0", 10) || 0;
+        const cellEl = hit.closest("[data-cell-index]");
+        const cellIndex = cellEl ? Number.parseInt(cellEl.dataset.cellIndex, 10) : void 0;
+        set({ blockIndex, offset: fragmentStart + Number.parseInt(offsetAttr, 10), cellIndex });
+      });
+    };
+    const onLeave = () => set(null);
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerleave", onLeave);
+    return () => {
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerleave", onLeave);
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, []);
+  (0, import_react14.useEffect)(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const clear = () => {
+      if (hoveredLinkElRef.current) {
+        hoveredLinkElRef.current = null;
+        setHoveredLink(null);
+      }
+    };
+    const onOver = (e) => {
+      const target = e.target;
+      const a = target?.closest?.("a[href]");
+      if (a && root.contains(a)) {
+        if (hoveredLinkElRef.current === a) return;
+        hoveredLinkElRef.current = a;
+        const r = a.getBoundingClientRect();
+        setHoveredLink({
+          href: a.getAttribute("href") ?? "",
+          rect: { top: r.top, left: r.left, bottom: r.bottom, width: r.width }
+        });
+      } else {
+        clear();
+      }
+    };
+    root.addEventListener("mouseover", onOver);
+    root.addEventListener("mouseleave", clear);
+    root.addEventListener("scroll", clear, true);
+    window.addEventListener("scroll", clear, true);
+    return () => {
+      root.removeEventListener("mouseover", onOver);
+      root.removeEventListener("mouseleave", clear);
+      root.removeEventListener("scroll", clear, true);
+      window.removeEventListener("scroll", clear, true);
+    };
+  }, []);
+  (0, import_react14.useEffect)(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = (e) => {
@@ -2904,14 +3642,14 @@ function Editor({
           const data = e.data ?? "";
           if (data.length > 0) {
             e.preventDefault();
-            (0, import_core5.insertText)(ctx, data, ed.consumePendingMarks());
+            (0, import_core6.insertText)(ctx, data, ed.consumePendingMarks());
           }
           return;
         }
         case "insertLineBreak": {
           e.preventDefault();
           if (ed.getBlockType() === "listItem") {
-            (0, import_core5.insertText)(ctx, "\n", ed.consumePendingMarks());
+            (0, import_core6.insertText)(ctx, "\n", ed.consumePendingMarks());
             return;
           }
           const selEmbed = ed.getSelectedEmbed();
@@ -2931,7 +3669,7 @@ function Editor({
             });
           }
           if (ed.splitListItem()) return;
-          (0, import_core5.insertParagraph)(ctx);
+          (0, import_core6.insertParagraph)(ctx);
           return;
         }
         case "insertParagraph": {
@@ -2953,35 +3691,19 @@ function Editor({
             });
           }
           if (ed.splitListItem()) return;
-          (0, import_core5.insertParagraph)(ctx);
+          (0, import_core6.insertParagraph)(ctx);
           return;
         }
         case "insertReplacementText": {
           const text = e.data ?? e.dataTransfer?.getData("text/plain") ?? "";
           if (text.length > 0) {
             e.preventDefault();
-            (0, import_core5.insertText)(ctx, text, ed.consumePendingMarks());
+            (0, import_core6.insertText)(ctx, text, ed.consumePendingMarks());
           }
           return;
         }
         case "insertFromPaste": {
           e.preventDefault();
-          const images = Array.from(e.dataTransfer?.files ?? []).filter(
-            (f) => f.type.startsWith("image/")
-          );
-          if (images.length > 0) {
-            void (async () => {
-              for (const f of images) await editorRef.current.insertImageFromFile(f);
-            })();
-            return;
-          }
-          const text = e.dataTransfer?.getData("text/plain") ?? "";
-          if (text.length === 0) return;
-          const lines = text.split(/\r\n|\r|\n/);
-          lines.forEach((line, i) => {
-            if (i > 0) (0, import_core5.insertParagraph)(ctx);
-            if (line.length > 0) (0, import_core5.insertText)(ctx, line);
-          });
           return;
         }
         case "deleteContentBackward":
@@ -2989,7 +3711,7 @@ function Editor({
         case "deleteSoftLineBackward":
         case "deleteHardLineBackward": {
           e.preventDefault();
-          (0, import_core5.deleteBackward)(ctx);
+          (0, import_core6.deleteBackward)(ctx);
           return;
         }
         case "deleteContentForward":
@@ -2997,7 +3719,7 @@ function Editor({
         case "deleteSoftLineForward":
         case "deleteHardLineForward": {
           e.preventDefault();
-          (0, import_core5.deleteForward)(ctx);
+          (0, import_core6.deleteForward)(ctx);
           return;
         }
         case "historyUndo": {
@@ -3019,7 +3741,67 @@ function Editor({
     root.addEventListener("beforeinput", handler);
     return () => root.removeEventListener("beforeinput", handler);
   }, []);
-  const onKeyDown = (0, import_react12.useCallback)((e) => {
+  (0, import_react14.useEffect)(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const writeSlice = (e) => {
+      const ctx = ctxRef.current;
+      const slice = (0, import_core6.serializeSelection)(ctx.doc, ctx.getSelection());
+      if (!slice || !e.clipboardData) return false;
+      e.clipboardData.setData(import_core6.SOFER_MIME, JSON.stringify(slice));
+      e.clipboardData.setData("text/plain", (0, import_core6.sliceToText)(slice));
+      return true;
+    };
+    const onCopy = (e) => {
+      if (writeSlice(e)) e.preventDefault();
+    };
+    const onCut = (e) => {
+      e.preventDefault();
+      if (writeSlice(e)) (0, import_core6.deleteSelection)(ctxRef.current);
+    };
+    const onPaste = (e) => {
+      const ctx = ctxRef.current;
+      const cd = e.clipboardData;
+      if (!cd) return;
+      const raw = cd.getData(import_core6.SOFER_MIME);
+      if (raw) {
+        try {
+          const slice = JSON.parse(raw);
+          if (slice && Array.isArray(slice.blocks)) {
+            e.preventDefault();
+            (0, import_core6.insertSlice)(ctx, slice);
+            return;
+          }
+        } catch {
+        }
+      }
+      const images = Array.from(cd.files ?? []).filter((f) => f.type.startsWith("image/"));
+      if (images.length > 0) {
+        e.preventDefault();
+        void (async () => {
+          for (const f of images) await editorRef.current.insertImageFromFile(f);
+        })();
+        return;
+      }
+      const text = cd.getData("text/plain");
+      if (text.length === 0) return;
+      e.preventDefault();
+      const lines = text.split(/\r\n|\r|\n/);
+      lines.forEach((line, i) => {
+        if (i > 0) (0, import_core6.insertParagraph)(ctx);
+        if (line.length > 0) (0, import_core6.insertText)(ctx, line);
+      });
+    };
+    root.addEventListener("copy", onCopy);
+    root.addEventListener("cut", onCut);
+    root.addEventListener("paste", onPaste);
+    return () => {
+      root.removeEventListener("copy", onCopy);
+      root.removeEventListener("cut", onCut);
+      root.removeEventListener("paste", onPaste);
+    };
+  }, []);
+  const onKeyDown = (0, import_react14.useCallback)((e) => {
     const ed = editorRef.current;
     const mod = e.metaKey || e.ctrlKey;
     if (e.key === "Tab") {
@@ -3093,17 +3875,17 @@ function Editor({
       });
     }
   }, []);
-  const onCompositionStart = (0, import_react12.useCallback)(() => {
+  const onCompositionStart = (0, import_react14.useCallback)(() => {
     isComposingRef.current = true;
   }, []);
-  const onCompositionEnd = (0, import_react12.useCallback)((e) => {
+  const onCompositionEnd = (0, import_react14.useCallback)((e) => {
     isComposingRef.current = false;
     if (e.data && e.data.length > 0) {
-      (0, import_core5.insertText)(ctxRef.current, e.data);
+      (0, import_core6.insertText)(ctxRef.current, e.data);
     }
   }, []);
-  const topLevels = (0, import_react12.useMemo)(() => groupTopLevels(snapshot.blocks), [snapshot]);
-  const topLevelsStructuralKey = (0, import_react12.useMemo)(
+  const topLevels = (0, import_react14.useMemo)(() => groupTopLevels(snapshot.blocks), [snapshot]);
+  const topLevelsStructuralKey = (0, import_react14.useMemo)(
     () => topLevels.map(
       (t) => t.kind === "list" ? `L:${t.listKind}:${t.items.length}:${t.ordinalStart}` : `B:${t.block.type}:${t.block.attrs.level ?? ""}`
     ).join("|"),
@@ -3125,7 +3907,7 @@ function Editor({
     [topLevelsStructuralKey, pageGeometry]
   );
   const effectiveLayout = paginated ? layout : defaultPageLayout(topLevels.length);
-  const pageStyle = (0, import_react12.useMemo)(
+  const pageStyle = (0, import_react14.useMemo)(
     () => paginated ? {
       "--ed-page-width": `${geom.width}px`,
       "--ed-page-height": `${geom.height}px`,
@@ -3144,7 +3926,7 @@ function Editor({
       geom.marginRight
     ]
   );
-  const body = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const body = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -3170,7 +3952,7 @@ function Editor({
           const pageInlineStyle = pi === 0 && geom.firstPageExtraTop ? {
             "--ed-page-margin-top": `${geom.marginTop + geom.firstPageExtraTop}px`
           } : void 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "div",
             {
               className: "ed-page",
@@ -3178,15 +3960,15 @@ function Editor({
               "data-page-total": ctx.pageCount,
               style: pageInlineStyle,
               children: [
-                renderPageHeader && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ed-page-header", contentEditable: false, children: renderPageHeader(ctx) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ed-page-content", children: page.slots.map((slot) => renderSlot(slot, topLevels)) }),
-                renderPageFooter && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ed-page-footer", contentEditable: false, children: renderPageFooter(ctx) })
+                renderPageHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ed-page-header", contentEditable: false, children: renderPageHeader(ctx) }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ed-page-content", children: page.slots.map((slot) => renderSlot(slot, topLevels)) }),
+                renderPageFooter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ed-page-footer", contentEditable: false, children: renderPageFooter(ctx) })
               ]
             },
             `page-${pi}`
           );
         }) : topLevels.map((t) => renderTopLevel(t)),
-        selectedEmbed && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        selectedEmbed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           ImageResizeOverlay,
           {
             rootRef,
@@ -3205,13 +3987,54 @@ function Editor({
               selectedEmbed.offset,
               { offsetX: ox, offsetY: oy },
               selectedEmbed.cellIndex
+            ),
+            onReanchor: (to, ox, oy) => editor.moveEmbedAnchor(
+              {
+                blockIndex: selectedEmbed.blockIndex,
+                offset: selectedEmbed.offset,
+                cellIndex: selectedEmbed.cellIndex
+              },
+              to,
+              ox,
+              oy
             )
           }
+        ),
+        hoveredBehind && !(selectedEmbed && selectedEmbed.blockIndex === hoveredBehind.blockIndex && selectedEmbed.offset === hoveredBehind.offset && (selectedEmbed.cellIndex ?? -1) === (hoveredBehind.cellIndex ?? -1)) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          BehindImageSelectAffordance,
+          {
+            rootRef,
+            blockIndex: hoveredBehind.blockIndex,
+            offset: hoveredBehind.offset,
+            cellIndex: hoveredBehind.cellIndex,
+            onSelect: () => setSelection({
+              anchor: {
+                blockIndex: hoveredBehind.blockIndex,
+                cellIndex: hoveredBehind.cellIndex,
+                offset: hoveredBehind.offset
+              },
+              focus: {
+                blockIndex: hoveredBehind.blockIndex,
+                cellIndex: hoveredBehind.cellIndex,
+                offset: hoveredBehind.offset + 1
+              }
+            })
+          }
+        ),
+        hoveredLink && hoveredLink.href && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LinkHoverTooltip, { href: hoveredLink.href, rect: hoveredLink.rect }),
+        awareness && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          RemoteCursorsOverlay,
+          {
+            rootRef,
+            doc,
+            awareness,
+            revision: snapshot
+          }
         )
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EditorProvider, { editor, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EditorProvider, { editor, children: body });
 }
 function groupTopLevels(snapshot) {
   const out = [];
@@ -3261,7 +4084,7 @@ function renderSlot(slot, topLevels) {
       start: slot.fragment.start,
       end: slot.fragment.end
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       NodeView,
       {
         block: top.block,
@@ -3272,7 +4095,7 @@ function renderSlot(slot, topLevels) {
     );
   }
   if (slot.tableFragment && top.kind === "block" && top.block.type === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       NodeView,
       {
         block: top.block,
@@ -3292,7 +4115,7 @@ function renderTopLevel(top) {
     const tree = buildListTree(top.items);
     return renderListTree(tree, top, top.ordinalStart, `list-${top.key}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NodeView, { block: top.block, index: top.blockIndex }, top.key);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NodeView, { block: top.block, index: top.blockIndex }, top.key);
 }
 function renderListFragment(top, frag) {
   const ranges = topLevelItemRanges(top.items);
@@ -3334,9 +4157,9 @@ function buildListTree(items) {
 function renderListTree(tree, top, start, key) {
   const className = `ed-list ed-list-${top.listKind}`;
   const style = top.listStyle ? { listStyleType: top.listStyle } : void 0;
-  const items = tree.map((node) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, top.listKind, `nested-${node.entry.index}`) : null }, node.entry.index));
+  const items = tree.map((node) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, top.listKind, `nested-${node.entry.index}`) : null }, node.entry.index));
   if (top.listKind === "ordered") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "ol",
       {
         className,
@@ -3348,11 +4171,11 @@ function renderListTree(tree, top, start, key) {
       key
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className, "data-list-kind": "bullet", style, children: items }, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className, "data-list-kind": "bullet", style, children: items }, key);
 }
 function renderNestedListTree(tree, kind, key) {
   const Tag = kind === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tag, { className: `ed-list ed-list-${kind}`, "data-list-kind": kind, children: tree.map((node) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, kind, `nested-${node.entry.index}`) : null }, node.entry.index)) }, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tag, { className: `ed-list ed-list-${kind}`, "data-list-kind": kind, children: tree.map((node) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NodeView, { block: node.entry.block, index: node.entry.index, children: node.children.length > 0 ? renderNestedListTree(node.children, kind, `nested-${node.entry.index}`) : null }, node.entry.index)) }, key);
 }
 function clampListLevel2(l) {
   if (typeof l !== "number" || !Number.isFinite(l)) return 0;
@@ -3380,8 +4203,8 @@ function caretRangeFromPoint(x, y) {
 }
 
 // src/Toolbar.tsx
-var import_react13 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FONT_FAMILIES = ["Arial"];
 var FONT_SIZES = ["8pt", "10pt", "11pt", "12pt", "14pt", "16pt", "18pt", "24pt", "32pt", "48pt"];
 var BLOCK_OPTIONS = [
@@ -3421,6 +4244,8 @@ function Toolbar({ className }) {
     getBlockAttr,
     setBlockType,
     setBlockAttr,
+    setAlign,
+    getAlign,
     isListActive,
     toggleList,
     indentList,
@@ -3429,7 +4254,7 @@ function Toolbar({ className }) {
   const active = getActiveMarks();
   const blockType = getBlockType();
   const blockLevel = getBlockAttr("level");
-  const blockAlign = getBlockAttr("align");
+  const blockAlign = getAlign();
   const blockDir = getBlockAttr("dir");
   const stop = (e) => {
     const t = e.target;
@@ -3472,16 +4297,16 @@ function Toolbar({ className }) {
       );
       return;
     }
-    setBlockAttr("align", value);
+    setAlign(value);
   };
-  const onInsertImageClick = (0, import_react13.useCallback)(
+  const onInsertImageClick = (0, import_react15.useCallback)(
     (e) => {
       e.preventDefault();
       imageInputRef.current?.click();
     },
     []
   );
-  const onImageInputChange = (0, import_react13.useCallback)(
+  const onImageInputChange = (0, import_react15.useCallback)(
     (e) => {
       const file = e.target.files?.[0];
       if (file) void editor.insertImageFromFile(file);
@@ -3489,14 +4314,14 @@ function Toolbar({ className }) {
     },
     [editor]
   );
-  const imageInputRef = (0, import_react13.useRef)(null);
+  const imageInputRef = (0, import_react15.useRef)(null);
   const onToggleDir = (e) => {
     e.preventDefault();
     const next = blockDir === "rtl" ? "ltr" : "rtl";
     setBlockAttr("dir", next);
   };
   const linkActive = isMarkActive("link");
-  const onLinkClick = (0, import_react13.useCallback)(
+  const onLinkClick = (0, import_react15.useCallback)(
     (e) => {
       e.preventDefault();
       const currentHref = active.link && typeof active.link === "object" && "href" in active.link ? active.link.href : "";
@@ -3526,7 +4351,7 @@ function Toolbar({ className }) {
       sel.cellIndex
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: className ?? "ed-toolbar",
@@ -3534,7 +4359,7 @@ function Toolbar({ className }) {
       "aria-label": "Editor toolbar",
       onMouseDown: stop,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "select",
           {
             className: "ed-toolbar-select",
@@ -3543,23 +4368,23 @@ function Toolbar({ className }) {
             onMouseDown: stop,
             "aria-label": "Tipo de bloco",
             children: [
-              blockValue === "" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "\u2014 (misto)" }),
-              BLOCK_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: o.value, children: o.label }, o.value))
+              blockValue === "" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "\u2014 (misto)" }),
+              BLOCK_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: o.value, children: o.label }, o.value))
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarkButton, { title: "Negrito (\u2318B)", pressed: isMarkActive("bold"), onClick: onToggle("bold"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: "B" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarkButton, { title: "It\xE1lico (\u2318I)", pressed: isMarkActive("italic"), onClick: onToggle("italic"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("em", { children: "I" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarkButton, { title: "Sublinhado (\u2318U)", pressed: isMarkActive("underline"), onClick: onToggle("underline"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("u", { children: "U" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarkButton, { title: "Tachado (\u2318\u21E7X)", pressed: isMarkActive("strike"), onClick: onToggle("strike"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("s", { children: "S" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkButton, { title: "Negrito (\u2318B)", pressed: isMarkActive("bold"), onClick: onToggle("bold"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "B" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkButton, { title: "It\xE1lico (\u2318I)", pressed: isMarkActive("italic"), onClick: onToggle("italic"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("em", { children: "I" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkButton, { title: "Sublinhado (\u2318U)", pressed: isMarkActive("underline"), onClick: onToggle("underline"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("u", { children: "U" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkButton, { title: "Tachado (\u2318\u21E7X)", pressed: isMarkActive("strike"), onClick: onToggle("strike"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("s", { children: "S" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "ed-toolbar-label", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: colorValue } }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { type: "color", value: colorValue, onChange: onColorChange, onMouseDown: stop, "aria-label": "Cor do texto" })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ed-toolbar-swatch", "aria-hidden": true, style: { background: colorValue } }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "color", value: colorValue, onChange: onColorChange, onMouseDown: stop, "aria-label": "Cor do texto" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -3574,8 +4399,8 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "select",
             {
               className: "ed-toolbar-select",
@@ -3584,12 +4409,12 @@ function Toolbar({ className }) {
               onMouseDown: stop,
               "aria-label": "Fam\xEDlia da fonte",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "Fonte\u2026" }),
-                FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: f, children: f }, f))
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "Fonte\u2026" }),
+                FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: f, children: f }, f))
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             "select",
             {
               className: "ed-toolbar-select",
@@ -3598,13 +4423,13 @@ function Toolbar({ className }) {
               onMouseDown: stop,
               "aria-label": "Tamanho da fonte",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "Tamanho\u2026" }),
-                FONT_SIZES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: s, children: s }, s))
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: "Tamanho\u2026" }),
+                FONT_SIZES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: s, children: s }, s))
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             type: "button",
@@ -3617,7 +4442,7 @@ function Toolbar({ className }) {
           },
           a.value
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             type: "button",
@@ -3629,8 +4454,8 @@ function Toolbar({ className }) {
             children: blockDir === "rtl" ? "RTL" : "LTR"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -3645,7 +4470,7 @@ function Toolbar({ className }) {
               children: "\u2022"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -3660,7 +4485,7 @@ function Toolbar({ className }) {
               children: "1."
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -3674,7 +4499,7 @@ function Toolbar({ className }) {
               children: "\u21E4"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -3689,7 +4514,7 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             type: "button",
@@ -3701,9 +4526,9 @@ function Toolbar({ className }) {
             children: "\u{1F517}"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TableMenu, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableMenu, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -3714,7 +4539,7 @@ function Toolbar({ className }) {
               children: "\u{1F5BC}"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "input",
             {
               ref: imageInputRef,
@@ -3725,8 +4550,8 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        selectedEmbed && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Group, { children: [
-          IMAGE_LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        selectedEmbed && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
+          IMAGE_LAYOUT_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -3739,7 +4564,7 @@ function Toolbar({ className }) {
             },
             opt.value
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -3769,7 +4594,7 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             type: "button",
@@ -3790,9 +4615,9 @@ function Toolbar({ className }) {
 function TableMenu() {
   const editor = useEditorContext();
   const inTable = editor.isInTable();
-  const [open, setOpen] = (0, import_react13.useState)(false);
-  const rootRef = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const [open, setOpen] = (0, import_react15.useState)(false);
+  const rootRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     if (!open) return;
     const onDown = (e) => {
       if (!rootRef.current) return;
@@ -3802,8 +4627,8 @@ function TableMenu() {
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
@@ -3818,7 +4643,7 @@ function TableMenu() {
         children: "\u25A6"
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         className: "ed-table-popover",
@@ -3830,7 +4655,7 @@ function TableMenu() {
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             TableSizePicker,
             {
               onPick: (rows, cols) => {
@@ -3839,34 +4664,34 @@ function TableMenu() {
               }
             }
           ),
-          inTable && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ed-table-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => {
+          inTable && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ed-table-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertRowAbove();
             }, children: "Inserir linha acima" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertRowBelow();
             }, children: "Inserir linha abaixo" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertColumnLeft();
             }, children: "Inserir coluna \xE0 esquerda" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.insertColumnRight();
             }, children: "Inserir coluna \xE0 direita" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.deleteCurrentRow();
             }, children: "Excluir linha" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.deleteCurrentColumn();
             }, children: "Excluir coluna" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", {}),
-            editor.hasTableRectSelection() && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
+            editor.hasTableRectSelection() && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 type: "button",
@@ -3877,19 +4702,19 @@ function TableMenu() {
                 children: "Mesclar c\xE9lulas selecionadas"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.mergeRight();
             }, children: "Mesclar com c\xE9lula \xE0 direita" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.mergeDown();
             }, children: "Mesclar com c\xE9lula abaixo" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => {
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
               setOpen(false);
               editor.splitCell();
             }, children: "Dividir c\xE9lulas mescladas" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 type: "button",
@@ -3910,11 +4735,11 @@ function TableMenu() {
 var PICKER_MAX_ROWS = 8;
 var PICKER_MAX_COLS = 10;
 function TableSizePicker({ onPick }) {
-  const [hover, setHover] = (0, import_react13.useState)(null);
+  const [hover, setHover] = (0, import_react15.useState)(null);
   const label = hover ? `${hover.r + 1} \xD7 ${hover.c + 1}` : "Inserir tabela";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ed-table-picker", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ed-table-picker-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ed-table-picker", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ed-table-picker-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         className: "ed-table-picker-grid",
@@ -3927,7 +4752,7 @@ function TableSizePicker({ onPick }) {
           { length: PICKER_MAX_ROWS },
           (_, r) => Array.from({ length: PICKER_MAX_COLS }, (_2, c) => {
             const filled = hover != null && r <= hover.r && c <= hover.c;
-            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 type: "button",
@@ -3957,10 +4782,10 @@ function blockSelectValue(type, level) {
   return type;
 }
 function Group({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ed-toolbar-group", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ed-toolbar-group", children });
 }
 function MarkButton({ title, pressed, onClick, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       type: "button",
@@ -3982,6 +4807,7 @@ function MarkButton({ title, pressed, onClick, children }) {
   LinkDialog,
   NodeView,
   PageConfigDialog,
+  RemoteCursorsOverlay,
   Toolbar,
   applyDomSelection,
   contentHeight,
@@ -3993,6 +4819,7 @@ function MarkButton({ title, pressed, onClick, children }) {
   getCellElement,
   getFragmentForOffset,
   isTableRectSelection,
+  locatePoint,
   readDomSelection,
   renderInline,
   selectionsEqual,