import { ChangeSource, ColorTransformDirection, ContentPosition, GetContentMode, PluginEventType, PositionType, QueryScope, RegionType } from 'roosterjs-editor-types'; import type { BlockElement, ClipboardData, ContentChangedData, CoreCreator, DarkColorHandler, DefaultFormat, DOMEventHandler, EditorCore, EditorOptions, EditorUndoState, ExperimentalFeatures, GenericContentEditFeature, IContentTraverser, IEditor, InsertOption, IPositionContentSearcher, NodePosition, PendableFormatState, PluginEvent, PluginEventData, PluginEventFromType, Rect, Region, SelectionPath, SelectionRangeEx, SizeTransformer, StyleBasedFormatState, TableSelection, TrustedHTMLHandler } from 'roosterjs-editor-types'; import type { CompatibleChangeSource, CompatibleColorTransformDirection, CompatibleContentPosition, CompatibleExperimentalFeatures, CompatibleGetContentMode, CompatiblePluginEventType, CompatibleQueryScope, CompatibleRegionType } from 'roosterjs-editor-types/lib/compatibleTypes'; /** * Base class of editor */ export declare class EditorBase implements IEditor { private core; /** * Creates an instance of EditorBase * @param contentDiv The DIV HTML element which will be the container element of editor * @param options An optional options object to customize the editor */ constructor(contentDiv: HTMLDivElement, options: TEditorOptions, coreCreator: CoreCreator); /** * Dispose this editor, dispose all plugins and custom data */ dispose(): void; /** * Get whether this editor is disposed * @returns True if editor is disposed, otherwise false */ isDisposed(): boolean; /** * Insert node into editor * @param node The node to insert * @param option Insert options. Default value is: * position: ContentPosition.SelectionStart * updateCursor: true * replaceSelection: true * insertOnNewLine: false * @returns true if node is inserted. Otherwise false */ insertNode(node: Node, option?: InsertOption): boolean; /** * Delete a node from editor content * @param node The node to delete * @returns true if node is deleted. Otherwise false */ deleteNode(node: Node): boolean; /** * Replace a node in editor content with another node * @param existingNode The existing node to be replaced * @param toNode node to replace to * @param transformColorForDarkMode (optional) Whether to transform new node to dark mode. Default is false * @returns true if node is replaced. Otherwise false */ replaceNode(existingNode: Node, toNode: Node, transformColorForDarkMode?: boolean): boolean; /** * Get BlockElement at given node * @param node The node to create InlineElement * @returns The BlockElement result */ getBlockElementAtNode(node: Node): BlockElement | null; contains(arg: Node | Range | null): boolean; queryElements(selector: string, scopeOrCallback?: QueryScope | CompatibleQueryScope | ((node: Node) => any), callback?: (node: Node) => any): HTMLElement[]; /** * Collapse nodes within the given start and end nodes to their common ancestor node, * split parent nodes if necessary * @param start The start node * @param end The end node * @param canSplitParent True to allow split parent node there are nodes before start or after end under the same parent * and the returned nodes will be all nodes from start through end after splitting * False to disallow split parent * @returns When canSplitParent is true, returns all node from start through end after splitting, * otherwise just return start and end */ collapseNodes(start: Node, end: Node, canSplitParent: boolean): Node[]; /** * Check whether the editor contains any visible content * @param trim Whether trim the content string before check. Default is false * @returns True if there's no visible content, otherwise false */ isEmpty(trim?: boolean): boolean; /** * Get current editor content as HTML string * @param mode specify what kind of HTML content to retrieve * @returns HTML string representing current editor content */ getContent(mode?: GetContentMode | CompatibleGetContentMode): string; /** * Set HTML content to this editor. All existing content will be replaced. A ContentChanged event will be triggered * @param content HTML content to set in * @param triggerContentChangedEvent True to trigger a ContentChanged event. Default value is true */ setContent(content: string, triggerContentChangedEvent?: boolean): void; /** * Insert HTML content into editor * @param HTML content to insert * @param option Insert options. Default value is: * position: ContentPosition.SelectionStart * updateCursor: true * replaceSelection: true * insertOnNewLine: false */ insertContent(content: string, option?: InsertOption): void; /** * Delete selected content */ deleteSelectedContent(): NodePosition | null; /** * Paste into editor using a clipboardData object * @param clipboardData Clipboard data retrieved from clipboard * @param pasteAsText Force pasting as plain text. Default value is false * @param applyCurrentStyle True if apply format of current selection to the pasted content, * false to keep original format. Default value is false. When pasteAsText is true, this parameter is ignored * @param pasteAsImage: When set to true, if the clipboardData contains a imageDataUri will paste the image to the editor */ paste(clipboardData: ClipboardData, pasteAsText?: boolean, applyCurrentFormat?: boolean, pasteAsImage?: boolean): void; /** * Get current selection range from Editor. * It does a live pull on the selection, if nothing retrieved, return whatever we have in cache. * @param tryGetFromCache Set to true to retrieve the selection range from cache if editor doesn't own the focus now. * Default value is true * @returns current selection range, or null if editor never got focus before */ getSelectionRange(tryGetFromCache?: boolean): Range | null; /** * Get current selection range from Editor. * It does a live pull on the selection, if nothing retrieved, return whatever we have in cache. * @param tryGetFromCache Set to true to retrieve the selection range from cache if editor doesn't own the focus now. * Default value is true * @returns current selection range, or null if editor never got focus before */ getSelectionRangeEx(): SelectionRangeEx; /** * Get current selection in a serializable format * It does a live pull on the selection, if nothing retrieved, return whatever we have in cache. * @returns current selection path, or null if editor never got focus before */ getSelectionPath(): SelectionPath | null; /** * Check if focus is in editor now * @returns true if focus is in editor, otherwise false */ hasFocus(): boolean; /** * Focus to this editor, the selection was restored to where it was before, no unexpected scroll. */ focus(): void; select(arg1: Range | SelectionRangeEx | NodePosition | Node | SelectionPath | null, arg2?: NodePosition | number | PositionType | TableSelection | null, arg3?: Node, arg4?: number | PositionType): boolean; /** * Get current focused position. Return null if editor doesn't have focus at this time. */ getFocusedPosition(): NodePosition | null; /** * Get an HTML element from current cursor position. * When expectedTags is not specified, return value is the current node (if it is HTML element) * or its parent node (if current node is a Text node). * When expectedTags is specified, return value is the first ancestor of current node which has * one of the expected tags. * If no element found within editor by the given tag, return null. * @param selector Optional, an HTML selector to find HTML element with. * @param startFrom Start search from this node. If not specified, start from current focused position * @param event Optional, if specified, editor will try to get cached result from the event object first. * If it is not cached before, query from DOM and cache the result into the event object */ getElementAtCursor(selector?: string, startFrom?: Node, event?: PluginEvent): HTMLElement | null; /** * Check if this position is at beginning of the editor. * This will return true if all nodes between the beginning of target node and the position are empty. * @param position The position to check * @returns True if position is at beginning of the editor, otherwise false */ isPositionAtBeginning(position: NodePosition): boolean; /** * Get impacted regions from selection */ getSelectedRegions(type?: RegionType | CompatibleRegionType): Region[]; addDomEventHandler(nameOrMap: string | Record, handler?: DOMEventHandler): () => void; /** * Trigger an event to be dispatched to all plugins * @param eventType Type of the event * @param data data of the event with given type, this is the rest part of PluginEvent with the given type * @param broadcast indicates if the event needs to be dispatched to all plugins * True means to all, false means to allow exclusive handling from one plugin unless no one wants that * @returns the event object which is really passed into plugins. Some plugin may modify the event object so * the result of this function provides a chance to read the modified result */ triggerPluginEvent(eventType: T, data: PluginEventData, broadcast?: boolean): PluginEventFromType; /** * Trigger a ContentChangedEvent * @param source Source of this event, by default is 'SetContent' * @param data additional data for this event */ triggerContentChangedEvent(source?: ChangeSource | CompatibleChangeSource | string, data?: any): void; /** * Undo last edit operation */ undo(): void; /** * Redo next edit operation */ redo(): void; /** * Add undo snapshot, and execute a format callback function, then add another undo snapshot, then trigger * ContentChangedEvent with given change source. * If this function is called nested, undo snapshot will only be added in the outside one * @param callback The callback function to perform formatting, returns a data object which will be used as * the data field in ContentChangedEvent if changeSource is not null. * @param changeSource The change source to use when fire ContentChangedEvent. When the value is not null, * a ContentChangedEvent will be fired with change source equal to this value * @param canUndoByBackspace True if this action can be undone when user press Backspace key (aka Auto Complete). */ addUndoSnapshot(callback?: (start: NodePosition | null, end: NodePosition | null) => any, changeSource?: ChangeSource | CompatibleChangeSource | string, canUndoByBackspace?: boolean, additionalData?: ContentChangedData): void; /** * Whether there is an available undo/redo snapshot */ getUndoState(): EditorUndoState; /** * Get document which contains this editor * @returns The HTML document which contains this editor */ getDocument(): Document; /** * Get the scroll container of the editor */ getScrollContainer(): HTMLElement; /** * Get custom data related to this editor * @param key Key of the custom data * @param getter Getter function. If custom data for the given key doesn't exist, * call this function to get one and store it if it is specified. Otherwise return undefined * @param disposer An optional disposer function to dispose this custom data when * dispose editor. */ getCustomData(key: string, getter?: () => T, disposer?: (value: T) => void): T; /** * Check if editor is in IME input sequence * @returns True if editor is in IME input sequence, otherwise false */ isInIME(): boolean; /** * Get default format of this editor * @returns Default format object of this editor */ getDefaultFormat(): DefaultFormat; /** * Get a content traverser for the whole editor * @param startNode The node to start from. If not passed, it will start from the beginning of the body */ getBodyTraverser(startNode?: Node): IContentTraverser; /** * Get a content traverser for current selection * @returns A content traverser, or null if editor never got focus before */ getSelectionTraverser(range?: Range): IContentTraverser | null; /** * Get a content traverser for current block element start from specified position * @param startFrom Start position of the traverser. Default value is ContentPosition.SelectionStart * @returns A content traverser, or null if editor never got focus before */ getBlockTraverser(startFrom?: ContentPosition | CompatibleContentPosition): IContentTraverser | null; /** * Get a text traverser of current selection * @param event Optional, if specified, editor will try to get cached result from the event object first. * If it is not cached before, query from DOM and cache the result into the event object * @returns A content traverser, or null if editor never got focus before */ getContentSearcherOfCursor(event?: PluginEvent): IPositionContentSearcher | null; /** * Run a callback function asynchronously * @param callback The callback function to run * @returns a function to cancel this async run */ runAsync(callback: (editor: IEditor) => void): () => void; /** * Set DOM attribute of editor content DIV * @param name Name of the attribute * @param value Value of the attribute */ setEditorDomAttribute(name: string, value: string | null): void; /** * Get DOM attribute of editor content DIV, null if there is no such attribute. * @param name Name of the attribute */ getEditorDomAttribute(name: string): string | null; /** * @deprecated Use getVisibleViewport() instead. * * Get current relative distance from top-left corner of the given element to top-left corner of editor content DIV. * @param element The element to calculate from. If the given element is not in editor, return value will be null * @param addScroll When pass true, The return value will also add scrollLeft and scrollTop if any. So the value * may be different than what user is seeing from the view. When pass false, scroll position will be ignored. * @returns An [x, y] array which contains the left and top distances, or null if the given element is not in editor. */ getRelativeDistanceToEditor(element: HTMLElement, addScroll?: boolean): number[] | null; /** * Add a Content Edit feature. * @param feature The feature to add */ addContentEditFeature(feature: GenericContentEditFeature): void; /** * Remove a Content Edit feature. * @param feature The feature to remove */ removeContentEditFeature(feature: GenericContentEditFeature): void; /** * Get style based format state from current selection, including font name/size and colors */ getStyleBasedFormatState(node?: Node): StyleBasedFormatState; /** * Get the pendable format such as underline and bold * @param forceGetStateFromDOM If set to true, will force get the format state from DOM tree. * @returns The pending format state */ getPendableFormatState(forceGetStateFromDOM?: boolean): PendableFormatState; /** * Ensure user will type into a container element rather than into the editor content DIV directly * @param position The position that user is about to type to * @param keyboardEvent Optional keyboard event object */ ensureTypeInContainer(position: NodePosition, keyboardEvent?: KeyboardEvent): void; /** * Set the dark mode state and transforms the content to match the new state. * @param nextDarkMode The next status of dark mode. True if the editor should be in dark mode, false if not. */ setDarkModeState(nextDarkMode?: boolean): void; /** * Check if the editor is in dark mode * @returns True if the editor is in dark mode, otherwise false */ isDarkMode(): boolean; /** * Transform the given node and all its child nodes to dark mode color if editor is in dark mode * @param node The node to transform * @param direction The transform direction. @default ColorTransformDirection.LightToDark */ transformToDarkColor(node: Node, direction?: ColorTransformDirection | CompatibleColorTransformDirection): void; /** * Get a darkColorHandler object for this editor. */ getDarkColorHandler(): DarkColorHandler; /** * Make the editor in "Shadow Edit" mode. * In Shadow Edit mode, all format change will finally be ignored. * This can be used for building a live preview feature for format button, to allow user * see format result without really apply it. * This function can be called repeated. If editor is already in shadow edit mode, we can still * use this function to do more shadow edit operation. */ startShadowEdit(): void; /** * Leave "Shadow Edit" mode, all changes made during shadow edit will be discarded */ stopShadowEdit(): void; /** * Check if editor is in Shadow Edit mode */ isInShadowEdit(): boolean; /** * Check if the given experimental feature is enabled * @param feature The feature to check */ isFeatureEnabled(feature: ExperimentalFeatures | CompatibleExperimentalFeatures): boolean; /** * Get a function to convert HTML string to trusted HTML string. * By default it will just return the input HTML directly. To override this behavior, * pass your own trusted HTML handler to EditorOptions.trustedHTMLHandler * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types */ getTrustedHTMLHandler(): TrustedHTMLHandler; /** * @deprecated Use getZoomScale() instead */ getSizeTransformer(): SizeTransformer; /** * Get current zoom scale, default value is 1 * When editor is put under a zoomed container, need to pass the zoom scale number using EditorOptions.zoomScale * to let editor behave correctly especially for those mouse drag/drop behaviors * @returns current zoom scale number */ getZoomScale(): number; /** * Set current zoom scale, default value is 1 * When editor is put under a zoomed container, need to pass the zoom scale number using EditorOptions.zoomScale * to let editor behave correctly especially for those mouse drag/drop behaviors * @param scale The new scale number to set. It should be positive number and no greater than 10, otherwise it will be ignored. */ setZoomScale(scale: number): void; /** * Retrieves the rect of the visible viewport of the editor. */ getVisibleViewport(): Rect | null; /** * @returns the current EditorCore object * @throws a standard Error if there's no core object */ protected getCore(): TEditorCore; }