studiokit-scaffolding-js 4.9.0-next.2.1 → 4.10.0

package/lib/components/ErrorMessage.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+export interface ErrorMessageProps {
+    message: string | JSX.Element | undefined;
+    hideIcon?: boolean;
+}
+export declare const ErrorMessage: FunctionComponent<ErrorMessageProps>;

package/lib/components/ErrorMessage.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+var ErrorOutline_1 = __importDefault(require("@material-ui/icons/ErrorOutline"));
+var react_1 = __importDefault(require("react"));
+var ErrorMessage = function (_a) {
+    var message = _a.message, hideIcon = _a.hideIcon;
+    if (!message) {
+        return null;
+    }
+    return (react_1.default.createElement("span", { className: "color-red b" + (!hideIcon ? ' flex items-center' : '') },
+        !hideIcon && react_1.default.createElement(ErrorOutline_1.default, { className: "mr1" }),
+        message));
+};
+exports.ErrorMessage = ErrorMessage;

package/lib/components/Icons/IconAlphaList.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { FunctionComponent } from 'react';
+export declare const IconAlphaList: FunctionComponent<SvgIconProps>;

package/lib/components/Icons/IconAlphaList.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconAlphaList = void 0;
+var SvgIcon_1 = __importDefault(require("@material-ui/core/SvgIcon"));
+var react_1 = __importDefault(require("react"));
+/** Copied from `@mdi/js` */
+var mdiOrderAlphabeticalAscending = 'M12 5H22V7H12M12 19V17H22V19M12 11H22V13H12M9 13V15L5.67 19H9V21H3V19L6.33 15H3V13M7 3H5C3.9 3 3 3.9 3 5V11H5V9H7V11H9V5C9 3.9 8.11 3 7 3M7 7H5V5H7Z';
+var IconAlphaList = function (props) { return (react_1.default.createElement(SvgIcon_1.default, __assign({}, props),
+    react_1.default.createElement("path", { d: mdiOrderAlphabeticalAscending }))); };
+exports.IconAlphaList = IconAlphaList;

package/lib/components/Icons/IconTable.d.ts

@@ -0,0 +1,5 @@
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { FunctionComponent } from 'react';
+/** Copied from `@mdi/js` */
+export declare const mdiTable = "M5,4H19A2,2 0 0,1 21,6V18A2,2 0 0,1 19,20H5A2,2 0 0,1 3,18V6A2,2 0 0,1 5,4M5,8V12H11V8H5M13,8V12H19V8H13M5,14V18H11V14H5M13,14V18H19V14H13Z";
+export declare const IconTable: FunctionComponent<SvgIconProps>;

package/lib/components/Icons/IconTable.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconTable = exports.mdiTable = void 0;
+var SvgIcon_1 = __importDefault(require("@material-ui/core/SvgIcon"));
+var react_1 = __importDefault(require("react"));
+/** Copied from `@mdi/js` */
+exports.mdiTable = 'M5,4H19A2,2 0 0,1 21,6V18A2,2 0 0,1 19,20H5A2,2 0 0,1 3,18V6A2,2 0 0,1 5,4M5,8V12H11V8H5M13,8V12H19V8H13M5,14V18H11V14H5M13,14V18H19V14H13Z';
+var IconTable = function (props) { return (react_1.default.createElement(SvgIcon_1.default, __assign({}, props),
+    react_1.default.createElement("path", { d: exports.mdiTable }))); };
+exports.IconTable = IconTable;

package/lib/components/Icons/IconTableDeleteCol.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { FunctionComponent } from 'react';
+export declare const IconTableDeleteCol: FunctionComponent<SvgIconProps>;

package/lib/components/Icons/IconTableDeleteCol.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconTableDeleteCol = void 0;
+var SvgIcon_1 = __importDefault(require("@material-ui/core/SvgIcon"));
+var react_1 = __importDefault(require("react"));
+/** Copied from `@mdi/js` */
+var mdiTableColumnRemove = 'M4,2H11A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M17.59,12L15,9.41L16.41,8L19,10.59L21.59,8L23,9.41L20.41,12L23,14.59L21.59,16L19,13.41L16.41,16L15,14.59L17.59,12Z';
+var IconTableDeleteCol = function (props) { return (react_1.default.createElement(SvgIcon_1.default, __assign({}, props),
+    react_1.default.createElement("path", { d: mdiTableColumnRemove }))); };
+exports.IconTableDeleteCol = IconTableDeleteCol;

package/lib/components/Icons/IconTableDeleteRow.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { FunctionComponent } from 'react';
+export declare const IconTableDeleteRow: FunctionComponent<SvgIconProps>;

package/lib/components/Icons/IconTableDeleteRow.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconTableDeleteRow = void 0;
+var SvgIcon_1 = __importDefault(require("@material-ui/core/SvgIcon"));
+var react_1 = __importDefault(require("react"));
+/** Copied from `@mdi/js` */
+var mdiTableRowRemove = 'M9.41,13L12,15.59L14.59,13L16,14.41L13.41,17L16,19.59L14.59,21L12,18.41L9.41,21L8,19.59L10.59,17L8,14.41L9.41,13M22,9A2,2 0 0,1 20,11H4A2,2 0 0,1 2,9V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V9M4,9H8V6H4V9M10,9H14V6H10V9M16,9H20V6H16V9Z';
+var IconTableDeleteRow = function (props) { return (react_1.default.createElement(SvgIcon_1.default, __assign({}, props),
+    react_1.default.createElement("path", { d: mdiTableRowRemove }))); };
+exports.IconTableDeleteRow = IconTableDeleteRow;

package/lib/components/Icons/IconTableInsertCol.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { FunctionComponent } from 'react';
+export declare const IconTableInsertCol: FunctionComponent<SvgIconProps>;

