@sofereditor/react 0.4.0 → 0.5.0

package/dist/index.d.cts

@@ -184,6 +184,10 @@ interface UseEditorResult {
     setTableBorderPreset: (preset: TableBorderPreset) => void;
     /** Preset da tabela focada; "all" fora de tabela ou quando ausente. */
     getTableBorderPreset: () => TableBorderPreset;
+    /** Cor das linhas da grade da tabela focada. `null` restaura o padrão. No-op fora de tabela. */
+    setTableBorderColor: (color: string | null) => void;
+    /** Cor da tabela focada; undefined fora de tabela ou quando usa o padrão. */
+    getTableBorderColor: () => string | undefined;
     isListActive: (kind: ListKind) => boolean;
     toggleList: (kind: ListKind) => void;
     indentList: () => void;

package/dist/index.d.ts

@@ -184,6 +184,10 @@ interface UseEditorResult {
     setTableBorderPreset: (preset: TableBorderPreset) => void;
     /** Preset da tabela focada; "all" fora de tabela ou quando ausente. */
     getTableBorderPreset: () => TableBorderPreset;
+    /** Cor das linhas da grade da tabela focada. `null` restaura o padrão. No-op fora de tabela. */
+    setTableBorderColor: (color: string | null) => void;
+    /** Cor da tabela focada; undefined fora de tabela ou quando usa o padrão. */
+    getTableBorderColor: () => string | undefined;
     isListActive: (kind: ListKind) => boolean;
     toggleList: (kind: ListKind) => void;
     indentList: () => void;

package/dist/index.js

@@ -2254,7 +2254,8 @@ function TableView({ block, index, tableFragment }) {
                     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",
@@ -3087,6 +3088,16 @@ function useEditor(opts = {}) {
     if (!doc.isTable(sel.focus.blockIndex)) return "all";
     return doc.getBlockAttrs(sel.focus.blockIndex).borderPreset ?? "all";
   }, [doc]);
+  const setTableBorderColor = useCallback6((color) => {
+    const sel = selectionRef.current;
+    if (!doc.isTable(sel.focus.blockIndex)) return;
+    cmdSetBlockAttrAtIndex(ctxRef.current, sel.focus.blockIndex, "borderColor", color);
+  }, [doc]);
+  const getTableBorderColor = useCallback6(() => {
+    const sel = selectionRef.current;
+    if (!doc.isTable(sel.focus.blockIndex)) return void 0;
+    return doc.getBlockAttrs(sel.focus.blockIndex).borderColor;
+  }, [doc]);
   const isListActive = useCallback6(
     (kind) => {
       const sel = selectionRef.current;
@@ -3333,6 +3344,8 @@ function useEditor(opts = {}) {
     getCellBackground,
     setTableBorderPreset,
     getTableBorderPreset,
+    setTableBorderColor,
+    getTableBorderColor,
     isListActive,
     toggleList,
     indentList,
@@ -4303,7 +4316,7 @@ import {
   useRef as useRef12,
   useState as useState11
 } from "react";
-import { ANSWER_LINE_MAX } from "@sofereditor/core";
+import { ANSWER_LINE_MAX, TABLE_BORDER_COLOR } from "@sofereditor/core";
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var FONT_FAMILIES = ["Arial"];
 var FONT_SIZES = ["8pt", "10pt", "11pt", "12pt", "14pt", "16pt", "18pt", "24pt", "32pt", "48pt"];
@@ -4325,6 +4338,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" },
@@ -4357,10 +4379,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) => {
@@ -4792,10 +4811,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__ */ jsxs12("label", { className: "ed-toolbar-label", children: [
@@ -4886,10 +4902,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__ */ jsx13(
@@ -4995,6 +5008,37 @@ function TableMenu() {
                 }
               )
             ] }),
+            /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label ed-table-bgcolor", children: [
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  className: "ed-toolbar-swatch",
+                  "aria-hidden": true,
+                  style: { background: editor.getTableBorderColor() ?? TABLE_BORDER_COLOR }
+                }
+              ),
+              "Cor da borda",
+              /* @__PURE__ */ jsx13(
+                "input",
+                {
+                  type: "color",
+                  value: editor.getTableBorderColor() ?? TABLE_BORDER_COLOR,
+                  onChange: (e) => editor.setTableBorderColor(e.target.value),
+                  "aria-label": "Cor da borda"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setOpen(false);
+                  editor.setTableBorderColor(null);
+                },
+                children: "Restaurar cor padr\xE3o"
+              }
+            ),
             /* @__PURE__ */ jsx13("hr", {}),
             /* @__PURE__ */ jsx13(
               "button",