[HELP WANTED] I can not use ckeditor 5 with grapesjs

[gabrigcl]

Hello, Arthur and contributors! I'm creating a plugin for using CKEditor 5 in grapesjs, based on the grapesjs-plugin-ckeditor already available. I can't make it work. While using the editor, some styles don't work and after some cliks, ckeditor 5 responds with the folowing error message:

"Uncaught Xa: view-renderer-filler-was-lost: The inline filler node was lost. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error"

I followed correctly the guidelines from ckeditor 5 docs and I relied on the grapesjs-plugin-ckeditor. I don't know if I'm not following corretly the guidelines from "Replace Rich Text Editor" page or I'm coding incorrectly or it's just an incompatibility of the new ckeditor 5 with editing from an iframe.

Here is the javascript code:

import grapesjs from 'grapesjs';

const stopPropagation = e => e.stopPropagation();

export default grapesjs.plugins.add('gjs-plugin-ckeditor', (editor, opts = {}) => {
  let c = opts;

  let defaults = {
    // CKEditor options
    options: {},

    // On which side of the element to position the toolbar
    // Available options: 'left|center|right'
    position: 'left',
  };

  // Load defaults
  for (let name in defaults) {
    if (!(name in c))
      c[name] = defaults[name];
  }

  if (!InlineEditor) {
    throw new Error('CKEDITOR instance not found');
  }

  editor.setCustomRte({
    enable: async(el, rte) => {
      // If already exists I'll just focus on it
      if(rte) {
        el.contentEditable = true;
        let rteToolbar = editor.RichTextEditor.getToolbarEl();
        [].forEach.call(rteToolbar.children, (child) => {
          child.style.display = 'none';
        });
        console.log('if rte 1 ', rte);
        await rte.then( e => {
          rte = e;
          e.ui.view.toolbar.element.style.display = 'block';
        });
      	return rte;
      }

      // Seems like 'sharedspace' plugin doesn't work exactly as expected
      // so will help hiding other toolbars already created
      let rteToolbar = editor.RichTextEditor.getToolbarEl();
      [].forEach.call(rteToolbar.children, (child) => {
      	child.style.display = 'none';
      });

      // Init CkEditors
      rte = await InlineEditor
        .create( el, {
          language: 'pt-br'
      }).catch( error => {
          console.error( error );
        }
      );
      
      if(rte){
        // // Prevent blur when some of CKEditor's element is clicked
        rte.on('mousedown', e => {
          const editorEls = grapesjs.$('.gjs-rte-toolbar');
          ['off', 'on'].forEach(m => editorEls[m]('mousedown', stopPropagation));
        });

        editor.RichTextEditor.getToolbarEl().appendChild( rte.ui.view.toolbar.element );
        el.contentEditable = true;
      }else{
        console.log( 'Editor was not initialized' );
      }

      return rte;
    },

    disable(el, rte) {
      el.contentEditable = false;
    }
  });

  // Update RTE toolbar position
  editor.on('rteToolbarPosUpdate', (pos) => {
    // Update by position
    switch (c.position) {
      case 'center':
        let diff = (pos.elementWidth / 2) - (pos.targetWidth / 2);
        pos.left = pos.elementLeft + diff;
        break;
      case 'right':
        let width = pos.targetWidth;
        pos.left = pos.elementLeft + pos.elementWidth - width;
        break;
    }

    if (pos.top <= pos.canvasTop) {
      pos.top = pos.elementTop + pos.elementHeight;
    }

    // Check if not outside of the canvas
    if (pos.left < pos.canvasLeft) {
      pos.left = pos.canvasLeft;
    }
  });
});

In the HTML I load:

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/inline/ckeditor.js"></script>
<script src="dist/grapesjs-plugin-ckeditor.min.js"></script><!--My grapesjs-ckeditor-5 plugin build-->```

[artf]

This is might be strictly related to CKEditor 5 and not GrapesJS. I'd suggest start asking why you're getting that error. For now, there is no reason to keep this issue open

[jvillena]

Hi @gabrigcl,
Did you find a solution for using ckeditor5 on grapesjs?

[gabrigcl]

Nope

[FrciSmrci]

Hey @jvillena and @gabrigcl I managed to research the issue and create a build of the ckeditor inline build 5 where the error doesn't occur anymore (the fix is not yet released). Although, there are some new/other issues when trying to style the selected element. I will research this errors, but if you find a solution before me it'll be awesome if you share your findings.

[jvillena]

@FrciSmrci I will take a look later. Thanks

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.