Models

Models are used to implement specific editor functionality, inherited from the base class BaseModel. Below are descriptions of the main models (excluding methods defined in the base class): ActionModel, BlockModel, ExtensionModel, ToolModel, and FileActionModel.

ActionModel

Block action model.

ActionModel Methods

Function	Signature	Description
getBlockElement	public getBlockElement(): BlockElement | null	Returns the parent block element associated with this action.
isDropdown	public isDropdown(): boolean	Checks if a dropdown list of actions is displayed on click.
isConfirm	public isConfirm(): boolean	Checks if the action requires confirmation before execution.

Protected and Static Methods of ActionModel

Function	Signature	Description
setup	public static setup(config: Partial<ActionModelConfig>): ActionModelConstructor	Sets global configuration for the model.
parentConfig	protected parentConfig(): Partial<ActionModelConfig>	Returns the configuration of the parent model.
parentOnCreateElement	protected parentOnCreateElement(el: ActionElement): void	Parent hook called after creating the model element.
confirm	protected confirm(evt: MouseEvent): void	Handles the confirmation flow for actions requiring user verification.
parentOnClick	protected parentOnClick(evt: MouseEvent): void	Parent hook called after clicking the model element.
dropdown	protected dropdown(): HTMLElement	Creates and returns a dropdown menu element.

Types and Interfaces of ActionModel

/**
 * Type of the block action model constructor.
 */
export type ActionModelConstructor = ModelConstructor<ActionModel, ActionModelConfig>;

/**
 * Interface of the action DOM element.
 */
export interface ActionElement extends BaseElement {
 /** Reference to the action model instance */
 baseModel: ActionModel;
}

/**
 * Interface for the block action model configuration.
 * @property dropdown - Whether to display a dropdown on click
 * @property confirm - Whether the action requires confirmation before execution
 */
export interface ActionModelConfig extends BaseModelConfig {
 dropdown: boolean;
 confirm: boolean;
}

/**
 * Interface of the block action model.
 */
export interface ActionModel extends BaseModel<ActionElement> {
 getBlockElement(): BlockElement | null;
 isDropdown(): boolean;
 isConfirm(): boolean;
}

Examples of Working with Action Models

Block Actions

BlockModel

Block model.

BlockModel Methods

