Table of contents

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.

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

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
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.
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

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

This method has no arguments.

TunesMenuConfig Configuration of the tune's appearance inside Block Tunes menu
Button HTML Element with button for Block settings area
class MyBlockTune { constructor({ api }) { this.api = api; } render() { return { icon: '<svg>...</svg>', label: 'H', onActivate: () => { // do smth } }; } }
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; } }

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

This method has no arguments


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

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

blockContent HTML Element with Block's content


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

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


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

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

config User-provided configuration

void or Promise<void>

Method to clean everything after Editor's destroy

Method has no parameters

void or Promise<void>