Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol diffdown.com
at 213366352749480b5340742fa42e5a46c51137ed 2369 lines 90 kB view raw
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 };