Base Classes

The fundamental classes for the editor's operation, its models, and events are EventManager and BaseModel. All other models, including BlockModel, ToolModel, ActionModel, ExtensionModel, and FileActionModel, inherit from BaseModel.

BaseModel

The base class for models, providing core functionality, event management, and lifecycle hooks.

Base Model Methods

Function	Signature	Description
Constructor	public constructor(editor: Texditor)	Creates a new instance of the base model.
getEventId	public getEventId(): string	Returns a unique identifier for the event listener instance.
getConfig	public getConfig<K extends keyof BaseModelConfig>(key: K, defaultValue?: BaseModelConfig[K]): BaseModelConfig[K]	Retrieves a configuration value by key.
getOption	public getOption<T = unknown>(key: string, defaultValue?: T): T | null	Retrieves an option value by key.
setOption	public setOption(key: string, value: unknown): void	Sets an option value.
setOptions	public setOptions(options: Record<string, unknown>): void	Sets multiple options (merges with existing ones).
getOptions	public getOptions(): Record<string, unknown>	Returns a copy of all options.
removeOption	public removeOption(key: string): boolean	Removes an option by key. Returns true if the option existed and was removed.
clearOptions	public clearOptions(): void	Clears all options.
setStore	public setStore(key: string, value: unknown): this	Sets a value in the store. Returns the current instance for chaining.
getStore	public getStore(key: string | null): unknown	Retrieves a value from the store. If key is null, returns the entire store.
getName	public getName(): string	Returns the model name.
getElementTagName	public getElementTagName(): string	Returns the tag name of the model element.
getId	public getId(): string	Returns the unique identifier of the model.
getElement	public getElement(): TElement	Returns the DOM element of the model.
getClassName	public getClassName(): string	Returns the CSS class name.
getRootClassName	public getRootClassName(): string	Returns the root CSS class name.
getTranslation	public getTranslation(): string	Returns the translated string for localization.
getIcon	public getIcon(): RenderIconContent	Returns the icon content for the model button.
getIconWidth	public getIconWidth(): number	Returns the width of the icon in pixels.
getIconHeight	public getIconHeight(): number	Returns the height of the icon in pixels.
getModelCode	public getModelCode(): string	Returns the model code.
isVisibleTitle	public isVisibleTitle(): boolean	Checks if the title is always visible.
isAttributeTitle	public isAttributeTitle(): boolean	Checks if the title attribute is visible.
isVisibleIcon	public isVisibleIcon(): boolean	Checks if the icon is always visible.
isActive	public isActive(): boolean	Checks if the model is active.
isVisible	public isVisible(): boolean	Checks if the model is visible.
destroy	public destroy(): void	Destroys the instance and clears resources.

Protected and Static Methods of the Base Model

Function	Signature	Description
setup	public static setup(config: Partial<BaseModelConfig>): ModelConstructor	Sets global configuration for the model.
createElement	protected createElement(): TElement	Creates the DOM element of the model.
onCreateElement	protected onCreateElement(_el: TElement): void	Hook called after creating the model element.
parentOnCreateElement	protected parentOnCreateElement(_el: TElement): void	Parent hook called after creating the model element.
onLoad	protected onLoad(): void	Hook called when the model is loaded.
onClick	protected onClick(_evt: MouseEvent): void	Hook called when the model element is clicked.
parentOnClick	protected parentOnClick(evt: MouseEvent): void	Parent hook called after clicking the model element.
onMount	protected onMount(_el: TElement): void	Hook called after mounting to the DOM.
parentOnMount	protected parentOnMount(_el: TElement): void	Parent hook called after mounting to the DOM.
onConstruct	protected onConstruct(_editor: Texditor): void	Hook called during constructor creation.
parentConfig	protected parentConfig(): Partial<BaseModelConfig>	Returns the configuration of the parent model.
configure	protected configure(): Partial<BaseModelConfig>	Configures the model configuration.
parentDestroy	protected parentDestroy(): void	Parent hook called before destroying the element.

Types and Interfaces of the Base Model

/**
 * Interface of a DOM element extending HTMLElement with a reference to the base model.
 */
export interface BaseElement extends HTMLElement {
 /** Reference to the base model instance */
 baseModel: BaseModel;
}

/**
 * Interface for model configuration.
 * @property name - Model name
 * @property elementTagName - Tag name of the model element
 * @property translation - Translation key for localization
 * @property icon - Icon content for the button
 * @property visibleIcon - Whether the icon is visible
 * @property iconWidth - Width of the icon in pixels
 * @property iconHeight - Height of the icon in pixels
 * @property className - CSS class name
 * @property attributeTitle - Whether the title attribute is visible
 * @property visibleTitle - Whether the title is visible
 * @property __modelCode - Unique model code
 */
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;
}

/**
 * Generic interface for a model constructor.
 * @template T - Type of the model interface extending BaseModel
 * @template C - Type of the model configuration extending BaseModelConfig
 */
export interface ModelConstructor<T extends BaseModel = BaseModel, C extends BaseModelConfig = BaseModelConfig> {
 /**
  * Creates a new instance of the model.
  * @param editor - Editor instance
  * @returns Model instance of type T
  */
 new (editor: Texditor): T;
 /**
  * Sets global configuration for the model.
  * @param config - Configuration object
  * @returns Model constructor
  */
 setup?(config: Partial<C>): ModelConstructor<T, C>;
}

/**
 * Type of the base model constructor.
 */
export type BaseModelConstructor = ModelConstructor<BaseModel, BaseModelConfig>;

/**
 * Interface of the base model.
 */
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;
}

Example of Extending the Base Model Class

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 clicked!', evt);
 }

 protected configure(): Partial<BaseModelConfig> {
  return {
   __modelCode: 'custom', // Required unique internal model code
   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 clicked!', evt);
 }

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

EventManager

A class for managing events.

Event Management Methods

Function	Signature	Description
on	public on(name: string, callback: CallableFunction): void	Adds an event handler.
hasEvent	public hasEvent(name: string): boolean	Checks if an event handler exists.
off	public off(name: string, id?: string): boolean	Removes an event handler. Returns true if the removal was successful.
trigger	public trigger(name: string, params?: TexditorEventBase): void	Triggers all handlers for the event.

Types and Interfaces for Event Management

/**
 * Structure for storing event triggers.
 * Maps event names to collections of callback functions with unique identifiers.
 */
export type EventTriggerObject = {
 [name: string]: {
  [id: string]: CallableFunction;
 };
};

/**
 * Base interface for editor events.
 * @property type - Event type
 */
export interface TexditorEventBase {
 type: string;
 [key: string]: unknown;
}

/**
 * Interface for managing events.
 */
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;
}

Example of Extending the Event Manager

Since the event manager is an abstract class, let's consider it using the example of a custom model that extends the BaseModel class, which in turn extends the EventManager class.

Typescript

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

// BaseModel already has all EventManager methods
export default class CustomModel extends BaseModel {
 protected onClick(evt: MouseEvent): void {
  // Create a trigger
  this.trigger('customClicked', {
   domEvent: evt,
   // any free parameter or editor event parameters
  });
 }

 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('Subscribed to customMount event');
  });
 }

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

Javascript

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

// BaseModel already has all EventManager methods
export default class CustomModel extends BaseModel {
 onClick(evt) {
  // Create a trigger
  this.trigger('customClicked', {
   domEvent: evt,
   // any free parameter or editor event parameters
  });
 }

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

 onLoad() {
  this.on('customMount', (evt) => {
   console.log('Subscribed to customMount event');
  });
 }

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