@sofereditor/react 0.3.2 → 0.5.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { RefObject, JSX, ReactNode } from 'react';
-import { EditorDocument, EditorHistory, SerializedDocument, Selection, MarkName, MarkAttrs, BlockType, BlockAttrs, AlignValue, ListKind, PageSettings, TableLocation, TableRect, ImageEmbed, EmbedLoc, SerializedBlock, DeltaOp, Position } from '@sofereditor/core';
+import { EditorDocument, EditorHistory, SerializedDocument, Selection, MarkName, MarkAttrs, BlockType, BlockAttrs, AlignValue, TableBorderPreset, ListKind, PageSettings, TableLocation, AnswerLineSpacing, TableRect, ImageEmbed, EmbedLoc, SerializedBlock, DeltaOp, Position } from '@sofereditor/core';
 
 /**
  * Subconjunto mínimo da Awareness do y-protocols que o overlay usa. Tipar assim
@@ -180,6 +180,14 @@ interface UseEditorResult {
     setCellBackground: (color: string | null) => void;
     /** Cor de fundo da célula focada; undefined fora de tabela ou sem cor. */
     getCellBackground: () => string | undefined;
+    /** Onde as linhas da grade da tabela focada aparecem. No-op fora de tabela. */
+    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;
@@ -214,6 +222,8 @@ interface UseEditorResult {
     isInTable: () => boolean;
     /** Returns `{blockIndex, row, col}` for the focus position, or null when outside a table. */
     getTableLocation: () => TableLocation | null;
+    /** Insere `count` linhas de resposta pautadas depois do bloco focado. */
+    insertAnswerLines: (count: number, spacing: AnswerLineSpacing) => void;
     insertTable: (rows: number, cols: number) => void;
     /** Removes the table at `blockIndex`. Defaults to the current focus table. */
     deleteTable: (blockIndex?: number) => void;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { RefObject, JSX, ReactNode } from 'react';
-import { EditorDocument, EditorHistory, SerializedDocument, Selection, MarkName, MarkAttrs, BlockType, BlockAttrs, AlignValue, ListKind, PageSettings, TableLocation, TableRect, ImageEmbed, EmbedLoc, SerializedBlock, DeltaOp, Position } from '@sofereditor/core';
+import { EditorDocument, EditorHistory, SerializedDocument, Selection, MarkName, MarkAttrs, BlockType, BlockAttrs, AlignValue, TableBorderPreset, ListKind, PageSettings, TableLocation, AnswerLineSpacing, TableRect, ImageEmbed, EmbedLoc, SerializedBlock, DeltaOp, Position } from '@sofereditor/core';
 
 /**
  * Subconjunto mínimo da Awareness do y-protocols que o overlay usa. Tipar assim
@@ -180,6 +180,14 @@ interface UseEditorResult {
     setCellBackground: (color: string | null) => void;
     /** Cor de fundo da célula focada; undefined fora de tabela ou sem cor. */
     getCellBackground: () => string | undefined;
+    /** Onde as linhas da grade da tabela focada aparecem. No-op fora de tabela. */
+    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;
@@ -214,6 +222,8 @@ interface UseEditorResult {
     isInTable: () => boolean;
     /** Returns `{blockIndex, row, col}` for the focus position, or null when outside a table. */
     getTableLocation: () => TableLocation | null;
+    /** Insere `count` linhas de resposta pautadas depois do bloco focado. */
+    insertAnswerLines: (count: number, spacing: AnswerLineSpacing) => void;
     insertTable: (rows: number, cols: number) => void;
     /** Removes the table at `blockIndex`. Defaults to the current focus table. */
     deleteTable: (blockIndex?: number) => void;

package/dist/index.js

@@ -1708,11 +1708,19 @@ function RemoteCursorsOverlay({
 
 // src/NodeView.tsx
 import { useMemo as useMemo2, useRef as useRef7 } from "react";
-import { tableRectSelection } from "@sofereditor/core";
+import {
+  answerLineStyle,
+  cellBorderStyle,
+  tableRectSelection
+} from "@sofereditor/core";
 
 // src/renderInline.tsx
 import { Fragment as Fragment3, memo } from "react";
-import { isImageEmbed } from "@sofereditor/core";
+import {
+  BLANK_STYLE,
+  isImageEmbed,
+  splitUnderscoreRuns
+} from "@sofereditor/core";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function renderInline(delta, keyPrefix) {
   if (delta.length === 0 || delta.length === 1 && typeof delta[0].insert === "string" && delta[0].insert === "") {
@@ -1891,8 +1899,15 @@ function ImageEmbedViewImpl({
     }
   );
 }
+function decorateBlanks(text) {
+  const segs = splitUnderscoreRuns(text);
+  if (segs.length === 1 && !segs[0].blank) return text;
+  return segs.map(
+    (s, i) => s.blank ? /* @__PURE__ */ jsx9("span", { "data-blank": "true", style: BLANK_STYLE, children: s.text }, i) : /* @__PURE__ */ jsx9(Fragment3, { children: s.text }, i)
+  );
+}
 function wrap(text, attrs) {
-  let node = text;
+  let node = decorateBlanks(text);
   if (!attrs) return node;
   if (attrs.bold) node = /* @__PURE__ */ jsx9("strong", { children: node });
   if (attrs.italic) node = /* @__PURE__ */ jsx9("em", { children: node });
@@ -1900,6 +1915,7 @@ function wrap(text, attrs) {
   if (attrs.strike) node = /* @__PURE__ */ jsx9("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) {
@@ -2152,6 +2168,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, answerLineStyle(attrs) ?? {});
   const base = {
     "data-block-index": index,
     "data-block-type": type,
@@ -2171,11 +2188,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) {
@@ -2231,7 +2247,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.
+                    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}`)
                 },
@@ -2814,12 +2840,14 @@ import {
   mergeRight as cmdMergeRight,
   mergeSelection as cmdMergeSelection,
   moveEmbedAnchor as cmdMoveEmbedAnchor,
+  setBlockAttrAtIndex as cmdSetBlockAttrAtIndex,
   setColumnWidth as cmdSetColumnWidth,
   setImageAttrs as cmdSetImageAttrs,
   splitCell as cmdSplitCell,
   tableRectSelection as tableRectSelection2,
   getMarksInRange,
   indentList as cmdIndentList,
+  insertAnswerLines as cmdInsertAnswerLines,
   insertTable as cmdInsertTable,
   insertTableColumn as cmdInsertColumn,
   insertTableRow as cmdInsertRow,
@@ -3050,6 +3078,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 = useCallback6((preset) => {
+    const sel = selectionRef.current;
+    if (!doc.isTable(sel.focus.blockIndex)) return;
+    cmdSetBlockAttrAtIndex(ctxRef.current, sel.focus.blockIndex, "borderPreset", preset);
+  }, [doc]);
+  const getTableBorderPreset = useCallback6(() => {
+    const sel = selectionRef.current;
+    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;
@@ -3083,6 +3131,9 @@ function useEditor(opts = {}) {
   const insertTable = useCallback6((rows, cols) => {
     cmdInsertTable(ctxRef.current, rows, cols);
   }, []);
+  const insertAnswerLines = useCallback6((count, spacing) => {
+    cmdInsertAnswerLines(ctxRef.current, count, spacing);
+  }, []);
   const deleteTable = useCallback6((blockIndex) => {
     const idx = blockIndex ?? selectionRef.current.focus.blockIndex;
     cmdDeleteTable(ctxRef.current, idx);
@@ -3291,6 +3342,10 @@ function useEditor(opts = {}) {
     getAlign,
     setCellBackground,
     getCellBackground,
+    setTableBorderPreset,
+    getTableBorderPreset,
+    setTableBorderColor,
+    getTableBorderColor,
     isListActive,
     toggleList,
     indentList,
@@ -3301,6 +3356,7 @@ function useEditor(opts = {}) {
     resolveLinkRequest,
     isInTable,
     getTableLocation,
+    insertAnswerLines,
     insertTable,
     deleteTable,
     insertRowAbove,
@@ -4260,6 +4316,7 @@ import {
   useRef as useRef12,
   useState as useState11
 } from "react";
+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"];
@@ -4281,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" },
@@ -4313,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) => {
@@ -4326,6 +4389,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");
@@ -4390,6 +4456,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);
@@ -4453,6 +4520,40 @@ function Toolbar({ className }) {
               },
               children: "\u232B"
             }
+          ),
+          /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", title: "Marca-texto", children: [
+            /* @__PURE__ */ jsx13(
+              "span",
+              {
+                className: "ed-toolbar-swatch ed-toolbar-swatch--highlight",
+                "aria-hidden": true,
+                style: { background: highlightValue }
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                type: "color",
+                value: highlightValue,
+                onChange: onHighlightChange,
+                onMouseDown: stop,
+                "aria-label": "Marca-texto"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              className: "ed-toolbar-btn",
+              title: "Remover marca-texto",
+              onMouseDown: stop,
+              onClick: (e) => {
+                e.preventDefault();
+                removeMark("highlight");
+              },
+              children: "\u232B"
+            }
           )
         ] }),
         /* @__PURE__ */ jsxs12(Group, { children: [
@@ -4582,7 +4683,10 @@ function Toolbar({ className }) {
             children: "\u{1F517}"
           }
         ) }),
-        /* @__PURE__ */ jsx13(Group, { children: /* @__PURE__ */ jsx13(TableMenu, {}) }),
+        /* @__PURE__ */ jsxs12(Group, { children: [
+          /* @__PURE__ */ jsx13(TableMenu, {}),
+          /* @__PURE__ */ jsx13(AnswerLinesMenu, {})
+        ] }),
         /* @__PURE__ */ jsxs12(Group, { children: [
           /* @__PURE__ */ jsx13(
             "button",
@@ -4668,6 +4772,99 @@ function Toolbar({ className }) {
     }
   );
 }
+function AnswerLinesMenu() {
+  const editor = useEditorContext();
+  const [open, setOpen] = useState11(false);
+  const [count, setCount] = useState11(5);
+  const [spacing, setSpacing] = useState11(1.5);
+  const rootRef = useRef12(null);
+  useEffect10(() => {
+    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(ANSWER_LINE_MAX, Math.trunc(count) || 1));
+  return /* @__PURE__ */ jsxs12("div", { ref: rootRef, className: "ed-toolbar-tablemenu", children: [
+    /* @__PURE__ */ jsx13(
+      "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__ */ jsxs12(
+      "div",
+      {
+        className: "ed-table-popover ed-answerlines-popover",
+        role: "menu",
+        onMouseDown: (e) => {
+          if (!keepsOwnMouseDown(e.target)) e.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", children: [
+            "Quantidade",
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: ANSWER_LINE_MAX,
+                value: count,
+                onChange: (e) => setCount(Number(e.target.value)),
+                "aria-label": "Quantidade de linhas"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", children: [
+            "Entrelinha",
+            /* @__PURE__ */ jsxs12(
+              "select",
+              {
+                value: String(spacing),
+                onChange: (e) => setSpacing(Number(e.target.value)),
+                "aria-label": "Entrelinha",
+                children: [
+                  /* @__PURE__ */ jsx13("option", { value: "1", children: "Simples" }),
+                  /* @__PURE__ */ jsx13("option", { value: "1.5", children: "1,5" }),
+                  /* @__PURE__ */ jsx13("option", { value: "2", children: "Duplo" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs12(
+            "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();
@@ -4705,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(
@@ -4796,6 +4990,56 @@ function TableMenu() {
               editor.setCellBackground(null);
             }, children: "Remover cor de fundo" }),
             /* @__PURE__ */ jsx13("hr", {}),
+            /* @__PURE__ */ jsxs12("label", { className: "ed-toolbar-label", children: [
+              "Bordas",
+              /* @__PURE__ */ jsxs12(
+                "select",
+                {
+                  value: editor.getTableBorderPreset(),
+                  onChange: (e) => editor.setTableBorderPreset(e.target.value),
+                  "aria-label": "Bordas da tabela",
+                  children: [
+                    /* @__PURE__ */ jsx13("option", { value: "all", children: "Todas" }),
+                    /* @__PURE__ */ jsx13("option", { value: "outer", children: "S\xF3 externas" }),
+                    /* @__PURE__ */ jsx13("option", { value: "horizontal", children: "S\xF3 horizontais" }),
+                    /* @__PURE__ */ jsx13("option", { value: "vertical", children: "S\xF3 verticais" }),
+                    /* @__PURE__ */ jsx13("option", { value: "none", children: "Nenhuma" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__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",
               {