| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459 |
- import * as _codemirror_state from '@codemirror/state';
- import { EditorState, TransactionSpec, Transaction, StateCommand, Facet, Extension, StateEffect } from '@codemirror/state';
- import { EditorView, KeyBinding, Command } from '@codemirror/view';
- import * as _lezer_common from '@lezer/common';
- interface CompletionConfig {
- /**
- When enabled (defaults to true), autocompletion will start
- whenever the user types something that can be completed.
- */
- activateOnTyping?: boolean;
- /**
- Override the completion sources used. By default, they will be
- taken from the `"autocomplete"` [language
- data](https://codemirror.net/6/docs/ref/#state.EditorState.languageDataAt) (which should hold
- [completion sources](https://codemirror.net/6/docs/ref/#autocomplete.CompletionSource) or arrays
- of [completions](https://codemirror.net/6/docs/ref/#autocomplete.Completion)).
- */
- override?: readonly CompletionSource[] | null;
- /**
- Determines whether the completion tooltip is closed when the
- editor loses focus. Defaults to true.
- */
- closeOnBlur?: boolean;
- /**
- The maximum number of options to render to the DOM.
- */
- maxRenderedOptions?: number;
- /**
- Set this to false to disable the [default completion
- keymap](https://codemirror.net/6/docs/ref/#autocomplete.completionKeymap). (This requires you to
- add bindings to control completion yourself. The bindings should
- probably have a higher precedence than other bindings for the
- same keys.)
- */
- defaultKeymap?: boolean;
- /**
- By default, completions are shown below the cursor when there is
- space. Setting this to true will make the extension put the
- completions above the cursor when possible.
- */
- aboveCursor?: boolean;
- /**
- This can be used to add additional CSS classes to completion
- options.
- */
- optionClass?: (completion: Completion) => string;
- /**
- By default, the library will render icons based on the
- completion's [type](https://codemirror.net/6/docs/ref/#autocomplete.Completion.type) in front of
- each option. Set this to false to turn that off.
- */
- icons?: boolean;
- /**
- This option can be used to inject additional content into
- options. The `render` function will be called for each visible
- completion, and should produce a DOM node to show. `position`
- determines where in the DOM the result appears, relative to
- other added widgets and the standard content. The default icons
- have position 20, the label position 50, and the detail position 70.
- */
- addToOptions?: {
- render: (completion: Completion, state: EditorState) => Node | null;
- position: number;
- }[];
- }
- /**
- Objects type used to represent individual completions.
- */
- interface Completion {
- /**
- The label to show in the completion picker. This is what input
- is matched agains to determine whether a completion matches (and
- how well it matches).
- */
- label: string;
- /**
- An optional short piece of information to show (with a different
- style) after the label.
- */
- detail?: string;
- /**
- Additional info to show when the completion is selected. Can be
- a plain string or a function that'll render the DOM structure to
- show when invoked.
- */
- info?: string | ((completion: Completion) => (Node | null | Promise<Node | null>));
- /**
- How to apply the completion. The default is to replace it with
- its [label](https://codemirror.net/6/docs/ref/#autocomplete.Completion.label). When this holds a
- string, the completion range is replaced by that string. When it
- is a function, that function is called to perform the
- completion. If it fires a transaction, it is responsible for
- adding the [`pickedCompletion`](https://codemirror.net/6/docs/ref/#autocomplete.pickedCompletion)
- annotation to it.
- */
- apply?: string | ((view: EditorView, completion: Completion, from: number, to: number) => void);
- /**
- The type of the completion. This is used to pick an icon to show
- for the completion. Icons are styled with a CSS class created by
- appending the type name to `"cm-completionIcon-"`. You can
- define or restyle icons by defining these selectors. The base
- library defines simple icons for `class`, `constant`, `enum`,
- `function`, `interface`, `keyword`, `method`, `namespace`,
- `property`, `text`, `type`, and `variable`.
-
- Multiple types can be provided by separating them with spaces.
- */
- type?: string;
- /**
- When given, should be a number from -99 to 99 that adjusts how
- this completion is ranked compared to other completions that
- match the input as well as this one. A negative number moves it
- down the list, a positive number moves it up.
- */
- boost?: number;
- }
- /**
- An instance of this is passed to completion source functions.
- */
- declare class CompletionContext {
- /**
- The editor state that the completion happens in.
- */
- readonly state: EditorState;
- /**
- The position at which the completion is happening.
- */
- readonly pos: number;
- /**
- Indicates whether completion was activated explicitly, or
- implicitly by typing. The usual way to respond to this is to
- only return completions when either there is part of a
- completable entity before the cursor, or `explicit` is true.
- */
- readonly explicit: boolean;
- /**
- Create a new completion context. (Mostly useful for testing
- completion sources—in the editor, the extension will create
- these for you.)
- */
- constructor(
- /**
- The editor state that the completion happens in.
- */
- state: EditorState,
- /**
- The position at which the completion is happening.
- */
- pos: number,
- /**
- Indicates whether completion was activated explicitly, or
- implicitly by typing. The usual way to respond to this is to
- only return completions when either there is part of a
- completable entity before the cursor, or `explicit` is true.
- */
- explicit: boolean);
- /**
- Get the extent, content, and (if there is a token) type of the
- token before `this.pos`.
- */
- tokenBefore(types: readonly string[]): {
- from: number;
- to: number;
- text: string;
- type: _lezer_common.NodeType;
- } | null;
- /**
- Get the match of the given expression directly before the
- cursor.
- */
- matchBefore(expr: RegExp): {
- from: number;
- to: number;
- text: string;
- } | null;
- /**
- Yields true when the query has been aborted. Can be useful in
- asynchronous queries to avoid doing work that will be ignored.
- */
- get aborted(): boolean;
- /**
- Allows you to register abort handlers, which will be called when
- the query is
- [aborted](https://codemirror.net/6/docs/ref/#autocomplete.CompletionContext.aborted).
- */
- addEventListener(type: "abort", listener: () => void): void;
- }
- /**
- Given a a fixed array of options, return an autocompleter that
- completes them.
- */
- declare function completeFromList(list: readonly (string | Completion)[]): CompletionSource;
- /**
- Wrap the given completion source so that it will only fire when the
- cursor is in a syntax node with one of the given names.
- */
- declare function ifIn(nodes: readonly string[], source: CompletionSource): CompletionSource;
- /**
- Wrap the given completion source so that it will not fire when the
- cursor is in a syntax node with one of the given names.
- */
- declare function ifNotIn(nodes: readonly string[], source: CompletionSource): CompletionSource;
- /**
- The function signature for a completion source. Such a function
- may return its [result](https://codemirror.net/6/docs/ref/#autocomplete.CompletionResult)
- synchronously or as a promise. Returning null indicates no
- completions are available.
- */
- declare type CompletionSource = (context: CompletionContext) => CompletionResult | null | Promise<CompletionResult | null>;
- /**
- Interface for objects returned by completion sources.
- */
- interface CompletionResult {
- /**
- The start of the range that is being completed.
- */
- from: number;
- /**
- The end of the range that is being completed. Defaults to the
- main cursor position.
- */
- to?: number;
- /**
- The completions returned. These don't have to be compared with
- the input by the source—the autocompletion system will do its
- own matching (against the text between `from` and `to`) and
- sorting.
- */
- options: readonly Completion[];
- /**
- When given, further typing or deletion that causes the part of
- the document between ([mapped](https://codemirror.net/6/docs/ref/#state.ChangeDesc.mapPos)) `from`
- and `to` to match this regular expression or predicate function
- will not query the completion source again, but continue with
- this list of options. This can help a lot with responsiveness,
- since it allows the completion list to be updated synchronously.
- */
- validFor?: RegExp | ((text: string, from: number, to: number, state: EditorState) => boolean);
- /**
- By default, the library filters and scores completions. Set
- `filter` to `false` to disable this, and cause your completions
- to all be included, in the order they were given. When there are
- other sources, unfiltered completions appear at the top of the
- list of completions. `validFor` must not be given when `filter`
- is `false`, because it only works when filtering.
- */
- filter?: boolean;
- /**
- When [`filter`](https://codemirror.net/6/docs/ref/#autocomplete.CompletionResult.filter) is set to
- `false`, this may be provided to compute the ranges on the label
- that match the input. Should return an array of numbers where
- each pair of adjacent numbers provide the start and end of a
- range.
- */
- getMatch?: (completion: Completion) => readonly number[];
- /**
- Synchronously update the completion result after typing or
- deletion. If given, this should not do any expensive work, since
- it will be called during editor state updates. The function
- should make sure (similar to
- [`validFor`](https://codemirror.net/6/docs/ref/#autocomplete.CompletionResult.validFor)) that the
- completion still applies in the new state.
- */
- update?: (current: CompletionResult, from: number, to: number, context: CompletionContext) => CompletionResult | null;
- }
- /**
- This annotation is added to transactions that are produced by
- picking a completion.
- */
- declare const pickedCompletion: _codemirror_state.AnnotationType<Completion>;
- /**
- Helper function that returns a transaction spec which inserts a
- completion's text in the main selection range, and any other
- selection range that has the same text in front of it.
- */
- declare function insertCompletionText(state: EditorState, text: string, from: number, to: number): TransactionSpec;
- /**
- Convert a snippet template to a function that can
- [apply](https://codemirror.net/6/docs/ref/#autocomplete.Completion.apply) it. Snippets are written
- using syntax like this:
- "for (let ${index} = 0; ${index} < ${end}; ${index}++) {\n\t${}\n}"
- Each `${}` placeholder (you may also use `#{}`) indicates a field
- that the user can fill in. Its name, if any, will be the default
- content for the field.
- When the snippet is activated by calling the returned function,
- the code is inserted at the given position. Newlines in the
- template are indented by the indentation of the start line, plus
- one [indent unit](https://codemirror.net/6/docs/ref/#language.indentUnit) per tab character after
- the newline.
- On activation, (all instances of) the first field are selected.
- The user can move between fields with Tab and Shift-Tab as long as
- the fields are active. Moving to the last field or moving the
- cursor out of the current field deactivates the fields.
- The order of fields defaults to textual order, but you can add
- numbers to placeholders (`${1}` or `${1:defaultText}`) to provide
- a custom order.
- To include a literal `${` or `#{` in your template, put a
- backslash after the dollar or hash and before the brace (`$\\{`).
- This will be removed and the sequence will not be interpreted as a
- placeholder.
- */
- declare function snippet(template: string): (editor: {
- state: EditorState;
- dispatch: (tr: Transaction) => void;
- }, _completion: Completion, from: number, to: number) => void;
- /**
- A command that clears the active snippet, if any.
- */
- declare const clearSnippet: StateCommand;
- /**
- Move to the next snippet field, if available.
- */
- declare const nextSnippetField: StateCommand;
- /**
- Move to the previous snippet field, if available.
- */
- declare const prevSnippetField: StateCommand;
- /**
- A facet that can be used to configure the key bindings used by
- snippets. The default binds Tab to
- [`nextSnippetField`](https://codemirror.net/6/docs/ref/#autocomplete.nextSnippetField), Shift-Tab to
- [`prevSnippetField`](https://codemirror.net/6/docs/ref/#autocomplete.prevSnippetField), and Escape
- to [`clearSnippet`](https://codemirror.net/6/docs/ref/#autocomplete.clearSnippet).
- */
- declare const snippetKeymap: Facet<readonly KeyBinding[], readonly KeyBinding[]>;
- /**
- Create a completion from a snippet. Returns an object with the
- properties from `completion`, plus an `apply` function that
- applies the snippet.
- */
- declare function snippetCompletion(template: string, completion: Completion): Completion;
- /**
- Returns a command that moves the completion selection forward or
- backward by the given amount.
- */
- declare function moveCompletionSelection(forward: boolean, by?: "option" | "page"): Command;
- /**
- Accept the current completion.
- */
- declare const acceptCompletion: Command;
- /**
- Explicitly start autocompletion.
- */
- declare const startCompletion: Command;
- /**
- Close the currently active completion.
- */
- declare const closeCompletion: Command;
- /**
- A completion source that will scan the document for words (using a
- [character categorizer](https://codemirror.net/6/docs/ref/#state.EditorState.charCategorizer)), and
- return those as completions.
- */
- declare const completeAnyWord: CompletionSource;
- /**
- Configures bracket closing behavior for a syntax (via
- [language data](https://codemirror.net/6/docs/ref/#state.EditorState.languageDataAt)) using the `"closeBrackets"`
- identifier.
- */
- interface CloseBracketConfig {
- /**
- The opening brackets to close. Defaults to `["(", "[", "{", "'",
- '"']`. Brackets may be single characters or a triple of quotes
- (as in `"''''"`).
- */
- brackets?: string[];
- /**
- Characters in front of which newly opened brackets are
- automatically closed. Closing always happens in front of
- whitespace. Defaults to `")]}:;>"`.
- */
- before?: string;
- }
- /**
- Extension to enable bracket-closing behavior. When a closeable
- bracket is typed, its closing bracket is immediately inserted
- after the cursor. When closing a bracket directly in front of a
- closing bracket inserted by the extension, the cursor moves over
- that bracket.
- */
- declare function closeBrackets(): Extension;
- /**
- Command that implements deleting a pair of matching brackets when
- the cursor is between them.
- */
- declare const deleteBracketPair: StateCommand;
- /**
- Close-brackets related key bindings. Binds Backspace to
- [`deleteBracketPair`](https://codemirror.net/6/docs/ref/#autocomplete.deleteBracketPair).
- */
- declare const closeBracketsKeymap: readonly KeyBinding[];
- /**
- Implements the extension's behavior on text insertion. If the
- given string counts as a bracket in the language around the
- selection, and replacing the selection with it requires custom
- behavior (inserting a closing version or skipping past a
- previously-closed bracket), this function returns a transaction
- representing that custom behavior. (You only need this if you want
- to programmatically insert brackets—the
- [`closeBrackets`](https://codemirror.net/6/docs/ref/#autocomplete.closeBrackets) extension will
- take care of running this for user input.)
- */
- declare function insertBracket(state: EditorState, bracket: string): Transaction | null;
- /**
- Returns an extension that enables autocompletion.
- */
- declare function autocompletion(config?: CompletionConfig): Extension;
- /**
- Basic keybindings for autocompletion.
- - Ctrl-Space: [`startCompletion`](https://codemirror.net/6/docs/ref/#autocomplete.startCompletion)
- - Escape: [`closeCompletion`](https://codemirror.net/6/docs/ref/#autocomplete.closeCompletion)
- - ArrowDown: [`moveCompletionSelection`](https://codemirror.net/6/docs/ref/#autocomplete.moveCompletionSelection)`(true)`
- - ArrowUp: [`moveCompletionSelection`](https://codemirror.net/6/docs/ref/#autocomplete.moveCompletionSelection)`(false)`
- - PageDown: [`moveCompletionSelection`](https://codemirror.net/6/docs/ref/#autocomplete.moveCompletionSelection)`(true, "page")`
- - PageDown: [`moveCompletionSelection`](https://codemirror.net/6/docs/ref/#autocomplete.moveCompletionSelection)`(true, "page")`
- - Enter: [`acceptCompletion`](https://codemirror.net/6/docs/ref/#autocomplete.acceptCompletion)
- */
- declare const completionKeymap: readonly KeyBinding[];
- /**
- Get the current completion status. When completions are available,
- this will return `"active"`. When completions are pending (in the
- process of being queried), this returns `"pending"`. Otherwise, it
- returns `null`.
- */
- declare function completionStatus(state: EditorState): null | "active" | "pending";
- /**
- Returns the available completions as an array.
- */
- declare function currentCompletions(state: EditorState): readonly Completion[];
- /**
- Return the currently selected completion, if any.
- */
- declare function selectedCompletion(state: EditorState): Completion | null;
- /**
- Returns the currently selected position in the active completion
- list, or null if no completions are active.
- */
- declare function selectedCompletionIndex(state: EditorState): number | null;
- /**
- Create an effect that can be attached to a transaction to change
- the currently selected completion.
- */
- declare function setSelectedCompletion(index: number): StateEffect<unknown>;
- export { CloseBracketConfig, Completion, CompletionContext, CompletionResult, CompletionSource, acceptCompletion, autocompletion, clearSnippet, closeBrackets, closeBracketsKeymap, closeCompletion, completeAnyWord, completeFromList, completionKeymap, completionStatus, currentCompletions, deleteBracketPair, ifIn, ifNotIn, insertBracket, insertCompletionText, moveCompletionSelection, nextSnippetField, pickedCompletion, prevSnippetField, selectedCompletion, selectedCompletionIndex, setSelectedCompletion, snippet, snippetCompletion, snippetKeymap, startCompletion };
|