@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/hooks/use-editable.js

@@ -0,0 +1,823 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditable = exports.areTextFormatRunsEqual = exports.getDefaultEditor = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var grid_2 = require("@rowsncolumns/grid");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = require("react");
+var rxjs_1 = require("rxjs");
+var atoms_1 = require("../atoms");
+var config_1 = require("../config");
+var scroll_subscriber_1 = require("../signals/scroll-subscriber");
+var use_callback_ref_1 = require("./use-callback-ref");
+var use_isomorphic_layout_effect_1 = require("./use-isomorphic-layout-effect");
+var getDefaultEditor = function () { return null; };
+exports.getDefaultEditor = getDefaultEditor;
+var defaultCanEdit = function () { return true; };
+var defaultIsHidden = function () { return false; };
+/**
+ * Lightweight deep equality for `TextFormatRun[]`. Used by the
+ * editable hook to detect pure-formatting edits (Cmd+B on existing
+ * text, where the value string is unchanged) so the editor's
+ * `isDirtyRef` flips and the submit-on-blur path doesn't drop the
+ * formatting. Kept local to this file to avoid a cross-package
+ * import from spreadsheet-state. Exported only for unit tests.
+ */
+var areTextFormatRunsEqual = function (a, b) {
+    var e_1, _a;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var lenA = (_b = a === null || a === void 0 ? void 0 : a.length) !== null && _b !== void 0 ? _b : 0;
+    var lenB = (_c = b === null || b === void 0 ? void 0 : b.length) !== null && _c !== void 0 ? _c : 0;
+    if (lenA === 0 && lenB === 0)
+        return true;
+    if (lenA !== lenB)
+        return false;
+    for (var i = 0; i < lenA; i++) {
+        var ra = a[i];
+        var rb = b[i];
+        if (ra.startIndex !== rb.startIndex)
+            return false;
+        if (ra.endIndex !== rb.endIndex)
+            return false;
+        if (ra.nodeType !== rb.nodeType)
+            return false;
+        if (ra.nodeType === "mention") {
+            if (rb.nodeType !== "mention")
+                return false;
+            if (((_d = ra.mention) === null || _d === void 0 ? void 0 : _d.value) !== ((_e = rb.mention) === null || _e === void 0 ? void 0 : _e.value))
+                return false;
+            if (((_f = ra.mention) === null || _f === void 0 ? void 0 : _f.label) !== ((_g = rb.mention) === null || _g === void 0 ? void 0 : _g.label))
+                return false;
+            continue;
+        }
+        var fa = (_h = ra.format) !== null && _h !== void 0 ? _h : {};
+        var fb = (_j = rb.format) !== null && _j !== void 0 ? _j : {};
+        var keys = new Set(tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(Object.keys(fa)), false), tslib_1.__read(Object.keys(fb)), false));
+        try {
+            for (var keys_1 = (e_1 = void 0, tslib_1.__values(keys)), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
+                var k = keys_1_1.value;
+                if (fa[k] !== fb[k])
+                    return false;
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (keys_1_1 && !keys_1_1.done && (_a = keys_1.return)) _a.call(keys_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
+    return true;
+};
+exports.areTextFormatRunsEqual = areTextFormatRunsEqual;
+/**
+ * Selection keys that should not trigger cell editing
+ */
+var SELECTION_KEYS = new Set([
+    "ArrowRight",
+    "ArrowLeft",
+    "ArrowUp",
+    "ArrowDown",
+    "Meta",
+    "Control",
+    "Escape",
+    "Tab",
+    "Home",
+    "End",
+    "CapsLock",
+    "PageDown",
+    "PageUp",
+    "ScrollLock",
+    "NumLock",
+    "Insert",
+    "Pause",
+]);
+/**
+ * Media keys and browser control keys that should not trigger cell editing
+ * These keys should be treated as selection keys (return true from isSelectionKey)
+ */
+var MEDIA_KEYS = new Set([
+    // Media playback keys
+    "MediaPlayPause",
+    "MediaPlay",
+    "MediaPause",
+    "MediaStop",
+    "MediaTrackNext",
+    "MediaTrackPrevious",
+    "MediaRewind",
+    "MediaFastForward",
+    "MediaRecord",
+    // Volume keys
+    "AudioVolumeUp",
+    "AudioVolumeDown",
+    "AudioVolumeMute",
+    "VolumeUp",
+    "VolumeDown",
+    "VolumeMute",
+    // Browser navigation and control keys
+    "BrowserBack",
+    "BrowserForward",
+    "BrowserRefresh",
+    "BrowserStop",
+    "BrowserSearch",
+    "BrowserFavorites",
+    "BrowserHome",
+    // System keys
+    "LaunchApplication1",
+    "LaunchApplication2",
+    "LaunchMail",
+    "LaunchMediaPlayer",
+    "LaunchCalendar",
+    "LaunchContacts",
+    "PrintScreen",
+    "ContextMenu",
+    "Power",
+    "Sleep",
+    "WakeUp",
+    "Eject",
+    // OS specific keys
+    "OSLeft",
+    "OSRight",
+]);
+/**
+ * Hook to make grid editable
+ * @param param
+ *
+ * TODO:
+ * 1. Edit a cell
+ * 2. Tab to next cell
+ * 3. Enter a value
+ * 4. Press down key
+ *
+ * Moves to incorrect cell
+ */
+var useEditable = function (_a) {
+    var _b, _c;
+    var _d = _a.getEditor, getEditor = _d === void 0 ? exports.getDefaultEditor : _d, getValue = _a.getValue, getTextFormatRuns = _a.getTextFormatRuns, onChange = _a.onChange, onSubmit = _a.onSubmit, onCancel = _a.onCancel, onBlur = _a.onBlur, onDelete = _a.onDelete, sheetId = _a.sheetId, _e = _a.selections, selections = _e === void 0 ? config_1.DEFAULT_ARRAY : _e, activeCell = _a.activeCell, _f = _a.canEdit, canEdit = _f === void 0 ? defaultCanEdit : _f, _g = _a.frozenRows, frozenRows = _g === void 0 ? 0 : _g, _h = _a.frozenColumns, frozenColumns = _h === void 0 ? 0 : _h, _j = _a.hideOnBlur, hideOnBlur = _j === void 0 ? true : _j, _k = _a.isHiddenRow, isHiddenRow = _k === void 0 ? defaultIsHidden : _k, _l = _a.isHiddenColumn, isHiddenColumn = _l === void 0 ? defaultIsHidden : _l, rowCount = _a.rowCount, columnCount = _a.columnCount, _m = _a.selectionTopBound, selectionTopBound = _m === void 0 ? 0 : _m, _o = _a.selectionBottomBound, selectionBottomBound = _o === void 0 ? rowCount : _o, _p = _a.selectionLeftBound, selectionLeftBound = _p === void 0 ? 0 : _p, _q = _a.selectionRightBound, selectionRightBound = _q === void 0 ? columnCount : _q, _r = _a.enableEditOnEnterKey, enableEditOnEnterKey = _r === void 0 ? true : _r, sticky = _a.sticky, editorBorderColor = _a.editorBorderColor, editorBorderOutlineColor = _a.editorBorderOutlineColor, onBeforeEdit = _a.onBeforeEdit, onKeyDown = _a.onKeyDown, onEditorKeyDown = _a.onEditorKeyDown, getCellOffsetFromCoords = _a.getCellOffsetFromCoords, getCellCoordsFromOffset = _a.getCellCoordsFromOffset, getCellBounds = _a.getCellBounds, focus = _a.focus, getActualCellCoords = _a.getActualCellCoords, scrollToCell = _a.scrollToCell, onChangeBatch = _a.onChangeBatch, _s = _a.containerWidth, containerWidth = _s === void 0 ? 0 : _s, _t = _a.containerHeight, containerHeight = _t === void 0 ? 0 : _t, getScrollPosition = _a.getScrollPosition, getColumnOffset = _a.getColumnOffset, getEditorAlignment = _a.getEditorAlignment, getSheetRowCount = _a.getSheetRowCount, getSheetColumnCount = _a.getSheetColumnCount, getBooleanValue = _a.getBooleanValue, getDataValidation = _a.getDataValidation, setActiveCell = _a.setActiveCell, onCopy = _a.onCopy, onPaste = _a.onPaste, onCut = _a.onCut;
+    var editingCellCoordinate = (0, atoms_1.useEditingCellCoordinate)();
+    var _u = tslib_1.__read((0, atoms_1.useEditorVisibility)(), 2), isEditorShown = _u[0], setShowEditor = _u[1];
+    var _v = tslib_1.__read((0, atoms_1.useCellEditorValue)(), 2), value = _v[0], setValue = _v[1];
+    var _w = tslib_1.__read((0, atoms_1.useCellEditorTextFormatRuns)(), 2), textFormatRuns = _w[0], setTextFormatRuns = _w[1];
+    var currentActiveCellRef = (0, react_1.useRef)(null);
+    var initialActiveCell = (0, react_1.useRef)(undefined);
+    var _x = tslib_1.__read((0, react_1.useState)(true), 2), autoFocus = _x[0], setAutoFocus = _x[1];
+    var _y = tslib_1.__read((0, react_1.useState)(false), 2), isScrolling = _y[0], setIsScrolling = _y[1];
+    var isDirtyRef = (0, react_1.useRef)(false);
+    var isEnteringNewValue = (0, react_1.useRef)(false);
+    var currentValueRef = (0, react_1.useRef)(value);
+    var currentTextFormatRunsRef = (0, react_1.useRef)(textFormatRuns);
+    var initialValueRef = (0, react_1.useRef)(undefined);
+    // Snapshot of the cell's textFormatRuns at edit-start. Compared in
+    // handleChange so a pure-formatting edit (Cmd+B on existing text)
+    // flips isDirtyRef and the editor's submit-on-blur path persists
+    // the runs instead of cancelling.
+    var initialTextFormatRunsRef = (0, react_1.useRef)(undefined);
+    var isPointerDeviceRef = (0, react_1.useRef)(false);
+    var maxEditorDimensionsRef = (0, react_1.useRef)(undefined);
+    var isMounted = (0, react_1.useRef)(false);
+    var showEditor = (0, react_1.useCallback)(function () { return setShowEditor(true); }, [setShowEditor]);
+    var setActiveEditor = (0, atoms_1.useSetActiveEditor)();
+    var cellEditorInstance = (0, atoms_1.useCellEditorInstance)();
+    var setFormulaMode = (0, atoms_1.useSetFormulaMode)();
+    var hideEditor = (0, react_1.useCallback)(function () {
+        setShowEditor(false);
+        currentActiveCellRef.current = null;
+        // Clear value
+        setValue("");
+        setFormulaMode(false);
+    }, [setShowEditor, setValue, setFormulaMode]);
+    // Focus on the input
+    var focusGrid = (0, react_1.useCallback)(function () {
+        focus();
+    }, [focus]);
+    // When user scrolls, we have to show cell address
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        var scrollSubscription = scroll_subscriber_1.scrollSubscriber.pipe((0, rxjs_1.first)()).subscribe(function () {
+            setIsScrolling(true);
+        });
+        return function () {
+            scrollSubscription.unsubscribe();
+        };
+    }, [isScrolling]);
+    // Mounted ref
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        isMounted.current = true;
+    }, []);
+    /* Keep ref in sync */
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        currentValueRef.current = value;
+    }, [value]);
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        currentTextFormatRunsRef.current = textFormatRuns;
+    }, [textFormatRuns]);
+    // Edits
+    var editingCell = currentActiveCellRef.current;
+    var editingSheetId = editingCellCoordinate === null || editingCellCoordinate === void 0 ? void 0 : editingCellCoordinate.sheetId;
+    // Edit in progress
+    var isEditInProgress = isEditorShown && !!editingCell;
+    /**
+     * Get current cell position based on scroll position
+     * @param position
+     * @param scrollPosition
+     */
+    var getCellPosition = (0, react_1.useCallback)(function (cell, scrollPosition) {
+        var _a, _b, _c;
+        var _d = (_a = getCellOffsetFromCoords(cell)) !== null && _a !== void 0 ? _a : {}, _e = _d.x, x = _e === void 0 ? 0 : _e, _f = _d.y, y = _f === void 0 ? 0 : _f, _g = _d.width, width = _g === void 0 ? 0 : _g, _h = _d.height, height = _h === void 0 ? 0 : _h;
+        var isFrozenRow = cell.rowIndex < frozenRows;
+        var isFrozenColumn = cell.columnIndex < frozenColumns;
+        var scrollLeft = (_b = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+        var scrollTop = (_c = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollTop) !== null && _c !== void 0 ? _c : 0;
+        var isRightAlign = getEditorAlignment(sheetId, cell.rowIndex, cell.columnIndex) ===
+            "right";
+        var finalX = sticky
+            ? x - (isFrozenColumn ? 0 : scrollLeft)
+            : x +
+                (isRightAlign && !isFrozenColumn
+                    ? getColumnOffset(frozenColumns)
+                    : 0);
+        var finalY = y - (isFrozenRow || !sticky ? 0 : scrollTop);
+        return {
+            width: width,
+            height: height,
+            x: finalX,
+            y: finalY,
+        };
+    }, [
+        sheetId,
+        sticky,
+        frozenRows,
+        frozenColumns,
+        getCellOffsetFromCoords,
+        getEditorAlignment,
+        getColumnOffset,
+    ]);
+    var cellPosition = (0, react_1.useMemo)(function () {
+        // Add cell
+        var scrollPosition = getScrollPosition();
+        var currentCell = editingCellCoordinate;
+        if (!currentCell) {
+            return { x: 0, y: 0, width: 0, height: 0 };
+        }
+        return getCellPosition(currentCell, scrollPosition);
+    }, [editingCellCoordinate, getCellPosition, getScrollPosition]);
+    /**
+     * Make a cell editable
+     * @param coords
+     * @param initialValue
+     */
+    var makeEditable = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, cell, initialValue, options) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var _a, _b, autoFocus, _c, isPointerDevice, _d, fromKeystroke, coords, cellValue, textFormatRuns_1, value_1, scrollPosition, cellPosition_1, _e, x, _f, y, _g, width, cellEditorBuffer, isRightAligned, frozenColumnOffset, maxWidth, isProgrammaticValue;
+        var _h, _j, _k;
+        return tslib_1.__generator(this, function (_l) {
+            _a = options !== null && options !== void 0 ? options : {}, _b = _a.autoFocus, autoFocus = _b === void 0 ? true : _b, _c = _a.isPointerDevice, isPointerDevice = _c === void 0 ? false : _c, _d = _a.fromKeystroke, fromKeystroke = _d === void 0 ? false : _d;
+            coords = getActualCellCoords(cell);
+            /* Check if its the same cell */
+            if (!coords || (0, grid_2.isEqualCells)(coords, currentActiveCellRef.current)) {
+                return [2 /*return*/];
+            }
+            // Se active editor
+            setActiveEditor(cellEditorInstance);
+            // Reset scroll position
+            setIsScrolling(false);
+            /* Call on before edit */
+            if (canEdit(sheetId, coords)) {
+                /* Let user modify coords before edit */
+                onBeforeEdit === null || onBeforeEdit === void 0 ? void 0 : onBeforeEdit(sheetId, coords);
+                /*  Focus */
+                scrollToCell(coords);
+                // Set active cell ref
+                currentActiveCellRef.current = coords;
+                cellValue = getValue === null || getValue === void 0 ? void 0 : getValue(sheetId, coords.rowIndex, coords.columnIndex);
+                textFormatRuns_1 = getTextFormatRuns === null || getTextFormatRuns === void 0 ? void 0 : getTextFormatRuns(sheetId, coords.rowIndex, coords.columnIndex);
+                value_1 = (_h = initialValue !== null && initialValue !== void 0 ? initialValue : cellValue) !== null && _h !== void 0 ? _h : "";
+                scrollPosition = getScrollPosition();
+                cellPosition_1 = getCellPosition(coords, scrollPosition);
+                _e = cellPosition_1.x, x = _e === void 0 ? 0 : _e, _f = cellPosition_1.y, y = _f === void 0 ? 0 : _f, _g = cellPosition_1.width, width = _g === void 0 ? 0 : _g;
+                cellEditorBuffer = 3;
+                isRightAligned = getEditorAlignment(sheetId, coords.rowIndex, coords.columnIndex) ===
+                    "right";
+                frozenColumnOffset = coords.columnIndex < frozenColumns
+                    ? 0
+                    : getColumnOffset(frozenColumns);
+                maxWidth = isRightAligned
+                    ? sticky
+                        ? x + width
+                        : x - 2 * frozenColumnOffset + width
+                    : containerWidth -
+                        x +
+                        (sticky ? 0 : (_j = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollLeft) !== null && _j !== void 0 ? _j : 0) -
+                        cellEditorBuffer;
+                maxEditorDimensionsRef.current = {
+                    height: containerHeight -
+                        y +
+                        (sticky ? 0 : (_k = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollTop) !== null && _k !== void 0 ? _k : 0) -
+                        cellEditorBuffer,
+                    width: maxWidth,
+                };
+                /**
+                 * If the user has entered a value in the cell, mark it as dirty
+                 * So that during mousedown, onSubmit gets called
+                 */
+                isEnteringNewValue.current =
+                    initialValue !== void 0 || cellValue === void 0;
+                isDirtyRef.current = !!initialValue;
+                // Todo
+                initialValueRef.current = cellValue;
+                // Snapshot for run-equality comparison on submit/blur.
+                initialTextFormatRunsRef.current = textFormatRuns_1;
+                // Set input source
+                isPointerDeviceRef.current = isPointerDevice;
+                /* Show editor */
+                showEditor();
+                setAutoFocus(autoFocus);
+                isProgrammaticValue = initialValue !== void 0 && !fromKeystroke;
+                if (!isEnteringNewValue.current || isProgrammaticValue) {
+                    /**
+                     * Setting value will trigger prosemirror
+                     * to update value
+                     */
+                    setValue(value_1);
+                    setTextFormatRuns(textFormatRuns_1);
+                    setFormulaMode((0, utils_1.isAFormula)(value_1));
+                }
+            }
+            return [2 /*return*/];
+        });
+    }); }, [
+        onBeforeEdit,
+        canEdit,
+        getValue,
+        getTextFormatRuns,
+        getCellPosition,
+        getScrollPosition,
+        getActualCellCoords,
+        getEditorAlignment,
+        containerWidth,
+        containerHeight,
+        scrollToCell,
+        setValue,
+        setTextFormatRuns,
+        showEditor,
+        frozenColumns,
+        getColumnOffset,
+        sticky,
+        cellEditorInstance,
+        setActiveEditor,
+        setFormulaMode,
+    ]));
+    /* Activate edit mode */
+    var handleDoubleClick = (0, react_1.useCallback)(function (e) {
+        if (isEditInProgress) {
+            return;
+        }
+        var coords = getCellCoordsFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY);
+        if (!coords)
+            return;
+        var rowIndex = coords.rowIndex, columnIndex = coords.columnIndex;
+        makeEditable(sheetId, { rowIndex: rowIndex, columnIndex: columnIndex }, undefined, {
+            isPointerDevice: true,
+        });
+    }, [sheetId, makeEditable, getCellCoordsFromOffset, isEditInProgress]);
+    var isSelectionKey = (0, react_1.useCallback)(function (key) {
+        // Check if key is in SELECTION_KEYS
+        if (SELECTION_KEYS.has(key)) {
+            return true;
+        }
+        // Media and browser control keys should not trigger editing
+        if (MEDIA_KEYS.has(key)) {
+            return true;
+        }
+        // Handle Function keys (F1-F12 except F2)
+        // F2 is allowed for editing, all other function keys are selection keys
+        if (key.startsWith("F") &&
+            key.length >= 2 &&
+            /^F([1-9]|1[0-2])$/.test(key)) {
+            return key !== "F2";
+        }
+        return false;
+    }, []);
+    /**
+     * Helper function to keep track of
+     * the first cell that the user started editing
+     * @param cell
+     */
+    var setInitialActiveCell = (0, react_1.useCallback)(function (cell) {
+        initialActiveCell.current = cell;
+    }, []);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
+        var nativeEvent = e.nativeEvent;
+        var key = nativeEvent.key;
+        var isF2 = key === "F2";
+        var isEnter = key === "Enter";
+        // Edit mode
+        if (isEditInProgress) {
+            // Exit if editor prevented this keydown
+            // If dropdown is active
+            if (e.defaultPrevented) {
+                return;
+            }
+            // Pass it on
+            onEditorKeyDown === null || onEditorKeyDown === void 0 ? void 0 : onEditorKeyDown(e);
+        }
+        else {
+            // Pass it on
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+            // Check if user has enabled enableEditOnEnterKey
+            if (isEnter && !enableEditOnEnterKey) {
+                return;
+            }
+            // If user has made selections and presses enter key
+            // Ignore it
+            if (selections.length && isEnter) {
+                // use-selection hook will take over to
+                // cycle through the selections
+                return;
+            }
+            if (key === "Tab" && !initialActiveCell.current) {
+                setInitialActiveCell(activeCell);
+            }
+            if ((0, grid_2.isArrowKey)(key)) {
+                setInitialActiveCell(null);
+            }
+            if (isSelectionKey(key) ||
+                nativeEvent.key === "Control" ||
+                nativeEvent.code === "ControlLeft" ||
+                nativeEvent.code === "ControlRight" ||
+                nativeEvent.ctrlKey ||
+                nativeEvent.altKey ||
+                (nativeEvent.shiftKey &&
+                    (nativeEvent.key === "Shift" || nativeEvent.key === " ")) ||
+                nativeEvent.metaKey ||
+                nativeEvent.key === "Alt" ||
+                (isF2 && nativeEvent.shiftKey)) {
+                return;
+            }
+            /* If user has not made any selection yet */
+            if (!activeCell) {
+                return;
+            }
+            var rowIndex = activeCell.rowIndex, columnIndex = activeCell.columnIndex;
+            // For checkbox cells
+            var isCheckbox = ((_b = (_a = getDataValidation(sheetId, rowIndex, columnIndex)) === null || _a === void 0 ? void 0 : _a.condition) === null || _b === void 0 ? void 0 : _b.type) ===
+                "BOOLEAN";
+            if (key === " " && isCheckbox) {
+                // This is a checkbox and user is toggling it
+                var boolValue = getBooleanValue(sheetId, rowIndex, columnIndex);
+                // Batch update cells
+                if (selections.length) {
+                    onChangeBatch === null || onChangeBatch === void 0 ? void 0 : onChangeBatch(sheetId, selections.map(function (sel) { return sel.range; }), !boolValue);
+                    // Trigger change of cell
+                    // So formula bar input triggers
+                    // a re-render
+                    setActiveCell === null || setActiveCell === void 0 ? void 0 : setActiveCell(sheetId, tslib_1.__assign({}, activeCell));
+                }
+                else {
+                    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(!boolValue, undefined, boolValue, sheetId, activeCell, tslib_1.__assign({}, activeCell));
+                }
+                e.preventDefault();
+            }
+            else if (key === "Delete" || key === "Backspace") {
+                // TODO: onbefore  delete
+                onDelete === null || onDelete === void 0 ? void 0 : onDelete(sheetId, activeCell, selections);
+                // Delete value
+                setValue("");
+                setFormulaMode(false);
+            }
+            else {
+                var initialValue = isEnter || isF2 // Enter key
+                    ? undefined
+                    : nativeEvent.key;
+                /* Open the editor. fromKeystroke: the typed character is inserted
+                 * into the focused editor natively, so makeEditable must not also
+                 * set it. */
+                makeEditable(sheetId, { rowIndex: rowIndex, columnIndex: columnIndex }, initialValue, {
+                    fromKeystroke: true,
+                });
+            }
+        }
+    }, [
+        sheetId,
+        selections,
+        activeCell,
+        setValue,
+        isEditInProgress,
+        onSubmit,
+        onChangeBatch,
+        setActiveCell,
+        getBooleanValue,
+        getDataValidation,
+        onDelete,
+        makeEditable,
+        isSelectionKey,
+        setInitialActiveCell,
+        onEditorKeyDown,
+        onKeyDown,
+        enableEditOnEnterKey,
+        setFormulaMode,
+    ]);
+    /**
+     * Get next focusable cell
+     * Respects selection bounds
+     */
+    var getNextFocusableCell = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, currentCell, direction, restrictWithinSelection) {
+        var _a, _b, _c, _d, _e, _f;
+        if (direction === void 0) { direction = grid_2.Direction.Right; }
+        if (restrictWithinSelection === void 0) { restrictWithinSelection = true; }
+        /* Next immediate cell */
+        var bounds = getCellBounds(currentCell);
+        if (!bounds)
+            return null;
+        var nextActiveCell;
+        switch (direction) {
+            case grid_2.Direction.Right: {
+                var columnIndex = (0, grid_2.clampIndex)(Math.min(bounds.endColumnIndex + 1, (_a = getSheetColumnCount === null || getSheetColumnCount === void 0 ? void 0 : getSheetColumnCount(sheetId)) !== null && _a !== void 0 ? _a : selectionRightBound), isHiddenColumn, direction);
+                nextActiveCell = {
+                    rowIndex: bounds.startRowIndex,
+                    columnIndex: columnIndex,
+                };
+                break;
+            }
+            case grid_2.Direction.Up: {
+                var rowIndex = (0, grid_2.clampIndex)(Math.max(bounds.startRowIndex - 1, selectionTopBound), isHiddenRow, direction);
+                nextActiveCell = {
+                    rowIndex: rowIndex,
+                    columnIndex: bounds.startColumnIndex,
+                };
+                break;
+            }
+            case grid_2.Direction.Left: {
+                var columnIndex = (0, grid_2.clampIndex)(Math.max(bounds.startColumnIndex - 1, selectionLeftBound), isHiddenColumn, direction);
+                nextActiveCell = {
+                    rowIndex: bounds.startRowIndex,
+                    columnIndex: columnIndex,
+                };
+                break;
+            }
+            case grid_2.Direction.Down: {
+                // Down
+                var rowIndex = (0, grid_2.clampIndex)(Math.min(((_c = (_b = initialActiveCell.current) === null || _b === void 0 ? void 0 : _b.rowIndex) !== null && _c !== void 0 ? _c : bounds.endRowIndex) + 1, (_d = getSheetRowCount === null || getSheetRowCount === void 0 ? void 0 : getSheetRowCount(sheetId)) !== null && _d !== void 0 ? _d : selectionBottomBound), isHiddenRow, direction);
+                nextActiveCell = {
+                    rowIndex: rowIndex,
+                    columnIndex: (_f = (_e = initialActiveCell.current) === null || _e === void 0 ? void 0 : _e.columnIndex) !== null && _f !== void 0 ? _f : bounds.startColumnIndex,
+                };
+                break;
+            }
+        }
+        if (direction === grid_2.Direction.Right && !initialActiveCell.current) {
+            setInitialActiveCell(currentCell);
+        }
+        if (direction === grid_2.Direction.Down) {
+            /* Move to the next row + cell */
+            setInitialActiveCell(null);
+        }
+        /* If user has selected some cells and active cell is within this selection */
+        if (restrictWithinSelection && selections.length && currentCell) {
+            var range = selections[selections.length - 1].range;
+            var activeCellBounds = getCellBounds(currentCell);
+            var nextCell = (0, grid_2.findNextCellWithinBounds)(activeCellBounds, range, direction);
+            if (nextCell)
+                nextActiveCell = nextCell;
+        }
+        return nextActiveCell;
+    }, [
+        selections,
+        isHiddenRow,
+        isHiddenColumn,
+        selectionBottomBound,
+        selectionTopBound,
+        getCellBounds,
+        selectionLeftBound,
+        selectionRightBound,
+        setInitialActiveCell,
+        getSheetRowCount,
+        getSheetColumnCount,
+    ]));
+    /* Save the value */
+    var handleSubmit = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (newValue, textFormatRuns, sheetId, activeCell, nextActiveCell, shouldFocusGrid, options) {
+        if (shouldFocusGrid === void 0) { shouldFocusGrid = true; }
+        /**
+         * Hide the editor first, so that we can handle onBlur events
+         * 1. Editor hides -> Submit
+         * 2. If user clicks outside the grid, onBlur is called, if there is a activeCell, we do another submit
+         */
+        hideEditor();
+        /* Save the new value */
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(newValue, textFormatRuns, initialValueRef.current, sheetId, activeCell, nextActiveCell, isDirtyRef.current, options);
+        // Clear sttes
+        setValue("");
+        setTextFormatRuns(undefined);
+        setFormulaMode(false);
+        /* Keep the focus */
+        if (shouldFocusGrid)
+            focusGrid();
+    }, [
+        onSubmit,
+        setTextFormatRuns,
+        setValue,
+        hideEditor,
+        focusGrid,
+        setFormulaMode,
+    ]));
+    /* When the input is blurred out */
+    var handleCancel = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (e, shouldFocusGrid) {
+        if (shouldFocusGrid === void 0) { shouldFocusGrid = true; }
+        // Hide active editor
+        hideEditor();
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
+        /* Keep the focus back in the grid */
+        if (shouldFocusGrid)
+            focusGrid();
+    }, [onCancel, hideEditor, focusGrid]));
+    /**
+     * Commit the in-progress edit using the current editor state. Submits if
+     * dirty, cancels if clean, no-ops if nothing is being edited. Designed for
+     * consumer-side blur/outside-click handlers — does not refocus the grid so
+     * focus stays where the user moved it. Returns true if there was an edit
+     * to flush.
+     *
+     * Also used internally when the active sheet changes, with
+     * `preserveActiveSheet` so flushing doesn't drag the user back to the sheet
+     * the edit came from.
+     */
+    var commit = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (options) {
+        var cell = currentActiveCellRef.current;
+        if (!cell || (0, utils_1.isNil)(editingSheetId)) {
+            return false;
+        }
+        if (isDirtyRef.current) {
+            handleSubmit(currentValueRef.current, currentTextFormatRunsRef.current, editingSheetId, cell, undefined, false, options);
+        }
+        else {
+            handleCancel(undefined, false);
+        }
+        return true;
+    }, [editingSheetId, handleSubmit, handleCancel]));
+    var handleMouseDown = (0, react_1.useCallback)(function (e) {
+        /* Persistent input, hides only during Enter key or during submit or cancel calls */
+        if (!hideOnBlur) {
+            return;
+        }
+        /**
+         * Fixes context menu bug
+         * 1. Activate editor
+         * 2. Press right click in a different cell
+         * 3. Context menu does not show up.
+         *
+         * Reason: Because we are focusing the grid
+         */
+        // Put the focus back to grid if user presses primary buttons
+        var shouldFocusGrid = e.button === grid_1.MouseButtonCodes.right || e.ctrlKey ? false : true;
+        if (currentActiveCellRef.current && !(0, utils_1.isNil)(editingSheetId)) {
+            if (isDirtyRef.current) {
+                handleSubmit(currentValueRef.current, currentTextFormatRunsRef.current, editingSheetId, currentActiveCellRef.current, undefined, shouldFocusGrid);
+            }
+            else {
+                handleCancel(undefined, shouldFocusGrid);
+            }
+        }
+        setInitialActiveCell(null);
+    }, [
+        editingSheetId,
+        hideOnBlur,
+        handleSubmit,
+        handleCancel,
+        setInitialActiveCell,
+    ]);
+    var handleChange = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (newValue, textFormatRuns, sheetId, activeCell) {
+        if (!currentActiveCellRef.current) {
+            return;
+        }
+        // Update state
+        setValue(newValue);
+        setTextFormatRuns(textFormatRuns);
+        /**
+         * Make sure we dont call onChange if initialValue is set
+         * This is to accomodate for editor that fire onChange during initialvalue
+         * Eg: Slate  <Editor value='' onChange />
+         *
+         * Either a value or a runs change counts — a Cmd+B / Cmd+I
+         * pure-formatting edit doesn't touch the value string but
+         * still needs to flow through to the host and flip
+         * isDirtyRef so submit-on-blur persists the formatting.
+         */
+        var valueChanged = newValue !== value;
+        var runsChanged = !(0, exports.areTextFormatRunsEqual)(textFormatRuns, currentTextFormatRunsRef.current);
+        if (valueChanged || runsChanged) {
+            /* Check if anything has diverged from the cell's initial
+             * state. Used to conditionally submit if editor is not in
+             * focus. */
+            isDirtyRef.current =
+                newValue !== initialValueRef.current ||
+                    !(0, exports.areTextFormatRunsEqual)(textFormatRuns, initialTextFormatRunsRef.current);
+            // Callback
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue, textFormatRuns, sheetId, activeCell);
+        }
+    }, [value, onChange, setValue, setTextFormatRuns]));
+    var handleBlur = (0, react_1.useCallback)(function (e) {
+        var isEditing = !!currentActiveCellRef.current;
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, isEditing);
+        // Consumer may have submitted/cancelled the editor in onBlur, clearing
+        // currentActiveCellRef. Only refocus if an edit is still pending.
+        if (currentActiveCellRef.current) {
+            /* Keep the focus */
+            focusGrid();
+        }
+    }, [focusGrid, onBlur]);
+    /**
+     * oncopy interceptor
+     */
+    var handleCopy = (0, react_1.useCallback)(function (e) {
+        if (isEditInProgress) {
+            return;
+        }
+        onCopy === null || onCopy === void 0 ? void 0 : onCopy(e);
+    }, [onCopy, isEditInProgress]);
+    /**
+     * onpaste interceptor
+     */
+    var handlePaste = (0, react_1.useCallback)(function (e) {
+        if (isEditInProgress) {
+            return;
+        }
+        e.preventDefault();
+        onPaste === null || onPaste === void 0 ? void 0 : onPaste(e);
+    }, [onPaste, isEditInProgress]);
+    /**
+     * oncut interceptor
+     */
+    var handleCut = (0, react_1.useCallback)(function (e) {
+        if (isEditInProgress) {
+            return;
+        }
+        onCut === null || onCut === void 0 ? void 0 : onCut(e);
+    }, [onCut, isEditInProgress]);
+    var editorComponent = getEditor({
+        sheetId: sheetId,
+        cell: editingCell !== null && editingCell !== void 0 ? editingCell : config_1.DEFAULT_ACTIVE_CELL,
+        editingSheetId: editingSheetId,
+        activeCell: activeCell,
+        autoFocus: autoFocus,
+        value: value,
+        textFormatRuns: textFormatRuns,
+        isNewValue: isEnteringNewValue.current,
+        selections: selections,
+        onChange: handleChange,
+        onSubmit: handleSubmit,
+        onCancel: handleCancel,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        position: isEditInProgress
+            ? cellPosition
+            : tslib_1.__assign(tslib_1.__assign({}, cellPosition), { width: 0, height: 0 }),
+        isScrolling: isScrolling,
+        getNextFocusableCell: getNextFocusableCell,
+        maxWidth: (_b = maxEditorDimensionsRef.current) === null || _b === void 0 ? void 0 : _b.width,
+        maxHeight: (_c = maxEditorDimensionsRef.current) === null || _c === void 0 ? void 0 : _c.height,
+        editorBorderColor: editorBorderColor,
+        editorBorderOutlineColor: editorBorderOutlineColor,
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        isPointerDevice: isPointerDeviceRef.current,
+        navigationMode: !isEditInProgress,
+        onCopy: handleCopy,
+        onPaste: handlePaste,
+        onCut: handleCut,
+    });
+    /**
+     * Imperatively edit a cell, working both ways:
+     *  - if a cell is **already being edited**, the value is inserted into the
+     *    open editor at the cursor (append) — e.g. picking a function while
+     *    mid-formula;
+     *  - otherwise the editor opens on `cell`, optionally pre-filled with
+     *    `initialValue` (e.g. Insert Function inserts `=SUM(`).
+     */
+    var editCell = (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (sheetId, cell, initialValue, options) {
+        if (isEditInProgress && cellEditorInstance && initialValue != null) {
+            // Already editing — insert at the cursor instead of reopening.
+            cellEditorInstance.update(initialValue);
+            cellEditorInstance.focus(true);
+            return;
+        }
+        makeEditable(sheetId, cell, initialValue, options);
+    }, [isEditInProgress, makeEditable, cellEditorInstance]));
+    return {
+        editorComponent: editorComponent,
+        onDoubleClick: handleDoubleClick,
+        getNextFocusableCell: getNextFocusableCell,
+        isEditInProgress: isEditInProgress,
+        editingCell: editingCell,
+        makeEditable: makeEditable,
+        editCell: editCell,
+        setEditorValue: handleChange,
+        hideEditor: hideEditor,
+        showEditor: showEditor,
+        submitEditor: handleSubmit,
+        cancelEditor: handleCancel,
+        commit: commit,
+        onMouseDown: handleMouseDown,
+    };
+};
+exports.useEditable = useEditable;