Extensions

Extensions in the editor are designed to add functions to the extensions panel. They can be used to implement both standard operations—such as Undo and Redo—as well as any custom actions.

Basic Usage

Connect and use extensions in the editor configuration.

import Texditor from 'texditor';
import { Undo, Redo, DeleteSelected } from "texditor/entities/extensions";

const editor = new Texditor({
  // HTML element identifier
  handle: 'texditor',
  extensions: [
    Undo,
    Redo,
    DeleteSelected,
    // ... or custom options
  ],
});

Creating Custom Extensions

Easily create your own custom extensions.

Javascript

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

// Example of a custom extension for the extensions panel
export default class CustomRedo extends ExtensionModel {
  configure() {
    return {
      name: 'redo',
      translation: 'redo',
      icon: { raw: '<svg>...</svg>' },
      toggleActive: false, // Checks if the extension toggles to active state on click
      groupName: 'history', // Group of extensions to combine into HTML blocks when used as a button
      // ... other parameters from the main and base model
    };
  }

  onClick(evt) {
    this.editor.historyManager.redo(); // or any custom action
  }

  isActive() {
    // Extension activity status
    return this.editor.historyManager.canRedo();
  }

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

Typescript

import type { ExtensionModelConfig } from 'texditor';
import { ExtensionModel } from 'texditor/core/models';

// Example of a custom extension for the extensions panel
export default class CustomRedo extends ExtensionModel {
  protected configure(): Partial<ExtensionModelConfig> {
    return {
      name: 'redo',
      translation: 'redo',
      icon: { raw: '<svg>...</svg>' },
      toggleActive: false, // Checks if the extension toggles to active state on click
      groupName: 'history', // Group of extensions to combine into HTML blocks when used as a button
      // ... other parameters from the main and base model
    };
  }

  protected onClick(evt: MouseEvent): void {
    this.editor.historyManager.redo(); // or any custom action
  }

  isActive(): boolean {
    // Extension activity status
    return this.editor.historyManager.canRedo();
  }

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