@rowsncolumns/ui 15.0.38

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

@@ -0,0 +1,1145 @@
+import { __assign, __awaiter, __generator, __read, __rest, __spreadArray, __values } from "tslib";
+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 var deleteAll = function (state, dispatch) {
+    if (dispatch) {
+        var emptyDoc = schema.node("doc", null, [schema.node("line", null, [])]);
+        var 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 var ProseMirrorEditorThatMayError = memo(forwardRef(function (_a, forwardedRef) {
+    var _b;
+    var _c = _a.value, value = _c === void 0 ? "" : _c, isNewValue = _a.isNewValue, formulaMode = _a.formulaMode, onChange = _a.onChange, autoFocus = _a.autoFocus, className = _a.className, onKeyDown = _a.onKeyDown, disabled = _a.disabled, _d = _a.showDropdown, showDropdown = _d === void 0 ? true : _d, _e = _a.persistFocus, persistFocus = _e === void 0 ? true : _e, editorZeroOutline = _a.editorZeroOutline, showFormulaHelp = _a.showFormulaHelp, onHideFormulaHelp = _a.onHideFormulaHelp, onShowFormulaHelp = _a.onShowFormulaHelp, tokenizer = _a.tokenizer, onCancel = _a.onCancel, onSubmit = _a.onSubmit, onFormulaStateChange = _a.onFormulaStateChange, dropdownStyles = _a.dropdownStyles, options = _a.options, isOptionSelected = _a.isOptionSelected, functionDescriptions = _a.functionDescriptions, shouldFetchFunctionParameters = _a.shouldFetchFunctionParameters, getFunctionParameterSuggestions = _a.getFunctionParameterSuggestions, getMentions = _a.getMentions, getNamedRanges = _a.getNamedRanges, getTableNames = _a.getTableNames, getTableColumnNames = _a.getTableColumnNames, getStructuredProperties = _a.getStructuredProperties, onTeardown = _a.onTeardown, _f = _a.SuggestionsDropdown, SuggestionsDropdown = _f === void 0 ? DefaultSuggestionsDropdown : _f, MentionTagComponent = _a.MentionTagComponent, MentionDropdownItemComponent = _a.MentionDropdownItemComponent, isActive = _a.isActive, _g = _a.stickyEditor, stickyEditor = _g === void 0 ? true : _g, onFocus = _a.onFocus, onBlur = _a.onBlur, onCopy = _a.onCopy, onCut = _a.onCut, onPaste = _a.onPaste, placeholder = _a.placeholder, textFormatRuns = _a.textFormatRuns, resolveRunColor = _a.resolveRunColor, navigationMode = _a.navigationMode, enableContinuousSelection = _a.enableContinuousSelection, cellFontFamily = _a.cellFontFamily, props = __rest(_a, ["value", "isNewValue", "formulaMode", "onChange", "autoFocus", "className", "onKeyDown", "disabled", "showDropdown", "persistFocus", "editorZeroOutline", "showFormulaHelp", "onHideFormulaHelp", "onShowFormulaHelp", "tokenizer", "onCancel", "onSubmit", "onFormulaStateChange", "dropdownStyles", "options", "isOptionSelected", "functionDescriptions", "shouldFetchFunctionParameters", "getFunctionParameterSuggestions", "getMentions", "getNamedRanges", "getTableNames", "getTableColumnNames", "getStructuredProperties", "onTeardown", "SuggestionsDropdown", "MentionTagComponent", "MentionDropdownItemComponent", "isActive", "stickyEditor", "onFocus", "onBlur", "onCopy", "onCut", "onPaste", "placeholder", "textFormatRuns", "resolveRunColor", "navigationMode", "enableContinuousSelection", "cellFontFamily"]);
+    var editorRef = useRef(null);
+    var viewRef = useRef(null);
+    var cellFontFamilyRef = useRef(cellFontFamily);
+    var _h = __read(useState(), 2), cursorPosition = _h[0], setCursorPosition = _h[1];
+    var _j = __read(useState(), 2), tableToken = _j[0], setTableToken = _j[1];
+    var _k = __read(useState(), 2), functionToken = _k[0], setFunctionToken = _k[1];
+    var _l = __read(useState(0), 2), parameterIndex = _l[0], setParameterIndex = _l[1];
+    var _m = __read(useState(false), 2), isEdgeofCell = _m[0], setIsEdgeOfCell = _m[1];
+    var _o = __read(useState(DEFAULT_ARRAY), 2), parameterArguments = _o[0], setParameterArguments = _o[1];
+    var _p = __read(useState(DEFAULT_ARRAY), 2), parameterRanges = _p[0], setParameterRanges = _p[1];
+    var _q = __read(useState(), 2), cellPropertyToken = _q[0], setCellPropertyToken = _q[1];
+    var activeTokenRef = useRef(undefined);
+    var suggestionTokenRef = useRef(undefined);
+    var previousTokenRef = useRef(undefined);
+    var currentValueRef = useRef(undefined);
+    var onFocusRef = useRef(onFocus);
+    var onBlurRef = useRef(onBlur);
+    var onCopyRef = useRef(onCopy);
+    var onPasteRef = useRef(onPaste);
+    var onCutRef = useRef(onCut);
+    var navigationModeRef = useRef(navigationMode);
+    // Mentions
+    var _r = __read(useState({
+        active: false,
+        query: "",
+        range: null,
+        selectedIndex: 0,
+    }), 2), mentionState = _r[0], onChangeMentionState = _r[1];
+    var _s = __read(useState([]), 2), mentions = _s[0], setMentions = _s[1];
+    var _t = __read(useState(false), 2), isFetchingMentions = _t[0], setIsFetchingMentions = _t[1];
+    var mentionPositionLeft = useMemo(function () {
+        var _a, _b, _c, _d;
+        if (mentionState.range) {
+            var editorPositon = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            return (((_c = (_b = viewRef.current) === null || _b === void 0 ? void 0 : _b.coordsAtPos(mentionState.range.from).left) !== null && _c !== void 0 ? _c : 0) -
+                ((_d = editorPositon === null || editorPositon === void 0 ? void 0 : editorPositon.left) !== null && _d !== void 0 ? _d : 0));
+        }
+        return 0;
+    }, [(_b = mentionState.range) === null || _b === void 0 ? void 0 : _b.from]);
+    // Show mention dropdown
+    var showMentionDropdown = (mentionState.active && mentions.length > 1) || isFetchingMentions;
+    var showMentionDropdownEffective = showMentionDropdown && !navigationMode;
+    var _u = useParameterSuggestions({
+        functionToken: !formulaMode || navigationMode || isEdgeofCell
+            ? undefined
+            : functionToken,
+        parameterIndex: parameterIndex,
+        parameterArguments: parameterArguments,
+        getFunctionParameterSuggestions: !navigationMode
+            ? getFunctionParameterSuggestions
+            : undefined,
+        shouldFetchFunctionParameters: !navigationMode
+            ? shouldFetchFunctionParameters
+            : undefined,
+    }), parameterSuggestions = _u.parameterSuggestions, isFetchingParameters = _u.isFetchingParameters;
+    useIsomorphicLayoutEffect(function () {
+        currentValueRef.current = value;
+    }, [value]);
+    useIsomorphicLayoutEffect(function () {
+        onFocusRef.current = onFocus;
+    }, [onFocus]);
+    useIsomorphicLayoutEffect(function () {
+        onBlurRef.current = onBlur;
+    }, [onBlur]);
+    useIsomorphicLayoutEffect(function () {
+        onCopyRef.current = onCopy;
+    }, [onCopy]);
+    useIsomorphicLayoutEffect(function () {
+        onPasteRef.current = onPaste;
+    }, [onPaste]);
+    useIsomorphicLayoutEffect(function () {
+        onCutRef.current = onCut;
+    }, [onCut]);
+    useIsomorphicLayoutEffect(function () {
+        cellFontFamilyRef.current = cellFontFamily;
+    }, [cellFontFamily]);
+    useIsomorphicLayoutEffect(function () {
+        var _a;
+        var 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 ((_a = viewRef.current) === null || _a === void 0 ? void 0 : _a.dom) {
+            viewRef.current.dom.setAttribute("inputmode", navigationMode ? "none" : "text");
+        }
+    }, [navigationMode]);
+    // Store latest values in refs for the decorator plugin
+    var formulaModeRef = useRef(formulaMode);
+    // Update refs when values change
+    formulaModeRef.current = formulaMode;
+    // Helper function to create initial document
+    var createInitialDocument = useCallbackRef(useCallback(function () {
+        if (!isAFormula(value) && (textFormatRuns === null || textFormatRuns === void 0 ? void 0 : 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
+    var decoratorRef = useRef(undefined);
+    var getFormulaDecorations = useEditorDecoratorPM({
+        cursorPosition: cursorPosition,
+        formulaMode: formulaMode,
+        tokenizer: tokenizer,
+        isActive: isActive,
+    });
+    // Combined decorator that includes formula highlighting
+    var getCombinedDecorations = useCallback(function (state) {
+        if (navigationModeRef.current) {
+            return DecorationSet.create(state.doc, []);
+        }
+        var decorations = [];
+        // Add formula decorations
+        if (formulaMode) {
+            var formulaDecorations = getFormulaDecorations(state);
+            if (formulaDecorations && formulaDecorations.find) {
+                formulaDecorations
+                    .find()
+                    .forEach(function (deco) { return decorations.push(deco); });
+            }
+        }
+        return DecorationSet.create(state.doc, decorations);
+    }, [getFormulaDecorations, formulaMode]);
+    // React to mentions
+    useIsomorphicLayoutEffect(function () {
+        var _a;
+        if (navigationModeRef.current) {
+            if (mentions.length) {
+                setMentions([]);
+            }
+            setIsFetchingMentions(false);
+            return;
+        }
+        var fetchMentions = function (query) { return __awaiter(void 0, void 0, void 0, function () {
+            var mentions;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        setIsFetchingMentions(true);
+                        return [4 /*yield*/, (getMentions === null || getMentions === void 0 ? void 0 : getMentions(query))];
+                    case 1:
+                        mentions = (_a = (_b.sent())) !== null && _a !== void 0 ? _a : [];
+                        setMentions(mentions);
+                        setIsFetchingMentions(false);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        try {
+            if (mentionState.active) {
+                fetchMentions((_a = mentionState.query) !== null && _a !== void 0 ? _a : "");
+            }
+            else {
+                setMentions([]);
+                setIsFetchingMentions(false);
+            }
+        }
+        catch (err) {
+            console.log("Error fetching mentions", err);
+        }
+    }, [mentionState.active, mentionState.query]);
+    // Update ref with latest decorator
+    useIsomorphicLayoutEffect(function () {
+        decoratorRef.current = getCombinedDecorations;
+    }, [getCombinedDecorations]);
+    // Set active token ref
+    var setActiveToken = useCallback(function (token) {
+        activeTokenRef.current = token;
+    }, []);
+    var setPreviousToken = useCallback(function (token) {
+        previousTokenRef.current = token;
+    }, []);
+    // Callback when suggestion token changes
+    var handleSuggestionTokenChange = useCallback(function (token) {
+        var _a, _b;
+        suggestionTokenRef.current = token;
+        var newQuery = (_b = (_a = token === null || token === void 0 ? void 0 : token.property) !== null && _a !== void 0 ? _a : token === null || token === void 0 ? void 0 : token.image) !== null && _b !== void 0 ? _b : "";
+        setQuery(newQuery);
+    }, []);
+    // Get editor view
+    var getView = useCallback(function () {
+        return viewRef.current;
+    }, []);
+    // Handle change hook
+    var onEditorChange = useEditorOnChangePM({
+        onChange: !navigationMode ? onChange : function () { return undefined; },
+        getView: getView,
+        isActive: isActive,
+        onChangeCursor: setCursorPosition,
+        onChangeActiveToken: setActiveToken,
+        tokenizer: !navigationMode ? tokenizer : function () { return []; },
+        onFormulaStateChange: !navigationMode
+            ? onFormulaStateChange
+            : undefined,
+        onSuggestionTokenChange: handleSuggestionTokenChange,
+        onTableTokenChange: setTableToken,
+        onChangeFunctionToken: setFunctionToken,
+        onChangeIsEdgeOfCell: setIsEdgeOfCell,
+        onChangeParameterIndex: setParameterIndex,
+        onCellPropertyTokenChange: setCellPropertyToken,
+        onChangeFunctionParameters: function (params, ranges) {
+            setParameterArguments(params);
+            setParameterRanges(ranges);
+        },
+        onChangePreviousToken: setPreviousToken,
+        enableContinuousSelection: enableContinuousSelection !== null && enableContinuousSelection !== void 0 ? enableContinuousSelection : isNil(navigationMode),
+    });
+    // Initialize editor
+    useIsomorphicLayoutEffect(function () {
+        if (!editorRef.current)
+            return;
+        try {
+            var state = EditorState.create({
+                doc: createInitialDocument(),
+                plugins: __spreadArray(__spreadArray([
+                    history(),
+                    createUnfocusedSelectionPlugin()
+                ], __read((placeholder ? [createPlaceholderPlugin(placeholder)] : [])), false), [
+                    createMentionsPlugin({
+                        onChangeState: function (nextState) {
+                            if (navigationModeRef.current)
+                                return;
+                            onChangeMentionState(nextState);
+                        },
+                        getFormulaMode: function () { var _a; return (_a = formulaModeRef.current) !== null && _a !== void 0 ? _a : false; },
+                    }),
+                    createDecorationPlugin({
+                        formulaMode: formulaMode,
+                        isActive: isActive,
+                        tokenizer: tokenizer,
+                        getDecorations: function (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(__assign(__assign({}, baseKeymap), { Backspace: function (state, dispatch, view) {
+                            if (view === null || view === void 0 ? void 0 : view.composing) {
+                                return false;
+                            }
+                            // Check if all content is selected
+                            var _a = state.selection, from = _a.from, to = _a.to;
+                            var 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) {
+                                var $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: function (state, dispatch, view) {
+                            if (view === null || view === void 0 ? void 0 : view.composing) {
+                                return false;
+                            }
+                            var _a = state.selection, from = _a.from, to = _a.to;
+                            var 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": function (state, dispatch) {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.bold)(state, dispatch);
+                        }, "Mod-i": function (state, dispatch) {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.italic)(state, dispatch);
+                        }, "Mod-u": function (state, dispatch) {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.underline)(state, dispatch);
+                        }, "Shift-Mod-x": function (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-.": function (state, dispatch) {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.superscript)(state, dispatch);
+                        }, "Mod-,": function (state, dispatch) {
+                            if (formulaModeRef.current)
+                                return false;
+                            return toggleMark(schema.marks.subscript)(state, dispatch);
+                        }, Enter: function () {
+                            // Let React handle Enter through onKeyDownEditor
+                            return false; // Don't consume the event, let it bubble up
+                        }, ArrowUp: function () {
+                            return false;
+                        }, ArrowDown: function () {
+                            return false;
+                        }, Escape: function () {
+                            // Handle escape key
+                            return true;
+                        }, F4: function () {
+                            // Handle F4 for cycling references
+                            if (activeTokenRef.current) {
+                                onCycleReference(activeTokenRef.current);
+                            }
+                            return true;
+                        } })),
+                ], false),
+            });
+            // 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.
+            var clipboardSerializer = new DOMSerializer(__assign(__assign({}, DOMSerializer.nodesFromSchema(schema)), { line: function () {
+                    var font = cellFontFamilyRef.current;
+                    return font
+                        ? ["div", { style: "font-family: ".concat(font) }, 0]
+                        : ["div", 0];
+                } }), DOMSerializer.marksFromSchema(schema));
+            var view_1 = new EditorView(editorRef.current, {
+                state: state,
+                clipboardSerializer: clipboardSerializer,
+                nodeViews: {
+                    mention: function (node, view, getPos) {
+                        return new MentionNodeView(node, view, getPos, MentionTagComponent);
+                    },
+                },
+                dispatchTransaction: function (transaction) {
+                    try {
+                        var newState = view_1.state.apply(transaction);
+                        view_1.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_1.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: function () { return !disabled; },
+                handleDOMEvents: {
+                    focus: function (_, event) {
+                        var _a;
+                        (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, event);
+                        return false; // Let ProseMirror handle the focus as well
+                    },
+                    blur: function (_, event) {
+                        var _a;
+                        (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, event);
+                        return false; // Let ProseMirror handle the blur as well
+                    },
+                    copy: function (_, event) {
+                        var _a;
+                        (_a = onCopyRef.current) === null || _a === void 0 ? void 0 : _a.call(onCopyRef, event);
+                        return false;
+                    },
+                    paste: function (_, event) {
+                        var _a;
+                        (_a = onPasteRef.current) === null || _a === void 0 ? void 0 : _a.call(onPasteRef, event);
+                        return false;
+                    },
+                    cut: function (_, event) {
+                        var _a;
+                        (_a = onCutRef.current) === null || _a === void 0 ? void 0 : _a.call(onCutRef, event);
+                        return false;
+                    },
+                },
+            });
+            viewRef.current = view_1;
+            return function () {
+                try {
+                    view_1.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 {
+                var fallbackState = EditorState.create({
+                    doc: schema.node("doc", null, [schema.node("line", null, [])]),
+                    plugins: [history()],
+                });
+                var 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(function () {
+        if (viewRef.current) {
+            try {
+                var currentContent = serializeEditorValue(viewRef.current.state.doc);
+                if (currentContent !== value) {
+                    var newDoc = createInitialDocument();
+                    var 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(function () {
+        if (navigationModeRef.current)
+            return;
+        if (viewRef.current) {
+            try {
+                // Force a decoration update by dispatching a metadata transaction
+                var tr = viewRef.current.state.tr.setMeta("updateDecorations", {
+                    formulaMode: formulaMode,
+                    isActive: isActive,
+                    cursorPosition: cursorPosition,
+                });
+                viewRef.current.dispatch(tr);
+            }
+            catch (error) {
+                log("Error updating decorations:", error);
+            }
+        }
+    }, [formulaMode, isActive, cursorPosition]);
+    // Update editor disabled state when disabled prop changes
+    useIsomorphicLayoutEffect(function () {
+        if (viewRef.current) {
+            try {
+                // Update contenteditable attribute
+                var 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(__assign(__assign({}, viewRef.current.props), { editable: function () { return !disabled; } }));
+            }
+            catch (error) {
+                log("Error updating disabled state:", error);
+            }
+        }
+    }, [disabled]);
+    // Focus editor
+    var focusEditor = useCallback(function () {
+        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
+     */
+    var handleTeardown = useCallback(function () {
+        if (viewRef.current) {
+            viewRef.current.destroy();
+            viewRef.current = null;
+        }
+        onTeardown === null || onTeardown === void 0 ? void 0 : onTeardown();
+    }, [onTeardown]);
+    // Get current value
+    var getCurrentValue = useCallback(function () {
+        var _a;
+        if (viewRef.current) {
+            return serializeEditorValue(viewRef.current.state.doc);
+        }
+        return (_a = currentValueRef.current) !== null && _a !== void 0 ? _a : "";
+    }, []);
+    // Is Cursor at end of input
+    var isCursorAtEnd = useCallback(function () {
+        var view = viewRef.current;
+        if (!view)
+            return false;
+        var state = view.state;
+        var selection = state.selection;
+        if (!selection.empty)
+            return false;
+        var $pos = state.doc.resolve(selection.from);
+        var endPos = $pos.end(); // End of the current block
+        return selection.from === endPos;
+    }, []);
+    // Item to stirng
+    var itemToString = useCallback(function (item) { var _a, _b; return (_b = (_a = item === null || item === void 0 ? void 0 : item.value) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.title) !== null && _b !== void 0 ? _b : ""; }, []);
+    // Final options
+    var finalOptions = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (navigationMode) {
+            return [];
+        }
+        if (formulaMode) {
+            var isStructured = Boolean(tableToken);
+            var isCellProperty = Boolean(cellPropertyToken);
+            if (isCellProperty && cellPropertyToken) {
+                if (!cellPropertyToken.structured) {
+                    var dotIndex = getPropertyStartIndex(cellPropertyToken);
+                    if (dotIndex === -1) {
+                        return [];
+                    }
+                    var address = cellPropertyToken.image.slice(0, dotIndex);
+                    var cell = addressToCell(address);
+                    if (!cell) {
+                        return [];
+                    }
+                    var props_1 = (_a = getStructuredProperties === null || getStructuredProperties === void 0 ? void 0 : getStructuredProperties(cellPropertyToken.sheetName, cell.rowIndex, cell.columnIndex)) !== null && _a !== void 0 ? _a : [];
+                    return props_1;
+                }
+                if (cellPropertyToken.resolvedRowIndex !== undefined &&
+                    cellPropertyToken.resolvedColumnIndex !== undefined) {
+                    return ((_c = getStructuredProperties === null || getStructuredProperties === void 0 ? void 0 : getStructuredProperties((_b = cellPropertyToken.resolvedSheetName) !== null && _b !== void 0 ? _b : cellPropertyToken.sheetName, cellPropertyToken.resolvedRowIndex, cellPropertyToken.resolvedColumnIndex)) !== null && _c !== void 0 ? _c : []);
+                }
+                return [];
+            }
+            if (isStructured) {
+                var canSelectThisRow = ((_d = activeTokenRef.current) === null || _d === void 0 ? void 0 : _d.image) !== "@";
+                var columns = (_e = getTableColumnNames === null || getTableColumnNames === void 0 ? void 0 : getTableColumnNames(tableToken === null || tableToken === void 0 ? void 0 : tableToken.tableName)) !== null && _e !== void 0 ? _e : [];
+                // If there are no columns, lets not display suggestions
+                if (!columns.length) {
+                    return [];
+                }
+                return __spreadArray(__spreadArray(__spreadArray([], __read((canSelectThisRow ? [THIS_ROW_ITEM] : [])), false), __read(columns), false), __read(SPECIAL_ITEMS), false);
+            }
+            var tableNames = (_f = getTableNames === null || getTableNames === void 0 ? void 0 : getTableNames()) !== null && _f !== void 0 ? _f : [];
+            var parameterItems = isEdgeofCell
+                ? []
+                : (_g = parameterSuggestions === null || parameterSuggestions === void 0 ? void 0 : parameterSuggestions.map(function (item) {
+                    var _a;
+                    return (__assign(__assign({}, item), { category: (_a = item.category) !== null && _a !== void 0 ? _a : "parameter" }));
+                })) !== null && _g !== void 0 ? _g : [];
+            var baseOptions = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(tableNames), false), __read(((_h = getNamedRanges === null || getNamedRanges === void 0 ? void 0 : getNamedRanges()) !== null && _h !== void 0 ? _h : [])), false), __read((functionDescriptions !== null && functionDescriptions !== void 0 ? functionDescriptions : [])), false), __read((parameterItems !== null && parameterItems !== void 0 ? parameterItems : [])), false);
+            if (suggestionTokenRef.current &&
+                ((_j = suggestionTokenRef.current.tokenType) === null || _j === void 0 ? void 0 : _j.name) ===
+                    tokenVocabulary.UnterminatedStringStart.name) {
+                return parameterItems;
+            }
+            return baseOptions;
+        }
+        return options !== null && options !== void 0 ? options : [];
+    }, [
+        navigationMode,
+        formulaMode,
+        getTableNames,
+        getTableColumnNames,
+        getStructuredProperties,
+        options,
+        functionDescriptions,
+        getNamedRanges,
+        tableToken,
+        cellPropertyToken,
+        functionToken,
+        parameterSuggestions,
+        isEdgeofCell,
+        showFormulaHelp,
+    ]);
+    var activeParameterRange = useMemo(function () {
+        var range = parameterRanges[parameterIndex];
+        if (!range)
+            return undefined;
+        return {
+            start: range.start + 1,
+            end: range.end + 1,
+        };
+    }, [parameterRanges, parameterIndex]);
+    var itemsWhenEmpty = useMemo(function () {
+        var _a;
+        if (navigationMode) {
+            return undefined;
+        }
+        if (!isEdgeofCell &&
+            functionToken &&
+            (shouldFetchFunctionParameters === null || shouldFetchFunctionParameters === void 0 ? void 0 : shouldFetchFunctionParameters((_a = functionToken.image) !== null && _a !== void 0 ? _a : "", parameterIndex, parameterArguments))) {
+            return parameterSuggestions !== null && parameterSuggestions !== void 0 ? parameterSuggestions : [];
+        }
+        return undefined;
+    }, [
+        navigationMode,
+        functionToken,
+        shouldFetchFunctionParameters,
+        parameterIndex,
+        parameterArguments,
+        parameterSuggestions,
+        isEdgeofCell,
+    ]);
+    // Callback when user selects an item from dropdown
+    var handleDropdownChange = useDropdownChangePM({
+        onSubmit: !navigationMode ? onSubmit : undefined,
+        formulaMode: formulaMode,
+        itemToString: itemToString,
+        suggestionToken: suggestionTokenRef.current,
+        previousToken: previousTokenRef.current,
+        propertyToken: cellPropertyToken,
+        getView: getView,
+        activeToken: activeTokenRef.current,
+        parameterRange: activeParameterRange,
+    });
+    // Inserts a mention in the dom
+    var handleInsertMention = useCallback(function (mention) {
+        if (viewRef.current && mentionState.range && mention) {
+            var state = viewRef.current.state;
+            var mentionNode = state.schema.nodes.mention.create({
+                label: mention.label,
+                value: mention.value,
+            });
+            var 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
+    var _v = useMentionKeyDown({
+        mentions: mentions,
+        mentionState: mentionState,
+        onSelect: handleInsertMention,
+    }), mentionHighlightedIndex = _v.highlightedIndex, onMentionKeydown = _v.onMentionKeydown;
+    // Dropdown integration
+    var _w = useDropdown({
+        initialOpen: navigationMode
+            ? false
+            : formulaMode
+                ? false
+                : Boolean(options === null || options === void 0 ? void 0 : options.length),
+        initialHighlightedIndex: -1,
+        initialQuery: navigationMode
+            ? undefined
+            : formulaMode
+                ? undefined
+                : value,
+        isNewValue: isNewValue,
+        items: finalOptions,
+        onChange: handleDropdownChange,
+        itemToString: itemToString,
+        itemsWhenEmpty: 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,
+    }), isOpen = _w.isOpen, highlightedIndex = _w.highlightedIndex, onSelect = _w.onSelect, onChangeHighlightedIndex = _w.onChangeHighlightedIndex, items = _w.items, onDropdownKeyDown = _w.onKeyDown, setQuery = _w.setQuery, query = _w.query;
+    // Update dropdown query when suggestion token changes
+    useIsomorphicLayoutEffect(function () {
+        var _a, _b, _c, _d;
+        if (navigationModeRef.current)
+            return;
+        var token = suggestionTokenRef.current;
+        if (token) {
+            if (((_a = token.tokenType) === null || _a === void 0 ? void 0 : _a.name) ===
+                tokenVocabulary.UnterminatedStringStart.name) {
+                var cleaned = (_c = (_b = token.image) === null || _b === void 0 ? void 0 : _b.replace(/"/g, "")) !== null && _c !== void 0 ? _c : "";
+                setQuery(cleaned);
+            }
+            else {
+                setQuery((_d = token.image) !== null && _d !== void 0 ? _d : "");
+            }
+        }
+    }, [setQuery]);
+    // Show dropdown if functiontoken is present
+    var isDropdownOpen = Boolean(isOpen ||
+        (formulaMode && !isEdgeofCell && (items.length > 1 || functionToken)));
+    var showDropdownEffective = showDropdown && !navigationMode;
+    // Handle update editor
+    var handleUpdate = useCallback(function (address, selectionMode) {
+        if (!viewRef.current) {
+            console.warn("handleUpdate: Editor view not available");
+            return;
+        }
+        try {
+            var state = viewRef.current.state;
+            var tr = state.tr;
+            var activeToken = activeTokenRef.current;
+            if (selectionMode === "modify" && activeToken) {
+                var from = Math.max(0, activeToken.startColumn);
+                var 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: ".concat(from, "-").concat(to, ", doc size: ").concat(state.doc.content.size));
+                }
+            }
+            if (selectionMode === "append" &&
+                activeToken &&
+                isCellToken(activeToken)) {
+                tr.insertText(",");
+            }
+            if (address && typeof address === "string") {
+                // Sanitize address string
+                var 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
+    var onCycleReference = useCycleFormulaReference({
+        onUpdate: handleUpdate,
+    });
+    // KeyDown handler
+    var handleKeyDown = useCallback(function (e) {
+        if (!navigationMode && showDropdownEffective && isDropdownOpen) {
+            onDropdownKeyDown === null || onDropdownKeyDown === void 0 ? void 0 : onDropdownKeyDown(e);
+        }
+        if (!navigationMode && mentionState.active) {
+            onMentionKeydown(e);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    }, [
+        onKeyDown,
+        onDropdownKeyDown,
+        showDropdownEffective,
+        isDropdownOpen,
+        mentionState,
+        onMentionKeydown,
+        navigationMode,
+    ]);
+    var handleKeyDownCapture = useCallback(function (e) {
+        if (!navigationMode) {
+            return;
+        }
+        var key = e.key.toLowerCase();
+        var isUndoRedoShortcut = (e.metaKey || e.ctrlKey) &&
+            !e.altKey &&
+            (key === "z" || key === "y");
+        if (isUndoRedoShortcut) {
+            e.preventDefault();
+        }
+    }, [navigationMode]);
+    // Insert break handler for ProseMirror
+    var handleInsertBreak = useCallback(function () {
+        if (viewRef.current) {
+            var state = viewRef.current.state;
+            var $from = state.selection.$from;
+            // Check if we can split at this position
+            var canSplit = $from.depth > 0;
+            if (canSplit) {
+                // Split the line at the cursor position
+                var tr = state.tr.split($from.pos);
+                // Move cursor to the start of the new line (right after the split)
+                var 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
+                var newLine = state.schema.nodes.line.create();
+                var tr = state.tr.replaceSelectionWith(newLine);
+                var newPos = tr.selection.from + 1;
+                if (newPos <= tr.doc.content.size) {
+                    tr.setSelection(TextSelection.near(tr.doc.resolve(newPos)));
+                }
+                viewRef.current.dispatch(tr);
+            }
+        }
+    }, []);
+    var canSubmitInDropdown = function () {
+        var token = suggestionTokenRef.current;
+        var item = items[highlightedIndex];
+        if ((token === null || token === void 0 ? void 0 : token.property) && item) {
+            return (item === null || item === void 0 ? void 0 : item.title) === (token === null || token === void 0 ? void 0 : token.property);
+        }
+        if (item && item.category === "namedrange") {
+            return item.title === (token === null || token === void 0 ? void 0 : token.image);
+        }
+        return false;
+    };
+    // Editor keydown handler
+    var canSubmit = (highlightedIndex === -1 ||
+        items.length === 0 ||
+        canSubmitInDropdown()) &&
+        !showMentionDropdownEffective;
+    var onKeyDownEditor = useEditorKeyDownPM({
+        value: value,
+        formulaMode: formulaMode,
+        isNewValue: isNewValue,
+        isActive: isActive,
+        isCursorAtEnd: isCursorAtEnd,
+        onCancel: !navigationMode ? onCancel : undefined,
+        onSubmit: !navigationMode ? onSubmit : undefined,
+        onInsertBreak: handleInsertBreak,
+        onKeyDown: handleKeyDown,
+        canSubmit: canSubmit,
+        canCancel: !isOpen && !showMentionDropdownEffective,
+        isDropdownOpen: isDropdownOpen,
+        getView: getView,
+    });
+    // Move cursor to the end
+    var moveCursorToEnd = useCallback(function () {
+        if (!viewRef.current) {
+            console.warn("moveCursorToEnd: Editor view not available");
+            return;
+        }
+        try {
+            var state = viewRef.current.state;
+            var pos = Math.min(state.doc.content.size, Math.max(0, state.doc.content.size));
+            if (pos >= 0 && pos <= state.doc.content.size) {
+                var tr = state.tr.setSelection(TextSelection.near(state.doc.resolve(pos)));
+                viewRef.current.dispatch(tr);
+            }
+            else {
+                console.warn("Invalid cursor position for moveCursorToEnd: ".concat(pos));
+            }
+        }
+        catch (error) {
+            log("Error moving cursor to end:", error);
+        }
+    }, []);
+    // In Strict mode, memo refs are not changed afaik
+    var imperativeMethods = useMemo(function () { return ({
+        update: handleUpdate,
+        teardown: handleTeardown,
+        setValue: function (value, formatRuns) {
+            var _a, _b;
+            if (!viewRef.current) {
+                console.warn("setValue: Editor view not available");
+                return;
+            }
+            try {
+                (_b = (_a = viewRef.current).endComposition) === null || _b === void 0 ? void 0 : _b.call(_a);
+                var newDoc = !isAFormula(value) && formatRuns && formatRuns.length > 0
+                    ? applyTextFormatRuns(value, formatRuns, schema, resolveRunColor)
+                    : deserializeString(value, schema);
+                var state = viewRef.current.state;
+                var currentSelection = state.selection;
+                var tr = state.tr.replaceWith(0, state.doc.content.size, newDoc.content);
+                // Try to preserve cursor position if it's still valid
+                var newDocSize = tr.doc.content.size;
+                var 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 {
+                    var emptyDoc = schema.node("doc", null, [
+                        schema.node("line", null, []),
+                    ]);
+                    var 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: function () {
+            return getCurrentValue();
+        },
+        applyTextFormat: function (format) {
+            var view = viewRef.current;
+            if (!view) {
+                return false;
+            }
+            var 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: function () {
+            var view = viewRef.current;
+            if (!view) {
+                return null;
+            }
+            return getSelectionFontSize(view.state);
+        },
+        moveCursorToEnd: moveCursorToEnd,
+        moveCursorToTokenEnd: function (index) {
+            var e_1, _a;
+            if (index === undefined || index === null) {
+                this.moveCursorToEnd();
+                return;
+            }
+            var tokens = tokenizer(getCurrentValue());
+            try {
+                for (var tokens_1 = __values(tokens), tokens_1_1 = tokens_1.next(); !tokens_1_1.done; tokens_1_1 = tokens_1.next()) {
+                    var token = tokens_1_1.value;
+                    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;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (tokens_1_1 && !tokens_1_1.done && (_a = tokens_1.return)) _a.call(tokens_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            this.moveCursorToEnd();
+        },
+        focus: function (shouldMoveSelectionToEnd) {
+            if (!persistFocus) {
+                console.debug("Focus persisting disabled");
+                return;
+            }
+            focusEditor();
+            if (shouldMoveSelectionToEnd) {
+                this.moveCursorToEnd();
+            }
+        },
+        isFocused: function () {
+            if (!viewRef.current)
+                return false;
+            return (viewRef.current.hasFocus() ||
+                document.activeElement === viewRef.current.dom);
+        },
+        get selection() {
+            var _a, _b;
+            return (_b = (_a = viewRef.current) === null || _a === void 0 ? void 0 : _a.state.selection.from) !== null && _b !== void 0 ? _b : null;
+        },
+        select: function (target) {
+            if (!viewRef.current) {
+                console.warn("select: Editor view not available");
+                return;
+            }
+            try {
+                var state = viewRef.current.state;
+                // Validate target position
+                if (typeof target !== "number" || !isFinite(target)) {
+                    console.warn("Invalid select target: ".concat(target));
+                    return;
+                }
+                var pos = Math.min(Math.max(0, target), state.doc.content.size);
+                if (pos >= 0 && pos <= state.doc.content.size) {
+                    var tr = state.tr.setSelection(TextSelection.near(state.doc.resolve(pos)));
+                    viewRef.current.dispatch(tr);
+                }
+                else {
+                    console.warn("Invalid cursor position for select: ".concat(pos));
+                }
+            }
+            catch (error) {
+                log("Error selecting position:", error);
+            }
+        },
+        el: function () {
+            var _a;
+            return (_a = viewRef.current) === null || _a === void 0 ? void 0 : _a.dom;
+        },
+    }); }, [
+        focusEditor,
+        handleUpdate,
+        handleTeardown,
+        persistFocus,
+        getCurrentValue,
+        moveCursorToEnd,
+        tokenizer,
+        resolveRunColor,
+    ]);
+    // Expose editor methods
+    useImperativeHandle(forwardedRef, function () { return imperativeMethods; }, [
+        imperativeMethods,
+    ]);
+    // Auto focus
+    useIsomorphicLayoutEffect(function () {
+        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", __assign({ 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: function (children) { return 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: function (children) { return 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 var ProseMirrorEditor = withErrorBoundary(ProseMirrorEditorThatMayError, {
+    FallbackComponent: ErrorFallback,
+});
+ProseMirrorEditor.displayName = "ProseMirrorEditor";