Block Actions

Block actions open up extensive possibilities for processing blocks. You can delete, create new blocks, convert, and move them, as well as add your own unique functions.

Adding Block Actions

Although block actions are an integral part of the editor, they are not automatically included by default. They must be manually integrated into the editor configuration.

import Texditor from 'texditor';
import {
  CreateAction,
  ConvertAction,
  DeleteAction,
  MoveUpAction,
  MoveDownAction
} from "texditor/entities/actions";

const editor = new Texditor({
  // HTML element identifier
  handle: 'texditor',
  actions: [
    CreateAction.setup({
      visibleTitle: false
      // ... other parameters from the main and base model
    }),
    ConvertAction,
    DeleteAction,
    MoveUpAction,
    MoveDownAction,
    // ... or custom options
  ],
});

Creating Custom Block Actions

In development, standard methods are often insufficient, and the best solution is to create your own custom block actions for maximum extensibility and full control over their behavior.

Javascript

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

// Example of deleting a block with confirmation
export default class MyCustomDeleteAction extends ActionModel {
  configure() {
    return {
      name: 'deleteAction', // Code name
      translation: 'deleteAction', // Translation key
      icon: { raw: '<svg>...</svg>' },
      confirm: true, // Confirm the action
      // ... other parameters from the base model
    };
  }

  onClick() {
    const { blockManager } = this.editor;
    blockManager.removeBlock();
  }

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

Typescript

import { ActionModel } from 'texditor/core/models';
import { type ActionModelConfig } from 'texditor';

// Example of deleting a block with confirmation
export default class MyCustomDeleteAction extends ActionModel {
  protected configure(): Partial<ActionModelConfig> {
    return {
      name: 'deleteAction', // Code name
      translation: 'deleteAction', // Translation key
      icon: { raw: '' },
      confirm: true, // Confirm the action
      // ... other parameters from the base model
    };
  }

  protected onClick(): void {
    const { blockManager } = this.editor;
    blockManager.removeBlock();
  }

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