Doc

In this example, the plugin adds a button on the toolbar and in the addbar only when you click on a paragraph.
Code

<!DOCTYPE html>
<html>
<head>
    <title>Article Editor</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />

    <!-- font awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body>
    <!-- element -->
    <textarea id="entry">
        <p>Content</p>
    </textarea>

    <!-- js -->
    <script src="/your-article-dist-path/article-editor.min.js"></script>

    <!-- call -->
    <script>
    // Create a plugin
    ArticleEditor.add('plugin', 'myplugin', {
       start: function() {
           this.app.addbar.add('myplugin', {
               title: 'My plugin',
               icon: '<i class="fa fa-superpowers"></i>',
               command: 'myplugin.add',
               observer: 'myplugin.observe'
           });

           this.app.toolbar.add('myplugin', {
               title: 'My plugin',
               icon: '<i class="fa fa-superpowers"></i>',
               command: 'myplugin.toggle',
               observer: 'myplugin.observe'
           });
       },
       // Check the button display case
       observe: function(obj, name) {
           if (this.app.block.isType('paragraph')) {
               return obj;
           }

           return false;
       },
       add: function(params, button) {
           this.app.popup.close();

           alert('My plugin add');
       },
       toggle: function(params, button) {
           alert('My plugin toggle');
       }
    });

    // Call with plugin
    ArticleEditor('#entry', {
        css: '/your-article-dist-path/',
        plugins: ['myplugin']
    });
    </script>
</body>
</html>
Examples

Add a button only in a certain case

Code
