@types/codemirror/index.d.ts

TypeScript definitions for codemirror

export = CodeMirror;
export as namespace CodeMirror;

declare function CodeMirror(
    place: ParentNode | ((host: HTMLElement) => void),
    options?: CodeMirror.EditorConfiguration,
): CodeMirror.Editor;

declare namespace CodeMirror {
    const Doc: DocConstructor;
    const Pos: PositionConstructor;
    const Pass: { toString(): "CodeMirror.PASS" };

    /** Find the column position at a given string index using a given tabsize. */
    function countColumn(line: string, index: number | null, tabSize: number): number;
    function fromTextArea(host: HTMLTextAreaElement, options?: EditorConfiguration): EditorFromTextArea;

    /** Split a string by new line. */
    function splitLines(text: string): string[];

    /** Check if a char is part of an alphabet. */
    function isWordChar(ch: string): boolean;

    /** Call startState of the mode if available, otherwise return true */
    function startState<T>(mode: Mode<T>, a1?: any, a2?: any): T | boolean;

    /** Compare two positions, return 0 if they are the same, a negative number when a is less, and a positive number otherwise. */
    function cmpPos(a: Position, b: Position): number;

    /**
     * Utility function that computes an end position from a change (an object with from, to, and text properties, as passed to various event handlers).
     * The returned position will be the end of the changed range, after the change is applied.
     */
    function changeEnd(change: EditorChange): Position;

    /**
     * It contains a string that indicates the version of the library. This is a triple of integers "major.minor.patch",
     * where patch is zero for releases, and something else (usually one) for dev snapshots.
     */
    const version: string;

    /**
     * An object containing default values for all options.
     * You can assign to its properties to modify defaults (though this won't affect editors that have already been created).
     */
    const defaults: {
        [option: string]: any;
    };

    /**
     * If you want to define extra methods in terms of the CodeMirror API, it is possible to use defineExtension.
     * This will cause the given value(usually a method) to be added to all CodeMirror instances created from then on.
     */
    function defineExtension(name: string, value: any): void;

    /** Like defineExtension, but the method will be added to the interface for Doc objects instead. */
    function defineDocExtension(name: string, value: any): void;

    /**
     * Similarly, defineOption can be used to define new options for CodeMirror.
     * The updateFunc will be called with the editor instance and the new value when an editor is initialized,
     * and whenever the option is modified through setOption.
     */
    function defineOption(name: string, default_: any, updateFunc: (editor: Editor, val: any, old: any) => void): void;

    /**
     * If your extension just needs to run some code whenever a CodeMirror instance is initialized, use CodeMirror.defineInitHook.
     * Give it a function as its only argument, and from then on, that function will be called (with the instance as argument)
     * whenever a new CodeMirror instance is initialized.
     */
    function defineInitHook(func: (editor: Editor) => void): void;

    /**
     * Registers a helper value with the given name in the given namespace (type). This is used to define functionality
     * that may be looked up by mode. Will create (if it doesn't already exist) a property on the CodeMirror object for
     * the given type, pointing to an object that maps names to values. I.e. after doing
     * CodeMirror.registerHelper("hint", "foo", myFoo), the value CodeMirror.hint.foo will point to myFoo.
     */
    function registerHelper(namespace: string, name: string, helper: any): void;

    /** Given a state object, returns a {state, mode} object with the inner mode and its state for the current position. */
    function innerMode(mode: Mode<any>, state: any): { state: any; mode: Mode<any> };

    /**
     * Sometimes, it is useful to add or override mode object properties from external code.
     * The CodeMirror.extendMode function can be used to add properties to mode objects produced for a specific mode.
     * Its first argument is the name of the mode, its second an object that specifies the properties that should be added.
     * This is mostly useful to add utilities that can later be looked up through getMode.
     */
    function extendMode(name: string, properties: Partial<Mode<any>>): void;

    interface EditorEventMap {
        change: (instance: Editor, changeObj: EditorChange) => void;
        changes: (instance: Editor, changes: EditorChange[]) => void;
        beforeChange: (instance: Editor, changeObj: EditorChangeCancellable) => void;
        cursorActivity: (instance: Editor) => void;
        keyHandled: (instance: Editor, name: string, event: Event) => void;
        inputRead: (instance: Editor, changeObj: EditorChange) => void;
        electricInput: (instance: Editor, line: number) => void;
        beforeSelectionChange: (instance: Editor, obj: EditorSelectionChange) => void;
        viewportChange: (instance: Editor, from: number, to: number) => void;
        swapDoc: (instance: Editor, oldDoc: Doc) => void;
        gutterClick: (instance: Editor, line: number, gutter: string, clickEvent: Event) => void;
        gutterContextMenu: (instance: Editor, line: number, gutter: string, contextMenuEvent: MouseEvent) => void;
        focus: (instance: Editor, event: FocusEvent) => void;
        blur: (instance: Editor, event: FocusEvent) => void;
        scroll: (instance: Editor) => void;
        refresh: (instance: Editor) => void;
        optionChange: (instance: Editor, option: keyof EditorConfiguration) => void;
        scrollCursorIntoView: (instance: Editor, event: Event) => void;
        update: (instance: Editor) => void;
        renderLine: (instance: Editor, lineHandle: LineHandle, element: HTMLElement) => void;
        overwriteToggle: (instance: Editor, overwrite: boolean) => void;
    }

