Quill as RTE

[iamqinglong]

Hi guys!
Hope you can help me.
I've been trying to integrate Quill as RTE and now its working but not fine.
It works at the first time you enable and disable it but on the second time it doesn't blur or it always make the text component in editable state.

code

const focus = (el, rte) => {
    if (rte?.hasFocus()) {
        return;
    }
    el.contentEditable = 'true';
    rte?.focus();
};

editor.setCustomRte({
  enable: function(el, rte) {
    if (rte) {
        focus(el, rte)
    }

    const rteToolbar = editor.RichTextEditor.getToolbarEl();
    [].forEach.call(rteToolbar.children, (child) => {
      child.style.display = 'none';
    });

    const window = editor.Canvas.getWindow();
    rte = new window.Quill(el, {
      modules: {
        toolbar: [{header: [1,2,3,4,5,6,false]}],
      },
      theme: 'bubble',
      scrollContainer: 'div[data-gjs-type=wrapper]',
    });

    focus(el, rte);

    return rte;
  },

  getContent(el, rte) {
    return rte.root.innerHTML
  },
  
  disable(el, rte) {
    el.contentEditable = false;
    rte?.blur();
    updateEditorToolbars();
  }
});

Screen recording:

Screen.Recording.2023-09-27.at.4.39.19.PM.mov

[artf]

Please provide a reproducible demo via jsfiddle or similar

[iamqinglong]

here is the link. https://stackblitz.com/edit/js-edkpuj?file=package.json,index.js,index.html,rte.js

[artf]

Did you fix it, seems to work if I reenable the editing.

[iamqinglong]

@artf no i didn't fix it. how did you do it?

[Ju99ernaut]

Have a plugin for quill you can check out https://github.com/Ju99ernaut/gjs-quill, not really sure what was causing this issue but there were two things that improved the rte in grapesjs:

1. Attaching quill to the iframe window instead of the main window.
2. Destroying quill instances after use.

[iamqinglong]

Hi @Ju99ernaut , Yeah I found your package that is why there is similarity since I followed yours. Thank you for that.
How do we achieve the no 1?