@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,803 @@
+import { MouseButtonCodes } from "@rowsncolumns/grid";
+import { clampIndex, Direction, findNextCellWithinBounds, isArrowKey, isEqualCells, } from "@rowsncolumns/grid";
+import { isAFormula, isNil } from "@rowsncolumns/utils";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { first } from "rxjs";
+import { useCellEditorInstance, useCellEditorTextFormatRuns, useCellEditorValue, useEditingCellCoordinate, useEditorVisibility, useSetActiveEditor, useSetFormulaMode, } from "../atoms";
+import { DEFAULT_ACTIVE_CELL, DEFAULT_ARRAY } from "../config";
+import { scrollSubscriber } from "../signals/scroll-subscriber";
+import { useCallbackRef } from "./use-callback-ref";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+export const getDefaultEditor = () => null;
+const defaultCanEdit = () => true;
+const defaultIsHidden = () => 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.
+ */
+export const areTextFormatRunsEqual = (a, b) => {
+    const lenA = a?.length ?? 0;
+    const lenB = b?.length ?? 0;
+    if (lenA === 0 && lenB === 0)
+        return true;
+    if (lenA !== lenB)
+        return false;
+    for (let i = 0; i < lenA; i++) {
+        const ra = a[i];
+        const 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 (ra.mention?.value !== rb.mention?.value)
+                return false;
+            if (ra.mention?.label !== rb.mention?.label)
+                return false;
+            continue;
+        }
+        const fa = ra.format ?? {};
+        const fb = rb.format ?? {};
+        const keys = new Set([...Object.keys(fa), ...Object.keys(fb)]);
+        for (const k of keys) {
+            if (fa[k] !== fb[k])
+                return false;
+        }
+    }
+    return true;
+};
+/**
+ * Selection keys that should not trigger cell editing
+ */
+const 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)
+ */
+const 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
+ */
+export const useEditable = ({ getEditor = getDefaultEditor, getValue, getTextFormatRuns, onChange, onSubmit, onCancel, onBlur, onDelete, sheetId, selections = DEFAULT_ARRAY, activeCell, canEdit = defaultCanEdit, frozenRows = 0, frozenColumns = 0, hideOnBlur = true, isHiddenRow = defaultIsHidden, isHiddenColumn = defaultIsHidden, rowCount, columnCount, selectionTopBound = 0, selectionBottomBound = rowCount, selectionLeftBound = 0, selectionRightBound = columnCount, enableEditOnEnterKey = true, sticky, editorBorderColor, editorBorderOutlineColor, onBeforeEdit, onKeyDown, onEditorKeyDown, getCellOffsetFromCoords, getCellCoordsFromOffset, getCellBounds, focus, getActualCellCoords, scrollToCell, onChangeBatch, containerWidth = 0, containerHeight = 0, getScrollPosition, getColumnOffset, getEditorAlignment, getSheetRowCount, getSheetColumnCount, getBooleanValue, getDataValidation, setActiveCell, onCopy, onPaste, onCut, }) => {
+    const editingCellCoordinate = useEditingCellCoordinate();
+    const [isEditorShown, setShowEditor] = useEditorVisibility();
+    const [value, setValue] = useCellEditorValue();
+    const [textFormatRuns, setTextFormatRuns] = useCellEditorTextFormatRuns();
+    const currentActiveCellRef = useRef(null);
+    const initialActiveCell = useRef(undefined);
+    const [autoFocus, setAutoFocus] = useState(true);
+    const [isScrolling, setIsScrolling] = useState(false);
+    const isDirtyRef = useRef(false);
+    const isEnteringNewValue = useRef(false);
+    const currentValueRef = useRef(value);
+    const currentTextFormatRunsRef = useRef(textFormatRuns);
+    const initialValueRef = 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.
+    const initialTextFormatRunsRef = useRef(undefined);
+    const isPointerDeviceRef = useRef(false);
+    const maxEditorDimensionsRef = useRef(undefined);
+    const isMounted = useRef(false);
+    const showEditor = useCallback(() => setShowEditor(true), [setShowEditor]);
+    const setActiveEditor = useSetActiveEditor();
+    const cellEditorInstance = useCellEditorInstance();
+    const setFormulaMode = useSetFormulaMode();
+    const hideEditor = useCallback(() => {
+        setShowEditor(false);
+        currentActiveCellRef.current = null;
+        // Clear value
+        setValue("");
+        setFormulaMode(false);
+    }, [setShowEditor, setValue, setFormulaMode]);
+    // Focus on the input
+    const focusGrid = useCallback(() => {
+        focus();
+    }, [focus]);
+    // When user scrolls, we have to show cell address
+    useIsomorphicLayoutEffect(() => {
+        const scrollSubscription = scrollSubscriber.pipe(first()).subscribe(() => {
+            setIsScrolling(true);
+        });
+        return () => {
+            scrollSubscription.unsubscribe();
+        };
+    }, [isScrolling]);
+    // Mounted ref
+    useIsomorphicLayoutEffect(() => {
+        isMounted.current = true;
+    }, []);
+    /* Keep ref in sync */
+    useIsomorphicLayoutEffect(() => {
+        currentValueRef.current = value;
+    }, [value]);
+    useIsomorphicLayoutEffect(() => {
+        currentTextFormatRunsRef.current = textFormatRuns;
+    }, [textFormatRuns]);
+    // Edits
+    const editingCell = currentActiveCellRef.current;
+    const editingSheetId = editingCellCoordinate?.sheetId;
+    // Edit in progress
+    const isEditInProgress = isEditorShown && !!editingCell;
+    /**
+     * Get current cell position based on scroll position
+     * @param position
+     * @param scrollPosition
+     */
+    const getCellPosition = useCallback((cell, scrollPosition) => {
+        const { x = 0, y = 0, width = 0, height = 0, } = getCellOffsetFromCoords(cell) ?? {};
+        const isFrozenRow = cell.rowIndex < frozenRows;
+        const isFrozenColumn = cell.columnIndex < frozenColumns;
+        const scrollLeft = scrollPosition?.scrollLeft ?? 0;
+        const scrollTop = scrollPosition?.scrollTop ?? 0;
+        const isRightAlign = getEditorAlignment(sheetId, cell.rowIndex, cell.columnIndex) ===
+            "right";
+        const finalX = sticky
+            ? x - (isFrozenColumn ? 0 : scrollLeft)
+            : x +
+                (isRightAlign && !isFrozenColumn
+                    ? getColumnOffset(frozenColumns)
+                    : 0);
+        const finalY = y - (isFrozenRow || !sticky ? 0 : scrollTop);
+        return {
+            width,
+            height,
+            x: finalX,
+            y: finalY,
+        };
+    }, [
+        sheetId,
+        sticky,
+        frozenRows,
+        frozenColumns,
+        getCellOffsetFromCoords,
+        getEditorAlignment,
+        getColumnOffset,
+    ]);
+    const cellPosition = useMemo(() => {
+        // Add cell
+        const scrollPosition = getScrollPosition();
+        const 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
+     */
+    const makeEditable = useCallbackRef(useCallback(async (sheetId, cell, initialValue, options) => {
+        const { autoFocus = true, isPointerDevice = false, fromKeystroke = false, } = options ?? {};
+        /* Get actual coords for merged cells */
+        const coords = getActualCellCoords(cell);
+        /* Check if its the same cell */
+        if (!coords || isEqualCells(coords, currentActiveCellRef.current)) {
+            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?.(sheetId, coords);
+            /*  Focus */
+            scrollToCell(coords);
+            // Set active cell ref
+            currentActiveCellRef.current = coords;
+            /* Get offsets */
+            const cellValue = getValue?.(sheetId, coords.rowIndex, coords.columnIndex);
+            const textFormatRuns = getTextFormatRuns?.(sheetId, coords.rowIndex, coords.columnIndex);
+            const value = initialValue ?? cellValue ?? "";
+            const scrollPosition = getScrollPosition();
+            const cellPosition = getCellPosition(coords, scrollPosition);
+            const { x = 0, y = 0, width = 0 } = cellPosition;
+            /**
+             * Set max editor ref based on grid container
+             */
+            const cellEditorBuffer = 3;
+            const isRightAligned = getEditorAlignment(sheetId, coords.rowIndex, coords.columnIndex) ===
+                "right";
+            const frozenColumnOffset = coords.columnIndex < frozenColumns
+                ? 0
+                : getColumnOffset(frozenColumns);
+            const maxWidth = isRightAligned
+                ? sticky
+                    ? x + width
+                    : x - 2 * frozenColumnOffset + width
+                : containerWidth -
+                    x +
+                    (sticky ? 0 : scrollPosition?.scrollLeft ?? 0) -
+                    cellEditorBuffer;
+            maxEditorDimensionsRef.current = {
+                height: containerHeight -
+                    y +
+                    (sticky ? 0 : scrollPosition?.scrollTop ?? 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;
+            // Set input source
+            isPointerDeviceRef.current = isPointerDevice;
+            /* Show editor */
+            showEditor();
+            setAutoFocus(autoFocus);
+            // Apply the value to the editor when editing existing content
+            // (F2 / double-click), OR when a value was supplied
+            // programmatically (e.g. Insert Function inserts `=SUM(`). A
+            // keystroke entry is skipped — the focused contenteditable receives
+            // the typed character natively, so setting it here would double it.
+            const isProgrammaticValue = initialValue !== void 0 && !fromKeystroke;
+            if (!isEnteringNewValue.current || isProgrammaticValue) {
+                /**
+                 * Setting value will trigger prosemirror
+                 * to update value
+                 */
+                setValue(value);
+                setTextFormatRuns(textFormatRuns);
+                setFormulaMode(isAFormula(value));
+            }
+        }
+    }, [
+        onBeforeEdit,
+        canEdit,
+        getValue,
+        getTextFormatRuns,
+        getCellPosition,
+        getScrollPosition,
+        getActualCellCoords,
+        getEditorAlignment,
+        containerWidth,
+        containerHeight,
+        scrollToCell,
+        setValue,
+        setTextFormatRuns,
+        showEditor,
+        frozenColumns,
+        getColumnOffset,
+        sticky,
+        cellEditorInstance,
+        setActiveEditor,
+        setFormulaMode,
+    ]));
+    /* Activate edit mode */
+    const handleDoubleClick = useCallback((e) => {
+        if (isEditInProgress) {
+            return;
+        }
+        const coords = getCellCoordsFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY);
+        if (!coords)
+            return;
+        const { rowIndex, columnIndex } = coords;
+        makeEditable(sheetId, { rowIndex, columnIndex }, undefined, {
+            isPointerDevice: true,
+        });
+    }, [sheetId, makeEditable, getCellCoordsFromOffset, isEditInProgress]);
+    const isSelectionKey = useCallback((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
+     */
+    const setInitialActiveCell = useCallback((cell) => {
+        initialActiveCell.current = cell;
+    }, []);
+    const handleKeyDown = useCallback((e) => {
+        const nativeEvent = e.nativeEvent;
+        const key = nativeEvent.key;
+        const isF2 = key === "F2";
+        const 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?.(e);
+        }
+        else {
+            // Pass it on
+            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 (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;
+            }
+            const { rowIndex, columnIndex } = activeCell;
+            // For checkbox cells
+            const isCheckbox = getDataValidation(sheetId, rowIndex, columnIndex)?.condition?.type ===
+                "BOOLEAN";
+            if (key === " " && isCheckbox) {
+                // This is a checkbox and user is toggling it
+                const boolValue = getBooleanValue(sheetId, rowIndex, columnIndex);
+                // Batch update cells
+                if (selections.length) {
+                    onChangeBatch?.(sheetId, selections.map((sel) => sel.range), !boolValue);
+                    // Trigger change of cell
+                    // So formula bar input triggers
+                    // a re-render
+                    setActiveCell?.(sheetId, { ...activeCell });
+                }
+                else {
+                    onSubmit?.(!boolValue, undefined, boolValue, sheetId, activeCell, {
+                        ...activeCell,
+                    });
+                }
+                e.preventDefault();
+            }
+            else if (key === "Delete" || key === "Backspace") {
+                // TODO: onbefore  delete
+                onDelete?.(sheetId, activeCell, selections);
+                // Delete value
+                setValue("");
+                setFormulaMode(false);
+            }
+            else {
+                const 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, 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
+     */
+    const getNextFocusableCell = useCallbackRef(useCallback((sheetId, currentCell, direction = Direction.Right, restrictWithinSelection = true) => {
+        /* Next immediate cell */
+        const bounds = getCellBounds(currentCell);
+        if (!bounds)
+            return null;
+        let nextActiveCell;
+        switch (direction) {
+            case Direction.Right: {
+                const columnIndex = clampIndex(Math.min(bounds.endColumnIndex + 1, getSheetColumnCount?.(sheetId) ?? selectionRightBound), isHiddenColumn, direction);
+                nextActiveCell = {
+                    rowIndex: bounds.startRowIndex,
+                    columnIndex,
+                };
+                break;
+            }
+            case Direction.Up: {
+                const rowIndex = clampIndex(Math.max(bounds.startRowIndex - 1, selectionTopBound), isHiddenRow, direction);
+                nextActiveCell = {
+                    rowIndex,
+                    columnIndex: bounds.startColumnIndex,
+                };
+                break;
+            }
+            case Direction.Left: {
+                const columnIndex = clampIndex(Math.max(bounds.startColumnIndex - 1, selectionLeftBound), isHiddenColumn, direction);
+                nextActiveCell = {
+                    rowIndex: bounds.startRowIndex,
+                    columnIndex,
+                };
+                break;
+            }
+            case Direction.Down: {
+                // Down
+                const rowIndex = clampIndex(Math.min((initialActiveCell.current?.rowIndex ?? bounds.endRowIndex) + 1, getSheetRowCount?.(sheetId) ?? selectionBottomBound), isHiddenRow, direction);
+                nextActiveCell = {
+                    rowIndex,
+                    columnIndex: initialActiveCell.current?.columnIndex ??
+                        bounds.startColumnIndex,
+                };
+                break;
+            }
+        }
+        if (direction === Direction.Right && !initialActiveCell.current) {
+            setInitialActiveCell(currentCell);
+        }
+        if (direction === 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) {
+            const { range } = selections[selections.length - 1];
+            const activeCellBounds = getCellBounds(currentCell);
+            const nextCell = findNextCellWithinBounds(activeCellBounds, range, direction);
+            if (nextCell)
+                nextActiveCell = nextCell;
+        }
+        return nextActiveCell;
+    }, [
+        selections,
+        isHiddenRow,
+        isHiddenColumn,
+        selectionBottomBound,
+        selectionTopBound,
+        getCellBounds,
+        selectionLeftBound,
+        selectionRightBound,
+        setInitialActiveCell,
+        getSheetRowCount,
+        getSheetColumnCount,
+    ]));
+    /* Save the value */
+    const handleSubmit = useCallbackRef(useCallback((newValue, textFormatRuns, sheetId, activeCell, nextActiveCell, shouldFocusGrid = true, options) => {
+        /**
+         * 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?.(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 */
+    const handleCancel = useCallbackRef(useCallback((e, shouldFocusGrid = true) => {
+        // Hide active editor
+        hideEditor();
+        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.
+     */
+    const commit = useCallbackRef(useCallback((options) => {
+        const cell = currentActiveCellRef.current;
+        if (!cell || 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]));
+    const handleMouseDown = useCallback((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
+        const shouldFocusGrid = e.button === MouseButtonCodes.right || e.ctrlKey ? false : true;
+        if (currentActiveCellRef.current && !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,
+    ]);
+    const handleChange = useCallbackRef(useCallback((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.
+         */
+        const valueChanged = newValue !== value;
+        const runsChanged = !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 ||
+                    !areTextFormatRunsEqual(textFormatRuns, initialTextFormatRunsRef.current);
+            // Callback
+            onChange?.(newValue, textFormatRuns, sheetId, activeCell);
+        }
+    }, [value, onChange, setValue, setTextFormatRuns]));
+    const handleBlur = useCallback((e) => {
+        const isEditing = !!currentActiveCellRef.current;
+        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
+     */
+    const handleCopy = useCallback((e) => {
+        if (isEditInProgress) {
+            return;
+        }
+        onCopy?.(e);
+    }, [onCopy, isEditInProgress]);
+    /**
+     * onpaste interceptor
+     */
+    const handlePaste = useCallback((e) => {
+        if (isEditInProgress) {
+            return;
+        }
+        e.preventDefault();
+        onPaste?.(e);
+    }, [onPaste, isEditInProgress]);
+    /**
+     * oncut interceptor
+     */
+    const handleCut = useCallback((e) => {
+        if (isEditInProgress) {
+            return;
+        }
+        onCut?.(e);
+    }, [onCut, isEditInProgress]);
+    const editorComponent = getEditor({
+        sheetId,
+        cell: editingCell ?? DEFAULT_ACTIVE_CELL,
+        editingSheetId,
+        activeCell,
+        autoFocus,
+        value,
+        textFormatRuns,
+        isNewValue: isEnteringNewValue.current,
+        selections,
+        onChange: handleChange,
+        onSubmit: handleSubmit,
+        onCancel: handleCancel,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        position: isEditInProgress
+            ? cellPosition
+            : { ...cellPosition, width: 0, height: 0 },
+        isScrolling,
+        getNextFocusableCell,
+        maxWidth: maxEditorDimensionsRef.current?.width,
+        maxHeight: maxEditorDimensionsRef.current?.height,
+        editorBorderColor,
+        editorBorderOutlineColor,
+        containerWidth,
+        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(`).
+     */
+    const editCell = useCallbackRef(useCallback((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,
+        onDoubleClick: handleDoubleClick,
+        getNextFocusableCell,
+        isEditInProgress,
+        editingCell,
+        makeEditable,
+        editCell,
+        setEditorValue: handleChange,
+        hideEditor,
+        showEditor,
+        submitEditor: handleSubmit,
+        cancelEditor: handleCancel,
+        commit,
+        onMouseDown: handleMouseDown,
+    };
+};