    interface DocEventMap {
        change: (instance: Doc, changeObj: EditorChange) => void;
        beforeChange: (instance: Doc, changeObj: EditorChangeCancellable) => void;
        cursorActivity: (instance: Doc) => void;
        beforeSelectionChange: (instance: Doc, obj: EditorSelectionChange) => void;
    }

    interface LineHandleEventMap {
        delete: () => void;
        change: (instance: LineHandle, changeObj: EditorChange) => void;
    }

    interface TextMarkerEventMap {
        beforeCursorEnter: () => void;
        clear: (from: Position, to: Position) => void;
        hide: () => void;
        unhide: () => void;
    }

    interface LineWidgetEventMap {
        redraw: () => void;
    }

    function on<T extends keyof DocEventMap>(doc: Doc, eventName: T, handler: DocEventMap[T]): void;
    function on<T extends keyof EditorEventMap>(cm: Editor, eventName: T, handler: EditorEventMap[T]): void;
    function on<T extends keyof LineHandleEventMap>(
        lineHandle: LineHandle,
        eventName: T,
        handler: LineHandleEventMap[T],
    ): void;
    function on<T extends keyof TextMarkerEventMap>(
        textMarker: TextMarker<unknown>,
        eventName: T,
        handler: TextMarkerEventMap[T],
    ): void;
    function on<T extends keyof LineWidgetEventMap>(
        LineWidget: LineWidget,
        eventName: T,
        handler: LineWidgetEventMap[T],
    ): void;
    function on(element: any, eventName: string, handler: () => void): void;

    function off<T extends keyof DocEventMap>(doc: Doc, eventName: T, handler: DocEventMap[T]): void;
    function off<T extends keyof EditorEventMap>(cm: Editor, eventName: T, handler: EditorEventMap[T]): void;
    function off<T extends keyof LineHandleEventMap>(
        lineHandle: LineHandle,
        eventName: T,
        handler: LineHandleEventMap[T],
    ): void;
    function off<T extends keyof TextMarkerEventMap>(
        textMarker: TextMarker<unknown>,
        eventName: T,
        handler: TextMarkerEventMap[T],
    ): void;
    function off<T extends keyof LineWidgetEventMap>(
        lineWidget: LineWidget,
        eventName: T,
        handler: LineWidgetEventMap[T],
    ): void;
    function off(element: any, eventName: string, handler: () => void): void;

    /**
     * Various CodeMirror-related objects emit events, which allow client code to react to various situations.
     * Handlers for such events can be registered with the on and off methods on the objects that the event fires on.
     * To fire your own events, use CodeMirror.signal(target, name, args...), where target is a non-DOM-node object.
     */
    function signal<T extends keyof DocEventMap>(doc: Doc, eventName: T, ...args: Parameters<DocEventMap[T]>): void;
    function signal<T extends keyof EditorEventMap>(
        cm: Editor,
        eventName: T,
        ...args: Parameters<EditorEventMap[T]>
    ): void;
    function signal<T extends keyof LineHandleEventMap>(
        lineHandle: LineHandle,
        eventName: T,
        ...args: Parameters<LineHandleEventMap[T]>
    ): void;
    function signal<T extends keyof TextMarkerEventMap>(
        textMarker: TextMarker<unknown>,
        eventName: T,
        ...args: Parameters<TextMarkerEventMap[T]>
    ): void;
    function signal<T extends keyof LineWidgetEventMap>(
        lineWidget: LineWidget,
        eventName: T,
        ...args: Parameters<LineWidgetEventMap[T]>
    ): void;
    function signal(target: any, name: string, ...args: any[]): void;

    /** Modify a keymap to normalize modifier order and properly recognize multi-stroke bindings. */
    function normalizeKeyMap(km: KeyMap): KeyMap;

    type DOMEvent =
        | "mousedown"
        | "dblclick"
        | "touchstart"
        | "contextmenu"
        | "keydown"
        | "keypress"
        | "keyup"
        | "cut"
        | "copy"
        | "paste"
        | "dragstart"
        | "dragenter"
        | "dragover"
        | "dragleave"
        | "drop";

    type CoordsMode = "window" | "page" | "local" | "div";

    interface Token {
        /** The character(on the given line) at which the token starts. */
        start: number;
        /** The character at which the token ends. */
        end: number;
        /** The token's string. */
        string: string;
        /** The token type the mode assigned to the token, such as "keyword" or "comment" (may also be null). */
        type: string | null;
        /** The mode's state at the end of this token. */
        state: any;
    }

    interface KeyMap {
        // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
        [keyName: string]: false | string | ((instance: Editor) => void | typeof Pass);
    }

    /**
     * Methods prefixed with doc. can, unless otherwise specified, be called both on CodeMirror (editor) instances and
     * CodeMirror.Doc instances. Thus, the Editor interface extends DocOrEditor defining the common API.
     */
    interface Editor extends DocOrEditor {
        /** Tells you whether the editor currently has focus. */
        hasFocus(): boolean;

