import type { Transformer } from '@lexical/markdown'; import type { CommandListener, CommandListenerPriority, CreateEditorArgs, EditorSetOptions, EditorState, EditorUpdateOptions, Klass, LexicalCommand, LexicalEditor, LexicalNode, MutationListener, NodeKey, SerializedEditorState, TextFormatType, Transform, UpdateListener } from 'lexical'; import type { Except, JsonObject, JsonValue, ReadonlyDeep } from 'type-fest'; import type { CSSProperties, VNodeChild } from 'vue'; import type { SelectOption } from '../select'; import type { TagColor } from '../tag'; import type { RichTextEditorBuiltInNodeName, RichTextEditorJsonFormNodeName } from './built-in-components'; export type RichTextEditorValue = SerializedEditorState; export type RichTextEditorSemanticType = 'root' | 'content' | 'placeholder' | 'component'; export interface RichTextEditorFocusOptions { defaultSelection?: 'rootStart' | 'rootEnd'; selection?: 'start' | 'end' | 'all'; preventScroll?: boolean; } export interface RichTextEditorMutationListenerOptions { skipInitialization?: boolean; } export type RichTextEditorConfig = Except; export interface RichTextEditorAutoSize { minRows?: number; maxRows?: number; } export interface RichTextEditorComponentNodeData { key: string; name: string; value?: JsonValue; props?: JsonObject; textValue?: string; } export type RichTextEditorComponentNodeSnapshot = ReadonlyDeep; export type RichTextEditorContentItem = string | RichTextEditorComponentNodeData; export type RichTextEditorContentSnapshot = string | RichTextEditorComponentNodeSnapshot; export interface RichTextEditorInsertOptions extends EditorUpdateOptions { position?: 'start' | 'end' | 'cursor'; replaceCharacters?: string; } export interface RichTextEditorInputNodeData extends RichTextEditorComponentNodeData { name: 'input'; value?: string | number; props?: { placeholder?: string; } & JsonObject; } export interface RichTextEditorSelectNodeData extends RichTextEditorComponentNodeData { name: 'select'; value?: JsonValue; props: { options: SelectOption[]; placeholder?: string; } & JsonObject; } export interface RichTextEditorJsonFormNodeData extends RichTextEditorComponentNodeData { name: RichTextEditorJsonFormNodeName; } export interface RichTextEditorTagNodeData extends RichTextEditorComponentNodeData { name: 'tag'; value?: JsonValue; props?: { label?: string; color?: TagColor | string; closable?: boolean; } & JsonObject; } export type RichTextEditorBuiltInNodeData = RichTextEditorJsonFormNodeData | RichTextEditorTagNodeData; export type { RichTextEditorBuiltInNodeName, RichTextEditorJsonFormNodeName }; export interface RichTextEditorNodeRenderContext { nodeKey: NodeKey; node: RichTextEditorComponentNodeSnapshot; disabled: boolean; readonly: boolean; update: (value: JsonValue) => void; remove: () => void; editor: LexicalEditor; } export interface RichTextEditorPluginContext { rootElement: HTMLElement; } export type RichTextEditorPlugin = (editor: LexicalEditor, context: RichTextEditorPluginContext) => undefined | (() => void); export interface RichTextEditorChangeContext { editor: LexicalEditor; editorState: EditorState; tags: ReadonlySet; } export interface RichTextEditorProps { modelValue?: RichTextEditorValue; defaultValue?: RichTextEditorValue | string | readonly RichTextEditorContentItem[]; editorConfig?: RichTextEditorConfig; plugins?: readonly RichTextEditorPlugin[]; transformers?: readonly Transformer[]; placeholder?: string; disabled?: boolean; readonly?: boolean; history?: boolean; historyDelay?: number; historyMaxDepth?: number | null; autoSize?: boolean | RichTextEditorAutoSize; spellcheck?: boolean; ariaLabel?: string; classNames?: Partial>; styles?: Partial>; } export interface RichTextEditorEmits { 'update:modelValue': [value: RichTextEditorValue]; 'change': [value: RichTextEditorValue, context: RichTextEditorChangeContext]; 'update': [context: RichTextEditorChangeContext]; 'ready': [editor: LexicalEditor]; 'focus': [event: FocusEvent]; 'blur': [event: FocusEvent]; 'error': [error: Error]; } export interface RichTextEditorSlots { placeholder?: () => VNodeChild; [name: `node-${string}`]: ((context: RichTextEditorNodeRenderContext) => VNodeChild) | undefined; } export interface RichTextEditorRef { readonly editor: LexicalEditor | null; readonly editorState: EditorState | null; readonly rootElement: HTMLDivElement | null; readonly canUndo: boolean; readonly canRedo: boolean; focus: (callback?: () => void, options?: RichTextEditorFocusOptions) => void; blur: () => void; clear: () => void; undo: () => boolean; redo: () => boolean; getJSON: () => RichTextEditorValue | undefined; setJSON: (value: RichTextEditorValue | string, options?: EditorSetOptions) => void; getContent: () => RichTextEditorContentSnapshot[]; setContent: (content: readonly RichTextEditorContentItem[], options?: EditorUpdateOptions) => void; insertContent: (content: readonly RichTextEditorContentItem[], options?: RichTextEditorInsertOptions) => void; getText: () => string; getHTML: () => string; setHTML: (html: string, options?: EditorUpdateOptions) => void; getMarkdown: (transformers?: readonly Transformer[]) => string; setMarkdown: (markdown: string, transformers?: readonly Transformer[], options?: EditorUpdateOptions) => void; insertText: (text: string, options?: RichTextEditorInsertOptions) => void; insertComponent: (data: RichTextEditorComponentNodeData, options?: RichTextEditorInsertOptions) => void; updateComponent: (nodeKey: NodeKey, value: JsonValue, options?: EditorUpdateOptions) => void; removeComponent: (nodeKey: NodeKey, options?: EditorUpdateOptions) => void; formatText: (format: TextFormatType) => boolean; read: (callback: () => T) => T | undefined; update: (callback: () => void, options?: EditorUpdateOptions) => void; dispatchCommand: (command: LexicalCommand, payload: T) => boolean; registerCommand: (command: LexicalCommand, listener: CommandListener, priority: CommandListenerPriority) => () => void; registerUpdateListener: (listener: UpdateListener) => () => void; registerMutationListener: (klass: Klass, listener: MutationListener, options?: RichTextEditorMutationListenerOptions) => () => void; registerNodeTransform: (klass: Klass, listener: Transform) => () => void; }