studiokit-scaffolding-js 4.5.2 → 4.5.3

package/lib/components/Quill/accessibilityFix.js

@@ -0,0 +1,267 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyAccessibilityHacks = exports.applyAccessibilityToIcons = void 0;
+var lodash_1 = require("lodash");
+var constants_1 = require("./TableModule/constants");
+/**
+ * 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
+ */
+function applyAccessibilityToIcons(icons) {
+    lodash_1.forEach(icons, function (value, key) {
+        // if the value is an object, recursively call this function
+        if (lodash_1.isPlainObject(value)) {
+            applyAccessibilityToIcons(value);
+        }
+        // if the value is a string, i.e, "<svg></svg>", then it adds the label
+        if (lodash_1.isString(value)) {
+            var regex = /^(.*) <\/svg>/g;
+            var match = regex.exec(value);
+            if (!match) {
+                return;
+            }
+            var iconName = void 0;
+            if (key) {
+                iconName = key;
+            }
+            else {
+                iconName = 'left';
+            }
+            var label = "<label class=\"hidden\" aria-label=\"" + iconName + "\">" + iconName + "</label>";
+            icons[key] = match[1] + label + '</svg>';
+        }
+    });
+}
+exports.applyAccessibilityToIcons = applyAccessibilityToIcons;
+/**
+ * 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
+ */
+function applyAccessibilityHacks(toolbarRef, editor) {
+    // Get ref to the toolbar, its not available through the quill api ughh
+    if (!toolbarRef.current) {
+        return;
+    }
+    var toolbar = toolbarRef.current;
+    // apply aria labels to base buttons
+    var buttons = toolbar.getElementsByTagName('button');
+    for (var _i = 0, _a = Array.from(buttons); _i < _a.length; _i++) {
+        var button = _a[_i];
+        var className = button.classList.value
+            .split(' ')
+            .filter(function (v) { return v.includes('ql-'); })
+            .map(function (v) { return v.replace('ql-', ''); })[0];
+        switch (className) {
+            case 'bold':
+                button.setAttribute('aria-label', 'Toggle bold text');
+                break;
+            case 'italic':
+                button.setAttribute('aria-label', 'Toggle italic text');
+                break;
+            case 'underline':
+                button.setAttribute('aria-label', 'Toggle underline text');
+                break;
+            case 'script':
+                if (button.value === 'sub') {
+                    button.setAttribute('aria-label', 'Toggle subscript');
+                }
+                if (button.value === 'super') {
+                    button.setAttribute('aria-label', 'Toggle superscript');
+                }
+                break;
+            case 'blockquote':
+                button.setAttribute('aria-label', 'Toggle blockquote text');
+                break;
+            case 'list':
+                if (button.value === 'ordered') {
+                    button.setAttribute('aria-label', 'Toggle ordered list');
+                }
+                if (button.value === 'bullet') {
+                    button.setAttribute('aria-label', 'Toggle bulleted list');
+                }
+                break;
+            case 'header':
+                if (button.value === '1') {
+                    button.setAttribute('aria-label', 'Toggle heading 1');
+                }
+                if (button.value === '2') {
+                    button.setAttribute('aria-label', 'Toggle heading 2');
+                }
+                break;
+            case 'strike':
+                button.setAttribute('aria-label', 'Toggle strike text');
+                break;
+            case 'code-block':
+                button.setAttribute('aria-label', 'Toggle code block text');
+                break;
+            case 'indent':
+                if (button.value === '-1') {
+                    button.setAttribute('aria-label', 'Indent left');
+                }
+                if (button.value === '+1') {
+                    button.setAttribute('aria-label', 'Indent right');
+                }
+                break;
+            case 'link':
+                button.setAttribute('aria-label', 'Insert link');
+                break;
+            case 'image':
+                button.setAttribute('aria-label', 'Insert image');
+                break;
+            case 'video':
+                button.setAttribute('aria-label', 'Insert video');
+                break;
+            case 'formula':
+                button.setAttribute('aria-label', 'Insert formula');
+                break;
+            case 'clean':
+                button.setAttribute('aria-label', 'Clear formatting');
+                break;
+            case 'table':
+                switch (button.value) {
+                    case constants_1.TABLE_ACTION.INSERT_ROW:
+                        button.setAttribute('aria-label', 'Insert row');
+                        break;
+                    case constants_1.TABLE_ACTION.DELETE_ROW:
+                        button.setAttribute('aria-label', 'Delete row');
+                        break;
+                    case constants_1.TABLE_ACTION.INSERT_COL:
+                        button.setAttribute('aria-label', 'Insert column');
+                        break;
+                    case constants_1.TABLE_ACTION.DELETE_COL:
+                        button.setAttribute('aria-label', 'Delete column');
+                        break;
+                }
+                break;
+            default:
+                break;
+        }
+        var ariaLabel = button.getAttribute('aria-label');
+        if (ariaLabel) {
+            button.setAttribute('title', ariaLabel);
+        }
+        // Put title tags to the dropdowns
+        var dropdowns = toolbar.getElementsByTagName('select');
+        for (var _b = 0, _c = Array.from(dropdowns); _b < _c.length; _b++) {
+            var dropdown = _c[_b];
+            var classNameAttribute = dropdown.getAttribute('class');
+            if (classNameAttribute) {
+                dropdown.setAttribute('title', classNameAttribute.toLowerCase());
+            }
+        }
+        // Make pickers work with keyboard and apply aria labels
+        var pickers = toolbar.getElementsByClassName('ql-picker');
+        var _loop_1 = function (picker) {
+            var label = picker.getElementsByClassName('ql-picker-label')[0];
+            var optionsContainer = picker.getElementsByClassName('ql-picker-options')[0];
+            var options = optionsContainer.getElementsByClassName('ql-picker-item');
+            label.setAttribute('role', 'button');
+            label.setAttribute('aria-haspopup', 'true');
+            label.setAttribute('tabindex', '0');
+            if (!!label.parentElement && label.parentElement.classList.contains('ql-font')) {
+                label.setAttribute('title', 'Font face');
+            }
+            if (!!label.parentElement && label.parentElement.classList.contains('ql-size')) {
+                label.setAttribute('title', 'Font size');
+            }
+            if (!!label.parentElement && label.parentElement.classList.contains('ql-align')) {
+                label.setAttribute('title', 'Alignment');
+            }
+            if (!!label.parentElement && label.parentElement.classList.contains('ql-table')) {
+                label.setAttribute('title', 'Insert table');
+            }
+            optionsContainer.setAttribute('aria-hidden', 'true');
+            optionsContainer.setAttribute('aria-label', 'submenu');
+            var _loop_3 = function (item) {
+                item.setAttribute('tabindex', '0');
+                item.setAttribute('role', 'button');
+                if (!lodash_1.includes(picker.classList, 'ql-align')) {
+                    // Read the css 'content' values and generate aria labels for font face/size
+                    var content = window.getComputedStyle(item, ':before').content;
+                    if (content) {
+                        var contentLabels = content.split('"').join('');
+                        item.setAttribute('aria-label', contentLabels);
+                    }
+                }
+                else {
+                    // Add the title labels to the justification icons
+                    var iconLabels = item.getElementsByTagName('label');
+                    if (iconLabels.length === 1) {
+                        var iconLabel = iconLabels[0].getAttribute('aria-label');
+                        if (iconLabel) {
+                            var iconTitle = iconLabel.charAt(0).toUpperCase() + iconLabel.slice(1);
+                            item.setAttribute('title', iconTitle);
+                            item.setAttribute('aria-label', iconLabel);
+                        }
+                    }
+                }
+                item.addEventListener('keyup', function (e) {
+                    if (e.keyCode === 13) {
+                        ;
+                        item.click();
+                        optionsContainer.setAttribute('aria-hidden', 'true');
+                        picker.classList.remove('ql-expanded');
+                        editor.focus();
+                    }
+                });
+            };
+            for (var _i = 0, _a = Array.from(options); _i < _a.length; _i++) {
+                var item = _a[_i];
+                _loop_3(item);
+            }
+            label.addEventListener('keyup', function (e) {
+                if (e.keyCode === 13) {
+                    ;
+                    label.click();
+                    picker.classList.add('ql-expanded');
+                    optionsContainer.setAttribute('aria-hidden', 'false');
+                }
+            });
+        };
+        for (var _d = 0, _e = Array.from(pickers); _d < _e.length; _d++) {
+            var picker = _e[_d];
+            _loop_1(picker);
+        }
+    }
+    var tooltips = editor.container.getElementsByClassName('ql-tooltip');
+    for (var _f = 0, _g = Array.from(tooltips); _f < _g.length; _f++) {
+        var tooltip = _g[_f];
+        tooltip.setAttribute('tabindex', '-1');
+        var embedUrls = tooltip.getElementsByTagName('input');
+        for (var _h = 0, _j = Array.from(embedUrls); _h < _j.length; _h++) {
+            var embedUrl = _j[_h];
+            embedUrl.setAttribute('aria-label', 'Embed Url');
+        }
+        var previews = tooltip.getElementsByClassName('ql-preview');
+        for (var _k = 0, _l = Array.from(previews); _k < _l.length; _k++) {
+            var preview = _l[_k];
+            preview.setAttribute('aria-label', 'Preview');
+            preview.setAttribute('tabindex', '0');
+        }
+        var actions = tooltip.getElementsByClassName('ql-action');
+        var remove = tooltip.getElementsByClassName('ql-remove');
+        var allActions = Array.from(actions).concat(Array.from(remove));
+        var _loop_2 = function (action) {
+            action.setAttribute('tabindex', '0');
+            action.setAttribute('role', 'button');
+            action.addEventListener('keyup', function (e) {
+                if (e.keyCode === 13) {
+                    ;
+                    action.click();
+                }
+            });
+        };
+        for (var _m = 0, allActions_1 = allActions; _m < allActions_1.length; _m++) {
+            var action = allActions_1[_m];
+            _loop_2(action);
+        }
+    }
+}
+exports.applyAccessibilityHacks = applyAccessibilityHacks;

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

