@sofereditor/react 0.9.0 → 0.10.1

package/dist/index.d.cts

@@ -417,8 +417,15 @@ declare function NodeView({ block, index, children, fragment, tableFragment }: N
  *
  * Keys are stable on `${blockIndex}-${runningOffset}` so React reconciliation
  * survives split/merge of runs under collaboration.
+ *
+ * `baseOffset` shifts every emitted `data-embed-offset` (and key) by a fixed
+ * amount. Needed when `delta` is only a SLICE of a larger model range — e.g.
+ * one line of a célula-lista, where each `<li>` gets its own line-local delta
+ * but `data-embed-offset` must stay in CELL coordinates (contract with
+ * `Editor.tsx`'s embed-selection and `ImageResizeOverlay`'s DOM query).
+ * Defaults to 0, which reproduces the old line-local numbering exactly.
  */
-declare function renderInline(delta: DeltaOp[], keyPrefix: number | string): ReactNode;
+declare function renderInline(delta: DeltaOp[], keyPrefix: number | string, baseOffset?: number): ReactNode;
 
 interface EditorProviderProps {
     editor: UseEditorResult;
@@ -512,10 +519,11 @@ declare function applyDomSelection(root: HTMLElement, modelSel: Selection): void
  *    com o marcador (número/símbolo) como texto literal dentro de um span
  *    `mso-list:Ignore`. `parseWordListLevel` + a exclusão desse span tratam isso.
  *
- * fontFamily é deliberadamente NUNCA emitida: a escola padroniza Arial e cada
- * documento tem sua própria tipografia (mesma decisão de `import-docx`, que
- * descarta `w:rFonts`). fontSize É preservado (ver `parseFontSizePt`): o
- * modelo já suporta a mark, a barra já tem controle de tamanho, e descartar o
+ * fontFamily é deliberadamente NUNCA emitida: a escola padroniza uma fonte só,
+ * definida no CSS (`.ed-root`) e cada documento tem sua própria tipografia
+ * (mesma decisão de `import-docx`, que descarta `w:rFonts`). fontSize É
+ * preservado (ver `parseFontSizePt`): o modelo já suporta a mark, a barra já
+ * tem controle de tamanho, e descartar o
  * tamanho perdia informação real (título de 37.5pt colado do Google Docs saía
  * do tamanho do corpo). Unidades que dependem do contexto de herança do
  * documento de origem (em/rem/%/larger/smaller/medium) não são resolvíveis

package/dist/index.d.ts

@@ -417,8 +417,15 @@ declare function NodeView({ block, index, children, fragment, tableFragment }: N
  *
  * Keys are stable on `${blockIndex}-${runningOffset}` so React reconciliation
  * survives split/merge of runs under collaboration.
+ *
+ * `baseOffset` shifts every emitted `data-embed-offset` (and key) by a fixed
+ * amount. Needed when `delta` is only a SLICE of a larger model range — e.g.
+ * one line of a célula-lista, where each `<li>` gets its own line-local delta
+ * but `data-embed-offset` must stay in CELL coordinates (contract with
+ * `Editor.tsx`'s embed-selection and `ImageResizeOverlay`'s DOM query).
+ * Defaults to 0, which reproduces the old line-local numbering exactly.
  */
-declare function renderInline(delta: DeltaOp[], keyPrefix: number | string): ReactNode;
+declare function renderInline(delta: DeltaOp[], keyPrefix: number | string, baseOffset?: number): ReactNode;
 
 interface EditorProviderProps {
     editor: UseEditorResult;
@@ -512,10 +519,11 @@ declare function applyDomSelection(root: HTMLElement, modelSel: Selection): void
  *    com o marcador (número/símbolo) como texto literal dentro de um span
  *    `mso-list:Ignore`. `parseWordListLevel` + a exclusão desse span tratam isso.
  *
- * fontFamily é deliberadamente NUNCA emitida: a escola padroniza Arial e cada
- * documento tem sua própria tipografia (mesma decisão de `import-docx`, que
- * descarta `w:rFonts`). fontSize É preservado (ver `parseFontSizePt`): o
- * modelo já suporta a mark, a barra já tem controle de tamanho, e descartar o
+ * fontFamily é deliberadamente NUNCA emitida: a escola padroniza uma fonte só,
+ * definida no CSS (`.ed-root`) e cada documento tem sua própria tipografia
+ * (mesma decisão de `import-docx`, que descarta `w:rFonts`). fontSize É
+ * preservado (ver `parseFontSizePt`): o modelo já suporta a mark, a barra já
+ * tem controle de tamanho, e descartar o
  * tamanho perdia informação real (título de 37.5pt colado do Google Docs saía
  * do tamanho do corpo). Unidades que dependem do contexto de herança do
  * documento de origem (em/rem/%/larger/smaller/medium) não são resolvíveis

package/dist/index.js

@@ -94,6 +94,11 @@ function isWrapAnchorImg(n) {
 function isPhantomEmbed(n) {
   return n.nodeType === Node.ELEMENT_NODE && n.dataset.embedPhantom === "true";
 }
+function isCellLineBoundary(n) {
+  if (n.nodeType !== Node.ELEMENT_NODE) return false;
+  const line = n.dataset.cellLine;
+  return line != null && Number(line) > 0;
+}
 function indexInParent(n) {
   const parent = n.parentNode;
   if (!parent) return 0;
@@ -121,6 +126,7 @@ function textOffsetWithin(container, node, offsetInNode) {
   let done = false;
   function visit(n) {
     if (done) return;
+    if (isCellLineBoundary(n)) offset += 1;
     if (n === target) {
       if (n.nodeType === Node.TEXT_NODE) {
         offset += targetOff;
@@ -221,6 +227,7 @@ function locatePoint(root, pos) {
   let remaining = Math.max(0, pos.offset - containerStart);
   let result = null;
   let lastImg = null;
+  let lastBoundary = null;
   let lastText = null;
   function visit(n) {
     if (result) return;
@@ -232,6 +239,7 @@ function locatePoint(root, pos) {
       }
       remaining -= len;
       lastImg = null;
+      lastBoundary = null;
       lastText = n;
       return;
     }
@@ -239,6 +247,25 @@ function locatePoint(root, pos) {
     const el = n;
     if (isRejectedSubtree(el, container)) return;
     if (isImgEmbed(el) && isWrapAnchorImg(el)) return;
+    if (isCellLineBoundary(el)) {
+      if (remaining === 0) {
+        if (lastImg) {
+          const parent = lastImg.parentNode;
+          if (parent) {
+            result = { node: parent, offset: indexInParent(lastImg) + 1 };
+            return;
+          }
+        }
+        const prevLine = lastBoundary ?? el.previousElementSibling;
+        if (prevLine) {
+          result = { node: prevLine, offset: 0 };
+          return;
+        }
+      }
+      remaining -= 1;
+      lastBoundary = el;
+      lastImg = null;
+    }
     if (isImgEmbed(el) || isPhantomEmbed(el)) {
       if (remaining === 0) {
         const parent = el.parentNode;
@@ -249,6 +276,7 @@ function locatePoint(root, pos) {
       }
       remaining -= 1;
       lastImg = el;
+      lastBoundary = null;
       return;
     }
     for (const child of Array.from(el.childNodes)) {
@@ -258,7 +286,10 @@ function locatePoint(root, pos) {
   }
   visit(container);
   if (result) return result;
-  if (lastImg && remaining === 0) {
+  if (lastBoundary) {
+    return { node: lastBoundary, offset: 0 };
+  }
+  if (lastImg) {
     const parent = lastImg.parentNode;
     if (parent) return { node: parent, offset: indexInParent(lastImg) + 1 };
   }
@@ -2815,7 +2846,9 @@ import { useMemo as useMemo2, useRef as useRef8 } from "react";
 import {
   answerLineStyle,
   cellBorderStyle,
+  deltaLength as deltaLength2,
   normalizarLarguras as normalizarLarguras2,
+  splitDeltaByLines,
   tableRectSelection
 } from "@sofereditor/core";
 
@@ -2827,11 +2860,11 @@ import {
   splitUnderscoreRuns
 } from "@sofereditor/core";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-function renderInline(delta, keyPrefix) {
+function renderInline(delta, keyPrefix, baseOffset = 0) {
   if (delta.length === 0 || delta.length === 1 && typeof delta[0].insert === "string" && delta[0].insert === "") {
     return /* @__PURE__ */ jsx10("br", { "data-empty": "true" });
   }
-  let offset = 0;
+  let offset = baseOffset;
   const wrapAnchors = [];
   const body = [];
   for (const op of delta) {
@@ -3101,6 +3134,12 @@ import {
 } from "react";
 import { MIN_LINHA_PX, normalizarLarguras } from "@sofereditor/core";
 import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function posicaoVisualDaDivisa(xLogico, larguraPx, rtl) {
+  return rtl ? larguraPx - xLogico : xLogico;
+}
+function sinalDoArrasto(rtl) {
+  return rtl ? -1 : 1;
+}
 function deltaPctDoArrasto(dxPx, larguraTabelaPx) {
   if (!(larguraTabelaPx > 0)) return 0;
   return dxPx / larguraTabelaPx * 100;
@@ -3110,7 +3149,7 @@ function distribuirAltura(base, deltaPx) {
   const fatia = deltaPx / base.length;
   return base.map((h) => Math.max(MIN_LINHA_PX, Math.round(h + fatia)));
 }
-function TableResizeOverlay({ tableRef, blockIndex, cols, rows }) {
+function TableResizeOverlay({ tableRef, blockIndex, cols, rows, rtl = false }) {
   const editor = useEditorContext();
   const [layout, setLayout] = useState8(null);
   const arrastoRef = useRef7(null);
@@ -3185,7 +3224,8 @@ function TableResizeOverlay({ tableRef, blockIndex, cols, rows }) {
       if (!d) return;
       switch (d.tipo) {
         case "coluna": {
-          const dPct = deltaPctDoArrasto(e.clientX - d.startX, d.tableWidthPx);
+          const dx = (e.clientX - d.startX) * sinalDoArrasto(rtl);
+          const dPct = deltaPctDoArrasto(dx, d.tableWidthPx);
           editor.setColumnBoundary(blockIndex, d.boundary, dPct, d.baseWidths);
           break;
         }
@@ -3210,7 +3250,7 @@ function TableResizeOverlay({ tableRef, blockIndex, cols, rows }) {
         }
       }
     },
-    [blockIndex, editor]
+    [blockIndex, editor, rtl]
   );
   const containerWidthPxOf = useCallback5((table, tableWidthPx) => {
     return table.parentElement?.getBoundingClientRect().width || tableWidthPx;
@@ -3326,7 +3366,7 @@ function TableResizeOverlay({ tableRef, blockIndex, cols, rows }) {
         {
           contentEditable: false,
           className: "ed-col-resize-handle",
-          style: colHandleStyle(x),
+          style: colHandleStyle(posicaoVisualDaDivisa(x, layout.width, rtl)),
           onPointerDown: onColumnPointerDown(c),
           onPointerMove,
           onPointerUp,
@@ -3499,6 +3539,27 @@ function clampListLevel(l) {
   if (typeof l !== "number" || !Number.isFinite(l)) return 0;
   return Math.max(0, Math.min(5, Math.trunc(l)));
 }
+function renderCellContent(attrs, delta, keyPrefix) {
+  const kind = attrs?.listKind;
+  if (!kind) return renderInline(delta, keyPrefix);
+  const linhas = splitDeltaByLines(delta);
+  const Tag = kind === "ordered" ? "ol" : "ul";
+  let baseOffset = 0;
+  return /* @__PURE__ */ jsx12(
+    Tag,
+    {
+      className: `ed-list ed-list-${kind}`,
+      "data-list-kind": kind,
+      start: kind === "ordered" && typeof attrs?.listStart === "number" ? attrs.listStart : void 0,
+      style: attrs?.listStyle ? { listStyleType: attrs.listStyle } : void 0,
+      children: linhas.map((linha, i) => {
+        const li = /* @__PURE__ */ jsx12("li", { className: "ed-listitem", "data-cell-line": i, children: renderInline(linha, `${keyPrefix}-l${i}`, baseOffset) }, i);
+        baseOffset += deltaLength2(linha) + 1;
+        return li;
+      })
+    }
+  );
+}
 function TableView({ block, index, tableFragment }) {
   const rows = clampPositive(block.attrs.rows);
   const cols = clampPositive(block.attrs.cols);
@@ -3523,6 +3584,7 @@ function TableView({ block, index, tableFragment }) {
         ref: tableRef,
         "data-block-index": index,
         "data-block-type": "table",
+        dir: block.attrs.dir === "rtl" || block.attrs.dir === "ltr" ? block.attrs.dir : void 0,
         className: "ed-block ed-table",
         style: typeof tableWidth === "number" ? { width: `${tableWidth}%` } : void 0,
         children: [
@@ -3564,7 +3626,7 @@ function TableView({ block, index, tableFragment }) {
                         )
                       ),
                       className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
-                      children: renderInline(delta, `t${index}-c${flat}`)
+                      children: renderCellContent(cell?.attrs, delta, `t${index}-c${flat}`)
                     },
                     c
                   );
@@ -3576,7 +3638,16 @@ function TableView({ block, index, tableFragment }) {
         ]
       }
     ),
-    isFirstFragment && /* @__PURE__ */ jsx12(TableResizeOverlay, { tableRef, blockIndex: index, cols, rows })
+    isFirstFragment && /* @__PURE__ */ jsx12(
+      TableResizeOverlay,
+      {
+        tableRef,
+        blockIndex: index,
+        cols,
+        rows,
+        rtl: block.attrs.dir === "rtl"
+      }
+    )
   ] });
 }
 function spanAttr(v) {
@@ -4403,6 +4474,10 @@ function useEditor(opts = {}) {
   const isListActive = useCallback7(
     (kind) => {
       const sel = selectionRef.current;
+      if (sel.focus.cellIndex != null && doc.isTable(sel.focus.blockIndex)) {
+        const real = doc.realCellIndex(sel.focus.blockIndex, sel.focus.cellIndex);
+        return real != null && doc.getCellAttrs(sel.focus.blockIndex, real).listKind === kind;
+      }
       const { start, end } = orderedRange(sel);
       for (let i = start.blockIndex; i <= end.blockIndex; i++) {
         if (doc.getBlockType(i) !== "listItem") return false;
@@ -5844,7 +5919,6 @@ function TableBorderPanel({
 
 // src/Toolbar.tsx
 import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
-var FONT_FAMILIES = ["Arial"];
 var FONT_SIZES = ["8pt", "10pt", "11pt", "12pt", "14pt", "16pt", "18pt", "24pt", "32pt", "48pt"];
 var BLOCK_OPTIONS = [
   { value: "paragraph", label: "Par\xE1grafo", type: "paragraph" },
@@ -5918,11 +5992,6 @@ function Toolbar({ className }) {
   const onHighlightChange = (e) => {
     setMark("highlight", e.target.value);
   };
-  const onFontFamilyChange = (e) => {
-    const v = e.target.value;
-    if (v === "") removeMark("fontFamily");
-    else setMark("fontFamily", v);
-  };
   const onFontSizeChange = (e) => {
     const v = e.target.value;
     if (v === "") removeMark("fontSize");
@@ -5983,7 +6052,6 @@ function Toolbar({ className }) {
   );
   const colorValue = typeof active.color === "string" ? active.color : "#000000";
   const highlightValue = typeof active.highlight === "string" ? active.highlight : "#fff176";
-  const fontFamilyValue = typeof active.fontFamily === "string" ? active.fontFamily : "";
   const fontSizeValue = typeof active.fontSize === "string" ? active.fontSize : "";
   const blockValue = blockSelectValue(blockType, blockLevel);
   const selectedEmbed = editor.getSelectedEmbed();
@@ -6082,36 +6150,20 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs15(Group, { children: [
-          /* @__PURE__ */ jsxs15(
-            "select",
-            {
-              className: "ed-toolbar-select",
-              value: fontFamilyValue,
-              onChange: onFontFamilyChange,
-              onMouseDown: stop,
-              "aria-label": "Fam\xEDlia da fonte",
-              children: [
-                /* @__PURE__ */ jsx15("option", { value: "", children: "Fonte\u2026" }),
-                FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx15("option", { value: f, children: f }, f))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs15(
-            "select",
-            {
-              className: "ed-toolbar-select",
-              value: fontSizeValue,
-              onChange: onFontSizeChange,
-              onMouseDown: stop,
-              "aria-label": "Tamanho da fonte",
-              children: [
-                /* @__PURE__ */ jsx15("option", { value: "", children: "Tamanho\u2026" }),
-                FONT_SIZES.map((s) => /* @__PURE__ */ jsx15("option", { value: s, children: s }, s))
-              ]
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx15(Group, { children: /* @__PURE__ */ jsxs15(
+          "select",
+          {
+            className: "ed-toolbar-select",
+            value: fontSizeValue,
+            onChange: onFontSizeChange,
+            onMouseDown: stop,
+            "aria-label": "Tamanho da fonte",
+            children: [
+              /* @__PURE__ */ jsx15("option", { value: "", children: "Tamanho\u2026" }),
+              FONT_SIZES.map((s) => /* @__PURE__ */ jsx15("option", { value: s, children: s }, s))
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsx15(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsx15(
           "button",
           {