Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1import * as _codemirror_state from '@codemirror/state';
2import { RangeSet, RangeValue, Range, EditorState, Extension, Transaction, ChangeSet, SelectionRange, ChangeDesc, EditorSelection, EditorStateConfig, StateEffect, TransactionSpec, Line, Facet, StateField } from '@codemirror/state';
3import { StyleModule, StyleSpec } from 'style-mod';
4
5/**
6Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
7*/
8declare enum Direction {
9 /**
10 Left-to-right.
11 */
12 LTR = 0,
13 /**
14 Right-to-left.
15 */
16 RTL = 1
17}
18/**
19Represents a contiguous range of text that has a single direction
20(as in left-to-right or right-to-left).
21*/
22declare class BidiSpan {
23 /**
24 The start of the span (relative to the start of the line).
25 */
26 readonly from: number;
27 /**
28 The end of the span.
29 */
30 readonly to: number;
31 /**
32 The ["bidi
33 level"](https://unicode.org/reports/tr9/#Basic_Display_Algorithm)
34 of the span (in this context, 0 means
35 left-to-right, 1 means right-to-left, 2 means left-to-right
36 number inside right-to-left text).
37 */
38 readonly level: number;
39 /**
40 The direction of this span.
41 */
42 get dir(): Direction;
43}
44
45type Attrs = {
46 [name: string]: string;
47};
48
49/**
50Basic rectangle type.
51*/
52interface Rect {
53 readonly left: number;
54 readonly right: number;
55 readonly top: number;
56 readonly bottom: number;
57}
58type ScrollStrategy = "nearest" | "start" | "end" | "center";
59
60interface MarkDecorationSpec {
61 /**
62 Whether the mark covers its start and end position or not. This
63 influences whether content inserted at those positions becomes
64 part of the mark. Defaults to false.
65 */
66 inclusive?: boolean;
67 /**
68 Specify whether the start position of the marked range should be
69 inclusive. Overrides `inclusive`, when both are present.
70 */
71 inclusiveStart?: boolean;
72 /**
73 Whether the end should be inclusive.
74 */
75 inclusiveEnd?: boolean;
76 /**
77 Add attributes to the DOM elements that hold the text in the
78 marked range.
79 */
80 attributes?: {
81 [key: string]: string;
82 };
83 /**
84 Shorthand for `{attributes: {class: value}}`.
85 */
86 class?: string;
87 /**
88 Add a wrapping element around the text in the marked range. Note
89 that there will not necessarily be a single element covering the
90 entire range—other decorations with lower precedence might split
91 this one if they partially overlap it, and line breaks always
92 end decoration elements.
93 */
94 tagName?: string;
95 /**
96 When using sets of decorations in
97 [`bidiIsolatedRanges`](https://codemirror.net/6/docs/ref/##view.EditorView^bidiIsolatedRanges),
98 this property provides the direction of the isolates. When null
99 or not given, it indicates the range has `dir=auto`, and its
100 direction should be derived from the first strong directional
101 character in it.
102 */
103 bidiIsolate?: Direction | null;
104 /**
105 Decoration specs allow extra properties, which can be retrieved
106 through the decoration's [`spec`](https://codemirror.net/6/docs/ref/#view.Decoration.spec)
107 property.
108 */
109 [other: string]: any;
110}
111interface WidgetDecorationSpec {
112 /**
113 The type of widget to draw here.
114 */
115 widget: WidgetType;
116 /**
117 Which side of the given position the widget is on. When this is
118 positive, the widget will be drawn after the cursor if the
119 cursor is on the same position. Otherwise, it'll be drawn before
120 it. When multiple widgets sit at the same position, their `side`
121 values will determine their ordering—those with a lower value
122 come first. Defaults to 0. May not be more than 10000 or less
123 than -10000.
124 */
125 side?: number;
126 /**
127 By default, to avoid unintended mixing of block and inline
128 widgets, block widgets with a positive `side` are always drawn
129 after all inline widgets at that position, and those with a
130 non-positive side before inline widgets. Setting this option to
131 `true` for a block widget will turn this off and cause it to be
132 rendered between the inline widgets, ordered by `side`.
133 */
134 inlineOrder?: boolean;
135 /**
136 Determines whether this is a block widgets, which will be drawn
137 between lines, or an inline widget (the default) which is drawn
138 between the surrounding text.
139
140 Note that block-level decorations should not have vertical
141 margins, and if you dynamically change their height, you should
142 make sure to call
143 [`requestMeasure`](https://codemirror.net/6/docs/ref/#view.EditorView.requestMeasure), so that the
144 editor can update its information about its vertical layout.
145 */
146 block?: boolean;
147 /**
148 Other properties are allowed.
149 */
150 [other: string]: any;
151}
152interface ReplaceDecorationSpec {
153 /**
154 An optional widget to drawn in the place of the replaced
155 content.
156 */
157 widget?: WidgetType;
158 /**
159 Whether this range covers the positions on its sides. This
160 influences whether new content becomes part of the range and
161 whether the cursor can be drawn on its sides. Defaults to false
162 for inline replacements, and true for block replacements.
163 */
164 inclusive?: boolean;
165 /**
166 Set inclusivity at the start.
167 */
168 inclusiveStart?: boolean;
169 /**
170 Set inclusivity at the end.
171 */
172 inclusiveEnd?: boolean;
173 /**
174 Whether this is a block-level decoration. Defaults to false.
175 */
176 block?: boolean;
177 /**
178 Other properties are allowed.
179 */
180 [other: string]: any;
181}
182interface LineDecorationSpec {
183 /**
184 DOM attributes to add to the element wrapping the line.
185 */
186 attributes?: {
187 [key: string]: string;
188 };
189 /**
190 Shorthand for `{attributes: {class: value}}`.
191 */
192 class?: string;
193 /**
194 Other properties are allowed.
195 */
196 [other: string]: any;
197}
198/**
199Widgets added to the content are described by subclasses of this
200class. Using a description object like that makes it possible to
201delay creating of the DOM structure for a widget until it is
202needed, and to avoid redrawing widgets even if the decorations
203that define them are recreated.
204*/
205declare abstract class WidgetType {
206 /**
207 Build the DOM structure for this widget instance.
208 */
209 abstract toDOM(view: EditorView): HTMLElement;
210 /**
211 Compare this instance to another instance of the same type.
212 (TypeScript can't express this, but only instances of the same
213 specific class will be passed to this method.) This is used to
214 avoid redrawing widgets when they are replaced by a new
215 decoration of the same type. The default implementation just
216 returns `false`, which will cause new instances of the widget to
217 always be redrawn.
218 */
219 eq(widget: WidgetType): boolean;
220 /**
221 Update a DOM element created by a widget of the same type (but
222 different, non-`eq` content) to reflect this widget. May return
223 true to indicate that it could update, false to indicate it
224 couldn't (in which case the widget will be redrawn). The default
225 implementation just returns false.
226 */
227 updateDOM(dom: HTMLElement, view: EditorView): boolean;
228 /**
229 The estimated height this widget will have, to be used when
230 estimating the height of content that hasn't been drawn. May
231 return -1 to indicate you don't know. The default implementation
232 returns -1.
233 */
234 get estimatedHeight(): number;
235 /**
236 For inline widgets that are displayed inline (as opposed to
237 `inline-block`) and introduce line breaks (through `<br>` tags
238 or textual newlines), this must indicate the amount of line
239 breaks they introduce. Defaults to 0.
240 */
241 get lineBreaks(): number;
242 /**
243 Can be used to configure which kinds of events inside the widget
244 should be ignored by the editor. The default is to ignore all
245 events.
246 */
247 ignoreEvent(event: Event): boolean;
248 /**
249 Override the way screen coordinates for positions at/in the
250 widget are found. `pos` will be the offset into the widget, and
251 `side` the side of the position that is being queried—less than
252 zero for before, greater than zero for after, and zero for
253 directly at that position.
254 */
255 coordsAt(dom: HTMLElement, pos: number, side: number): Rect | null;
256 /**
257 This is called when the an instance of the widget is removed
258 from the editor view.
259 */
260 destroy(dom: HTMLElement): void;
261}
262/**
263A decoration set represents a collection of decorated ranges,
264organized for efficient access and mapping. See
265[`RangeSet`](https://codemirror.net/6/docs/ref/#state.RangeSet) for its methods.
266*/
267type DecorationSet = RangeSet<Decoration>;
268/**
269The different types of blocks that can occur in an editor view.
270*/
271declare enum BlockType {
272 /**
273 A line of text.
274 */
275 Text = 0,
276 /**
277 A block widget associated with the position after it.
278 */
279 WidgetBefore = 1,
280 /**
281 A block widget associated with the position before it.
282 */
283 WidgetAfter = 2,
284 /**
285 A block widget [replacing](https://codemirror.net/6/docs/ref/#view.Decoration^replace) a range of content.
286 */
287 WidgetRange = 3
288}
289/**
290A decoration provides information on how to draw or style a piece
291of content. You'll usually use it wrapped in a
292[`Range`](https://codemirror.net/6/docs/ref/#state.Range), which adds a start and end position.
293@nonabstract
294*/
295declare abstract class Decoration extends RangeValue {
296 /**
297 The config object used to create this decoration. You can
298 include additional properties in there to store metadata about
299 your decoration.
300 */
301 readonly spec: any;
302 protected constructor(
303 /**
304 @internal
305 */
306 startSide: number,
307 /**
308 @internal
309 */
310 endSide: number,
311 /**
312 @internal
313 */
314 widget: WidgetType | null,
315 /**
316 The config object used to create this decoration. You can
317 include additional properties in there to store metadata about
318 your decoration.
319 */
320 spec: any);
321 abstract eq(other: Decoration): boolean;
322 /**
323 Create a mark decoration, which influences the styling of the
324 content in its range. Nested mark decorations will cause nested
325 DOM elements to be created. Nesting order is determined by
326 precedence of the [facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), with
327 the higher-precedence decorations creating the inner DOM nodes.
328 Such elements are split on line boundaries and on the boundaries
329 of lower-precedence decorations.
330 */
331 static mark(spec: MarkDecorationSpec): Decoration;
332 /**
333 Create a widget decoration, which displays a DOM element at the
334 given position.
335 */
336 static widget(spec: WidgetDecorationSpec): Decoration;
337 /**
338 Create a replace decoration which replaces the given range with
339 a widget, or simply hides it.
340 */
341 static replace(spec: ReplaceDecorationSpec): Decoration;
342 /**
343 Create a line decoration, which can add DOM attributes to the
344 line starting at the given position.
345 */
346 static line(spec: LineDecorationSpec): Decoration;
347 /**
348 Build a [`DecorationSet`](https://codemirror.net/6/docs/ref/#view.DecorationSet) from the given
349 decorated range or ranges. If the ranges aren't already sorted,
350 pass `true` for `sort` to make the library sort them for you.
351 */
352 static set(of: Range<Decoration> | readonly Range<Decoration>[], sort?: boolean): DecorationSet;
353 /**
354 The empty set of decorations.
355 */
356 static none: DecorationSet;
357}
358interface BlockWrapperSpec {
359 /**
360 Tag name of the wrapping element.
361 */
362 tagName: string;
363 /**
364 DOM attributes to add to the wrapping element.
365 */
366 attributes?: {
367 [key: string]: string;
368 };
369}
370/**
371A block wrapper defines a DOM node that wraps lines or other block
372wrappers at the top of the document. It affects any line or block
373widget that starts inside its range, including blocks starting
374directly at `from` but not including `to`.
375*/
376declare class BlockWrapper extends RangeValue {
377 readonly tagName: string;
378 readonly attributes: Attrs;
379 private constructor();
380 eq(other: RangeValue): boolean;
381 /**
382 Create a block wrapper object with the given tag name and
383 attributes.
384 */
385 static create(spec: BlockWrapperSpec): BlockWrapper;
386 /**
387 Create a range set from the given block wrapper ranges.
388 */
389 static set(of: Range<BlockWrapper> | readonly Range<BlockWrapper>[], sort?: boolean): RangeSet<BlockWrapper>;
390}
391
392/**
393Command functions are used in key bindings and other types of user
394actions. Given an editor view, they check whether their effect can
395apply to the editor, and if it can, perform it as a side effect
396(which usually means [dispatching](https://codemirror.net/6/docs/ref/#view.EditorView.dispatch) a
397transaction) and return `true`.
398*/
399type Command = (target: EditorView) => boolean;
400declare class ScrollTarget {
401 readonly range: SelectionRange;
402 readonly y: ScrollStrategy;
403 readonly x: ScrollStrategy;
404 readonly yMargin: number;
405 readonly xMargin: number;
406 readonly isSnapshot: boolean;
407 constructor(range: SelectionRange, y?: ScrollStrategy, x?: ScrollStrategy, yMargin?: number, xMargin?: number, isSnapshot?: boolean);
408 map(changes: ChangeDesc): ScrollTarget;
409 clip(state: EditorState): ScrollTarget;
410}
411/**
412Log or report an unhandled exception in client code. Should
413probably only be used by extension code that allows client code to
414provide functions, and calls those functions in a context where an
415exception can't be propagated to calling code in a reasonable way
416(for example when in an event handler).
417
418Either calls a handler registered with
419[`EditorView.exceptionSink`](https://codemirror.net/6/docs/ref/#view.EditorView^exceptionSink),
420`window.onerror`, if defined, or `console.error` (in which case
421it'll pass `context`, when given, as first argument).
422*/
423declare function logException(state: EditorState, exception: any, context?: string): void;
424/**
425This is the interface plugin objects conform to.
426*/
427interface PluginValue extends Object {
428 /**
429 Notifies the plugin of an update that happened in the view. This
430 is called _before_ the view updates its own DOM. It is
431 responsible for updating the plugin's internal state (including
432 any state that may be read by plugin fields) and _writing_ to
433 the DOM for the changes in the update. To avoid unnecessary
434 layout recomputations, it should _not_ read the DOM layout—use
435 [`requestMeasure`](https://codemirror.net/6/docs/ref/#view.EditorView.requestMeasure) to schedule
436 your code in a DOM reading phase if you need to.
437 */
438 update?(update: ViewUpdate): void;
439 /**
440 Called when the document view is updated (due to content,
441 decoration, or viewport changes). Should not try to immediately
442 start another view update. Often useful for calling
443 [`requestMeasure`](https://codemirror.net/6/docs/ref/#view.EditorView.requestMeasure).
444 */
445 docViewUpdate?(view: EditorView): void;
446 /**
447 Called when the plugin is no longer going to be used. Should
448 revert any changes the plugin made to the DOM.
449 */
450 destroy?(): void;
451}
452/**
453Provides additional information when defining a [view
454plugin](https://codemirror.net/6/docs/ref/#view.ViewPlugin).
455*/
456interface PluginSpec<V extends PluginValue> {
457 /**
458 Register the given [event
459 handlers](https://codemirror.net/6/docs/ref/#view.EditorView^domEventHandlers) for the plugin.
460 When called, these will have their `this` bound to the plugin
461 value.
462 */
463 eventHandlers?: DOMEventHandlers<V>;
464 /**
465 Registers [event observers](https://codemirror.net/6/docs/ref/#view.EditorView^domEventObservers)
466 for the plugin. Will, when called, have their `this` bound to
467 the plugin value.
468 */
469 eventObservers?: DOMEventHandlers<V>;
470 /**
471 Specify that the plugin provides additional extensions when
472 added to an editor configuration.
473 */
474 provide?: (plugin: ViewPlugin<V, any>) => Extension;
475 /**
476 Allow the plugin to provide decorations. When given, this should
477 be a function that take the plugin value and return a
478 [decoration set](https://codemirror.net/6/docs/ref/#view.DecorationSet). See also the caveat about
479 [layout-changing decorations](https://codemirror.net/6/docs/ref/#view.EditorView^decorations) that
480 depend on the view.
481 */
482 decorations?: (value: V) => DecorationSet;
483}
484/**
485View plugins associate stateful values with a view. They can
486influence the way the content is drawn, and are notified of things
487that happen in the view. They optionally take an argument, in
488which case you need to call [`of`](https://codemirror.net/6/docs/ref/#view.ViewPlugin.of) to create
489an extension for the plugin. When the argument type is undefined,
490you can use the plugin instance as an extension directly.
491*/
492declare class ViewPlugin<V extends PluginValue, Arg = undefined> {
493 /**
494 When `Arg` is undefined, instances of this class act as
495 extensions. Otherwise, you have to call `of` to create an
496 extension value.
497 */
498 extension: Arg extends undefined ? Extension : null;
499 private baseExtensions;
500 private constructor();
501 /**
502 Create an extension for this plugin with the given argument.
503 */
504 of(arg: Arg): Extension;
505 /**
506 Define a plugin from a constructor function that creates the
507 plugin's value, given an editor view.
508 */
509 static define<V extends PluginValue, Arg = undefined>(create: (view: EditorView, arg: Arg) => V, spec?: PluginSpec<V>): ViewPlugin<V, Arg>;
510 /**
511 Create a plugin for a class whose constructor takes a single
512 editor view as argument.
513 */
514 static fromClass<V extends PluginValue, Arg = undefined>(cls: {
515 new (view: EditorView, arg: Arg): V;
516 }, spec?: PluginSpec<V>): ViewPlugin<V, Arg>;
517}
518interface MeasureRequest<T> {
519 /**
520 Called in a DOM read phase to gather information that requires
521 DOM layout. Should _not_ mutate the document.
522 */
523 read(view: EditorView): T;
524 /**
525 Called in a DOM write phase to update the document. Should _not_
526 do anything that triggers DOM layout.
527 */
528 write?(measure: T, view: EditorView): void;
529 /**
530 When multiple requests with the same key are scheduled, only the
531 last one will actually be run.
532 */
533 key?: any;
534}
535type AttrSource = Attrs | ((view: EditorView) => Attrs | null);
536/**
537View [plugins](https://codemirror.net/6/docs/ref/#view.ViewPlugin) are given instances of this
538class, which describe what happened, whenever the view is updated.
539*/
540declare class ViewUpdate {
541 /**
542 The editor view that the update is associated with.
543 */
544 readonly view: EditorView;
545 /**
546 The new editor state.
547 */
548 readonly state: EditorState;
549 /**
550 The transactions involved in the update. May be empty.
551 */
552 readonly transactions: readonly Transaction[];
553 /**
554 The changes made to the document by this update.
555 */
556 readonly changes: ChangeSet;
557 /**
558 The previous editor state.
559 */
560 readonly startState: EditorState;
561 private constructor();
562 /**
563 Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
564 [visible ranges](https://codemirror.net/6/docs/ref/#view.EditorView.visibleRanges) changed in this
565 update.
566 */
567 get viewportChanged(): boolean;
568 /**
569 Returns true when
570 [`viewportChanged`](https://codemirror.net/6/docs/ref/#view.ViewUpdate.viewportChanged) is true
571 and the viewport change is not just the result of mapping it in
572 response to document changes.
573 */
574 get viewportMoved(): boolean;
575 /**
576 Indicates whether the height of a block element in the editor
577 changed in this update.
578 */
579 get heightChanged(): boolean;
580 /**
581 Returns true when the document was modified or the size of the
582 editor, or elements within the editor, changed.
583 */
584 get geometryChanged(): boolean;
585 /**
586 True when this update indicates a focus change.
587 */
588 get focusChanged(): boolean;
589 /**
590 Whether the document changed in this update.
591 */
592 get docChanged(): boolean;
593 /**
594 Whether the selection was explicitly set in this update.
595 */
596 get selectionSet(): boolean;
597}
598
599/**
600Interface that objects registered with
601[`EditorView.mouseSelectionStyle`](https://codemirror.net/6/docs/ref/#view.EditorView^mouseSelectionStyle)
602must conform to.
603*/
604interface MouseSelectionStyle {
605 /**
606 Return a new selection for the mouse gesture that starts with
607 the event that was originally given to the constructor, and ends
608 with the event passed here. In case of a plain click, those may
609 both be the `mousedown` event, in case of a drag gesture, the
610 latest `mousemove` event will be passed.
611
612 When `extend` is true, that means the new selection should, if
613 possible, extend the start selection. If `multiple` is true, the
614 new selection should be added to the original selection.
615 */
616 get: (curEvent: MouseEvent, extend: boolean, multiple: boolean) => EditorSelection;
617 /**
618 Called when the view is updated while the gesture is in
619 progress. When the document changes, it may be necessary to map
620 some data (like the original selection or start position)
621 through the changes.
622
623 This may return `true` to indicate that the `get` method should
624 get queried again after the update, because something in the
625 update could change its result. Be wary of infinite loops when
626 using this (where `get` returns a new selection, which will
627 trigger `update`, which schedules another `get` in response).
628 */
629 update: (update: ViewUpdate) => boolean | void;
630}
631type MakeSelectionStyle = (view: EditorView, event: MouseEvent) => MouseSelectionStyle | null;
632
633/**
634Record used to represent information about a block-level element
635in the editor view.
636*/
637declare class BlockInfo {
638 /**
639 The start of the element in the document.
640 */
641 readonly from: number;
642 /**
643 The length of the element.
644 */
645 readonly length: number;
646 /**
647 The top position of the element (relative to the top of the
648 document).
649 */
650 readonly top: number;
651 /**
652 Its height.
653 */
654 readonly height: number;
655 /**
656 The type of element this is. When querying lines, this may be
657 an array of all the blocks that make up the line.
658 */
659 get type(): BlockType | readonly BlockInfo[];
660 /**
661 The end of the element as a document position.
662 */
663 get to(): number;
664 /**
665 The bottom position of the element.
666 */
667 get bottom(): number;
668 /**
669 If this is a widget block, this will return the widget
670 associated with it.
671 */
672 get widget(): WidgetType | null;
673 /**
674 If this is a textblock, this holds the number of line breaks
675 that appear in widgets inside the block.
676 */
677 get widgetLineBreaks(): number;
678}
679
680/**
681The type of object given to the [`EditorView`](https://codemirror.net/6/docs/ref/#view.EditorView)
682constructor.
683*/
684interface EditorViewConfig extends EditorStateConfig {
685 /**
686 The view's initial state. If not given, a new state is created
687 by passing this configuration object to
688 [`EditorState.create`](https://codemirror.net/6/docs/ref/#state.EditorState^create), using its
689 `doc`, `selection`, and `extensions` field (if provided).
690 */
691 state?: EditorState;
692 /**
693 When given, the editor is immediately appended to the given
694 element on creation. (Otherwise, you'll have to place the view's
695 [`dom`](https://codemirror.net/6/docs/ref/#view.EditorView.dom) element in the document yourself.)
696 */
697 parent?: Element | DocumentFragment;
698 /**
699 If the view is going to be mounted in a shadow root or document
700 other than the one held by the global variable `document` (the
701 default), you should pass it here. If you provide `parent`, but
702 not this option, the editor will automatically look up a root
703 from the parent.
704 */
705 root?: Document | ShadowRoot;
706 /**
707 Pass an effect created with
708 [`EditorView.scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView) or
709 [`EditorView.scrollSnapshot`](https://codemirror.net/6/docs/ref/#view.EditorView.scrollSnapshot)
710 here to set an initial scroll position.
711 */
712 scrollTo?: StateEffect<any>;
713 /**
714 Override the way transactions are
715 [dispatched](https://codemirror.net/6/docs/ref/#view.EditorView.dispatch) for this editor view.
716 Your implementation, if provided, should probably call the
717 view's [`update` method](https://codemirror.net/6/docs/ref/#view.EditorView.update).
718 */
719 dispatchTransactions?: (trs: readonly Transaction[], view: EditorView) => void;
720 /**
721 **Deprecated** single-transaction version of
722 `dispatchTransactions`. Will force transactions to be dispatched
723 one at a time when used.
724 */
725 dispatch?: (tr: Transaction, view: EditorView) => void;
726}
727/**
728An editor view represents the editor's user interface. It holds
729the editable DOM surface, and possibly other elements such as the
730line number gutter. It handles events and dispatches state
731transactions for editing actions.
732*/
733declare class EditorView {
734 /**
735 The current editor state.
736 */
737 get state(): EditorState;
738 /**
739 To be able to display large documents without consuming too much
740 memory or overloading the browser, CodeMirror only draws the
741 code that is visible (plus a margin around it) to the DOM. This
742 property tells you the extent of the current drawn viewport, in
743 document positions.
744 */
745 get viewport(): {
746 from: number;
747 to: number;
748 };
749 /**
750 When there are, for example, large collapsed ranges in the
751 viewport, its size can be a lot bigger than the actual visible
752 content. Thus, if you are doing something like styling the
753 content in the viewport, it is preferable to only do so for
754 these ranges, which are the subset of the viewport that is
755 actually drawn.
756 */
757 get visibleRanges(): readonly {
758 from: number;
759 to: number;
760 }[];
761 /**
762 Returns false when the editor is entirely scrolled out of view
763 or otherwise hidden.
764 */
765 get inView(): boolean;
766 /**
767 Indicates whether the user is currently composing text via
768 [IME](https://en.wikipedia.org/wiki/Input_method), and at least
769 one change has been made in the current composition.
770 */
771 get composing(): boolean;
772 /**
773 Indicates whether the user is currently in composing state. Note
774 that on some platforms, like Android, this will be the case a
775 lot, since just putting the cursor on a word starts a
776 composition there.
777 */
778 get compositionStarted(): boolean;
779 private dispatchTransactions;
780 private _root;
781 /**
782 The document or shadow root that the view lives in.
783 */
784 get root(): DocumentOrShadowRoot;
785 /**
786 The DOM element that wraps the entire editor view.
787 */
788 readonly dom: HTMLElement;
789 /**
790 The DOM element that can be styled to scroll. (Note that it may
791 not have been, so you can't assume this is scrollable.)
792 */
793 readonly scrollDOM: HTMLElement;
794 /**
795 The editable DOM element holding the editor content. You should
796 not, usually, interact with this content directly though the
797 DOM, since the editor will immediately undo most of the changes
798 you make. Instead, [dispatch](https://codemirror.net/6/docs/ref/#view.EditorView.dispatch)
799 [transactions](https://codemirror.net/6/docs/ref/#state.Transaction) to modify content, and
800 [decorations](https://codemirror.net/6/docs/ref/#view.Decoration) to style it.
801 */
802 readonly contentDOM: HTMLElement;
803 private announceDOM;
804 private plugins;
805 private pluginMap;
806 private editorAttrs;
807 private contentAttrs;
808 private styleModules;
809 private bidiCache;
810 private destroyed;
811 /**
812 Construct a new view. You'll want to either provide a `parent`
813 option, or put `view.dom` into your document after creating a
814 view, so that the user can see the editor.
815 */
816 constructor(config?: EditorViewConfig);
817 /**
818 All regular editor state updates should go through this. It
819 takes a transaction, array of transactions, or transaction spec
820 and updates the view to show the new state produced by that
821 transaction. Its implementation can be overridden with an
822 [option](https://codemirror.net/6/docs/ref/#view.EditorView.constructor^config.dispatchTransactions).
823 This function is bound to the view instance, so it does not have
824 to be called as a method.
825
826 Note that when multiple `TransactionSpec` arguments are
827 provided, these define a single transaction (the specs will be
828 merged), not a sequence of transactions.
829 */
830 dispatch(tr: Transaction): void;
831 dispatch(trs: readonly Transaction[]): void;
832 dispatch(...specs: TransactionSpec[]): void;
833 /**
834 Update the view for the given array of transactions. This will
835 update the visible document and selection to match the state
836 produced by the transactions, and notify view plugins of the
837 change. You should usually call
838 [`dispatch`](https://codemirror.net/6/docs/ref/#view.EditorView.dispatch) instead, which uses this
839 as a primitive.
840 */
841 update(transactions: readonly Transaction[]): void;
842 /**
843 Reset the view to the given state. (This will cause the entire
844 document to be redrawn and all view plugins to be reinitialized,
845 so you should probably only use it when the new state isn't
846 derived from the old state. Otherwise, use
847 [`dispatch`](https://codemirror.net/6/docs/ref/#view.EditorView.dispatch) instead.)
848 */
849 setState(newState: EditorState): void;
850 private updatePlugins;
851 private docViewUpdate;
852 /**
853 Get the CSS classes for the currently active editor themes.
854 */
855 get themeClasses(): string;
856 private updateAttrs;
857 private showAnnouncements;
858 private mountStyles;
859 private readMeasured;
860 /**
861 Schedule a layout measurement, optionally providing callbacks to
862 do custom DOM measuring followed by a DOM write phase. Using
863 this is preferable reading DOM layout directly from, for
864 example, an event handler, because it'll make sure measuring and
865 drawing done by other components is synchronized, avoiding
866 unnecessary DOM layout computations.
867 */
868 requestMeasure<T>(request?: MeasureRequest<T>): void;
869 /**
870 Get the value of a specific plugin, if present. Note that
871 plugins that crash can be dropped from a view, so even when you
872 know you registered a given plugin, it is recommended to check
873 the return value of this method.
874 */
875 plugin<T extends PluginValue>(plugin: ViewPlugin<T, any>): T | null;
876 /**
877 The top position of the document, in screen coordinates. This
878 may be negative when the editor is scrolled down. Points
879 directly to the top of the first line, not above the padding.
880 */
881 get documentTop(): number;
882 /**
883 Reports the padding above and below the document.
884 */
885 get documentPadding(): {
886 top: number;
887 bottom: number;
888 };
889 /**
890 If the editor is transformed with CSS, this provides the scale
891 along the X axis. Otherwise, it will just be 1. Note that
892 transforms other than translation and scaling are not supported.
893 */
894 get scaleX(): number;
895 /**
896 Provide the CSS transformed scale along the Y axis.
897 */
898 get scaleY(): number;
899 /**
900 Find the text line or block widget at the given vertical
901 position (which is interpreted as relative to the [top of the
902 document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
903 */
904 elementAtHeight(height: number): BlockInfo;
905 /**
906 Find the line block (see
907 [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt)) at the given
908 height, again interpreted relative to the [top of the
909 document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop).
910 */
911 lineBlockAtHeight(height: number): BlockInfo;
912 /**
913 Get the extent and vertical position of all [line
914 blocks](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) in the viewport. Positions
915 are relative to the [top of the
916 document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop);
917 */
918 get viewportLineBlocks(): BlockInfo[];
919 /**
920 Find the line block around the given document position. A line
921 block is a range delimited on both sides by either a
922 non-[hidden](https://codemirror.net/6/docs/ref/#view.Decoration^replace) line break, or the
923 start/end of the document. It will usually just hold a line of
924 text, but may be broken into multiple textblocks by block
925 widgets.
926 */
927 lineBlockAt(pos: number): BlockInfo;
928 /**
929 The editor's total content height.
930 */
931 get contentHeight(): number;
932 /**
933 Move a cursor position by [grapheme
934 cluster](https://codemirror.net/6/docs/ref/#state.findClusterBreak). `forward` determines whether
935 the motion is away from the line start, or towards it. In
936 bidirectional text, the line is traversed in visual order, using
937 the editor's [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
938 When the start position was the last one on the line, the
939 returned position will be across the line break. If there is no
940 further line, the original position is returned.
941
942 By default, this method moves over a single cluster. The
943 optional `by` argument can be used to move across more. It will
944 be called with the first cluster as argument, and should return
945 a predicate that determines, for each subsequent cluster,
946 whether it should also be moved over.
947 */
948 moveByChar(start: SelectionRange, forward: boolean, by?: (initial: string) => (next: string) => boolean): SelectionRange;
949 /**
950 Move a cursor position across the next group of either
951 [letters](https://codemirror.net/6/docs/ref/#state.EditorState.charCategorizer) or non-letter
952 non-whitespace characters.
953 */
954 moveByGroup(start: SelectionRange, forward: boolean): SelectionRange;
955 /**
956 Get the cursor position visually at the start or end of a line.
957 Note that this may differ from the _logical_ position at its
958 start or end (which is simply at `line.from`/`line.to`) if text
959 at the start or end goes against the line's base text direction.
960 */
961 visualLineSide(line: Line, end: boolean): SelectionRange;
962 /**
963 Move to the next line boundary in the given direction. If
964 `includeWrap` is true, line wrapping is on, and there is a
965 further wrap point on the current line, the wrap point will be
966 returned. Otherwise this function will return the start or end
967 of the line.
968 */
969 moveToLineBoundary(start: SelectionRange, forward: boolean, includeWrap?: boolean): SelectionRange;
970 /**
971 Move a cursor position vertically. When `distance` isn't given,
972 it defaults to moving to the next line (including wrapped
973 lines). Otherwise, `distance` should provide a positive distance
974 in pixels.
975
976 When `start` has a
977 [`goalColumn`](https://codemirror.net/6/docs/ref/#state.SelectionRange.goalColumn), the vertical
978 motion will use that as a target horizontal position. Otherwise,
979 the cursor's own horizontal position is used. The returned
980 cursor will have its goal column set to whichever column was
981 used.
982 */
983 moveVertically(start: SelectionRange, forward: boolean, distance?: number): SelectionRange;
984 /**
985 Find the DOM parent node and offset (child offset if `node` is
986 an element, character offset when it is a text node) at the
987 given document position.
988
989 Note that for positions that aren't currently in
990 `visibleRanges`, the resulting DOM position isn't necessarily
991 meaningful (it may just point before or after a placeholder
992 element).
993 */
994 domAtPos(pos: number, side?: -1 | 1): {
995 node: Node;
996 offset: number;
997 };
998 /**
999 Find the document position at the given DOM node. Can be useful
1000 for associating positions with DOM events. Will raise an error
1001 when `node` isn't part of the editor content.
1002 */
1003 posAtDOM(node: Node, offset?: number): number;
1004 /**
1005 Get the document position at the given screen coordinates. For
1006 positions not covered by the visible viewport's DOM structure,
1007 this will return null, unless `false` is passed as second
1008 argument, in which case it'll return an estimated position that
1009 would be near the coordinates if it were rendered.
1010 */
1011 posAtCoords(coords: {
1012 x: number;
1013 y: number;
1014 }, precise: false): number;
1015 posAtCoords(coords: {
1016 x: number;
1017 y: number;
1018 }): number | null;
1019 /**
1020 Like [`posAtCoords`](https://codemirror.net/6/docs/ref/#view.EditorView.posAtCoords), but also
1021 returns which side of the position the coordinates are closest
1022 to. For example, for coordinates on the left side of a
1023 left-to-right character, the position before that letter is
1024 returned, with `assoc` 1, whereas on the right side, you'd get
1025 the position after the character, with `assoc` -1.
1026 */
1027 posAndSideAtCoords(coords: {
1028 x: number;
1029 y: number;
1030 }, precise: false): {
1031 pos: number;
1032 assoc: -1 | 1;
1033 };
1034 posAndSideAtCoords(coords: {
1035 x: number;
1036 y: number;
1037 }): {
1038 pos: number;
1039 assoc: -1 | 1;
1040 } | null;
1041 /**
1042 Get the screen coordinates at the given document position.
1043 `side` determines whether the coordinates are based on the
1044 element before (-1) or after (1) the position (if no element is
1045 available on the given side, the method will transparently use
1046 another strategy to get reasonable coordinates).
1047 */
1048 coordsAtPos(pos: number, side?: -1 | 1): Rect | null;
1049 /**
1050 Return the rectangle around a given character. If `pos` does not
1051 point in front of a character that is in the viewport and
1052 rendered (i.e. not replaced, not a line break), this will return
1053 null. For space characters that are a line wrap point, this will
1054 return the position before the line break.
1055 */
1056 coordsForChar(pos: number): Rect | null;
1057 /**
1058 The default width of a character in the editor. May not
1059 accurately reflect the width of all characters (given variable
1060 width fonts or styling of invididual ranges).
1061 */
1062 get defaultCharacterWidth(): number;
1063 /**
1064 The default height of a line in the editor. May not be accurate
1065 for all lines.
1066 */
1067 get defaultLineHeight(): number;
1068 /**
1069 The text direction
1070 ([`direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)
1071 CSS property) of the editor's content element.
1072 */
1073 get textDirection(): Direction;
1074 /**
1075 Find the text direction of the block at the given position, as
1076 assigned by CSS. If
1077 [`perLineTextDirection`](https://codemirror.net/6/docs/ref/#view.EditorView^perLineTextDirection)
1078 isn't enabled, or the given position is outside of the viewport,
1079 this will always return the same as
1080 [`textDirection`](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection). Note that
1081 this may trigger a DOM layout.
1082 */
1083 textDirectionAt(pos: number): Direction;
1084 /**
1085 Whether this editor [wraps lines](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping)
1086 (as determined by the
1087 [`white-space`](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
1088 CSS property of its content element).
1089 */
1090 get lineWrapping(): boolean;
1091 /**
1092 Returns the bidirectional text structure of the given line
1093 (which should be in the current document) as an array of span
1094 objects. The order of these spans matches the [text
1095 direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection)—if that is
1096 left-to-right, the leftmost spans come first, otherwise the
1097 rightmost spans come first.
1098 */
1099 bidiSpans(line: Line): readonly BidiSpan[];
1100 /**
1101 Check whether the editor has focus.
1102 */
1103 get hasFocus(): boolean;
1104 /**
1105 Put focus on the editor.
1106 */
1107 focus(): void;
1108 /**
1109 Update the [root](https://codemirror.net/6/docs/ref/##view.EditorViewConfig.root) in which the editor lives. This is only
1110 necessary when moving the editor's existing DOM to a new window or shadow root.
1111 */
1112 setRoot(root: Document | ShadowRoot): void;
1113 /**
1114 Clean up this editor view, removing its element from the
1115 document, unregistering event handlers, and notifying
1116 plugins. The view instance can no longer be used after
1117 calling this.
1118 */
1119 destroy(): void;
1120 /**
1121 Returns an effect that can be
1122 [added](https://codemirror.net/6/docs/ref/#state.TransactionSpec.effects) to a transaction to
1123 cause it to scroll the given position or range into view.
1124 */
1125 static scrollIntoView(pos: number | SelectionRange, options?: {
1126 /**
1127 By default (`"nearest"`) the position will be vertically
1128 scrolled only the minimal amount required to move the given
1129 position into view. You can set this to `"start"` to move it
1130 to the top of the view, `"end"` to move it to the bottom, or
1131 `"center"` to move it to the center.
1132 */
1133 y?: ScrollStrategy;
1134 /**
1135 Effect similar to
1136 [`y`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView^options.y), but for the
1137 horizontal scroll position.
1138 */
1139 x?: ScrollStrategy;
1140 /**
1141 Extra vertical distance to add when moving something into
1142 view. Not used with the `"center"` strategy. Defaults to 5.
1143 Must be less than the height of the editor.
1144 */
1145 yMargin?: number;
1146 /**
1147 Extra horizontal distance to add. Not used with the `"center"`
1148 strategy. Defaults to 5. Must be less than the width of the
1149 editor.
1150 */
1151 xMargin?: number;
1152 }): StateEffect<unknown>;
1153 /**
1154 Return an effect that resets the editor to its current (at the
1155 time this method was called) scroll position. Note that this
1156 only affects the editor's own scrollable element, not parents.
1157 See also
1158 [`EditorViewConfig.scrollTo`](https://codemirror.net/6/docs/ref/#view.EditorViewConfig.scrollTo).
1159
1160 The effect should be used with a document identical to the one
1161 it was created for. Failing to do so is not an error, but may
1162 not scroll to the expected position. You can
1163 [map](https://codemirror.net/6/docs/ref/#state.StateEffect.map) the effect to account for changes.
1164 */
1165 scrollSnapshot(): StateEffect<ScrollTarget>;
1166 /**
1167 Enable or disable tab-focus mode, which disables key bindings
1168 for Tab and Shift-Tab, letting the browser's default
1169 focus-changing behavior go through instead. This is useful to
1170 prevent trapping keyboard users in your editor.
1171
1172 Without argument, this toggles the mode. With a boolean, it
1173 enables (true) or disables it (false). Given a number, it
1174 temporarily enables the mode until that number of milliseconds
1175 have passed or another non-Tab key is pressed.
1176 */
1177 setTabFocusMode(to?: boolean | number): void;
1178 /**
1179 Facet to add a [style
1180 module](https://github.com/marijnh/style-mod#documentation) to
1181 an editor view. The view will ensure that the module is
1182 mounted in its [document
1183 root](https://codemirror.net/6/docs/ref/#view.EditorView.constructor^config.root).
1184 */
1185 static styleModule: Facet<StyleModule, readonly StyleModule[]>;
1186 /**
1187 Returns an extension that can be used to add DOM event handlers.
1188 The value should be an object mapping event names to handler
1189 functions. For any given event, such functions are ordered by
1190 extension precedence, and the first handler to return true will
1191 be assumed to have handled that event, and no other handlers or
1192 built-in behavior will be activated for it. These are registered
1193 on the [content element](https://codemirror.net/6/docs/ref/#view.EditorView.contentDOM), except
1194 for `scroll` handlers, which will be called any time the
1195 editor's [scroll element](https://codemirror.net/6/docs/ref/#view.EditorView.scrollDOM) or one of
1196 its parent nodes is scrolled.
1197 */
1198 static domEventHandlers(handlers: DOMEventHandlers<any>): Extension;
1199 /**
1200 Create an extension that registers DOM event observers. Contrary
1201 to event [handlers](https://codemirror.net/6/docs/ref/#view.EditorView^domEventHandlers),
1202 observers can't be prevented from running by a higher-precedence
1203 handler returning true. They also don't prevent other handlers
1204 and observers from running when they return true, and should not
1205 call `preventDefault`.
1206 */
1207 static domEventObservers(observers: DOMEventHandlers<any>): Extension;
1208 /**
1209 An input handler can override the way changes to the editable
1210 DOM content are handled. Handlers are passed the document
1211 positions between which the change was found, and the new
1212 content. When one returns true, no further input handlers are
1213 called and the default behavior is prevented.
1214
1215 The `insert` argument can be used to get the default transaction
1216 that would be applied for this input. This can be useful when
1217 dispatching the custom behavior as a separate transaction.
1218 */
1219 static inputHandler: Facet<(view: EditorView, from: number, to: number, text: string, insert: () => Transaction) => boolean, readonly ((view: EditorView, from: number, to: number, text: string, insert: () => Transaction) => boolean)[]>;
1220 /**
1221 Functions provided in this facet will be used to transform text
1222 pasted or dropped into the editor.
1223 */
1224 static clipboardInputFilter: Facet<(text: string, state: EditorState) => string, readonly ((text: string, state: EditorState) => string)[]>;
1225 /**
1226 Transform text copied or dragged from the editor.
1227 */
1228 static clipboardOutputFilter: Facet<(text: string, state: EditorState) => string, readonly ((text: string, state: EditorState) => string)[]>;
1229 /**
1230 Scroll handlers can override how things are scrolled into view.
1231 If they return `true`, no further handling happens for the
1232 scrolling. If they return false, the default scroll behavior is
1233 applied. Scroll handlers should never initiate editor updates.
1234 */
1235 static scrollHandler: Facet<(view: EditorView, range: SelectionRange, options: {
1236 x: ScrollStrategy;
1237 y: ScrollStrategy;
1238 xMargin: number;
1239 yMargin: number;
1240 }) => boolean, readonly ((view: EditorView, range: SelectionRange, options: {
1241 x: ScrollStrategy;
1242 y: ScrollStrategy;
1243 xMargin: number;
1244 yMargin: number;
1245 }) => boolean)[]>;
1246 /**
1247 This facet can be used to provide functions that create effects
1248 to be dispatched when the editor's focus state changes.
1249 */
1250 static focusChangeEffect: Facet<(state: EditorState, focusing: boolean) => StateEffect<any> | null, readonly ((state: EditorState, focusing: boolean) => StateEffect<any> | null)[]>;
1251 /**
1252 By default, the editor assumes all its content has the same
1253 [text direction](https://codemirror.net/6/docs/ref/#view.Direction). Configure this with a `true`
1254 value to make it read the text direction of every (rendered)
1255 line separately.
1256 */
1257 static perLineTextDirection: Facet<boolean, boolean>;
1258 /**
1259 Allows you to provide a function that should be called when the
1260 library catches an exception from an extension (mostly from view
1261 plugins, but may be used by other extensions to route exceptions
1262 from user-code-provided callbacks). This is mostly useful for
1263 debugging and logging. See [`logException`](https://codemirror.net/6/docs/ref/#view.logException).
1264 */
1265 static exceptionSink: Facet<(exception: any) => void, readonly ((exception: any) => void)[]>;
1266 /**
1267 A facet that can be used to register a function to be called
1268 every time the view updates.
1269 */
1270 static updateListener: Facet<(update: ViewUpdate) => void, readonly ((update: ViewUpdate) => void)[]>;
1271 /**
1272 Facet that controls whether the editor content DOM is editable.
1273 When its highest-precedence value is `false`, the element will
1274 not have its `contenteditable` attribute set. (Note that this
1275 doesn't affect API calls that change the editor content, even
1276 when those are bound to keys or buttons. See the
1277 [`readOnly`](https://codemirror.net/6/docs/ref/#state.EditorState.readOnly) facet for that.)
1278 */
1279 static editable: Facet<boolean, boolean>;
1280 /**
1281 Allows you to influence the way mouse selection happens. The
1282 functions in this facet will be called for a `mousedown` event
1283 on the editor, and can return an object that overrides the way a
1284 selection is computed from that mouse click or drag.
1285 */
1286 static mouseSelectionStyle: Facet<MakeSelectionStyle, readonly MakeSelectionStyle[]>;
1287 /**
1288 Facet used to configure whether a given selection drag event
1289 should move or copy the selection. The given predicate will be
1290 called with the `mousedown` event, and can return `true` when
1291 the drag should move the content.
1292 */
1293 static dragMovesSelection: Facet<(event: MouseEvent) => boolean, readonly ((event: MouseEvent) => boolean)[]>;
1294 /**
1295 Facet used to configure whether a given selecting click adds a
1296 new range to the existing selection or replaces it entirely. The
1297 default behavior is to check `event.metaKey` on macOS, and
1298 `event.ctrlKey` elsewhere.
1299 */
1300 static clickAddsSelectionRange: Facet<(event: MouseEvent) => boolean, readonly ((event: MouseEvent) => boolean)[]>;
1301 /**
1302 A facet that determines which [decorations](https://codemirror.net/6/docs/ref/#view.Decoration)
1303 are shown in the view. Decorations can be provided in two
1304 ways—directly, or via a function that takes an editor view.
1305
1306 Only decoration sets provided directly are allowed to influence
1307 the editor's vertical layout structure. The ones provided as
1308 functions are called _after_ the new viewport has been computed,
1309 and thus **must not** introduce block widgets or replacing
1310 decorations that cover line breaks.
1311
1312 If you want decorated ranges to behave like atomic units for
1313 cursor motion and deletion purposes, also provide the range set
1314 containing the decorations to
1315 [`EditorView.atomicRanges`](https://codemirror.net/6/docs/ref/#view.EditorView^atomicRanges).
1316 */
1317 static decorations: Facet<DecorationSet | ((view: EditorView) => DecorationSet), readonly (DecorationSet | ((view: EditorView) => DecorationSet))[]>;
1318 /**
1319 [Block wrappers](https://codemirror.net/6/docs/ref/#view.BlockWrapper) provide a way to add DOM
1320 structure around editor lines and block widgets. Sets of
1321 wrappers are provided in a similar way to decorations, and are
1322 nested in a similar way when they overlap. A wrapper affects all
1323 lines and block widgets that start inside its range.
1324 */
1325 static blockWrappers: Facet<_codemirror_state.RangeSet<BlockWrapper> | ((view: EditorView) => _codemirror_state.RangeSet<BlockWrapper>), readonly (_codemirror_state.RangeSet<BlockWrapper> | ((view: EditorView) => _codemirror_state.RangeSet<BlockWrapper>))[]>;
1326 /**
1327 Facet that works much like
1328 [`decorations`](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), but puts its
1329 inputs at the very bottom of the precedence stack, meaning mark
1330 decorations provided here will only be split by other, partially
1331 overlapping `outerDecorations` ranges, and wrap around all
1332 regular decorations. Use this for mark elements that should, as
1333 much as possible, remain in one piece.
1334 */
1335 static outerDecorations: Facet<DecorationSet | ((view: EditorView) => DecorationSet), readonly (DecorationSet | ((view: EditorView) => DecorationSet))[]>;
1336 /**
1337 Used to provide ranges that should be treated as atoms as far as
1338 cursor motion is concerned. This causes methods like
1339 [`moveByChar`](https://codemirror.net/6/docs/ref/#view.EditorView.moveByChar) and
1340 [`moveVertically`](https://codemirror.net/6/docs/ref/#view.EditorView.moveVertically) (and the
1341 commands built on top of them) to skip across such regions when
1342 a selection endpoint would enter them. This does _not_ prevent
1343 direct programmatic [selection
1344 updates](https://codemirror.net/6/docs/ref/#state.TransactionSpec.selection) from moving into such
1345 regions.
1346 */
1347 static atomicRanges: Facet<(view: EditorView) => _codemirror_state.RangeSet<any>, readonly ((view: EditorView) => _codemirror_state.RangeSet<any>)[]>;
1348 /**
1349 When range decorations add a `unicode-bidi: isolate` style, they
1350 should also include a
1351 [`bidiIsolate`](https://codemirror.net/6/docs/ref/#view.MarkDecorationSpec.bidiIsolate) property
1352 in their decoration spec, and be exposed through this facet, so
1353 that the editor can compute the proper text order. (Other values
1354 for `unicode-bidi`, except of course `normal`, are not
1355 supported.)
1356 */
1357 static bidiIsolatedRanges: Facet<DecorationSet | ((view: EditorView) => DecorationSet), readonly (DecorationSet | ((view: EditorView) => DecorationSet))[]>;
1358 /**
1359 Facet that allows extensions to provide additional scroll
1360 margins (space around the sides of the scrolling element that
1361 should be considered invisible). This can be useful when the
1362 plugin introduces elements that cover part of that element (for
1363 example a horizontally fixed gutter).
1364 */
1365 static scrollMargins: Facet<(view: EditorView) => Partial<Rect> | null, readonly ((view: EditorView) => Partial<Rect> | null)[]>;
1366 /**
1367 Create a theme extension. The first argument can be a
1368 [`style-mod`](https://github.com/marijnh/style-mod#documentation)
1369 style spec providing the styles for the theme. These will be
1370 prefixed with a generated class for the style.
1371
1372 Because the selectors will be prefixed with a scope class, rule
1373 that directly match the editor's [wrapper
1374 element](https://codemirror.net/6/docs/ref/#view.EditorView.dom)—to which the scope class will be
1375 added—need to be explicitly differentiated by adding an `&` to
1376 the selector for that element—for example
1377 `&.cm-focused`.
1378
1379 When `dark` is set to true, the theme will be marked as dark,
1380 which will cause the `&dark` rules from [base
1381 themes](https://codemirror.net/6/docs/ref/#view.EditorView^baseTheme) to be used (as opposed to
1382 `&light` when a light theme is active).
1383 */
1384 static theme(spec: {
1385 [selector: string]: StyleSpec;
1386 }, options?: {
1387 dark?: boolean;
1388 }): Extension;
1389 /**
1390 This facet records whether a dark theme is active. The extension
1391 returned by [`theme`](https://codemirror.net/6/docs/ref/#view.EditorView^theme) automatically
1392 includes an instance of this when the `dark` option is set to
1393 true.
1394 */
1395 static darkTheme: Facet<boolean, boolean>;
1396 /**
1397 Create an extension that adds styles to the base theme. Like
1398 with [`theme`](https://codemirror.net/6/docs/ref/#view.EditorView^theme), use `&` to indicate the
1399 place of the editor wrapper element when directly targeting
1400 that. You can also use `&dark` or `&light` instead to only
1401 target editors with a dark or light theme.
1402 */
1403 static baseTheme(spec: {
1404 [selector: string]: StyleSpec;
1405 }): Extension;
1406 /**
1407 Provides a Content Security Policy nonce to use when creating
1408 the style sheets for the editor. Holds the empty string when no
1409 nonce has been provided.
1410 */
1411 static cspNonce: Facet<string, string>;
1412 /**
1413 Facet that provides additional DOM attributes for the editor's
1414 editable DOM element.
1415 */
1416 static contentAttributes: Facet<AttrSource, readonly AttrSource[]>;
1417 /**
1418 Facet that provides DOM attributes for the editor's outer
1419 element.
1420 */
1421 static editorAttributes: Facet<AttrSource, readonly AttrSource[]>;
1422 /**
1423 An extension that enables line wrapping in the editor (by
1424 setting CSS `white-space` to `pre-wrap` in the content).
1425 */
1426 static lineWrapping: Extension;
1427 /**
1428 State effect used to include screen reader announcements in a
1429 transaction. These will be added to the DOM in a visually hidden
1430 element with `aria-live="polite"` set, and should be used to
1431 describe effects that are visually obvious but may not be
1432 noticed by screen reader users (such as moving to the next
1433 search match).
1434 */
1435 static announce: _codemirror_state.StateEffectType<string>;
1436 /**
1437 Retrieve an editor view instance from the view's DOM
1438 representation.
1439 */
1440 static findFromDOM(dom: HTMLElement): EditorView | null;
1441}
1442/**
1443Helper type that maps event names to event object types, or the
1444`any` type for unknown events.
1445*/
1446interface DOMEventMap extends HTMLElementEventMap {
1447 [other: string]: any;
1448}
1449/**
1450Event handlers are specified with objects like this. For event
1451types known by TypeScript, this will infer the event argument type
1452to hold the appropriate event object type. For unknown events, it
1453is inferred to `any`, and should be explicitly set if you want type
1454checking.
1455*/
1456type DOMEventHandlers<This> = {
1457 [event in keyof DOMEventMap]?: (this: This, event: DOMEventMap[event], view: EditorView) => boolean | void;
1458};
1459
1460/**
1461Key bindings associate key names with
1462[command](https://codemirror.net/6/docs/ref/#view.Command)-style functions.
1463
1464Key names may be strings like `"Shift-Ctrl-Enter"`—a key identifier
1465prefixed with zero or more modifiers. Key identifiers are based on
1466the strings that can appear in
1467[`KeyEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key).
1468Use lowercase letters to refer to letter keys (or uppercase letters
1469if you want shift to be held). You may use `"Space"` as an alias
1470for the `" "` name.
1471
1472Modifiers can be given in any order. `Shift-` (or `s-`), `Alt-` (or
1473`a-`), `Ctrl-` (or `c-` or `Control-`) and `Cmd-` (or `m-` or
1474`Meta-`) are recognized.
1475
1476When a key binding contains multiple key names separated by
1477spaces, it represents a multi-stroke binding, which will fire when
1478the user presses the given keys after each other.
1479
1480You can use `Mod-` as a shorthand for `Cmd-` on Mac and `Ctrl-` on
1481other platforms. So `Mod-b` is `Ctrl-b` on Linux but `Cmd-b` on
1482macOS.
1483*/
1484interface KeyBinding {
1485 /**
1486 The key name to use for this binding. If the platform-specific
1487 property (`mac`, `win`, or `linux`) for the current platform is
1488 used as well in the binding, that one takes precedence. If `key`
1489 isn't defined and the platform-specific binding isn't either,
1490 a binding is ignored.
1491 */
1492 key?: string;
1493 /**
1494 Key to use specifically on macOS.
1495 */
1496 mac?: string;
1497 /**
1498 Key to use specifically on Windows.
1499 */
1500 win?: string;
1501 /**
1502 Key to use specifically on Linux.
1503 */
1504 linux?: string;
1505 /**
1506 The command to execute when this binding is triggered. When the
1507 command function returns `false`, further bindings will be tried
1508 for the key.
1509 */
1510 run?: Command;
1511 /**
1512 When given, this defines a second binding, using the (possibly
1513 platform-specific) key name prefixed with `Shift-` to activate
1514 this command.
1515 */
1516 shift?: Command;
1517 /**
1518 When this property is present, the function is called for every
1519 key that is not a multi-stroke prefix.
1520 */
1521 any?: (view: EditorView, event: KeyboardEvent) => boolean;
1522 /**
1523 By default, key bindings apply when focus is on the editor
1524 content (the `"editor"` scope). Some extensions, mostly those
1525 that define their own panels, might want to allow you to
1526 register bindings local to that panel. Such bindings should use
1527 a custom scope name. You may also assign multiple scope names to
1528 a binding, separating them by spaces.
1529 */
1530 scope?: string;
1531 /**
1532 When set to true (the default is false), this will always
1533 prevent the further handling for the bound key, even if the
1534 command(s) return false. This can be useful for cases where the
1535 native behavior of the key is annoying or irrelevant but the
1536 command doesn't always apply (such as, Mod-u for undo selection,
1537 which would cause the browser to view source instead when no
1538 selection can be undone).
1539 */
1540 preventDefault?: boolean;
1541 /**
1542 When set to true, `stopPropagation` will be called on keyboard
1543 events that have their `preventDefault` called in response to
1544 this key binding (see also
1545 [`preventDefault`](https://codemirror.net/6/docs/ref/#view.KeyBinding.preventDefault)).
1546 */
1547 stopPropagation?: boolean;
1548}
1549/**
1550Facet used for registering keymaps.
1551
1552You can add multiple keymaps to an editor. Their priorities
1553determine their precedence (the ones specified early or with high
1554priority get checked first). When a handler has returned `true`
1555for a given key, no further handlers are called.
1556*/
1557declare const keymap: Facet<readonly KeyBinding[], readonly (readonly KeyBinding[])[]>;
1558/**
1559Run the key handlers registered for a given scope. The event
1560object should be a `"keydown"` event. Returns true if any of the
1561handlers handled it.
1562*/
1563declare function runScopeHandlers(view: EditorView, event: KeyboardEvent, scope: string): boolean;
1564
1565type SelectionConfig = {
1566 /**
1567 The length of a full cursor blink cycle, in milliseconds.
1568 Defaults to 1200. Can be set to 0 to disable blinking.
1569 */
1570 cursorBlinkRate?: number;
1571 /**
1572 Whether to show a cursor for non-empty ranges. Defaults to
1573 true.
1574 */
1575 drawRangeCursor?: boolean;
1576};
1577/**
1578Returns an extension that hides the browser's native selection and
1579cursor, replacing the selection with a background behind the text
1580(with the `cm-selectionBackground` class), and the
1581cursors with elements overlaid over the code (using
1582`cm-cursor-primary` and `cm-cursor-secondary`).
1583
1584This allows the editor to display secondary selection ranges, and
1585tends to produce a type of selection more in line with that users
1586expect in a text editor (the native selection styling will often
1587leave gaps between lines and won't fill the horizontal space after
1588a line when the selection continues past it).
1589
1590It does have a performance cost, in that it requires an extra DOM
1591layout cycle for many updates (the selection is drawn based on DOM
1592layout information that's only available after laying out the
1593content).
1594*/
1595declare function drawSelection(config?: SelectionConfig): Extension;
1596/**
1597Retrieve the [`drawSelection`](https://codemirror.net/6/docs/ref/#view.drawSelection) configuration
1598for this state. (Note that this will return a set of defaults even
1599if `drawSelection` isn't enabled.)
1600*/
1601declare function getDrawSelectionConfig(state: EditorState): SelectionConfig;
1602
1603/**
1604Draws a cursor at the current drop position when something is
1605dragged over the editor.
1606*/
1607declare function dropCursor(): Extension;
1608
1609interface SpecialCharConfig {
1610 /**
1611 An optional function that renders the placeholder elements.
1612
1613 The `description` argument will be text that clarifies what the
1614 character is, which should be provided to screen readers (for
1615 example with the
1616 [`aria-label`](https://www.w3.org/TR/wai-aria/#aria-label)
1617 attribute) and optionally shown to the user in other ways (such
1618 as the
1619 [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title)
1620 attribute).
1621
1622 The given placeholder string is a suggestion for how to display
1623 the character visually.
1624 */
1625 render?: ((code: number, description: string | null, placeholder: string) => HTMLElement) | null;
1626 /**
1627 Regular expression that matches the special characters to
1628 highlight. Must have its 'g'/global flag set.
1629 */
1630 specialChars?: RegExp;
1631 /**
1632 Regular expression that can be used to add characters to the
1633 default set of characters to highlight.
1634 */
1635 addSpecialChars?: RegExp | null;
1636}
1637/**
1638Returns an extension that installs highlighting of special
1639characters.
1640*/
1641declare function highlightSpecialChars(
1642/**
1643Configuration options.
1644*/
1645config?: SpecialCharConfig): Extension;
1646
1647/**
1648Returns an extension that makes sure the content has a bottom
1649margin equivalent to the height of the editor, minus one line
1650height, so that every line in the document can be scrolled to the
1651top of the editor.
1652
1653This is only meaningful when the editor is scrollable, and should
1654not be enabled in editors that take the size of their content.
1655*/
1656declare function scrollPastEnd(): Extension;
1657
1658/**
1659Mark lines that have a cursor on them with the `"cm-activeLine"`
1660DOM class.
1661*/
1662declare function highlightActiveLine(): Extension;
1663
1664/**
1665Extension that enables a placeholder—a piece of example content
1666to show when the editor is empty.
1667*/
1668declare function placeholder(content: string | HTMLElement | ((view: EditorView) => HTMLElement)): Extension;
1669
1670/**
1671Markers shown in a [layer](https://codemirror.net/6/docs/ref/#view.layer) must conform to this
1672interface. They are created in a measuring phase, and have to
1673contain all their positioning information, so that they can be
1674drawn without further DOM layout reading.
1675
1676Markers are automatically absolutely positioned. Their parent
1677element has the same top-left corner as the document, so they
1678should be positioned relative to the document.
1679*/
1680interface LayerMarker {
1681 /**
1682 Compare this marker to a marker of the same type. Used to avoid
1683 unnecessary redraws.
1684 */
1685 eq(other: LayerMarker): boolean;
1686 /**
1687 Draw the marker to the DOM.
1688 */
1689 draw(): HTMLElement;
1690 /**
1691 Update an existing marker of this type to this marker.
1692 */
1693 update?(dom: HTMLElement, oldMarker: LayerMarker): boolean;
1694}
1695/**
1696Implementation of [`LayerMarker`](https://codemirror.net/6/docs/ref/#view.LayerMarker) that creates
1697a rectangle at a given set of coordinates.
1698*/
1699declare class RectangleMarker implements LayerMarker {
1700 private className;
1701 /**
1702 The left position of the marker (in pixels, document-relative).
1703 */
1704 readonly left: number;
1705 /**
1706 The top position of the marker.
1707 */
1708 readonly top: number;
1709 /**
1710 The width of the marker, or null if it shouldn't get a width assigned.
1711 */
1712 readonly width: number | null;
1713 /**
1714 The height of the marker.
1715 */
1716 readonly height: number;
1717 /**
1718 Create a marker with the given class and dimensions. If `width`
1719 is null, the DOM element will get no width style.
1720 */
1721 constructor(className: string,
1722 /**
1723 The left position of the marker (in pixels, document-relative).
1724 */
1725 left: number,
1726 /**
1727 The top position of the marker.
1728 */
1729 top: number,
1730 /**
1731 The width of the marker, or null if it shouldn't get a width assigned.
1732 */
1733 width: number | null,
1734 /**
1735 The height of the marker.
1736 */
1737 height: number);
1738 draw(): HTMLDivElement;
1739 update(elt: HTMLElement, prev: RectangleMarker): boolean;
1740 private adjust;
1741 eq(p: RectangleMarker): boolean;
1742 /**
1743 Create a set of rectangles for the given selection range,
1744 assigning them theclass`className`. Will create a single
1745 rectangle for empty ranges, and a set of selection-style
1746 rectangles covering the range's content (in a bidi-aware
1747 way) for non-empty ones.
1748 */
1749 static forRange(view: EditorView, className: string, range: SelectionRange): readonly RectangleMarker[];
1750}
1751interface LayerConfig {
1752 /**
1753 Determines whether this layer is shown above or below the text.
1754 */
1755 above: boolean;
1756 /**
1757 When given, this class is added to the DOM element that will
1758 wrap the markers.
1759 */
1760 class?: string;
1761 /**
1762 Called on every view update. Returning true triggers a marker
1763 update (a call to `markers` and drawing of those markers).
1764 */
1765 update(update: ViewUpdate, layer: HTMLElement): boolean;
1766 /**
1767 Whether to update this layer every time the document view
1768 changes. Defaults to true.
1769 */
1770 updateOnDocViewUpdate?: boolean;
1771 /**
1772 Build a set of markers for this layer, and measure their
1773 dimensions.
1774 */
1775 markers(view: EditorView): readonly LayerMarker[];
1776 /**
1777 If given, this is called when the layer is created.
1778 */
1779 mount?(layer: HTMLElement, view: EditorView): void;
1780 /**
1781 If given, called when the layer is removed from the editor or
1782 the entire editor is destroyed.
1783 */
1784 destroy?(layer: HTMLElement, view: EditorView): void;
1785}
1786/**
1787Define a layer.
1788*/
1789declare function layer(config: LayerConfig): Extension;
1790
1791/**
1792Helper class used to make it easier to maintain decorations on
1793visible code that matches a given regular expression. To be used
1794in a [view plugin](https://codemirror.net/6/docs/ref/#view.ViewPlugin). Instances of this object
1795represent a matching configuration.
1796*/
1797declare class MatchDecorator {
1798 private regexp;
1799 private addMatch;
1800 private boundary;
1801 private maxLength;
1802 /**
1803 Create a decorator.
1804 */
1805 constructor(config: {
1806 /**
1807 The regular expression to match against the content. Will only
1808 be matched inside lines (not across them). Should have its 'g'
1809 flag set.
1810 */
1811 regexp: RegExp;
1812 /**
1813 The decoration to apply to matches, either directly or as a
1814 function of the match.
1815 */
1816 decoration?: Decoration | ((match: RegExpExecArray, view: EditorView, pos: number) => Decoration | null);
1817 /**
1818 Customize the way decorations are added for matches. This
1819 function, when given, will be called for matches and should
1820 call `add` to create decorations for them. Note that the
1821 decorations should appear *in* the given range, and the
1822 function should have no side effects beyond calling `add`.
1823
1824 The `decoration` option is ignored when `decorate` is
1825 provided.
1826 */
1827 decorate?: (add: (from: number, to: number, decoration: Decoration) => void, from: number, to: number, match: RegExpExecArray, view: EditorView) => void;
1828 /**
1829 By default, changed lines are re-matched entirely. You can
1830 provide a boundary expression, which should match single
1831 character strings that can never occur in `regexp`, to reduce
1832 the amount of re-matching.
1833 */
1834 boundary?: RegExp;
1835 /**
1836 Matching happens by line, by default, but when lines are
1837 folded or very long lines are only partially drawn, the
1838 decorator may avoid matching part of them for speed. This
1839 controls how much additional invisible content it should
1840 include in its matches. Defaults to 1000.
1841 */
1842 maxLength?: number;
1843 });
1844 /**
1845 Compute the full set of decorations for matches in the given
1846 view's viewport. You'll want to call this when initializing your
1847 plugin.
1848 */
1849 createDeco(view: EditorView): _codemirror_state.RangeSet<Decoration>;
1850 /**
1851 Update a set of decorations for a view update. `deco` _must_ be
1852 the set of decorations produced by _this_ `MatchDecorator` for
1853 the view state before the update.
1854 */
1855 updateDeco(update: ViewUpdate, deco: DecorationSet): DecorationSet;
1856 private updateRange;
1857}
1858
1859/**
1860Create an extension that enables rectangular selections. By
1861default, it will react to left mouse drag with the Alt key held
1862down. When such a selection occurs, the text within the rectangle
1863that was dragged over will be selected, as one selection
1864[range](https://codemirror.net/6/docs/ref/#state.SelectionRange) per line.
1865*/
1866declare function rectangularSelection(options?: {
1867 /**
1868 A custom predicate function, which takes a `mousedown` event and
1869 returns true if it should be used for rectangular selection.
1870 */
1871 eventFilter?: (event: MouseEvent) => boolean;
1872}): Extension;
1873/**
1874Returns an extension that turns the pointer cursor into a
1875crosshair when a given modifier key, defaulting to Alt, is held
1876down. Can serve as a visual hint that rectangular selection is
1877going to happen when paired with
1878[`rectangularSelection`](https://codemirror.net/6/docs/ref/#view.rectangularSelection).
1879*/
1880declare function crosshairCursor(options?: {
1881 key?: "Alt" | "Control" | "Shift" | "Meta";
1882}): Extension;
1883
1884/**
1885Creates an extension that configures tooltip behavior.
1886*/
1887declare function tooltips(config?: {
1888 /**
1889 By default, tooltips use `"fixed"`
1890 [positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position),
1891 which has the advantage that tooltips don't get cut off by
1892 scrollable parent elements. However, CSS rules like `contain:
1893 layout` can break fixed positioning in child nodes, which can be
1894 worked about by using `"absolute"` here.
1895
1896 On iOS, which at the time of writing still doesn't properly
1897 support fixed positioning, the library always uses absolute
1898 positioning.
1899
1900 If the tooltip parent element sits in a transformed element, the
1901 library also falls back to absolute positioning.
1902 */
1903 position?: "fixed" | "absolute";
1904 /**
1905 The element to put the tooltips into. By default, they are put
1906 in the editor (`cm-editor`) element, and that is usually what
1907 you want. But in some layouts that can lead to positioning
1908 issues, and you need to use a different parent to work around
1909 those.
1910 */
1911 parent?: HTMLElement;
1912 /**
1913 By default, when figuring out whether there is room for a
1914 tooltip at a given position, the extension considers the entire
1915 space between 0,0 and
1916 `documentElement.clientWidth`/`clientHeight` to be available for
1917 showing tooltips. You can provide a function here that returns
1918 an alternative rectangle.
1919 */
1920 tooltipSpace?: (view: EditorView) => Rect;
1921}): Extension;
1922/**
1923Describes a tooltip. Values of this type, when provided through
1924the [`showTooltip`](https://codemirror.net/6/docs/ref/#view.showTooltip) facet, control the
1925individual tooltips on the editor.
1926*/
1927interface Tooltip {
1928 /**
1929 The document position at which to show the tooltip.
1930 */
1931 pos: number;
1932 /**
1933 The end of the range annotated by this tooltip, if different
1934 from `pos`.
1935 */
1936 end?: number;
1937 /**
1938 A constructor function that creates the tooltip's [DOM
1939 representation](https://codemirror.net/6/docs/ref/#view.TooltipView).
1940 */
1941 create(view: EditorView): TooltipView;
1942 /**
1943 Whether the tooltip should be shown above or below the target
1944 position. Not guaranteed to be respected for hover tooltips
1945 since all hover tooltips for the same range are always
1946 positioned together. Defaults to false.
1947 */
1948 above?: boolean;
1949 /**
1950 Whether the `above` option should be honored when there isn't
1951 enough space on that side to show the tooltip inside the
1952 viewport. Defaults to false.
1953 */
1954 strictSide?: boolean;
1955 /**
1956 When set to true, show a triangle connecting the tooltip element
1957 to position `pos`.
1958 */
1959 arrow?: boolean;
1960 /**
1961 By default, tooltips are hidden when their position is outside
1962 of the visible editor content. Set this to false to turn that
1963 off.
1964 */
1965 clip?: boolean;
1966}
1967/**
1968Describes the way a tooltip is displayed.
1969*/
1970interface TooltipView {
1971 /**
1972 The DOM element to position over the editor.
1973 */
1974 dom: HTMLElement;
1975 /**
1976 Adjust the position of the tooltip relative to its anchor
1977 position. A positive `x` value will move the tooltip
1978 horizontally along with the text direction (so right in
1979 left-to-right context, left in right-to-left). A positive `y`
1980 will move the tooltip up when it is above its anchor, and down
1981 otherwise.
1982 */
1983 offset?: {
1984 x: number;
1985 y: number;
1986 };
1987 /**
1988 By default, a tooltip's screen position will be based on the
1989 text position of its `pos` property. This method can be provided
1990 to make the tooltip view itself responsible for finding its
1991 screen position.
1992 */
1993 getCoords?: (pos: number) => Rect;
1994 /**
1995 By default, tooltips are moved when they overlap with other
1996 tooltips. Set this to `true` to disable that behavior for this
1997 tooltip.
1998 */
1999 overlap?: boolean;
2000 /**
2001 Called after the tooltip is added to the DOM for the first time.
2002 */
2003 mount?(view: EditorView): void;
2004 /**
2005 Update the DOM element for a change in the view's state.
2006 */
2007 update?(update: ViewUpdate): void;
2008 /**
2009 Called when the tooltip is removed from the editor or the editor
2010 is destroyed.
2011 */
2012 destroy?(): void;
2013 /**
2014 Called when the tooltip has been (re)positioned. The argument is
2015 the [space](https://codemirror.net/6/docs/ref/#view.tooltips^config.tooltipSpace) available to the
2016 tooltip.
2017 */
2018 positioned?(space: Rect): void;
2019 /**
2020 By default, the library will restrict the size of tooltips so
2021 that they don't stick out of the available space. Set this to
2022 false to disable that.
2023 */
2024 resize?: boolean;
2025}
2026/**
2027Facet to which an extension can add a value to show a tooltip.
2028*/
2029declare const showTooltip: Facet<Tooltip | null, readonly (Tooltip | null)[]>;
2030/**
2031The type of function that can be used as a [hover tooltip
2032source](https://codemirror.net/6/docs/ref/#view.hoverTooltip^source).
2033*/
2034type HoverTooltipSource = (view: EditorView, pos: number, side: -1 | 1) => Tooltip | readonly Tooltip[] | null | Promise<Tooltip | readonly Tooltip[] | null>;
2035/**
2036Set up a hover tooltip, which shows up when the pointer hovers
2037over ranges of text. The callback is called when the mouse hovers
2038over the document text. It should, if there is a tooltip
2039associated with position `pos`, return the tooltip description
2040(either directly or in a promise). The `side` argument indicates
2041on which side of the position the pointer is—it will be -1 if the
2042pointer is before the position, 1 if after the position.
2043
2044Note that all hover tooltips are hosted within a single tooltip
2045container element. This allows multiple tooltips over the same
2046range to be "merged" together without overlapping.
2047
2048The return value is a valid [editor extension](https://codemirror.net/6/docs/ref/#state.Extension)
2049but also provides an `active` property holding a state field that
2050can be used to read the currently active tooltips produced by this
2051extension.
2052*/
2053declare function hoverTooltip(source: HoverTooltipSource, options?: {
2054 /**
2055 Controls whether a transaction hides the tooltip. The default
2056 is to not hide.
2057 */
2058 hideOn?: (tr: Transaction, tooltip: Tooltip) => boolean;
2059 /**
2060 When enabled (this defaults to false), close the tooltip
2061 whenever the document changes or the selection is set.
2062 */
2063 hideOnChange?: boolean | "touch";
2064 /**
2065 Hover time after which the tooltip should appear, in
2066 milliseconds. Defaults to 300ms.
2067 */
2068 hoverTime?: number;
2069}): Extension & {
2070 active: StateField<readonly Tooltip[]>;
2071};
2072/**
2073Get the active tooltip view for a given tooltip, if available.
2074*/
2075declare function getTooltip(view: EditorView, tooltip: Tooltip): TooltipView | null;
2076/**
2077Returns true if any hover tooltips are currently active.
2078*/
2079declare function hasHoverTooltips(state: EditorState): boolean;
2080/**
2081Transaction effect that closes all hover tooltips.
2082*/
2083declare const closeHoverTooltips: StateEffect<null>;
2084/**
2085Tell the tooltip extension to recompute the position of the active
2086tooltips. This can be useful when something happens (such as a
2087re-positioning or CSS change affecting the editor) that could
2088invalidate the existing tooltip positions.
2089*/
2090declare function repositionTooltips(view: EditorView): void;
2091
2092type PanelConfig = {
2093 /**
2094 By default, panels will be placed inside the editor's DOM
2095 structure. You can use this option to override where panels with
2096 `top: true` are placed.
2097 */
2098 topContainer?: HTMLElement;
2099 /**
2100 Override where panels with `top: false` are placed.
2101 */
2102 bottomContainer?: HTMLElement;
2103};
2104/**
2105Configures the panel-managing extension.
2106*/
2107declare function panels(config?: PanelConfig): Extension;
2108/**
2109Object that describes an active panel.
2110*/
2111interface Panel {
2112 /**
2113 The element representing this panel. The library will add the
2114 `"cm-panel"` DOM class to this.
2115 */
2116 dom: HTMLElement;
2117 /**
2118 Optionally called after the panel has been added to the editor.
2119 */
2120 mount?(): void;
2121 /**
2122 Update the DOM for a given view update.
2123 */
2124 update?(update: ViewUpdate): void;
2125 /**
2126 Called when the panel is removed from the editor or the editor
2127 is destroyed.
2128 */
2129 destroy?(): void;
2130 /**
2131 Whether the panel should be at the top or bottom of the editor.
2132 Defaults to false.
2133 */
2134 top?: boolean;
2135}
2136/**
2137Get the active panel created by the given constructor, if any.
2138This can be useful when you need access to your panels' DOM
2139structure.
2140*/
2141declare function getPanel(view: EditorView, panel: PanelConstructor): Panel | null;
2142/**
2143A function that initializes a panel. Used in
2144[`showPanel`](https://codemirror.net/6/docs/ref/#view.showPanel).
2145*/
2146type PanelConstructor = (view: EditorView) => Panel;
2147/**
2148Opening a panel is done by providing a constructor function for
2149the panel through this facet. (The panel is closed again when its
2150constructor is no longer provided.) Values of `null` are ignored.
2151*/
2152declare const showPanel: Facet<PanelConstructor | null, readonly (PanelConstructor | null)[]>;
2153
2154type DialogConfig = {
2155 /**
2156 A function to render the content of the dialog. The result
2157 should contain at least one `<form>` element. Submit handlers
2158 and a handler for the Escape key will be added to the form.
2159
2160 If this is not given, the `label`, `input`, and `submitLabel`
2161 fields will be used to create a simple form for you.
2162 */
2163 content?: (view: EditorView, close: () => void) => HTMLElement;
2164 /**
2165 When `content` isn't given, this provides the text shown in the
2166 dialog.
2167 */
2168 label?: string;
2169 /**
2170 The attributes for an input element shown next to the label. If
2171 not given, no input element is added.
2172 */
2173 input?: {
2174 [attr: string]: string;
2175 };
2176 /**
2177 The label for the button that submits the form. Defaults to
2178 `"OK"`.
2179 */
2180 submitLabel?: string;
2181 /**
2182 Extra classes to add to the panel.
2183 */
2184 class?: string;
2185 /**
2186 A query selector to find the field that should be focused when
2187 the dialog is opened. When set to true, this picks the first
2188 `<input>` or `<button>` element in the form.
2189 */
2190 focus?: string | boolean;
2191 /**
2192 By default, dialogs are shown below the editor. Set this to
2193 `true` to have it show up at the top.
2194 */
2195 top?: boolean;
2196};
2197/**
2198Show a panel above or below the editor to show the user a message
2199or prompt them for input. Returns an effect that can be dispatched
2200to close the dialog, and a promise that resolves when the dialog
2201is closed or a form inside of it is submitted.
2202
2203You are encouraged, if your handling of the result of the promise
2204dispatches a transaction, to include the `close` effect in it. If
2205you don't, this function will automatically dispatch a separate
2206transaction right after.
2207*/
2208declare function showDialog(view: EditorView, config: DialogConfig): {
2209 close: StateEffect<unknown>;
2210 result: Promise<HTMLFormElement | null>;
2211};
2212/**
2213Find the [`Panel`](https://codemirror.net/6/docs/ref/#view.Panel) for an open dialog, using a class
2214name as identifier.
2215*/
2216declare function getDialog(view: EditorView, className: string): Panel | null;
2217
2218/**
2219A gutter marker represents a bit of information attached to a line
2220in a specific gutter. Your own custom markers have to extend this
2221class.
2222*/
2223declare abstract class GutterMarker extends RangeValue {
2224 /**
2225 Compare this marker to another marker of the same type.
2226 */
2227 eq(other: GutterMarker): boolean;
2228 /**
2229 Render the DOM node for this marker, if any.
2230 */
2231 toDOM?(view: EditorView): Node;
2232 /**
2233 This property can be used to add CSS classes to the gutter
2234 element that contains this marker.
2235 */
2236 elementClass: string;
2237 /**
2238 Called if the marker has a `toDOM` method and its representation
2239 was removed from a gutter.
2240 */
2241 destroy(dom: Node): void;
2242}
2243/**
2244Facet used to add a class to all gutter elements for a given line.
2245Markers given to this facet should _only_ define an
2246[`elementclass`](https://codemirror.net/6/docs/ref/#view.GutterMarker.elementClass), not a
2247[`toDOM`](https://codemirror.net/6/docs/ref/#view.GutterMarker.toDOM) (or the marker will appear
2248in all gutters for the line).
2249*/
2250declare const gutterLineClass: Facet<RangeSet<GutterMarker>, readonly RangeSet<GutterMarker>[]>;
2251/**
2252Facet used to add a class to all gutter elements next to a widget.
2253Should not provide widgets with a `toDOM` method.
2254*/
2255declare const gutterWidgetClass: Facet<(view: EditorView, widget: WidgetType, block: BlockInfo) => GutterMarker | null, readonly ((view: EditorView, widget: WidgetType, block: BlockInfo) => GutterMarker | null)[]>;
2256type Handlers = {
2257 [event: string]: (view: EditorView, line: BlockInfo, event: Event) => boolean;
2258};
2259interface GutterConfig {
2260 /**
2261 An extra CSS class to be added to the wrapper (`cm-gutter`)
2262 element.
2263 */
2264 class?: string;
2265 /**
2266 Controls whether empty gutter elements should be rendered.
2267 Defaults to false.
2268 */
2269 renderEmptyElements?: boolean;
2270 /**
2271 Retrieve a set of markers to use in this gutter.
2272 */
2273 markers?: (view: EditorView) => (RangeSet<GutterMarker> | readonly RangeSet<GutterMarker>[]);
2274 /**
2275 Can be used to optionally add a single marker to every line.
2276 */
2277 lineMarker?: (view: EditorView, line: BlockInfo, otherMarkers: readonly GutterMarker[]) => GutterMarker | null;
2278 /**
2279 Associate markers with block widgets in the document.
2280 */
2281 widgetMarker?: (view: EditorView, widget: WidgetType, block: BlockInfo) => GutterMarker | null;
2282 /**
2283 If line or widget markers depend on additional state, and should
2284 be updated when that changes, pass a predicate here that checks
2285 whether a given view update might change the line markers.
2286 */
2287 lineMarkerChange?: null | ((update: ViewUpdate) => boolean);
2288 /**
2289 Add a hidden spacer element that gives the gutter its base
2290 width.
2291 */
2292 initialSpacer?: null | ((view: EditorView) => GutterMarker);
2293 /**
2294 Update the spacer element when the view is updated.
2295 */
2296 updateSpacer?: null | ((spacer: GutterMarker, update: ViewUpdate) => GutterMarker);
2297 /**
2298 Supply event handlers for DOM events on this gutter.
2299 */
2300 domEventHandlers?: Handlers;
2301 /**
2302 By default, gutters are shown horizontally before the editor
2303 content (to the left in a left-to-right layout). Set this to
2304 `"after"` to show a gutter on the other side of the content.
2305 */
2306 side?: "before" | "after";
2307}
2308/**
2309Define an editor gutter. The order in which the gutters appear is
2310determined by their extension priority.
2311*/
2312declare function gutter(config: GutterConfig): Extension;
2313/**
2314The gutter-drawing plugin is automatically enabled when you add a
2315gutter, but you can use this function to explicitly configure it.
2316
2317Unless `fixed` is explicitly set to `false`, the gutters are
2318fixed, meaning they don't scroll along with the content
2319horizontally (except on Internet Explorer, which doesn't support
2320CSS [`position:
2321sticky`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky)).
2322*/
2323declare function gutters(config?: {
2324 fixed?: boolean;
2325}): Extension;
2326interface LineNumberConfig {
2327 /**
2328 How to display line numbers. Defaults to simply converting them
2329 to string.
2330 */
2331 formatNumber?: (lineNo: number, state: EditorState) => string;
2332 /**
2333 Supply event handlers for DOM events on this gutter.
2334 */
2335 domEventHandlers?: Handlers;
2336}
2337/**
2338Facet used to provide markers to the line number gutter.
2339*/
2340declare const lineNumberMarkers: Facet<RangeSet<GutterMarker>, readonly RangeSet<GutterMarker>[]>;
2341/**
2342Facet used to create markers in the line number gutter next to widgets.
2343*/
2344declare const lineNumberWidgetMarker: Facet<(view: EditorView, widget: WidgetType, block: BlockInfo) => GutterMarker | null, readonly ((view: EditorView, widget: WidgetType, block: BlockInfo) => GutterMarker | null)[]>;
2345/**
2346Create a line number gutter extension.
2347*/
2348declare function lineNumbers(config?: LineNumberConfig): Extension;
2349/**
2350Returns an extension that adds a `cm-activeLineGutter` class to
2351all gutter elements on the [active
2352line](https://codemirror.net/6/docs/ref/#view.highlightActiveLine).
2353*/
2354declare function highlightActiveLineGutter(): Extension;
2355
2356/**
2357Returns an extension that highlights whitespace, adding a
2358`cm-highlightSpace` class to stretches of spaces, and a
2359`cm-highlightTab` class to individual tab characters. By default,
2360the former are shown as faint dots, and the latter as arrows.
2361*/
2362declare function highlightWhitespace(): Extension;
2363/**
2364Returns an extension that adds a `cm-trailingSpace` class to all
2365trailing whitespace.
2366*/
2367declare function highlightTrailingWhitespace(): Extension;
2368
2369export { BidiSpan, BlockInfo, BlockType, BlockWrapper, type Command, type DOMEventHandlers, type DOMEventMap, Decoration, type DecorationSet, Direction, EditorView, type EditorViewConfig, GutterMarker, type HoverTooltipSource, type KeyBinding, type LayerMarker, MatchDecorator, type MouseSelectionStyle, type Panel, type PanelConstructor, type PluginSpec, type PluginValue, type Rect, RectangleMarker, type Tooltip, type TooltipView, ViewPlugin, ViewUpdate, WidgetType, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getDialog, getDrawSelectionConfig, getPanel, getTooltip, gutter, gutterLineClass, gutterWidgetClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, hoverTooltip, keymap, layer, lineNumberMarkers, lineNumberWidgetMarker, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showDialog, showPanel, showTooltip, tooltips };