or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

index.mddocs/

Delimiter Tool for Editor.js

The Delimiter Tool is a block tool for Editor.js that creates visual content separators in documents. It displays as "***" to provide clear visual breaks between content sections, helping organize and structure rich text content.

Package Information

  • Package Name: @editorjs/delimiter
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @editorjs/delimiter

Core Imports

import Delimiter from "@editorjs/delimiter";

For CommonJS:

const Delimiter = require("@editorjs/delimiter");

Basic Usage

import EditorJS from "@editorjs/editorjs";
import Delimiter from "@editorjs/delimiter";

const editor = new EditorJS({
  tools: {
    delimiter: Delimiter,
  },
  data: {
    blocks: [
      {
        type: "delimiter",
        data: {}
      }
    ]
  }
});

Architecture

The Delimiter tool is implemented as a TypeScript class that extends the Editor.js BlockTool interface. Key design characteristics:

  • Contentless Block: The tool stores no data and returns an empty object when saved
  • Read-only Support: Compatible with Editor.js read-only mode for viewing documents
  • HTML Paste Support: Automatically converts <hr> tags when pasting from HTML sources
  • CSS-based Rendering: Uses pure CSS to display the "***" visual separator
  • Editor.js Integration: Follows BlockTool interface for seamless integration

Capabilities

Delimiter Class

Main class implementing the delimiter block tool functionality.

export default class Delimiter implements BlockTool {
  constructor(options: BlockToolConstructorOptions);
  render(): HTMLDivElement;
  save(toolsContent: HTMLElement): BlockToolData;
  onPaste(event: PasteEvent): void;
  
  static get isReadOnlySupported(): boolean;
  static get contentless(): boolean;
  static get toolbox(): ToolboxConfig;
  static get pasteConfig(): PasteConfig;
}

Constructor

Creates a new instance of the Delimiter tool.

/**
 * Creates a new Delimiter tool instance
 * @param options - Constructor options from Editor.js
 * @param options.data - Previously saved data (typically empty object)
 * @param options.config - User configuration for the tool (unused)
 * @param options.api - Editor.js API instance
 */
constructor(options: BlockToolConstructorOptions): Delimiter;

Render Method

Returns the DOM element representing the delimiter.

/**
 * Returns the tool's rendered view element
 * @returns HTMLDivElement containing the visual delimiter
 */
render(): HTMLDivElement;

Save Method

Extracts data from the tool for saving (always returns empty object).

/**
 * Extracts tool data for saving
 * @param toolsContent - The rendered view element (unused)
 * @returns Empty BlockToolData object
 */
save(toolsContent: HTMLElement): BlockToolData;

Paste Handler

Handles paste events when HTML <hr> tags are detected.

/**
 * Handles paste events from Editor.js
 * @param event - Paste event containing data
 */
onPaste(event: PasteEvent): void;

Static Properties

Configuration and capabilities exposed as static getters.

/**
 * Indicates the tool supports read-only mode
 * @returns true - tool is compatible with read-only Editor.js instances
 */
static get isReadOnlySupported(): boolean;

/**
 * Indicates the tool can have no content
 * @returns true - tool stores no data and is purely visual
 */
static get contentless(): boolean;

/**
 * Provides toolbox configuration for Editor.js
 * @returns Configuration object with icon and title
 */
static get toolbox(): ToolboxConfig;

/**
 * Configuration for pasting HTML content
 * @returns Paste configuration allowing HR tags
 */
static get pasteConfig(): PasteConfig;

Types

BlockToolConstructorOptions

Constructor parameters interface from Editor.js.

interface BlockToolConstructorOptions {
  data: BlockToolData;
  config: object;
  api: API;
}

BlockToolData

Data format interface (empty object for Delimiter).

interface BlockToolData {
  [key: string]: any;
}

ToolboxConfig

Toolbox configuration interface for Editor.js.

interface ToolboxConfig {
  icon: string;
  title: string;
}

PasteConfig

Paste configuration interface for HTML tag handling.

interface PasteConfig {
  tags: string[];
}

PasteEvent

Paste event interface from Editor.js.

interface PasteEvent {
  type: string;
  detail: {
    data: any;
  };
}

API

Editor.js API interface providing access to editor functionality.

interface API {
  styles: {
    block: string;
  };
  [key: string]: any;
}

CSS Classes

The tool uses these CSS classes for styling:

  • .ce-delimiter - Main wrapper class with center alignment and line-height
  • .ce-delimiter:before - Pseudo-element displaying "***" with specific font size and spacing

Data Format

Input Data

The tool accepts any data structure but ignores all properties:

{}

Output Data

The tool always returns an empty object:

{
  "type": "delimiter",
  "data": {}
}

Integration Examples

Basic Tool Registration

import EditorJS from "@editorjs/editorjs";
import Delimiter from "@editorjs/delimiter";

const editor = new EditorJS({
  holder: "editorjs",
  tools: {
    delimiter: Delimiter,
  },
});

With Existing Content

const editor = new EditorJS({
  holder: "editorjs",
  tools: {
    delimiter: Delimiter,
  },
  data: {
    blocks: [
      {
        type: "paragraph",
        data: { text: "First section content" }
      },
      {
        type: "delimiter",
        data: {}
      },
      {
        type: "paragraph", 
        data: { text: "Second section content" }
      }
    ]
  }
});

Read-only Mode

const readOnlyEditor = new EditorJS({
  holder: "editorjs",
  readOnly: true,
  tools: {
    delimiter: Delimiter,
  },
  data: {
    blocks: [
      {
        type: "delimiter",
        data: {}
      }
    ]
  }
});