import { BracketMatcher } from './extensions/matchBrackets/index.js'; import { TagMatcher } from './extensions/matchTags.js'; import { Cursor } from './extensions/cursor/index.js'; import { SearchWidget } from './extensions/search/widget.js'; import { ReadOnlyCodeFolding } from './extensions/folding/index.js'; import { TokenStream } from './prism/types.js'; import { EditHistory } from './extensions/commands.js'; import { AutoComplete } from './extensions/autocomplete/types.js'; export type EditorOptions = { /** * Language used for syntax highlighting. If the language doesn't have a registered * Prism grammar, syntax highlighting will be disabled. @default "text" */ language: string; /** Tabsize for the editor. @default 2 */ tabSize?: number | undefined; /** Whether the editor should insert spaces for indentation. @default true */ insertSpaces?: boolean | undefined; /** Whether line numbers should be shown. @default true */ lineNumbers?: boolean | undefined; /** Whether the editor should be read only. @default false */ readOnly?: boolean | undefined; /** Whether the editor should have word wrap. @default false */ wordWrap?: boolean | undefined; /** Code to display in the editor. */ value: string; /** * Whether the editor uses right to left directionality. Requires styles from * `prism-code-editor/rtl-layout.css` to work unless the setups are used. * @default false */ rtl?: boolean; /** * Additional classes for the root container. Useful to style individual editors. * The `.prism-code-editor` selector can be used to style all editors. */ class?: string; /** Function called when the code of the editor changes. */ onUpdate?(value: string, editor: PrismEditor): void; /** Function called when the selection changes in the editor. */ onSelectionChange?(selection: InputSelection, value: string, editor: PrismEditor): void; /** Function called before the tokens are stringified to HTML. */ onTokenize?(tokens: TokenStream, language: string, value: string, editor: PrismEditor): void; }; export type CommentTokens = { line?: string; block?: [string, string]; }; export type Language = { /** Comment tokens used by the language. */ comments?: CommentTokens; /** * Method called when a user executes a comment toggling command. * @param editor The editor the user is interacting with. * @param position Where in the code the comment is being toggled. * @param value Current code in the editor. * @returns The comment tokens that should be used for this command. */ getComments?(editor: PrismEditor, position: number, value: string): CommentTokens; /** * Callbacks controlling the automatic indentation on new lines. * First function should return whether indentation should be increased. * Second function should return whether to add an extra line after the cursor. */ autoIndent?: [ ((selection: InputSelection, value: string, editor: PrismEditor) => boolean)?, ((selection: InputSelection, value: string, editor: PrismEditor) => boolean)? ]; /** * Function called when the user types `>`. Intended to auto close tags. * @returns string which will get inserted behind the cursor. */ autoCloseTags?(selection: InputSelection, value: string, editor: PrismEditor): string | undefined; }; /** * Function called when a certain key is pressed. * If true is returned, `e.preventDefault()` and `e.stopImmediatePropagation()` is called automatically. */ export type KeyCommandCallback = (e: KeyboardEvent, selection: InputSelection, value: string) => void | boolean; /** * Function called when a certain input is typed. * If true is returned, `e.preventDefault()` and `e.stopImmediatePropagation()` is called automatically. */ export type InputCommandCallback = (e: InputEvent, selection: InputSelection, value: string) => void | boolean; export type InputSelection = [number, number, "forward" | "backward" | "none"]; export interface Extension { /** Function called when the extension is added or the options of the editor change. */ update(editor: PrismEditor, options: EditorOptions & Omit): any; } export interface BasicExtension { (editor: PrismEditor, options: EditorOptions & T): any; } export type EditorExtension = Extension | BasicExtension; export type EditorEventMap = { update(this: PrismEditor, value: string): any; selectionChange(this: PrismEditor, selection: InputSelection, value: string): any; tokenize(this: PrismEditor, tokens: TokenStream, language: string, value: string): any; }; export interface PrismEditor { /** This is the outermost element of the editor. */ readonly container: HTMLDivElement; /** Element wrapping the lines and overlays. */ readonly wrapper: HTMLDivElement; /** * Collection containing the overlays as the first element. The rest of the elements * are the code lines. This means the index of a line is the same as its line number. */ readonly lines: HTMLCollectionOf; /** Underlying `