API выделения

Класс для управления выделением текста и курсором в редакторе.

WARNING

Этот класс предназначен для внутреннего использования в редакторе и для разработки сторонних компонентов. Однако его методы следует применять с осторожностью, поскольку они обходят систему менеджера событий и менеджера истории. Неправильное использование может привести к ошибкам и непредсказуемому поведению во всём приложении.

Методы SelectionAPI

Функция	Сигнатура	Описание
setState	setState(state: SelectionState): void	Сохраняет текущее состояние выделения.
getState	getState(): SelectionState	Возвращает сохранённое состояние выделения.
clearState	clearState(): void	Очищает сохранённое состояние выделения.
applyState	applyState(): void	Применяет текущее состояние выделения на контейнере.
select	select(startPos: number, endPos: number, container?: Element, scrollToContainer?: boolean): void	Выделяет текст внутри контейнера от начальной до конечной позиции.
insert	insert(content: string, isHtml?: boolean, strip?: boolean): boolean	Вставляет содержимое в текущую позицию курсора.
insertText	insertText(content: string, cleanHtml?: boolean): boolean	Вставляет обычный текст в текущую позицию курсора.
splitContent	splitContent(container?: HTMLElement | null): string	Разбивает содержимое в текущем положении курсора.
findTags	findTags(container: Element | HTMLElement, children?: boolean): HTMLElement[]	Находит HTML-теги, которые пересекаются с текущим выделением.
getSelection	getSelection(): Selection | null	Получить объект текущего выделения.
getRange	getRange(index?: number): Range | null	Получает определенный диапазон из текущего выделения.
getAbsoluteOffset	getAbsoluteOffset(container: Node, offset: number): number	Вычисляет абсолютное смещение символов внутри контейнера.
getOffset	getOffset(container?: Node | HTMLElement | null): [number, number]	Возвращает начальное и конечное смещения текущего выделения.
getBounds	getBounds(): DOMRect | null	Возвращает границы текущего выделения.
getFirstLineBounds	getFirstLineBounds(): DOMRect | null	Возвращает границы текущего выделения для одной линии.

Типы и интерфейсы SelectionAPI

/**
 * Интерфейс позиции курсора.
 * @property start - Начальное смещение выделения
 * @property end - Конечное смещение выделения
 */
export interface CursorPosition {
 /** Начальное смещение выделения */
 start: number;
 /** Конечное смещение выделения */
 end: number;
}

/**
 * Интерфейс состояния текущего выделения.
 * @property position - Позиция курсора с начальным и конечным смещениями
 * @property element - HTML-элемент, содержащий выделение, или null, если выделения нет
 */
export interface SelectionState {
 /** Позиция курсора с начальным и конечным смещениями */
 position: CursorPosition;
 /** HTML-элемент, содержащий выделение, или null, если выделения нет */
 element: HTMLElement | null;
}

/**
 * Интерфейс 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;
}

Пример использования SelectionAPI

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

// Сохранение состояния выделения
const selectionState = editor.selectionApi.getState();
console.log('Текущее состояние выделения:', selectionState);

// Установка выделения в контейнере
editor.selectionApi.select(0, 10, editor.blockManager.getContentElement());

// Вставка текста в текущую позицию курсора
editor.selectionApi.insertText('Новый текст');

// Вставка HTML в текущую позицию курсора
editor.selectionApi.insert('<strong>Жирный текст</strong>', true);