Add a button only in a certain case

This example shows how to add a button on the toolbar and in the addbar with observer in which you can define when the button will be displayed.

    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>Redactor X</title>
        <meta charset="utf-8">
    
        <!-- css -->
        <link rel="stylesheet" href="/your-dist-path/redactorx.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-dist-path/redactorx.min.js"></script>
    
        <!-- call -->
        <script>
        // Create a plugin
        RedactorX.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
        RedactorX('#entry', {
            plugins: ['myplugin']
        });
        </script>
    </body>
    </html>