Working with Commands

A class for working with text formatting 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. Instead, it is recommended to use tool models.

Commands

The class is mainly intended for internal use and is a highly specialized tool for text formatting.

Commands Methods

Function	Signature	Description
formatTextRange	formatTextRange(tagName: string, startOffset: number, endOffset: number, container: HTMLElement): void	Formats the specified text range within the container with the given HTML tag.
format	format(tagName: string, focus?: boolean): void	Applies or removes formatting based on the current selection context.
createFormat	createFormat(tagName: string): void	Creates a new format around the current selection.
removeFormat	removeFormat(tagName: string, focus?: boolean, normalize?: boolean): void	Removes formatting tags from the current selection.
clearAllFormatting	clearAllFormatting(normalize?: boolean): void	Removes all formatting tags from the document.
normalize	normalize(container?: HTMLElement): void	Normalizes the DOM structure by removing empty tags and merging adjacent elements.
flattenNestedTags	flattenNestedTags(parentElement: HTMLElement): void	Simplifies nested tags of the same type (e.g., <strong><strong>text</strong></strong>).
mergeAdjacentTags	mergeAdjacentTags(root: HTMLElement | Element): void	Merges adjacent tags of the same type.
removeEmptyTags	removeEmptyTags(element: HTMLElement, tagName: string): void	Removes empty tags of the specified type from the element.
splitElement	splitElement(element: HTMLElement, startIndex: number, endIndex: number): [HTMLElement, DocumentFragment, HTMLElement]	Splits an element at the specified text positions.
replaceEmptyEdges	replaceEmptyEdges(el: HTMLElement, item?: HTMLElement | Node): void	Replaces empty edge elements.
findTags	findTags(tagName?: string | boolean, children?: boolean): HTMLElement[]	Finds tags in the current selection or document.
getSelectionDirection	getSelectionDirection(tagName: string | HTMLElement): string	Returns the direction of the selection relative to the specified tag.
getEdgeChars	getEdgeChars(str: string): { firstChar: string; lastChar: string; isEmptyFirstChar: boolean; isEmptyLastChar: boolean; }	Gets the first and last characters of a string along with their empty status.

Example of Using Commands

It is not recommended to use methods in this way (this is just an example).

import { Texditor } from "texditor";

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

// Applying formatting
editor.commands.format('strong');

// Removing formatting
editor.commands.removeFormat('strong');

// Creating formatting without toggling
editor.commands.createFormat('em');

// Clearing all formatting
editor.commands.clearAllFormatting();

// Finding tags in the selection
const strongTags = editor.commands.findTags('strong');