        /**
         * Used to find the target position for horizontal cursor motion.start is a { line , ch } object,
         * an integer(may be negative), and unit one of the string "char", "column", or "word".
         * Will return a position that is produced by moving amount times the distance specified by unit.
         * When visually is true , motion in right - to - left text will be visual rather than logical.
         * When the motion was clipped by hitting the end or start of the document, the returned value will have a hitSide property set to true.
         */
        findPosH(
            start: Position,
            amount: number,
            unit: string,
            visually: boolean,
        ): { line: number; ch: number; hitSide?: boolean | undefined };

        /**
         * Similar to findPosH , but used for vertical motion.unit may be "line" or "page".
         * The other arguments and the returned value have the same interpretation as they have in findPosH.
         */
        findPosV(
            start: Position,
            amount: number,
            unit: string,
        ): { line: number; ch: number; hitSide?: boolean | undefined };

        /** Returns the start and end of the 'word' (the stretch of letters, whitespace, or punctuation) at the given position. */
        findWordAt(pos: Position): Range;

        /** Change the configuration of the editor. option should the name of an option, and value should be a valid value for that option. */
        setOption<K extends keyof EditorConfiguration>(option: K, value: EditorConfiguration[K]): void;

        /** Retrieves the current value of the given option for this editor instance. */
        getOption<K extends keyof EditorConfiguration>(option: K): EditorConfiguration[K];

        /**
         * Attach an additional keymap to the editor.
         * This is mostly useful for add - ons that need to register some key handlers without trampling on the extraKeys option.
         * Maps added in this way have a higher precedence than the extraKeys and keyMap options, and between them,
         * the maps added earlier have a lower precedence than those added later, unless the bottom argument was passed,
         * in which case they end up below other keymaps added with this method.
         */
        addKeyMap(map: string | KeyMap, bottom?: boolean): void;

        /**
         * Disable a keymap added with addKeyMap.Either pass in the keymap object itself , or a string,
         * which will be compared against the name property of the active keymaps.
         */
        removeKeyMap(map: string | KeyMap): void;

        /**
         * Enable a highlighting overlay.This is a stateless mini-mode that can be used to add extra highlighting.
         * For example, the search add - on uses it to highlight the term that's currently being searched.
         * mode can be a mode spec or a mode object (an object with a token method). The options parameter is optional. If given, it should be an object.
         * Currently, only the opaque option is recognized. This defaults to off, but can be given to allow the overlay styling, when not null,
         * to override the styling of the base mode entirely, instead of the two being applied together.
         */
        addOverlay(mode: any, options?: { opaque?: boolean | undefined; priority?: number | undefined }): void;

        /** Pass this the exact argument passed for the mode parameter to addOverlay to remove an overlay again. */
        removeOverlay(mode: any): void;

        /** Retrieve the currently active document from an editor. */
        getDoc(): Doc;

        /** Attach a new document to the editor. Returns the old document, which is now no longer associated with an editor. */
        swapDoc(doc: Doc): Doc;

        /** Get the content of the current editor document. You can pass it an optional argument to specify the string to be used to separate lines (defaults to "\n"). */
        getValue(seperator?: string): string;

        /** Set the content of the current editor document. */
        setValue(content: string): void;

        /**
         * start is a an optional string indicating which end of the selection to return.
         * It may be "from", "to", "head" (the side of the selection that moves when you press shift+arrow),
         * or "anchor" (the fixed side of the selection).Omitting the argument is the same as passing "head". A {line, ch} object will be returned.
         */
        getCursor(start?: string): Position;

        /**
         * Set the cursor position. You can either pass a single {line, ch} object, or the line and the character as two separate parameters.
         * Will replace all selections with a single, empty selection at the given position.
         * The supported options are the same as for setSelection
         */
        setCursor(
            pos: Position | number,
            ch?: number,
            options?: { bias?: number | undefined; origin?: string | undefined; scroll?: boolean | undefined },
        ): void;

        /**
         * Sets the gutter marker for the given gutter (identified by its CSS class, see the gutters option) to the given value.
         * Value can be either null, to clear the marker, or a DOM element, to set it. The DOM element will be shown in the specified gutter next to the specified line.
         */
        setGutterMarker(line: any, gutterID: string, value: HTMLElement | null): LineHandle;

        /** Remove all gutter markers in the gutter with the given ID. */
        clearGutter(gutterID: string): void;

        /**
         * Set a CSS class name for the given line.line can be a number or a line handle.
         * where determines to which element this class should be applied, can can be one of "text" (the text element, which lies in front of the selection),
         * "background"(a background element that will be behind the selection),
         * or "wrap" (the wrapper node that wraps all of the line's elements, including gutter elements).
         * class should be the name of the class to apply.
         */
        addLineClass(line: any, where: string, _class_: string): LineHandle;

        /**
         * Remove a CSS class from a line.line can be a line handle or number.
         * where should be one of "text", "background", or "wrap"(see addLineClass).
         * class can be left off to remove all classes for the specified node, or be a string to remove only a specific class.
         */
        removeLineClass(line: any, where: string, class_?: string): LineHandle;

