@rowsncolumns/ui 15.0.38

package/dist/esm/editor-pm/prosemirror-editor.js

@@ -0,0 +1,1135 @@
+import { LoadingIcon, QuestionMarkIcon } from "@rowsncolumns/icons";
+import { addressToCell, isAFormula, isNil, log } from "@rowsncolumns/utils";
+import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { history, undo, redo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+import { baseKeymap, joinBackward, toggleMark } from "prosemirror-commands";
+import { AllSelection, EditorState } from "prosemirror-state";
+import { EditorView, DecorationSet } from "prosemirror-view";
+import { TextSelection } from "prosemirror-state";
+import { DOMSerializer } from "prosemirror-model";
+import { useCycleFormulaReference } from "../hooks/use-cycle-reference";
+import { useDropdown } from "../hooks/use-dropdown";
+import { useDropdownChangePM } from "./use-dropdown-change-pm";
+import { useEditorKeyDownPM } from "./use-editor-keydown-pm";
+import { useEditorDecoratorPM } from "./use-editor-decorator-pm";
+import { useEditorOnChangePM } from "./use-editor-change-pm";
+import { createDecorationPlugin } from "./decoration-plugin";
+import { createUnfocusedSelectionPlugin } from "./unfocused-selection-plugin";
+import { createPlaceholderPlugin } from "./placeholder-plugin";
+import { useIsomorphicLayoutEffect } from "../hooks/use-isomorphic-layout-effect.ts";
+import { cn } from "../utils";
+import { SPECIAL_ITEMS, THIS_ROW_ITEM } from "../editor/constants";
+import { applyTextFormatRuns, applyTextFormatToSelection, getSelectionFontSize, deserializeString, getPropertyStartIndex, isCellToken, serializeEditorValue, } from "./helpers";
+import { SuggestionsDropdown as DefaultSuggestionsDropdown, } from "../editor/suggestions-dropdown";
+import { ErrorFallback } from "../editor/editor-error-boundary";
+import { withErrorBoundary } from "react-error-boundary";
+import * as Popper from "@radix-ui/react-popper";
+import { Portal } from "@radix-ui/react-portal";
+import { ConditionalWrapper } from "../conditional-wrapper";
+import { schema } from "./schema";
+import { StyledFormulaHelp } from "../editor/style";
+import { tokenVocabulary } from "@rowsncolumns/fast-formula-parser";
+import { createMentionsPlugin } from "./mentions-plugin";
+import { MentionsDropdown } from "./mentions-dropdown";
+import { useMentionKeyDown } from "./use-mention-keydown";
+import { MentionNodeView } from "./mention-nodeview";
+import { useCallbackRef } from "@rowsncolumns/grid";
+import { useParameterSuggestions } from "./use-parameter-suggestions";
+import { DEFAULT_ARRAY } from "@rowsncolumns/spreadsheet";
+/**
+ * This fixes a IME bug in prosemirror
+ * Cmd+a and delete and then entering a character
+ * selects the entire character
+ * @param state
+ * @param dispatch
+ * @returns
+ */
+export const deleteAll = (state, dispatch) => {
+    if (dispatch) {
+        const emptyDoc = schema.node("doc", null, [schema.node("line", null, [])]);
+        const tr = state.tr.replaceWith(0, state.doc.content.size, emptyDoc.content);
+        tr.setSelection(TextSelection.create(tr.doc, 1));
+        dispatch(tr);
+    }
+    return true;
+};
+/**
+ * ProseMirror editor component for rich text and formula editing.
+ * Supports syntax highlighting, autocomplete, and keyboard shortcuts.
+ */
+export const ProseMirrorEditorThatMayError = memo(forwardRef(({ value = "", isNewValue, formulaMode, onChange, autoFocus, className, onKeyDown, disabled, showDropdown = true, persistFocus = true, editorZeroOutline, showFormulaHelp, onHideFormulaHelp, onShowFormulaHelp, tokenizer, onCancel, onSubmit, onFormulaStateChange, dropdownStyles, options, isOptionSelected, functionDescriptions, shouldFetchFunctionParameters, getFunctionParameterSuggestions, getMentions, getNamedRanges, getTableNames, getTableColumnNames, getStructuredProperties, onTeardown, SuggestionsDropdown = DefaultSuggestionsDropdown, MentionTagComponent, MentionDropdownItemComponent, isActive, stickyEditor = true, onFocus, onBlur, onCopy, onCut, onPaste, placeholder, textFormatRuns, resolveRunColor, navigationMode, enableContinuousSelection, cellFontFamily, ...props }, forwardedRef) => {
+    const editorRef = useRef(null);
+    const viewRef = useRef(null);
+    const cellFontFamilyRef = useRef(cellFontFamily);
+    const [cursorPosition, setCursorPosition] = useState();
+    const [tableToken, setTableToken] = useState();
+    const [functionToken, setFunctionToken] = useState();
+    const [parameterIndex, setParameterIndex] = useState(0);
+    const [isEdgeofCell, setIsEdgeOfCell] = useState(false);
+    const [parameterArguments, setParameterArguments] = useState(DEFAULT_ARRAY);
+    const [parameterRanges, setParameterRanges] = useState(DEFAULT_ARRAY);
+    const [cellPropertyToken, setCellPropertyToken] = useState();
+    const activeTokenRef = useRef(undefined);
+    const suggestionTokenRef = useRef(undefined);
+    const previousTokenRef = useRef(undefined);
+    const currentValueRef = useRef(undefined);
+    const onFocusRef = useRef(onFocus);
+    const onBlurRef = useRef(onBlur);
+    const onCopyRef = useRef(onCopy);
+    const onPasteRef = useRef(onPaste);
+    const onCutRef = useRef(onCut);
+    const navigationModeRef = useRef(navigationMode);
+    // Mentions
+    const [mentionState, onChangeMentionState] = useState({
+        active: false,
+        query: "",
+        range: null,
+        selectedIndex: 0,
+    });
+    const [mentions, setMentions] = useState([]);
+    const [isFetchingMentions, setIsFetchingMentions] = useState(false);
+    const mentionPositionLeft = useMemo(() => {
+        if (mentionState.range) {
+            const editorPositon = editorRef.current?.getBoundingClientRect();
+            return ((viewRef.current?.coordsAtPos(mentionState.range.from).left ?? 0) -
+                (editorPositon?.left ?? 0));
+        }
+        return 0;
+    }, [mentionState.range?.from]);
+    // Show mention dropdown
+    const showMentionDropdown = (mentionState.active && mentions.length > 1) || isFetchingMentions;
+    const showMentionDropdownEffective = showMentionDropdown && !navigationMode;
+    const { parameterSuggestions, isFetchingParameters } = useParameterSuggestions({
+        functionToken: !formulaMode || navigationMode || isEdgeofCell
+            ? undefined
+            : functionToken,
+        parameterIndex,
+        parameterArguments,
+        getFunctionParameterSuggestions: !navigationMode
+            ? getFunctionParameterSuggestions
+            : undefined,
+        shouldFetchFunctionParameters: !navigationMode
+            ? shouldFetchFunctionParameters
+            : undefined,
+    });
+    useIsomorphicLayoutEffect(() => {
+        currentValueRef.current = value;
+    }, [value]);
+    useIsomorphicLayoutEffect(() => {
+        onFocusRef.current = onFocus;
+    }, [onFocus]);
+    useIsomorphicLayoutEffect(() => {
+        onBlurRef.current = onBlur;
+    }, [onBlur]);
+    useIsomorphicLayoutEffect(() => {
+        onCopyRef.current = onCopy;
+    }, [onCopy]);
+    useIsomorphicLayoutEffect(() => {
+        onPasteRef.current = onPaste;
+    }, [onPaste]);
+    useIsomorphicLayoutEffect(() => {
+        onCutRef.current = onCut;
+    }, [onCut]);
+    useIsomorphicLayoutEffect(() => {
+        cellFontFamilyRef.current = cellFontFamily;
+    }, [cellFontFamily]);
+    useIsomorphicLayoutEffect(() => {
+        const previousMode = navigationModeRef.current;
+        navigationModeRef.current = navigationMode;
+        // Reset formula-related states when entering navigation mode (and mode has changed)
+        if (navigationMode && previousMode !== navigationMode) {
+            setCursorPosition(undefined);
+            setTableToken(undefined);
+            setFunctionToken(undefined);
+            setParameterIndex(0);
+            setIsEdgeOfCell(false);
+            setParameterArguments(DEFAULT_ARRAY);
+            setParameterRanges(DEFAULT_ARRAY);
+            setCellPropertyToken(undefined);
+        }
+        if (viewRef.current?.dom) {
+            viewRef.current.dom.setAttribute("inputmode", navigationMode ? "none" : "text");
+        }
+    }, [navigationMode]);
+    // Store latest values in refs for the decorator plugin
+    const formulaModeRef = useRef(formulaMode);
+    // Update refs when values change
+    formulaModeRef.current = formulaMode;
+    // Helper function to create initial document
+    const createInitialDocument = useCallbackRef(useCallback(() => {
+        if (!isAFormula(value) && textFormatRuns?.length) {
+            // Use applyTextFormatRuns if format runs are provided
+            return applyTextFormatRuns(value, textFormatRuns, schema, resolveRunColor);
+        }
+        else {
+            // Use default deserialization
+            return deserializeString(value, schema);
+        }
+    }, [value, textFormatRuns]));
+    // Decorator for syntax highlighting - use ref to ensure latest values
+    const decoratorRef = useRef(undefined);
+    const getFormulaDecorations = useEditorDecoratorPM({
+        cursorPosition,
+        formulaMode,
+        tokenizer,
+        isActive,
+    });
+    // Combined decorator that includes formula highlighting
+    const getCombinedDecorations = useCallback((state) => {
+        if (navigationModeRef.current) {
+            return DecorationSet.create(state.doc, []);
+        }
+        const decorations = [];
+        // Add formula decorations
+        if (formulaMode) {
+            const formulaDecorations = getFormulaDecorations(state);
+            if (formulaDecorations && formulaDecorations.find) {
+                formulaDecorations
+                    .find()
+                    .forEach((deco) => decorations.push(deco));
+            }
+        }
+        return DecorationSet.create(state.doc, decorations);
+    }, [getFormulaDecorations, formulaMode]);
+    // React to mentions
+    useIsomorphicLayoutEffect(() => {
+        if (navigationModeRef.current) {
+            if (mentions.length) {
+                setMentions([]);
+            }
+            setIsFetchingMentions(false);
+            return;
+        }
+        const fetchMentions = async (query) => {
+            setIsFetchingMentions(true);
+            const mentions = (await getMentions?.(query)) ?? [];
+            setMentions(mentions);
+            setIsFetchingMentions(false);
+        };
+        try {
+            if (mentionState.active) {
+                fetchMentions(mentionState.query ?? "");
+            }
+            else {
+                setMentions([]);
+                setIsFetchingMentions(false);
+            }
+        }
+        catch (err) {
+            console.log("Error fetching mentions", err);
+        }
+    }, [mentionState.active, mentionState.query]);
+    // Update ref with latest decorator
+    useIsomorphicLayoutEffect(() => {
+        decoratorRef.current = getCombinedDecorations;
+    }, [getCombinedDecorations]);
+    // Set active token ref
+    const setActiveToken = useCallback((token) => {
+        activeTokenRef.current = token;
+    }, []);
+    const setPreviousToken = useCallback((token) => {
+        previousTokenRef.current = token;
+    }, []);
+    // Callback when suggestion token changes
+    const handleSuggestionTokenChange = useCallback((token) => {
+        suggestionTokenRef.current = token;
+        const newQuery = token?.property ?? token?.image ?? "";
+        setQuery(newQuery);
+    }, []);
+    // Get editor view
+    const getView = useCallback(() => {
+        return viewRef.current;
+    }, []);
+    // Handle change hook
+    const onEditorChange = useEditorOnChangePM({
+        onChange: !navigationMode ? onChange : () => undefined,
+        getView,
+        isActive,
+        onChangeCursor: setCursorPosition,
+        onChangeActiveToken: setActiveToken,
+        tokenizer: !navigationMode ? tokenizer : () => [],
+        onFormulaStateChange: !navigationMode
+            ? onFormulaStateChange
+            : undefined,
+        onSuggestionTokenChange: handleSuggestionTokenChange,
+        onTableTokenChange: setTableToken,
+        onChangeFunctionToken: setFunctionToken,
+        onChangeIsEdgeOfCell: setIsEdgeOfCell,
+        onChangeParameterIndex: setParameterIndex,
+        onCellPropertyTokenChange: setCellPropertyToken,
+        onChangeFunctionParameters: (params, ranges) => {
+            setParameterArguments(params);
+            setParameterRanges(ranges);
+        },
+        onChangePreviousToken: setPreviousToken,
+        enableContinuousSelection: enableContinuousSelection ?? isNil(navigationMode),
+    });
+    // Initialize editor
+    useIsomorphicLayoutEffect(() => {
+        if (!editorRef.current)
+            return;
+        try {
+            const state = EditorState.create({
+                doc: createInitialDocument(),
+                plugins: [
+                    history(),
+                    createUnfocusedSelectionPlugin(),
+                    ...(placeholder ? [createPlaceholderPlugin(placeholder)] : []),
+                    createMentionsPlugin({
+                        onChangeState: (nextState) => {
+                            if (navigationModeRef.current)
+                                return;
+                            onChangeMentionState(nextState);
+                        },
+                        getFormulaMode: () => formulaModeRef.current ?? false,
+                    }),
+                    createDecorationPlugin({
+                        formulaMode,
+                        isActive,
+                        tokenizer,
+                        getDecorations: (state) => {
+                            try {
+                                if (navigationModeRef.current) {
+                                    return DecorationSet.create(state.doc, []);
+                                }
+                                // Use current ref values to get latest decorator
+                                if (decoratorRef.current) {
+                                    return decoratorRef.current(state);
+                                }
+                                return DecorationSet.create(state.doc, []);
+                            }
+                            catch (decorationError) {
+                                console.warn("Error creating decorations:", decorationError);
+                                return DecorationSet.create(state.doc, []);
+                            }
+                        },
+                    }),
+                    keymap({
+                        ...baseKeymap,
+                        Backspace: (state, dispatch, view) => {
+                            if (view?.composing) {
+                                return false;
+                            }
+                            // Check if all content is selected
+                            const { from, to } = state.selection;
+                            const allSelected = state.selection instanceof AllSelection ||
+                                (from === 0 && to === state.doc.content.size);
+                            if (allSelected) {
+                                return deleteAll(state, dispatch);
+                            }
+                            // Handle backspace at the beginning of a line - merge with previous line
+                            if (from === to && from > 0) {
+                                const $pos = state.doc.resolve(from);
+                                // Check if we're at the beginning of a line (parentOffset === 0 means start of line content)
+                                if ($pos.parent.type.name === "line" &&
+                                    $pos.parentOffset === 0) {
+                                    // Use joinBackward to properly merge the lines
+                                    return joinBackward(state, dispatch);
+                                }
+                            }
+                            // Fall through to default backspace behavior
+                            return false;
+                        },
+                        Delete: (state, dispatch, view) => {
+                            if (view?.composing) {
+                                return false;
+                            }
+                            const { from, to } = state.selection;
+                            const allSelected = state.selection instanceof AllSelection ||
+                                (from === 0 && to === state.doc.content.size);
+                            if (allSelected) {
+                                return deleteAll(state, dispatch);
+                            }
+                            return false;
+                        },
+                        "Mod-z": undo,
+                        "Shift-Mod-z": redo,
+                        "Mod-y": redo,
+                        // Rich-text marks: only toggle when not in formula mode —
+                        // we don't want Cmd+B to corrupt a formula. The Mod-key
+                        // chord also reaches the canvas-grid keyboard handler so
+                        // cell-level bold still works there for non-edit mode.
+                        "Mod-b": (state, dispatch) => {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.bold)(state, dispatch);
+                        },
+                        "Mod-i": (state, dispatch) => {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.italic)(state, dispatch);
+                        },
+                        "Mod-u": (state, dispatch) => {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.underline)(state, dispatch);
+                        },
+                        "Shift-Mod-x": (state, dispatch) => {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.strikethrough)(state, dispatch);
+                        },
+                        // Google Sheets/Docs chords. The schema marks
+                        // mutually exclude each other, so toggling one on
+                        // clears the other.
+                        "Mod-.": (state, dispatch) => {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.superscript)(state, dispatch);
+                        },
+                        "Mod-,": (state, dispatch) => {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.subscript)(state, dispatch);
+                        },
+                        Enter: () => {
+                            // Let React handle Enter through onKeyDownEditor
+                            return false; // Don't consume the event, let it bubble up
+                        },
+                        ArrowUp: () => {
+                            return false;
+                        },
+                        ArrowDown: () => {
+                            return false;
+                        },
+                        Escape: () => {
+                            // Handle escape key
+                            return true;
+                        },
+                        F4: () => {
+                            // Handle F4 for cycling references
+                            if (activeTokenRef.current) {
+                                onCycleReference(activeTokenRef.current);
+                            }
+                            return true;
+                        },
+                    }),
+                ],
+            });
+            // Stamp the cell's font onto each line in clipboard HTML so a
+            // paste lands with the source font. Skips when no font is set —
+            // the destination cell then keeps its own.
+            const clipboardSerializer = new DOMSerializer({
+                ...DOMSerializer.nodesFromSchema(schema),
+                line: () => {
+                    const font = cellFontFamilyRef.current;
+                    return font
+                        ? ["div", { style: `font-family: ${font}` }, 0]
+                        : ["div", 0];
+                },
+            }, DOMSerializer.marksFromSchema(schema));
+            const view = new EditorView(editorRef.current, {
+                state,
+                clipboardSerializer,
+                nodeViews: {
+                    mention: (node, view, getPos) => new MentionNodeView(node, view, getPos, MentionTagComponent),
+                },
+                dispatchTransaction: (transaction) => {
+                    try {
+                        const newState = view.state.apply(transaction);
+                        view.updateState(newState);
+                        // Call the onChange handler which will handle all token analysis and state updates
+                        if (!navigationModeRef.current) {
+                            onEditorChange(newState);
+                        }
+                    }
+                    catch (error) {
+                        log("Error dispatching transaction:", error);
+                        // Try to recover by reverting to current state
+                        try {
+                            if (!navigationModeRef.current) {
+                                onEditorChange(view.state);
+                            }
+                        }
+                        catch (recoveryError) {
+                            log("Error during transaction recovery:", recoveryError);
+                        }
+                    }
+                },
+                attributes: {
+                    class: cn("h-full overflow-auto [&_div]:outline-none"),
+                    spellcheck: formulaMode !== true ? "true" : "false",
+                    contenteditable: !disabled ? "true" : "false",
+                    inputmode: navigationModeRef.current ? "none" : "text",
+                    tabindex: "0",
+                },
+                editable: () => !disabled,
+                handleDOMEvents: {
+                    focus: (_, event) => {
+                        onFocusRef.current?.(event);
+                        return false; // Let ProseMirror handle the focus as well
+                    },
+                    blur: (_, event) => {
+                        onBlurRef.current?.(event);
+                        return false; // Let ProseMirror handle the blur as well
+                    },
+                    copy(_, event) {
+                        onCopyRef.current?.(event);
+                        return false;
+                    },
+                    paste(_, event) {
+                        onPasteRef.current?.(event);
+                        return false;
+                    },
+                    cut(_, event) {
+                        onCutRef.current?.(event);
+                        return false;
+                    },
+                },
+            });
+            viewRef.current = view;
+            return () => {
+                try {
+                    view.destroy();
+                }
+                catch (error) {
+                    log("Error destroying editor view:", error);
+                }
+                viewRef.current = null;
+            };
+        }
+        catch (error) {
+            log("Error initializing ProseMirror editor:", error);
+            // Try to create a minimal fallback editor
+            try {
+                const fallbackState = EditorState.create({
+                    doc: schema.node("doc", null, [schema.node("line", null, [])]),
+                    plugins: [history()],
+                });
+                const fallbackView = new EditorView(editorRef.current, {
+                    state: fallbackState,
+                });
+                viewRef.current = fallbackView;
+            }
+            catch (fallbackError) {
+                log("Error creating fallback editor:", fallbackError);
+            }
+        }
+    }, [createInitialDocument]); // Re-initialize if document creation logic changes
+    // Update editor content when value changes
+    useIsomorphicLayoutEffect(() => {
+        if (viewRef.current) {
+            try {
+                const currentContent = serializeEditorValue(viewRef.current.state.doc);
+                if (currentContent !== value) {
+                    const newDoc = createInitialDocument();
+                    const tr = viewRef.current.state.tr.replaceWith(0, viewRef.current.state.doc.content.size, newDoc.content);
+                    viewRef.current.dispatch(tr);
+                }
+            }
+            catch (error) {
+                log("Error updating editor content:", error);
+            }
+        }
+    }, [value, createInitialDocument]);
+    // Update decorations when formula mode or active state changes
+    useIsomorphicLayoutEffect(() => {
+        if (navigationModeRef.current)
+            return;
+        if (viewRef.current) {
+            try {
+                // Force a decoration update by dispatching a metadata transaction
+                const tr = viewRef.current.state.tr.setMeta("updateDecorations", {
+                    formulaMode,
+                    isActive,
+                    cursorPosition,
+                });
+                viewRef.current.dispatch(tr);
+            }
+            catch (error) {
+                log("Error updating decorations:", error);
+            }
+        }
+    }, [formulaMode, isActive, cursorPosition]);
+    // Update editor disabled state when disabled prop changes
+    useIsomorphicLayoutEffect(() => {
+        if (viewRef.current) {
+            try {
+                // Update contenteditable attribute
+                const editorDom = viewRef.current.dom;
+                if (editorDom) {
+                    editorDom.setAttribute("contenteditable", disabled ? "false" : "true");
+                }
+                // Update editable state in ProseMirror
+                // This forces ProseMirror to re-evaluate its editable state
+                viewRef.current.setProps({
+                    ...viewRef.current.props,
+                    editable: () => !disabled,
+                });
+            }
+            catch (error) {
+                log("Error updating disabled state:", error);
+            }
+        }
+    }, [disabled]);
+    // Focus editor
+    const focusEditor = useCallback(() => {
+        if (viewRef.current &&
+            viewRef.current.dom &&
+            !viewRef.current.hasFocus()) {
+            try {
+                viewRef.current.focus();
+                // Ensure the DOM element also gets focus
+                if (document.activeElement !== viewRef.current.dom) {
+                    viewRef.current.dom.focus();
+                }
+            }
+            catch (error) {
+                console.warn("Failed to focus editor:", error);
+            }
+        }
+    }, []);
+    /**
+     * Teardown current editor
+     */
+    const handleTeardown = useCallback(() => {
+        if (viewRef.current) {
+            viewRef.current.destroy();
+            viewRef.current = null;
+        }
+        onTeardown?.();
+    }, [onTeardown]);
+    // Get current value
+    const getCurrentValue = useCallback(() => {
+        if (viewRef.current) {
+            return serializeEditorValue(viewRef.current.state.doc);
+        }
+        return currentValueRef.current ?? "";
+    }, []);
+    // Is Cursor at end of input
+    const isCursorAtEnd = useCallback(() => {
+        const view = viewRef.current;
+        if (!view)
+            return false;
+        const { state } = view;
+        const { selection } = state;
+        if (!selection.empty)
+            return false;
+        const $pos = state.doc.resolve(selection.from);
+        const endPos = $pos.end(); // End of the current block
+        return selection.from === endPos;
+    }, []);
+    // Item to stirng
+    const itemToString = useCallback((item) => item?.value ?? item?.title ?? "", []);
+    // Final options
+    const finalOptions = useMemo(() => {
+        if (navigationMode) {
+            return [];
+        }
+        if (formulaMode) {
+            const isStructured = Boolean(tableToken);
+            const isCellProperty = Boolean(cellPropertyToken);
+            if (isCellProperty && cellPropertyToken) {
+                if (!cellPropertyToken.structured) {
+                    const dotIndex = getPropertyStartIndex(cellPropertyToken);
+                    if (dotIndex === -1) {
+                        return [];
+                    }
+                    const address = cellPropertyToken.image.slice(0, dotIndex);
+                    const cell = addressToCell(address);
+                    if (!cell) {
+                        return [];
+                    }
+                    const props = getStructuredProperties?.(cellPropertyToken.sheetName, cell.rowIndex, cell.columnIndex) ?? [];
+                    return props;
+                }
+                if (cellPropertyToken.resolvedRowIndex !== undefined &&
+                    cellPropertyToken.resolvedColumnIndex !== undefined) {
+                    return (getStructuredProperties?.(cellPropertyToken.resolvedSheetName ??
+                        cellPropertyToken.sheetName, cellPropertyToken.resolvedRowIndex, cellPropertyToken.resolvedColumnIndex) ?? []);
+                }
+                return [];
+            }
+            if (isStructured) {
+                const canSelectThisRow = activeTokenRef.current?.image !== "@";
+                const columns = getTableColumnNames?.(tableToken?.tableName) ?? [];
+                // If there are no columns, lets not display suggestions
+                if (!columns.length) {
+                    return [];
+                }
+                return [
+                    ...(canSelectThisRow ? [THIS_ROW_ITEM] : []),
+                    ...columns,
+                    ...SPECIAL_ITEMS,
+                ];
+            }
+            const tableNames = getTableNames?.() ?? [];
+            const parameterItems = isEdgeofCell
+                ? []
+                : parameterSuggestions?.map((item) => ({
+                    ...item,
+                    category: item.category ?? "parameter",
+                })) ?? [];
+            const baseOptions = [
+                ...tableNames,
+                ...(getNamedRanges?.() ?? []),
+                ...(functionDescriptions ?? []),
+                ...(parameterItems ?? []),
+            ];
+            if (suggestionTokenRef.current &&
+                suggestionTokenRef.current.tokenType?.name ===
+                    tokenVocabulary.UnterminatedStringStart.name) {
+                return parameterItems;
+            }
+            return baseOptions;
+        }
+        return options ?? [];
+    }, [
+        navigationMode,
+        formulaMode,
+        getTableNames,
+        getTableColumnNames,
+        getStructuredProperties,
+        options,
+        functionDescriptions,
+        getNamedRanges,
+        tableToken,
+        cellPropertyToken,
+        functionToken,
+        parameterSuggestions,
+        isEdgeofCell,
+        showFormulaHelp,
+    ]);
+    const activeParameterRange = useMemo(() => {
+        const range = parameterRanges[parameterIndex];
+        if (!range)
+            return undefined;
+        return {
+            start: range.start + 1,
+            end: range.end + 1,
+        };
+    }, [parameterRanges, parameterIndex]);
+    const itemsWhenEmpty = useMemo(() => {
+        if (navigationMode) {
+            return undefined;
+        }
+        if (!isEdgeofCell &&
+            functionToken &&
+            shouldFetchFunctionParameters?.(functionToken.image ?? "", parameterIndex, parameterArguments)) {
+            return parameterSuggestions ?? [];
+        }
+        return undefined;
+    }, [
+        navigationMode,
+        functionToken,
+        shouldFetchFunctionParameters,
+        parameterIndex,
+        parameterArguments,
+        parameterSuggestions,
+        isEdgeofCell,
+    ]);
+    // Callback when user selects an item from dropdown
+    const handleDropdownChange = useDropdownChangePM({
+        onSubmit: !navigationMode ? onSubmit : undefined,
+        formulaMode,
+        itemToString,
+        suggestionToken: suggestionTokenRef.current,
+        previousToken: previousTokenRef.current,
+        propertyToken: cellPropertyToken,
+        getView,
+        activeToken: activeTokenRef.current,
+        parameterRange: activeParameterRange,
+    });
+    // Inserts a mention in the dom
+    const handleInsertMention = useCallback((mention) => {
+        if (viewRef.current && mentionState.range && mention) {
+            const { state } = viewRef.current;
+            const mentionNode = state.schema.nodes.mention.create({
+                label: mention.label,
+                value: mention.value,
+            });
+            const tr = state.tr
+                .delete(mentionState.range.from, mentionState.range.to)
+                .insert(mentionState.range.from, [
+                mentionNode,
+                state.schema.text(" "),
+            ]);
+            viewRef.current.dispatch(tr);
+        }
+    }, [mentionState, onChangeMentionState]);
+    // Mention keydown
+    const { highlightedIndex: mentionHighlightedIndex, onMentionKeydown } = useMentionKeyDown({
+        mentions,
+        mentionState,
+        onSelect: handleInsertMention,
+    });
+    // Dropdown integration
+    const { isOpen, highlightedIndex, onSelect, onChangeHighlightedIndex, items, onKeyDown: onDropdownKeyDown, setQuery, query, } = useDropdown({
+        initialOpen: navigationMode
+            ? false
+            : formulaMode
+                ? false
+                : Boolean(options?.length),
+        initialHighlightedIndex: -1,
+        initialQuery: navigationMode
+            ? undefined
+            : formulaMode
+                ? undefined
+                : value,
+        isNewValue,
+        items: finalOptions,
+        onChange: handleDropdownChange,
+        itemToString,
+        itemsWhenEmpty,
+        // Only meaningful for the plain (data-validation) dropdown — formula
+        // mode's function/reference suggestions have no "current entry".
+        isItemSelected: !navigationMode && !formulaMode ? isOptionSelected : undefined,
+        limit: formulaMode
+            ? tableToken
+                ? Number.MAX_SAFE_INTEGER
+                : cellPropertyToken
+                    ? Number.MAX_SAFE_INTEGER
+                    : 10
+            : Number.MAX_SAFE_INTEGER,
+        showAllIfEmpty: !formulaMode || !!tableToken || !!cellPropertyToken,
+    });
+    // Update dropdown query when suggestion token changes
+    useIsomorphicLayoutEffect(() => {
+        if (navigationModeRef.current)
+            return;
+        const token = suggestionTokenRef.current;
+        if (token) {
+            if (token.tokenType?.name ===
+                tokenVocabulary.UnterminatedStringStart.name) {
+                const cleaned = token.image?.replace(/"/g, "") ?? "";
+                setQuery(cleaned);
+            }
+            else {
+                setQuery(token.image ?? "");
+            }
+        }
+    }, [setQuery]);
+    // Show dropdown if functiontoken is present
+    const isDropdownOpen = Boolean(isOpen ||
+        (formulaMode && !isEdgeofCell && (items.length > 1 || functionToken)));
+    const showDropdownEffective = showDropdown && !navigationMode;
+    // Handle update editor
+    const handleUpdate = useCallback((address, selectionMode) => {
+        if (!viewRef.current) {
+            console.warn("handleUpdate: Editor view not available");
+            return;
+        }
+        try {
+            const { state } = viewRef.current;
+            const { tr } = state;
+            const activeToken = activeTokenRef.current;
+            if (selectionMode === "modify" && activeToken) {
+                const from = Math.max(0, activeToken.startColumn);
+                const to = Math.min(state.doc.content.size, activeToken.endColumn + 1);
+                // Bounds checking
+                if (from >= 0 && to <= state.doc.content.size && from <= to) {
+                    tr.delete(from, to);
+                }
+                else {
+                    console.warn(`Invalid delete range: ${from}-${to}, doc size: ${state.doc.content.size}`);
+                }
+            }
+            if (selectionMode === "append" &&
+                activeToken &&
+                isCellToken(activeToken)) {
+                tr.insertText(",");
+            }
+            if (address && typeof address === "string") {
+                // Sanitize address string
+                const cleanAddress = address.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "");
+                tr.insertText(cleanAddress);
+            }
+            viewRef.current.dispatch(tr);
+        }
+        catch (error) {
+            log("Error updating editor:", error);
+        }
+    }, []);
+    // Cycle between absolute and relative references
+    const onCycleReference = useCycleFormulaReference({
+        onUpdate: handleUpdate,
+    });
+    // KeyDown handler
+    const handleKeyDown = useCallback((e) => {
+        if (!navigationMode && showDropdownEffective && isDropdownOpen) {
+            onDropdownKeyDown?.(e);
+        }
+        if (!navigationMode && mentionState.active) {
+            onMentionKeydown(e);
+        }
+        onKeyDown?.(e);
+    }, [
+        onKeyDown,
+        onDropdownKeyDown,
+        showDropdownEffective,
+        isDropdownOpen,
+        mentionState,
+        onMentionKeydown,
+        navigationMode,
+    ]);
+    const handleKeyDownCapture = useCallback((e) => {
+        if (!navigationMode) {
+            return;
+        }
+        const key = e.key.toLowerCase();
+        const isUndoRedoShortcut = (e.metaKey || e.ctrlKey) &&
+            !e.altKey &&
+            (key === "z" || key === "y");
+        if (isUndoRedoShortcut) {
+            e.preventDefault();
+        }
+    }, [navigationMode]);
+    // Insert break handler for ProseMirror
+    const handleInsertBreak = useCallback(() => {
+        if (viewRef.current) {
+            const { state } = viewRef.current;
+            const { $from } = state.selection;
+            // Check if we can split at this position
+            const canSplit = $from.depth > 0;
+            if (canSplit) {
+                // Split the line at the cursor position
+                const tr = state.tr.split($from.pos);
+                // Move cursor to the start of the new line (right after the split)
+                const newPos = $from.pos + 2; // +2 to move into the new line node
+                if (newPos <= tr.doc.content.size) {
+                    tr.setSelection(TextSelection.near(tr.doc.resolve(newPos)));
+                }
+                viewRef.current.dispatch(tr);
+            }
+            else {
+                // Fallback: just insert a new line node
+                const newLine = state.schema.nodes.line.create();
+                const tr = state.tr.replaceSelectionWith(newLine);
+                const newPos = tr.selection.from + 1;
+                if (newPos <= tr.doc.content.size) {
+                    tr.setSelection(TextSelection.near(tr.doc.resolve(newPos)));
+                }
+                viewRef.current.dispatch(tr);
+            }
+        }
+    }, []);
+    const canSubmitInDropdown = () => {
+        const token = suggestionTokenRef.current;
+        const item = items[highlightedIndex];
+        if (token?.property && item) {
+            return item?.title === token?.property;
+        }
+        if (item && item.category === "namedrange") {
+            return item.title === token?.image;
+        }
+        return false;
+    };
+    // Editor keydown handler
+    const canSubmit = (highlightedIndex === -1 ||
+        items.length === 0 ||
+        canSubmitInDropdown()) &&
+        !showMentionDropdownEffective;
+    const onKeyDownEditor = useEditorKeyDownPM({
+        value,
+        formulaMode,
+        isNewValue,
+        isActive,
+        isCursorAtEnd,
+        onCancel: !navigationMode ? onCancel : undefined,
+        onSubmit: !navigationMode ? onSubmit : undefined,
+        onInsertBreak: handleInsertBreak,
+        onKeyDown: handleKeyDown,
+        canSubmit,
+        canCancel: !isOpen && !showMentionDropdownEffective,
+        isDropdownOpen,
+        getView,
+    });
+    // Move cursor to the end
+    const moveCursorToEnd = useCallback(() => {
+        if (!viewRef.current) {
+            console.warn("moveCursorToEnd: Editor view not available");
+            return;
+        }
+        try {
+            const { state } = viewRef.current;
+            const pos = Math.min(state.doc.content.size, Math.max(0, state.doc.content.size));
+            if (pos >= 0 && pos <= state.doc.content.size) {
+                const tr = state.tr.setSelection(TextSelection.near(state.doc.resolve(pos)));
+                viewRef.current.dispatch(tr);
+            }
+            else {
+                console.warn(`Invalid cursor position for moveCursorToEnd: ${pos}`);
+            }
+        }
+        catch (error) {
+            log("Error moving cursor to end:", error);
+        }
+    }, []);
+    // In Strict mode, memo refs are not changed afaik
+    const imperativeMethods = useMemo(() => ({
+        update: handleUpdate,
+        teardown: handleTeardown,
+        setValue: (value, formatRuns) => {
+            if (!viewRef.current) {
+                console.warn("setValue: Editor view not available");
+                return;
+            }
+            try {
+                viewRef.current.endComposition?.();
+                const newDoc = !isAFormula(value) && formatRuns && formatRuns.length > 0
+                    ? applyTextFormatRuns(value, formatRuns, schema, resolveRunColor)
+                    : deserializeString(value, schema);
+                const { state } = viewRef.current;
+                const currentSelection = state.selection;
+                const tr = state.tr.replaceWith(0, state.doc.content.size, newDoc.content);
+                // Try to preserve cursor position if it's still valid
+                const newDocSize = tr.doc.content.size;
+                const preservedPos = Math.min(Math.max(0, currentSelection.from), newDocSize);
+                // Set selection to preserved position with bounds checking
+                if (preservedPos >= 0 && preservedPos <= newDocSize) {
+                    tr.setSelection(TextSelection.near(tr.doc.resolve(preservedPos)));
+                }
+                viewRef.current.dispatch(tr);
+            }
+            catch (error) {
+                log("Error setting editor value:", error);
+                // Fallback: try to set empty content
+                try {
+                    const emptyDoc = schema.node("doc", null, [
+                        schema.node("line", null, []),
+                    ]);
+                    const tr = viewRef.current.state.tr.replaceWith(0, viewRef.current.state.doc.content.size, emptyDoc.content);
+                    viewRef.current.dispatch(tr);
+                }
+                catch (fallbackError) {
+                    log("Error in setValue fallback:", fallbackError);
+                }
+            }
+        },
+        getValue() {
+            return getCurrentValue();
+        },
+        applyTextFormat(format) {
+            const view = viewRef.current;
+            if (!view) {
+                return false;
+            }
+            const handled = applyTextFormatToSelection(view.state, view.dispatch, format, schema, resolveRunColor);
+            // Focus is NOT managed here. The ProseMirror selection survives
+            // without DOM focus, and the toolbar's existing machinery
+            // (ToolbarIconButton -> focusSheet, dropdown onCloseAutoFocus)
+            // already returns focus to the sheet after a control is used —
+            // taking focus synchronously from inside a control's event
+            // handler lets that event's default action land in the editor.
+            return handled;
+        },
+        getSelectionFontSize() {
+            const view = viewRef.current;
+            if (!view) {
+                return null;
+            }
+            return getSelectionFontSize(view.state);
+        },
+        moveCursorToEnd,
+        moveCursorToTokenEnd(index) {
+            if (index === undefined || index === null) {
+                this.moveCursorToEnd();
+                return;
+            }
+            const tokens = tokenizer(getCurrentValue());
+            for (const token of tokens) {
+                if ((token.selection || token.structured || token.isNamedRange) &&
+                    token.index === index &&
+                    token.endColumn !== undefined) {
+                    // Token columns are ProseMirror positions (see
+                    // `handleUpdate`); the caret slot after the token's
+                    // last character is endColumn + 1
+                    this.select(token.endColumn + 1);
+                    return;
+                }
+            }
+            this.moveCursorToEnd();
+        },
+        focus(shouldMoveSelectionToEnd) {
+            if (!persistFocus) {
+                console.debug("Focus persisting disabled");
+                return;
+            }
+            focusEditor();
+            if (shouldMoveSelectionToEnd) {
+                this.moveCursorToEnd();
+            }
+        },
+        isFocused() {
+            if (!viewRef.current)
+                return false;
+            return (viewRef.current.hasFocus() ||
+                document.activeElement === viewRef.current.dom);
+        },
+        get selection() {
+            return viewRef.current?.state.selection.from ?? null;
+        },
+        select(target) {
+            if (!viewRef.current) {
+                console.warn("select: Editor view not available");
+                return;
+            }
+            try {
+                const { state } = viewRef.current;
+                // Validate target position
+                if (typeof target !== "number" || !isFinite(target)) {
+                    console.warn(`Invalid select target: ${target}`);
+                    return;
+                }
+                const pos = Math.min(Math.max(0, target), state.doc.content.size);
+                if (pos >= 0 && pos <= state.doc.content.size) {
+                    const tr = state.tr.setSelection(TextSelection.near(state.doc.resolve(pos)));
+                    viewRef.current.dispatch(tr);
+                }
+                else {
+                    console.warn(`Invalid cursor position for select: ${pos}`);
+                }
+            }
+            catch (error) {
+                log("Error selecting position:", error);
+            }
+        },
+        el() {
+            return viewRef.current?.dom;
+        },
+    }), [
+        focusEditor,
+        handleUpdate,
+        handleTeardown,
+        persistFocus,
+        getCurrentValue,
+        moveCursorToEnd,
+        tokenizer,
+        resolveRunColor,
+    ]);
+    // Expose editor methods
+    useImperativeHandle(forwardedRef, () => imperativeMethods, [
+        imperativeMethods,
+    ]);
+    // Auto focus
+    useIsomorphicLayoutEffect(() => {
+        if (autoFocus && viewRef.current) {
+            focusEditor();
+            moveCursorToEnd();
+        }
+    }, [autoFocus, focusEditor, moveCursorToEnd]);
+    return (React.createElement(Popper.Root, null,
+        !showDropdownEffective ||
+            showFormulaHelp ||
+            !functionToken ? null : (React.createElement(StyledFormulaHelp, { onMouseDown: onShowFormulaHelp, title: "Show formula help", className: cn(editorZeroOutline ? "mr-px top-px" : undefined) },
+            React.createElement(QuestionMarkIcon, { width: 12, height: 12 }))),
+        !navigationMode && isFetchingParameters && (React.createElement("div", { className: "absolute top-1/2 right-[-18px] -translate-y-1/2 h-[14px]" },
+            React.createElement(LoadingIcon, { className: "animate-spin" }))),
+        React.createElement("div", { className: "h-full overflow-auto [&_div]:outline-none" },
+            React.createElement("div", { ref: editorRef, className: cn(className, "whitespace-pre-wrap"), onKeyDownCapture: handleKeyDownCapture, onKeyDown: onKeyDownEditor, ...props })),
+        React.createElement(Popper.Anchor, { asChild: true },
+            React.createElement("button", { tabIndex: -1, className: cn("absolute left-0 top-0 w-0 h-full overflow-hidden m-0 p-0 border-none bg-transparent shadow-none"), style: {
+                    left: showMentionDropdownEffective ? mentionPositionLeft : 0,
+                } })),
+        showDropdownEffective && isDropdownOpen && (React.createElement(ConditionalWrapper, { condition: stickyEditor, wrapper: (children) => React.createElement(Portal, { asChild: true }, children) },
+            React.createElement(Popper.Content, { side: "bottom", align: "start", className: "z-50", sideOffset: 2 },
+                React.createElement(SuggestionsDropdown, { functionDescriptions: functionDescriptions, formulaMode: formulaMode, dropdownStyles: dropdownStyles, functionToken: functionToken, parameterIndex: parameterIndex, items: items, highlightedIndex: highlightedIndex, onSelect: onSelect, onChangeHighlightedIndex: onChangeHighlightedIndex, showFormulaHelp: showFormulaHelp, onHideFormulaHelp: onHideFormulaHelp })))),
+        showDropdownEffective && showMentionDropdownEffective && (React.createElement(ConditionalWrapper, { condition: stickyEditor, wrapper: (children) => React.createElement(Portal, { asChild: true }, children) },
+            React.createElement(Popper.Content, { side: "bottom", align: "start", className: "z-50", sideOffset: 2 },
+                React.createElement(MentionsDropdown, { mentions: mentions, onSelect: handleInsertMention, highlightedIndex: mentionHighlightedIndex, isFetchingMentions: isFetchingMentions, MentionDropdownItemComponent: MentionDropdownItemComponent }))))));
+}));
+export const ProseMirrorEditor = withErrorBoundary(ProseMirrorEditorThatMayError, {
+    FallbackComponent: ErrorFallback,
+});
+ProseMirrorEditor.displayName = "ProseMirrorEditor";