In the previous chapter we have stopped on «Stretch Block» tune. It should increase a Block's Content to the full Editor width. Especially for this case, Editor.js provide a simple API method block.stretchBlock.
In this guide we will learn how to work with the API.
Editor passes an API object to the Tools constructor via api parameter. We can store it somewhere, for example in this.api property that can be visible from any method.
class SimpleImage {
// ... toolbox
constructor({data, api}){
this.api = api;
// ...
}
// ... other methods
}
To make Block stretched we can call a mentioned stretchBlock method. This method accepts a Block index and a status. We can get index of our Block with getCurrentBlockIndex method.
Let's modify our _acceptTuneView with calling an API.
/**
* Add specified class corresponds with activated tunes
* @private
*/
_acceptTuneView() {
this.settings.forEach( tune => {
this.wrapper.classList.toggle(tune.name, !!this.data[tune.name]);
if (tune.name === 'stretched') {
this.api.blocks.stretchBlock(this.api.blocks.getCurrentBlockIndex(), !!this.data.stretched);
}
});
}
Try to toggle «Stretch Block» tune now, it should works as wanted.
It is a base elements classes provided by Editor.js. The reason of using such classes is to make a UI design more consistent between different plugins.
Supported CSS classes for common elements described in Styles API. Let's use them: