studiokit-scaffolding-js 5.1.6 → 5.2.0

package/lib/components/Quill/Formats/Image.d.ts

@@ -24,6 +24,7 @@ export interface ImageValue {
     alt?: string;
     width: string;
     height: string;
+    nonPublic?: boolean;
 }
 declare type ImageBlotOnClick = (img: ImageValue, blot: Image) => void;
 export declare function setImageClickHandlersEnabled(value: boolean): void;

package/lib/components/Quill/Formats/Image.js

@@ -68,6 +68,10 @@ var Image = /** @class */ (function (_super) {
         else {
             node.className = 'alt-text-missing';
         }
+        // Note: an image that's not public error "level" supercedes an image missing alt text
+        if (value.nonPublic) {
+            node.className = 'non-public-image';
+        }
         node.setAttribute('src', value.src);
         // Setting up the height and width to be reactive when an image is getting resize
         node.setAttribute('height', (_b = value.height) !== null && _b !== void 0 ? _b : 'auto');
@@ -77,10 +81,11 @@ var Image = /** @class */ (function (_super) {
     /** Returns the value for a DOM Node */
     Image.value = function (node) {
         return {
-            width: node.getAttribute('width'),
-            height: node.getAttribute('height'),
+            width: node.getAttribute('width') || 'auto',
+            height: node.getAttribute('height') || 'auto',
             alt: node.getAttribute('alt') || undefined,
-            src: node.getAttribute('src')
+            src: node.getAttribute('src'),
+            nonPublic: node.classList.contains('non-public-image')
         };
     };
     Image.blotName = 'image';

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

@@ -0,0 +1,32 @@
+import { Quill } from 'react-quill';
+/**
+ * Custom module for quilljs to allow user to drag images from their file system into the editor
+ * and paste images from clipboard (Works on Chrome, Firefox, Edge, not on Safari)
+ * @see https://quilljs.com/blog/building-a-custom-module/
+ *
+ * Roughly forked (and TypeScripted) from https://github.com/kensnyder/quill-image-drop-module/blob/master/src/ImageDrop.js
+ */
+export declare class ImageDropModule {
+    quill: Quill;
+    options: any;
+    /**
+     * Instantiate the module given a quill instance and any options
+     */
+    constructor(quill: Quill, options: any);
+    /**
+     * Handler for drop event to read dropped files from evt.dataTransfer
+     */
+    handleDrop: (evt: DragEvent) => void;
+    /**
+     * Handler for paste event to read pasted files from evt.clipboardData
+     */
+    handlePaste: (evt: ClipboardEvent) => void;
+    /**
+     * Insert the image into the document at the current cursor position
+     */
+    insert: (base64DataUrl: string | ArrayBuffer | null | undefined, alt?: string) => void;
+    /**
+     * Extract base64 image URIs from a list of files from evt.dataTransfer or evt.clipboardData
+     */
+    readFiles: (files: DataTransferItemList | FileList, callback: (dataUrl: string | ArrayBuffer | null | undefined) => void) => void;
+}

package/lib/components/Quill/ImageDropModule.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageDropModule = void 0;
+var react_quill_1 = require("react-quill");
+var logger_1 = require("../../utils/logger");
+var Delta = react_quill_1.Quill.import('delta');
+/**
+ * Custom module for quilljs to allow user to drag images from their file system into the editor
+ * and paste images from clipboard (Works on Chrome, Firefox, Edge, not on Safari)
+ * @see https://quilljs.com/blog/building-a-custom-module/
+ *
+ * Roughly forked (and TypeScripted) from https://github.com/kensnyder/quill-image-drop-module/blob/master/src/ImageDrop.js
+ */
+var ImageDropModule = /** @class */ (function () {
+    /**
+     * Instantiate the module given a quill instance and any options
+     */
+    function ImageDropModule(quill, options) {
+        var _this = this;
+        /**
+         * Handler for drop event to read dropped files from evt.dataTransfer
+         */
+        this.handleDrop = function (evt) {
+            evt.preventDefault();
+            if (evt.dataTransfer && evt.dataTransfer.files && evt.dataTransfer.files.length) {
+                var selection = document.getSelection();
+                var range = null;
+                if (document.caretRangeFromPoint) {
+                    range = document.caretRangeFromPoint(evt.clientX, evt.clientY);
+                }
+                else if (document.caretPositionFromPoint) {
+                    var pos = document.caretPositionFromPoint(evt.clientX, evt.clientY);
+                    range = document.createRange();
+                    range.setStart((pos === null || pos === void 0 ? void 0 : pos.offsetNode) || document.body, (pos === null || pos === void 0 ? void 0 : pos.offset) || 0);
+                    range.collapse(true);
+                }
+                if (selection && range) {
+                    selection.setBaseAndExtent(range.startContainer, range.startOffset, range.startContainer, range.startOffset);
+                }
+                _this.readFiles(evt.dataTransfer.files, _this.insert.bind(_this));
+            }
+        };
+        /**
+         * Handler for paste event to read pasted files from evt.clipboardData
+         */
+        this.handlePaste = function (evt) {
+            var _a, _b;
+            // Get alt text from clipboard data and add it to the image we create with base64 data
+            var text = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/html');
+            var alt = '';
+            if (text) {
+                var regExp = /alt="(.*?)"/;
+                alt = ((_b = regExp.exec(text)) === null || _b === void 0 ? void 0 : _b[1]) || '';
+            }
+            if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) {
+                _this.readFiles(evt.clipboardData.items, function (base64DataUrl) {
+                    // wait until after the default paste action finishes
+                    setTimeout(function () { return _this.insert(base64DataUrl, alt); }, 50);
+                });
+            }
+        };
+        /**
+         * Insert the image into the document at the current cursor position
+         */
+        this.insert = function (base64DataUrl, alt) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (alt === void 0) { alt = ''; }
+            var logger = logger_1.getLogger();
+            var index = (_this.quill.getSelection() || {}).index || _this.quill.getLength();
+            var diff = new Delta();
+            diff.ops = [];
+            if (index > 0) {
+                diff.ops.push({ retain: index });
+            }
+            var indexBefore = Math.max(0, index - 1);
+            var contentsBeforeIndex = _this.quill.getContents(indexBefore, 1);
+            logger.debug('insert - find contents before index', { index: indexBefore, contentsBeforeIndex: contentsBeforeIndex });
+            // when copy-pasting an image from the web/browser, the web url image is immediately inserted.
+            // check if a web image exists at the previous index, and replace it.
+            // when copy-pasting an image file from the computer, the `base64DataUrl` image is immediately inserted,but is missing some blot info.
+            // check if the same image data already exists at the previous index, and replace it.
+            if (((_e = (_d = (_c = (_b = (_a = contentsBeforeIndex === null || contentsBeforeIndex === void 0 ? void 0 : contentsBeforeIndex.ops) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.insert) === null || _c === void 0 ? void 0 : _c.image) === null || _d === void 0 ? void 0 : _d.src) === null || _e === void 0 ? void 0 : _e.startsWith('http')) ||
+                ((_j = (_h = (_g = (_f = contentsBeforeIndex === null || contentsBeforeIndex === void 0 ? void 0 : contentsBeforeIndex.ops) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.insert) === null || _h === void 0 ? void 0 : _h.image) === null || _j === void 0 ? void 0 : _j.src) === base64DataUrl) {
+                logger.debug('insert - remove image before index');
+                diff.ops = [];
+                if (indexBefore > 0) {
+                    diff.ops.push({ retain: indexBefore });
+                }
+                diff.ops.push({ delete: 1 });
+            }
+            // insert the image at the index
+            diff.ops.push({ insert: { image: { src: base64DataUrl, alt: alt } } });
+            if (diff.ops.length > 0) {
+                logger.debug('insert - quill.updateContents', { diff: diff });
+                _this.quill.updateContents(diff, 'user');
+            }
+        };
+        /**
+         * Extract base64 image URIs from a list of files from evt.dataTransfer or evt.clipboardData
+         */
+        this.readFiles = function (files, callback) {
+            var regExp = RegExp(/^image\/(gif|jpe?g|a?png|svg|webp|bmp|vnd\.microsoft\.icon)/i);
+            [].forEach.call(files, function (file) {
+                if (!regExp.test(file.type)) {
+                    // file is not an image
+                    // Note that some file formats such as psd start with image/* but are not readable
+                    return;
+                }
+                var reader = new FileReader();
+                reader.onload = function (evt) {
+                    var _a;
+                    callback((_a = evt.target) === null || _a === void 0 ? void 0 : _a.result);
+                };
+                var blob = file.getAsFile ? file.getAsFile() : file;
+                if (blob instanceof Blob) {
+                    reader.readAsDataURL(blob);
+                }
+            });
+        };
+        this.quill = quill;
+        this.handleDrop = this.handleDrop.bind(this);
+        this.handlePaste = this.handlePaste.bind(this);
+        this.quill.root.addEventListener('drop', this.handleDrop, false);
+        this.quill.root.addEventListener('paste', this.handlePaste, false);
+    }
+    return ImageDropModule;
+}());
+exports.ImageDropModule = ImageDropModule;

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

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+export interface ImageWarningProps {
+    text: string | JSX.Element;
+    className?: string;
+    isError?: boolean;
+}
+export declare const ImageWarning: FunctionComponent<ImageWarningProps>;

package/lib/components/Quill/ImageWarning.js

@@ -0,0 +1,37 @@
+"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.ImageWarning = void 0;
+var Error_1 = __importDefault(require("@material-ui/icons/Error"));
+var Warning_1 = __importDefault(require("@material-ui/icons/Warning"));
+var react_1 = __importStar(require("react"));
+var ImageWarning = function (_a) {
+    var text = _a.text, className = _a.className, isError = _a.isError;
+    return react_1.useMemo(function () {
+        return (react_1.default.createElement("div", { className: "small pv1 mv1" + (className ? " " + className : '') },
+            isError ? react_1.default.createElement(Error_1.default, { className: "fill-red nt1 mr1" }) : react_1.default.createElement(Warning_1.default, { className: "fill-orange nt1 mr1" }),
+            text));
+    }, [className, text, isError]);
+};
+exports.ImageWarning = ImageWarning;

package/lib/components/Quill/ImageWithAltTextModal.js

@@ -32,6 +32,7 @@ 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 ImageWarning_1 = require("./ImageWarning");
 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" },
@@ -41,17 +42,20 @@ var ImageWithAltTextModal = function (_a) {
     // 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];
+    var _d = react_1.useState(imageToEdit === null || imageToEdit === void 0 ? void 0 : imageToEdit.nonPublic), nonPublic = _d[0], setNonPublic = _d[1];
+    var _e = react_1.useState(false), isSelectedFileInvalid = _e[0], setIsSelectedFileInvalid = _e[1];
     // update local state based on the targeted image, if any
     react_1.useEffect(function () {
         if (imageToEdit) {
             setAlt(imageToEdit.alt);
             setSrc(imageToEdit.src);
+            setNonPublic(imageToEdit.nonPublic);
         }
     }, [imageToEdit]);
     var onTryClose = function () {
         setAlt(undefined);
         setSrc(undefined);
+        setNonPublic(undefined);
         // programmatically reset file selector
         fileSelector.value = '';
         onClose();
@@ -79,6 +83,7 @@ var ImageWithAltTextModal = function (_a) {
                 };
                 // get the file as a dataURI in base64
                 reader.readAsDataURL(file_1);
+                setNonPublic(false);
             }
         };
     };
@@ -86,7 +91,7 @@ var ImageWithAltTextModal = function (_a) {
     var insertImage = function () {
         if (reactQuillRef) {
             var quill = reactQuillRef.getEditor();
-            var imageToInsert = { src: src, alt: alt };
+            var imageToInsert = { src: src, alt: alt, nonPublic: nonPublic };
             if (imageToEdit) {
                 imageToInsert.height = imageToEdit.height;
                 imageToInsert.width = imageToEdit.width;
@@ -107,13 +112,20 @@ var ImageWithAltTextModal = function (_a) {
     };
     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.Title, { className: "f4" }, imageToEdit ? "Edit Image" : "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,
+            imageToEdit && !(imageToEdit === null || imageToEdit === void 0 ? void 0 : imageToEdit.alt) && !alt && (react_1.default.createElement(ImageWarning_1.ImageWarning, { text: "This image is missing alt text. Please provide it below." })),
+            (imageToEdit === null || imageToEdit === void 0 ? void 0 : imageToEdit.nonPublic) && nonPublic && (react_1.default.createElement(ImageWarning_1.ImageWarning, { isError: true, text: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", null, "This image is not publicly available"),
+                    react_1.default.createElement("div", { className: "mv2" }, "Due to browser security issues, you'll need to upload this from your computer instead of linking from its original source. To fix this:"),
+                    react_1.default.createElement("ol", { className: "mb1" },
+                        react_1.default.createElement("li", null, "Right click on the image and save to your computer."),
+                        react_1.default.createElement("li", null, "Then use the 'Change Image' button below to upload the saved file."))) })),
+            (!imageToEdit || (imageToEdit.nonPublic && nonPublic)) && (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" },

package/lib/components/Quill/index.js

@@ -10,6 +10,7 @@ var accessibilityFix_1 = require("./accessibilityFix");
 var Image_1 = require("./Formats/Image");
 var List_1 = require("./Formats/List");
 var Video_1 = require("./Formats/Video");
+var ImageDropModule_1 = require("./ImageDropModule");
 var TableModule_1 = require("./TableModule");
 var registerQuill = function () {
     react_quill_1.Quill.register('modules/blotFormatter', quill_blot_formatter_1.default);
@@ -21,6 +22,7 @@ var registerQuill = function () {
     // replace image format
     react_quill_1.Quill.register('formats/video', Video_1.Video, true);
     react_quill_1.Quill.register('modules/table', TableModule_1.TableModule);
+    react_quill_1.Quill.register('modules/imageDrop', ImageDropModule_1.ImageDropModule);
     // apply the accessibility label issues to each icons
     accessibilityFix_1.applyAccessibilityToIcons(react_quill_1.Quill.import('ui/icons'));
 };

package/lib/utils/quill.d.ts

@@ -1,9 +1,10 @@
-import { DeltaStatic } from 'quill';
+import Quill from 'quill';
+import { ImageValue } from '../components/Quill/Formats/Image';
 /**
- * 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
+ * Check for non-public in the provided quill contents. Update the ImageValue of an op if an image is found to be
+ * non-public.
+ * @param quill The Quill instance
+ * @param checkedImages A list of all images we have already processed in previous calls to this function.
+ * list of processed images
  */
-export declare const hasSomeMissingAltText: (contents: DeltaStatic) => boolean;
+export declare const checkForNonPublicImages: (quill: Quill, checkedImages: ImageValue[]) => void;

package/lib/utils/quill.js

@@ -1,12 +1,71 @@
 "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.hasSomeMissingAltText = void 0;
+exports.checkForNonPublicImages = void 0;
+var quill_1 = __importDefault(require("quill"));
+var uuid_1 = require("uuid");
+var actionCreator_1 = require("../redux/actionCreator");
+var actions_1 = require("../redux/actions");
+var noStoreSaga_1 = require("../redux/sagas/noStoreSaga");
+var Delta = quill_1.default.import('delta');
 /**
- * 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
+ * Check for non-public in the provided quill contents. Update the ImageValue of an op if an image is found to be
+ * non-public.
+ * @param quill The Quill instance
+ * @param checkedImages A list of all images we have already processed in previous calls to this function.
+ * list of processed images
  */
-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;
+var checkForNonPublicImages = function (quill, checkedImages) {
+    var _a, _b;
+    (_b = (_a = quill
+        .getContents()) === null || _a === void 0 ? void 0 : _a.ops // Is the op an image and have we not seen it before?
+    ) === null || _b === void 0 ? void 0 : _b.filter(function (op) { var _a; return ((_a = op.insert) === null || _a === void 0 ? void 0 : _a.image) && !checkedImages.find(function (image) { return image.src === op.insert.image.src; }); }).forEach(function (op) {
+        // Check if the image is public. Do not check data:image urls
+        if (op.insert.image.src && op.insert.image.src.startsWith('http')) {
+            // Use the backend to check if the image is public
+            // Due to CSP and other security measures, we can't check this in the frontend
+            // uuidv5 is a deterministic uuid generator based on a namespace and a name
+            // uuidv5.URL is the namespace for urls
+            var hookId_1 = uuid_1.v5(op.insert.image.src, uuid_1.v5.URL);
+            noStoreSaga_1.noStoreHooks.registerNoStoreActionHook(hookId_1, function (data) {
+                noStoreSaga_1.noStoreHooks.unregisterNoStoreActionHook(hookId_1);
+                // Backend fetches the URL. If there is no data returned or if the data returned has headers
+                // but those headers are not of image type (i.e. it was a 302 that, when followed returned HTML
+                // (I'm looking at you, Brightspace), then we update the image insert op to be nonPublic
+                if (!data || (data['Content-Type'] && !data['Content-Type'][0].startsWith('image'))) {
+                    var contents = quill.getContents();
+                    var ops = contents.map(function (o) {
+                        var _a, _b;
+                        return ((_a = o.insert.image) === null || _a === void 0 ? void 0 : _a.src) && ((_b = op.insert.image) === null || _b === void 0 ? void 0 : _b.src) && o.insert.image.src === op.insert.image.src
+                            ? __assign(__assign({}, o), { insert: __assign(__assign({}, o.insert), { image: __assign(__assign({}, o.insert.image), { nonPublic: true }) }) }) : o;
+                    });
+                    var updatedContents = contents.diff(new Delta(ops));
+                    quill.updateContents(updatedContents);
+                }
+            });
+            // This endpoint returns headers for a url. If the url is nonexistent, it will return null
+            actionCreator_1.dispatchAction(actions_1.NET_ACTION.DATA_REQUESTED, {
+                modelName: 'urlChecker',
+                guid: hookId_1,
+                noStore: true,
+                queryParams: {
+                    url: op.insert.image.src
+                }
+            });
+        }
+    });
+};
+exports.checkForNonPublicImages = checkForNonPublicImages;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "5.1.6",
+	"version": "5.2.0",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",

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

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

package/lib/components/Quill/ImageMissingAltTextWarning.js

@@ -1,15 +0,0 @@
-"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;