CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-editorjs--editorjs

Block-style WYSIWYG editor that outputs clean JSON data instead of HTML markup.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

block-management.mddocs/

Block Management

The Blocks API provides comprehensive methods for manipulating editor blocks including insertion, deletion, movement, and transformation. This is one of the most powerful aspects of Editor.js, allowing fine-grained control over content structure.

Capabilities

Content Operations

Methods for rendering and clearing editor content.

/**
 * Remove all blocks from the editor
 */
clear(): Promise<void>;

/**
 * Render blocks from OutputData format
 * @param data - Saved block data to render
 */
render(data: OutputData): Promise<void>;

/**
 * Render blocks from HTML string
 * @param data - HTML string to convert to blocks
 */
renderFromHTML(data: string): Promise<void>;

Usage Examples:

// Clear all blocks
await editor.blocks.clear();

// Render saved data
await editor.blocks.render({
  blocks: [
    {
      type: "paragraph",
      data: { text: "Hello World" }
    }
  ]
});

// Render from HTML (requires appropriate tools)
await editor.blocks.renderFromHTML('<p>Hello World</p><h2>Heading</h2>');

Block Insertion

Methods for adding new blocks to the editor.

/**
 * Insert new block and return its API
 * @param type - Tool name for the block
 * @param data - Initial data for the block
 * @param config - Tool configuration
 * @param index - Position to insert at (default: current position)
 * @param needToFocus - Whether to focus the new block
 * @param replace - Whether to replace existing block at index
 * @param id - Optional custom ID for the block
 * @returns BlockAPI instance for the inserted block
 */
insert(
  type?: string,
  data?: BlockToolData,
  config?: ToolConfig,
  index?: number,
  needToFocus?: boolean,
  replace?: boolean,
  id?: string
): BlockAPI;

/**
 * Insert multiple blocks at specified index
 * @param blocks - Array of block data to insert
 * @param index - Position to insert at (default: end)
 * @returns Array of BlockAPI instances
 */
insertMany(
  blocks: OutputBlockData[],
  index?: number
): BlockAPI[];

/**
 * Insert new initial block after current block (deprecated)
 */
insertNewBlock(): void;

Usage Examples:

// Insert paragraph at current position
const block = editor.blocks.insert('paragraph', {
  text: 'New paragraph content'
});

// Insert at specific index with focus
const headerBlock = editor.blocks.insert(
  'header',
  { text: 'New Header', level: 2 },
  {},
  1, // index
  true // focus
);

// Insert multiple blocks
const blocks = editor.blocks.insertMany([
  {
    type: 'paragraph',
    data: { text: 'First paragraph' }
  },
  {
    type: 'paragraph', 
    data: { text: 'Second paragraph' }
  }
], 2);

// Replace existing block
const replacement = editor.blocks.insert(
  'quote',
  { text: 'Inspirational quote' },
  {},
  0, // index
  false, // don't focus
  true // replace existing
);

Block Access

Methods for retrieving block instances and information.

/**
 * Get block API by index
 * @param index - Block index in the editor
 * @returns BlockAPI instance or undefined if not found
 */
getBlockByIndex(index: number): BlockAPI | undefined;

/**
 * Get block API by unique ID
 * @param id - Block ID
 * @returns BlockAPI instance or null if not found
 */
getById(id: string): BlockAPI | null;

/**
 * Get current active block index
 * @returns Index of currently focused block
 */
getCurrentBlockIndex(): number;

/**
 * Get block index by its ID
 * @param blockId - Block ID to search for
 * @returns Index of the block
 */
getBlockIndex(blockId: string): number;

/**
 * Get block API by HTML element
 * @param element - HTML element belonging to a block
 * @returns BlockAPI instance or undefined if not found
 */
getBlockByElement(element: HTMLElement): BlockAPI | undefined;

/**
 * Get total number of blocks in editor
 * @returns Count of blocks
 */
getBlocksCount(): number;

Usage Examples:

// Get first block
const firstBlock = editor.blocks.getBlockByIndex(0);
if (firstBlock) {
  console.log('First block type:', firstBlock.name);
}

// Get block by ID
const block = editor.blocks.getById('block-id-123');

// Get current block
const currentIndex = editor.blocks.getCurrentBlockIndex();
const currentBlock = editor.blocks.getBlockByIndex(currentIndex);

// Find block containing an element
const element = document.querySelector('.my-block-element');
const block = editor.blocks.getBlockByElement(element);

// Get total count
const totalBlocks = editor.blocks.getBlocksCount();
console.log(`Editor has ${totalBlocks} blocks`);

Block Manipulation