        /**
         * Compute the line at the given pixel height. mode is the relative element
         * to use to compute this line, it may be "window", "page" (the default), or "local"
         */
        lineAtHeight(height: number, mode?: CoordsMode): number;

        /**
         * Computes the height of the top of a line, in the coordinate system specified by mode, it may be "window",
         * "page" (the default), or "local". When a line below the bottom of the document is specified, the returned value
         * is the bottom of the last line in the document. By default, the position of the actual text is returned.
         * If includeWidgets is true and the line has line widgets, the position above the first line widget is returned.
         */
        heightAtLine(line: any, mode?: CoordsMode, includeWidgets?: boolean): number;

        /** Returns the line number, text content, and marker status of the given line, which can be either a number or a line handle. */
        lineInfo(
            line: any,
        ): {
            line: any;
            handle: any;
            text: string;
            /** Object mapping gutter IDs to marker elements. */
            gutterMarkers: any;
            textClass: string;
            bgClass: string;
            wrapClass: string;
            /** Array of line widgets attached to this line. */
            widgets: any;
        };

        /**
         * Puts node, which should be an absolutely positioned DOM node, into the editor, positioned right below the given { line , ch } position.
         * When scrollIntoView is true, the editor will ensure that the entire node is visible (if possible).
         * To remove the widget again, simply use DOM methods (move it somewhere else, or call removeChild on its parent).
         */
        addWidget(pos: Position, node: HTMLElement, scrollIntoView: boolean): void;

        /**
         * Adds a line widget, an element shown below a line, spanning the whole of the editor's width, and moving the lines below it downwards.
         * line should be either an integer or a line handle, and node should be a DOM node, which will be displayed below the given line.
         * options, when given, should be an object that configures the behavior of the widget.
         * Note that the widget node will become a descendant of nodes with CodeMirror-specific CSS classes, and those classes might in some cases affect it.
         */
        addLineWidget(line: any, node: HTMLElement, options?: LineWidgetOptions): LineWidget;

        /**
         * Programatically set the size of the editor (overriding the applicable CSS rules).
         * width and height height can be either numbers(interpreted as pixels) or CSS units ("100%", for example).
         * You can pass null for either of them to indicate that that dimension should not be changed.
         */
        setSize(width: any, height: any): void;

        /** Scroll the editor to a given(pixel) position.Both arguments may be left as null or undefined to have no effect. */
        scrollTo(x?: number | null, y?: number | null): void;

        /**
         * Get an { left , top , width , height , clientWidth , clientHeight } object that represents the current scroll position, the size of the scrollable area,
         * and the size of the visible area(minus scrollbars).
         */
        getScrollInfo(): ScrollInfo;

        /**
         * Scrolls the given element into view.
         * pos can be:
         * - a { line , ch } position, referring to a given character
         * - null, to refer to the cursor
         * - a { left , top , right , bottom } object, in editor-local coordinates
         * - a { from, to } object, in editor-local coordinates
         * The margin parameter is optional. When given, it indicates the amount of pixels around the given area that should be made visible as well.
         */
        scrollIntoView(
            pos: Position | null | { line: number; ch: number } | {
                left: number;
                top: number;
                right: number;
                bottom: number;
            } | { from: Position; to: Position },
            margin?: number,
        ): void;

        /**
         * Returns an { left , top , bottom } object containing the coordinates of the cursor position.
         * If mode is "local", they will be relative to the top-left corner of the editable document.
         * If it is "page" or not given, they are relative to the top-left corner of the page.
         * where specifies the position at which you want to measure. A boolean indicates either the start(true) or the end(false) of the selection.
         */
        cursorCoords(
            where?: boolean | Position | null,
            mode?: CoordsMode,
        ): { left: number; top: number; bottom: number };

        /**
         * Returns the position and dimensions of an arbitrary character. pos should be a { line , ch } object.
         * If mode is "local", they will be relative to the top-left corner of the editable document.
         * If it is "page" or not given, they are relative to the top-left corner of the page.
         * This differs from cursorCoords in that it'll give the size of the whole character,
         * rather than just the position that the cursor would have when it would sit at that position.
         */
        charCoords(
            pos: Position,
            mode?: CoordsMode,
        ): { left: number; right: number; top: number; bottom: number };

        /**
         * Given an { left , top } object , returns the { line , ch } position that corresponds to it.
         * The optional mode parameter determines relative to what the coordinates are interpreted.
         * It may be "window", "page" (the default), or "local".
         */
        coordsChar(object: { left: number; top: number }, mode?: CoordsMode): Position;

        /** Returns the line height of the default font for the editor. */
        defaultTextHeight(): number;

        /**
         * Returns the pixel width of an 'x' in the default font for the editor.
         * (Note that for non-monospace fonts, this is mostly useless, and even for monospace fonts, non-ascii characters might have a different width).
         */
        defaultCharWidth(): number;

        /**
         * Returns a { from , to } object indicating the start (inclusive) and end (exclusive) of the currently rendered part of the document.
         * In big documents, when most content is scrolled out of view, CodeMirror will only render the visible part, and a margin around it.
         * See also the viewportChange event.
         */
        getViewport(): { from: number; to: number };

        /**
         * If your code does something to change the size of the editor element (window resizes are already listened for), or unhides it,
         * you should probably follow up by calling this method to ensure CodeMirror is still looking as intended.
         */
        refresh(): void;

        /** Gets the inner mode at a given position. This will return the same as getMode for simple modes, but will return an inner mode for nesting modes (such as htmlmixed). */
        getModeAt(pos: Position): Mode<unknown>;

        /** Retrieves information about the token the current mode found before the given position (a {line, ch} object). */
        getTokenAt(pos: Position, precise?: boolean): Token;

        /**
         * This is a (much) cheaper version of getTokenAt useful for when you just need the type of the token at a given position,
         * and no other information. Will return null for unstyled tokens, and a string, potentially containing multiple
         * space-separated style names, otherwise.
         */
        getTokenTypeAt(pos: Position): string;

        /** This is similar to getTokenAt, but collects all tokens for a given line into an array. */
        getLineTokens(line: number, precise?: boolean): Token[];

        /**
         * Returns the mode's parser state, if any, at the end of the given line number.
         * If no line number is given, the state at the end of the document is returned.
         * This can be useful for storing parsing errors in the state, or getting other kinds of contextual information for a line.
         */
        getStateAfter(line?: number): any;

        /**
         * CodeMirror internally buffers changes and only updates its DOM structure after it has finished performing some operation.
         * If you need to perform a lot of operations on a CodeMirror instance, you can call this method with a function argument.
         * It will call the function, buffering up all changes, and only doing the expensive update after the function returns.
         * This can be a lot faster. The return value from this method will be the return value of your function.
         */
        operation<T>(fn: () => T): T;

        /**
         * In normal circumstances, use the above operation method. But if you want to buffer operations happening asynchronously, or that can't all be wrapped in a callback
         * function, you can call startOperation to tell CodeMirror to start buffering changes, and endOperation to actually render all the updates. Be careful: if you use this
         * API and forget to call endOperation, the editor will just never update.
         */
        startOperation(): void;
        endOperation(): void;

        /**
         * Adjust the indentation of the given line.
         * The second argument (which defaults to "smart") may be one of:
         * "prev" Base indentation on the indentation of the previous line.
         * "smart" Use the mode's smart indentation if available, behave like "prev" otherwise.
         * "add" Increase the indentation of the line by one indent unit.
         * "subtract" Reduce the indentation of the line.
         */
        indentLine(line: number, dir?: string): void;

        /** Indent a selection */
        indentSelection(how: string): void;

        /** Tells you whether the editor's content can be edited by the user. */
        isReadOnly(): boolean;

        /**
         * Switches between overwrite and normal insert mode (when not given an argument),
         * or sets the overwrite mode to a specific state (when given an argument).
         */
        toggleOverwrite(value?: boolean): void;

        /** Runs the command with the given name on the editor. */
        execCommand(name: string): void;

        /** Give the editor focus. */
        focus(): void;

        /**
         * Allow the given string to be translated with the phrases option.
         */
        phrase(text: string): unknown;

        /** Returns the hidden textarea used to read input. */
        getInputField(): HTMLTextAreaElement;

        /** Returns the DOM node that represents the editor, and controls its size. Remove this from your tree to delete an editor instance. */
        getWrapperElement(): HTMLElement;

        /** Returns the DOM node that is responsible for the scrolling of the editor. */
        getScrollerElement(): HTMLElement;

        /** Fetches the DOM node that contains the editor gutters. */
        getGutterElement(): HTMLElement;

        on<T extends keyof EditorEventMap>(eventName: T, handler: EditorEventMap[T]): void;
        on<K extends DOMEvent & keyof GlobalEventHandlersEventMap>(
            eventName: K,
            handler: (instance: Editor, event: GlobalEventHandlersEventMap[K]) => void,
        ): void;

        off<T extends keyof EditorEventMap>(eventName: T, handler: EditorEventMap[T]): void;
        off<K extends DOMEvent & keyof GlobalEventHandlersEventMap>(
            eventName: K,
            handler: (instance: Editor, event: GlobalEventHandlersEventMap[K]) => void,
        ): void;

        /** Expose the state object, so that the Editor.state.completionActive property is reachable */
        state: any;
    }

    interface EditorFromTextArea extends Editor {
        /** Copy the content of the editor into the textarea. */
        save(): void;

        /** Remove the editor, and restore the original textarea (with the editor's current content). */
        toTextArea(): void;

        /** Returns the textarea that the instance was based on. */
        getTextArea(): HTMLTextAreaElement;
    }

    interface ModeSpecOptions {
        /** Below options are supported in CSS mode */

        /** Whether to highlight non-standard CSS property keywords such as margin-inline or zoom (default: true). */
        highlightNonStandardPropertyKeywords?: boolean | undefined;

        /** Below options are supported in Cython/Python modes */

