Registering colour with Quill

[danielwagstaff]

I have a dotnet Blazor solution which requires a WYSIWYG editor. I'm using QuillJS, but I am struggling to get "color" to be added to the QuillJS toolbar.

I followed the example to configure QuillJS with webpack: https://github.com/quilljs/webpack-example/

My Quill configuration file, imported by webpack, is:

import "../../node_modules/quill/dist/quill.snow.css"
import Quill from "../../node_modules/quill/core";

import Toolbar from "../../node_modules/quill/modules/toolbar";
import Snow from "../../node_modules/quill/themes/snow";
import Header from "../../node_modules/quill/formats/header";
import Bold from "../../node_modules/quill/formats/bold";
import Italic from "../../node_modules/quill/formats/italic";
import Underline from "../../node_modules/quill/formats/underline";
import Strike from "../../node_modules/quill/formats/strike";
import List from "../../node_modules/quill/formats/list";
import ColorClass from "../../node_modules/quill/formats/color";
import ColorStyle from "../../node_modules/quill/formats/color";
import Script from "../../node_modules/quill/formats/script";

Quill.register({
    "modules/toolbar": Toolbar,
    "themes/snow": Snow,
    "formats/header": Header,
    "formats/bold": Bold,
    "formats/italic": Italic,
    "formats/underline": Underline,
    "formats/strike": Strike,
    "formats/list": List,
    "formats/color": ColorClass,
    "formats/color/style": ColorStyle,
    "formats/script": Script,
});

export default function () {
    window.ic = window.ic || {};
    window.ic.quill = window.ic.quill || {};

    window.ic.quill.addWysiwyg = function (element, placeholder) {

        var options = {
            modules: {
                keyboard: {
                    bindings: {
                        tab: {
                            key: 'Tab',
                            handler() {
                                // tab should tab to next element, rather than insert a tab
                                this.quill.blur();
                                return false;
                            }
                        }
                    }
                },
                toolbar: [
                    [{ header: [1, 2, 3, 4, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    ['color', 'background'],
                    [{ list: ['ordered', 'bullet'] }],
                    ['clean']
                ]
            },
            placeholder: placeholder,
            theme: 'snow',
            formats: [
                "bold",
                "italic",
                "header",
                "underline",
                "strike",
                "script",
                "color",
                "script",
                "list"
            ]
        };

        const quill = new Quill(element, options);

        element.onclick = function () {
            quill.focus();
        };
    };
};

When my app loads, the webpacked Quill.register function looks like this:

Every other module looks fine (and works as expected when color isn't included) but color class and style are e.default, which is undefined.

I've looked through the docs, but can't see what I'm doing wrong. Any help would be much appreciated, please!

[danielwagstaff]

In case anyone else encounters the same problem, this has been kindly answered here: https://stackoverflow.com/questions/78777970/registering-color-with-quilljs/78801452#78801452