@sofereditor/react 0.6.0 → 0.7.0

package/dist/index.d.cts

@@ -264,6 +264,15 @@ interface UseEditorResult {
         cellIndex?: number;
         embed: ImageEmbed;
     } | null;
+    /**
+     * Passthrough of `UseEditorOptions.uploadImage` — `undefined` when not
+     * configured. Exposed so callers with the editor instance but not the
+     * original options (the `<Editor>` component's paste handler, notably) can
+     * upload an image without going through `insertImageFromFile` (which also
+     * inserts it — not always what's wanted, e.g. resolving `data:` embeds
+     * already inside a pasted slice before `insertSlice`).
+     */
+    uploadImage?: (file: File) => Promise<string>;
 }
 declare function useEditor(opts?: UseEditorOptions): UseEditorResult;
 

package/dist/index.d.ts

@@ -264,6 +264,15 @@ interface UseEditorResult {
         cellIndex?: number;
         embed: ImageEmbed;
     } | null;
+    /**
+     * Passthrough of `UseEditorOptions.uploadImage` — `undefined` when not
+     * configured. Exposed so callers with the editor instance but not the
+     * original options (the `<Editor>` component's paste handler, notably) can
+     * upload an image without going through `insertImageFromFile` (which also
+     * inserts it — not always what's wanted, e.g. resolving `data:` embeds
+     * already inside a pasted slice before `insertSlice`).
+     */
+    uploadImage?: (file: File) => Promise<string>;
 }
 declare function useEditor(opts?: UseEditorOptions): UseEditorResult;
 

package/dist/index.js

@@ -8,6 +8,7 @@ import {
   useState as useState10
 } from "react";
 import {
+  collapsedSelection as collapsedSelection2,
   deleteBackward,
   deleteForward,
   deleteSelection,
@@ -15,6 +16,7 @@ import {
   insertParagraph,
   insertSlice,
   insertText,
+  isEmbedAdjacentToCaret,
   serializeSelection,
   sliceToText,
   SOFER_MIME as SOFER_MIME2
@@ -297,7 +299,12 @@ function applyDomSelection(root, modelSel) {
 import { SOFER_MIME } from "@sofereditor/core";
 
 // src/htmlToSlice.ts
-import { MAX_LIST_LEVEL } from "@sofereditor/core";
+import { isImageEmbed, MAX_LIST_LEVEL } from "@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;
@@ -316,8 +323,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) => 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 } : {} };
 }
@@ -428,6 +437,7 @@ function walkBlockLevel(container, marks, blocks) {
         break;
       }
       case "img":
+        loose.push(node);
         break;
       case "br":
         loose.push(node);
@@ -620,7 +630,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;
@@ -635,6 +649,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":
@@ -902,6 +983,58 @@ function planPaste(cd) {
   return { kind: "none" };
 }
 
+// src/resolvePastedImages.ts
+import { isImageEmbed as isImageEmbed2 } from "@sofereditor/core";
+function sliceHasDataImageEmbeds(slice) {
+  return slice.blocks.some(
+    (b) => b.delta.some((op) => isImageEmbed2(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 (!isImageEmbed2(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
 import {
   useCallback,
@@ -2327,7 +2460,7 @@ import {
 import { Fragment as Fragment3, memo } from "react";
 import {
   BLANK_STYLE,
-  isImageEmbed,
+  isImageEmbed as isImageEmbed3,
   splitUnderscoreRuns
 } from "@sofereditor/core";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -2345,7 +2478,7 @@ function renderInline(delta, keyPrefix) {
       const key = `${keyPrefix}-${offset}`;
       body.push(/* @__PURE__ */ jsx9(Fragment3, { children: wrap(text, op.attributes) }, key));
       offset += text.length;
-    } else if (isImageEmbed(op.insert)) {
+    } else if (isImageEmbed3(op.insert)) {
       const key = `${keyPrefix}-${offset}`;
       const layout = op.insert.layout ?? "inline";
       const commentMarkId = op.attributes?.comment?.markId;
@@ -3460,7 +3593,7 @@ import {
   insertTable as cmdInsertTable,
   insertTableColumn as cmdInsertColumn,
   insertTableRow as cmdInsertRow,
-  isImageEmbed as isImageEmbed2,
+  isImageEmbed as isImageEmbed4,
   isMarkUniformInRange,
   moveToNextCell as cmdMoveNextCell,
   moveToPrevCell as cmdMovePrevCell,
@@ -3475,7 +3608,6 @@ import {
   toggleList as cmdToggleList,
   toggleMark as cmdToggleMark
 } from "@sofereditor/core";
-var MAX_INSERT_WIDTH = 600;
 function useEditor(opts = {}) {
   const doc = useMemo3(() => opts.document ?? new EditorDocument(), [opts.document]);
   const history = useMemo3(() => new EditorHistory(doc), [doc]);
@@ -3862,7 +3994,7 @@ function useEditor(opts = {}) {
         cursor += op.insert.length;
         continue;
       }
-      if (cursor === start && isImageEmbed2(op.insert)) {
+      if (cursor === start && isImageEmbed4(op.insert)) {
         return {
           blockIndex: sel.anchor.blockIndex,
           cellIndex: sel.anchor.cellIndex,
@@ -3995,7 +4127,8 @@ function useEditor(opts = {}) {
     resolvePageConfigRequest,
     imageCaptionRequest,
     requestImageCaption,
-    resolveImageCaptionRequest
+    resolveImageCaptionRequest,
+    uploadImage: opts.uploadImage
   };
 }
 function readAsDataURL(file) {
@@ -4042,6 +4175,7 @@ function Editor({
   const { doc, history, snapshot, getSelection, setSelection } = editor;
   const rootRef = useRef11(null);
   const isComposingRef = useRef11(false);
+  const pasteInFlightRef = useRef11(false);
   const [hoveredBehind, setHoveredBehind] = useState10(null);
   const hoveredBehindRef = useRef11(null);
   const [hoveredLink, setHoveredLink] = useState10(null);
@@ -4484,9 +4618,48 @@ function Editor({
       e.preventDefault();
       switch (plan.kind) {
         case "sofer":
-        case "html":
           insertSlice(ctx, plan.slice);
           return;
+        case "html": {
+          if (!sliceHasDataImageEmbeds(plan.slice)) {
+            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 = collapsedSelection2({ blockIndex: lastIndex, offset: lastText ? lastText.length : 0 });
+              }
+              ctxRef.current.setSelection(insertAt);
+              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);
@@ -4539,6 +4712,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 || isEmbedAdjacentToCaret(ctxRef.current, direction);
+      if (shouldIntercept) {
+        e.preventDefault();
+        if (direction === "backward") deleteBackward(ctxRef.current);
+        else deleteForward(ctxRef.current);
+      }
+      return;
+    }
     if (!mod) return;
     const key = e.key.toLowerCase();
     if (!e.shiftKey && !e.altKey && key === "z") {