package/lib/components/Icons/IconTableInsertCol.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconTableInsertCol = void 0;
+var SvgIcon_1 = __importDefault(require("@material-ui/core/SvgIcon"));
+var react_1 = __importDefault(require("react"));
+/** Copied from `@mdi/js` */
+var mdiTableColumnPlusAfter = 'M11,2A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H2V2H11M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M15,11H18V8H20V11H23V13H20V16H18V13H15V11Z';
+var IconTableInsertCol = function (props) { return (react_1.default.createElement(SvgIcon_1.default, __assign({}, props),
+    react_1.default.createElement("path", { d: mdiTableColumnPlusAfter }))); };
+exports.IconTableInsertCol = IconTableInsertCol;

package/lib/components/Icons/IconTableInsertRow.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { FunctionComponent } from 'react';
+export declare const IconTableInsertRow: FunctionComponent<SvgIconProps>;

package/lib/components/Icons/IconTableInsertRow.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconTableInsertRow = void 0;
+var SvgIcon_1 = __importDefault(require("@material-ui/core/SvgIcon"));
+var react_1 = __importDefault(require("react"));
+/** Copied from `@mdi/js` */
+var mdiTableRowPlusAfter = 'M22,10A2,2 0 0,1 20,12H4A2,2 0 0,1 2,10V3H4V5H8V3H10V5H14V3H16V5H20V3H22V10M4,10H8V7H4V10M10,10H14V7H10V10M20,10V7H16V10H20M11,14H13V17H16V19H13V22H11V19H8V17H11V14Z';
+var IconTableInsertRow = function (props) { return (react_1.default.createElement(SvgIcon_1.default, __assign({}, props),
+    react_1.default.createElement("path", { d: mdiTableRowPlusAfter }))); };
+exports.IconTableInsertRow = IconTableInsertRow;

package/lib/components/Quill/CustomToolbar.d.ts

@@ -0,0 +1,42 @@
+import { FunctionComponent } from 'react';
+import ReactQuill from 'react-quill';
+export declare enum TOOLBAR_OPTION {
+    HEADER = "header",
+    FONT = "font",
+    SIZE = "size",
+    BOLD = "bold",
+    ITALIC = "italic",
+    UNDERLINE = "underline",
+    SCRIPT_SUB = "sub",
+    SCRIPT_SUPER = "super",
+    STRIKE_THROUGH = "strike",
+    BLOCKQUOTE = "blockquote",
+    CODE_BLOCK = "code-block",
+    ALIGN = "align",
+    LIST_ORDERED = "ordered",
+    LIST_BULLET = "bullet",
+    LIST_ALPHA = "alpha",
+    INDENT = "indent",
+    LINK = "link",
+    IMAGE = "image",
+    VIDEO = "video",
+    FORMULA = "formula",
+    TABLE = "table",
+    /** NOTE: variable support is not currently in scaffolding, just the toolbar option */
+    VARIABLE = "variable",
+    CLEAN = "clean"
+}
+export declare const getFormatsForOptions: (sectionOptionsArray: TOOLBAR_OPTION[][]) => string[];
+export declare type ToolbarSection = (disabled?: boolean) => JSX.Element;
+export interface CustomToolbarProps {
+    guid: string;
+    /** An array of toolbar option arrays. Each top level array will equate to a toolbar section, with spacing between each section. */
+    sectionOptions: TOOLBAR_OPTION[][];
+    /** (Optional) An array of toolbar option arrays. When provided, a "more options" button is provided and a secondary toolbar can be expanded and collapsed. */
+    moreSectionOptions?: TOOLBAR_OPTION[][];
+    className?: string;
+    disabled?: boolean;
+    reactQuillRef: ReactQuill | null;
+    isVisibleWhenDisabled?: boolean;
+}
+export declare const CustomToolbar: FunctionComponent<CustomToolbarProps>;

package/lib/components/Quill/CustomToolbar.js

