If you are not already familiar with how plugins work, we recommend you first take a look at the Plugins Crash Course before reading this article.
Element settings toolbar becomes visible when one of the page elements is selected by clicking on it. Each element can have a different set of settings plugins.
Creating a settings plugin
To register a new plugin:
4 we import a generic
Action component created specifically for the element settings toolbar.
We then wrap it with our custom
DeleteAction component which will create an
onClick handler and pass
it to the generic
Action component to handle clicks.
shortcut prop at line
13 will add a keyboard shortcut handler for this action. So in this case,
when you select an element and hit the
backspace key, the
Action component will execute the
handler, as if you've clicked it yourself.
Internally, we are using the is-hotkey library to handle keyboard events, so use the hotkey syntax supported by that library.
DeleteAction component looks like this:
15-19 perform a check whether the selected element can be deleted.
The logic to allow or disallow deletion of an element can be implemented on the
element plugin itself (see the anatomy of an element).
If yes, the action is rendered and an
onClick handler is passed to it.
More on the topic
There is a lot you can do with the settings plugins.
If you are interested to see how the existing plugins work, please see a list of our official element settings plugins on Github and feel free to copy and play with the code to create your own plugins.
When dealing with settings plugins, the same principles of rendering optimization apply: be careful when and what to re-render as it is very easy to slow down the entire editor by introducing an unoptimized piece of code.