Function	Signature	Description
change	public change(name: string, params?: TexditorEventBase, globalParams?: TexditorEventBase): void	Triggers a model change event.
isEnterCreate	public isEnterCreate(): boolean	Checks if pressing Enter creates a new block.
isAutoMerge	public isAutoMerge(): boolean	Checks if auto-merge with adjacent blocks is enabled.
isAutoParse	public isAutoParse(): boolean	Checks if automatic parsing of content is enabled.
getRelatedNames	public getRelatedNames(): string[]	Returns an array of related block names and tags.
getSupportedNames	public getSupportedNames(): string[]	Returns an array of all supported block name types.
getPlaceholder	public getPlaceholder(): string	Returns the block placeholder.
getContentClassName	public getContentClassName(): string	Returns the CSS class name for the content element.
getContentElement	public getContentElement(): HTMLElement	Returns the DOM element of the block content.
getTagName	public getTagName(): string	Returns the block tag name.
getGroupCode	public getGroupCode(): string	Returns the block group code.
getItemTagName	public getItemTagName(): string	Returns the list item tag name.
getItemBodyClassName	public getItemBodyClassName(): string	Returns the CSS class name for the list item body.
getItemClassName	public getItemClassName(): string	Returns the CSS class name for the list item.
getItemName	public getItemName(): string	Returns the list item name.
getMaxItems	public getMaxItems(): number	Returns the maximum allowed number of items.
getItemRelatedNames	public getItemRelatedNames(): string[]	Returns an array of related list item name types.
getItemSupportedNames	public getItemSupportedNames(): string[]	Returns an array of all supported list item name types.
isSortableItems	public isSortableItems(): boolean	Checks if item sorting is enabled.
getDragZoneClassName	public getDragZoneClassName(): string	Returns the CSS class name for the drag zone.
getItemIndex	public getItemIndex(itemElement?: HTMLElement): number	Returns the index of the item.
showActions	public showActions(): void	Shows the block actions menu.
hideActions	public hideActions(): void	Hides the block actions menu.
createItem	public createItem(content?: string | unknown, index?: number, skipEvents?: boolean): boolean	Creates a new list item.
removeItem	public removeItem(index?: number): boolean	Removes a list item.
getItem	public getItem(index: number): HTMLElement | null	Returns a list item by index.
getItems	public getItems(): HTMLElement[]	Returns an array of all list items.
getItemBody	public getItemBody(index: number): HTMLElement | null	Returns the body of a list item by index.
moveItem	public moveItem(index: number, targetIndex: number, skipEvents?: boolean): void	Moves a list item to a new position.
getItemsLength	public getItemsLength(): number	Returns the number of items in the list.
canCreateItem	public canCreateItem(): boolean	Checks if a new item can be created without exceeding the limit.
isEmpty	public isEmpty(): boolean	Checks if the block is empty.
isEmptyItem	public isEmptyItem(index: number): boolean	Checks if a specific list item is empty.
isEmptyDetect	public isEmptyDetect(): boolean	Checks if empty block detection is enabled.
isBackspaceRemove	public isBackspaceRemove(): boolean	Checks if the block is removed when Backspace is pressed.
isEditable	public isEditable(): boolean	Checks if the block content is editable.
isEditableItems	public isEditableItems(): boolean	Checks if list items are editable.
isRaw	public isRaw(): boolean	Checks if the content is treated as raw text.
isNormalize	public isNormalize(): boolean	Checks if content normalization is enabled.
isSingleItem	public isSingleItem(): boolean	Checks if the block supports only one list item.
isConvertible	public isConvertible(): boolean	Checks if the block can be converted.
isCustomSave	public isCustomSave(): boolean	Checks if custom saving is enabled.
isVisibleTools	public isVisibleTools(): boolean	Checks if block tools are displayed.
getAvailableTools	public getAvailableTools(): string[]	Returns an array of available tools.
isSanitizer	public isSanitizer(): boolean	Checks if HTML sanitization is enabled.
sanitize	public sanitize(): void	Sanitizes the block element from unsafe HTML.
toNormalize	public toNormalize(): BlockElement | HTMLElement | HTMLElement[] | null	Returns the element for normalization.
toSanitize	public toSanitize(): BlockElement | HTMLElement | HTMLElement[] | null	Returns the element for sanitization.
getSanitizerConfig	public getSanitizerConfig(): SanitizerConfig	Returns the HTML sanitizer configuration.
getToastsClassName	public getToastsClassName(): string	Returns the CSS class name for notifications.
getToastTimeout	public getToastTimeout(): number	Returns the auto-hide timeout for notifications in milliseconds.
toasts	public toasts(): Toasts	Returns an instance of the notification service.

Protected and Static Methods of BlockModel

Function	Signature	Description
setup	public static setup(config: Partial<BlockModelConfig>): BlockModelConstructor	Sets global configuration for the model.
parentConfig	protected parentConfig(): Partial<BlockModelConfig>	Returns the configuration of the parent model.
parentOnCreateElement	protected parentOnCreateElement(el: BlockElement): void	Parent hook called after creating the model element.
refreshSortableItems	protected refreshSortableItems(): void	Updates the functionality of sortable items.
compose	protected compose(createSchema?: BlockCreateSchema): BlockElement	Forms content from the schema before mounting.
onCompose	protected onCompose(_createSchema?: BlockCreateSchema): void	Hook called after completing composition.
parse	protected parse(item: BlockSchema): BlockCreateSchema	Parses the block schema, preparing it for composition.
merge	protected merge(): HTMLElement | null	Method for processing block merging with an adjacent block.
makeItemDragZone	protected makeItemDragZone(): HTMLSpanElement	Creates a drag zone for a list item.
makeItemElement	protected makeItemElement(content: string | unknown = ''): HTMLElement	Creates a list item.
save	protected save(blockSchema: BlockSchema, _blockElement?: BlockElement): BlockSchema	Saves block data in output format.
parentOnMount	protected parentOnMount(): void	Parent hook called after mounting to the DOM.
onPaste	protected onPaste(_evt: Event, _map: PasteMap): boolean	Handles the paste event.
onKeyDown	protected onKeyDown(_evt: KeyboardEvent): boolean	Handles the keydown event.
onKeyUp	protected onKeyUp(_evt: KeyboardEvent): boolean	Handles the keyup event.
onFocus	protected onFocus(_evt: FocusEvent): boolean	Handles the focus event.
onBlur	protected onBlur(_evt: FocusEvent): boolean	Handles the blur event.
onSelectionChange	protected onSelectionChange(_evt: Event, _range: Range): boolean	Handles the selection change event.
onDragStart	protected onDragStart(_evt: DragEvent): boolean	Handles the drag start event.
onDragLeave	protected onDragLeave(_evt: DragEvent): boolean	Handles the drag leave event.
onDragOver	protected onDragOver(_evt: DragEvent): boolean	Handles the drag over event.
onDrag	protected onDrag(_evt: DragEvent): boolean	Handles the drag event.
onDragEnd	protected onDragEnd(_evt: DragEvent): boolean	Handles the drag end event.
onDrop	protected onDrop(_evt: DragEvent): boolean	Handles the drop event.
beforeConvert	protected beforeConvert(blockElement: BlockElement, targetModel: BlockModel): [BlockElement, BlockModel]	Hook called before block conversion.
afterConvert	protected afterConvert(newBlockElement: BlockElement): BlockElement	Hook called after block conversion.
parentDestroy	protected parentDestroy(): void	Parent hook called before destroying the element.

