Базовые классы

Базовыми классами для работы редактора, его моделей и событий служат EventManager и BaseModel. От BaseModel наследуются все остальные модели, включая BlockModel, ToolModel, ActionModel, ExtensionModel и FileActionModel.

BaseModel

Базовый класс модели, предоставляющий основную функциональность, управление событиями и хуки жизненного цикла.

Методы базовой модели

Функция	Сигнатура	Описание
Конструктор	public constructor(editor: Texditor)	Создаёт новый экземпляр базовой модели.
getEventId	public getEventId(): string	Возвращает уникальный идентификатор для экземпляра слушателя событий.
getConfig	public getConfig<K extends keyof BaseModelConfig>(key: K, defaultValue?: BaseModelConfig[K]): BaseModelConfig[K]	Получает значение конфигурации по ключу.
getOption	public getOption<T = unknown>(key: string, defaultValue?: T): T | null	Получает значение опции по ключу.
setOption	public setOption(key: string, value: unknown): void	Устанавливает значение опции.
setOptions	public setOptions(options: Record<string, unknown>): void	Устанавливает несколько опций (объединяет с существующими).
getOptions	public getOptions(): Record<string, unknown>	Возвращает копию всех опций.
removeOption	public removeOption(key: string): boolean	Удаляет опцию по ключу. Возвращает true, если опция существовала и была удалена.
clearOptions	public clearOptions(): void	Очищает все опции.
setStore	public setStore(key: string, value: unknown): this	Устанавливает значение в хранилище. Возвращает текущий экземпляр для цепочки вызовов.
getStore	public getStore(key: string | null): unknown	Получает значение из хранилища. Если key равен null, возвращает всё хранилище.
getName	public getName(): string	Возвращает имя модели.
getElementTagName	public getElementTagName(): string	Возвращает имя тега элемента модели.
getId	public getId(): string	Возвращает уникальный идентификатор модели.
getElement	public getElement(): TElement	Возвращает DOM-элемент модели.
getClassName	public getClassName(): string	Возвращает имя CSS-класса.
getRootClassName	public getRootClassName(): string	Возвращает корневое имя CSS-класса.
getTranslation	public getTranslation(): string	Возвращает переведённую строку для локализации.
getIcon	public getIcon(): RenderIconContent	Возвращает содержимое иконки для кнопки модели.
getIconWidth	public getIconWidth(): number	Возвращает ширину иконки в пикселях.
getIconHeight	public getIconHeight(): number	Возвращает высоту иконки в пикселях.
getModelCode	public getModelCode(): string	Возвращает код модели.
isVisibleTitle	public isVisibleTitle(): boolean	Проверяет, виден ли заголовок всегда.
isAttributeTitle	public isAttributeTitle(): boolean	Проверяет, виден ли атрибут заголовка.
isVisibleIcon	public isVisibleIcon(): boolean	Проверяет, видна ли иконка всегда.
isActive	public isActive(): boolean	Проверяет, активна ли модель.
isVisible	public isVisible(): boolean	Проверяет, видна ли модель.
destroy	public destroy(): void	Уничтожает экземпляр и очищает ресурсы.

Защищённые и статические методы базовой модели

Функция	Сигнатура	Описание
setup	public static setup(config: Partial<BaseModelConfig>): ModelConstructor	Устанавливает глобальную конфигурацию для модели.
createElement	protected createElement(): TElement	Создаёт DOM-элемент модели.
onCreateElement	protected onCreateElement(_el: TElement): void	Хук, вызываемый после создания элемента модели.
parentOnCreateElement	protected parentOnCreateElement(_el: TElement): void	Родительский хук, вызываемый после создания элемента модели.
onLoad	protected onLoad(): void	Хук, вызываемый при загрузке модели.
onClick	protected onClick(_evt: MouseEvent): void	Хук, вызываемый при клике на элемент модели.
parentOnClick	protected parentOnClick(evt: MouseEvent): void	Родительский хук, вызываемый после клика на элемент модели.
onMount	protected onMount(_el: TElement): void	Хук, вызываемый после монтирования в DOM.
parentOnMount	protected parentOnMount(_el: TElement): void	Родительский хук, вызываемый после монтирования в DOM.
onConstruct	protected onConstruct(_editor: Texditor): void	Хук, вызываемый во время создания конструктора.
parentConfig	protected parentConfig(): Partial<BaseModelConfig>	Возвращает конфигурацию родительской модели.
configure	protected configure(): Partial<BaseModelConfig>	Настраивает конфигурацию модели.
parentDestroy	protected parentDestroy(): void	Родительский хук, вызываемый перед уничтожением элемента.

