Blocks

Provides methods that allows manipulate with Blocks

Clear — removes all Blocks and creates new empty initial type Block

Render — render with new content data

Delete — removes Block by index

Swap — swaps two Blocks with passed indexes

getBlockByIndex — returns Block HTML content by index

getCurrentBlockIndex — returns focused Block index

getBlocksCount — returns number of rendered Blocks

stretchBlock — stretch Block's content

insert — inserts new Block

Clear

Clear Editor's content. Method removes all Blocks and inserts new initial empty Block

Parameters

This method has no arguments

Return value

Method does not return anything

clear(): void

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } myMethod() { this.api.blocks.clear(); // remove all Blocks } // ... other methods }
☝️
Note.
Method has a shorthand

Render

Method removes all Blocks and fills with new passed JSON data

Parameters

OutputData Data that have the same format as output data of Editor.js

Return value

Promise<void> Returns nothing but allows to continue sequence
render(data: OutputData): Promise<void>

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } refreshContent() { this.api.blocks.render( [ { type: "image", data: { url: "https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_1280.jpg" } }, { type: "header", data: { text: "New header", level: 2 } } ] ); } // ... other methods }
☝️
Note.
Method has a shorthand

Delete

Method removes Block with index. If index is not passed, current Block will be removed

Parameters

Number index of Block that needs to be deleted

Return value

Method does not return anything

delete(index?: number): void

Note that Blocks below will be shifted up

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } deleteSomeBlock() { this.api.blocks.delete(2); // delete 3rd Block } // ... other methods }

Swap

Method swaps two Blocks

Parameters

Number First Block index
Number Second Block index

Return value

Method does not return anything

swap(fromIndex: number, toIndex: number): void

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } changeBlockPositions() { this.api.blocks.swap(1, 2); // swap 1 and 2 Blocks } // ... other methods }

getBlockByIndex

Method returns Block HTML content by index

Parameters

Number Index of Block that will be returned

Return value

Element HTML content of returned Block
getBlockByIndex(index: number): HTMLElement

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } myMethod() { this.api.blocks.getBlockByIndex(1); // get first Block contents } // ... other methods }

getCurrentBlockIndex

Method returns index of current Block

Parameters

This method has no arguments

Return value

Number Index of currently focused Block
getCurrentBlockIndex(): number

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } isFirstBlock() { return this.api.blocks.getCurrentBlockIndex() === 0; } // ... other methods }

getBlocksCount

Method returns number of Blocks

Parameters

This method has no arguments

Return value

Number Count of rendered Blocks
getBlocksCount(): number

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } isLastBlock() { return this.api.blocks.getCurrentBlockIndex() === this.api.blocks.getBlocksCount() - 1; } // ... other methods }

stretchBlock

Method allow Plugins to use 100% space of Block content. For example, to stretch images

Parameters

Number index of Block that will be full-width
Boolean state of stretching

Return value

stretchBlock(index: number, status: boolean = true): void

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } stretchMyImage() { this.api.blocks.stretchBlock(1, true); } // ... other methods }

insert

Method inserts new Block with pasted type and data.

Parameters

String New Block type 
Object New Block data
Object Config for new Block's Tool
Number Position for block. By default, it will inserted after current Block
Boolean Need to set focus or not.

Return value

Method does not return anything

insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean): void

insertNewBlock

Method inserts new Block after focused Block and sets new focus

☝️
Deprecated
This method will be removed with next major release. Use insert() instead

Parameters

This method has no arguments

Return value

Method does not return anything

insertNewBlock(): void

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } myMethod() { this.api.blocks.insertNewBlock(); } // ... other methods }