Types and Interfaces of BlockModel

/**
 * Type of the block model constructor.
 */
export type BlockModelConstructor = ModelConstructor<BlockModel, BlockModelConfig>;

/**
 * Interface of the block DOM element.
 */
export interface BlockElement extends BaseElement {
 /** Reference to the block model instance */
 baseModel: BlockModel;
}

/**
 * Interface of the block schema for registration.
 * @property constructor - Reference to the constructor
 * @property model - Model instance
 */
export interface BlockModelSchema {
 constructor: BlockModelConstructor;
 model: BlockModel;
}

/**
 * Interface for the block model configuration.
 * @property autoMerge - Automatically merge with adjacent blocks
 * @property autoParse - Automatically parse content
 * @property groupCode - Block group code
 * @property contentClassName - CSS class name for the content element
 * @property backspaceRemove - Remove block when Backspace is pressed
 * @property visibleTools - Show tools for the block
 * @property availableTools - List of available tools
 * @property editable - Content is editable
 * @property editableItems - Individual items are editable
 * @property singleItem - Block supports only one item
 * @property enterCreate - Pressing Enter creates a new block
 * @property raw - Treat content as raw text
 * @property sanitizer - Enable HTML sanitization
 * @property sanitizerConfig - HTML sanitizer configuration
 * @property tagName - HTML tag of the block
 * @property itemTagName - HTML tag of the list item
 * @property itemName - Item type
 * @property itemRelatedNames - Related item names
 * @property itemClassName - CSS class of the item
 * @property itemBodyClassName - CSS class of the item body
 * @property maxItems - Maximum number of items
 * @property sortableItems - Enable item sorting
 * @property dragZoneClassName - CSS class name for the drag zone
 * @property relatedNames - Related block names
 * @property emptyDetect - Enable empty block detection
 * @property customSave - Use custom save logic
 * @property normalize - Enable content normalization
 * @property placeholder - Placeholder text
 * @property convertible - Block can be converted
 * @property toastTimeout - Auto-hide timeout for notifications in milliseconds
 * @property toastsClassName - CSS class name for the notifications element
 */
export interface BlockModelConfig extends BaseModelConfig {
 autoMerge: boolean;
 autoParse: boolean;
 groupCode?: string;
 backspaceRemove: boolean;
 visibleTools: boolean;
 availableTools: string[];
 editable: boolean;
 editableItems: boolean;
 singleItem: boolean;
 enterCreate: boolean;
 raw: boolean;
 sanitizer: boolean;
 sanitizerConfig: Record<string, unknown>;
 tagName: string;
 itemTagName: string;
 itemName: string;
 itemRelatedNames: string[];
 itemClassName: string;
 itemBodyClassName: string;
 maxItems: number;
 sortableItems: boolean;
 dragZoneClassName: string;
 relatedNames: string[];
 emptyDetect: boolean;
 customSave: boolean;
 normalize: boolean;
 placeholder?: string;
 convertible: boolean;
 contentClassName: string;
 toastTimeout: number;
 toastsClassName: string;
 [key: string]: unknown;
}

