@sofereditor/react 0.9.0 → 0.10.1

package/dist/index.cjs

@@ -139,6 +139,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;
@@ -166,6 +171,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;
@@ -266,6 +272,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;
@@ -277,6 +284,7 @@ function locatePoint(root, pos) {
       }
       remaining -= len;
       lastImg = null;
+      lastBoundary = null;
       lastText = n;
       return;
     }
@@ -284,6 +292,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;
@@ -294,6 +321,7 @@ function locatePoint(root, pos) {
       }
       remaining -= 1;
       lastImg = el;
+      lastBoundary = null;
       return;
     }
     for (const child of Array.from(el.childNodes)) {
@@ -303,7 +331,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 };
   }
@@ -2835,11 +2866,11 @@ var import_core8 = require("@sofereditor/core");
 var import_react9 = require("react");
 var import_core6 = require("@sofereditor/core");
 var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)("br", { "data-empty": "true" });
   }
-  let offset = 0;
+  let offset = baseOffset;
   const wrapAnchors = [];
   const body = [];
   for (const op of delta) {
@@ -3103,6 +3134,12 @@ function sliceDelta(delta, start, end) {
 var import_react10 = require("react");
 var import_core7 = require("@sofereditor/core");
 var import_jsx_runtime11 = require("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;
@@ -3112,7 +3149,7 @@ function distribuirAltura(base, deltaPx) {
   const fatia = deltaPx / base.length;
   return base.map((h) => Math.max(import_core7.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] = (0, import_react10.useState)(null);
   const arrastoRef = (0, import_react10.useRef)(null);
@@ -3187,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;
         }
@@ -3212,7 +3250,7 @@ function TableResizeOverlay({ tableRef, blockIndex, cols, rows }) {
         }
       }
     },
-    [blockIndex, editor]
+    [blockIndex, editor, rtl]
   );
   const containerWidthPxOf = (0, import_react10.useCallback)((table, tableWidthPx) => {
     return table.parentElement?.getBoundingClientRect().width || tableWidthPx;
@@ -3328,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,
@@ -3501,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 = (0, import_core8.splitDeltaByLines)(delta);
+  const Tag = kind === "ordered" ? "ol" : "ul";
+  let baseOffset = 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    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__ */ (0, import_jsx_runtime12.jsx)("li", { className: "ed-listitem", "data-cell-line": i, children: renderInline(linha, `${keyPrefix}-l${i}`, baseOffset) }, i);
+        baseOffset += (0, import_core8.deltaLength)(linha) + 1;
+        return li;
+      })
+    }
+  );
+}
 function TableView({ block, index, tableFragment }) {
   const rows = clampPositive(block.attrs.rows);
   const cols = clampPositive(block.attrs.cols);
@@ -3525,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: [
@@ -3566,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
                   );
@@ -3578,7 +3638,16 @@ function TableView({ block, index, tableFragment }) {
         ]
       }
     ),
-    isFirstFragment && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableResizeOverlay, { tableRef, blockIndex: index, cols, rows })
+    isFirstFragment && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      TableResizeOverlay,
+      {
+        tableRef,
+        blockIndex: index,
+        cols,
+        rows,
+        rtl: block.attrs.dir === "rtl"
+      }
+    )
   ] });
 }
 function spanAttr(v) {
@@ -4363,6 +4432,10 @@ function useEditor(opts = {}) {
   const isListActive = (0, import_react14.useCallback)(
     (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 } = (0, import_core9.orderedRange)(sel);
       for (let i = start.blockIndex; i <= end.blockIndex; i++) {
         if (doc.getBlockType(i) !== "listItem") return false;
@@ -5799,7 +5872,6 @@ function TableBorderPanel({
 
 // src/Toolbar.tsx
 var import_jsx_runtime15 = require("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" },
@@ -5873,11 +5945,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");
@@ -5938,7 +6005,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();
@@ -6037,36 +6103,20 @@ function Toolbar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Group, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-            "select",
-            {
-              className: "ed-toolbar-select",
-              value: fontFamilyValue,
-              onChange: onFontFamilyChange,
-              onMouseDown: stop,
-              "aria-label": "Fam\xEDlia da fonte",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: "Fonte\u2026" }),
-                FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: f, children: f }, f))
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-            "select",
-            {
-              className: "ed-toolbar-select",
-              value: fontSizeValue,
-              onChange: onFontSizeChange,
-              onMouseDown: stop,
-              "aria-label": "Tamanho da fonte",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: "Tamanho\u2026" }),
-                FONT_SIZES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: s, children: s }, s))
-              ]
-            }
-          )
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "select",
+          {
+            className: "ed-toolbar-select",
+            value: fontSizeValue,
+            onChange: onFontSizeChange,
+            onMouseDown: stop,
+            "aria-label": "Tamanho da fonte",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: "Tamanho\u2026" }),
+              FONT_SIZES.map((s) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: s, children: s }, s))
+            ]
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Group, { children: ALIGN_OPTIONS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {