can't use CKEditor to update text styling after using style manager

[rcloss]

I'm not sure how to resolve this. If I haven't chosen any style options from the style manager for a block I can use CKEditor (installed via the grapesjs plugin) and all the font changes work, but if I have set something with Style Manager, I can no longer use CKEditor to change anything, I thought maybe mjml was overriding the CKEditor styles, but I can't even use i, b or u tags once something has been chosen from the Style Manager. If necessary I can disable the style manager stuff and just use CKEditor, but this still seems like an bug

[DRoet]

Could you maybe provide a reproduction / git repo? so it's easier to figure out what is going on.

[rcloss]

It's happening without any major modifications, I'm using grapesjs-mjml 0.1.17 (it's the last one with a dist folder, haven't built a newer one yet, but I don't see a fix in the release notes) and grapesjs 0.16.17

Here's my settings:

var editor = grapesjs.init({
container: '#gjs',
height: '100%',
avoidInlineStyle: false,
fromElement: true,
clearOnRender: true,
plugins: ['grapesjs-mjml', 'gjs-plugin-ckeditor'],
pluginsOpts: {
  'grapesjs-mjml': {
    columnsPadding: '0',
  },
  'gjs-plugin-ckeditor': {
    position: 'center',
    options: {
      startupFocus: true,
      extraAllowedContent: '();{}',
      allowedContent: true,
      enterMode: CKEDITOR.ENTER_BR,
      extraPlugins: 'justify,colorbutton,panelbutton,font,placeholder,mnlink',
      toolbarGroups: [
        {name: 'document', groups: ['mode', 'document', 'doctools']},
        {name: 'clipboard', groups: ['clipboard', 'undo']},
        {name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing']},
        {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']}
      ],
      removeButtons: 'Source,Save,NewPage,Preview,Print,Templates,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Find,Replace,Scayt,Language,Anchor,Image,Flash,PageBreak,Iframe'
    }
  }
}
});

So if I drag a column and a text block I can edit the italic/bold/whatever with CK Editor, but as soon as I do something like center it with the style manager I can no longer do anything with the CKEditor

update: I also tried this with the MJML plugin disabled and using the style manager doesn't stop the CKEditor from working in that case.

[DRoet]

Any reason you need the dist folder? the dist folder is still being published to npm and various cdns

[rcloss]

no, I just haven't got around to upgrading yet, because it wasn't handy here on github. If the newer version fix this bug I can upgrade but I didn't see anything pressing in the release notes to warrant it

[rcloss]

I got back to this and updated to 0.2.4 today and there's still the conflict with the CKEditor plugin, as soon as I change anything in Typography the CKEditor can no longer update bold, italic, etc...

[gl-ll]

I get the same issue on demo https://grapesjs.com/demo-mjml.html

To reproduce :

1. select a text block
2. click on Style Manager > Typography and change the font size
3. open gjs-plugin-ckeditor on the same text block
4. bold the text with gjs-plugin-ckeditor

Issue : imposible to complete step 4.

[annamunk]

I still have the same issue with mjml emails but fix Rte destroy on disable seems to work for me. @artf @DRoet is there a chance that it will be resolved soon?

If this somehow helps to fix the problem, when the gjs-plugin-ckeditor stops working, trying to convert the selected text to a bulleted or numbered list returns an error in the console:

ckeditor.js:186 Uncaught TypeError: Cannot read properties of null (reading 'isContextFor')
at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.command.refresh (ckeditor.js:186:481)
at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.command.exec (ckeditor.js:715:448)
at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.command.exec (ckeditor.js:186:379)
at a.execCommand (ckeditor.js:252:231)
at CKEDITOR.tools.extend.click (ckeditor.js:766:419)
at Object.execute (ckeditor.js:767:490)
at ckeditor.js:768:326
at ckeditor.js:29:180
at Object.callFunction (ckeditor.js:29:296)
at HTMLAnchorElement.onclick (demo-mjml.html:1:16)

[artf]

Closing this as from the demo the issue seems to be resolved