Quill customization and webpack/npm + CKeditor 5

[wsdnathan]

@tabuna hopefully you can help me once again, I think these are noob questions. :) I followed the info here and got pretty far along with customizing the Quill editor https://orchid.software/en/docs/javascript/ and trying to add this HTML Editor button https://github.com/benwinding/quill-html-edit-button

I was able to create my own copy of the Quill field with its own JS controller and everything, it even shows the new HTML edit button, however the rest of the icons/bubbles in the toolbar are not visible. Tried including the snow theme js+css, loading the toolbar module and everything. Why does the Orchid Quill field JS not require all these extra includes? Is it auto-loading what it needs? If so how do I get npm run dev to auto-load for my own JS which is separate from Orchid?

Another question, so if I use Orchid as the admin and then have a separate frontend for a website, how do you recommend keeping the webpack application JS for the frontend and backend separated? So that a bunch of Quill JS/CSS code doesn't get included for the frontend when only used on the backend? I think this has to do with using webpack to compile a separate JS file and then the js/css inclusions are defined in the config/platform.php correct? Again kind of a noob question as I don't have much experience with the view layer and webpack.mix until now.

Also I tried scrapping Quill altogether and instead set up CKeditor 5 (which is packaged much differently than v4) - got it working but running into the same issue trying to figure out what I need to npm require and include and so on. Feels like it should be easier but at least I am beginning to understand how all the pieces work together. The 2 issues I am having with Quill are I need the HTML Editor and the image upload management for setting dimensions/alt/title is inferior to CKeditor+CKfinder.

[wsdnathan]

Using the above 2 links documentation I was able to figure it out. I wish Orchid would consider switching to Livewire.

This was my JS controller solution how to initialize Quill if it helps anybody else out:

import Quill from 'quill/dist/quill.js';
import htmlEditButton from "quill-html-edit-button";

Quill.register({
"modules/htmlEditButton": htmlEditButton
});

export default class extends window.Controller {
/**
*
*/
connect() {
const quill = Quill;
const selector = this.element.querySelector('.quill').id;
const input = this.element.querySelector('input');

    const options = {
        placeholder: input.placeholder,
        readOnly: input.readOnly,
        theme: 'snow',
        modules: {
            toolbar: {
                container: this.containerToolbar(),
            },
            htmlEditButton: {
                /* // https://github.com/benwinding/quill-html-edit-button
                debug: true, // logging, default:false
                msg: "Edit the content in HTML format", //Custom message to display in the editor, default: Edit HTML here, when you click "OK" the quill editor's contents will be replaced
                okText: "Ok", // Text to display in the OK button, default: Ok,
                cancelText: "Cancel", // Text to display in the cancel button, default: Cancel
                buttonHTML: "&lt;&gt;", // Text to display in the toolbar button, default: <>
                buttonTitle: "Show HTML source", // Text to display as the tooltip for the toolbar button, default: Show HTML source
                syntax: false, // Show the HTML with syntax highlighting. Requires highlightjs on window.hljs (similar to Quill itself), default: false
                prependSelector: 'div#myelement', // a string used to select where you want to insert the overlayContainer, default: null (appends to body),
                editorModules: {} // The default mod
                */
            }
        },
    };
    // ...

[wsdnathan]

Found this and after looking at Quill, CKEditor and TinyMCE licensing I think this is the best option https://github.com/orchidcommunity/TinyMCE