/**
 * Interface of the block model.
 */
export interface BlockModel extends BaseModel<BlockElement> {
 change(name: string, params?: TexditorEventBase, globalParams?: TexditorEventBase): void;
 isEnterCreate(): boolean;
 isAutoMerge(): boolean;
 isAutoParse(): boolean;
 getRelatedNames(): string[];
 getSupportedNames(): string[];
 getPlaceholder(): string;
 getContentClassName(): string;
 getContentElement(): HTMLElement;
 getTagName(): string;
 getGroupCode(): string;
 getItemTagName(): string;
 getItemBodyClassName(): string;
 getItemClassName(): string;
 getItemName(): string;
 getMaxItems(): number;
 getItemRelatedNames(): string[];
 getItemSupportedNames(): string[];
 isSortableItems(): boolean;
 getDragZoneClassName(): string;
 getItemIndex(itemElement?: HTMLElement): number;
 showActions(): void;
 hideActions(): void;
 createItem(content?: string | unknown, index?: number, skipEvents?: boolean): boolean;
 removeItem(index?: number): boolean;
 getItem(index: number): HTMLElement | null;
 getItems(): HTMLElement[];
 getItemBody(index: number): HTMLElement | null;
 moveItem(index: number, targetIndex: number, skipEvents?: boolean): void;
 getItemsLength(): number;
 canCreateItem(): boolean;
 isEmpty(): boolean;
 isEmptyItem(index: number): boolean;
 isEmptyDetect(): boolean;
 isBackspaceRemove(): boolean;
 isEditable(): boolean;
 isEditableItems(): boolean;
 isRaw(): boolean;
 isNormalize(): boolean;
 isSingleItem(): boolean;
 isConvertible(): boolean;
 isCustomSave(): boolean;
 isVisibleTools(): boolean;
 getAvailableTools(): string[];
 isSanitizer(): boolean;
 sanitize(): void;
 toNormalize(): BlockElement | HTMLElement | HTMLElement[] | null;
 toSanitize(): BlockElement | HTMLElement | HTMLElement[] | null;
 getSanitizerConfig(): SanitizerConfig;
 getToastsClassName(): string;
 getToastTimeout(): number;
 toasts(): Toasts;
 setup?(config: Partial<BlockModelConfig>): BlockModelConstructor;
}

/** Block data: plain text, array of strings, or child blocks. */
export type BlockSchemaData = string | string[] | BlockChildSchema[];

/** HTML attributes of the block as key-value pairs. */
export type BlockSchemaAttr = Record<string, string>;

/** Full block model with type, data, attributes, and metadata. */
export interface BlockSchema {
 type: string;
 data: BlockSchemaData;
 attr?: BlockSchemaAttr;
 lang?: string;
 caption?: string;
 layout?: string;
 style?: string;
 [key: string]: unknown;
}

/** Child element of the block */
export interface BlockChildSchema {
 type: string;
 data: BlockSchemaData | [];
 attr?: BlockSchemaAttr;
 url?: string;
 desc?: string;
 caption?: string;
 size?: number;
 [key: string]: unknown;
}

/** Simplified model for creating a block — type is provided by context, only data is required. */
export interface BlockCreateSchema extends Omit<BlockSchema, 'type'> {
 data: string | BlockCreateItemSchema[] | unknown[];
}

/** Simplified model of a child element for creation — only type and string data are required. */
export interface BlockCreateItemSchema extends Omit<BlockChildSchema, 'data'> {
 type: string;
 data: string;
}

Example of Extending the Block Model

Blocks

ExtensionModel

Extension model.

ExtensionModel Methods

Function	Signature	Description
isToggleActive	public isToggleActive(): boolean	Checks if the extension toggles the active state on click.
getGroupName	public getGroupName(): string	Returns the group name.

Protected and Static Methods of ExtensionModel

Function	Signature	Description
setup	public static setup(config: Partial<ExtensionModelConfig>): ExtensionModelConstructor	Sets global configuration for the model.
parentConfig	protected parentConfig(): Partial<ExtensionModelConfig>	Returns the configuration of the parent model.
parentOnClick	protected parentOnClick(evt: MouseEvent): void	Parent hook called after clicking the model element.