@@ -0,0 +1,214 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomToolbar = exports.getFormatsForOptions = exports.TOOLBAR_OPTION = void 0;
+var AddBox_1 = __importDefault(require("@material-ui/icons/AddBox"));
+var MoreHoriz_1 = __importDefault(require("@material-ui/icons/MoreHoriz"));
+var lodash_1 = require("lodash");
+var react_1 = __importStar(require("react"));
+var IconAlphaList_1 = require("../Icons/IconAlphaList");
+var IconTable_1 = require("../Icons/IconTable");
+var IconTableDeleteCol_1 = require("../Icons/IconTableDeleteCol");
+var IconTableDeleteRow_1 = require("../Icons/IconTableDeleteRow");
+var IconTableInsertCol_1 = require("../Icons/IconTableInsertCol");
+var IconTableInsertRow_1 = require("../Icons/IconTableInsertRow");
+var accessibilityFix_1 = require("./accessibilityFix");
+var constants_1 = require("./TableModule/constants");
+var TOOLBAR_OPTION;
+(function (TOOLBAR_OPTION) {
+    TOOLBAR_OPTION["HEADER"] = "header";
+    TOOLBAR_OPTION["FONT"] = "font";
+    TOOLBAR_OPTION["SIZE"] = "size";
+    TOOLBAR_OPTION["BOLD"] = "bold";
+    TOOLBAR_OPTION["ITALIC"] = "italic";
+    TOOLBAR_OPTION["UNDERLINE"] = "underline";
+    TOOLBAR_OPTION["SCRIPT_SUB"] = "sub";
+    TOOLBAR_OPTION["SCRIPT_SUPER"] = "super";
+    TOOLBAR_OPTION["STRIKE_THROUGH"] = "strike";
+    TOOLBAR_OPTION["BLOCKQUOTE"] = "blockquote";
+    TOOLBAR_OPTION["CODE_BLOCK"] = "code-block";
+    TOOLBAR_OPTION["ALIGN"] = "align";
+    TOOLBAR_OPTION["LIST_ORDERED"] = "ordered";
+    TOOLBAR_OPTION["LIST_BULLET"] = "bullet";
+    TOOLBAR_OPTION["LIST_ALPHA"] = "alpha";
+    TOOLBAR_OPTION["INDENT"] = "indent";
+    TOOLBAR_OPTION["LINK"] = "link";
+    TOOLBAR_OPTION["IMAGE"] = "image";
+    TOOLBAR_OPTION["VIDEO"] = "video";
+    TOOLBAR_OPTION["FORMULA"] = "formula";
+    TOOLBAR_OPTION["TABLE"] = "table";
+    /** NOTE: variable support is not currently in scaffolding, just the toolbar option */
+    TOOLBAR_OPTION["VARIABLE"] = "variable";
+    TOOLBAR_OPTION["CLEAN"] = "clean";
+})(TOOLBAR_OPTION = exports.TOOLBAR_OPTION || (exports.TOOLBAR_OPTION = {}));
+var getFormatsForOption = function (option) {
+    switch (option) {
+        case TOOLBAR_OPTION.HEADER:
+        case TOOLBAR_OPTION.FONT:
+        case TOOLBAR_OPTION.SIZE:
+        case TOOLBAR_OPTION.BOLD:
+        case TOOLBAR_OPTION.ITALIC:
+        case TOOLBAR_OPTION.UNDERLINE:
+        case TOOLBAR_OPTION.STRIKE_THROUGH:
+        case TOOLBAR_OPTION.BLOCKQUOTE:
+        case TOOLBAR_OPTION.CODE_BLOCK:
+        case TOOLBAR_OPTION.ALIGN:
+        case TOOLBAR_OPTION.INDENT:
+        case TOOLBAR_OPTION.LINK:
+        case TOOLBAR_OPTION.IMAGE:
+        case TOOLBAR_OPTION.VIDEO:
+        case TOOLBAR_OPTION.FORMULA:
+        case TOOLBAR_OPTION.VARIABLE:
+            return [option];
+        case TOOLBAR_OPTION.LIST_ORDERED:
+        case TOOLBAR_OPTION.LIST_BULLET:
+        case TOOLBAR_OPTION.LIST_ALPHA:
+            return ['list'];
+        case TOOLBAR_OPTION.SCRIPT_SUB:
+        case TOOLBAR_OPTION.SCRIPT_SUPER:
+            return ['script'];
+        case TOOLBAR_OPTION.TABLE:
+            return ['table-container', 'table', 'tbody', 'tr', 'td'];
+        case TOOLBAR_OPTION.CLEAN:
+            return [];
+        default:
+            throw new Error("Unsupported option: " + option);
+    }
+};
+var getFormatsForOptions = function (sectionOptionsArray) {
+    // flatten section options to array of options
+    // map options to formats and flatten those formats
+    // get distinct values using Set, then convert back to Array
+    return Array.from(new Set(sectionOptionsArray.flat(2).flatMap(function (option) { return getFormatsForOption(option); })));
+};
+exports.getFormatsForOptions = getFormatsForOptions;
+var getToolbarSectionForOption = function (option) {
+    switch (option) {
+        case TOOLBAR_OPTION.HEADER:
+            return function (disabled) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("button", { className: "ql-header", value: "1", disabled: disabled }),
+                react_1.default.createElement("button", { className: "ql-header", value: "2", disabled: disabled }))); };
+        case TOOLBAR_OPTION.FONT:
+        case TOOLBAR_OPTION.SIZE:
+        case TOOLBAR_OPTION.ALIGN:
+            return function (disabled) { return react_1.default.createElement("select", { className: "ql-" + option, disabled: disabled }); };
+        case TOOLBAR_OPTION.BOLD:
+        case TOOLBAR_OPTION.ITALIC:
+        case TOOLBAR_OPTION.UNDERLINE:
+        case TOOLBAR_OPTION.STRIKE_THROUGH:
+        case TOOLBAR_OPTION.BLOCKQUOTE:
+        case TOOLBAR_OPTION.CODE_BLOCK:
+        case TOOLBAR_OPTION.LINK:
+        case TOOLBAR_OPTION.IMAGE:
+        case TOOLBAR_OPTION.VIDEO:
+        case TOOLBAR_OPTION.FORMULA:
+        case TOOLBAR_OPTION.CLEAN:
+            return function (disabled) { return react_1.default.createElement("button", { className: "ql-" + option, disabled: disabled }); };
+        case TOOLBAR_OPTION.SCRIPT_SUB:
+            return function (disabled) { return react_1.default.createElement("button", { className: "ql-script", value: "sub", disabled: disabled }); };
+        case TOOLBAR_OPTION.SCRIPT_SUPER:
+            return function (disabled) { return react_1.default.createElement("button", { className: "ql-script", value: "super", disabled: disabled }); };
+        case TOOLBAR_OPTION.LIST_ORDERED:
+            return function (disabled) { return react_1.default.createElement("button", { className: "ql-list", value: "ordered", disabled: disabled }); };
+        case TOOLBAR_OPTION.LIST_BULLET:
+            return function (disabled) { return react_1.default.createElement("button", { className: "ql-list", value: "bullet", disabled: disabled }); };
+        case TOOLBAR_OPTION.LIST_ALPHA:
+            return function (disabled) { return (react_1.default.createElement("button", { className: "ql-list", value: "alpha", disabled: disabled, title: "Toggle alpha list", "aria-label": "Toggle alpha list" },
+                react_1.default.createElement(IconAlphaList_1.IconAlphaList, { style: { width: 'auto' } }))); };
+        case TOOLBAR_OPTION.INDENT:
+            return function (disabled) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("button", { className: "ql-indent", value: "-1", disabled: disabled }),
+                react_1.default.createElement("button", { className: "ql-indent", value: "+1", disabled: disabled }))); };
+        case TOOLBAR_OPTION.TABLE:
+            return function (disabled) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("select", { className: "ql-table", disabled: disabled }, Array.from(Array(5).keys()).flatMap(function (row) {
+                    return Array.from(Array(5).keys()).map(function (col) {
+                        return (react_1.default.createElement("option", { key: row + "-" + col, value: "" + constants_1.TABLE_ACTION.NEW_TABLE + (row + 1) + "_" + (col + 1) }));
+                    });
+                })),
+                react_1.default.createElement("button", { className: "ql-table", value: "insert-row", disabled: disabled },
+                    react_1.default.createElement(IconTableInsertRow_1.IconTableInsertRow, { style: { width: 'auto' } })),
+                react_1.default.createElement("button", { className: "ql-table", value: "delete-row", disabled: disabled },
+                    react_1.default.createElement(IconTableDeleteRow_1.IconTableDeleteRow, { style: { width: 'auto' } })),
+                react_1.default.createElement("button", { className: "ql-table", value: "insert-col", disabled: disabled },
+                    react_1.default.createElement(IconTableInsertCol_1.IconTableInsertCol, { style: { width: 'auto' } })),
+                react_1.default.createElement("button", { className: "ql-table", value: "delete-col", disabled: disabled },
+                    react_1.default.createElement(IconTableDeleteCol_1.IconTableDeleteCol, { style: { width: 'auto' } })))); };
+        case TOOLBAR_OPTION.VARIABLE:
+            return function (disabled) { return (react_1.default.createElement("button", { className: "ql-createVariable f6 fw5" + (disabled ? '' : ' color-primary'), style: { width: '100%' }, disabled: disabled, type: "button", "aria-label": "Insert variable", title: "Insert variable" },
+                react_1.default.createElement(AddBox_1.default, { className: "ma0" }),
+                "Variable")); };
+        default:
+            throw new Error("Unsupported option: " + option);
+    }
+};
+var getToolbarSectionsForOptions = function (sectionOptionsArray) {
+    return sectionOptionsArray.map(function (sectionOptions, sectionIndex) {
+        return function (disabled) { return (react_1.default.createElement(react_1.default.Fragment, null, sectionOptions.map(function (sectionOption, optionIndex) { return (react_1.default.createElement(react_1.Fragment, { key: sectionIndex + "-" + optionIndex }, getToolbarSectionForOption(sectionOption)(disabled))); }))); };
+    });
+};
+// Following this example: https://codepen.io/alexkrolick/pen/gmroPj?editors=0010
+// All the options available here: https://github.com/quilljs/quill/blob/develop/docs/_includes/standalone/full.html
+var CustomToolbar = function (props) {
+    var guid = props.guid, sectionOptions = props.sectionOptions, moreSectionOptions = props.moreSectionOptions, className = props.className, disabled = props.disabled, reactQuillRef = props.reactQuillRef, isVisibleWhenDisabled = props.isVisibleWhenDisabled;
+    var _a = react_1.useState(false), isInitialized = _a[0], setIsInitialized = _a[1];
+    var _b = react_1.useState(false), isShowingMoreOptions = _b[0], setIsShowingMoreOptions = _b[1];
+    var ref = react_1.default.createRef();
+    react_1.useEffect(function () {
+        var _a;
+        // initialize the toolbar after reactQuill exists and the buttons are displayed (not disabled)
+        if (!isInitialized && reactQuillRef && !disabled) {
+            accessibilityFix_1.applyAccessibilityHacks(ref, reactQuillRef.getEditor());
+            // manually modify the table picker select svg icon
+            var label = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ql-table .ql-picker-label');
+            if (label) {
+                var svg = label.childNodes[0];
+                var polygons = svg.querySelectorAll('polygon');
+                polygons.forEach(function (polygon) {
+                    polygon.remove();
+                });
+                svg.setAttribute('viewBox', '0 0 24 24');
+                svg.classList.add('ql-fill');
+                var path = svg.querySelector('path');
+                if (!path) {
+                    var path_1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                    path_1.setAttribute('d', IconTable_1.mdiTable);
+                    svg.appendChild(path_1);
+                }
+            }
+            setIsInitialized(true);
+        }
+    }, [disabled, isInitialized, reactQuillRef, ref]);
+    var toolbarSections = react_1.useMemo(function () { return getToolbarSectionsForOptions(sectionOptions); }, [sectionOptions]);
+    var hasMoreOptions = !lodash_1.isUndefined(moreSectionOptions);
+    var moreToolbarSections = react_1.useMemo(function () { return (!lodash_1.isUndefined(moreSectionOptions) ? getToolbarSectionsForOptions(moreSectionOptions) : []); }, [moreSectionOptions]);
+    return (react_1.default.createElement("div", { id: "quill-toolbar-" + guid, className: "" + (className ? " " + className : '') + (disabled ? ' disabled' : '') + (!isVisibleWhenDisabled && disabled ? ' disabled-invisible' : ''), ref: ref }, (!disabled || (isVisibleWhenDisabled && isInitialized)) && (react_1.default.createElement(react_1.default.Fragment, null,
+        toolbarSections.map(function (section, i) { return (react_1.default.createElement("span", { className: "ql-formats", key: i }, section(disabled))); }),
+        hasMoreOptions && (react_1.default.createElement("button", { className: "more-options f6 fw5" + (isShowingMoreOptions ? ' expanded color-primary' : ''), type: "button", title: "More options", "aria-expanded": isShowingMoreOptions, onClick: function () { return setIsShowingMoreOptions(!isShowingMoreOptions); } },
+            react_1.default.createElement(MoreHoriz_1.default, { className: "ma0" }))),
+        // This is a sub-div so it's contained in the div with the id/guid for the forward ref.
+        // CSS handles appearance so it renders as if it were a sibling div.
+        hasMoreOptions && (react_1.default.createElement("div", { className: "more-options-toolbar ql-snow" + (isShowingMoreOptions ? ' expanded' : ' invisible'), "aria-hidden": !isShowingMoreOptions }, moreToolbarSections.map(function (section, i) { return (react_1.default.createElement("span", { className: "ql-formats", key: i }, section(disabled))); })))))));
+};
+exports.CustomToolbar = CustomToolbar;

