CKEditor 5 custom plugin not disabled in read mode

Question

Right now I'm integrating custom plugins into the ckeditor 5. I created and added plugins using the ckeditor 5 documentation. I also have a custom "super" build (similar to this example) that I use in my web application.

Now my problem is that my plugins will not be disabled in the ckeditor read mode (as showcased in the image at the button). The ckeditor documentation mentions that this should be the "default" behaviour for plugins / buttons.

If someone has an idea where I'm going wrong that'd be greatly appreciated!

Here is a skeleton example of my custom plugin class.

import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';

import ckeditor5Icon from './icons/insertvariable.svg';

export default class HWInsertVariable extends Plugin {
    static get pluginName() {
        return 'HWInsertVariable';
    }

    init() {
        const that = this;
        const editor = this.editor;
        const model = editor.model;

        let labelTxt = 'Variable einfügen';

        editor.ui.componentFactory.add( 'hwInsertVariableButton', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: labelTxt,
                icon: ckeditor5Icon,
                tooltip: true,
                affectsData: true
            } );

            this.listenTo( view, 'execute', () => {
                model.change( writer => {
                    that.buttonClicked();
                } );

                editor.editing.view.focus();
            } );

            return view;
        } );
    }

    buttonClicked() {
        //code
    }
}

Answer 1

Im not sure what the correct method to resolve this is, as I also am facing the same. But what I have found so far, is that there might be a hacky way to get around this.

Checkout the docs regarding "disabling commands", "read-only" mode, and notice the CSS class "ck-disabled"

if/when I find a working way, I will try to come back here and post a better solution

---

Update: I fixed this for me when I found that I was missing the section of the code in my my_plugin_ui.js where

  const command = editor.commands.get('nameOfCommand');

  // Execute the command when the button is clicked (executed).
  buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');