        /**  The version of Python to recognize. Default is 3. */
        version?: 2 | 3 | undefined;
        /**
         * If you have a single-line string that is not terminated at the end of the line, this will show subsequent
         * lines as errors if true, otherwise it will consider the newline as the end of the string. Default is false.
         */
        singleLineStringErrors?: boolean | undefined;
        /**
         * If you want to write long arguments to a function starting on a new line, how much that line should be
         * indented. Defaults to one normal indentation unit.
         */
        hangingIndent?: number | undefined;
        /** Regular Expression for single operator matching */
        singleOperators?: unknown | undefined;
        /**  Regular Expression for single delimiter matching default :^[\\(\\)\\[\\]\\{\\}@,:`=;\\.] */
        singleDelimiters?: unknown | undefined;
        /** Regular Expression for double operators matching, default :^((==)|(!=)|(<=)|(>=)|(<>)|(<<)|(>>)|(//)|(\\*\\*)) */
        doubleOperators?: unknown | undefined;
        /** Regular Expression for double delimiters matching default :^((\\+=)|(\\-=)|(\\*=)|(%=)|(/=)|(&=)|(\\|=)|(\\^=)) */
        doubleDelimiters?: unknown | undefined;
        /** Regular Expression for triple delimiters matching default :^((//=)|(>>=)|(<<=)|(\\*\\*=)) */
        tripleDelimiters?: unknown | undefined;
        /** RegEx - Regular Expression for identifier, default :^[_A-Za-z][_A-Za-z0-9]* */
        identifiers?: unknown | undefined;
        /** List of extra words ton consider as keywords */
        extra_keywords?: string[] | undefined;
        /** List of extra words ton consider as builtins */
        extra_builtins?: string[] | undefined;

        /** useCPP, which determines whether C preprocessor directives are recognized. */
        useCPP?: boolean | undefined;

        /** Below options are supported in Handlebars/Haskell/YAML front matter  mode */
        base?: string | undefined;

        /** Below options are supported in HTML mixed  mode */
        tags?: { [key: string]: unknown } | undefined;

        /** Below options are supported in JavaScript mixed  mode */

        /** json which will set the mode to expect JSON data rather than a JavaScript program. */
        json?: boolean | undefined;
        /** jsonld which will set the mode to expect JSON-LD linked data rather than a JavaScript program */
        jsonld?: boolean | undefined;
        /** typescript which will activate additional syntax highlighting and some other things for TypeScript code */
        typescript?: boolean | undefined;
        /**
         * trackScope can be set to false to turn off tracking of local variables. This will prevent locals from getting
         * the "variable-2" token type, and will break completion of locals with javascript-hint.
         */
        trackScope?: boolean | undefined;
        /**
         * statementIndent which (given a number) will determine the amount of indentation to use for statements
         * continued on a new line.
         */
        statementIndent?: boolean | undefined;
        /**
         * wordCharacters, a regexp that indicates which characters should be considered part of an identifier.
         *  Defaults to /[\w$]/, which does not handle non-ASCII identifiers. Can be set to something more elaborate to
         *  improve Unicode support.
         */
        wordCharacters?: unknown | undefined;

        /** Below options are supported in Markdown mixed  mode */

        /** Whether to separately highlight markdown meta characters (*[]()etc.) (default: false). */
        highlightFormatting?: boolean | undefined;
        /** Maximum allowed blockquote nesting (default: 0 - infinite nesting). */
        maxBlockquoteDepth?: boolean | undefined;
        /** Whether to highlight inline XML (default: true). */
        xml?: boolean | undefined;
        /**
         * Whether to syntax-highlight fenced code blocks, if given mode is included, or fencedCodeBlockDefaultMode
         * is set (default: true).
         */
        fencedCodeBlockHighlighting?: boolean | undefined;
        /** Mode to use for fencedCodeBlockHighlighting, if given mode is not included. */
        fencedCodeBlockDefaultMode?: string | undefined;
        /** When you want to override default token type names (e.g. {code: "code"}). */
        tokenTypeOverrides?: unknown | undefined;
        /** Allow lazy headers without whitespace between hashtag and text (default: false). */
        allowAtxHeaderWithoutSpace?: boolean | undefined;

        /** Below options are supported in GFM mode mode */
        gitHubSpice?: boolean | undefined;
        taskLists?: boolean | undefined;
        strikethrough?: boolean | undefined;
        emoji?: boolean | undefined;

        /** Below options are supported in Smarty mode */

        /** leftDelimiter and rightDelimiter, which should be strings that determine where the Smarty syntax starts and ends. */
        leftDelimiter?: string | undefined;
        rightDelimiter?: string | undefined;
        baseMode?: string | undefined;

        /** Below options are supported in sTeX mode */

        /** Whether to start parsing in math mode (default: false) */
        inMathMode?: boolean | undefined;

        /** Below options are supported in SystemVerilog mode */

        /** List of keywords which should not cause indentation to increase. */
        noIndentKeywords?: unknown | undefined;

        /** Below options are supported in VHDL mode */

        /** List of atom words. Default: "null" */
        atoms?: unknown | undefined;
        /** List of meta hooks. Default: ["`", "$"] */
        hooks?: unknown | undefined;
        /** Whether multi-line strings are accepted. Default: false */
        multiLineStrings?: boolean | undefined;

        /** Below options are supported in XML mode */

        /**
         * This switches the mode to parse HTML instead of XML. This means attributes do not have to be quoted,
         * and some elements (such as br) do not require a closing tag.
         */
        htmlMode?: boolean | undefined;
        /**
         * Controls whether the mode checks that close tags match the corresponding opening tag,
         * and highlights mismatches as errors. Defaults to true.
         */
        matchClosing?: boolean | undefined;
        /** Setting this to true will force the opening tag of CDATA blocks to not be indented. */
        alignCDATA?: boolean | undefined;
    }

    type ModeSpec<T> =
        & {
            [P in keyof T]: T[P];
        }
        & { name: string };

    interface SelectionOptions {
        /**
         * Determines whether the selection head should be scrolled into view. Defaults to true.
         */
        scroll?: boolean | undefined;

        /**
         * Determines whether the selection history event may be merged with the previous one.
         * When an origin starts with the character +, and the last recorded selection had the same origin
         * and was similar (close in time, both collapsed or both non-collapsed), the new one will replace
         * the old one. When it starts with *, it will always replace the previous event (if that had the same
         * origin). Built-in motion uses the "+move" origin. User input uses the "+input" origin.
         */
        origin?: string | undefined;

        /**
         * Determine the direction into which the selection endpoints should be adjusted when they fall inside
         * an atomic range. Can be either -1 (backward) or 1 (forward). When not given, the bias will be based
         * on the relative position of the old selection—the editor will try to move further away from that,
         * to prevent getting stuck.
         */
        bias?: number | undefined;
    }

    interface DocConstructor {
        new(text: string, mode?: string | ModeSpec<ModeSpecOptions>, firstLineNumber?: number, lineSep?: string): Doc;
        (text: string, mode?: string | ModeSpec<ModeSpecOptions>, firstLineNumber?: number, lineSep?: string): Doc;
    }

    interface DocOrEditor {
        /** Get the mode option */
        modeOption: string | ModeSpec<ModeSpecOptions>;

        /** Get the current editor content. You can pass it an optional argument to specify the string to be used to separate lines (defaults to "\n"). */
        getValue(seperator?: string): string;

        /** Set the editor content. */
        setValue(content: string): void;

        /**
         * Get the text between the given points in the editor, which should be {line, ch} objects.
         * An optional third argument can be given to indicate the line separator string to use (defaults to "\n").
         */
        getRange(from: Position, to: Position, seperator?: string): string;

        /**
         * Replace the part of the document between from and to with the given string.
         * from and to must be {line, ch} objects. to can be left off to simply insert the string at position from.
         */
        replaceRange(
            replacement: string | string[],
            from: Position,
            to?: Position,
            origin?: string,
        ): void;

        /** Get the content of line n. */
        getLine(n: number): string;

        /** Set the content of line n. */
        setLine(n: number, text: string): void;

        /** Remove the given line from the document. */
        removeLine(n: number): void;

        /** Get the number of lines in the editor. */
        lineCount(): number;

        /**
         * Get the first line of the editor. This will usually be zero but for linked sub-views,
         * or documents instantiated with a non-zero first line, it might return other values.
         */
        firstLine(): number;

        /** Get the last line of the editor. This will usually be lineCount() - 1, but for linked sub-views, it might return other values. */
        lastLine(): number;

        /** Fetches the line handle for the given line number. */
        getLineHandle(num: number): LineHandle;

        /** Given a line handle, returns the current position of that line (or null when it is no longer in the document). */
        getLineNumber(handle: LineHandle): number | null;

        /**
         * Iterate over the whole document, and call f for each line, passing the line handle.
         * This is a faster way to visit a range of line handlers than calling getLineHandle for each of them.
         * Note that line handles have a text property containing the line's content (as a string).
         */
        eachLine(f: (line: LineHandle) => void): void;

        /**
         * Iterate over the range from start up to (not including) end, and call f for each line, passing the line handle.
         * This is a faster way to visit a range of line handlers than calling getLineHandle for each of them.
         * Note that line handles have a text property containing the line's content (as a string).
         */
        eachLine(start: number, end: number, f: (line: LineHandle) => void): void;

        /**
         * Set the editor content as 'clean', a flag that it will retain until it is edited, and which will be set again
         * when such an edit is undone again. Useful to track whether the content needs to be saved. This function is deprecated
         * in favor of changeGeneration, which allows multiple subsystems to track different notions of cleanness without interfering.
         */
        markClean(): void;

        /**
         * Returns a number that can later be passed to isClean to test whether any edits were made (and not undone) in the
         * meantime. If closeEvent is true, the current history event will be ‘closed’, meaning it can't be combined with further
         * changes (rapid typing or deleting events are typically combined).
         */
        changeGeneration(closeEvent?: boolean): number;

        /**
         * Returns whether the document is currently clean — not modified since initialization or the last call to markClean if
         * no argument is passed, or since the matching call to changeGeneration if a generation value is given.
         */
        isClean(generation?: number): boolean;

        /** Get the currently selected code. */
        getSelection(): string;

        /** Returns an array containing a string for each selection, representing the content of the selections. */
        getSelections(lineSep?: string): string[];

