@sofereditor/react 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -55,7 +55,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Editor.tsx
 var import_react14 = require("react");
-var import_core8 = require("@sofereditor/core");
+var import_core9 = require("@sofereditor/core");
 
 // src/dom-bridge.ts
 function findContainingBlockElement(node, root) {
@@ -335,6 +335,11 @@ var import_core2 = require("@sofereditor/core");
 
 // src/htmlToSlice.ts
 var import_core = require("@sofereditor/core");
+
+// src/imageConstraints.ts
+var MAX_INSERT_WIDTH = 600;
+
+// src/htmlToSlice.ts
 function htmlToSlice(html) {
   if (!html || html.trim().length === 0) return null;
   let doc;
@@ -353,8 +358,10 @@ function htmlToSlice(html) {
   }
   if (blocks.length === 0) return null;
   normalizeListLevels(blocks);
-  const temTexto = blocks.some((b) => b.text.trim().length > 0);
-  if (!temTexto) return null;
+  const temConteudo = blocks.some(
+    (b) => b.text.trim().length > 0 || b.delta.some((op) => (0, import_core.isImageEmbed)(op.insert))
+  );
+  if (!temConteudo) return null;
   const blockLevel = blocks.length > 1 || blocks[0].type !== "paragraph";
   return { blocks, openStart: false, openEnd: false, ...blockLevel ? { blockLevel: true } : {} };
 }
@@ -465,6 +472,7 @@ function walkBlockLevel(container, marks, blocks) {
         break;
       }
       case "img":
+        loose.push(node);
         break;
       case "br":
         loose.push(node);
@@ -657,7 +665,11 @@ function walkInlineNode(node, marks, ops) {
   const el = node;
   const tag = el.tagName.toLowerCase();
   if (IGNORED_TAGS.has(tag) || isNamespacedTag(tag)) return;
-  if (tag === "img") return;
+  if (tag === "img") {
+    const op = imageEmbedFromElement(el);
+    if (op) ops.push(op);
+    return;
+  }
   if (tag === "br") {
     ops.push({ insert: " " });
     return;
@@ -672,6 +684,73 @@ function walkInlineNode(node, marks, ops) {
   }
   for (const child of Array.from(el.childNodes)) walkInlineNode(child, nextMarks, ops);
 }
+var MIN_EMBED_BYTES = 1024;
+function decodedDataUrlByteLength(dataUrl) {
+  const commaIndex = dataUrl.indexOf(",");
+  if (commaIndex === -1) return 0;
+  const meta = dataUrl.slice(0, commaIndex);
+  const payload = dataUrl.slice(commaIndex + 1);
+  if (/;base64$/i.test(meta)) {
+    const padding = payload.endsWith("==") ? 2 : payload.endsWith("=") ? 1 : 0;
+    return Math.max(0, Math.floor(payload.length * 3 / 4) - padding);
+  }
+  try {
+    return decodeURIComponent(payload).length;
+  } catch {
+    return payload.length;
+  }
+}
+function imageEmbedFromElement(el) {
+  const src = el.getAttribute("src");
+  if (!src || !src.startsWith("data:image/")) return null;
+  if (decodedDataUrlByteLength(src) < MIN_EMBED_BYTES) return null;
+  const style = parseStyle(el.getAttribute("style"));
+  const width = readImageDimension(el, "width", style);
+  const height = readImageDimension(el, "height", style);
+  if (width == null || height == null) return null;
+  let w = width;
+  let h = height;
+  if (w > MAX_INSERT_WIDTH) {
+    h = h * MAX_INSERT_WIDTH / w;
+    w = MAX_INSERT_WIDTH;
+  }
+  return { insert: { type: "image", src, width: Math.round(w), height: Math.round(h) } };
+}
+function readImageDimension(el, attr, style) {
+  const raw = el.getAttribute(attr);
+  if (raw && /^\d+(\.\d+)?$/.test(raw.trim())) {
+    const n = Number.parseFloat(raw);
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  const fromStyle = style[attr];
+  if (fromStyle) {
+    const n = cssLengthToPx(fromStyle);
+    if (n != null) return n;
+  }
+  return void 0;
+}
+function cssLengthToPx(raw) {
+  const v = raw.trim();
+  const m = /^(-?[\d.]+)\s*(px|pt|in|cm|mm)?$/i.exec(v);
+  if (!m) return void 0;
+  const num = Number.parseFloat(m[1]);
+  if (!Number.isFinite(num) || num <= 0) return void 0;
+  const unit = (m[2] ?? "px").toLowerCase();
+  switch (unit) {
+    case "px":
+      return num;
+    case "pt":
+      return num * (96 / 72);
+    case "in":
+      return num * 96;
+    case "cm":
+      return num * (96 / 2.54);
+    case "mm":
+      return num * (96 / 25.4);
+    default:
+      return void 0;
+  }
+}
 function applyTagMarks(tag, marks) {
   switch (tag) {
     case "b":
@@ -939,6 +1018,58 @@ function planPaste(cd) {
   return { kind: "none" };
 }
 
+// src/resolvePastedImages.ts
+var import_core3 = require("@sofereditor/core");
+function sliceHasDataImageEmbeds(slice) {
+  return slice.blocks.some(
+    (b) => b.delta.some((op) => (0, import_core3.isImageEmbed)(op.insert) && op.insert.src.startsWith("data:image/"))
+  );
+}
+async function resolvePastedImageUploads(slice, upload) {
+  if (!upload) return slice;
+  const blocks = await Promise.all(
+    slice.blocks.map(async (block) => {
+      let changed = false;
+      const delta = await Promise.all(
+        block.delta.map(async (op) => {
+          if (!(0, import_core3.isImageEmbed)(op.insert) || !op.insert.src.startsWith("data:image/")) return op;
+          try {
+            const file = await dataUrlToFile(op.insert.src);
+            const newSrc = await upload(file);
+            changed = true;
+            return { ...op, insert: { ...op.insert, src: newSrc } };
+          } catch (err) {
+            console.error(
+              "[sofereditor] falha ao subir imagem colada para o storage \u2014 mantendo a imagem embutida (data:) nesta colagem",
+              err
+            );
+            return op;
+          }
+        })
+      );
+      return changed ? { ...block, delta } : block;
+    })
+  );
+  return { ...slice, blocks };
+}
+async function dataUrlToFile(dataUrl) {
+  const blob = await fetch(dataUrl).then((r) => r.blob());
+  const mime = blob.type;
+  return new File([blob], `imagem-colada-${Date.now()}.${extensionForMime(mime)}`, { type: mime });
+}
+var MIME_EXTENSIONS = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/jpg": "jpg",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/bmp": "bmp",
+  "image/svg+xml": "svg"
+};
+function extensionForMime(mime) {
+  return MIME_EXTENSIONS[mime.toLowerCase()] ?? "png";
+}
+
 // src/BehindImageSelectAffordance.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1255,7 +1386,7 @@ function LinkDialog() {
 
 // src/PageConfigDialog.tsx
 var import_react3 = require("react");
-var import_core3 = require("@sofereditor/core");
+var import_core4 = require("@sofereditor/core");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function PageConfigDialog() {
   const { pageConfigRequest, resolvePageConfigRequest, setPageSettings } = useEditorContext();
@@ -1289,14 +1420,14 @@ function PageConfigDialog() {
   }, [pageConfigRequest]);
   (0, import_react3.useEffect)(() => {
     if (sizePreset === "custom") return;
-    const p = import_core3.PAGE_PRESETS[sizePreset];
-    setWidthMm(roundMm((0, import_core3.pxToMm)(p.width)));
-    setHeightMm(roundMm((0, import_core3.pxToMm)(p.height)));
+    const p = import_core4.PAGE_PRESETS[sizePreset];
+    setWidthMm(roundMm((0, import_core4.pxToMm)(p.width)));
+    setHeightMm(roundMm((0, import_core4.pxToMm)(p.height)));
   }, [sizePreset]);
   (0, import_react3.useEffect)(() => {
     if (marginPreset === "custom") return;
-    const px = import_core3.MARGIN_PRESETS[marginPreset];
-    const mm = roundMm((0, import_core3.pxToMm)(px));
+    const px = import_core4.MARGIN_PRESETS[marginPreset];
+    const mm = roundMm((0, import_core4.pxToMm)(px));
     setMarginTopMm(mm);
     setMarginBottomMm(mm);
     setMarginLeftMm(mm);
@@ -1305,8 +1436,8 @@ function PageConfigDialog() {
   const customWidth = sizePreset === "custom";
   const previewPx = (0, import_react3.useMemo)(
     () => ({
-      width: Math.round((0, import_core3.mmToPx)(widthMm)),
-      height: Math.round((0, import_core3.mmToPx)(heightMm))
+      width: Math.round((0, import_core4.mmToPx)(widthMm)),
+      height: Math.round((0, import_core4.mmToPx)(heightMm))
     }),
     [widthMm, heightMm]
   );
@@ -1314,12 +1445,12 @@ function PageConfigDialog() {
   const onApply = (e) => {
     e.preventDefault();
     const next = {
-      width: (0, import_core3.mmToPx)(widthMm),
-      height: (0, import_core3.mmToPx)(heightMm),
-      marginTop: (0, import_core3.mmToPx)(marginTopMm),
-      marginBottom: (0, import_core3.mmToPx)(marginBottomMm),
-      marginLeft: (0, import_core3.mmToPx)(marginLeftMm),
-      marginRight: (0, import_core3.mmToPx)(marginRightMm)
+      width: (0, import_core4.mmToPx)(widthMm),
+      height: (0, import_core4.mmToPx)(heightMm),
+      marginTop: (0, import_core4.mmToPx)(marginTopMm),
+      marginBottom: (0, import_core4.mmToPx)(marginBottomMm),
+      marginLeft: (0, import_core4.mmToPx)(marginLeftMm),
+      marginRight: (0, import_core4.mmToPx)(marginRightMm)
     };
     setPageSettings(next);
     resolvePageConfigRequest(true);
@@ -1578,14 +1709,14 @@ function roundMm(mm) {
   return Math.round(mm * 10) / 10;
 }
 function hydrateFromSettings(s, setters) {
-  const preset = (0, import_core3.detectPreset)(s.width, s.height);
+  const preset = (0, import_core4.detectPreset)(s.width, s.height);
   setters.setSizePreset(preset);
-  setters.setWidthMm(roundMm((0, import_core3.pxToMm)(s.width)));
-  setters.setHeightMm(roundMm((0, import_core3.pxToMm)(s.height)));
-  const top = roundMm((0, import_core3.pxToMm)(s.marginTop));
-  const bottom = roundMm((0, import_core3.pxToMm)(s.marginBottom));
-  const left = roundMm((0, import_core3.pxToMm)(s.marginLeft));
-  const right = roundMm((0, import_core3.pxToMm)(s.marginRight));
+  setters.setWidthMm(roundMm((0, import_core4.pxToMm)(s.width)));
+  setters.setHeightMm(roundMm((0, import_core4.pxToMm)(s.height)));
+  const top = roundMm((0, import_core4.pxToMm)(s.marginTop));
+  const bottom = roundMm((0, import_core4.pxToMm)(s.marginBottom));
+  const left = roundMm((0, import_core4.pxToMm)(s.marginLeft));
+  const right = roundMm((0, import_core4.pxToMm)(s.marginRight));
   setters.setMarginTopMm(top);
   setters.setMarginBottomMm(bottom);
   setters.setMarginLeftMm(left);
@@ -1596,7 +1727,7 @@ function detectMarginPreset(s) {
   const TOL = 1;
   const allEqual = Math.abs(s.marginTop - s.marginBottom) <= TOL && Math.abs(s.marginTop - s.marginLeft) <= TOL && Math.abs(s.marginTop - s.marginRight) <= TOL;
   if (!allEqual) return "custom";
-  for (const [name, px] of Object.entries(import_core3.MARGIN_PRESETS)) {
+  for (const [name, px] of Object.entries(import_core4.MARGIN_PRESETS)) {
     if (Math.abs(s.marginTop - px) <= TOL) return name;
   }
   return "custom";
@@ -2156,7 +2287,7 @@ function Handle({
 
 // src/RemoteCursorsOverlay.tsx
 var import_react7 = require("react");
-var import_core4 = require("@sofereditor/core");
+var import_core5 = require("@sofereditor/core");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var DEFAULT_COLOR = "#3b82f6";
 function RemoteCursorsOverlay({
@@ -2179,7 +2310,7 @@ function RemoteCursorsOverlay({
       if (clientId === awareness.clientID) return;
       const s = state;
       if (!s.cursor) return;
-      const sel = (0, import_core4.decodeSelection)(doc, s.cursor);
+      const sel = (0, import_core5.decodeSelection)(doc, s.cursor);
       if (!sel) return;
       const color = s.user?.color || DEFAULT_COLOR;
       const name = s.user?.name || "An\xF4nimo";
@@ -2326,11 +2457,11 @@ function RemoteCursorsOverlay({
 
 // src/NodeView.tsx
 var import_react10 = require("react");
-var import_core6 = require("@sofereditor/core");
+var import_core7 = require("@sofereditor/core");
 
 // src/renderInline.tsx
 var import_react8 = require("react");
-var import_core5 = require("@sofereditor/core");
+var import_core6 = 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 === "") {
@@ -2346,7 +2477,7 @@ function renderInline(delta, keyPrefix) {
       const key = `${keyPrefix}-${offset}`;
       body.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.Fragment, { children: wrap(text, op.attributes) }, key));
       offset += text.length;
-    } else if ((0, import_core5.isImageEmbed)(op.insert)) {
+    } else if ((0, import_core6.isImageEmbed)(op.insert)) {
       const key = `${keyPrefix}-${offset}`;
       const layout = op.insert.layout ?? "inline";
       const commentMarkId = op.attributes?.comment?.markId;
@@ -2510,10 +2641,10 @@ function ImageEmbedViewImpl({
   );
 }
 function decorateBlanks(text) {
-  const segs = (0, import_core5.splitUnderscoreRuns)(text);
+  const segs = (0, import_core6.splitUnderscoreRuns)(text);
   if (segs.length === 1 && !segs[0].blank) return text;
   return segs.map(
-    (s, i) => s.blank ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-blank": "true", style: import_core5.BLANK_STYLE, children: s.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.Fragment, { children: s.text }, i)
+    (s, i) => s.blank ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-blank": "true", style: import_core6.BLANK_STYLE, children: s.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.Fragment, { children: s.text }, i)
   );
 }
 function wrap(text, attrs) {
@@ -2772,7 +2903,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
 function commonBlockProps(attrs, index, type, fragment) {
   const style = {};
   if (attrs.align) style.textAlign = attrs.align;
-  Object.assign(style, (0, import_core6.answerLineStyle)(attrs) ?? {});
+  Object.assign(style, (0, import_core7.answerLineStyle)(attrs) ?? {});
   const base = {
     "data-block-index": index,
     "data-block-type": type,
@@ -2819,7 +2950,7 @@ function TableView({ block, index, tableFragment }) {
   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_core6.tableRectSelection)(editor.doc, editor.selection);
+    return (0, import_core7.tableRectSelection)(editor.doc, editor.selection);
   }, [editor.doc, editor.selection, index]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ed-table-wrap", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -2855,7 +2986,7 @@ function TableView({ block, index, tableFragment }) {
                     cell?.attrs,
                     // rowStart/rowEnd são os limites do FRAGMENTO: numa tabela
                     // quebrada entre páginas, cada página fecha a própria caixa.
-                    (0, import_core6.cellBorderStyle)(
+                    (0, import_core7.cellBorderStyle)(
                       block.attrs.borderPreset,
                       { row: r, col: c, rowspan, colspan, cols, rowStart, rowEnd },
                       "screen",
@@ -3431,14 +3562,13 @@ function shallowEqual(a, b) {
 }
 
 // src/useEditor.ts
-var import_core7 = require("@sofereditor/core");
-var MAX_INSERT_WIDTH = 600;
+var import_core8 = require("@sofereditor/core");
 function useEditor(opts = {}) {
-  const doc = (0, import_react13.useMemo)(() => opts.document ?? new import_core7.EditorDocument(), [opts.document]);
-  const history = (0, import_react13.useMemo)(() => new import_core7.EditorHistory(doc), [doc]);
+  const doc = (0, import_react13.useMemo)(() => opts.document ?? new import_core8.EditorDocument(), [opts.document]);
+  const history = (0, import_react13.useMemo)(() => new import_core8.EditorHistory(doc), [doc]);
   const [snapshot, setSnapshot] = (0, import_react13.useState)(() => doc.toJSON());
   const [selection, setSelectionState] = (0, import_react13.useState)(
-    () => (0, import_core7.collapsedSelection)({ blockIndex: 0, offset: 0 })
+    () => (0, import_core8.collapsedSelection)({ blockIndex: 0, offset: 0 })
   );
   const selectionRef = (0, import_react13.useRef)(selection);
   selectionRef.current = selection;
@@ -3503,7 +3633,7 @@ function useEditor(opts = {}) {
   const isMarkActive = (0, import_react13.useCallback)(
     (name, value) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core7.orderedRange)(sel);
+      const { start, end } = (0, import_core8.orderedRange)(sel);
       if (start.blockIndex === end.blockIndex && start.offset === end.offset) {
         const pending = pendingMarksRef.current[name];
         if (pending !== void 0) {
@@ -3512,7 +3642,7 @@ function useEditor(opts = {}) {
         }
         const yText2 = doc.getBlockText(start.blockIndex);
         if (!yText2 || start.offset === 0) return false;
-        return (0, import_core7.isMarkUniformInRange)(yText2, start.offset - 1, start.offset, name, value);
+        return (0, import_core8.isMarkUniformInRange)(yText2, start.offset - 1, start.offset, name, value);
       }
       if (start.blockIndex !== end.blockIndex) {
         for (let i = start.blockIndex; i <= end.blockIndex; i++) {
@@ -3521,19 +3651,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_core7.isMarkUniformInRange)(yText2, s, e, name, value)) return false;
+          if (!(0, import_core8.isMarkUniformInRange)(yText2, s, e, name, value)) return false;
         }
         return true;
       }
       const yText = doc.getBlockText(start.blockIndex);
       if (!yText) return false;
-      return (0, import_core7.isMarkUniformInRange)(yText, start.offset, end.offset, name, value);
+      return (0, import_core8.isMarkUniformInRange)(yText, start.offset, end.offset, name, value);
     },
     [doc]
   );
   const getActiveMarks = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
-    const { start, end } = (0, import_core7.orderedRange)(sel);
+    const { start, end } = (0, import_core8.orderedRange)(sel);
     if (start.blockIndex !== end.blockIndex) {
       return {};
     }
@@ -3541,14 +3671,14 @@ function useEditor(opts = {}) {
     if (!yText) return {};
     if (start.offset === end.offset) {
       if (start.offset === 0) return {};
-      return (0, import_core7.getMarksInRange)(yText, start.offset - 1, start.offset);
+      return (0, import_core8.getMarksInRange)(yText, start.offset - 1, start.offset);
     }
-    return (0, import_core7.getMarksInRange)(yText, start.offset, end.offset);
+    return (0, import_core8.getMarksInRange)(yText, start.offset, end.offset);
   }, [doc]);
   const toggleMark = (0, import_react13.useCallback)(
     (name, value) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core7.orderedRange)(sel);
+      const { start, end } = (0, import_core8.orderedRange)(sel);
       const isCollapsed = start.blockIndex === end.blockIndex && start.offset === end.offset;
       if (isCollapsed) {
         const next = { ...pendingMarksRef.current };
@@ -3561,39 +3691,39 @@ function useEditor(opts = {}) {
         setPendingMarks(next);
         return;
       }
-      (0, import_core7.toggleMark)(ctxRef.current, name, value);
+      (0, import_core8.toggleMark)(ctxRef.current, name, value);
     },
     [isMarkActive, setPendingMarks]
   );
   const setMark = (0, import_react13.useCallback)(
     (name, value) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core7.orderedRange)(sel);
+      const { start, end } = (0, import_core8.orderedRange)(sel);
       const isCollapsed = start.blockIndex === end.blockIndex && start.offset === end.offset;
       if (isCollapsed) {
         setPendingMarks({ ...pendingMarksRef.current, [name]: value });
         return;
       }
-      (0, import_core7.setMark)(ctxRef.current, name, value);
+      (0, import_core8.setMark)(ctxRef.current, name, value);
     },
     [setPendingMarks]
   );
   const removeMark = (0, import_react13.useCallback)(
     (name) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core7.orderedRange)(sel);
+      const { start, end } = (0, import_core8.orderedRange)(sel);
       const isCollapsed = start.blockIndex === end.blockIndex && start.offset === end.offset;
       if (isCollapsed) {
         setPendingMarks({ ...pendingMarksRef.current, [name]: null });
         return;
       }
-      (0, import_core7.removeMark)(ctxRef.current, name);
+      (0, import_core8.removeMark)(ctxRef.current, name);
     },
     [setPendingMarks]
   );
   const getBlockType = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
-    const { start, end } = (0, import_core7.orderedRange)(sel);
+    const { start, end } = (0, import_core8.orderedRange)(sel);
     const first = doc.getBlockType(start.blockIndex);
     if (first === void 0) return "paragraph";
     for (let i = start.blockIndex + 1; i <= end.blockIndex; i++) {
@@ -3604,7 +3734,7 @@ function useEditor(opts = {}) {
   const getBlockAttr = (0, import_react13.useCallback)(
     (key) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core7.orderedRange)(sel);
+      const { start, end } = (0, import_core8.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];
@@ -3615,19 +3745,19 @@ function useEditor(opts = {}) {
     [doc]
   );
   const setBlockType = (0, import_react13.useCallback)((type, attrs) => {
-    (0, import_core7.setBlockType)(ctxRef.current, type, attrs);
+    (0, import_core8.setBlockType)(ctxRef.current, type, attrs);
   }, []);
   const setBlockAttr = (0, import_react13.useCallback)(
     (key, value) => {
-      (0, import_core7.setBlockAttr)(ctxRef.current, key, value);
+      (0, import_core8.setBlockAttr)(ctxRef.current, key, value);
     },
     []
   );
   const setAlign = (0, import_react13.useCallback)((value) => {
     const sel = selectionRef.current;
     const inCell = sel.focus.cellIndex != null;
-    if (inCell) (0, import_core7.setCellAttr)(ctxRef.current, "align", value);
-    else (0, import_core7.setBlockAttr)(ctxRef.current, "align", value);
+    if (inCell) (0, import_core8.setCellAttr)(ctxRef.current, "align", value);
+    else (0, import_core8.setBlockAttr)(ctxRef.current, "align", value);
   }, []);
   const getAlign = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
@@ -3637,7 +3767,7 @@ function useEditor(opts = {}) {
     return getBlockAttr("align");
   }, [doc, getBlockAttr]);
   const setCellBackground = (0, import_react13.useCallback)((color) => {
-    (0, import_core7.setCellAttr)(ctxRef.current, "bgColor", color);
+    (0, import_core8.setCellAttr)(ctxRef.current, "bgColor", color);
   }, []);
   const getCellBackground = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
@@ -3647,7 +3777,7 @@ function useEditor(opts = {}) {
   const setTableBorderPreset = (0, import_react13.useCallback)((preset) => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return;
-    (0, import_core7.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderPreset", preset);
+    (0, import_core8.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderPreset", preset);
   }, [doc]);
   const getTableBorderPreset = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
@@ -3657,7 +3787,7 @@ function useEditor(opts = {}) {
   const setTableBorderColor = (0, import_react13.useCallback)((color) => {
     const sel = selectionRef.current;
     if (!doc.isTable(sel.focus.blockIndex)) return;
-    (0, import_core7.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderColor", color);
+    (0, import_core8.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderColor", color);
   }, [doc]);
   const getTableBorderColor = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
@@ -3667,7 +3797,7 @@ function useEditor(opts = {}) {
   const isListActive = (0, import_react13.useCallback)(
     (kind) => {
       const sel = selectionRef.current;
-      const { start, end } = (0, import_core7.orderedRange)(sel);
+      const { start, end } = (0, import_core8.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;
@@ -3677,112 +3807,112 @@ function useEditor(opts = {}) {
     [doc]
   );
   const toggleList = (0, import_react13.useCallback)((kind) => {
-    (0, import_core7.toggleList)(ctxRef.current, kind);
+    (0, import_core8.toggleList)(ctxRef.current, kind);
   }, []);
   const indentList = (0, import_react13.useCallback)(() => {
-    (0, import_core7.indentList)(ctxRef.current);
+    (0, import_core8.indentList)(ctxRef.current);
   }, []);
   const dedentList = (0, import_react13.useCallback)(() => {
-    (0, import_core7.dedentList)(ctxRef.current);
+    (0, import_core8.dedentList)(ctxRef.current);
   }, []);
   const splitListItem = (0, import_react13.useCallback)(() => {
-    return (0, import_core7.splitListItem)(ctxRef.current);
+    return (0, import_core8.splitListItem)(ctxRef.current);
   }, []);
   const isInTable = (0, import_react13.useCallback)(() => {
     return selectionRef.current.focus.cellIndex != null;
   }, []);
   const getTableLocation = (0, import_react13.useCallback)(() => {
-    return (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    return (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
   }, [doc]);
   const insertTable = (0, import_react13.useCallback)((rows, cols) => {
-    (0, import_core7.insertTable)(ctxRef.current, rows, cols);
+    (0, import_core8.insertTable)(ctxRef.current, rows, cols);
   }, []);
   const insertAnswerLines = (0, import_react13.useCallback)((count, spacing) => {
-    (0, import_core7.insertAnswerLines)(ctxRef.current, count, spacing);
+    (0, import_core8.insertAnswerLines)(ctxRef.current, count, spacing);
   }, []);
   const deleteTable = (0, import_react13.useCallback)((blockIndex) => {
     const idx = blockIndex ?? selectionRef.current.focus.blockIndex;
-    (0, import_core7.deleteTable)(ctxRef.current, idx);
+    (0, import_core8.deleteTable)(ctxRef.current, idx);
   }, []);
   const insertRowAbove = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core7.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "before");
+    (0, import_core8.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "before");
   }, [doc]);
   const insertRowBelow = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core7.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "after");
+    (0, import_core8.insertTableRow)(ctxRef.current, loc.blockIndex, loc.row, "after");
   }, [doc]);
   const deleteCurrentRow = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core7.deleteTableRow)(ctxRef.current, loc.blockIndex, loc.row);
+    (0, import_core8.deleteTableRow)(ctxRef.current, loc.blockIndex, loc.row);
   }, [doc]);
   const insertColumnLeft = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core7.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "before");
+    (0, import_core8.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "before");
   }, [doc]);
   const insertColumnRight = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core7.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "after");
+    (0, import_core8.insertTableColumn)(ctxRef.current, loc.blockIndex, loc.col, "after");
   }, [doc]);
   const deleteCurrentColumn = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return;
-    (0, import_core7.deleteTableColumn)(ctxRef.current, loc.blockIndex, loc.col);
+    (0, import_core8.deleteTableColumn)(ctxRef.current, loc.blockIndex, loc.col);
   }, [doc]);
   const moveToNextCell = (0, import_react13.useCallback)(() => {
-    (0, import_core7.moveToNextCell)(ctxRef.current);
+    (0, import_core8.moveToNextCell)(ctxRef.current);
   }, []);
   const moveToPrevCell = (0, import_react13.useCallback)(() => {
-    (0, import_core7.moveToPrevCell)(ctxRef.current);
+    (0, import_core8.moveToPrevCell)(ctxRef.current);
   }, []);
   const mergeRight = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return false;
-    return (0, import_core7.mergeRight)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
+    return (0, import_core8.mergeRight)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
   const mergeDown = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return false;
-    return (0, import_core7.mergeDown)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
+    return (0, import_core8.mergeDown)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
   const splitCell = (0, import_react13.useCallback)(() => {
-    const loc = (0, import_core7.tableLocationOf)(doc, selectionRef.current.focus);
+    const loc = (0, import_core8.tableLocationOf)(doc, selectionRef.current.focus);
     if (!loc) return false;
-    return (0, import_core7.splitCell)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
+    return (0, import_core8.splitCell)(ctxRef.current, loc.blockIndex, loc.row, loc.col);
   }, [doc]);
   const setColumnWidth = (0, import_react13.useCallback)(
     (blockIndex, col, widthPx) => {
-      (0, import_core7.setColumnWidth)(ctxRef.current, blockIndex, col, widthPx);
+      (0, import_core8.setColumnWidth)(ctxRef.current, blockIndex, col, widthPx);
     },
     []
   );
   const getTableRect = (0, import_react13.useCallback)(
-    () => (0, import_core7.tableRectSelection)(doc, selectionRef.current),
+    () => (0, import_core8.tableRectSelection)(doc, selectionRef.current),
     [doc]
   );
   const hasTableRectSelection = (0, import_react13.useCallback)(() => {
-    return (0, import_core7.tableRectSelection)(doc, selectionRef.current) !== null;
+    return (0, import_core8.tableRectSelection)(doc, selectionRef.current) !== null;
   }, [doc]);
   const mergeSelection = (0, import_react13.useCallback)(() => {
-    return (0, import_core7.mergeSelection)(ctxRef.current);
+    return (0, import_core8.mergeSelection)(ctxRef.current);
   }, []);
   const insertImage = (0, import_react13.useCallback)((embed) => {
-    (0, import_core7.insertImage)(ctxRef.current, embed);
+    (0, import_core8.insertImage)(ctxRef.current, embed);
   }, []);
   const setImageAttrs = (0, import_react13.useCallback)(
     (blockIndex, offset, partial, cellIndex, newOffset) => {
-      (0, import_core7.setImageAttrs)(ctxRef.current, blockIndex, offset, partial, cellIndex, newOffset);
+      (0, import_core8.setImageAttrs)(ctxRef.current, blockIndex, offset, partial, cellIndex, newOffset);
     },
     []
   );
   const moveEmbedAnchor = (0, import_react13.useCallback)(
     (from, to, newOffsetX, newOffsetY) => {
-      (0, import_core7.moveEmbedAnchor)(ctxRef.current, from, to, newOffsetX, newOffsetY);
+      (0, import_core8.moveEmbedAnchor)(ctxRef.current, from, to, newOffsetX, newOffsetY);
     },
     []
   );
@@ -3800,7 +3930,7 @@ function useEditor(opts = {}) {
     }
     const upload = uploadImageRef.current;
     const src = upload ? await upload(file) : dataUrl;
-    (0, import_core7.insertImage)(ctxRef.current, { type: "image", src, width: w, height: h });
+    (0, import_core8.insertImage)(ctxRef.current, { type: "image", src, width: w, height: h });
   }, []);
   const getSelectedEmbed = (0, import_react13.useCallback)(() => {
     const sel = selectionRef.current;
@@ -3819,7 +3949,7 @@ function useEditor(opts = {}) {
         cursor += op.insert.length;
         continue;
       }
-      if (cursor === start && (0, import_core7.isImageEmbed)(op.insert)) {
+      if (cursor === start && (0, import_core8.isImageEmbed)(op.insert)) {
         return {
           blockIndex: sel.anchor.blockIndex,
           cellIndex: sel.anchor.cellIndex,
@@ -3952,7 +4082,8 @@ function useEditor(opts = {}) {
     resolvePageConfigRequest,
     imageCaptionRequest,
     requestImageCaption,
-    resolveImageCaptionRequest
+    resolveImageCaptionRequest,
+    uploadImage: opts.uploadImage
   };
 }
 function readAsDataURL(file) {
@@ -3999,6 +4130,7 @@ function Editor({
   const { doc, history, snapshot, getSelection, setSelection } = editor;
   const rootRef = (0, import_react14.useRef)(null);
   const isComposingRef = (0, import_react14.useRef)(false);
+  const pasteInFlightRef = (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);
@@ -4014,7 +4146,7 @@ function Editor({
       const sel = readDomSelection(root);
       awareness.setLocalStateField(
         "cursor",
-        sel ? (0, import_core8.encodeSelection)(doc, sel) ?? null : null
+        sel ? (0, import_core9.encodeSelection)(doc, sel) ?? null : null
       );
     };
     const onSelChange = () => {
@@ -4315,14 +4447,14 @@ function Editor({
           const data = e.data ?? "";
           if (data.length > 0) {
             e.preventDefault();
-            (0, import_core8.insertText)(ctx, data, ed.consumePendingMarks());
+            (0, import_core9.insertText)(ctx, data, ed.consumePendingMarks());
           }
           return;
         }
         case "insertLineBreak": {
           e.preventDefault();
           if (ed.getBlockType() === "listItem") {
-            (0, import_core8.insertText)(ctx, "\n", ed.consumePendingMarks());
+            (0, import_core9.insertText)(ctx, "\n", ed.consumePendingMarks());
             return;
           }
           const selEmbed = ed.getSelectedEmbed();
@@ -4342,7 +4474,7 @@ function Editor({
             });
           }
           if (ed.splitListItem()) return;
-          (0, import_core8.insertParagraph)(ctx);
+          (0, import_core9.insertParagraph)(ctx);
           return;
         }
         case "insertParagraph": {
@@ -4364,14 +4496,14 @@ function Editor({
             });
           }
           if (ed.splitListItem()) return;
-          (0, import_core8.insertParagraph)(ctx);
+          (0, import_core9.insertParagraph)(ctx);
           return;
         }
         case "insertReplacementText": {
           const text = e.data ?? e.dataTransfer?.getData("text/plain") ?? "";
           if (text.length > 0) {
             e.preventDefault();
-            (0, import_core8.insertText)(ctx, text, ed.consumePendingMarks());
+            (0, import_core9.insertText)(ctx, text, ed.consumePendingMarks());
           }
           return;
         }
@@ -4384,7 +4516,7 @@ function Editor({
         case "deleteSoftLineBackward":
         case "deleteHardLineBackward": {
           e.preventDefault();
-          (0, import_core8.deleteBackward)(ctx);
+          (0, import_core9.deleteBackward)(ctx);
           return;
         }
         case "deleteContentForward":
@@ -4392,7 +4524,7 @@ function Editor({
         case "deleteSoftLineForward":
         case "deleteHardLineForward": {
           e.preventDefault();
-          (0, import_core8.deleteForward)(ctx);
+          (0, import_core9.deleteForward)(ctx);
           return;
         }
         case "historyUndo": {
@@ -4419,10 +4551,10 @@ function Editor({
     if (!root) return;
     const writeSlice = (e) => {
       const ctx = ctxRef.current;
-      const slice = (0, import_core8.serializeSelection)(ctx.doc, ctx.getSelection());
+      const slice = (0, import_core9.serializeSelection)(ctx.doc, ctx.getSelection());
       if (!slice || !e.clipboardData) return false;
-      e.clipboardData.setData(import_core8.SOFER_MIME, JSON.stringify(slice));
-      e.clipboardData.setData("text/plain", (0, import_core8.sliceToText)(slice));
+      e.clipboardData.setData(import_core9.SOFER_MIME, JSON.stringify(slice));
+      e.clipboardData.setData("text/plain", (0, import_core9.sliceToText)(slice));
       return true;
     };
     const onCopy = (e) => {
@@ -4430,7 +4562,7 @@ function Editor({
     };
     const onCut = (e) => {
       e.preventDefault();
-      if (writeSlice(e)) (0, import_core8.deleteSelection)(ctxRef.current);
+      if (writeSlice(e)) (0, import_core9.deleteSelection)(ctxRef.current);
     };
     const onPaste = (e) => {
       const ctx = ctxRef.current;
@@ -4441,9 +4573,48 @@ function Editor({
       e.preventDefault();
       switch (plan.kind) {
         case "sofer":
-        case "html":
-          (0, import_core8.insertSlice)(ctx, plan.slice);
+          (0, import_core9.insertSlice)(ctx, plan.slice);
           return;
+        case "html": {
+          if (!sliceHasDataImageEmbeds(plan.slice)) {
+            (0, import_core9.insertSlice)(ctx, plan.slice);
+            return;
+          }
+          if (pasteInFlightRef.current) {
+            console.warn(
+              "[sofereditor] colagem com imagem ainda subindo \u2014 descartando esta colagem concorrente para n\xE3o corromper a posi\xE7\xE3o de inser\xE7\xE3o"
+            );
+            return;
+          }
+          pasteInFlightRef.current = true;
+          const capturedSelection = ctx.getSelection();
+          void (async () => {
+            try {
+              const resolved = await resolvePastedImageUploads(plan.slice, editorRef.current.uploadImage);
+              const liveSelection = ctxRef.current.getSelection();
+              const userMovedAway = !selectionsEqual(liveSelection, capturedSelection);
+              const { blockIndex, cellIndex } = capturedSelection.focus;
+              const targetText = ctxRef.current.doc.textAt(blockIndex, cellIndex);
+              let insertAt = capturedSelection;
+              if (!targetText) {
+                console.error(
+                  "[sofereditor] bloco de destino da colagem sumiu durante o upload da imagem \u2014 inserindo no fim do documento em vez de descartar a colagem"
+                );
+                const lastIndex = Math.max(0, ctxRef.current.doc.blockCount() - 1);
+                const lastText = ctxRef.current.doc.getBlockText(lastIndex);
+                insertAt = (0, import_core9.collapsedSelection)({ blockIndex: lastIndex, offset: lastText ? lastText.length : 0 });
+              }
+              ctxRef.current.setSelection(insertAt);
+              (0, import_core9.insertSlice)(ctxRef.current, resolved);
+              if (userMovedAway) {
+                ctxRef.current.setSelection(liveSelection);
+              }
+            } finally {
+              pasteInFlightRef.current = false;
+            }
+          })();
+          return;
+        }
         case "images":
           void (async () => {
             for (const f of plan.files) await editorRef.current.insertImageFromFile(f);
@@ -4452,8 +4623,8 @@ function Editor({
         case "text": {
           const lines = plan.text.split(/\r\n|\r|\n/);
           lines.forEach((line, i) => {
-            if (i > 0) (0, import_core8.insertParagraph)(ctx);
-            if (line.length > 0) (0, import_core8.insertText)(ctx, line);
+            if (i > 0) (0, import_core9.insertParagraph)(ctx);
+            if (line.length > 0) (0, import_core9.insertText)(ctx, line);
           });
           return;
         }
@@ -4496,6 +4667,17 @@ function Editor({
       }
       return;
     }
+    if (!mod && (e.key === "Backspace" || e.key === "Delete")) {
+      if (isComposingRef.current) return;
+      const direction = e.key === "Backspace" ? "backward" : "forward";
+      const shouldIntercept = ed.getSelectedEmbed() != null || (0, import_core9.isEmbedAdjacentToCaret)(ctxRef.current, direction);
+      if (shouldIntercept) {
+        e.preventDefault();
+        if (direction === "backward") (0, import_core9.deleteBackward)(ctxRef.current);
+        else (0, import_core9.deleteForward)(ctxRef.current);
+      }
+      return;
+    }
     if (!mod) return;
     const key = e.key.toLowerCase();
     if (!e.shiftKey && !e.altKey && key === "z") {
@@ -4548,7 +4730,7 @@ function Editor({
   const onCompositionEnd = (0, import_react14.useCallback)((e) => {
     isComposingRef.current = false;
     if (e.data && e.data.length > 0) {
-      (0, import_core8.insertText)(ctxRef.current, e.data);
+      (0, import_core9.insertText)(ctxRef.current, e.data);
     }
   }, []);
   const topLevels = (0, import_react14.useMemo)(() => groupTopLevels(snapshot.blocks), [snapshot]);
@@ -4876,7 +5058,7 @@ function caretRangeFromPoint(x, y) {
 
 // src/Toolbar.tsx
 var import_react15 = require("react");
-var import_core9 = require("@sofereditor/core");
+var import_core10 = require("@sofereditor/core");
 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"];
@@ -5348,7 +5530,7 @@ function AnswerLinesMenu() {
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  const clamped = Math.max(1, Math.min(import_core9.ANSWER_LINE_MAX, Math.trunc(count) || 1));
+  const clamped = Math.max(1, Math.min(import_core10.ANSWER_LINE_MAX, Math.trunc(count) || 1));
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
@@ -5381,7 +5563,7 @@ function AnswerLinesMenu() {
               {
                 type: "number",
                 min: 1,
-                max: import_core9.ANSWER_LINE_MAX,
+                max: import_core10.ANSWER_LINE_MAX,
                 value: count,
                 onChange: (e) => setCount(Number(e.target.value)),
                 "aria-label": "Quantidade de linhas"
@@ -5574,7 +5756,7 @@ function TableMenu() {
                 {
                   className: "ed-toolbar-swatch",
                   "aria-hidden": true,
-                  style: { background: editor.getTableBorderColor() ?? import_core9.TABLE_BORDER_COLOR }
+                  style: { background: editor.getTableBorderColor() ?? import_core10.TABLE_BORDER_COLOR }
                 }
               ),
               "Cor da borda",
@@ -5582,7 +5764,7 @@ function TableMenu() {
                 "input",
                 {
                   type: "color",
-                  value: editor.getTableBorderColor() ?? import_core9.TABLE_BORDER_COLOR,
+                  value: editor.getTableBorderColor() ?? import_core10.TABLE_BORDER_COLOR,
                   onChange: (e) => editor.setTableBorderColor(e.target.value),
                   "aria-label": "Cor da borda"
                 }