import { EditorState, Extension, TextblockMap, Transaction, StateEffect, EditorSelection, StateField } from 'wordgard/state'; import { Node as Node$1, Elt, Schema, Pos, ChangeSet, MapMode, Plot, Mark } from 'wordgard/doc'; import { StyleSpec } from 'style-mod'; type Attrs = Record; declare class Widget { readonly value: T; readonly type: Widget.Type>; constructor(type: Widget.Type, value: T); eq(other: any): boolean; static define(spec: Widget.Spec): Widget.Type; static create(spec: Widget.Spec): Widget; get hasContent(): boolean; } declare namespace Widget { type Spec = { render: (value: T) => Element | Text; eq?: (a: T, b: T) => boolean; destroy?: (value: T) => void; handleEvent?: (event: Event, view: EditorView) => boolean; }; class Type { render: (value: T) => Element | Text; eq: (a: T, b: T) => boolean; handleEvent: (event: Event, view: EditorView) => boolean; destroy: (value: T) => void; constructor(spec: Widget.Spec); of(value: T): Widget; } const Text: Type; } type DecoElt = Elt; type Shape = Widget | DecoElt; declare enum WidgetPlace { Before = 0, After = 1, Start = 2, End = 3 } declare function tagShape(spec: { tag: Node$1.Type | Node$1.Tag; shape: Shape | ((tag: Node$1.Tag) => Shape); atom?: boolean; }): Extension; declare class TagShape { readonly type: Node$1.Type; readonly shape: (tag: Node$1.Tag) => Shape; extension: Extension; constructor(type: Node$1.Type, shape: (tag: Node$1.Tag) => Shape); } type WrapperSpec = { element: string; attributes?: Attrs | ((param: Node$1.Tag) => Attrs); rank?: number; spanning?: boolean; }; type AttributeSpec = { attribute: string; value: string | ((param: Node$1.Tag) => string); }; type WidgetSpec = { widget: Widget | ((param: Node$1.Tag) => Widget); place: keyof typeof WidgetPlace | WidgetPlace; }; declare function tagDecoration(spec: { query: Node$1.Query; } & (WrapperSpec | AttributeSpec | WidgetSpec)): Extension; declare class TagWidgetSource { readonly query: Node$1.Query; place: WidgetPlace; widget: (tag: Node$1.Tag) => Widget; extension: Extension; constructor(query: Node$1.Query, deco: WidgetSpec); } declare const tagWidgets: any; declare class TagWrapperSource { readonly query: Node$1.Query; wrapper: (tag: Node$1.Tag) => DecoElt; rank: number; spanning: boolean; extension: Extension; constructor(query: Node$1.Query, deco: WrapperSpec); } declare const tagWrappers: any; declare class TagAttributeSource { readonly query: Node$1.Query; attribute: string; value: string | ((tag: Node$1.Tag) => string); extension: Extension; constructor(query: Node$1.Query, deco: AttributeSpec); } declare const tagAttributes: any; declare enum DecorationScope { Atom = 1, InlineAtom = 2, All = 4 } declare const enum Inc { None = 0, Start = 1, End = 2 } declare abstract class RangeDecoration implements RangeSet.Value { readonly data: Data; readonly query: Node$1.Query | null; readonly scope: DecorationScope; readonly inc: Inc; constructor(spec: RangeDecoration.Spec, data: Data); get inclusiveStart(): boolean; get inclusiveEnd(): boolean; abstract eq(other: RangeSet.Value): boolean; static wrapper(spec: RangeDecoration.Spec & WrapperSpec): RangeDecoration; static wrapper(spec: RangeDecoration.Spec & WrapperSpec & { data: Data; }): RangeDecoration; static attribute(spec: RangeDecoration.Spec & AttributeSpec): RangeDecoration; static attribute(spec: RangeDecoration.Spec & AttributeSpec & { data: Data; }): RangeDecoration; } declare namespace RangeDecoration { type Spec = { inclusive?: boolean | "start" | "end"; scope?: DecorationScope; query?: Node$1.Query; }; const source: any; } declare class WrapperRangeDecoration extends RangeDecoration { readonly elt: (tag: Node$1.Tag) => Elt; readonly element: string; readonly attrs: Attrs | ((tag: Node$1.Tag) => Attrs) | null; readonly rank: number; readonly spanning: boolean; constructor(spec: RangeDecoration.Spec & WrapperSpec, data: Data); eq(other: RangeSet.Value): boolean; } declare abstract class Decoration implements PointSet.Value { abstract eq(other: PointSet.Value): boolean; abstract side: number; abstract mapMode: MapMode; static widget(widget: Widget, spec?: { side?: number; mapMode?: MapMode; }): WidgetDecoration; static attribute(attribute: string, value: string, spec?: { selector?: string; }): AttributeDecoration; static shape(shape: Shape): ShapeDecoration; static wrapper(wrapper: (shape: Shape) => Shape): WrapperDecoration; static source: any; } declare class ShapeDecoration extends Decoration { readonly shape: Shape; constructor(shape: Shape); eq(other: PointSet.Value): boolean; get mapMode(): any; get side(): number; } declare class WidgetDecoration extends Decoration { readonly widget: Widget; readonly side: number; readonly mapMode: MapMode; constructor(widget: Widget, side: number, mapMode: MapMode); eq(other: PointSet.Value): boolean; } declare class AttributeDecoration extends Decoration { readonly attribute: string; readonly value: string; readonly selector: Elt.Selector | null; constructor(attribute: string, value: string, selector: Elt.Selector | null); eq(other: PointSet.Value): boolean; get mapMode(): any; get side(): number; } declare class WrapperDecoration extends Decoration { readonly wrap: (shape: Shape) => Shape; constructor(wrap: (shape: Shape) => Shape); eq(other: PointSet.Value): boolean; get mapMode(): any; get side(): number; } declare class PointSet { readonly positions: readonly number[]; readonly values: readonly Value[]; constructor(positions: readonly number[], values: readonly Value[]); get length(): number; map(changes: ChangeSet): PointSet; merge(other: PointSet): PointSet; compareRange(fromA: number, b: PointSet, fromB: number, len: number, change: (pos: number, val: Value) => void): void; iter(): PointIterator; at(pos: number): Value | undefined; static create(source: Iterable<[number, Value]> | ((add: (pos: number, value: Value) => void) => void)): PointSet; static empty: PointSet; } declare namespace PointSet { interface Value { side: number; mapMode: MapMode; eq(other: PointSet.Value): boolean; } } declare class PointIterator { readonly set: PointSet; value: Value | null; done: boolean; pos: number; i: number; constructor(set: PointSet); fill(i: number): void; next(): void; get side(): number; goto(pos: number): void; } declare class RangeSet { readonly from: readonly number[]; readonly to: readonly number[]; readonly values: readonly Value[]; constructor(from: readonly number[], to: readonly number[], values: readonly Value[]); get length(): number; map(changes: ChangeSet): RangeSet; iter(): RangeIterator; compareRange(fromA: number, b: RangeSet, fromB: number, len: number, change: (from: number, to: number) => void): void; static create(source: Iterable<[number, number, Value]> | ((add: (from: number, to: number, value: Value) => void) => void)): RangeSet; static empty: RangeSet; } declare namespace RangeSet { interface Value { inclusiveStart: boolean; inclusiveEnd: boolean; eq(other: Value): boolean; } } declare class RangeIterator { readonly set: RangeSet; value: Value | null; from: number; to: number; done: boolean; i: number; constructor(set: RangeSet); fill(i: number): void; next(): void; goto(pos: number): void; } declare function findChangedRanges(prev: EditorState, state: EditorState, sections: ChangeSet.Sections): ChangeSet.Sections; interface DecoWalker { enter(node: Plot, shape: DecoElt, wrappers: readonly WrapperSource[]): void; leave(): void; node(node: Node$1, shape: Shape, wrappers: readonly WrapperSource[]): void; widget(widget: Widget, side: number): void; } type WrapperSource = Mark | TagWrapperSource | WrapperRangeDecoration; declare function renderWrapper(src: WrapperSource, tag: Node$1.Tag): DecoElt; declare const renderMarkWrapper: (arg: Mark) => any; declare class DecoIterator { readonly state: EditorState; globalWidgets: readonly TagWidgetSource[]; globalWrappers: readonly TagWrapperSource[]; globalAttrs: readonly TagAttributeSource[]; schema: Schema; tagShapes: readonly TagShape[]; pos: Pos; rangeIter: RangeIterator[]; pointIter: PointIterator[]; constructor(state: EditorState); widgets(tag: Node$1.Tag, place: WidgetPlace, walker: DecoWalker): void; walk(from: number, inclusiveStart: boolean, to: number, walker: DecoWalker): void; tagShape(tag: Node$1.Tag, active: RangeIterator>[]): any; } type CompositionInfo = { fromA: number; toA: number; text: string; target: Text | null; wrapCursor?: readonly Mark[] | null; }; declare const enum TileFlag { None = 0, NodeInner = 1, Spanning = 2, Point = 4, PointBefore = 8, PointAfter = 16, PointSide = 24, Composition = 32, Synced = 64, Atom = 128 } declare const enum Orientation { Row = 0, Col = 1 } declare const enum PosAssocFlag { AssocMask = 3, VertOutside = 4 } declare class PosAssoc { readonly pos: number; readonly target: number | null; readonly flags: PosAssocFlag; constructor(pos: number, target: number | null, flags: PosAssocFlag); get assoc(): -1 | 0 | 1; get vertOutside(): boolean; map(mapping: ChangeSet): PosAssoc; static create(pos: number, assoc: -1 | 0 | 1, target?: number | null, vertOutside?: boolean): PosAssoc; } declare class ContentPos { readonly tile: Tile; readonly offset: number; readonly pos: number; constructor(tile: Tile, offset: number, pos: number); get dom(): Element | Text; } declare abstract class Tile { dom: Element | Text; parent: CompositeTile | null; abstract children: Tile[]; length: number; flags: TileFlag; constructor(dom: Element | Text, flags: number); get isAtom(): boolean; get isNodeOuter(): boolean; get isNodeInner(): boolean; get isNode(): boolean; get isText(): boolean; get isDoc(): boolean; get isSpanning(): boolean; get isComposition(): boolean; get isPoint(): boolean; get node(): Node$1 | null; posBeforeChild(child: Tile, ownStart?: number): number; get posBefore(): number; get posAtStart(): number; get posAfter(): number; get posAtEnd(): number; get boundary(): 0 | 1; get firstChild(): Tile | null; get lastChild(): Tile | null; localPosFromDOM(dom: DOMNode, offset: number, bias: -1 | 1): number; handleEvent(event: Event, view: EditorView): boolean; get ignoreMutations(): boolean; toString(): string; sync(): void; destroyDropped(reused: Map): void; destroy(): void; nearestNode(): Tile; posAtCoords(state: EditorState, x: number, y: number): PosAssoc; abstract posAtCoordsInner(start: number, state: EditorState, x: number, y: number, textblock: TextblockMap | null, orientation: Orientation): PosAssoc; static get(node: DOMNode): Tile | undefined; } declare class CompositeTile extends Tile { children: Tile[]; dom: Element; addChild(child: Tile): void; sync(): void; syncChildren(): void; posAtCoordsInner(start: number, state: EditorState, x: number, y: number, textblock: TextblockMap | null, orientation: Orientation): PosAssoc; posAtCoordsRow(start: number, state: EditorState, x: number, y: number, textblock: TextblockMap | null): PosAssoc | null; posAtCoordsCol(start: number, state: EditorState, x: number, y: number, textblock: TextblockMap | null): PosAssoc; } declare function dirAt(state: EditorState, pos: number, assoc: -1 | 1, textblock?: TextblockMap | null): any; declare class DocTile extends CompositeTile { state: EditorState; readonly cursorWrapper: readonly Mark[] | null; dom: Element; constructor(state: EditorState, dom: Element, cursorWrapper: readonly Mark[] | null); static create(state: EditorState, dom: Element): DocTile; get isDoc(): boolean; get node(): any; update(state: EditorState, changes: ChangeSet.Sections, composition?: CompositionInfo | null): DocTile; updateRanges(state: EditorState, sections: ChangeSet.Sections, composition?: CompositionInfo | null): DocTile; nearest(dom: DOMNode, requireNode?: boolean): Tile | null; owns(elt: Tile): boolean; resolve(pos: number, assoc?: -1 | 0 | 1): ContentPos; posFromDOM(dom: DOMNode, offset: number, bias?: -1 | 1): number; posBeforeDOM(dom: DOMNode): number | null; coordsForElement(pos: number): DOMRect | null; } declare class EltTile extends CompositeTile { readonly elt: DecoElt; readonly _node: Node$1 | null; dom: Element; parent: CompositeTile; constructor(elt: DecoElt, _node: Node$1 | null, flags: number, length: number, dom: Element); get isSpanning(): boolean; get isNodeOuter(): boolean; get isAtom(): boolean; get boundary(): 0 | 1; get node(): Node$1 | null; get contentTile(): EltTile | null; static of(elt: DecoElt, node: Node$1 | null, flags: number, length: number, dom?: Element | null): EltTile; } declare class WidgetTile extends Tile { readonly widget: Widget; readonly _node: Node$1 | null; constructor(widget: Widget, _node: Node$1 | null, flags: TileFlag, length?: number, dom?: Element | Text); get isNodeOuter(): boolean; get isAtom(): boolean; get node(): Node$1 | null; get children(): Tile[]; handleEvent(event: Event, view: EditorView): boolean; destroy(): void; toString(): string; posAtCoordsInner(start: number, state: EditorState, x: number, y: number, textblock: TextblockMap | null, orientation: Orientation): PosAssoc; } declare class TextTile extends Tile { text: string; dom: Text; constructor(text: string, dom: Text, flags?: TileFlag); get children(): Tile[]; get isText(): boolean; get isNodeOuter(): boolean; get isAtom(): boolean; sync(): void; toString(): string; localPosFromDOM(dom: DOMNode, offset: number): number; posAtCoordsInner(start: number, state: EditorState, x: number, y: number, textblock: TextblockMap | null, orientation: Orientation): PosAssoc; static of(text: string): TextTile; } declare const enum Reused { Full = 1, DOM = 2 } type DOMNode = Node; declare global { interface Node { wgTile?: Tile; } } type ScrollStrategy = "nearest" | "start" | "end" | "center"; /** This is the interface plugin objects conform to. */ interface PluginValue { /** Notifies the plugin of an update that happened in the view. This is called _before_ the view updates its own DOM. It is responsible for updating the plugin's internal state (including any state that may be read by plugin fields) and _writing_ to the DOM for the changes in the update. To avoid unnecessary layout recomputations, it should _not_ read the DOM layout—use [`requestMeasure`](#view.EditorView.requestMeasure) to schedule your code in a DOM reading phase if you need to. */ update?(update: ViewUpdate): void; /** When present, this will be called when an update causes any changes in the DOM representation of the document. */ docViewUpdate?(view: EditorView): void; /** Called when the plugin is removed from an editor. This should clean up any changes it made to the editor itself. */ destroy?(view: EditorView): void; /** Called when the editor is attached to the DOM. If the plugin needs to allocate any resource that must be released, or modify something outside the editor, it should do it in this method, and make sure to release/undo it in its `disconnect` method. */ connect?(view: EditorView): void; /** Called when the editor is removed from the DOM. */ disconnect?(view: EditorView): void; } /** Provides additional information when defining a [view plugin](#view.ViewPlugin). */ interface PluginSpec { /** Register the given [event handlers](#view.EditorView^domEventHandlers) for the plugin. When called, these will have their `this` bound to the plugin value. */ eventHandlers?: DOMEventHandlers; /** Registers [event observers](#view.EditorView^domEventObservers) for the plugin. Will, when called, have their `this` bound to the plugin value. */ eventObservers?: DOMEventHandlers; /** Specify that the plugin provides additional extensions when added to an editor configuration. */ provide?: (plugin: ViewPlugin) => Extension; } /** View plugins associate stateful values with a view. They can influence the way the content is drawn, and are notified of things that happen in the view. */ declare class ViewPlugin { /** Instances of this class act as extensions. */ extension: Extension; private constructor(); /** Define a plugin from a constructor function that creates the plugin's value, given an editor view. */ static define(create: (view: EditorView) => V, spec?: PluginSpec): ViewPlugin; /** Create a plugin for a class whose constructor takes a single editor view as argument. */ static fromClass(cls: { new (view: EditorView): V; }, spec?: PluginSpec): ViewPlugin; } /** View [plugins](#view.ViewPlugin) are given instances of this class, which describe what happened, whenever the view is updated. */ declare class ViewUpdate { /** The editor view that the update is associated with. */ readonly view: EditorView; /** The previous editor state. */ readonly startState: EditorState; /** The new editor state. */ readonly state: EditorState; /** The transactions involved in the update. May be empty. */ readonly transactions: readonly Transaction[]; /** The changes made to the document by this update. */ readonly changes: ChangeSet; private constructor(); /** Returns true when the document was modified or the size of the editor, or elements within the editor, changed. */ get geometryChanged(): boolean; /** True when this update indicates a focus change. */ get focusChanged(): boolean; /** Whether the document changed in this update. */ get docChanged(): boolean; /** Whether the selection was explicitly set in this update. */ get selectionSet(): boolean; } declare enum Direction { LTR = 0, RTL = 1 } /** The type of object given to the [`EditorView`](#view.EditorView) constructor. */ interface EditorViewSpec extends Partial { /** The view's initial state. If not given, a new state is created by passing this configuration object to [`EditorState.create`](#state.EditorState^create), using its `doc`, `selection`, and `extensions` field (if provided). */ state?: EditorState; /** When given, the editor is immediately appended to the given element on creation. (Otherwise, you'll have to place the view element in the document yourself.) */ parent?: Element | DocumentFragment; /** Pass an effect created with [`EditorView.scrollIntoView`](#view.EditorView^scrollIntoView) or [`EditorView.scrollSnapshot`](#view.EditorView.scrollSnapshot) here to set an initial scroll position. */ scrollTo?: StateEffect; } /** An editor view represents the editor's user interface. It holds the editable DOM surface, and possibly other elements such as panels. It handles events and dispatches state transactions for editing actions. */ declare class EditorView { /** The current editor state. */ get state(): EditorState; /** Indicates whether the user is currently composing text via [IME](https://en.wikipedia.org/wiki/Input_method), and at least one change has been made in the current composition. */ get composing(): boolean; /** Indicates whether the user is currently in composing state. Note that on some platforms, like Android, this will be the case a lot, since just putting the cursor on a word starts a composition there. */ get compositionStarted(): boolean | null; /** The document or shadow root that the view lives in. */ root: DocumentOrShadowRoot; /** The outer DOM element that represents the editor. */ readonly dom: HTMLElement; /** The DOM element that can be styled to scroll. (Note that it may not have been, so you can't assume this is scrollable.) */ readonly scrollDOM: HTMLElement; /** The editable DOM element holding the editor content. You should not, usually, interact with this content directly though the DOM, since the editor will immediately undo most of the changes you make. Instead, [dispatch](#view.EditorView.dispatch) [transactions](#state.Transaction) to modify content, and [decorations](#view.Decoration) to style it. */ readonly contentDOM: HTMLElement; private announceDOM; private id; private pluginMap; private editorAttrs; private contentAttrs; private styleModules; private flushing; private willFlush; private defaultDarkTheme; /** Construct a new view. You'll want to either provide a `parent` option, or put `view.dom` into your document after creating a view, so that the user can see the editor. */ constructor(spec: EditorViewSpec); setConnected(value: boolean): void; /** All editor state updates go through this. It takes a transaction or transaction spec and updates the view to show the new state produced by that transaction. This function is bound to the view instance, so it does not have to be called as a method. Note that when multiple `TransactionSpec` values are provided, these define a single transaction (the specs will be merged), not a sequence of transactions. */ dispatch(tr: Transaction): void; dispatch(...specs: Transaction.Spec[]): void; /** Update the view for the given transaction. Updates will be immediately be reflected in the object's `state` property, but updating the DOM will be deferred to the next display update. You should usually call [`dispatch`](#view.EditorView.dispatch) instead, which uses this as a primitive. */ update(transaction: Transaction): void; scheduleFlush(): void; flush(): void; private scrollTo; private runUpdate; private updatePlugins; /** Get the CSS classes for the currently active editor themes. */ get themeClasses(): string; private updateAttrs; private showAnnouncements; private mountStyles; /** Schedule a function that needs to read from the (flushed) DOM. */ requestDOMRead(read: (view: EditorView) => void): void; requestDOMWrite(write: (view: EditorView) => void): void; /** Get the value of a specific plugin, if present. Note that plugins that crash can be dropped from a view, so even when you know you registered a given plugin, it is recommended to check the return value of this method. */ plugin(plugin: ViewPlugin): T | null; /** If the editor is transformed with CSS, this provides the scale along the X axis. Otherwise, it will just be 1. Note that transforms other than translation and scaling are not supported. */ get scaleX(): number; /** Provide the CSS transformed scale along the Y axis. */ get scaleY(): number; private checkFlushed; /** Move to the end or start of the (wrapped) line. If the given position isn't in a textblock, this will return null. */ moveToLineBoundary(start: EditorSelection, forward: boolean): any; /** Move a cursor position vertically. When `distance` isn't given, it defaults to moving to the vertical element below or above the start position. Otherwise, `distance` should provide a positive distance in pixels. When `start` has a [`goalColumn`](#state.SelectionRange.goalColumn), the vertical motion will use that as a target horizontal position. Otherwise, the cursor's own horizontal position is used. The returned cursor will have its goal column set to whichever column was used. If `allowNode` is true, this may return a node selection on a block node. */ moveVertically(start: EditorSelection, forward: boolean, distance?: number, allowNode?: boolean): any; /** Find the DOM parent node and offset (child offset if `node` is an element, character offset when it is a text node) at the given document position. */ domAtPos(pos: number, assoc?: -1 | 1): { node: DOMNode; offset: number; }; nodeDOM(pos: number): HTMLElement | null; /** Find the document position at the given DOM node. Can be useful for associating positions with DOM events. Will raise an error when `node` isn't part of the editor content. */ posAtDOM(node: DOMNode, offset?: number): number; /** Find the Wordgard node represented by the given DOM node, or one of its parent nodes, if any. Will not return the outer document node. */ nodeFromDOM(node: HTMLElement): { pos: number; node: Node$1; } | null; /** Get the document position at the given screen coordinates. */ posAtCoords(coords: { x: number; y: number; }): { pos: number; assoc: -1 | 0 | 1; target: number | null; }; /** Get the screen coordinates at the given document position. `side` determines whether the coordinates are based on the element before (-1) or after (1) the position (if no element is available on the given side, the method will transparently use another strategy to get reasonable coordinates). */ coordsAtPos(pos: number, assoc?: -1 | 1): DOMRect; /** Return the rectangle around a given node or character. If there is no element directly after `pos`, this will return null. For space characters that are a line wrap point, this will return the position before the line break. */ coordsForElement(pos: number): DOMRect | null; /** The text direction ([`direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) CSS property) of the editor's content element. */ get textDirection(): Direction; /** Check whether the editor has focus. */ get hasFocus(): boolean; /** Put focus on the editor. */ focus(): void; /** Returns an effect that can be [added](#state.TransactionSpec.effects) to a transaction to cause it to scroll the given position or range into view. */ static scrollIntoView(pos: number | EditorSelection, options?: { /** By default (`"nearest"`) the position will be vertically scrolled only the minimal amount required to move the given position into view. You can set this to `"start"` to move it to the top of the view, `"end"` to move it to the bottom, or `"center"` to move it to the center. */ y?: ScrollStrategy; /** Effect similar to [`y`](#view.EditorView^scrollIntoView^options.y), but for the horizontal scroll position. */ x?: ScrollStrategy; /** Extra vertical distance to add when moving something into view. Not used with the `"center"` strategy. Defaults to 5. Must be less than the height of the editor. */ yMargin?: number; /** Extra horizontal distance to add. Not used with the `"center"` strategy. Defaults to 5. Must be less than the width of the editor. */ xMargin?: number; }): StateEffect; /** Filter functions provided through this facet will be run on a slice before it is serialized to the clipboard. */ static clipboardOutputFilter: any; /** Filter functions provided through this facet will be run on an HTML string before it put onto the clipboard. */ static clipboardOutputHTMLFilter: any; /** This can be used to provide a function that converts a document slice to a string that is put onto the plain-text clipboard. Serializers are tried in order of precedence until one returns a string. */ static clipboardTextSerializer: any; /** Filter to run on the plain text representation of content put onto the clipboard. */ static clipboardOutputTextFilter: any; /** Filter functions provided through this facet will be run on a slice after it is read from the clipboard. */ static clipboardInputFilter: any; /** Filter functions to run on HTML text that is read from the clipboard. */ static clipboardInputHTMLFilter: any; /** When the editor reads plain text from the clipboard, this facet can be used to provide a custom parser. Each provided function is tried in order of precedence, until one returns a slice. */ static clipboardTextParser: any; /** Filter to run on plain text read from the clipboard. */ static clipboardInputTextFilter: any; /** This annotation is added to transactions created because the editor's focused status changed. It holds `true` when the editor gained focus, `false` when it lost focus. */ static isFocusChange: any; /** Enable or disable tab-focus mode, which disables key bindings for Tab and Shift-Tab, letting the browser's default focus-changing behavior go through instead. This is useful to prevent trapping keyboard users in your editor. Without argument, this toggles the mode. With a boolean, it enables (true) or disables it (false). Given a number, it temporarily enables the mode until that number of milliseconds have passed or another non-Tab key is pressed. */ setTabFocusMode(to?: boolean | number): void; /** Facet to add a [style module](https://github.com/marijnh/style-mod#documentation) to an editor view. The view will ensure that the module is mounted in its [document root](#view.EditorView.constructor^config.root). */ static styleModule: any; /** Returns an extension that can be used to add DOM event handlers. The value should be an object mapping event names to handler functions. For any given event, such functions are ordered by extension precedence, and the first handler to return true will be assumed to have handled that event, and no other handlers or built-in behavior will be activated for it. These are registered on the [content element](#view.EditorView.contentDOM), except for `scroll` handlers, which will be called any time the editor's [scroll element](#view.EditorView.scrollDOM) or one of its parent nodes is scrolled. */ static domEventHandlers(handlers: DOMEventHandlers): Extension; /** Create an extension that registers DOM event observers. Contrary to event [handlers](#view.EditorView^domEventHandlers), observers can't be prevented from running by a higher-precedence handler returning true. They also don't prevent other handlers and observers from running when they return true, and should not call `preventDefault`. */ static domEventObservers(observers: DOMEventHandlers): Extension; /** An input handler can override the way changes to the editable DOM content are handled. Handlers are passed the document positions between which the change was found, and the new content. When one returns true, no further input handlers are called and the default behavior is prevented. The `insert` argument can be used to get the default transaction that would be applied for this input. This can be useful when dispatching the custom behavior as a separate transaction. */ static inputHandler: any; /** Scroll handlers can override how things are scrolled into view. If they return `true`, no further handling happens for the scrolling. If they return false, the default scroll behavior is applied. Scroll handlers should never initiate editor updates. */ static scrollHandler: any; /** Allows you to provide a function that should be called when the library catches an exception from an extension (mostly from view plugins, but may be used by other extensions to route exceptions from user-code-provided callbacks). This is mostly useful for debugging and logging. See [`logException`](#view.logException). */ static exceptionSink: any; /** A facet that can be used to register a function to be called right before the view updates. Any transactions dispatched by such functions will be included in the update. */ static beforeUpdate: any; /** A facet that can be used to register a function to be called after the view updates. Dispatching transactions from such a function is allowed, but will cause another, separate update to happen. */ static afterUpdate: any; /** Facet that controls whether the editor content DOM is editable. When its highest-precedence value is `false`, the element will not have its `contenteditable` attribute set. (Note that this doesn't affect API calls that change the editor content, even when those are bound to keys or buttons. See the [`readOnly`](#state.EditorState.readOnly) facet for that.) */ static editable: any; /** Controls the length of a full cursor blink cycle, in milliseconds. Defaults to 1200. Can be set to 0 to disable blinking. */ static cursorBlinkRate: any; /** Allows you to influence the way mouse selection happens. The functions in this facet will be called for a `mousedown` event on the editor, and can return an object that overrides the way a selection is computed from that mouse click or drag. */ static mouseSelectionStyle: any; /** Facet used to configure whether a given selection drag event should move or copy the selection. The given predicate will be called with the `mousedown` event, and can return `true` when the drag should move the content. */ static dragMovesSelection: any; /** Facet used to configure whether a given selecting click adds a new range to the existing selection or replaces it entirely. The default behavior is to check `event.metaKey` on macOS, and `event.ctrlKey` elsewhere. */ static clickAddsSelectionRange: any; /** Facet that allows extensions to provide additional scroll margins (space around the sides of the scrolling element that should be considered invisible). This can be useful when the plugin introduces elements that cover part of that element (for example a horizontally fixed gutter). */ static scrollMargins: any; /** Create a theme extension. The first argument can be a [`style-mod`](https://github.com/marijnh/style-mod#documentation) style spec providing the styles for the theme. These will be prefixed with a generated class for the style. Because the selectors will be prefixed with a scope class, rule that directly match the editor's [wrapper element](#view.EditorView.dom)—to which the scope class will be added—need to be explicitly differentiated by adding an `&` to the selector for that element—for example `&.wg-focused`. When `dark` is set to true, the theme will be marked as dark, which will cause the `&dark` rules from [base themes](#view.EditorView^baseTheme) to be used (as opposed to `&light` when a light theme is active). */ static theme(spec: { [selector: string]: StyleSpec; }): Extension; /** This facet controls whether a dark theme is active, which determines whether base theme rules with a `&dark` or `&light` selector are applied. By default, the editor uses a CSS `prefers-color-scheme: dark` query to determine whether to enable light or dark mode. */ static darkTheme: any; /** Create an extension that adds styles to the base theme. Like with [`theme`](#view.EditorView^theme), use `&` to indicate the place of the editor wrapper element when directly targeting that. You can also use `&dark` or `&light` instead to only target editors with a dark or light theme. */ static baseTheme(spec: { [selector: string]: StyleSpec; }): Extension; /** Provides a Content Security Policy nonce to use when creating the style sheets for the editor. Holds the empty string when no nonce has been provided. */ static cspNonce: any; /** Facet that provides additional DOM attributes for the editor's editable DOM element. */ static contentAttributes: any; /** Facet that provides DOM attributes for the editor's outer element. */ static editorAttributes: any; /** State effect used to include screen reader announcements in a transaction. These will be added to the DOM in a visually hidden element with `aria-live="polite"` set, and should be used to describe effects that are visually obvious but may not be noticed by screen reader users (such as moving to the next search match). */ static announce: any; } /** Helper type that maps event names to event object types, or the `any` type for unknown events. */ interface DOMEventMap extends HTMLElementEventMap { [other: string]: any; } /** Event handlers are specified with objects like this. For event types known by TypeScript, this will infer the event argument type to hold the appropriate event object type. For unknown events, it is inferred to `any`, and should be explicitly set if you want type checking. */ type DOMEventHandlers = { [event in keyof DOMEventMap]?: (this: This, event: DOMEventMap[event], view: EditorView) => boolean | void; }; /** Key bindings associate keys with functions that should be run when a matching keyboard event happens. A key binding can either specify a specific [character](#view.KeyBinding.Spec.char) to match on, which will be compared against the actual character produced by a key event, or describe a [key combination](#view.KeyBinding.Spec.key). Bindings for a given key event are evaluated in order of precedence, with each getting a chance to handle the event, stopping when the first handler returns true. Key combinations are described by strings like `"Shift-Ctrl-Enter"`—a key identifier prefixed with zero or more modifiers. Key identifiers are based on the strings that can appear in [`KeyEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key). Use lowercase letters to refer to letter keys. You can use `"Space"` as an alias for the `" "` name. Modifiers can be given in any order. `Shift-` (or `s-`), `Alt-` (or `a-`), `Ctrl-` (or `c-` or `Control-`) and `Cmd-` (or `m-` or `Meta-`) are recognized. You can use `Mod-` as a shorthand for `Cmd-` on Mac and `Ctrl-` on other platforms. So `Mod-b` is `Ctrl-b` on Linux but `Cmd-b` on macOS. Unlike character bindings, key combination bindings should refer to the unmodified base key that is being pressed, not the character produced by combining that key with Shift or AltGraph. Keyboard mappings that rearrange the positions of Latin characters _are_ taken into account for this (the mapped position is used), but the library tries to 'see through' keyboard mappings that assign non-Latin characters to keys (so that both the Latin and the non-Latin name can be used). */ declare class KeyBinding { readonly spec: KeyBinding.Spec; /** Bindings count as extensions and can be included in an editor configuration. */ extension: Extension; private constructor(); /** Define a binding. */ static define(spec: KeyBinding.Spec): KeyBinding; } declare namespace KeyBinding { /** A description of a key binding. */ interface Spec { /** A textual character that this binding should trigger for. */ char?: string; /** A key combination to use for this binding. If the platform-specific property (`mac`, `win`, or `linux`) for the current platform is used as well in the binding, that one takes precedence. If `key` isn't defined and the platform-specific binding isn't either, a binding is ignored. */ key?: string; /** Key to use specifically on macOS. */ mac?: string; /** Key to use specifically on Windows. */ win?: string; /** Key to use specifically on Linux. */ linux?: string; /** The command to execute when this binding is triggered. */ run: (view: EditorView) => boolean; /** When given, this defines a second binding, using the (possibly platform-specific) key name, prefixed with `Shift-`, to activate this command. */ shift?: (view: EditorView) => boolean; /** When this property is present, the function is called for every key. */ any?: (view: EditorView, event: KeyboardEvent) => boolean; /** By default, key bindings apply when focus is on the editor content (the `"editor"` scope). Some extensions, mostly those that define their own panels, might want to allow registering bindings local to that panel. Such bindings should use a custom scope name. You may also assign multiple scope names to a binding, separating them by spaces. */ scope?: string; /** By default, all keys events for which a handler exists have their `preventDefault` called. You can set this to true to disable that behavior. */ allowDefault?: boolean; } } /** Facet used for registering key bindings. You can add multiple keymaps to an editor. Their priorities determine their precedence (the ones specified early or with high priority get checked first). When a handler has returned `true` for a given key, no further handlers are called. */ declare const keyBinding: any; /** Run the key handlers registered for a given scope. The event object should be a `"keydown"` event. Returns true if any of the handlers handled it. */ declare function runScopeHandlers(view: EditorView, event: KeyboardEvent, scope: string): any; declare const charKeyCodes: Record; declare const defaultKeymap: readonly KeyBinding[]; type PanelConfig = { /** By default, panels will be placed inside the editor's DOM structure. You can use this option to override where panels with `top: true` are placed. */ topContainer?: HTMLElement; /** Override where panels with `top: false` are placed. */ bottomContainer?: HTMLElement; }; /** Configures the panel-managing extension. */ declare function panels(config?: PanelConfig): Extension; /** Object that describes an active panel. */ interface Panel { /** The element representing this panel. The library will add the `"wg-panel"` DOM class to this. */ dom: HTMLElement; /** Controls whether the panel should be at the top or bottom of the editor. Defaults to false. */ top?: boolean; /** Update the panel DOM for a given view update. */ update?(update: ViewUpdate): void; /** Called, when present, when the panel has been added the DOM. */ connect?(view: EditorView): void; /** Called when the editor with the panel is disconnected from the DOM. */ disconnect?(view: EditorView): void; /** Called when the panel is removed from the editor. */ destroy?(view: EditorView): void; } /** Get the active panel created by the given constructor, if any. This can be useful when you need access to your panels' DOM structure. */ declare function getPanel(view: EditorView, panel: PanelConstructor): Panel | null; /** A function that initializes a panel. Used in [`showPanel`](#view.showPanel). */ type PanelConstructor = (view: EditorView) => Panel; /** Opening a panel is done by providing a constructor function for the panel through this facet. (The panel is closed again when its constructor is no longer provided.) Values of `null` are ignored. */ declare const showPanel: any; /** Creates an extension that configures tooltip behavior. */ declare function tooltips(config?: { /** By default, tooltips use `"fixed"` [positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position), which has the advantage that tooltips don't get cut off by scrollable parent elements. However, CSS rules like `contain: layout` can break fixed positioning in child nodes, which can be worked about by using `"absolute"` here. On iOS, which at the time of writing still doesn't properly support fixed positioning, the library always uses absolute positioning. If the tooltip parent element sits in a transformed element, the library also falls back to absolute positioning. */ position?: "fixed" | "absolute"; /** The element to put the tooltips into. By default, they are put in the editor (`wg-editor`) element, and that is usually what you want. But in some layouts that can lead to positioning issues, and you need to use a different parent to work around those. */ parent?: HTMLElement; /** By default, when figuring out whether there is room for a tooltip at a given position, the extension considers the entire space between 0,0 and `documentElement.clientWidth`/`clientHeight` to be available for showing tooltips. You can provide a function here that returns an alternative rectangle. */ tooltipSpace?: (view: EditorView) => DOMRect; }): Extension; /** Describes a tooltip. Values of this type, when provided through the [`showTooltip`](#view.showTooltip) facet, control the individual tooltips on the editor. */ interface Tooltip { /** The document position at which to show the tooltip. */ pos: number; /** The end of the range annotated by this tooltip, if different from `pos`. */ end?: number; /** A constructor function that creates the tooltip's [DOM representation](#view.TooltipView). */ create(view: EditorView): TooltipView; /** Whether the tooltip should be shown above or below the target position. Not guaranteed to be respected for hover tooltips since all hover tooltips for the same range are always positioned together. Defaults to false. */ above?: boolean; /** Whether the `above` option should be honored when there isn't enough space on that side to show the tooltip inside the viewport. Defaults to false. */ strictSide?: boolean; /** When set to true, show a triangle connecting the tooltip element to position `pos`. */ arrow?: boolean; /** By default, tooltips are hidden when their position is outside of the visible editor content. Set this to false to turn that off. */ clip?: boolean; } /** Describes the way a tooltip is displayed. */ interface TooltipView { /** The DOM element to position over the editor. */ dom: HTMLElement; /** Adjust the position of the tooltip relative to its anchor position. A positive `x` value will move the tooltip horizontally along with the text direction (so right in left-to-right context, left in right-to-left). A positive `y` will move the tooltip up when it is above its anchor, and down otherwise. */ offset?: { x: number; y: number; }; /** By default, a tooltip's screen position will be based on the document position of its `pos` property. This method can be provided to make the tooltip view itself responsible for finding its screen position. */ getCoords?: (pos: number) => DOMRect; /** By default, tooltips are moved when they overlap with other tooltips. Set this to `true` to disable that behavior for this tooltip. */ overlap?: boolean; /** Update the DOM element for a change in the view's state. */ update?(update: ViewUpdate): void; /** Called when the tooltip is added to a DOM-connected editor. */ connect?(view: EditorView): void; /** Called when the editor containing the tooltip is disconnected, or before the tooltip is removed. */ disconnect?(view: EditorView): void; /** Called when the tooltip is removed from the editor or the editor is destroyed. */ destroy?(view: EditorView): void; /** Called when the tooltip has been (re)positioned. The argument is the [space](#view.tooltips^config.tooltipSpace) available to the tooltip. */ positioned?(space: DOMRect): void; /** By default, the library will restrict the size of tooltips so that they don't stick out of the available space. Set this to false to disable that. */ resize?: boolean; } /** Facet to which an extension can add a value to show a tooltip. */ declare const showTooltip: any; /** The type of function that can be used as a [hover tooltip source](#view.hoverTooltip^source). */ type HoverTooltipSource = (view: EditorView, pos: number, side: -1 | 1) => Tooltip | readonly Tooltip[] | null | Promise; /** Set up a hover tooltip, which shows up when the pointer hovers over ranges of text. The callback is called when the mouse hovers over the document text. It should, if there is a tooltip associated with position `pos`, return the tooltip description (either directly or in a promise). The `side` argument indicates on which side of the position the pointer is—it will be -1 if the pointer is before the position, 1 if after the position. Note that all hover tooltips are hosted within a single tooltip container element. This allows multiple tooltips over the same range to be "merged" together without overlapping. The return value is a valid [editor extension](#state.Extension) but also provides an `active` property holding a state field that can be used to read the currently active tooltips produced by this extension. */ declare function hoverTooltip(source: HoverTooltipSource, options?: { /** Controls whether a transaction hides the tooltip. The default is to not hide. */ hideOn?: (tr: Transaction, tooltip: Tooltip) => boolean; /** When enabled (this defaults to false), close the tooltip whenever the document changes or the selection is set. */ hideOnChange?: boolean | "touch"; /** Hover time after which the tooltip should appear, in milliseconds. Defaults to 300ms. */ hoverTime?: number; }): Extension & { active: StateField; }; /** Get the active tooltip view for a given tooltip, if available. */ declare function getTooltip(view: EditorView, tooltip: Tooltip): TooltipView | null; /** Returns true if any hover tooltips are currently active. */ declare function hasHoverTooltips(state: EditorState): any; /** Transaction effect that closes all hover tooltips. */ declare const closeHoverTooltips: any; /** Tell the tooltip extension to recompute the position of the active tooltips. This can be useful when something happens (such as a re-positioning or CSS change affecting the editor) that could invalidate the existing tooltip positions but isn't detected by the extension. */ declare function repositionTooltips(view: EditorView): void; declare const NodeSelection: any; type DialogConfig = { /** A function to render the content of the dialog. The result should contain at least one `
` element. Submit handlers and a handler for the Escape key will be added to the form. If this is not given, the `label`, `input`, and `submitLabel` fields will be used to create a simple form for you. */ content?: (view: EditorView, close: () => void) => HTMLElement; /** When `content` isn't given, this provides the text shown in the dialog. */ label?: string; /** The attributes for an input element shown next to the label. If not given, no input element is added. */ input?: { [attr: string]: string; }; /** The label for the button that submits the form. Defaults to `"OK"`. */ submitLabel?: string; /** Extra classes to add to the panel. */ class?: string; /** A query selector to find the field that should be focused when the dialog is opened. When set to true, this picks the first `` or `