studiokit-scaffolding-js 4.5.2 → 4.5.3

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

@@ -0,0 +1,171 @@
+.ql-snow .ql-editor .table-container {
+	margin-bottom: 1rem;
+}
+
+.ql-snow .ql-editor table {
+	border-collapse: collapse;
+	width: fit-content;
+
+	& td {
+		border: 1px solid black;
+		padding: 5px;
+		vertical-align: top;
+	}
+
+	& img {
+		max-width: fit-content;
+	}
+}
+
+.ql-table.dn {
+	display: none !important;
+}
+
+.ql-picker.ql-table {
+	font-size: 11px;
+	font-weight: normal;
+
+	& .ql-picker-label {
+		display: block;
+		width: 28px;
+		height: 24px;
+		padding: 1px 4px;
+
+		& svg {
+			position: static !important;
+			margin: 0 !important;
+		}
+	}
+
+	& .ql-picker-options {
+		width: 178px;
+	}
+
+	& .ql-picker-item {
+		display: block;
+		float: left;
+		width: 30px;
+		height: 30px;
+		line-height: 30px;
+		text-align: center;
+		padding: 0;
+		margin: 1px;
+		border: 1px solid #444;
+		color: #444;
+
+		&:nth-child(5)::after {
+			clear: both;
+			display: block;
+			content: "";
+			width: 100%;
+		}
+
+		&:hover {
+			background-color: var(--color-purple);
+
+			&::before {
+				color: var(--color-white);
+			}
+		}
+	}
+}
+
+.ql-picker-item[data-value=newtable_1_1]::before {
+	content: "1x1";
+}
+
+.ql-picker-item[data-value=newtable_1_2]::before {
+	content: "1x2";
+}
+
+.ql-picker-item[data-value=newtable_1_3]::before {
+	content: "1x3";
+}
+
+.ql-picker-item[data-value=newtable_1_4]::before {
+	content: "1x4";
+}
+
+.ql-picker-item[data-value=newtable_1_5]::before {
+	content: "1x5";
+}
+
+.ql-picker-item[data-value=newtable_2_1]::before {
+	content: "2x1";
+}
+
+.ql-picker-item[data-value=newtable_2_2]::before {
+	content: "2x2";
+}
+
+.ql-picker-item[data-value=newtable_2_3]::before {
+	content: "2x3";
+}
+
+.ql-picker-item[data-value=newtable_2_4]::before {
+	content: "2x4";
+}
+
+.ql-picker-item[data-value=newtable_2_5]::before {
+	content: "2x5";
+}
+
+.ql-picker-item[data-value=newtable_3_1]::before {
+	content: "3x1";
+}
+
+.ql-picker-item[data-value=newtable_3_2]::before {
+	content: "3x2";
+}
+
+.ql-picker-item[data-value=newtable_3_3]::before {
+	content: "3x3";
+}
+
+.ql-picker-item[data-value=newtable_3_4]::before {
+	content: "3x4";
+}
+
+.ql-picker-item[data-value=newtable_3_5]::before {
+	content: "3x5";
+}
+
+.ql-picker-item[data-value=newtable_4_1]::before {
+	content: "4x1";
+}
+
+.ql-picker-item[data-value=newtable_4_2]::before {
+	content: "4x2";
+}
+
+.ql-picker-item[data-value=newtable_4_3]::before {
+	content: "4x3";
+}
+
+.ql-picker-item[data-value=newtable_4_4]::before {
+	content: "4x4";
+}
+
+.ql-picker-item[data-value=newtable_4_5]::before {
+	content: "4x5";
+}
+
+.ql-picker-item[data-value=newtable_5_1]::before {
+	content: "5x1";
+}
+
+.ql-picker-item[data-value=newtable_5_2]::before {
+	content: "5x2";
+}
+
+.ql-picker-item[data-value=newtable_5_3]::before {
+	content: "5x3";
+}
+
+.ql-picker-item[data-value=newtable_5_4]::before {
+	content: "5x4";
+}
+
+.ql-picker-item[data-value=newtable_5_5]::before {
+	content: "5x5";
+}

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