@@ -0,0 +1 @@
+export declare const registerQuill: () => void;

package/lib/components/Quill/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+var Image_1 = require("./Formats/Image");
+var List_1 = require("./Formats/List");
+var Video_1 = require("./Formats/Video");
+var TableModule_1 = require("./TableModule");
+var registerQuill = function () {
+    react_quill_1.Quill.register('modules/blotFormatter', quill_blot_formatter_1.default);
+    // replace image format
+    react_quill_1.Quill.register('formats/image', Image_1.Image, true);
+    // replace list format with new extended version
+    react_quill_1.Quill.register('formats/list/item', List_1.ListItem, true);
+    react_quill_1.Quill.register('formats/list', List_1.List, true);
+    // replace image format
+    react_quill_1.Quill.register('formats/video', Video_1.Video, true);
+    react_quill_1.Quill.register('modules/table', TableModule_1.TableModule);
+    // apply the accessibility label issues to each icons
+    accessibilityFix_1.applyAccessibilityToIcons(react_quill_1.Quill.import('ui/icons'));
+};
+exports.registerQuill = registerQuill;

package/lib/utils/dom.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Get the nearest vertically scrollable parent of an element
+ * @param { HTMLElement } element - The element to start with
+ * @returns The nearest vertically scrollable parent element
+ */
+export declare const getVerticallyScrollableParent: (element: HTMLElement) => Element | null;
+/**
+ * Get the first parent that has the given className in its classList
+ * @param element The target element
+ * @param className The className to match
+ */
+export declare const getFirstParentElementWithClassName: (element: HTMLElement, className: string) => HTMLElement | undefined;
+/**
+ * Return whether the device being used is one of several mainstream mobile devices
+ */
+export declare const isMobileDevice: () => number | boolean;
+/** Return whether the device is using an external keyboard vs. the native on-screen OS keyboard. */
+export declare const hasExternalKeyboard: () => boolean | undefined;
+/**
+ * Is the given element capable of text input?
+ *
+ * @param el An HTML element
+ */
+export declare const isTextInput: (el: HTMLElement) => boolean;
+export declare const setupMobileEventListeners: () => void;

