Formatting Tools

With tools, you can modify the text content of blocks. Just like with blocks, you can use ready-made options, make changes using class extensibility, or create your own tools. However, it is worth noting that tools do not have additional settings that allow for quick adaptation to specific tasks.

Basic Usage

Connect and use formatting tools in the editor configuration.

import Texditor from 'texditor';
import {
  BoldTool,
  ItalicTool,
  InlineCodeTool,
  LinkTool,
  MarkerTool,
  SubscriptTool,
  SuperscriptTool,
  ClearFormattingTool
} from 'texditor/entities/tools';
import { H1 } from 'texditor/entities/blocks';

const editor = new Texditor({
  // HTML element identifier
  handle: 'texditor',
  // List of tools
  tools: [
    BoldTool.setup({
      tagName: 'strong',
      iconWidth: 16,
      iconHeight: 16
      // ... other parameters from the main and base model
    }),
    ItalicTool,
    InlineCodeTool,
    LinkTool,
    MarkerTool,
    SubscriptTool,
    SuperscriptTool,
    ClearFormattingTool,
    // ... or custom options
  ],

  /*
    Here we can use an optional option
    to select tools that will be displayed in the block
    based on their symbolic codes.
  */
  blocks: [
    H1.setup({
      availableTools: [
        "link",
        "subscript",
        "superscript",
        "clearFormatting"
      ]
    })
  ],
});

Creating Custom Formatting Tools

Like any base model, the editor allows you to easily create custom tool entities.

Javascript

import { ToolModel } from 'texditor/core/models';

// Example of a formatting tool
export default class CustomBoldTool extends ToolModel {
  configure() {
    return {
      name: 'bold',
      tagName: 'b',
      icon: { raw: '<svg>...</svg>' },
      iconWidth: 16,
      iconHeight: 16,
      /**
       * This parameter blocks the ability to format inside the current element
       * and prevents the use of other formatting methods, splitting the element into separate fragments.
       */
      override: false,
      // ... other parameters from the base model
    };
  }

  // Optional method that by default executes the this.format() function.
  onClick(evt) {
    // Perform forced formatting, which will clear all elements in the path and create an HTML element with the tag name 'tagName'.
    this.forcedFormat();
  }

  // Other methods from the main "ToolModel" and base "BaseModel" ...
}

Typescript

import { type ToolModelConfig } from 'texditor';
import { ToolModel } from 'texditor/core/models';

// Example of a formatting tool
export default class CustomBoldTool extends ToolModel {
  protected configure(): Partial<ToolModelConfig> {
    return {
      name: 'bold',
      tagName: 'b',
      icon: { raw: '<svg>...</svg>' },
      iconWidth: 16,
      iconHeight: 16,
      /**
       * This parameter blocks the ability to format inside the current element
       * and prevents the use of other formatting methods, splitting the element into separate fragments.
       */
      override: false,
      // ... other parameters from the base model
    };
  }

  // Optional method that by default executes the this.format() function.
  protected onClick(evt: MouseEvent): void {
    // Perform forced formatting, which will clear all elements in the path and create an HTML element with the tag name 'tagName'.
    this.forcedFormat();
  }

  // Other methods from the main "ToolModel" and base "BaseModel" ...
}