package/lib/components/Quill/ImageMissingAltTextWarning.d.ts

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'react';
+export interface ImageMissingAltTextWarningProps {
+    className?: string;
+}
+export declare const ImageMissingAltTextWarning: FunctionComponent<ImageMissingAltTextWarningProps>;

package/lib/components/Quill/ImageMissingAltTextWarning.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageMissingAltTextWarning = void 0;
+var Warning_1 = __importDefault(require("@material-ui/icons/Warning"));
+var react_1 = __importDefault(require("react"));
+var ImageMissingAltTextWarning = function (_a) {
+    var className = _a.className;
+    return (react_1.default.createElement("p", { className: "small pv1 mv1" + (className ? " " + className : '') },
+        react_1.default.createElement(Warning_1.default, { className: "fill-orange nt1 mr1" }),
+        "One or more images are missing alt text. Use right-click to set alt text on images."));
+};
+exports.ImageMissingAltTextWarning = ImageMissingAltTextWarning;

package/lib/components/Quill/ImageWithAltTextModal.d.ts

@@ -0,0 +1,15 @@
+import { RangeStatic } from 'quill';
+import { FunctionComponent } from 'react';
+import ReactQuill from 'react-quill';
+import { ImageValue } from './Formats/Image';
+interface ImageWithAltTextProps {
+    isOpen: boolean;
+    imageToEdit?: ImageValue;
+    supportedImageExtensions: string[];
+    onClose: () => void;
+    fileSelector: HTMLInputElement;
+    reactQuillRef: ReactQuill | null;
+    range: RangeStatic | undefined;
+}
+export declare const ImageWithAltTextModal: FunctionComponent<ImageWithAltTextProps>;
+export {};