Types and Interfaces of ExtensionModel

/**
 * Type of the extension model constructor.
 */
export type ExtensionModelConstructor = ModelConstructor<ExtensionModel, ExtensionModelConfig>;

/**
 * Interface of the extension DOM element.
 */
export interface ExtensionElement extends BaseElement {
 /** Reference to the extension model instance */
 baseModel: ExtensionModel;
}

/**
 * Interface for the extension model configuration.
 * @property toggleActive - Whether the extension toggles the active state on click
 * @property groupName - Group name
 */
export interface ExtensionModelConfig extends BaseModelConfig {
 toggleActive: boolean;
 groupName: string;
}

/**
 * Interface of the extension model.
 */
export interface ExtensionModel extends BaseModel<ExtensionElement> {
 getGroupName(): string;
 isToggleActive(): boolean;
}

Example of Extending the Extension Model

Extensions

ToolModel

Text formatting tool model.

ToolModel Methods

Function	Signature	Description
getBlockElement	public getBlockElement(): BlockElement | null	Returns the parent block element associated with this tool.
getTagName	public getTagName(): string	Returns the tag name of the tool for formatting.
format	public format(): void	Applies formatting to the selected content.
forcedFormat	public forcedFormat(): void	Forcefully creates formatting on the selected content.
removeFormat	public removeFormat(): void	Removes formatting from the selected content.
isOverride	public isOverride(): boolean	Checks if the tool tag is overridable.

Protected and Static Methods of ToolModel

Function	Signature	Description
setup	public static setup(config: Partial<ToolModelConfig>): ToolModelConstructor	Sets global configuration for the model.
parentConfig	protected parentConfig(): Partial<ToolModelConfig>	Returns the configuration of the parent model.
onFormat	protected onFormat(_tags: HTMLElement[]): void	Hook called after applying formatting.
onClick	protected onClick(_evt: MouseEvent): void	Handles the click event.
isVisible	protected isVisible(): boolean	Checks if the tool model element is visible.

Types and Interfaces of ToolModel

/**
 * Type of the tool model constructor.
 */
export type ToolModelConstructor = ModelConstructor<ToolModel, ToolModelConfig>;

/**
 * Interface of the tool DOM element.
 */
export interface ToolElement extends BaseElement {
 /** Reference to the tool model instance */
 baseModel: ToolModel;
}

/**
 * Interface for the tool model configuration.
 * @property tagName - HTML tag name of the tool for formatting
 * @property override - Override tag
 */
export interface ToolModelConfig extends BaseModelConfig {
 tagName: string;
 override: boolean;
}

/**
 * Interface of the tool model.
 */
export interface ToolModel extends BaseModel<ToolElement> {
 getTagName(): string;
 getBlockElement(): BlockElement | null;
 format(onlyRemove?: boolean): void;
 forcedFormat(): void;
 removeFormat(): void;
 isOverride(): boolean;
}

Example of Extending the Tool Model

Tools

FileActionModel

File action model.

FileActionModel Methods

Function	Signature	Description
getItemElement	public getItemElement(): FileItemElement | null	Returns the file element associated with this action.
getBlockElement	public getBlockElement(): BlockElement | null	Returns the parent block element associated with this action.

Protected and Static Methods of FileActionModel

Function	Signature	Description
setup	public static setup(config: Partial<FileActionModelConfig>): FileActionModelConstructor	Sets global configuration for the model.
parentConfig	protected parentConfig(): Partial<FileActionModelConfig>	Returns the configuration of the parent model.

Types and Interfaces of FileActionModel

/**
 * Type of the file action model constructor.
 */
export type FileActionModelConstructor = ModelConstructor<FileActionModel, FileActionModelConfig>;

/**
 * Interface of the file action DOM element.
 */
export interface FileActionElement extends BaseElement {
 /** Reference to the file action model instance */
 baseModel: FileActionModel;
}

/**
 * Interface for the file action model configuration.
 * @property actions - List of file actions
 */
export interface FileActionModelConfig extends BaseModelConfig {
 actions: FileActionModelConstructor[];
}

/**
 * Interface of the file action model.
 */
export interface FileActionModel extends BaseModel<FileActionElement> {
 getBlockElement(): BlockElement | null;
 getItemElement(): FileItemElement | null;
}