package/lib/utils/dom.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupMobileEventListeners = exports.isTextInput = exports.hasExternalKeyboard = exports.isMobileDevice = exports.getFirstParentElementWithClassName = exports.getVerticallyScrollableParent = void 0;
+var logger_1 = require("./logger");
+var KEYBOARD_ANIMATION_MS = 250;
+/**
+ * Get the nearest vertically scrollable parent of an element
+ * @param { HTMLElement } element - The element to start with
+ * @returns The nearest vertically scrollable parent element
+ */
+var getVerticallyScrollableParent = function (element) {
+    var style = getComputedStyle(element);
+    var excludeStaticParent = style.position === 'absolute';
+    var overflowRegex = /(auto|scroll|hidden)/;
+    for (var parent_1 = element; (parent_1 = parent_1.parentElement);) {
+        style = getComputedStyle(parent_1);
+        if (excludeStaticParent && style.position === 'static')
+            continue;
+        if (overflowRegex.test(style.overflow + style.overflowY) && parent_1.scrollHeight > parent_1.clientHeight)
+            return parent_1;
+    }
+    return document.scrollingElement;
+};
+exports.getVerticallyScrollableParent = getVerticallyScrollableParent;
+/**
+ * Get the first parent that has the given className in its classList
+ * @param element The target element
+ * @param className The className to match
+ */
+var getFirstParentElementWithClassName = function (element, className) {
+    for (var parent_2 = element; (parent_2 = parent_2.parentElement);) {
+        if (parent_2.classList.contains(className))
+            return parent_2;
+    }
+    return undefined;
+};
+exports.getFirstParentElementWithClassName = getFirstParentElementWithClassName;
+/**
+ * Return whether the device being used is one of several mainstream mobile devices
+ */
+var isMobileDevice = function () {
+    return (/android|ipad|ipod|iphone/i.test(navigator.userAgent) ||
+        (/macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints));
+};
+exports.isMobileDevice = isMobileDevice;
+/** Return whether the device is using an external keyboard vs. the native on-screen OS keyboard. */
+var hasExternalKeyboard = function () { return window.hasExternalKeyboard; };
+exports.hasExternalKeyboard = hasExternalKeyboard;
+/**
+ * Sets `window.hasExternalKeyboard`, returned by `hasExternalKeyboard`.
+ */
+var setHasExternalKeyboard = function (hasExternalKeyboard) {
+    logger_1.getLogger().debug('hasExternalKeyboard', hasExternalKeyboard);
+    var windowWithoutType = window;
+    windowWithoutType.hasExternalKeyboard = hasExternalKeyboard;
+};
+/**
+ * 100vh is kind of b⊘rked on mobile safari, we have to set it programmatically here
+ * so we can calculate device-independent viewport heights
+ * https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
+ *
+ * Sets the CSS variable `--visual-viewport-height` on the `documentElement`/<html>.
+ *
+ */
+var setVisualViewportHeightVar = function () {
+    var height = visualViewport.height;
+    document.documentElement.style.setProperty('--visual-viewport-height', height + "px");
+};
+/**
+ * Is the given element capable of text input?
+ *
+ * @param el An HTML element
+ */
+var isTextInput = function (el) {
+    var tagName = el && el.tagName && el.tagName.toLowerCase();
+    if (tagName === 'textarea')
+        return true;
+    if (tagName === 'input') {
+        var inputEl = el;
+        return inputEl.type !== 'button' && inputEl.type !== 'radio' && inputEl.type !== 'checkbox';
+    }
+    // Quill editor
+    return tagName === 'div' && el.className.includes('ql-editor') && el.contentEditable === 'true';
+};
+exports.isTextInput = isTextInput;
+var updateHasExternalKeyboardAfterFocusTimeout = undefined;
+var scrollToElementAfterFocusTimeout = undefined;
+var updateHasExternalKeyboardAfterFocus = function () {
+    var closedVisualViewportHeight = visualViewport.height;
+    // wait for the keyboard animation
+    updateHasExternalKeyboardAfterFocusTimeout = window.setTimeout(function () {
+        // find the keyboard height based on the difference in viewport height
+        var keyboardHeight = closedVisualViewportHeight - visualViewport.height;
+        // on first-load the input focus can fail
+        // when this happens the height is 0, and this ONLY happens when there is NOT an external keyboard
+        if (keyboardHeight === 0 && exports.hasExternalKeyboard() === undefined) {
+            setHasExternalKeyboard(false);
+        }
+        else {
+            // if the keyboard height is greater than 100, that means the full onscreen keyboard displayed
+            // otherwise, only the small context menu displayed, meaning there is an external keyboard
+            setHasExternalKeyboard(keyboardHeight < 100);
+        }
+        updateHasExternalKeyboardAfterFocusTimeout = undefined;
+    }, KEYBOARD_ANIMATION_MS);
+};
+var scrollToElementAfterFocus = function (el) {
+    // wait for the keyboard animation
+    scrollToElementAfterFocusTimeout = window.setTimeout(function () {
+        // after the keyboard is open, check for the el’s scrollable parent, as it could have just become scrollable
+        var scrollParent = exports.getVerticallyScrollableParent(el);
+        // if the el has a scrollable parent other than the document, scroll it back into view
+        if (scrollParent && scrollParent !== document.documentElement) {
+            var scrollRect = scrollParent.getBoundingClientRect();
+            var rect = el.getBoundingClientRect();
+            // only scroll into view if outside of the scroll parent bounds
+            if (rect.bottom < scrollRect.top || rect.top > scrollRect.bottom) {
+                var newScrollTop = scrollParent.scrollTop + rect.top - scrollRect.top - 10;
+                logger_1.getLogger().debug('scrollToEl', newScrollTop);
+                if (scrollParent.scrollTo) {
+                    scrollParent.scrollTo({ top: newScrollTop, behavior: 'smooth' });
+                }
+                else {
+                    scrollParent.scrollTop = newScrollTop;
+                }
+            }
+        }
+        scrollToElementAfterFocusTimeout = undefined;
+    }, KEYBOARD_ANIMATION_MS);
+};
+/**
+ * Event handler for "focusin" event.
+ *
+ * "focusin" bubbles up from all focus events, so uses `isTextInput` to only react to "keyboard" focus events.
+ *
+ * Checks for external keyboard and scrolls to the focused element after any animations, e.g. keyboard open.
+ *
+ */
+var onFocusIn = function (e) {
+    if (!e.target || !exports.isTextInput(e.target))
+        return;
+    updateHasExternalKeyboardAfterFocus();
+    scrollToElementAfterFocus(e.target);
+};
+/**
+ * Event handler for "focusout" event.
+ *
+ * "focusout" bubbles up from all focus events, so uses `isTextInput` to only react to "keyboard" focus events.
+ *
+ * Clears any pending timeouts from "focusin" events.
+ *
+ */
+var onFocusOut = function (e) {
+    if (!e.target || !exports.isTextInput(e.target))
+        return;
+    if (updateHasExternalKeyboardAfterFocusTimeout) {
+        window.clearTimeout(updateHasExternalKeyboardAfterFocusTimeout);
+        updateHasExternalKeyboardAfterFocusTimeout = undefined;
+    }
+    if (scrollToElementAfterFocusTimeout) {
+        window.clearTimeout(scrollToElementAfterFocusTimeout);
+        scrollToElementAfterFocusTimeout = undefined;
+    }
+};
+/**
+ * Check if the device is using an external keyboard by appending an `input` and focusing it.
+ *
+ * This will trigger the `onFocusIn` event handler, which updates the `hasExternalKeyboard` global.
+ */
+var checkForExternalKeyboard = function () {
+    var el = document.createElement('input');
+    el.type = 'text';
+    el.autofocus = true;
+    el.addEventListener('focusin', function () {
+        // remove the input after the keyboard has displayed, plus a small buffer
+        window.setTimeout(function () {
+            el.blur();
+            el.remove();
+        }, KEYBOARD_ANIMATION_MS + 100);
+    });
+    document.documentElement.append(el);
+};
+var setupMobileEventListeners = function () {
+    if (!exports.isMobileDevice())
+        return;
+    // set viewport height var at setup
+    setVisualViewportHeightVar();
+    // add event listeners
+    visualViewport.addEventListener('resize', function () {
+        setVisualViewportHeightVar();
+        // keep the document element scrolled to the top if a ReactModal is open
+        if (document.body.classList.contains('ReactModal__Body--open')) {
+            document.documentElement.scrollTop = 0;
+        }
+    });
+    window.addEventListener('focusin', onFocusIn);
+    window.addEventListener('focusout', onFocusOut);
+    // check for external keyboard at setup
+    checkForExternalKeyboard();
+};
+exports.setupMobileEventListeners = setupMobileEventListeners;

