@thomasfosterau/effect-richtext 0.0.0 → 0.1.0

package/dist/compat/view.d.ts

@@ -0,0 +1,411 @@
+import { Decoration as Decoration$1, DecorationSet as DecorationSet$1, DecorationSource as DecorationSource$1 } from "../view/decoration.js";
+import { EditorView as EditorView$1 } from "../view/view.js";
+import "../view.js";
+import { CORE } from "./internal/core.js";
+import { DOMParser, DOMSerializer, Mark, Node, ResolvedPos, Slice } from "./model.js";
+import { EditorState, Plugin, Selection, Transaction } from "./state.js";
+import { Mapping } from "./transform.js";
+/**
+ * A DOM node.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export type DOMNode = globalThis.Node;
+/**
+ * A rectangle.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export type Rect = {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+};
+/**
+ * A record of a DOM mutation.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export type ViewMutationRecord = MutationRecord | {
+  type: "selection";
+  target: DOMNode;
+};
+/**
+ * A set of attributes to add to a decorated node.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export type DecorationAttrs = {
+  nodeName?: string;
+  class?: string;
+  style?: string;
+  [attribute: string]: string | undefined;
+};
+/**
+ * Decoration objects can be provided to the view through the
+ * `decorations` prop.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export declare class Decoration {
+  /** @internal */
+  readonly [CORE]: Decoration$1;
+  /** The start position of the decoration. */
+  get from(): number;
+  /** The end position. Will be the same as `from` for widget decorations. */
+  get to(): number;
+  /** @internal */
+  get type(): any;
+  /** The spec provided when creating this decoration. */
+  get spec(): any;
+  /** @internal */
+  get inline(): boolean;
+  /** @internal */
+  get widget(): boolean;
+  /** @internal */
+  eq(other: Decoration, offset?: number): boolean;
+  /** Creates a widget decoration, which is a DOM node that's shown in the document at the given position. */
+  static widget(pos: number, toDOM: ((view: EditorView, getPos: () => number | undefined) => DOMNode) | DOMNode, spec?: {
+    side?: number;
+    relaxedSide?: boolean;
+    marks?: ReadonlyArray<Mark>;
+    stopEvent?: (event: Event) => boolean;
+    ignoreSelection?: boolean;
+    key?: string;
+    destroy?: (node: DOMNode) => void;
+    [key: string]: any;
+  }): Decoration;
+  /** Creates an inline decoration, which adds the given attributes to each inline node between `from` and `to`. */
+  static inline(from: number, to: number, attrs: DecorationAttrs, spec?: {
+    inclusiveStart?: boolean;
+    inclusiveEnd?: boolean;
+    [key: string]: any;
+  }): Decoration;
+  /** Creates a node decoration. */
+  static node(from: number, to: number, attrs: DecorationAttrs, spec?: any): Decoration;
+}
+/**
+ * An object that can provide decorations.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export interface DecorationSource {
+  map: (mapping: Mapping, node: Node) => DecorationSource;
+  forChild(offset: number, child: Node): DecorationSource;
+  eq(other: DecorationSource): boolean;
+  forEachSet(f: (set: DecorationSet) => void): void;
+}
+/**
+ * A collection of decorations, organized in such a way that the
+ * drawing algorithm can efficiently use and compare them.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export declare class DecorationSet implements DecorationSource {
+  /** @internal */
+  readonly [CORE]: DecorationSet$1;
+  /** Create a set of decorations, using the structure of the given document. */
+  static create(doc: Node, decorations: Array<Decoration>): DecorationSet;
+  /** Find all decorations in this set which touch the given range (including decorations that start or end directly at the boundaries) and match the given predicate on their spec. */
+  find(start?: number, end?: number, predicate?: (spec: any) => boolean): Array<Decoration>;
+  /** Map the set of decorations in response to a change in the document. */
+  map(mapping: Mapping, doc: Node, options?: {
+    onRemove?: (decorationSpec: any) => void;
+  }): DecorationSet;
+  /** Add the given array of decorations to the ones in the set, producing a new set. */
+  add(doc: Node, decorations: Array<Decoration>): DecorationSet;
+  /** Create a new set that contains the decorations in this set, minus the ones in the given array. */
+  remove(decorations: Array<Decoration>): DecorationSet;
+  /** @internal */
+  forChild(offset: number, node: Node): DecorationSource;
+  /** @internal */
+  eq(other: DecorationSource): boolean;
+  /** @internal */
+  locals(node: Node): ReadonlyArray<Decoration>;
+  /** @internal */
+  forEachSet(f: (set: DecorationSet) => void): void;
+  /** The empty set of decorations. */
+  static empty: DecorationSet;
+  /** @internal */
+  get local(): ReadonlyArray<Decoration>;
+  /** @internal */
+  get children(): ReadonlyArray<number | DecorationSet>;
+  /** @internal */
+  static removeOverlap(spans: ReadonlyArray<Decoration>): ReadonlyArray<Decoration>;
+}
+/**
+ * By default, document nodes are rendered using the result of the
+ * `toDOM` method of their spec, and managed entirely by the editor.
+ * For some use cases you want more control; node views allow that.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export interface NodeView {
+  dom: DOMNode;
+  contentDOM?: HTMLElement | null | undefined;
+  update?: ((node: Node, decorations: ReadonlyArray<Decoration>, innerDecorations: DecorationSource) => boolean) | undefined;
+  multiType?: boolean | undefined;
+  selectNode?: (() => void) | undefined;
+  deselectNode?: (() => void) | undefined;
+  setSelection?: ((anchor: number, head: number, root: Document | ShadowRoot) => void) | undefined;
+  stopEvent?: ((event: Event) => boolean) | undefined;
+  ignoreMutation?: ((mutation: ViewMutationRecord) => boolean) | undefined;
+  destroy?: (() => void) | undefined;
+}
+/**
+ * Objects returned as mark views.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export interface MarkView {
+  dom: HTMLElement;
+  contentDOM?: HTMLElement | null | undefined;
+  ignoreMutation?: ((mutation: ViewMutationRecord) => boolean) | undefined;
+  destroy?: (() => void) | undefined;
+}
+/**
+ * The type of function provided to create node views.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number | undefined, decorations: ReadonlyArray<Decoration>, innerDecorations: DecorationSource) => NodeView;
+/**
+ * The function types used to create mark views.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export type MarkViewConstructor = (mark: Mark, view: EditorView, inline: boolean) => MarkView;
+/**
+ * Helper type that maps event names to event object types.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export interface DOMEventMap extends HTMLElementEventMap {
+  [event: string]: any;
+}
+/**
+ * Props are configuration values that can be passed to an editor view
+ * or included in a plugin.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export interface EditorProps<P = any> {
+  handleDOMEvents?: { [event in keyof DOMEventMap]?: (this: P, view: EditorView, event: DOMEventMap[event]) => boolean | void; };
+  handleKeyDown?: ((this: P, view: EditorView, event: KeyboardEvent) => boolean | void) | undefined;
+  handleKeyPress?: ((this: P, view: EditorView, event: KeyboardEvent) => boolean | void) | undefined;
+  handleTextInput?: (this: P, view: EditorView, from: number, to: number, text: string, deflt: () => Transaction) => boolean | void;
+  handleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
+  handleClick?: ((this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void) | undefined;
+  handleDoubleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
+  handleDoubleClick?: ((this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void) | undefined;
+  handleTripleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
+  handleTripleClick?: ((this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void) | undefined;
+  handlePaste?: ((this: P, view: EditorView, event: ClipboardEvent, slice: Slice) => boolean | void) | undefined;
+  handleDrop?: ((this: P, view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void) | undefined;
+  handleScrollToSelection?: ((this: P, view: EditorView) => boolean) | undefined;
+  dragCopies?: ((event: DragEvent) => boolean) | undefined;
+  createSelectionBetween?: (this: P, view: EditorView, anchor: ResolvedPos, head: ResolvedPos) => Selection | null | undefined;
+  domParser?: DOMParser | undefined;
+  transformPastedHTML?: ((this: P, html: string, view: EditorView) => string) | undefined;
+  clipboardParser?: DOMParser | undefined;
+  transformPastedText?: ((this: P, text: string, plain: boolean, view: EditorView) => string) | undefined;
+  clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean, view: EditorView) => Slice | null | undefined;
+  transformPasted?: ((this: P, slice: Slice, view: EditorView, plain: boolean) => Slice) | undefined;
+  transformCopied?: ((this: P, slice: Slice, view: EditorView) => Slice) | undefined;
+  nodeViews?: {
+    [node: string]: NodeViewConstructor;
+  } | undefined;
+  markViews?: {
+    [mark: string]: MarkViewConstructor;
+  } | undefined;
+  clipboardSerializer?: DOMSerializer | undefined;
+  clipboardTextSerializer?: ((this: P, content: Slice, view: EditorView) => string) | undefined;
+  decorations?: ((this: P, state: EditorState) => DecorationSource | null | undefined) | undefined;
+  editable?: ((this: P, state: EditorState) => boolean) | undefined;
+  attributes?: ({
+    [name: string]: string;
+  } | ((state: EditorState) => {
+    [name: string]: string;
+  })) | undefined;
+  scrollThreshold?: number | {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  } | undefined;
+  scrollMargin?: number | {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  } | undefined;
+}
+/**
+ * The props object given directly to the editor view supports some
+ * fields that can't be used in plugins.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export interface DirectEditorProps extends EditorProps {
+  state: EditorState;
+  plugins?: ReadonlyArray<Plugin> | undefined;
+  dispatchTransaction?: ((this: EditorView, tr: Transaction) => void) | undefined;
+}
+/**
+ * An editor view manages the DOM structure that represents an editable
+ * document.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export declare class EditorView {
+  /** @internal */
+  readonly [CORE]: EditorView$1<any, any, any>;
+  /** @internal */
+  _props: DirectEditorProps;
+  /** @internal */
+  private propsCache;
+  /** Create a view. */
+  constructor(place: null | DOMNode | ((editor: HTMLElement) => void) | {
+    mount: HTMLElement;
+  }, props: DirectEditorProps);
+  private propsToCore;
+  /** The view's current state. */
+  get state(): EditorState;
+  /** An editable DOM node containing the document. */
+  get dom(): HTMLElement;
+  /** Indicates whether the editor is currently editable. */
+  get editable(): boolean;
+  /** When editor content is being dragged, this object contains information about the dragged slice and whether it is being copied or moved. */
+  get dragging(): null | {
+    readonly slice: Slice;
+    readonly move: boolean;
+  };
+  set dragging(value: null | {
+    readonly slice: Slice;
+    readonly move: boolean;
+  });
+  /** Holds `true` when a composition is active. */
+  get composing(): boolean;
+  /** The view's current props. */
+  get props(): DirectEditorProps;
+  /** Update the view's props. Will immediately cause an update to the DOM. */
+  update(props: DirectEditorProps): void;
+  /** Update the view by updating existing props object with the object given as argument. */
+  setProps(props: Partial<DirectEditorProps>): void;
+  /** Update the editor's `state` prop, without touching any of the other props. */
+  updateState(state: EditorState): void;
+  /** Goes over the values of a prop, first those provided directly, then those from plugins given to the view, then from plugins in the state (in order), and calls `f` every time a non-undefined value is found. */
+  someProp<PropName extends keyof EditorProps, Result>(propName: PropName, f: (value: NonNullable<EditorProps[PropName]>) => Result): Result | undefined;
+  someProp<PropName extends keyof EditorProps>(propName: PropName): NonNullable<EditorProps[PropName]> | undefined;
+  /** Query whether the view has focus. */
+  hasFocus(): boolean;
+  /** Focus the editor. */
+  focus(): void;
+  /** Get the document root in which the editor exists. */
+  get root(): Document | ShadowRoot;
+  /** When an existing editor view is moved to a new document or shadow tree, call this to make it recompute its root. */
+  updateRoot(): void;
+  /** Given a pair of viewport coordinates, return the document position that corresponds to them. */
+  posAtCoords(coords: {
+    left: number;
+    top: number;
+  }): {
+    pos: number;
+    inside: number;
+  } | null;
+  /** Returns the viewport rectangle at a given document position. */
+  coordsAtPos(pos: number, side?: number): Rect;
+  /** Find the DOM position that corresponds to the given document position. */
+  domAtPos(pos: number, side?: number): {
+    node: DOMNode;
+    offset: number;
+  };
+  /** Find the DOM node that represents the document node after the given position. */
+  nodeDOM(pos: number): DOMNode | null;
+  /** Find the document position that corresponds to a given DOM position. */
+  posAtDOM(node: DOMNode, offset: number, bias?: number): number;
+  /** Find out whether the selection is at the end of a textblock when moving in a given direction. */
+  endOfTextblock(dir: "up" | "down" | "left" | "right" | "forward" | "backward", state?: EditorState): boolean;
+  /** Run the editor's paste logic with the given HTML string. */
+  pasteHTML(html: string, event?: ClipboardEvent): boolean;
+  /** Run the editor's paste logic with the given plain-text input. */
+  pasteText(text: string, event?: ClipboardEvent): boolean;
+  /** Serialize the given slice as it would be if it was copied from this editor. */
+  serializeForClipboard(slice: Slice): {
+    dom: HTMLElement;
+    text: string;
+    slice: Slice;
+  };
+  /** Removes the editor from the DOM and destroys all node views. */
+  destroy(): void;
+  /** This is true when the view has been destroyed (and thus should not be used anymore). */
+  get isDestroyed(): boolean;
+  /** Used for testing. */
+  dispatchEvent(event: Event): void;
+  /** Dispatch a transaction. */
+  dispatch(tr: Transaction): void;
+  /** @internal */
+  domSelectionRange(): any;
+  /** @internal */
+  domSelection(): globalThis.Selection | null;
+  /** @internal */
+  scrollToSelection(): void;
+  /** @internal */
+  get domObserver(): any;
+  /** @internal */
+  get docView(): any;
+  /** @internal */
+  get input(): any;
+  /** @internal */
+  get focused(): boolean;
+  /** @internal */
+  get markCursor(): ReadonlyArray<Mark> | null;
+  /** @internal */
+  get cursorWrapper(): any;
+  /** @internal */
+  get lastSelectedViewDesc(): any;
+  /** @internal */
+  get trackWrites(): DOMNode | null;
+  /** @internal */
+  get nodeViews(): any;
+}
+/** @internal */
+export declare const __parseFromClipboard: (view: EditorView, text: string, html: string | null, plainText: boolean, $context: ResolvedPos) => Slice | null;
+/** @internal */
+export declare const __endComposition: (view: EditorView, restarting?: boolean) => boolean;
+/**
+ * Get the core (Effect API) object behind a facade.
+ *
+ * @since 0.1.0
+ * @category conversions
+ */
+export declare function toCore(view: EditorView): EditorView$1<any, any, any>;
+export declare function toCore(decoration: Decoration): Decoration$1;
+export declare function toCore(set: DecorationSet): DecorationSet$1;
+export declare function toCore(source: DecorationSource): DecorationSource$1;
+/**
+ * Get the facade for a core (Effect API) object.
+ *
+ * @since 0.1.0
+ * @category conversions
+ */
+export declare function fromCore(view: EditorView$1<any, any, any>): EditorView;
+export declare function fromCore(decoration: Decoration$1): Decoration;
+export declare function fromCore(set: DecorationSet$1): DecorationSet;
+export declare function fromCore(source: DecorationSource$1): DecorationSource;