Toggle Tagify Inputs Between Editable and Non-Editable Modes

[abalter]

I know there are examples, but I don't seem to be smart enough to figure out what to do.

I'm working on a JavaScript application where users can create notes with tags. I'm using the Tagify library to enhance the tag input functionality.

I'm initializing the Tagify input as follows:

const tagInput = document.querySelector('.note-tags');
const tagify = new Tagify(tagInput, {
    whitelist: ['example-tag-1', 'example-tag-2', 'example-tag-3'],
    enforceWhitelist: false,
    dropdown: {
        position: 'input',
        enabled: 0 // Always show suggestions
    }
});
tagify.addTags(['example-tag-1', 'example-tag-2']);

I need to toggle this Tagify input between:

1. Editable mode: Users can add/remove tags.
2. Non-editable mode: Users cannot modify the tags.

Here’s my attempt to toggle the editable state:

function setTagifyEditMode(editable) {
    const tagifyElement = document.querySelector("[class^='tagify']");
    if (editable) {
        tagifyElement.removeAttribute('contenteditable');
        tagify.settings.readonly = false;
    } else {
        tagifyElement.setAttribute('contenteditable', 'false');
        tagify.settings.readonly = true;
    }

    tagify.DOM.input.readOnly = !editable;

    // Updating the settings
    tagify.update();
}

// Example usage
setTagifyEditMode(false); // Making the Tagify input non-editable

Despite attempting the changes above, the Tagify input remains editable even in non-editable mode. How can I correctly toggle the Tagify input between editable and non-editable states?

Any guidance or suggestions would be greatly appreciated. Thank you!