@sofereditor/react 0.3.2 → 0.5.0

package/dist/index.cjs

@@ -1899,8 +1899,15 @@ function ImageEmbedViewImpl({
     }
   );
 }
+function decorateBlanks(text) {
+  const segs = (0, import_core3.splitUnderscoreRuns)(text);
+  if (segs.length === 1 && !segs[0].blank) return text;
+  return segs.map(
+    (s, i) => s.blank ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-blank": "true", style: import_core3.BLANK_STYLE, children: s.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.Fragment, { children: s.text }, i)
+  );
+}
 function wrap(text, attrs) {
-  let node = text;
+  let node = decorateBlanks(text);
   if (!attrs) return node;
   if (attrs.bold) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: node });
   if (attrs.italic) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("em", { children: node });
@@ -1908,6 +1915,7 @@ function wrap(text, attrs) {
   if (attrs.strike) node = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { children: node });
   const styleParts = {};
   if (attrs.color) styleParts.color = attrs.color;
+  if (attrs.highlight) styleParts.backgroundColor = attrs.highlight;
   if (attrs.fontFamily) styleParts.fontFamily = attrs.fontFamily;
   if (attrs.fontSize) styleParts.fontSize = attrs.fontSize;
   if (Object.keys(styleParts).length > 0) {
@@ -2154,6 +2162,7 @@ function NodeView({ block, index, children, fragment, tableFragment }) {
 function commonBlockProps(attrs, index, type, fragment) {
   const style = {};
   if (attrs.align) style.textAlign = attrs.align;
+  Object.assign(style, (0, import_core4.answerLineStyle)(attrs) ?? {});
   const base = {
     "data-block-index": index,
     "data-block-type": type,
@@ -2173,11 +2182,10 @@ 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;
+function cellStyle(attrs, border) {
+  const style = { ...border };
+  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) {
@@ -2233,7 +2241,17 @@ function TableView({ block, index, tableFragment }) {
                   "data-cell-colspan": colspan,
                   rowSpan: rowspan > 1 ? rowspan : void 0,
                   colSpan: colspan > 1 ? colspan : void 0,
-                  style: cellStyle(cell?.attrs),
+                  style: cellStyle(
+                    cell?.attrs,
+                    // rowStart/rowEnd são os limites do FRAGMENTO: numa tabela
+                    // quebrada entre páginas, cada página fecha a própria caixa.
+                    (0, import_core4.cellBorderStyle)(
+                      block.attrs.borderPreset,
+                      { row: r, col: c, rowspan, colspan, cols, rowStart, rowEnd },
+                      "screen",
+                      block.attrs.borderColor
+                    )
+                  ),
                   className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
                   children: renderInline(delta, `t${index}-c${flat}`)
                 },
@@ -3016,6 +3034,26 @@ function useEditor(opts = {}) {
     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 setTableBorderPreset = (0, import_react13.useCallback)((preset) => {
+    const sel = selectionRef.current;
+    if (!doc.isTable(sel.focus.blockIndex)) return;
+    (0, import_core5.setBlockAttrAtIndex)(ctxRef.current, sel.focus.blockIndex, "borderPreset", preset);
+  }, [doc]);
+  const getTableBorderPreset = (0, import_react13.useCallback)(() => {
+    const sel = selectionRef.current;
+    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;
@@ -3049,6 +3087,9 @@ function useEditor(opts = {}) {
   const insertTable = (0, import_react13.useCallback)((rows, cols) => {
     (0, import_core5.insertTable)(ctxRef.current, rows, cols);
   }, []);
+  const insertAnswerLines = (0, import_react13.useCallback)((count, spacing) => {
+    (0, import_core5.insertAnswerLines)(ctxRef.current, count, spacing);
+  }, []);
   const deleteTable = (0, import_react13.useCallback)((blockIndex) => {
     const idx = blockIndex ?? selectionRef.current.focus.blockIndex;
     (0, import_core5.deleteTable)(ctxRef.current, idx);
@@ -3257,6 +3298,10 @@ function useEditor(opts = {}) {
     getAlign,
     setCellBackground,
     getCellBackground,
+    setTableBorderPreset,
+    getTableBorderPreset,
+    setTableBorderColor,
+    getTableBorderColor,
     isListActive,
     toggleList,
     indentList,
@@ -3267,6 +3312,7 @@ function useEditor(opts = {}) {
     resolveLinkRequest,
     isInTable,
     getTableLocation,
+    insertAnswerLines,
     insertTable,
     deleteTable,
     insertRowAbove,
@@ -4221,6 +4267,7 @@ function caretRangeFromPoint(x, y) {
 
 // src/Toolbar.tsx
 var import_react15 = require("react");
+var import_core7 = require("@sofereditor/core");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var FONT_FAMILIES = ["Arial"];
 var FONT_SIZES = ["8pt", "10pt", "11pt", "12pt", "14pt", "16pt", "18pt", "24pt", "32pt", "48pt"];
@@ -4242,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" },
@@ -4274,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) => {
@@ -4287,6 +4340,9 @@ function Toolbar({ className }) {
   const onColorChange = (e) => {
     setMark("color", e.target.value);
   };
+  const onHighlightChange = (e) => {
+    setMark("highlight", e.target.value);
+  };
   const onFontFamilyChange = (e) => {
     const v = e.target.value;
     if (v === "") removeMark("fontFamily");
@@ -4351,6 +4407,7 @@ function Toolbar({ className }) {
     [active.link, editor, removeMark, setMark]
   );
   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);
@@ -4414,6 +4471,40 @@ function Toolbar({ className }) {
               },
               children: "\u232B"
             }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", title: "Marca-texto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "span",
+              {
+                className: "ed-toolbar-swatch ed-toolbar-swatch--highlight",
+                "aria-hidden": true,
+                style: { background: highlightValue }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "input",
+              {
+                type: "color",
+                value: highlightValue,
+                onChange: onHighlightChange,
+                onMouseDown: stop,
+                "aria-label": "Marca-texto"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ed-toolbar-btn",
+              title: "Remover marca-texto",
+              onMouseDown: stop,
+              onClick: (e) => {
+                e.preventDefault();
+                removeMark("highlight");
+              },
+              children: "\u232B"
+            }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
@@ -4543,7 +4634,10 @@ function Toolbar({ className }) {
             children: "\u{1F517}"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Group, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableMenu, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableMenu, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AnswerLinesMenu, {})
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Group, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
@@ -4629,6 +4723,99 @@ function Toolbar({ className }) {
     }
   );
 }
+function AnswerLinesMenu() {
+  const editor = useEditorContext();
+  const [open, setOpen] = (0, import_react15.useState)(false);
+  const [count, setCount] = (0, import_react15.useState)(5);
+  const [spacing, setSpacing] = (0, import_react15.useState)(1.5);
+  const rootRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (!rootRef.current) return;
+      if (rootRef.current.contains(e.target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+  const clamped = Math.max(1, Math.min(import_core7.ANSWER_LINE_MAX, Math.trunc(count) || 1));
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ed-toolbar-btn",
+        title: "Linhas de resposta",
+        "aria-pressed": open,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: (e) => {
+          e.preventDefault();
+          setOpen((v) => !v);
+        },
+        children: "\u2630"
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: "ed-table-popover ed-answerlines-popover",
+        role: "menu",
+        onMouseDown: (e) => {
+          if (!keepsOwnMouseDown(e.target)) e.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", children: [
+            "Quantidade",
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: import_core7.ANSWER_LINE_MAX,
+                value: count,
+                onChange: (e) => setCount(Number(e.target.value)),
+                "aria-label": "Quantidade de linhas"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", children: [
+            "Entrelinha",
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+              "select",
+              {
+                value: String(spacing),
+                onChange: (e) => setSpacing(Number(e.target.value)),
+                "aria-label": "Entrelinha",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "1", children: "Simples" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "1.5", children: "1,5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "2", children: "Duplo" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setOpen(false);
+                editor.insertAnswerLines(clamped, spacing);
+              },
+              children: [
+                "Inserir ",
+                clamped,
+                " linha",
+                clamped > 1 ? "s" : ""
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 function TableMenu() {
   const editor = useEditorContext();
   const inTable = editor.isInTable();
@@ -4666,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)(
@@ -4757,6 +4941,56 @@ function TableMenu() {
               editor.setCellBackground(null);
             }, children: "Remover cor de fundo" }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "ed-toolbar-label", children: [
+              "Bordas",
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "select",
+                {
+                  value: editor.getTableBorderPreset(),
+                  onChange: (e) => editor.setTableBorderPreset(e.target.value),
+                  "aria-label": "Bordas da tabela",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "all", children: "Todas" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "outer", children: "S\xF3 externas" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "horizontal", children: "S\xF3 horizontais" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "vertical", children: "S\xF3 verticais" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "none", children: "Nenhuma" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__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",
               {