@sofereditor/react 0.3.1 → 0.4.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,6 +2182,12 @@ function fragmentClass(f) {
 function alignClass(a) {
   return a ? ` ed-align-${a}` : "";
 }
+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) {
   if (l === 2 || l === 3 || l === 4 || l === 5 || l === 6) return l;
   return 1;
@@ -2226,7 +2241,16 @@ 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,
+                    // 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"
+                    )
+                  ),
                   className: inRect ? "ed-cell ed-cell--selected" : "ed-cell",
                   children: renderInline(delta, `t${index}-c${flat}`)
                 },
@@ -3001,6 +3025,24 @@ 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 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 isListActive = (0, import_react13.useCallback)(
     (kind) => {
       const sel = selectionRef.current;
@@ -3034,6 +3076,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);
@@ -3240,6 +3285,10 @@ function useEditor(opts = {}) {
     setBlockAttr,
     setAlign,
     getAlign,
+    setCellBackground,
+    getCellBackground,
+    setTableBorderPreset,
+    getTableBorderPreset,
     isListActive,
     toggleList,
     indentList,
@@ -3250,6 +3299,7 @@ function useEditor(opts = {}) {
     resolveLinkRequest,
     isInTable,
     getTableLocation,
+    insertAnswerLines,
     insertTable,
     deleteTable,
     insertRowAbove,
@@ -4204,6 +4254,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"];
@@ -4270,6 +4321,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");
@@ -4334,6 +4388,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);
@@ -4397,6 +4452,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: [
@@ -4526,7 +4615,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",
@@ -4612,6 +4704,102 @@ 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) => {
+          const t = e.target;
+          if (!t || t.tagName !== "INPUT" && t.tagName !== "BUTTON" && t.tagName !== "SELECT") {
+            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();
@@ -4714,6 +4902,51 @@ 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.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.jsx)("hr", {}),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {