tessl/npm-editorjs--delimiter
Delimiter block tool for Editor.js that creates visual content separators displaying as '***'
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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: {}
}
]
}
});Install with Tessl CLI
npx tessl i tessl/npm-editorjs--delimiter- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
- Publish Source
- CLI
- Badge
