Registering Color with QuillJS

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!

The following should work for you. I found errors in imports, Quill.register and options. ordered and bullet should also be fixed.

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 { BackgroundClass, BackgroundStyle } from "../../node_modules/quill/formats/background";
import { ColorClass, 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/class": ColorClass,
    "formats/color/style": ColorStyle,
    "formats/background/class": BackgroundClass,
    "formats/background/style": BackgroundStyle,
    "formats/script": Script,
});

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'],
          // empty list means every colors
          [{ 'color': [] }, { 'background': [] }],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          ['clean']
      ]
  },
  placeholder: placeholder,
  theme: 'snow',
};