@sofereditor/react 0.3.0 → 0.3.2

package/dist/index.cjs

@@ -2173,6 +2173,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;
@@ -2226,7 +2233,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}`)
                 },
@@ -3001,6 +3008,14 @@ function useEditor(opts = {}) {
     }
     return getBlockAttr("align");
   }, [doc, getBlockAttr]);
+  const setCellBackground = (0, import_react13.useCallback)((color) => {
+    (0, import_core5.setCellAttr)(ctxRef.current, "bgColor", color);
+  }, []);
+  const getCellBackground = (0, import_react13.useCallback)(() => {
+    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 = (0, import_react13.useCallback)(
     (kind) => {
       const sel = selectionRef.current;
@@ -3240,6 +3255,8 @@ function useEditor(opts = {}) {
     setBlockAttr,
     setAlign,
     getAlign,
+    setCellBackground,
+    getCellBackground,
     isListActive,
     toggleList,
     indentList,
@@ -4714,6 +4731,32 @@ function TableMenu() {
               setOpen(false);
               editor.splitCell();
             }, children: "Dividir c\xE9lulas mescladas" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label ed-table-bgcolor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "span",
+                {
+                  className: "ed-toolbar-swatch",
+                  "aria-hidden": true,
+                  style: { background: editor.getCellBackground() ?? "#ffffff" }
+                }
+              ),
+              "Cor de fundo da c\xE9lula",
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "input",
+                {
+                  type: "color",
+                  value: editor.getCellBackground() ?? "#ffffff",
+                  onChange: (e) => editor.setCellBackground(e.target.value),
+                  "aria-label": "Cor de fundo da c\xE9lula"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => {
+              setOpen(false);
+              editor.setCellBackground(null);
+            }, children: "Remover cor de fundo" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {