lexical 0.2.7 → 0.3.0

package/Lexical.d.ts

@@ -6,20 +6,23 @@
  *
  */
 
-import {Class, $ReadOnly} from 'utility-types';
+import {Spread} from 'libdefs/globals';
+import {Class} from 'utility-types';
 
 /**
  * LexicalCommands
  */
 
-export type LexicalCommand<P> = $ReadOnly<{}>;
+export type LexicalCommand<P> = Readonly<{}>;
 
 export var SELECTION_CHANGE_COMMAND: LexicalCommand<void>;
 export var CLICK_COMMAND: LexicalCommand<MouseEvent>;
 export var DELETE_CHARACTER_COMMAND: LexicalCommand<boolean>;
 export var INSERT_LINE_BREAK_COMMAND: LexicalCommand<boolean>;
 export var INSERT_PARAGRAPH_COMMAND: LexicalCommand<void>;
-export var INSERT_TEXT_COMMAND: LexicalCommand<InputEvent | string>;
+export var CONTROLLED_TEXT_INSERTION_COMMAND: LexicalCommand<
+  InputEvent | string
+>;
 export var PASTE_COMMAND: LexicalCommand<ClipboardEvent>;
 export var REMOVE_TEXT_COMMAND: LexicalCommand<void>;
 export var DELETE_WORD_COMMAND: LexicalCommand<boolean>;
@@ -28,7 +31,9 @@ export var FORMAT_TEXT_COMMAND: LexicalCommand<TextFormatType>;
 export var UNDO_COMMAND: LexicalCommand<void>;
 export var REDO_COMMAND: LexicalCommand<void>;
 export var KEY_ARROW_RIGHT_COMMAND: LexicalCommand<KeyboardEvent>;
+export var MOVE_TO_END: LexicalCommand<KeyboardEvent>;
 export var KEY_ARROW_LEFT_COMMAND: LexicalCommand<KeyboardEvent>;
+export var MOVE_TO_START: LexicalCommand<KeyboardEvent>;
 export var KEY_ARROW_UP_COMMAND: LexicalCommand<KeyboardEvent>;
 export var KEY_ARROW_DOWN_COMMAND: LexicalCommand<KeyboardEvent>;
 export var KEY_ENTER_COMMAND: LexicalCommand<KeyboardEvent | null>;
@@ -43,6 +48,7 @@ export var OUTDENT_CONTENT_COMMAND: LexicalCommand<void>;
 export var DROP_COMMAND: LexicalCommand<DragEvent>;
 export var FORMAT_ELEMENT_COMMAND: LexicalCommand<ElementFormatType>;
 export var DRAGSTART_COMMAND: LexicalCommand<DragEvent>;
+export var DRAGOVER_COMMAND: LexicalCommand<DragEvent>;
 export var DRAGEND_COMMAND: LexicalCommand<DragEvent>;
 export var COPY_COMMAND: LexicalCommand<ClipboardEvent>;
 export var CUT_COMMAND: LexicalCommand<ClipboardEvent>;
@@ -55,6 +61,7 @@ export var BLUR_COMMAND: LexicalCommand<FocusEvent>;
 export var INSERT_TABLE_COMMAND: LexicalCommand<{
   rows: string;
   columns: string;
+  includeHeaders?: boolean;
 }>;
 
 export declare function createCommand<T>(): LexicalCommand<T>;
@@ -89,7 +96,6 @@ type Listeners = {
   update: Set<UpdateListener>;
 };
 type CommandListener<P> = (payload: P, editor: LexicalEditor) => boolean;
-// $FlowFixMe[unclear-type]
 type Commands = Map<LexicalCommand<any>, Array<Set<CommandListener<any>>>>;
 type RegisteredNodes = Map<string, RegisteredNode>;
 type RegisteredNode = {
@@ -128,6 +134,7 @@ export declare class LexicalEditor {
   _observer: null | MutationObserver;
   _key: string;
   _readOnly: boolean;
+  _headless: boolean;
   isComposing(): boolean;
   registerUpdateListener(listener: UpdateListener): () => void;
   registerRootListener(listener: RootListener): () => void;
@@ -149,6 +156,7 @@ export declare class LexicalEditor {
   ): () => void;
   dispatchCommand<P>(type: LexicalCommand<P>, payload: P): boolean;
   hasNodes(nodes: Array<Class<LexicalNode>>): boolean;
+  getKey(): string;
   getDecorators<X>(): Record<NodeKey, X>;
   getRootElement(): null | HTMLElement;
   setRootElement(rootElement: null | HTMLElement): void;
@@ -156,13 +164,15 @@ export declare class LexicalEditor {
   getEditorState(): EditorState;
   setEditorState(editorState: EditorState, options?: EditorSetOptions): void;
   parseEditorState(
-    maybeStringifiedEditorState: string | ParsedEditorState,
+    maybeStringifiedEditorState: string | SerializedEditorState,
+    updateFn?: () => void,
   ): EditorState;
   update(updateFn: () => void, options?: EditorUpdateOptions): boolean;
   focus(callbackFn?: () => void): void;
   blur(): void;
   isReadOnly(): boolean;
   setReadOnly(readOnly: boolean): void;
+  toJSON(): SerializedEditor;
 }
 type EditorUpdateOptions = {
   onUpdate?: () => void;
@@ -184,12 +194,14 @@ type TextNodeThemeClasses = {
   subscript?: EditorThemeClassName;
   superscript?: EditorThemeClassName;
 };
+
 export type EditorThemeClasses = {
   ltr?: EditorThemeClassName;
   rtl?: EditorThemeClassName;
   text?: TextNodeThemeClasses;
   paragraph?: EditorThemeClassName;
   image?: EditorThemeClassName;
+  characterLimit?: EditorThemeClassName;
   list?: {
     ul?: EditorThemeClassName;
     ulDepth?: Array<EditorThemeClassName>;
@@ -224,18 +236,23 @@ export type EditorThemeClasses = {
   // Handle other generic values
   [key: string]:
     | EditorThemeClassName
-    | Record<
-        string,
-        | EditorThemeClassName
-        | Array<EditorThemeClassName>
-        | Record<string, EditorThemeClassName>
-      >;
+    | TextNodeThemeClasses
+    | {
+        [key: string]:
+          | Array<EditorThemeClassName>
+          | EditorThemeClassName
+          | TextNodeThemeClasses
+          | {
+              [key: string]: EditorThemeClassName;
+            };
+      };
 };
+
 export type EditorConfig = {
-  namespace: string;
   theme: EditorThemeClasses;
   disableEvents?: boolean;
 };
+
 export type CommandListenerPriority = 0 | 1 | 2 | 3 | 4;
 export const COMMAND_PRIORITY_EDITOR = 0;
 export const COMMAND_PRIORITY_LOW = 1;
@@ -244,11 +261,10 @@ export const COMMAND_PRIORITY_HIGH = 3;
 export const COMMAND_PRIORITY_CRITICAL = 4;
 export type IntentionallyMarkedAsDirtyElement = boolean;
 export function createEditor(editorConfig?: {
-  namespace?: string;
   editorState?: EditorState;
   theme?: EditorThemeClasses;
   parentEditor?: LexicalEditor;
-  nodes?: Array<Class<LexicalNode>>;
+  nodes?: ReadonlyArray<Class<LexicalNode>>;
   onError: (error: Error) => void;
   disableEvents?: boolean;
   readOnly?: boolean;
@@ -257,25 +273,7 @@ export function createEditor(editorConfig?: {
 /**
  * LexicalEditorState
  */
-export type ParsedEditorState = {
-  _selection: null | {
-    anchor: {
-      key: string;
-      offset: number;
-      type: 'text' | 'element';
-    };
-    focus: {
-      key: string;
-      offset: number;
-      type: 'text' | 'element';
-    };
-  };
-  _nodeMap: Array<[NodeKey, ParsedNode]>;
-};
-type JSONEditorState = {
-  _nodeMap: Array<[NodeKey, LexicalNode]>;
-  _selection: null | ParsedSelection;
-};
+
 export interface EditorState {
   _nodeMap: NodeMap;
   _selection: null | RangeSelection | NodeSelection | GridSelection;
@@ -287,7 +285,7 @@ export interface EditorState {
   );
   isEmpty(): boolean;
   read<V>(callbackFn: () => V): V;
-  toJSON(space?: string | number): JSONEditorState;
+  toJSON(): SerializedEditorState;
   clone(
     selection?: RangeSelection | NodeSelection | GridSelection | null,
   ): EditorState;
@@ -327,8 +325,10 @@ export declare class LexicalNode {
   __type: string;
   __key: NodeKey;
   __parent: null | NodeKey;
+  static getType: () => string;
   getType(): string;
   clone(data: any): LexicalNode;
+  exportJSON(): SerializedLexicalNode;
   importDOM(): DOMConversionMap | null;
   constructor(key?: NodeKey);
   getType(): string;
@@ -336,26 +336,24 @@ export declare class LexicalNode {
   isSelected(): boolean;
   getKey(): NodeKey;
   getIndexWithinParent(): number;
-  getParent(): ElementNode | null;
-  getParentOrThrow(): ElementNode;
-  getTopLevelElement(): null | ElementNode;
-  getTopLevelElementOrThrow(): ElementNode;
-  getParents(): Array<ElementNode>;
+  getParent<T extends ElementNode>(): T | null;
+  getParentOrThrow<T extends ElementNode>(): T;
+  getTopLevelElement(): ElementNode | this | null;
+  getTopLevelElementOrThrow(): ElementNode | this;
+  getParents<T extends ElementNode>(): Array<T>;
   getParentKeys(): Array<NodeKey>;
-  getPreviousSibling(): LexicalNode | null;
-  getPreviousSiblings(): Array<LexicalNode>;
-  getNextSibling(): LexicalNode | null;
-  getNextSiblings(): Array<LexicalNode>;
-  getCommonAncestor(node: LexicalNode): ElementNode | null;
+  getPreviousSibling<T extends LexicalNode>(): T | null;
+  getPreviousSiblings<T extends LexicalNode>(): Array<T>;
+  getNextSibling<T extends LexicalNode>(): T | null;
+  getNextSiblings<T extends LexicalNode>(): Array<T>;
+  getCommonAncestor<T extends ElementNode>(node: LexicalNode): T | null;
   is(object: LexicalNode | null | undefined): boolean;
   isBefore(targetNode: LexicalNode): boolean;
   isParentOf(targetNode: LexicalNode): boolean;
   getNodesBetween(targetNode: LexicalNode): Array<LexicalNode>;
   isDirty(): boolean;
-  // $FlowFixMe
-  getLatest<T extends LexicalNode>(): T;
-  // $FlowFixMe
-  getWritable<T extends LexicalNode>(): T;
+  getLatest(): this;
+  getWritable(): this;
   getTextContent(includeInert?: boolean, includeDirectionless?: false): string;
   getTextContentSize(
     includeInert?: boolean,
@@ -363,43 +361,17 @@ export declare class LexicalNode {
   ): number;
   exportDOM(editor: LexicalEditor): DOMExportOutput;
   createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
-  updateDOM(prevNode: any, dom: HTMLElement, config: EditorConfig): boolean;
+  updateDOM(prevNode: unknown, dom: HTMLElement, config: EditorConfig): boolean;
   remove(preserveEmptyParent?: boolean): void;
   replace<N extends LexicalNode>(replaceWith: N): N;
   insertAfter(nodeToInsert: LexicalNode): LexicalNode;
   insertBefore(nodeToInsert: LexicalNode): LexicalNode;
-  selectPrevious(anchorOffset?: number, focusOffset?: number): Selection;
-  selectNext(anchorOffset?: number, focusOffset?: number): Selection;
+  selectPrevious(anchorOffset?: number, focusOffset?: number): RangeSelection;
+  selectNext(anchorOffset?: number, focusOffset?: number): RangeSelection;
   markDirty(): void;
 }
 export type NodeMap = Map<NodeKey, LexicalNode>;
 
-/**
- * LexicalParsing
- */
-export type ParsedNode = {
-  __key: NodeKey;
-  __type: string;
-  __parent: null | NodeKey;
-};
-export type ParsedNodeMap = Map<NodeKey, ParsedNode>;
-export function $createNodeFromParse(
-  parsedNode: ParsedNode,
-  parsedNodeMap: ParsedNodeMap,
-): LexicalNode;
-type ParsedSelection = {
-  anchor: {
-    key: NodeKey;
-    offset: number;
-    type: 'text' | 'element';
-  };
-  focus: {
-    key: NodeKey;
-    offset: number;
-    type: 'text' | 'element';
-  };
-};
-
 /**
  * LexicalSelection
  */
@@ -476,7 +448,6 @@ export declare class RangeSelection {
     focusOffset: number,
   ): void;
   getTextContent(): string;
-  // $FlowFixMe DOM API
   applyDOMRange(range: StaticRange): void;
   clone(): RangeSelection;
   toggleFormat(format: TextFormatType): void;
@@ -535,7 +506,6 @@ declare class _Point {
   getNode(): LexicalNode;
   set(key: NodeKey, offset: number, type: 'text' | 'element'): void;
 }
-
 export function $createRangeSelection(): RangeSelection;
 export function $createNodeSelection(): NodeSelection;
 export function $createGridSelection(): GridSelection;
@@ -587,9 +557,7 @@ export declare class TextNode extends LexicalNode {
   isSimpleText(): boolean;
   getTextContent(includeInert?: boolean, includeDirectionless?: false): string;
   getFormatFlags(type: TextFormatType, alignWithFormat: null | number): number;
-  // $FlowFixMe
   createDOM(config: EditorConfig): HTMLElement;
-  // $FlowFixMe
   updateDOM(
     prevNode: TextNode,
     dom: HTMLElement,
@@ -604,7 +572,10 @@ export declare class TextNode extends LexicalNode {
   toggleFormat(type: TextFormatType): TextNode;
   toggleDirectionless(): TextNode;
   toggleUnmergeable(): TextNode;
-  setMode(type: TextModeType): TextNode;
+  setMode(type: TextModeType): this;
+  setDetail(detail: number): TextNode;
+  getDetail(): number;
+  getMode(): TextModeType;
   setTextContent(text: string): TextNode;
   select(_anchorOffset?: number, _focusOffset?: number): RangeSelection;
   spliceText(
@@ -617,6 +588,9 @@ export declare class TextNode extends LexicalNode {
   canInsertTextAfter(): boolean;
   splitText(...splitOffsets: Array<number>): Array<TextNode>;
   mergeWithSibling(target: TextNode): TextNode;
+  isTextEntity(): boolean;
+  static importJSON(serializedTextNode: SerializedTextNode): TextNode;
+  exportJSON(): SerializedTextNode;
 }
 export function $createTextNode(text?: string): TextNode;
 export function $isTextNode(
@@ -633,6 +607,10 @@ export declare class LineBreakNode extends LexicalNode {
   getTextContent(): '\n';
   createDOM(): HTMLElement;
   updateDOM(): false;
+  static importJSON(
+    serializedLineBreakNode: SerializedLexicalNode,
+  ): LineBreakNode;
+  exportJSON(): SerializedLexicalNode;
 }
 export function $createLineBreakNode(): LineBreakNode;
 export function $isLineBreakNode(
@@ -651,11 +629,13 @@ export declare class RootNode extends ElementNode {
   select(): RangeSelection;
   remove(): void;
   replace<N extends LexicalNode>(node: N): N;
-  insertBefore(): LexicalNode;
-  insertAfter(node: LexicalNode): LexicalNode;
+  insertBefore<T extends LexicalNode>(nodeToInsert: T): T;
+  insertAfter<T extends LexicalNode>(nodeToInsert: T): T;
   updateDOM(prevNode: RootNode, dom: HTMLElement): false;
-  append(...nodesToAppend: Array<LexicalNode>): ElementNode;
+  append(...nodesToAppend: Array<LexicalNode>): this;
   canBeEmpty(): false;
+  static importJSON(serializedRootNode: SerializedRootNode): RootNode;
+  exportJSON(): SerializedElementNode;
 }
 export function $isRootNode(
   node: LexicalNode | null | undefined,
@@ -664,7 +644,7 @@ export function $isRootNode(
 /**
  * LexicalElementNode
  */
-export type ElementFormatType = 'left' | 'center' | 'right' | 'justify';
+export type ElementFormatType = 'left' | 'center' | 'right' | 'justify' | '';
 export declare class ElementNode extends LexicalNode {
   __children: Array<NodeKey>;
   __format: number;
@@ -672,28 +652,30 @@ export declare class ElementNode extends LexicalNode {
   __dir: 'ltr' | 'rtl' | null;
   constructor(key?: NodeKey);
   getFormat(): number;
+  getFormatType(): ElementFormatType;
   getIndent(): number;
-  getChildren(): Array<LexicalNode>;
+  getChildren<T extends LexicalNode>(): Array<T>;
+  getChildren<T extends Array<LexicalNode>>(): T;
   getChildrenKeys(): Array<NodeKey>;
   getChildrenSize(): number;
   isEmpty(): boolean;
   isDirty(): boolean;
   getAllTextNodes(includeInert?: boolean): Array<TextNode>;
-  getFirstDescendant(): null | LexicalNode;
-  getLastDescendant(): null | LexicalNode;
-  getDescendantByIndex(index: number): LexicalNode;
+  getFirstDescendant<T extends LexicalNode>(): null | T;
+  getLastDescendant<T extends LexicalNode>(): null | T;
+  getDescendantByIndex<T extends LexicalNode>(index: number): null | T;
   getFirstChild<T extends LexicalNode>(): null | T;
   getFirstChildOrThrow<T extends LexicalNode>(): T;
-  getLastChild(): null | LexicalNode;
-  getChildAtIndex(index: number): null | LexicalNode;
+  getLastChild<T extends LexicalNode>(): null | T;
+  getChildAtIndex<T extends LexicalNode>(index: number): null | T;
   getTextContent(includeInert?: boolean, includeDirectionless?: false): string;
   getDirection(): 'ltr' | 'rtl' | null;
   hasFormat(type: ElementFormatType): boolean;
   select(_anchorOffset?: number, _focusOffset?: number): RangeSelection;
   selectStart(): RangeSelection;
   selectEnd(): RangeSelection;
-  clear(): ElementNode;
-  append(...nodesToAppend: Array<LexicalNode>): ElementNode;
+  clear(): this;
+  append(...nodesToAppend: Array<LexicalNode>): this;
   setDirection(direction: 'ltr' | 'rtl' | null): ElementNode;
   setFormat(type: ElementFormatType): ElementNode;
   setIndent(indentLevel: number): ElementNode;
@@ -719,7 +701,8 @@ export declare class ElementNode extends LexicalNode {
     start: number,
     deleteCount: number,
     nodesToInsert: Array<LexicalNode>,
-  ): ElementNode;
+  ): this;
+  exportJSON(): SerializedElementNode;
 }
 export function $isElementNode(
   node: LexicalNode | null | undefined,
@@ -728,7 +711,7 @@ export function $isElementNode(
 /**
  * LexicalDecoratorNode
  */
-export declare class DecoratorNode<X> extends LexicalNode {
+export declare class DecoratorNode<X = unknown> extends LexicalNode {
   constructor(key?: NodeKey);
   decorate(editor: LexicalEditor): X;
   isIsolated(): boolean;
@@ -749,6 +732,10 @@ export declare class ParagraphNode extends ElementNode {
   updateDOM(prevNode: ParagraphNode, dom: HTMLElement): boolean;
   insertNewAfter(): ParagraphNode;
   collapseAtStart(): boolean;
+  static importJSON(
+    serializedParagraphNode: SerializedElementNode,
+  ): ParagraphNode;
+  exportJSON(): SerializedElementNode;
 }
 export function $createParagraphNode(): ParagraphNode;
 export function $isParagraphNode(
@@ -773,6 +760,8 @@ export function $isGridCellNode(
 /**
  * LexicalUtils
  */
+export function $hasUpdateTag(tag: string): boolean;
+export function $addUpdateTag(tag: string): void;
 export function $getNearestNodeFromDOMNode(
   startingDOM: Node,
 ): LexicalNode | null;
@@ -791,7 +780,70 @@ export function $getDecoratorNode(
   isBackward: boolean,
 ): null | LexicalNode;
 
+export type EventHandler = (event: Event, editor: LexicalEditor) => void;
+
 /**
  * LexicalVersion
  */
 export declare var VERSION: string;
+
+/**
+ *  Serialization/Deserialization
+ * */
+interface InternalSerializedNode {
+  children?: Array<InternalSerializedNode>;
+  type: string;
+  version: number;
+}
+
+export function $parseSerializedNode<
+  SerializedNode extends InternalSerializedNode,
+>(serializedNode: SerializedNode): LexicalNode;
+
+export type SerializedLexicalNode = {
+  type: string;
+  version: number;
+};
+
+export type SerializedEditor = {
+  editorState: SerializedEditorState;
+};
+
+export type SerializedTextNode = Spread<
+  {
+    detail: number;
+    format: number;
+    mode: TextModeType;
+    style: string;
+    text: string;
+  },
+  SerializedLexicalNode
+>;
+
+export type SerializedElementNode = Spread<
+  {
+    children: Array<SerializedLexicalNode>;
+    direction: 'ltr' | 'rtl' | null;
+    format: ElementFormatType;
+    indent: number;
+  },
+  SerializedLexicalNode
+>;
+
+export type SerializedRootNode = Spread<
+  {
+    type: 'root';
+  },
+  SerializedElementNode
+>;
+
+export type SerializedGridCellNode = Spread<
+  {
+    colSpan: number;
+  },
+  SerializedElementNode
+>;
+
+export interface SerializedEditorState {
+  root: SerializedRootNode;
+}