Типы и интерфейсы базовой модели

/**
 * Интерфейс DOM-элемента, расширяющий HTMLElement с ссылкой на базовую модель.
 */
export interface BaseElement extends HTMLElement {
 /** Ссылка на экземпляр базовой модели */
 baseModel: BaseModel;
}

/**
 * Интерфейс конфигурации модели.
 * @property name - Имя модели
 * @property elementTagName - Имя тега элемента модели
 * @property translation - Ключ перевода для локализации
 * @property icon - Содержимое иконки для кнопки
 * @property visibleIcon - Видна ли иконка
 * @property iconWidth - Ширина иконки в пикселях
 * @property iconHeight - Высота иконки в пикселях
 * @property className - Имя CSS-класса
 * @property attributeTitle - Виден ли атрибут заголовка
 * @property visibleTitle - Виден ли заголовок
 * @property __modelCode - Уникальный код модели
 */
export interface BaseModelConfig {
 name: string;
 elementTagName: string;
 translation: string;
 icon: RenderIconContent;
 visibleIcon: boolean;
 iconWidth: number;
 iconHeight: number;
 className: string;
 attributeTitle: boolean;
 visibleTitle: boolean;
 __modelCode: string;
 [key: string]: unknown;
}

/**
 * Универсальный интерфейс конструктора модели.
 * @template T - Тип интерфейса модели, расширяющий BaseModel
 * @template C - Тип конфигурации модели, расширяющий BaseModelConfig
 */
export interface ModelConstructor<T extends BaseModel = BaseModel, C extends BaseModelConfig = BaseModelConfig> {
 /**
  * Создаёт новый экземпляр модели.
  * @param editor - Экземпляр редактора
  * @returns Экземпляр модели типа T
  */
 new (editor: Texditor): T;
 /**
  * Устанавливает глобальную конфигурацию для модели.
  * @param config - Объект конфигурации
  * @returns Конструктор модели
  */
 setup?(config: Partial<C>): ModelConstructor<T, C>;
}

/**
 * Тип конструктора базовой модели.
 */
export type BaseModelConstructor = ModelConstructor<BaseModel, BaseModelConfig>;

/**
 * Интерфейс базовой модели.
 */
export interface BaseModel<TElement extends BaseElement = BaseElement> extends EventManager {
 getEventId(): string;
 getName(): string;
 getElementTagName(): string;
 getId(): string;
 getElement(): TElement;
 getClassName(): string;
 getRootClassName(): string;
 getTranslation(): string;
 getIcon(): RenderIconContent;
 getIconWidth(): number;
 getIconHeight(): number;
 getModelCode(): string;
 isVisibleTitle(): boolean;
 isAttributeTitle(): boolean;
 isVisibleIcon(): boolean;
 isActive(): boolean;
 isVisible(): boolean;
 destroy(): void;
 getConfig<K extends keyof BaseModelConfig>(key: K, defaultValue?: BaseModelConfig[K]): BaseModelConfig[K];
 getConfig(key: string, defaultValue: unknown): unknown;
 getOption<T = unknown>(key: string, defaultValue?: T): T | null;
 setOption(key: string, value: unknown): void;
 setOptions(options: Record<string, unknown>): void;
 getOptions(): Record<string, unknown>;
 removeOption(key: string): boolean;
 clearOptions(): void;
 setStore(key: string, value: unknown): this;
 getStore(key: string | null): unknown;
}

Пример расширения класса базовой модели

