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*	Use this method to define how your tune will be rendered inside Block Tunes menu.
`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()

Method allows to define tune’s appearance inside Block Tunes menu. Can either return MenuConfig or single HTML element with a button.

Return value

`MenuConfig`	Configuration of the tune's appearance inside Block Tunes menu
`Button`	Advanced. HTML Element with button for Block settings area

Example #1: MenuConfig return value

class MyBlockTune { constructor({ api }) { this.api = api; } render() { return { icon: '<svg>...</svg>', label: 'H', onActivate: () => { // do smth } }; } }

Example #2: Button return value

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>