@pixerate/editor-react 0.13.0 → 0.14.0

package/dist/spreadsheet/index.cjs

@@ -68,8 +68,12 @@ function useSpreadsheetEditor(options = {}) {
   const [activeCell, setActiveCell] = (0, import_react.useState)(controller.activeCell);
   const [selectedRange, setSelectedRange] = (0, import_react.useState)(controller.selectedRange);
   const [editingCell, setEditingCell] = (0, import_react.useState)(null);
-  const [draftValue, setDraftValue] = (0, import_react.useState)("");
+  const [draftValue, setDraftState] = (0, import_react.useState)("");
   settersRef.current = { setDoc, setActiveCell, setSelectedRange };
+  const setDraftValue = (0, import_react.useCallback)((value) => {
+    controller.draftValue = value;
+    setDraftState(value);
+  }, [controller]);
   const setCellValue = (0, import_react.useCallback)((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
@@ -203,15 +207,30 @@ function useSpreadsheetEditor(options = {}) {
 
 // src/spreadsheet/SpreadsheetEditor.tsx
 var import_react5 = require("react");
-var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
+var import_spreadsheet5 = require("@pixerate/editor/spreadsheet");
 
 // src/spreadsheet/SpreadsheetContextMenu.tsx
 var import_react2 = __toESM(require("react"), 1);
+var import_spreadsheet2 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime = require("react/jsx-runtime");
+var VIEWPORT_MARGIN = 4;
 var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
   const menuRef = (0, import_react2.useRef)(null);
   const onCloseRef = (0, import_react2.useRef)(onClose);
   onCloseRef.current = onClose;
+  const [position, setPosition] = (0, import_react2.useState)({ x, y });
+  (0, import_react2.useLayoutEffect)(() => {
+    const menu = menuRef.current;
+    if (!menu || typeof window === "undefined") return;
+    const { width, height } = menu.getBoundingClientRect();
+    const next = (0, import_spreadsheet2.clampMenuPosition)(
+      { x, y },
+      { width, height },
+      { width: window.innerWidth, height: window.innerHeight },
+      VIEWPORT_MARGIN
+    );
+    setPosition((prev) => prev.x === next.x && prev.y === next.y ? prev : next);
+  }, [x, y, items]);
   (0, import_react2.useEffect)(() => {
     const handlePointer = (e) => {
       if (!menuRef.current?.contains(e.target)) onCloseRef.current();
@@ -233,7 +252,13 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
       role: "menu",
       "aria-label": "Table actions",
       className: "fixed z-50 min-w-[14rem] rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg",
-      style: { left: x, top: y, background: "var(--popover, var(--background, #fff))" },
+      style: {
+        left: position.x,
+        top: position.y,
+        maxHeight: `calc(100vh - ${VIEWPORT_MARGIN * 2}px)`,
+        overflowY: "auto",
+        background: "var(--popover, var(--background, #fff))"
+      },
       onContextMenu: (e) => e.preventDefault(),
       onKeyDown: (e) => e.stopPropagation(),
       children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.default.Fragment, { children: [
@@ -270,7 +295,7 @@ var SpreadsheetGroupRow = ({
 }) => {
   const labelColId = columns.some((c) => c.column.id === groupColId) ? groupColId : columns[0]?.column.id;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { className: "border-b border-border bg-muted/40 font-semibold", "data-group-key": group.key, style: { height: 28 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/60 border-r border-border text-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
       {
         type: "button",
@@ -302,7 +327,7 @@ var SpreadsheetGroupRow = ({
 
 // src/spreadsheet/useSpreadsheetTableInteractions.ts
 var import_react3 = require("react");
-var import_spreadsheet2 = require("@pixerate/editor/spreadsheet");
+var import_spreadsheet3 = require("@pixerate/editor/spreadsheet");
 function gridHasFocus(grid) {
   if (!grid || typeof document === "undefined") return false;
   const active = document.activeElement;
@@ -343,7 +368,8 @@ function useSpreadsheetClipboard(gridRef, state, readOnly) {
     setTimeout(() => {
       if (copiedRef.current) return;
       const s = stateRef.current;
-      navigator.clipboard?.writeText(s.exportToTsv(s.selectedRange));
+      Promise.resolve(navigator.clipboard?.writeText(s.exportToTsv(s.selectedRange))).catch(() => {
+      });
     }, 0);
   }, []);
   return { copyShortcutFallback };
@@ -369,19 +395,19 @@ function useFillHandle(state) {
     e.preventDefault();
     e.stopPropagation();
     const range = stateRef.current.selectedRange;
-    if (range) setDrag({ source: (0, import_spreadsheet2.normalizeRange)(range), target: null });
+    if (range) setDrag({ source: (0, import_spreadsheet3.normalizeRange)(range), target: null });
   }, []);
   const extendFill = (0, import_react3.useCallback)((row, col) => {
     const current = dragRef.current;
     if (!current) return;
-    setDrag({ source: current.source, target: (0, import_spreadsheet2.computeFillTarget)(current.source, { row, col }) });
+    setDrag({ source: current.source, target: (0, import_spreadsheet3.computeFillTarget)(current.source, { row, col }) });
   }, []);
   return { fillTarget: drag?.target ?? null, isFilling: dragging, startFill, extendFill };
 }
 
 // src/spreadsheet/FormulaHints.tsx
 var import_react4 = require("react");
-var import_spreadsheet3 = require("@pixerate/editor/spreadsheet");
+var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
   const [caret, setCaret] = (0, import_react4.useState)(null);
@@ -391,7 +417,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
   const [position, setPosition] = (0, import_react4.useState)(null);
   const pendingCaret = (0, import_react4.useRef)(null);
   const hints = (0, import_react4.useMemo)(
-    () => (0, import_spreadsheet3.getFormulaHints)(value, caret ?? value.length, { limit }),
+    () => (0, import_spreadsheet4.getFormulaHints)(value, caret ?? value.length, { limit }),
     [value, caret, limit]
   );
   const suggestions = dismissed ? [] : hints.suggestions;
@@ -403,7 +429,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
     const { suggestions: list, value: current, caret: at, onAccept: commit } = latest.current;
     const suggestion = list[index];
     if (!suggestion) return;
-    const next = (0, import_spreadsheet3.applyFormulaSuggestion)(current, at ?? current.length, suggestion.name);
+    const next = (0, import_spreadsheet4.applyFormulaSuggestion)(current, at ?? current.length, suggestion.name);
     pendingCaret.current = next.caret;
     commit(next.value);
   };
@@ -543,6 +569,20 @@ function frozenCellStyle(viewRow, viewCol) {
     background: "var(--background, #fff)"
   };
 }
+var coordKey = (cell) => cell ? `${(0, import_spreadsheet5.indexToColName)(cell.col)}${cell.row + 1}` : "";
+function spillBorderStyle(range, row, col) {
+  const line = "1px solid color-mix(in srgb, var(--primary, #6366f1) 60%, transparent)";
+  return {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 5,
+    borderTop: row === range.startRow ? line : void 0,
+    borderBottom: row === range.endRow ? line : void 0,
+    borderLeft: col === range.startCol ? line : void 0,
+    borderRight: col === range.endCol ? line : void 0
+  };
+}
 var SpreadsheetEditor = ({
   state: externalState,
   readOnly = false,
@@ -573,10 +613,10 @@ var SpreadsheetEditor = ({
     if (readOnly) return;
     e.preventDefault();
     if (state.editingCell) state.commitEditing();
-    if (!state.selectedRange || !(0, import_spreadsheet4.rangeContains)(state.selectedRange, rIdx, cIdx)) {
+    if (!state.selectedRange || !(0, import_spreadsheet5.rangeContains)(state.selectedRange, rIdx, cIdx)) {
       state.selectCell(rIdx, cIdx);
     }
-    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet4.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
+    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet5.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
   }, [readOnly, state]);
   const activeRawValue = (0, import_react5.useMemo)(() => {
     if (!state.activeCell) return "";
@@ -585,9 +625,15 @@ var SpreadsheetEditor = ({
     if (!row || !col) return "";
     return state.getCell(row.id, col.id).raw;
   }, [state.activeCell, state.document]);
+  const activeSpill = (0, import_react5.useMemo)(
+    () => state.activeCell ? state.controller.getSpillAt(state.activeCell.row, state.activeCell.col) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.controller, state.activeCell, state.document]
+  );
+  const spillFormula = activeSpill && !activeRawValue && activeSpill.key !== coordKey(state.activeCell) ? activeSpill.formula : "";
   const coordLabel = (0, import_react5.useMemo)(() => {
     if (!state.activeCell) return "--";
-    const colName = (0, import_spreadsheet4.indexToColName)(state.activeCell.col);
+    const colName = (0, import_spreadsheet5.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
   const [formulaDraft, setFormulaDraft] = (0, import_react5.useState)(null);
@@ -634,7 +680,10 @@ var SpreadsheetEditor = ({
         e.preventDefault();
         state.commitEditing();
         state.moveCursor(e.shiftKey ? "left" : "right");
+      } else {
+        return;
       }
+      gridRef.current?.focus();
       return;
     }
     if (!state.activeCell) return;
@@ -682,6 +731,7 @@ var SpreadsheetEditor = ({
     } else if (!readOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       const col = state.document.columns[state.activeCell.col];
       if (!col?.readOnly) {
+        e.preventDefault();
         state.startEditing(state.activeCell.row, state.activeCell.col, e.key);
       }
     }
@@ -874,7 +924,9 @@ var SpreadsheetEditor = ({
               placeholder: "Enter a value or formula (e.g. =SUM(A1:A5))",
               "aria-label": "Formula bar",
               readOnly: formulaBarReadOnly,
-              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
+              "data-spill-formula": !state.editingCell && formulaDraft === null && spillFormula ? "true" : void 0,
+              style: !state.editingCell && formulaDraft === null && spillFormula ? { color: "var(--muted-foreground, #94a3b8)" } : void 0,
+              value: state.editingCell ? state.draftValue : formulaDraft ?? (activeRawValue || spillFormula),
               onFocus: () => {
                 if (!state.editingCell) setFormulaDraft(activeRawValue);
               },
@@ -909,8 +961,8 @@ var SpreadsheetEditor = ({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: "h-7 bg-muted/60 sticky top-0 z-20 border-b border-border shadow-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted/90 border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: "h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
             view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "th",
               {
@@ -996,7 +1048,7 @@ var SpreadsheetEditor = ({
               );
             }
             const displayRowIndex = viewRow.index;
-            const selection = state.selectedRange ? (0, import_spreadsheet4.normalizeRange)(state.selectedRange) : null;
+            const selection = state.selectedRange ? (0, import_spreadsheet5.normalizeRange)(state.selectedRange) : null;
             return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "tr",
               {
@@ -1007,7 +1059,7 @@ var SpreadsheetEditor = ({
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "td",
                     {
-                      className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/50 border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none",
+                      className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none",
                       style: viewRow.frozen ? { top: COLUMN_HEADER_HEIGHT + viewRow.stickyTop, zIndex: 15 } : void 0,
                       children: displayRowIndex + 1
                     }
@@ -1023,8 +1075,8 @@ var SpreadsheetEditor = ({
                     const selected = isCellSelected(rIdx, cIdx);
                     const active = isActiveCell(rIdx, cIdx);
                     const isEditing = state.editingCell?.row === rIdx && state.editingCell?.col === cIdx;
-                    const inFillPreview = !!fillTarget && !selected && (0, import_spreadsheet4.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
-                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet4.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
+                    const inFillPreview = !!fillTarget && !selected && (0, import_spreadsheet5.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
+                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet5.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
                     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                       "td",
                       {
@@ -1054,6 +1106,10 @@ var SpreadsheetEditor = ({
                                 value: state.draftValue,
                                 onChange: (e) => state.setDraftValue(e.target.value),
                                 onBlur: () => state.commitEditing(),
+                                onFocus: (e) => {
+                                  const end = e.currentTarget.value.length;
+                                  e.currentTarget.setSelectionRange(end, end);
+                                },
                                 autoFocus: true
                               }
                             ),
@@ -1066,6 +1122,7 @@ var SpreadsheetEditor = ({
                               children: cell.error || (cell.value ?? "")
                             }
                           ),
+                          activeSpill && (0, import_spreadsheet5.rangeContains)(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
                           showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "div",
                             {