Methods for modifying, moving, and deleting blocks.

/**
 * Delete block by index
 * @param index - Block index to delete (default: current block)
 */
delete(index?: number): void;

/**
 * Move block to new position
 * @param toIndex - Target position
 * @param fromIndex - Source position (default: current block)
 */
move(toIndex: number, fromIndex?: number): void;

/**
 * Swap two blocks (deprecated - use move instead)
 * @param fromIndex - First block index
 * @param toIndex - Second block index
 * @deprecated Use move() method instead
 */
swap(fromIndex: number, toIndex: number): void;

/**
 * Update block data by ID
 * @param id - Block ID to update
 * @param data - New data (can be partial)
 * @param tunes - Block tunes data
 * @returns Promise resolving to updated BlockAPI
 */
update(
  id: string, 
  data?: Partial<BlockToolData>, 
  tunes?: {[name: string]: BlockTuneData}
): Promise<BlockAPI>;

/**
 * Convert block to another type
 * @param id - Block ID to convert
 * @param newType - Target block type
 * @param dataOverrides - Optional data for new block type
 * @returns Promise resolving to converted BlockAPI
 * @throws Error if conversion is not possible
 */
convert(
  id: string, 
  newType: string, 
  dataOverrides?: BlockToolData
): Promise<BlockAPI>;

Usage Examples:

// Delete current block
editor.blocks.delete();

// Delete specific block
editor.blocks.delete(2);

// Move block from position 0 to position 3
editor.blocks.move(3, 0);

// Move current block to position 1
editor.blocks.move(1);

// Update block data
await editor.blocks.update('block-id-123', {
  text: 'Updated content'
});

// Update with tunes
await editor.blocks.update('block-id-123', 
  { text: 'Updated content' },
  { textAlignment: { alignment: 'center' } }
);

// Convert paragraph to header
try {
  const convertedBlock = await editor.blocks.convert(
    'block-id-123',
    'header',
    { text: 'Now a header', level: 2 }
  );
  console.log('Converted successfully:', convertedBlock.name);
} catch (error) {
  console.error('Conversion failed:', error.message);
}

Block Data Operations

Methods for working with block data and validation.

/**
 * Create empty block data for specified tool
 * @param toolName - Name of the tool to create data for
 * @returns Promise resolving to empty BlockToolData
 */
composeBlockData(toolName: string): Promise<BlockToolData>;

/**
 * Mark block as stretched (deprecated - use BlockAPI.stretched instead)
 * @param index - Block index
 * @param status - Stretch state
 */
stretchBlock(index: number, status?: boolean): void;

Usage Examples:

// Create empty block data
const emptyData = await editor.blocks.composeBlockData('paragraph');
console.log('Empty paragraph data:', emptyData);

// Use with insert
const newBlock = editor.blocks.insert('paragraph', emptyData);

BlockAPI Interface

Individual block manipulation interface provided by block access methods.

interface BlockAPI {
  // Read-only properties
  readonly id: string;
  readonly name: string;
  readonly config: ToolConfig;
  readonly holder: HTMLElement;
  readonly isEmpty: boolean;
  readonly selected: boolean;
  readonly focusable: boolean;
  
  // Mutable properties
  stretched: boolean;
  
  // Methods
  call(methodName: string, param?: object): void;
  save(): Promise<void | SavedData>;
  validate(data: BlockToolData): Promise<boolean>;
  dispatchChange(): void;
  getActiveToolboxEntry(): Promise<ToolboxConfigEntry | undefined>;
}

Usage Examples:

const block = editor.blocks.getBlockByIndex(0);

if (block) {
  // Access properties
  console.log('Block ID:', block.id);
  console.log('Block type:', block.name);
  console.log('Is empty:', block.isEmpty);
  
  // Modify stretch state
  block.stretched = true;
  
  // Save block data
  const data = await block.save();
  
  // Validate data
  const isValid = await block.validate(data);
  
  // Trigger change event
  block.dispatchChange();
  
  // Call tool method safely
  block.call('customMethod', { param: 'value' });
}

Types

interface OutputBlockData<Type extends string = string, Data extends object = any> {
  id?: string;
  type: Type;
  data: BlockToolData<Data>;
  tunes?: {[name: string]: BlockTuneData};
}

interface BlockToolData<T extends object = any> extends T {}

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

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

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

interface ToolboxConfigEntry {
  icon?: string;
  title?: string;
  data?: BlockToolData;
}

Install with Tessl CLI

npx tessl i tessl/npm-editorjs--editorjs

docs

block-management.md

caret-navigation.md

configuration.md

editor-core.md

event-system.md

index.md

tool-development.md

tile.json