Block Tunes API

Similar with Tools represented Blocks, you can create Block Tunes and connect it to particular Tool or for all the Tools.

Block Tunes allows you to set any additional options to Blocks. For example, with corresponded Block Tunes you can mark Block as «spoiler», give it an anchor, set a background, and so on.

In this article will be explained all available options for Block Tunes creation.

☝️
Note
Each Block Tune must have at least isTune static getter and the render() method.

Constructor

Block Tune constructor accepts object with following properties:

api Editor's API object
data Tune's saved data
config User-provided configuration
block Block API object of Block tune is related to

Public methods

render Required Method to create an element that will be appended to the Block Tunes panel. This element can include controls for toggling Tune's state and styles of created wrapper.
save Optional Method for saving Tune's state. Will be called on Editor's save
wrap Optional Method for wrapping Block's content element. Called on Block rendering. You can save created wrapped and toggle its styles later.

Static methods and properties

get isTune Required Specifies Tool as Block Tune
prepare Optional Method to make any preparations required for Tune
reset Optional Opposite to prepare. Fired on Editor destroy to clear any Tune state

render()

Create Tune's button for Block settings area. Should return single HTML Element with button.

Parameters

This method has no arguments.

Return value

Button HTML Element with button for Block settings area

Example

class MyBlockTune { constructor({ api }) { this.api = api; } render() { const button = document.createElement('button'); button.classList.add(this.api.styles.button); button.textContent = 'H'; return button; } }

save()

If your Tune has some state to save, this method can return it

Parameters

This method has no arguments

Return value

any

Example

class MyBlockTune { ... save() { return { prop: 'value' }; } }

wrap()

This method is called on Block render and allows you to wrap Block's content to modify it's styles

Parameters

blockContent HTML Element with Block's content

Return value

HTMLElement

Example

class MyBlockTune { ... wrap(blockContent) { const myWrapper = document.createElement('div'); myWrapper.append(blockContent); myWrapper.style.fontSize = '0.9em'; return myWrapper; } }

static get isTune()

To mark Tool as Block Tune this static getter should return true.

Return value

true

Example

class MyBlockTune { static get isTune() { return true; } }

static prepare()

Method to prepare Tune resources, for example load external scripts or styles

Parameters

config User-provided configuration

Return value

void or Promise<void>

static reset()

Method to clean everything after Editor's destroy

Parameters

Method has no parameters

Return value

void or Promise<void>