package/lib/utils/sort.js

@@ -60,7 +60,7 @@ var sortByNames = function (a, b) {
 };
 exports.sortByNames = sortByNames;
 var sortByNameNatural = function (a, b) {
-    return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
+    return a.name.trim().localeCompare(b.name.trim(), undefined, { numeric: true, sensitivity: 'base' });
 };
 exports.sortByNameNatural = sortByNameNatural;
 var sort = function (array, attributeName, shouldSortAscending) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "4.5.2",
+	"version": "4.5.3",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",
@@ -123,9 +123,11 @@
 		"local-storage-fallback": "^4.1.1",
 		"lodash": "^4.17.20",
 		"moment-timezone": "^0.5.32",
+		"parchment": "^1.1.4",
 		"pluralize": "^8.0.0",
 		"prop-types": "^15.7.2",
 		"query-string": "^6.13.8",
+		"quill": "^1.3.7",
 		"quill-blot-formatter": "purdue-tlt/quill-blot-formatter#fix/accessibility-error-built",
 		"react": "^17.0.1",
 		"react-bootstrap": "^1.4.3",
@@ -133,6 +135,7 @@
 		"react-ga": "^3.3.0",
 		"react-helmet": "^6.1.0",
 		"react-modal": "^3.12.1",
+		"react-quill": "^1.3.5",
 		"react-redux": "^7.2.2",
 		"react-router": "^5.2.0",
 		"react-router-bootstrap": "^0.25.0",