How to dynamically disable / hide specific Tool from Editor's toolbox

[nenad-coniq]

Does EditorJS support dynamic management of toolbox. My case is like I want to limit the number of usages of Tools.

Something like this, toggle the availability of Tool through API or Config:

• on the moment the tool gets added: disabled or hide the Tool (email)
• on the moment the tool gets removed: enable or show the Tool (email)

let editor = new EditorJS({
    holder: 'editorHolder',
    tools: {
        email: {
            class: Email,
            api: {
                status: this.toggleEmail
            }
        }
    },
    onChange: (api, event) => {
        if (event.detail.target.name === 'email') {
            this.toggleEmail = event.type !== 'block-added';
        }
     }
});

[nenad-coniq]

My current dirty solution is hide and show with inline styling.

onChange: (api, event) => {
    let dataToolName = event.detail.target.name;
    let toolEl = document.querySelector(`.ce-toolbox .ce-toolbox__button[data-tool="${dataToolName}"]`);

    try {
        if (!(['email', 'firstName', 'gender', 'submitButton'].indexOf(dataToolName) > -1)) {
            return;
        }

        switch (event.type) {
            case 'block-added':
                toolEl.style.display = 'none';
                break;
            case 'block-removed':
                toolEl.style.display = 'block';
                break;
        }
    } catch (e) {
        console.log(e)
    }
}

[sadikyalcin]

switch (event.type) {
    case 'block-added':
        toolEl.style.display = 'none';
        break;
    case 'block-removed':
        toolEl.style.display = '';
        break;
    default:
        toolEl.style.display = 'none';
        break;
}