@@ -0,0 +1,23 @@
+import { RangeStatic } from 'quill';
+import { Quill } from 'react-quill';
+import { TableBlot } from './Blots/TableBlot';
+import { TableCellBlot } from './Blots/TableCellBlot';
+export declare class TableModule {
+    static register(): void;
+    quill: Quill;
+    options: any;
+    tableToolbarControls: HTMLElement[];
+    constructor(quill: Quill, options: any);
+    showOrHideToolbarControls: () => void;
+    handleBackspace: (range: RangeStatic, context: any) => boolean;
+    handleDelete: (range: RangeStatic, context: any) => boolean;
+    handleDeleteRange: (range: RangeStatic) => boolean;
+    getSelectedCell(): TableCellBlot | null;
+    getSelectedTable(): TableBlot | undefined;
+    tableHandler(action: string): void;
+    addNewTable(action: string, range: RangeStatic): void;
+    insertCol(selectedCell: TableCellBlot, range: RangeStatic): void;
+    insertRow(selectedCell: TableCellBlot, range: RangeStatic): void;
+    deleteCol(selectedCell: TableCellBlot): void;
+    deleteRow(selectedCell: TableCellBlot): void;
+}

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

@@ -0,0 +1,312 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableModule = void 0;
+var lodash_1 = require("lodash");
+var react_quill_1 = require("react-quill");
+var logger_1 = require("../../../utils/logger");
+var BaseTableBlot_1 = require("./Blots/BaseTableBlot");
+var TableBlot_1 = require("./Blots/TableBlot");
+var TableBodyBlot_1 = require("./Blots/TableBodyBlot");
+var TableCellBlot_1 = require("./Blots/TableCellBlot");
+var TableContainer_1 = require("./Blots/TableContainer");
+var TableRowBlot_1 = require("./Blots/TableRowBlot");
+var constants_1 = require("./constants");
+var utils_1 = require("./utils");
+var Delta = react_quill_1.Quill.import('delta');
+var Scroll = react_quill_1.Quill.import('blots/scroll');
+var TableModule = /** @class */ (function () {
+    function TableModule(quill, options) {
+        var _this = this;
+        this.tableToolbarControls = [];
+        //#region Helpers
+        this.showOrHideToolbarControls = function () {
+            var selectedCell = _this.getSelectedCell();
+            if (selectedCell) {
+                _this.tableToolbarControls.forEach(function (domNode) {
+                    domNode.classList.remove('dn');
+                });
+            }
+            else {
+                _this.tableToolbarControls.forEach(function (domNode) {
+                    domNode.classList.add('dn');
+                });
+            }
+        };
+        this.handleBackspace = function (range, context) {
+            if (range.index === 0 || _this.quill.getLength() <= 1)
+                return true;
+            var line = _this.quill.getLine(range.index)[0];
+            if (context.offset === 0 && utils_1.isLineAfterTable(line)) {
+                logger_1.getLogger().debug('prevent backspace after table', { range: range, context: context, line: line });
+                return false;
+            }
+            // if inside a TableCellBlot and at the start of the cell
+            // prevent "backspace" from removing previous cell
+            // or items before the table if in the first cell
+            if (
+            // in a cell
+            utils_1.isLineInTableCell(line) &&
+                // at the start of the cell
+                context.offset === 0 &&
+                !line.prev &&
+                // there is a cell before this one in the row
+                ((line.parent.prev && line.parent.prev instanceof TableCellBlot_1.TableCellBlot) ||
+                    // or the cell is at the start of a row
+                    !line.parent.prev)) {
+                logger_1.getLogger().debug('prevent cell backspace', { range: range, context: context, line: line });
+                return false;
+            }
+            return true;
+        };
+        this.handleDelete = function (range, context) {
+            var length = /^[\uD800-\uDBFF][\uDC00-\uDFFF]/.test(context.suffix) ? 2 : 1;
+            if (range.index >= _this.quill.getLength() - length)
+                return true;
+            var line = _this.quill.getLine(range.index)[0];
+            if (context.offset === line.length() - 1 && utils_1.isLineBeforeTable(line)) {
+                logger_1.getLogger().debug('prevent delete before table', { range: range, context: context, line: line });
+                return false;
+            }
+            // if inside a TableCellBlot and at the end of the cell
+            // prevent "delete" from removing the next cell
+            // or items after the table if in the last cell
+            if (
+            // in a cell
+            utils_1.isLineInTableCell(line) &&
+                // at the end of the cell
+                !line.next &&
+                context.offset === line.length() - 1 &&
+                // there is a cell after this one in the row
+                ((line.parent.next && line.parent.next instanceof TableCellBlot_1.TableCellBlot) ||
+                    // or the cell is at the start of a row
+                    !line.parent.next)) {
+                logger_1.getLogger().debug('prevent cell delete', { range: range, context: context, line: line });
+                return false;
+            }
+            return true;
+        };
+        this.handleDeleteRange = function (range) {
+            var lines = _this.quill.getLines(range);
+            logger_1.getLogger().debug('handleDeleteRange', { range: range, lines: lines });
+            var willDeleteCellWithoutRow = utils_1.rangeRemovalWillDeleteCellWithoutRow(_this.quill, range);
+            if (willDeleteCellWithoutRow) {
+                logger_1.getLogger().debug('prevent delete cell out of row');
+            }
+            return !willDeleteCellWithoutRow;
+        };
+        this.quill = quill;
+        this.options = options;
+        // Define Toolbar Handler
+        var toolbar = quill.getModule('toolbar');
+        if (toolbar) {
+            toolbar.addHandler('table', function (action) {
+                return _this.tableHandler(action);
+            });
+            // by default, hide all table controls
+            toolbar.controls.forEach(function (control) {
+                var name = control[0], domNode = control[1];
+                if (name === 'table' && domNode.tagName === 'BUTTON') {
+                    _this.tableToolbarControls.push(domNode);
+                    domNode.classList.add('dn');
+                }
+            });
+        }
+        this.quill.on('editor-change', this.showOrHideToolbarControls);
+        this.quill.on('selection-change', this.showOrHideToolbarControls);
+        // Define Clipboard Matchers
+        // When HTML is loaded or pasted into Quill, the matchers
+        // will find the given HTML Tag and allow the delta for the element's
+        // content to be modified.
+        var clipboard = quill.getModule('clipboard');
+        if (clipboard) {
+            clipboard.addMatcher(constants_1.TAG_NAME.TD, function (node, delta) {
+                logger_1.getLogger().debug(constants_1.TAG_NAME.TD + " matched", { node: node, delta: delta });
+                // load the table cell attribute to use as the delta operation attributes
+                var dataValue = node.getAttribute(constants_1.ATTRIBUTE.DATA_VALUE);
+                var defaultAttributes = {
+                    td: dataValue
+                };
+                // handle empty cells, insert a single block / paragraph
+                if (delta.length() === 0) {
+                    var updatedDelta_1 = new Delta().insert('\n', defaultAttributes);
+                    logger_1.getLogger().debug(constants_1.TAG_NAME.TD + " matched - final delta (empty cell)", updatedDelta_1);
+                    return updatedDelta_1;
+                }
+                // for each operation inside the cell's delta, add the table cell attributes
+                var updatedDelta = delta.reduce(function (newDelta, op) {
+                    newDelta.insert(op.insert, lodash_1.merge({}, op.attributes, defaultAttributes));
+                    return newDelta;
+                }, new Delta());
+                logger_1.getLogger().debug(constants_1.TAG_NAME.TD + " matched - final delta", updatedDelta);
+                return updatedDelta;
+            });
+        }
+        // Override "backspace" and "delete" actions that would delete or combine a table cell
+        var keyboard = quill.getModule('keyboard');
+        if (keyboard) {
+            keyboard.addBinding({ key: constants_1.KEY.BACKSPACE }, { collapsed: false }, this.handleDeleteRange);
+            // move binding to first position
+            var backspaceRangeBinding = keyboard.bindings[constants_1.KEY.BACKSPACE].pop();
+            keyboard.bindings[constants_1.KEY.BACKSPACE].splice(0, 0, backspaceRangeBinding);
+            keyboard.addBinding({ key: constants_1.KEY.BACKSPACE }, { collapsed: true }, this.handleBackspace);
+            // move binding to first position
+            var backspaceBinding = keyboard.bindings[constants_1.KEY.BACKSPACE].pop();
+            keyboard.bindings[constants_1.KEY.BACKSPACE].splice(0, 0, backspaceBinding);
+            keyboard.addBinding({ key: constants_1.KEY.DELETE }, { collapsed: false }, this.handleDeleteRange);
+            // move binding to first position
+            var deleteRangeBinding = keyboard.bindings[constants_1.KEY.DELETE].pop();
+            keyboard.bindings[constants_1.KEY.DELETE].splice(0, 0, deleteRangeBinding);
+            keyboard.addBinding({ key: constants_1.KEY.DELETE }, { collapsed: true }, this.handleDelete);
+            // move binding to first position
+            var deleteBinding = keyboard.bindings[constants_1.KEY.DELETE].pop();
+            keyboard.bindings[constants_1.KEY.DELETE].splice(0, 0, deleteBinding);
+        }
+    }
+    TableModule.register = function () {
+        react_quill_1.Quill.register(BaseTableBlot_1.BaseTableBlot);
+        react_quill_1.Quill.register(TableCellBlot_1.TableCellBlot);
+        react_quill_1.Quill.register(TableRowBlot_1.TableRowBlot);
+        react_quill_1.Quill.register(TableBodyBlot_1.TableBodyBlot);
+        react_quill_1.Quill.register(TableBlot_1.TableBlot);
+        react_quill_1.Quill.register(TableContainer_1.TableContainerBlot);
+    };
+    TableModule.prototype.getSelectedCell = function () {
+        var selection = this.quill.getSelection();
+        if (!selection) {
+            return null;
+        }
+        var leaf = this.quill.getLeaf(selection.index);
+        var blot = leaf[0];
+        while (blot && !(blot instanceof TableCellBlot_1.TableCellBlot) && blot.parent) {
+            blot = blot.parent;
+        }
+        if (blot instanceof TableCellBlot_1.TableCellBlot) {
+            return blot;
+        }
+        return null;
+    };
+    TableModule.prototype.getSelectedTable = function () {
+        var _a;
+        return (_a = this.getSelectedCell()) === null || _a === void 0 ? void 0 : _a.table();
+    };
+    //#endregion Helpers
+    //#region Table Handler
+    TableModule.prototype.tableHandler = function (action) {
+        logger_1.getLogger().debug('tableHandler', action);
+        // require a selection range
+        var range = this.quill.getSelection();
+        if (!range)
+            return;
+        if (action.includes(constants_1.TABLE_ACTION.NEW_TABLE)) {
+            this.addNewTable(action, range);
+            return;
+        }
+        // require a selected cell
+        var selectedCell = this.getSelectedCell();
+        if (!selectedCell)
+            return;
+        switch (action) {
+            case constants_1.TABLE_ACTION.INSERT_COL:
+                this.insertCol(selectedCell, range);
+                break;
+            case constants_1.TABLE_ACTION.INSERT_ROW:
+                this.insertRow(selectedCell, range);
+                break;
+            case constants_1.TABLE_ACTION.DELETE_COL:
+                this.deleteCol(selectedCell);
+                break;
+            case constants_1.TABLE_ACTION.DELETE_ROW:
+                this.deleteRow(selectedCell);
+                break;
+        }
+    };
+    TableModule.prototype.addNewTable = function (action, range) {
+        var index = range.index;
+        // e.g. "new-table-2-2"
+        var sizes = action.replace(constants_1.TABLE_ACTION.NEW_TABLE, '').split('_');
+        var rows = parseInt(sizes[0]);
+        var cols = parseInt(sizes[1]);
+        var tableContainer = TableContainer_1.TableContainerBlot.createWithChildren(rows, cols);
+        // insert the table into the top level scroll element
+        // before the current leaf's top level branch
+        // PREVENT NESTED TABLES
+        var topBranch = null;
+        var leaf = this.quill.getLeaf(index);
+        var blot = leaf[0];
+        while (blot && blot.parent && !(blot instanceof Scroll)) {
+            topBranch = blot;
+            blot = blot.parent;
+        }
+        if (!blot || !(blot instanceof Scroll))
+            return;
+        blot.insertBefore(tableContainer, topBranch || undefined);
+        this.quill.setSelection(tableContainer.offset(this.quill.scroll), 0, 'user');
+    };
+    TableModule.prototype.insertCol = function (selectedCell, range) {
+        var _a;
+        var selectedCellColumn = selectedCell.column();
+        var tableId = selectedCell.tableId();
+        var tableBody = (_a = selectedCell.row()) === null || _a === void 0 ? void 0 : _a.tableBody();
+        if (!tableBody)
+            return;
+        tableBody.children.forEach(function (child) {
+            var tableRow = child;
+            var rowId = tableRow.id();
+            var tableCell = TableCellBlot_1.TableCellBlot.createWithChildren(tableId, rowId);
+            var cells = tableRow.children.map(function (c) { return c; });
+            var nextColumnCell = cells.length > selectedCellColumn - 1 ? cells[selectedCellColumn] : undefined;
+            if (nextColumnCell) {
+                tableRow.insertBefore(tableCell, nextColumnCell);
+            }
+            else {
+                tableRow.appendChild(tableCell);
+            }
+        });
+    };
+    TableModule.prototype.insertRow = function (selectedCell, range) {
+        var currentRow = selectedCell.row();
+        if (!currentRow)
+            return;
+        var nextRow = currentRow.next;
+        var tableBody = currentRow.tableBody();
+        if (!tableBody)
+            return;
+        var newRow = TableRowBlot_1.TableRowBlot.createFromReference(currentRow);
+        if (nextRow) {
+            tableBody.insertBefore(newRow, nextRow);
+        }
+        else {
+            tableBody.appendChild(newRow);
+        }
+    };
+    TableModule.prototype.deleteCol = function (selectedCell) {
+        var _a;
+        var selectedCellColumn = selectedCell.column();
+        var tableBody = (_a = selectedCell.row()) === null || _a === void 0 ? void 0 : _a.tableBody();
+        if (!tableBody)
+            return;
+        tableBody.children.forEach(function (c) {
+            var tableRow = c;
+            var cells = tableRow.children.map(function (c) { return c; });
+            var cell = cells[selectedCellColumn - 1];
+            cell === null || cell === void 0 ? void 0 : cell.remove();
+        });
+    };
+    TableModule.prototype.deleteRow = function (selectedCell) {
+        var selectedRow = selectedCell.row();
+        if (!selectedRow)
+            return;
+        var cellOffset = selectedCell.offset(); // offset inside row
+        var tableBody = selectedRow.tableBody();
+        var rowToSelectAfter = selectedRow.next || selectedRow.prev;
+        // delete the row
+        selectedRow.remove();
+        // focus the next row or prev row if possible
+        if (tableBody && tableBody.children.length > 0 && rowToSelectAfter) {
+            var index = rowToSelectAfter.offset(this.quill.scroll);
+            this.quill.setSelection(index + cellOffset, 0);
+        }
+    };
+    return TableModule;
+}());
+exports.TableModule = TableModule;