Typescript

import { type BaseModelConfig } from "texditor";
import { BaseModel } from "texditor/core/base";

export default class CustomModel extends BaseModel {
 protected onClick(evt: MouseEvent): void {
  console.log('CustomModel кликнута!', evt);
 }

 protected configure(): Partial<BaseModelConfig> {
  return {
   __modelCode: 'custom', // Обязательный уникальный внутренний код модели
   name: 'CustomModel',
   icon: '<svg>...</svg>',
   className: 'custom-model-class',
  };
 }
}

Javascript

import { BaseModel } from "texditor/core/base";

export default class CustomModel extends BaseModel {
 onClick(evt) {
  console.log('CustomModel кликнута!', evt);
 }

 configure() {
  return {
   __modelCode: 'custom', // Обязательный уникальный внутренний код модели
   name: 'CustomModel',
   icon: '<svg>...</svg>',
   className: 'custom-model-class',
  };
 }
}

EventManager

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

Методы управления событиями

Функция	Сигнатура	Описание
on	public on(name: string, callback: CallableFunction): void	Добавляет обработчик события.
hasEvent	public hasEvent(name: string): boolean	Проверяет, существует ли обработчик события.
off	public off(name: string, id?: string): boolean	Удаляет обработчик события. Возвращает true, если удаление прошло успешно.
trigger	public trigger(name: string, params?: TexditorEventBase): void	Вызывает все обработчики для события.

Типы и интерфейсы управления событиями

/**
 * Структура хранения триггеров событий.
 * Сопоставляет имена событий с коллекциями функций обратного вызова с уникальными идентификаторами.
 */
export type EventTriggerObject = {
 [name: string]: {
  [id: string]: CallableFunction;
 };
};

/**
 * Базовый интерфейс события редактора.
 * @property type - Тип события
 */
export interface TexditorEventBase {
 type: string;
 [key: string]: unknown;
}

/**
 * Интерфейс для управления событиями.
 */
export interface EventManager {
 on(name: string, callback: CallableFunction): void;
 hasEvent(name: string): boolean;
 off(name: string, id?: string): boolean;
 trigger(name: string, params?: TexditorEventBase): void;
}

Пример расширения менеджера событий

Так как менеджер событий это абстрактный класс, рассмотрим его на примере пользовательской модели, которая расширяет класс BaseModel, а тот, в свою очередь, расширяет класс EventManager.

Typescript

import {
 BaseElement,
 type TexditorEvent,
 type BaseModelConfig
} from "texditor";
import { BaseModel } from "texditor/core/base";

// BaseModel уже имеет все методы EventManager
export default class CustomModel extends BaseModel {
 protected onClick(evt: MouseEvent): void {
  // Создаем триггер 
  this.trigger('customClicked', {
   domEvent: evt,
   // любой свободный параметр или параметры события редактора
  });
 }

 protected configure(): Partial<BaseModelConfig> {
  return {
   __modelCode: 'custom',
   name: 'CustomModel',
   icon: '<svg>...</svg>',
   className: 'custom-model-class',
  };
 }

 protected onLoad(): void {
  this.on('customMount', (evt: TexditorEvent) => {
   console.log('Подписались на событие customMount');
  });
 }

 protected onMount(el: BaseElement): void {
  this.trigger('customClicked');
 }
}

Javascript

import { BaseElement } from "texditor";
import { BaseModel } from "texditor/core/base";

// BaseModel уже имеет все методы EventManager
export default class CustomModel extends BaseModel {
 onClick(evt) {
  // Создаем триггер 
  this.trigger('customClicked', {
   domEvent: evt,
   // любой свободный параметр или параметры события редактора
  });
 }

 configure() {
  return {
   __modelCode: 'custom',
   name: 'CustomModel',
   icon: '<svg>...</svg>',
   className: 'custom-model-class',
  };
 }

 onLoad() {
  this.on('customMount', (evt) => {
   console.log('Подписались на событие customMount');
  });
 }

 onMount(el) {
  this.trigger('customClicked');
 }
}