        /**
         * Replace the selection with the given string. By default, the new selection will span the inserted text.
         * The optional collapse argument can be used to change this -- passing "start" or "end" will collapse the selection to the start or end of the inserted text.
         */
        replaceSelection(replacement: string, collapse?: string): void;

        /**
         * Replaces the content of the selections with the strings in the array.
         * The length of the given array should be the same as the number of active selections.
         * The collapse argument works the same as in replaceSelection.
         */
        replaceSelections(replacements: string[], collapse?: string): void;

        /**
         * start is a an optional string indicating which end of the selection to return.
         * It may be "from", "to", "head" (the side of the selection that moves when you press shift+arrow),
         * or "anchor" (the fixed side of the selection).Omitting the argument is the same as passing "head". A {line, ch} object will be returned.
         */
        getCursor(start?: string): Position;

        /**
         * Retrieves a list of all current selections. These will always be sorted, and never overlap (overlapping selections are merged).
         * Each object in the array contains anchor and head properties referring to {line, ch} objects.
         */
        listSelections(): Range[];

        /** Return true if any text is selected. */
        somethingSelected(): boolean;

        /**
         * Set the cursor position. You can either pass a single {line, ch} object, or the line and the character as two separate parameters.
         * Will replace all selections with a single, empty selection at the given position.
         * The supported options are the same as for setSelection
         */
        setCursor(
            pos: Position | number,
            ch?: number,
            options?: { bias?: number | undefined; origin?: string | undefined; scroll?: boolean | undefined },
        ): void;

        /** Set a single selection range. anchor and head should be {line, ch} objects. head defaults to anchor when not given. */
        setSelection(
            anchor: Position,
            head?: Position,
            options?: { bias?: number | undefined; origin?: string | undefined; scroll?: boolean | undefined },
        ): void;

        /**
         * Sets a new set of selections. There must be at least one selection in the given array. When primary is a
         * number, it determines which selection is the primary one. When it is not given, the primary index is taken from
         * the previous selection, or set to the last range if the previous selection had less ranges than the new one.
         * Supports the same options as setSelection.
         */
        setSelections(
            ranges: Array<{ anchor: Position; head: Position }>,
            primary?: number,
            options?: SelectionOptions,
        ): void;

        /**
         * Adds a new selection to the existing set of selections, and makes it the primary selection.
         */
        addSelection(anchor: Position, head?: Position): void;

        /**
         * Similar to setSelection, but will, if shift is held or the extending flag is set,
         * move the head of the selection while leaving the anchor at its current place.
         * to is optional, and can be passed to ensure a region (for example a word or paragraph) will end up selected
         * (in addition to whatever lies between that region and the current anchor). When multiple selections
         * are present, all but the primary selection will be dropped by this method. Supports the same options
         * as setSelection.
         */
        extendSelection(from: Position, to?: Position, options?: SelectionOptions): void;

        /**
         * An equivalent of extendSelection that acts on all selections at once.
         */
        extendSelections(heads: Position[], options?: SelectionOptions): void;

        /**
         * Applies the given function to all existing selections, and calls extendSelections on the result.
         */
        extendSelectionsBy(f: (range: Range) => Position): void;

        /**
         * Sets or clears the 'extending' flag , which acts similar to the shift key,
         * in that it will cause cursor movement and calls to extendSelection to leave the selection anchor in place.
         */
        setExtending(value: boolean): void;

        /**
         * Get the value of the 'extending' flag.
         */
        getExtending(): boolean;

        /** Create a new document that's linked to the target document. Linked documents will stay in sync (changes to one are also applied to the other) until unlinked. */
        linkedDoc(options: {
            /**
             * When turned on, the linked copy will share an undo history with the original.
             * Thus, something done in one of the two can be undone in the other, and vice versa.
             */
            sharedHist?: boolean | undefined;
            from?: number | undefined;
            /**
             * Can be given to make the new document a subview of the original. Subviews only show a given range of lines.
             * Note that line coordinates inside the subview will be consistent with those of the parent,
             * so that for example a subview starting at line 10 will refer to its first line as line 10, not 0.
             */
            to?: number | undefined;
            /** By default, the new document inherits the mode of the parent. This option can be set to a mode spec to give it a different mode. */
            mode?: string | ModeSpec<ModeSpecOptions> | undefined;
        }): Doc;

        /**
         * Break the link between two documents. After calling this , changes will no longer propagate between the documents,
         * and, if they had a shared history, the history will become separate.
         */
        unlinkDoc(doc: Doc): void;

        /**
         * Will call the given function for all documents linked to the target document. It will be passed two arguments,
         * the linked document and a boolean indicating whether that document shares history with the target.
         */
        iterLinkedDocs(fn: (doc: Doc, sharedHist: boolean) => void): void;

        /** Undo one edit (if any undo events are stored). */
        undo(): void;

        /** Redo one undone edit. */
        redo(): void;

        /**
         * Undo one edit or selection change.
         */
        undoSelection(): void;

        /**
         * Redo one undone edit or selection change.
         */
        redoSelection(): void;

        /** Returns an object with {undo, redo } properties , both of which hold integers , indicatin