Selection API

A class for managing text selection and cursor in the editor.

WARNING

This class is intended for internal use in the editor and for developing third-party components. However, its methods should be used with caution as they bypass the event manager system and history manager. Improper use can lead to errors and unpredictable behavior throughout the application.

SelectionAPI Methods

Function	Signature	Description
setState	setState(state: SelectionState): void	Saves the current selection state.
getState	getState(): SelectionState	Returns the saved selection state.
clearState	clearState(): void	Clears the saved selection state.
applyState	applyState(): void	Applies the current selection state to the container.
select	select(startPos: number, endPos: number, container?: Element, scrollToContainer?: boolean): void	Selects text within the container from start to end position.
insert	insert(content: string, isHtml?: boolean, strip?: boolean): boolean	Inserts content at the current cursor position.
insertText	insertText(content: string, cleanHtml?: boolean): boolean	Inserts plain text at the current cursor position.
splitContent	splitContent(container?: HTMLElement | null): string	Splits content at the current cursor position.
findTags	findTags(container: Element | HTMLElement, children?: boolean): HTMLElement[]	Finds HTML tags that intersect with the current selection.
getSelection	getSelection(): Selection | null	Gets the current selection object.
getRange	getRange(index?: number): Range | null	Gets a specific range from the current selection.
getAbsoluteOffset	getAbsoluteOffset(container: Node, offset: number): number	Calculates the absolute offset of characters within the container.
getOffset	getOffset(container?: Node | HTMLElement | null): [number, number]	Returns the start and end offsets of the current selection.
getBounds	getBounds(): DOMRect | null	Returns the boundaries of the current selection.
getFirstLineBounds	getFirstLineBounds(): DOMRect | null	Returns the boundaries of the current selection for a single line.

Types and Interfaces of SelectionAPI

/**
 * Interface for cursor position.
 * @property start - Start offset of the selection
 * @property end - End offset of the selection
 */
export interface CursorPosition {
 /** Start offset of the selection */
 start: number;
 /** End offset of the selection */
 end: number;
}

/**
 * Interface for the current selection state.
 * @property position - Cursor position with start and end offsets
 * @property element - HTML element containing the selection, or null if there is no selection
 */
export interface SelectionState {
 /** Cursor position with start and end offsets */
 position: CursorPosition;
 /** HTML element containing the selection, or null if there is no selection */
 element: HTMLElement | null;
}

/**
 * Interface for the Selection API.
 */
export interface SelectionAPI {
 setState(state: SelectionState): void;
 getState(): SelectionState;
 clearState(): void;
 applyState(): void;
 select(startPos: number, endPos: number, container?: Element, scrollToContainer?: boolean): void;
 insert(content: string, isHtml?: boolean, strip?: boolean): boolean;
 insertText(content: string, cleanHtml?: boolean): boolean;
 splitContent(container?: HTMLElement | null): string;
 findTags(container: Element | HTMLElement, children?: boolean): HTMLElement[];
 getSelection(): Selection | null;
 getRange(index?: number): Range | null;
 getAbsoluteOffset(container: Node, offset: number): number;
 getOffset(container?: Node | HTMLElement | null): [number, number];
 getBounds(): DOMRect | null;
 getFirstLineBounds(): DOMRect | null;
}

Example of Using SelectionAPI

import Texditor from "texditor";
const editor = new Texditor({
  handle: "my-editor"
});

// Saving the selection state
const selectionState = editor.selectionApi.getState();
console.log('Current selection state:', selectionState);

// Setting selection in the container
editor.selectionApi.select(0, 10, editor.blockManager.getContentElement());

// Inserting text at the current cursor position
editor.selectionApi.insertText('New text');

// Inserting HTML at the current cursor position
editor.selectionApi.insert('<strong>Bold text</strong>', true);