package/lib/components/Quill/ImageWithAltTextModal.js

@@ -0,0 +1,139 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageWithAltTextModal = void 0;
+var core_1 = require("@material-ui/core");
+var Help_1 = __importDefault(require("@material-ui/icons/Help"));
+var SwapVert_1 = __importDefault(require("@material-ui/icons/SwapVert"));
+var lodash_1 = require("lodash");
+var react_1 = __importStar(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var react_quill_1 = require("react-quill");
+var ConnectedModal_1 = __importDefault(require("../ConnectedModal"));
+var ErrorMessage_1 = require("../ErrorMessage");
+var Delta = react_quill_1.Quill.import('delta');
+var mdiUpload = 'M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z';
+var IconUpload = (react_1.default.createElement(core_1.SvgIcon, { role: "presentation" },
+    react_1.default.createElement("path", { d: mdiUpload })));
+var ImageWithAltTextModal = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, imageToEdit = _a.imageToEdit, supportedImageExtensions = _a.supportedImageExtensions, fileSelector = _a.fileSelector, reactQuillRef = _a.reactQuillRef, range = _a.range;
+    // setup state that is editable in the modal, based on the targeted image, if any
+    var _b = react_1.useState(imageToEdit === null || imageToEdit === void 0 ? void 0 : imageToEdit.alt), alt = _b[0], setAlt = _b[1];
+    var _c = react_1.useState(imageToEdit === null || imageToEdit === void 0 ? void 0 : imageToEdit.src), src = _c[0], setSrc = _c[1];
+    var _d = react_1.useState(false), isSelectedFileInvalid = _d[0], setIsSelectedFileInvalid = _d[1];
+    // update local state based on the targeted image, if any
+    react_1.useEffect(function () {
+        if (imageToEdit) {
+            setAlt(imageToEdit.alt);
+            setSrc(imageToEdit.src);
+        }
+    }, [imageToEdit]);
+    var onTryClose = function () {
+        setAlt(undefined);
+        setSrc(undefined);
+        // programmatically reset file selector
+        fileSelector.value = '';
+        onClose();
+    };
+    /** Use file selector to get an image */
+    var onClickImageUpload = function () {
+        // programmatically click to open the file upload dialog
+        fileSelector.click();
+        // when a file is selected
+        fileSelector.onchange = function () {
+            var _a;
+            if (fileSelector.files && ((_a = fileSelector.files) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                var file_1 = fileSelector.files[0];
+                // convert filename to lowercase to make file extension check not case sensitive
+                setIsSelectedFileInvalid(!supportedImageExtensions.some(function (e) { return file_1.name.toLocaleLowerCase().endsWith(e); }));
+                var reader = new FileReader();
+                reader.onload = function (e) {
+                    var _a;
+                    if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.DONE) {
+                        // result is image in base64
+                        setSrc(e.target.result);
+                        if (!alt)
+                            setAlt(file_1.name);
+                    }
+                };
+                // get the file as a dataURI in base64
+                reader.readAsDataURL(file_1);
+            }
+        };
+    };
+    /** insert Image into quill */
+    var insertImage = function () {
+        if (reactQuillRef) {
+            var quill = reactQuillRef.getEditor();
+            var imageToInsert = { src: src, alt: alt };
+            if (imageToEdit) {
+                imageToInsert.height = imageToEdit.height;
+                imageToInsert.width = imageToEdit.width;
+            }
+            var index = range ? range.index : 0;
+            var diff = new Delta();
+            // retain up until the selected range
+            diff.retain(index);
+            // remove the existing image, if any
+            if (imageToEdit) {
+                diff.delete(1);
+            }
+            // insert the new image
+            diff.insert({ image: imageToInsert });
+            quill.updateContents(diff, 'user');
+        }
+        onTryClose();
+    };
+    return (react_1.default.createElement(ConnectedModal_1.default, { show: isOpen, onHide: onTryClose },
+        react_1.default.createElement(react_bootstrap_1.Modal.Header, { closeButton: true },
+            react_1.default.createElement(react_bootstrap_1.Modal.Title, { className: "f4" }, imageToEdit ? "Edit Alt Text" : "Image Upload")),
+        react_1.default.createElement(react_bootstrap_1.Modal.Body, null,
+            react_1.default.createElement("p", { className: "mb2 f7" }, "* Indicates required field"),
+            src && !isSelectedFileInvalid && (react_1.default.createElement(react_bootstrap_1.Row, null,
+                react_1.default.createElement("img", { className: "mb2 h5", src: src, alt: alt }))),
+            react_1.default.createElement("div", { "aria-live": "polite", className: "f7 mb2" }, isSelectedFileInvalid && (react_1.default.createElement(ErrorMessage_1.ErrorMessage, { message: "The chosen file type is not supported. Please use one of the image formats listed below." }))),
+            !imageToEdit && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(core_1.Button, { className: "w-100-lt-xs pa2 mv1 btn-primary", onClick: onClickImageUpload },
+                    src ? react_1.default.createElement(SwapVert_1.default, null) : IconUpload,
+                    react_1.default.createElement("span", { className: "ml1" },
+                        src ? 'Change' : 'Upload',
+                        " Image")),
+                react_1.default.createElement("p", { className: "f7 mb3" }, "Supported formats: .jpg, .png, .gif, .bmp"))),
+            react_1.default.createElement(react_bootstrap_1.FormGroup, null,
+                react_1.default.createElement(react_bootstrap_1.Row, { className: "mb2" },
+                    react_1.default.createElement("h3", { className: "mv0" },
+                        react_1.default.createElement(react_bootstrap_1.FormLabel, { htmlFor: "img-alt-text", className: "mb0" },
+                            "Alt Text *",
+                            react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "top", trigger: ['hover', 'focus'], overlay: react_1.default.createElement(react_bootstrap_1.Popover, { id: "alt-text-explanation" },
+                                    react_1.default.createElement("p", { className: "mb0" }, "Used by screen readers to describe the content of an image.")) },
+                                react_1.default.createElement("button", { type: "button", className: "dib help-button bg-transparent" },
+                                    react_1.default.createElement(Help_1.default, { color: "primary", titleAccess: "Alt text explanation" })))))),
+                react_1.default.createElement(react_bootstrap_1.FormControl, { id: "img-alt-text", "aria-label": "Image Alt Text", as: "textarea", onChange: function (event) {
+                        setAlt(event.target.value);
+                    }, value: alt, spellCheck: false, autoComplete: "off", autoCorrect: "off" }))),
+        react_1.default.createElement(react_bootstrap_1.Modal.Footer, null,
+            react_1.default.createElement(core_1.Button, { className: "mr1 btn-text color-primary", onClick: onTryClose }, "Cancel"),
+            react_1.default.createElement(core_1.Button, { className: "btn-primary mb1", id: "save-image-button", onClick: insertImage, disabled: lodash_1.isEmpty(alt === null || alt === void 0 ? void 0 : alt.trim()) || lodash_1.isEmpty(src) || isSelectedFileInvalid }, "Save"))));
+};
+exports.ImageWithAltTextModal = ImageWithAltTextModal;

