@sofereditor/react 0.3.1 → 0.3.2

package/dist/index.d.cts

@@ -176,6 +176,10 @@ interface UseEditorResult {
     setBlockAttr: <K extends keyof BlockAttrs>(key: K, value: BlockAttrs[K] | null) => void;
     setAlign: (value: AlignValue) => void;
     getAlign: () => AlignValue | "mixed" | undefined;
+    /** Cor de fundo das células selecionadas (rect) ou da célula focada. `null` remove. No-op fora de tabela. */
+    setCellBackground: (color: string | null) => void;
+    /** Cor de fundo da célula focada; undefined fora de tabela ou sem cor. */
+    getCellBackground: () => string | undefined;
     isListActive: (kind: ListKind) => boolean;
     toggleList: (kind: ListKind) => void;
     indentList: () => void;

package/dist/index.d.ts

@@ -176,6 +176,10 @@ interface UseEditorResult {
     setBlockAttr: <K extends keyof BlockAttrs>(key: K, value: BlockAttrs[K] | null) => void;
     setAlign: (value: AlignValue) => void;
     getAlign: () => AlignValue | "mixed" | undefined;
+    /** Cor de fundo das células selecionadas (rect) ou da célula focada. `null` remove. No-op fora de tabela. */
+    setCellBackground: (color: string | null) => void;
+    /** Cor de fundo da célula focada; undefined fora de tabela ou sem cor. */
+    getCellBackground: () => string | undefined;
     isListActive: (kind: ListKind) => boolean;
     toggleList: (kind: ListKind) => void;
     indentList: () => void;

package/dist/index.js

@@ -2171,6 +2171,13 @@ function fragmentClass(f) {
 function alignClass(a) {
   return a ? ` ed-align-${a}` : "";
 }
+function cellStyle(attrs) {
+  if (!attrs) return void 0;
+  const style = {};
+  if (attrs.align) style.textAlign = attrs.align;
+  if (attrs.bgColor) style.backgroundColor = attrs.bgColor;
+  return Object.keys(style).length > 0 ? style : void 0;
+}
 function clampLevel(l) {
   if (l === 2 || l === 3 || l === 4 || l === 5 || l === 6) return l;
   return 1;
@@ -2224,7 +2231,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,
+                  style: cellStyle(cell?.attrs),
                   className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
                   children: renderInline(delta, `t${index}-c${flat}`)
                 },
@@ -3035,6 +3042,14 @@ function useEditor(opts = {}) {
     }
     return getBlockAttr("align");
   }, [doc, getBlockAttr]);
+  const setCellBackground = useCallback6((color) => {
+    cmdSetCellAttr(ctxRef.current, "bgColor", color);
+  }, []);
+  const getCellBackground = useCallback6(() => {
+    const sel = selectionRef.current;
+    if (sel.focus.cellIndex == null || !doc.isTable(sel.focus.blockIndex)) return void 0;
+    return doc.getCellAttrs(sel.focus.blockIndex, sel.focus.cellIndex).bgColor;
+  }, [doc]);
   const isListActive = useCallback6(
     (kind) => {
       const sel = selectionRef.current;
@@ -3274,6 +3289,8 @@ function useEditor(opts = {}) {
     setBlockAttr,
     setAlign,
     getAlign,
+    setCellBackground,
+    getCellBackground,
     isListActive,
     toggleList,
     indentList,
@@ -4753,6 +4770,32 @@ function TableMenu() {
               setOpen(false);
               editor.splitCell();
             }, children: "Dividir c\xE9lulas mescladas" }),
+            /* @__PURE__ */ jsx13("hr", {}),
+            /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label ed-table-bgcolor", children: [
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  className: "ed-toolbar-swatch",
+                  "aria-hidden": true,
+                  style: { background: editor.getCellBackground() ?? "#ffffff" }
+                }
+              ),
+              "Cor de fundo da c\xE9lula",
+              /* @__PURE__ */ jsx13(
+                "input",
+                {
+                  type: "color",
+                  value: editor.getCellBackground() ?? "#ffffff",
+                  onChange: (e) => editor.setCellBackground(e.target.value),
+                  "aria-label": "Cor de fundo da c\xE9lula"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => {
+              setOpen(false);
+              editor.setCellBackground(null);
+            }, children: "Remover cor de fundo" }),
+            /* @__PURE__ */ jsx13("hr", {}),
             /* @__PURE__ */ jsx13(
               "button",
               {