package/lib/components/Quill/TableModule/utils.d.ts

@@ -0,0 +1,9 @@
+import { Blot } from 'parchment/dist/src/blot/abstract/blot';
+import { RangeStatic } from 'quill';
+import { Quill } from 'react-quill';
+export declare const isInstanceOfBlot: (blot: Blot, blotName: string) => boolean;
+export declare const isLineInTableCell: (line: Blot) => boolean;
+export declare const isLineBeforeTable: (line: Blot) => boolean;
+export declare const isLineAfterTable: (line: Blot) => boolean;
+export declare const rangeRemovalWillDeleteCellWithoutRow: (quill: Quill, range: RangeStatic) => boolean;
+export declare function newId(prefix: string): string;

package/lib/components/Quill/TableModule/utils.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.newId = exports.rangeRemovalWillDeleteCellWithoutRow = exports.isLineAfterTable = exports.isLineBeforeTable = exports.isLineInTableCell = exports.isInstanceOfBlot = void 0;
+var logger_1 = require("../../../utils/logger");
+var constants_1 = require("./constants");
+var isInstanceOfBlot = function (blot, blotName) { return blot.statics.blotName === blotName; };
+exports.isInstanceOfBlot = isInstanceOfBlot;
+var isLineInTableCell = function (line) { return line.parent && exports.isInstanceOfBlot(line.parent, constants_1.TABLE_BLOT_NAME.TD); };
+exports.isLineInTableCell = isLineInTableCell;
+var isLineBeforeTable = function (line) {
+    return line.next && exports.isInstanceOfBlot(line.next, constants_1.TABLE_BLOT_NAME.TABLE_CONTAINER);
+};
+exports.isLineBeforeTable = isLineBeforeTable;
+var isLineAfterTable = function (line) {
+    return line.prev && exports.isInstanceOfBlot(line.parent, constants_1.TABLE_BLOT_NAME.TABLE_CONTAINER);
+};
+exports.isLineAfterTable = isLineAfterTable;
+var rangeRemovalWillDeleteCellWithoutRow = function (quill, range) {
+    var lines = quill.getLines(range);
+    var willDeleteCellWithoutRow = lines.some(function (line) {
+        if (exports.isLineInTableCell(line)) {
+            var cell = line.parent;
+            var cellOffset = cell.offset(quill.scroll);
+            var cellLength = cell.length();
+            var willDeleteCell = 
+            // starts in cell and goes out of cell, or is exactly the cell
+            (range.index >= cellOffset && range.index + range.length >= cellOffset + cellLength) ||
+                // starts before cell and stops in cell
+                (range.index < cellOffset && range.index + range.length < cellOffset + cellLength);
+            var row = cell.row();
+            if (!row)
+                return false;
+            var rowOffset = row.offset(quill.scroll);
+            var rowLength = row.length();
+            var willDeleteRow = range.index <= rowOffset && range.index + range.length >= rowOffset + rowLength;
+            logger_1.getLogger().debug('rangeRemovalWillDeleteCellWithoutRow line', {
+                range: range,
+                line: line,
+                cellOffset: cellOffset,
+                cellLength: cellLength,
+                willDeleteCell: willDeleteCell,
+                willDeleteRow: willDeleteRow
+            });
+            return willDeleteCell && !willDeleteRow;
+        }
+        return false;
+    }, {});
+    return willDeleteCellWithoutRow;
+};
+exports.rangeRemovalWillDeleteCellWithoutRow = rangeRemovalWillDeleteCellWithoutRow;
+function newId(prefix) {
+    return prefix + "-" + Math.random().toString(36).slice(2, 6);
+}
+exports.newId = newId;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Quill } from 'react-quill';
+/**
+ * Apply aria-labels to the icons from the quill text editor
+ * Imports the icons from Quill, recursively go through each icon and get the <svg /> html.
+ * Then it sets a <label /> between the <svg />
+ * Using css, it hides the label content.
+ *
+ * @param {*} icons The object that includes all the icons from Quill
+ */
+export declare function applyAccessibilityToIcons(icons: any): void;
+/**
+ * Grabs the DOM from the toolbar reference and loop through each button, picker, and dropdowns adding accessibility values
+ * Help from: https://github.com/quilljs/quill/issues/1173
+ *
+ * @param toolbarRef: reference to the div containing our custom Quill toolbar
+ * @param editor: reference to the Quill editor
+ */
+export declare function applyAccessibilityHacks(toolbarRef: React.RefObject<HTMLDivElement>, editor: Quill): void;