package/lib/components/Quill/TableModule/index.css

@@ -61,7 +61,7 @@
 		}
 
 		&:hover {
-			background-color: var(--color-purple);
+			background-color: var(--color-primary);
 
 			&::before {
 				color: var(--color-white);

package/lib/components/Quill/index.d.ts

@@ -1 +1,3 @@
 export declare const registerQuill: () => void;
+export declare const supportedFileExtensions: string[];
+export declare const buildFileSelector: () => HTMLInputElement;

package/lib/components/Quill/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerQuill = void 0;
+exports.buildFileSelector = exports.supportedFileExtensions = exports.registerQuill = void 0;
 var quill_blot_formatter_1 = __importDefault(require("quill-blot-formatter"));
 var react_quill_1 = require("react-quill");
 var accessibilityFix_1 = require("./accessibilityFix");
@@ -25,3 +25,12 @@ var registerQuill = function () {
     accessibilityFix_1.applyAccessibilityToIcons(react_quill_1.Quill.import('ui/icons'));
 };
 exports.registerQuill = registerQuill;
+exports.supportedFileExtensions = ['.png', '.jpeg', '.jpg', '.gif', '.bmp'];
+// Get the file dialog upload programmatically
+var buildFileSelector = function () {
+    var fileSelector = document.createElement('input');
+    fileSelector.setAttribute('type', 'file');
+    fileSelector.setAttribute('accept', exports.supportedFileExtensions.join(', '));
+    return fileSelector;
+};
+exports.buildFileSelector = buildFileSelector;

package/lib/css/components/_buttons.css

@@ -104,6 +104,11 @@ a[class*="btn-"]:active:focus {
 .btn-primary {
 	color: var(--color-white);
 	white-space: normal;
+	background-color: var(--color-primary);
+
+	&:hover {
+		background-color: color-mod(var(--color-primary) l(+7%) s(+15%));
+	}
 
 	&:active,
 	&:focus,
@@ -114,6 +119,7 @@ a[class*="btn-"]:active:focus {
 		outline-offset: -2px;
 		box-shadow: none;
 		color: var(--color-white);
+		background-color: var(--color-primary);
 	}
 }
 
@@ -133,18 +139,18 @@ a[class*="btn-"]:active:focus {
 
 /* Bad */
 .btn-bad {
-	background-color: var(--color-pink);
+	background-color: var(--color-error);
 	white-space: normal;
 
 	&:hover {
 		color: var(--color-white);
-		background-color: color-mod(var(--color-pink) l(+7%) s(+15%));
+		background-color: color-mod(var(--color-error) l(+7%) s(+15%));
 	}
 
 	&:active,
 	&:focus,
 	&:active:focus {
-		background-color: var(--color-pink);
+		background-color: var(--color-error);
 		color: var(--color-white);
 	}
 }
@@ -161,6 +167,11 @@ a[class*="btn-"]:active:focus {
 		margin-left: 0.5rem;
 	}
 
+	&.color-primary:hover {
+		color: var(--color-primary);
+		background-color: color-mod(var(--color-primary) a(4%));
+	}
+
 	&.color-purple:hover {
 		color: var(--color-purple);
 		background-color: color-mod(var(--color-purple) a(4%));
@@ -344,7 +355,7 @@ button.close > span {
 }
 
 .MuiSwitch-switchBase .MuiTouchRipple-root {
-	color: var(--color-blue);
+	color: var(--color-primary);
 }
 
 .MuiSwitch-switchBase.MuiSwitch-checked .MuiTouchRipple-root {
@@ -367,3 +378,20 @@ button.close > span {
 		}
 	}
 }
+
+.MuiToggleButton-root {
+	color: var(--color-primary);
+
+	&.Mui-selected {
+		background-color: var(--color-primary);
+		color: var(--color-white);
+
+		&:hover {
+			background-color: color-mod(var(--color-primary) l(+7%) s(+15%));
+		}
+
+		&:focus {
+			background-color: var(--color-primary);
+		}
+	}
+}

package/lib/css/components/_quill.css

@@ -0,0 +1,314 @@
+@custom-selector :--quill-typography h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote;
+@custom-selector :--quill-plaintext p, ol, ul;
+
+:root {
+	--quill-min-height: 10rem;
+	--quill-max-height: 60vh;
+	--quill-toolbars-height: 111px;
+}
+
+.quill {
+	margin-bottom: 15px;
+}
+
+/* Loader */
+
+.quill-loader {
+	min-height: calc(var(--quill-min-height) + var(--quill-toolbars-height));
+	max-height: calc(var(--quill-max-height) + var(--quill-toolbars-height));
+	position: relative;
+	border: 1px solid var(--color-light-grey);
+}
+
+.quill-loader-inner {
+	position: absolute;
+	top: calc(50% - 20px - 1.25rem);
+	left: calc(50% - 20px);
+}
+
+/* Editor */
+
+.ql-editor {
+	background-color: var(--color-white);
+	min-height: var(--quill-min-height);
+	max-height: var(--quill-max-height);
+	overflow: auto;
+
+	& :--quill-typography {
+		margin-bottom: 1.1rem;
+	}
+
+	& :--quill-plaintext {
+		font-size: 1rem;
+	}
+}
+
+/* Expandable toolbar */
+
+.more-options {
+	float: right !important;
+	padding: 0 0 0 2px !important;
+	height: 30px !important;
+
+	&.expanded {
+		background: var(--color-light-grey) !important;
+	}
+}
+
+.more-options-toolbar {
+	border-top: 0 solid var(--color-light-grey);
+	margin: 0;
+	padding: 0;
+	height: 0;
+	transition: border-top linear 0.05s, margin linear 0.3s, padding linear 0.3s, height linear 0.3s, visibility linear 0.5s;
+
+	& .ql-formats {
+		opacity: 0;
+		transition: opacity linear 0.3s;
+	}
+
+	&.expanded {
+		border-top: 1px solid var(--color-light-grey);
+		margin: 0.6rem -0.6rem 0;
+		padding: 0.6rem 0.6rem 0;
+		height: 36px;
+
+		& .ql-formats {
+			opacity: 1;
+		}
+	}
+}
+
+/* Toolbar */
+
+.ql-toolbar.ql-snow {
+	padding: 0.6rem;
+
+	&.disabled-invisible {
+		padding: 0;
+		height: 0;
+		border-bottom: none;
+	}
+
+	&.read-only {
+		background-color: var(--color-off-white);
+		padding-top: 1rem;
+	}
+
+	&.Inline {
+		background-color: var(--color-white);
+		border-style: none;
+		padding-left: 2px;
+		padding-top: 1.2rem;
+		border-top-right-radius: 0.5rem;
+		border-bottom-right-radius: 0.5rem;
+
+		&.read-only {
+			background-color: var(--color-off-white);
+		}
+	}
+}
+
+.ql-container.ql-snow {
+	border-top: none;
+	overflow: visible;
+}
+
+.ql-toolbar.ql-snow .ql-formats {
+	margin-right: 10px;
+
+	&:last-child {
+		margin-right: 0;
+	}
+}
+
+/* Align */
+
+.ql-align svg {
+	float: left;
+}
+
+/* Alpha Ordered List */
+
+.ql-editor ol[data-value="alpha"] > li {
+	&::before {
+		content: counter(list-0, lower-alpha) '. ';
+	}
+
+	&.ql-indent-1::before {
+		content: counter(list-1, lower-roman) '. ';
+	}
+
+	&.ql-indent-2::before {
+		content: counter(list-2, decimal) '. ';
+	}
+
+	&.ql-indent-3::before {
+		content: counter(list-3, lower-alpha) '. ';
+	}
+
+	&.ql-indent-4::before {
+		content: counter(list-4, lower-roman) '. ';
+	}
+
+	&.ql-indent-5::before {
+		content: counter(list-5, decimal) '. ';
+	}
+
+	&.ql-indent-6::before {
+		content: counter(list-6, lower-alpha) '. ';
+	}
+
+	&.ql-indent-7::before {
+		content: counter(list-7, lower-roman) '. ';
+	}
+
+	&.ql-indent-8::before {
+		content: counter(list-8, decimal) '. ';
+	}
+}
+
+/* Images */
+
+.ql-snow .ql-editor img {
+	max-width: 100%;
+	object-fit: contain;
+}
+
+/* Disabled and Read Only */
+
+.ql-disabled {
+	& .ql-editor {
+		background-color: var(--color-off-white);
+	}
+}
+
+.blurred-editor {
+	overflow-y: auto;
+
+	& .ql-editor {
+		min-height: auto;
+		max-height: none;
+		padding: 0;
+		background-color: var(--color-white);
+	}
+
+	& .ql-toolbar {
+		display: none;
+	}
+
+	& .ql-container.ql-snow {
+		border: none;
+	}
+}
+
+/* stylelint-disable no-descending-specificity */
+.ql-snow.ql-toolbar,
+.ql-snow .ql-toolbar {
+	/* Hover/Focus/Active overrides */
+	& button:hover,
+	& button:focus,
+	& button.ql-active,
+	& .ql-picker-label:hover,
+	& .ql-picker-label:focus,
+	& .ql-picker-label.ql-active,
+	& .ql-picker-item:hover,
+	& .ql-picker-item:focus,
+	& .ql-picker-item.ql-selected {
+		color: var(--color-primary) !important;
+
+		& .ql-fill,
+		& .ql-stroke.ql-fill {
+			fill: var(--color-primary) !important;
+		}
+
+		& .ql-stroke {
+			stroke: var(--color-primary) !important;
+		}
+	}
+
+	/* Focus overrides */
+	& button:focus,
+	& button.ql-active,
+	& .ql-picker-label:focus,
+	& .ql-picker-label.ql-active,
+	& .ql-picker-item:focus,
+	& .ql-picker-item.ql-selected {
+		outline: 2px solid var(--color-primary) !important;
+	}
+
+	/* Disabled overrides */
+	& .ql-formula:disabled,
+	& button:disabled,
+	& button:hover:disabled,
+	& button:focus:disabled,
+	& button.ql-active:disabled {
+		color: #777 !important;
+		cursor: default;
+
+		& svg {
+			cursor: default;
+		}
+
+		& .ql-fill,
+		& .ql-stroke.ql-fill {
+			fill: #777 !important;
+			cursor: default;
+		}
+
+		& .ql-stroke {
+			stroke: #777 !important;
+		}
+	}
+}
+
+/* Inline - display with no background */
+
+.quill.inline {
+	margin-bottom: 0;
+
+	& .ql-container {
+		background-color: transparent;
+	}
+
+	& .ql-editor {
+		background-color: transparent;
+		padding: 0.5rem 0;
+	}
+
+	& p:last-of-type {
+		margin-bottom: 0;
+	}
+}
+
+/* Hide line break in otherwise empty paragraph immediately preceded by a list */
+.quill.blurred-editor {
+	& ol ~ p br:only-child,
+	& ul ~ p br:only-child {
+		display: none;
+	}
+}
+
+.quill:focus-within {
+	border-color: #80bdff;
+	box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
+	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+	position: relative;
+	z-index: 1;
+
+	& .ql-container.ql-snow {
+		border-color: #80bdff;
+		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+	}
+}
+
+.error {
+	& .quill:focus-within {
+		border-color: var(--color-red);
+		box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%);
+
+		& .ql-container.ql-snow {
+			border-color: var(--color-red);
+		}
+	}
+}

package/lib/css/utils/_color.css

@@ -90,6 +90,20 @@
 	color: var(--color-green);
 }
 
+/* Theme Colors */
+
+.color-primary {
+	color: var(--color-primary);
+}
+
+.color-error {
+	color: var(--color-error);
+}
+
+.color-success {
+	color: var(--color-success);
+}
+
 /* Background Colors */
 
 .bg-color-black {
@@ -180,6 +194,18 @@
 	background-color: var(--color-green);
 }
 
+.bg-color-primary {
+	background-color: var(--color-primary);
+}
+
+.bg-color-error {
+	background-color: var(--color-error);
+}
+
+.bg-color-success {
+	background-color: var(--color-success);
+}
+
 /* Custom Fill Colors */
 
 .fill-black {
@@ -269,3 +295,15 @@
 .fill-green {
 	fill: var(--color-green);
 }
+
+.fill-primary {
+	fill: var(--color-primary);
+}
+
+.fill-error {
+	fill: var(--color-error);
+}
+
+.fill-success {
+	fill: var(--color-success);
+}

package/lib/css/variables.css

@@ -47,6 +47,14 @@
 	--color-red: #c93d44;
 	--color-green: #7bcf64;
 
+	/**
+	 * Themed Colors
+	 * These will be customized per app
+	 */
+	--color-primary: var(--color-blue);
+	--color-error: var(--color-red);
+	--color-success: var(--color-green);
+
 	/* Border Radius */
 	--border-radius: 3px;
 }

package/lib/types/Quill.d.ts

@@ -0,0 +1,9 @@
+import { BoundsStatic, DeltaStatic, RangeStatic } from 'quill';
+export interface UnprivilegedEditor {
+    getLength(): number;
+    getText(index?: number, length?: number): string;
+    getHTML(): string;
+    getBounds(index: number, length?: number): BoundsStatic;
+    getSelection(focus?: boolean): RangeStatic;
+    getContents(index?: number, length?: number): DeltaStatic;
+}

package/lib/types/Quill.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/types/index.d.ts

@@ -13,6 +13,7 @@ export * from './Notification';
 export * from './OptionalRecord';
 export * from './OwnerSchedule';
 export * from './PropertyOfType';
+export * from './Quill';
 export * from './RoleDescription';
 export * from './Search';
 export * from './SimpleLocation';

package/lib/types/index.js

@@ -25,6 +25,7 @@ __exportStar(require("./Notification"), exports);
 __exportStar(require("./OptionalRecord"), exports);
 __exportStar(require("./OwnerSchedule"), exports);
 __exportStar(require("./PropertyOfType"), exports);
+__exportStar(require("./Quill"), exports);
 __exportStar(require("./RoleDescription"), exports);
 __exportStar(require("./Search"), exports);
 __exportStar(require("./SimpleLocation"), exports);

package/lib/utils/quill.d.ts

@@ -0,0 +1,9 @@
+import { DeltaStatic } from 'quill';
+/**
+ * Find whether there are any image operations without alt text in the provided quill contents.
+ *
+ * @param contents The contents of quill.
+ *
+ * @returns True if there are any images without alt text
+ */
+export declare const hasSomeMissingAltText: (contents: DeltaStatic) => boolean;

package/lib/utils/quill.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasSomeMissingAltText = void 0;
+/**
+ * Find whether there are any image operations without alt text in the provided quill contents.
+ *
+ * @param contents The contents of quill.
+ *
+ * @returns True if there are any images without alt text
+ */
+var hasSomeMissingAltText = function (contents) { var _a; return ((_a = contents.ops) === null || _a === void 0 ? void 0 : _a.some(function (op) { var _a, _b, _c; return ((_a = op.insert) === null || _a === void 0 ? void 0 : _a.image) && !((_c = (_b = op.insert) === null || _b === void 0 ? void 0 : _b.image.alt) === null || _c === void 0 ? void 0 : _c.trim()); })) || false; };
+exports.hasSomeMissingAltText = hasSomeMissingAltText;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "4.9.0-next.2.1",
+	"version": "4.10.0",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",
@@ -136,7 +136,7 @@
 		"react-ga": "^3.3.0",
 		"react-helmet": "^6.1.0",
 		"react-modal": "^3.12.1",
-		"react-quill": "^1.3.5",
+		"react-quill": "purdue-tlt/react-quill#fix/auto-focus",
 		"react-redux": "^7.2.2",
 		"react-router": "^5.2.0",
 		"react-router-bootstrap": "^0.25.0",