Как я могу сделать компонент несъемным после инициализации в winesjs?

Question

У меня есть редактор graphesjs с плагином mjml, и я решил пометить некоторые компоненты как несъемные , чтобы защитить пользователей от удаления важных частей шаблона электронной почты.

Предлагаемый способ установки этого атрибута элемента mjml выглядит следующим образом:

      <div data-gjs-removable="false">...</div>

Но это не работает для <mjml>а также <mj-body>теги.

Могу ли я сделать это после загрузки шаблона?

Answer 1

Да, ты можешь.

После инициализации редактора вам необходимо пройтись по ComponentDom и сделать компоненты несъемными. Не забудьте убрать кнопку из тулбокса - она ​​все равно работать не будет.

      const editor = grapesJS.init({...});

editor.on('load', () => {

    const notRemovableTags = ['mjml', 'mj-body'];

    // recursive function to traverse component tree
    const updateRecursive = componentModel => {
      
        if (notRemovableTags.indexOf(componentModel.attributes.tagName) !== -1) {
            // set not removable
            componentModel.set({removable: false});
            // remove remove icon from toolbar
            componentModel.set({
               toolbar: componentModel.get('toolbar')?.filter(tlb => tlb.command !== 'tlb-delete')
            });
        }
        // recurse
        componentModel.get('components').each(model => updateRecursive(model));
    }
    // start recursion
    updateRecursive(this.editor.DomComponents.getComponent());
});