Disable links when editing buttons

[pepoteloko]

Hello,

I want to disable links button of the CKEditor when editing buttons (mj-button exactly).
I added this peace of code:

  const focus = (el: HTMLElement, rte?: CKE.editor) => {
    if (rte?.focusManager?.hasFocus) return;
    el.contentEditable = 'true';

    //START OF NEW
    let mjElement = findType(el); // search data gjsType of parent element
    if (rte && mjElement == 'mj-button') {
      rte.config.removePlugins = "link";
      console.log(rte.config);
    }
    //END OF NEW

    rte?.focus();
    updateEditorToolbars();
  };

When I use npm serve it works, and when editing mj-buttons with Grappe and MJML the link buttons disapear.

Then I generate the js with npm build and put it inside my app it does'nt work. No error on console and the link buttons always appearing. I have left some console.log to be sure that the new version was used.

Any idea what could be happening?

Just in case it's important, this is our ckeditor configuration:

'grapesjs-plugin-ckeditor': {
  onToolbar: el => {
    el.style.minWidth = '350px';
  },
  options: {
    extraPlugins: 'sharedspace,panelbutton,colorbutton,clipboard,pastefromword,pastetools,justify,richcombo,lineheight', // emoji
    toolbarGroups: [
      { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
      { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
      { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing', 'lineheight' ] },
      { name: 'forms', groups: [ 'forms' ] },
      { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
      { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
      { name: 'links', groups: [ 'links' ] },
      { name: 'insert', groups: [ 'insert' ] },
      '/',
      { name: 'styles', groups: [ 'styles' ] },
      { name: 'colors', groups: [ 'colors' ] },
      { name: 'tools', groups: [ 'tools' ] },
      { name: 'others', groups: [ 'others' ] },
      { name: 'about', groups: [ 'about' ] },
      // { name: 'emoji', groups: [ 'EmojiPanel' ] }
    ],
    removeButtons: 'Paste,Source,Save,NewPage,Preview,Print,Templates,Scayt,SelectAll,Find,Replace,Undo,Cut,Copy,Redo,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Subscript,Superscript,CopyFormatting,RemoveFormat,Outdent,Indent,Blockquote,CreateDiv,BidiRtl,BidiLtr,Language,Anchor,Image,Flash,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,Styles,Maximize,ShowBlocks,About',
    removePlugins: 'scayt,exportpdf',
    enterMode: CKEDITOR.ENTER_P,
    shiftEnterMode: CKEDITOR.ENTER_BR,
    disallowedContent: 'p',
    disableAutoInline: true,
    defaultLanguage: 'en',
    language: '{{ localization()->getCurrentLocale() }}'
  }
}

PS: Sorry if my english is not perfect, always learning a little more :)

[pepoteloko]

I abswer myself:

With no CKEditor config, the code does the trick and the link button disapears.

But when using "removePlugins" in CKEditor config it stops working. I think that my idea is good (remove plugin on mj-button), but this is not the place.

In the meantime I can use this, even if it's not the best

if (rte && mjElement == 'mj-button') {
  rte.config.removePlugins = "scayt,exportpdf,link";
} else if (rte && mjElement !== 'mj-button') {
  rte.config.removePlugins = "scayt,exportpdf";
}

Any idea where would be the ideal place to put this control?