@sofereditor/react 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -2248,7 +2248,8 @@ function TableView({ block, index, tableFragment }) {
                     (0, import_core4.cellBorderStyle)(
                       block.attrs.borderPreset,
                       { row: r, col: c, rowspan, colspan, cols, rowStart, rowEnd },
-                      "screen"
+                      "screen",
+                      block.attrs.borderColor
                     )
                   ),
                   className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
@@ -3043,6 +3044,16 @@ function useEditor(opts = {}) {
     if (!doc.isTable(sel.focus.blockIndex)) return "all";
     return doc.getBlockAttrs(sel.focus.blockIndex).borderPreset ?? "all";
   }, [doc]);
+  const setTableBorderColor = (0, import_react13.useCallback)((color) => {
+    const sel = selectionRef.current;
+    if (!doc.isTable(sel.focus.blockIndex)) return;
+    (0, import_core5.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderColor", color);
+  }, [doc]);
+  const getTableBorderColor = (0, import_react13.useCallback)(() => {
+    const sel = selectionRef.current;
+    if (!doc.isTable(sel.focus.blockIndex)) return void 0;
+    return doc.getBlockAttrs(sel.focus.blockIndex).borderColor;
+  }, [doc]);
   const isListActive = (0, import_react13.useCallback)(
     (kind) => {
       const sel = selectionRef.current;
@@ -3289,6 +3300,8 @@ function useEditor(opts = {}) {
     getCellBackground,
     setTableBorderPreset,
     getTableBorderPreset,
+    setTableBorderColor,
+    getTableBorderColor,
     isListActive,
     toggleList,
     indentList,
@@ -4276,6 +4289,15 @@ var ALIGN_OPTIONS = [
   { value: "justify", label: "\u2630", title: "Justificar" }
 ];
 var IMAGE_ALIGN_VALUES = /* @__PURE__ */ new Set(["left", "center", "right"]);
+var NATIVE_CONTROL_TAGS = /* @__PURE__ */ new Set(["SELECT", "INPUT", "OPTION"]);
+function isNativeControl(t) {
+  const el = t;
+  return !!el && NATIVE_CONTROL_TAGS.has(el.tagName);
+}
+function keepsOwnMouseDown(t) {
+  const el = t;
+  return !!el && (NATIVE_CONTROL_TAGS.has(el.tagName) || el.tagName === "BUTTON");
+}
 var IMAGE_LAYOUT_OPTIONS = [
   { value: "inline", label: "\u2194", title: "Inline (no fluxo do texto)" },
   { value: "wrap-left", label: "\u25E7", title: "Texto contorna \xE0 direita" },
@@ -4308,10 +4330,7 @@ function Toolbar({ className }) {
   const blockAlign = getAlign();
   const blockDir = getBlockAttr("dir");
   const stop = (e) => {
-    const t = e.target;
-    if (t && (t.tagName === "SELECT" || t.tagName === "INPUT" || t.tagName === "OPTION")) {
-      return;
-    }
+    if (isNativeControl(e.target)) return;
     e.preventDefault();
   };
   const onToggle = (name) => (e) => {
@@ -4743,10 +4762,7 @@ function AnswerLinesMenu() {
         className: "ed-table-popover ed-answerlines-popover",
         role: "menu",
         onMouseDown: (e) => {
-          const t = e.target;
-          if (!t || t.tagName !== "INPUT" && t.tagName !== "BUTTON" && t.tagName !== "SELECT") {
-            e.preventDefault();
-          }
+          if (!keepsOwnMouseDown(e.target)) e.preventDefault();
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", children: [
@@ -4837,10 +4853,7 @@ function TableMenu() {
         className: "ed-table-popover",
         role: "menu",
         onMouseDown: (e) => {
-          const t = e.target;
-          if (!t || t.tagName !== "INPUT" && t.tagName !== "BUTTON") {
-            e.preventDefault();
-          }
+          if (!keepsOwnMouseDown(e.target)) e.preventDefault();
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -4946,6 +4959,37 @@ function TableMenu() {
                 }
               )
             ] }),
+            /* @__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.getTableBorderColor() ?? import_core7.TABLE_BORDER_COLOR }
+                }
+              ),
+              "Cor da borda",
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "input",
+                {
+                  type: "color",
+                  value: editor.getTableBorderColor() ?? import_core7.TABLE_BORDER_COLOR,
+                  onChange: (e) => editor.setTableBorderColor(e.target.value),
+                  "aria-label": "Cor da borda"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setOpen(false);
+                  editor.setTableBorderColor(null);
+                },
+                children: "Restaurar cor padr\xE3o"
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",