@elliemae/ds-wysiwygeditor 2.2.0 → 2.3.0-alpha.3

package/cjs/DSWYSIWYGEditor.js

@@ -1,82 +1,93 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-var reactDesc = require('react-desc');
-var DSWYSIWYGEditorImpl = require('./components/DSWYSIWYGEditorImpl.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-
-const _excluded = ["value", "onChange", "getQuillRef", "quillModules", "customToolbar", "toolbarHandlers", "showRawHTML", "height", "hideItems"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const DSWYSIWYGEditor = _ref => {
-  let {
-    value = '',
-    onChange = () => null,
-    getQuillRef = () => null,
-    quillModules = {},
-    customToolbar,
-    toolbarHandlers,
-    showRawHTML = false,
-    height,
-    hideItems
-  } = _ref,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  const emptyAction = () => {};
-
-  const [showHTML, setShowHTML] = React.useState(showRawHTML);
-  React.useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);
-  return /*#__PURE__*/jsxRuntime.jsx(DSWYSIWYGEditorImpl, _objectSpread({
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var DSWYSIWYGEditor_exports = {};
+__export(DSWYSIWYGEditor_exports, {
+  WYSIWYWithSchema: () => WYSIWYWithSchema,
+  default: () => DSWYSIWYGEditor_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_DSWYSIWYGEditorImpl = __toESM(require("./components/DSWYSIWYGEditorImpl"));
+const DSWYSIWYGEditor = ({
+  value = "",
+  onChange = () => null,
+  getQuillRef = () => null,
+  quillModules = {},
+  customToolbar,
+  toolbarHandlers,
+  showRawHTML = false,
+  height,
+  hideItems,
+  ...rest
+}) => {
+  const emptyAction = () => {
+  };
+  const [showHTML, setShowHTML] = (0, import_react.useState)(showRawHTML);
+  (0, import_react.useEffect)(() => setShowHTML(showRawHTML), [showRawHTML]);
+  return /* @__PURE__ */ import_react.default.createElement(import_DSWYSIWYGEditorImpl.default, {
     forceHttpLink: true,
     handleCustomFieldClick: emptyAction,
     handleImageClick: emptyAction,
     quillOverrides: [],
-    value: value,
-    onChange: onChange,
-    getQuillRef: getQuillRef,
-    quillModules: quillModules,
-    customToolbar: customToolbar,
-    toolbarHandlers: toolbarHandlers,
+    value,
+    onChange,
+    getQuillRef,
+    quillModules,
+    customToolbar,
+    toolbarHandlers,
     showRawHTML: showHTML,
     onShowHTML: () => setShowHTML(!showHTML),
-    height: height,
-    hideItems: hideItems
-  }, rest));
+    height,
+    hideItems,
+    ...rest
+  });
 };
-
 const wysiwygEditorProps = {
-  value: reactDesc.PropTypes.string.description('editors value').isRequired,
-  onChange: reactDesc.PropTypes.func.description("(content, delta, source, editor) : Called back with the new contents of the editor after change. \n    It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as getHTML(). \n    \u26A0\uFE0F Do not use this delta object as value, as it will cause a loop. \n    Use editor.getContents() instead. See Using Deltas for details. \n    Read more: https://github.com/zenoamaro/react-quill#props").isRequired,
-  getQuillRef: reactDesc.PropTypes.func.description('function to use quill.js ref'),
-  quillModules: reactDesc.PropTypes.object.description('object to override quill modules'),
-  customToolbar: reactDesc.PropTypes.element.description('custom toolbar'),
-  toolbarHandlers: reactDesc.PropTypes.object.description('object with toolbar handlers'),
-  showRawHTML: reactDesc.PropTypes.bool.description('whether to display html view or not').defaultValue(false),
-  height: reactDesc.PropTypes.string.description('heigth of the editors text area'),
-  readOnly: reactDesc.PropTypes.string.description("If true, the editor won't allow changing its contents. Wraps the Quill disable API."),
-  hideItems: reactDesc.PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),
-  zIndex: reactDesc.PropTypes.number.description('zIndex to be used (required when used in a modal for correct tooltips displaying)')
+  value: import_react_desc.PropTypes.string.description("editors value").isRequired,
+  onChange: import_react_desc.PropTypes.func.description(`(content, delta, source, editor) : Called back with the new contents of the editor after change. 
+    It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as getHTML(). 
+    \u26A0\uFE0F Do not use this delta object as value, as it will cause a loop. 
+    Use editor.getContents() instead. See Using Deltas for details. 
+    Read more: https://github.com/zenoamaro/react-quill#props`).isRequired,
+  getQuillRef: import_react_desc.PropTypes.func.description("function to use quill.js ref"),
+  quillModules: import_react_desc.PropTypes.object.description("object to override quill modules"),
+  customToolbar: import_react_desc.PropTypes.element.description("custom toolbar"),
+  toolbarHandlers: import_react_desc.PropTypes.object.description("object with toolbar handlers"),
+  showRawHTML: import_react_desc.PropTypes.bool.description("whether to display html view or not").defaultValue(false),
+  height: import_react_desc.PropTypes.string.description("heigth of the editors text area"),
+  readOnly: import_react_desc.PropTypes.string.description("If true, the editor won't allow changing its contents. Wraps the Quill disable API."),
+  hideItems: import_react_desc.PropTypes.object.description("object of defaultItems to be removed from toolbar").defaultValue({}),
+  zIndex: import_react_desc.PropTypes.number.description("zIndex to be used (required when used in a modal for correct tooltips displaying)")
 };
-const WYSIWYWithSchema = reactDesc.describe(DSWYSIWYGEditor);
+DSWYSIWYGEditor.propTypes = wysiwygEditorProps;
+const WYSIWYWithSchema = (0, import_react_desc.describe)(DSWYSIWYGEditor);
 WYSIWYWithSchema.propTypes = wysiwygEditorProps;
-
-exports.WYSIWYWithSchema = WYSIWYWithSchema;
-exports["default"] = DSWYSIWYGEditor;
+var DSWYSIWYGEditor_default = DSWYSIWYGEditor;
+module.exports = __toCommonJS(DSWYSIWYGEditor_exports);
+//# sourceMappingURL=DSWYSIWYGEditor.js.map

package/cjs/DSWYSIWYGEditor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSWYSIWYGEditor.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useState, useEffect } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl';\n\nconst DSWYSIWYGEditor = ({\n  value = '',\n  onChange = () => null,\n  getQuillRef = () => null,\n  quillModules = {},\n  customToolbar,\n  toolbarHandlers,\n  showRawHTML = false,\n  height,\n  hideItems,\n  ...rest\n}) => {\n  const emptyAction = () => {};\n  const [showHTML, setShowHTML] = useState(showRawHTML);\n\n  useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);\n\n  return (\n    <DSWYSIWYGEditorImpl\n      forceHttpLink\n      handleCustomFieldClick={emptyAction}\n      handleImageClick={emptyAction}\n      quillOverrides={[]}\n      value={value}\n      onChange={onChange}\n      getQuillRef={getQuillRef}\n      quillModules={quillModules}\n      customToolbar={customToolbar}\n      toolbarHandlers={toolbarHandlers}\n      showRawHTML={showHTML}\n      onShowHTML={() => setShowHTML(!showHTML)}\n      height={height}\n      hideItems={hideItems}\n      {...rest}\n    />\n  );\n};\n\nconst wysiwygEditorProps = {\n  value: PropTypes.string.description('editors value').isRequired,\n  onChange: PropTypes.func.description(\n    `(content, delta, source, editor) : Called back with the new contents of the editor after change. \n    It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as getHTML(). \n    \u26A0\uFE0F Do not use this delta object as value, as it will cause a loop. \n    Use editor.getContents() instead. See Using Deltas for details. \n    Read more: https://github.com/zenoamaro/react-quill#props`,\n  ).isRequired,\n  getQuillRef: PropTypes.func.description('function to use quill.js ref'),\n  quillModules: PropTypes.object.description('object to override quill modules'),\n  customToolbar: PropTypes.element.description('custom toolbar'),\n  toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),\n  showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),\n  height: PropTypes.string.description('heigth of the editors text area'),\n  readOnly: PropTypes.string.description(\n    \"If true, the editor won't allow changing its contents. Wraps the Quill disable API.\",\n  ),\n  hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),\n  zIndex: PropTypes.number.description(\n    'zIndex to be used (required when used in a modal for correct tooltips displaying)',\n  ),\n};\n\nDSWYSIWYGEditor.propTypes = wysiwygEditorProps;\n\nconst WYSIWYWithSchema = describe(DSWYSIWYGEditor);\nWYSIWYWithSchema.propTypes = wysiwygEditorProps;\n\nexport { WYSIWYWithSchema };\nexport default DSWYSIWYGEditor;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,wBAAoC;AACpC,iCAAgC;AAEhC,MAAM,kBAAkB,CAAC;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,KACG;AAAA,MACC;AACJ,QAAM,cAAc,MAAM;AAAA;AAC1B,QAAM,CAAC,UAAU,eAAe,2BAAS;AAEzC,8BAAU,MAAM,YAAY,cAAc,CAAC;AAE3C,SACE,mDAAC,oCAAD;AAAA,IACE,eAAa;AAAA,IACb,wBAAwB;AAAA,IACxB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,YAAY,MAAM,YAAY,CAAC;AAAA,IAC/B;AAAA,IACA;AAAA,OACI;AAAA;AAAA;AAKV,MAAM,qBAAqB;AAAA,EACzB,OAAO,4BAAU,OAAO,YAAY,iBAAiB;AAAA,EACrD,UAAU,4BAAU,KAAK,YACvB;AAAA;AAAA;AAAA;AAAA,gEAKA;AAAA,EACF,aAAa,4BAAU,KAAK,YAAY;AAAA,EACxC,cAAc,4BAAU,OAAO,YAAY;AAAA,EAC3C,eAAe,4BAAU,QAAQ,YAAY;AAAA,EAC7C,iBAAiB,4BAAU,OAAO,YAAY;AAAA,EAC9C,aAAa,4BAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EAC5F,QAAQ,4BAAU,OAAO,YAAY;AAAA,EACrC,UAAU,4BAAU,OAAO,YACzB;AAAA,EAEF,WAAW,4BAAU,OAAO,YAAY,qDAAqD,aAAa;AAAA,EAC1G,QAAQ,4BAAU,OAAO,YACvB;AAAA;AAIJ,gBAAgB,YAAY;AAE5B,MAAM,mBAAmB,gCAAS;AAClC,iBAAiB,YAAY;AAG7B,IAAO,0BAAQ;",
+  "names": []
+}

package/cjs/components/CustomImageUploader.js

@@ -1,63 +1,71 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
-var React = require('react');
-var dsIcons = require('@elliemae/ds-icons');
-var DSUploader = require('@elliemae/ds-uploader');
-var DSModal = require('@elliemae/ds-modal');
-var TippedButton = require('./TippedButton.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSUploader__default = /*#__PURE__*/_interopDefaultLegacy(DSUploader);
-var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
-
-const ALLOWED_TYPES_TEXT = 'JPG, JPEG, PNG, GIF, BMP, TIFF';
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var CustomImageUploader_exports = {};
+__export(CustomImageUploader_exports, {
+  CustomImageUploader: () => CustomImageUploader
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_uploader = __toESM(require("@elliemae/ds-uploader"));
+var import_ds_modal = __toESM(require("@elliemae/ds-modal"));
+var import_TippedButton = require("./TippedButton");
+const ALLOWED_TYPES_TEXT = "JPG, JPEG, PNG, GIF, BMP, TIFF";
 const ALLOWED_TYPES = /image\/(jpeg|jpg|png|gif|bmp|tiff)/;
-const DEFAULT_MAX_SIZE = 1024 * 1024; // 1 MB
-
-const CustomImageUploader = _ref => {
-  let {
-    quillRef,
-    editorFieldName,
-    allowedImageTypes = ALLOWED_TYPES_TEXT,
-    uploadAsset = () => null,
-    zIndex = 1
-  } = _ref;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [error, setError] = React.useState(null);
-  const [inProgress, setInProgress] = React.useState(false);
-  const [lastSelection, setLastSelection] = React.useState({
-    index: 0,
-    length: 0
-  });
-  const elementId = "uploadImage".concat(editorFieldName); // eslint-disable-next-line consistent-return
-
-  const handleFileChange = async files => {
+const DEFAULT_MAX_SIZE = 1024 * 1024;
+const CustomImageUploader = ({
+  quillRef,
+  editorFieldName,
+  allowedImageTypes = ALLOWED_TYPES_TEXT,
+  uploadAsset = () => null,
+  zIndex = 1
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [inProgress, setInProgress] = (0, import_react.useState)(false);
+  const [lastSelection, setLastSelection] = (0, import_react.useState)({ index: 0, length: 0 });
+  const elementId = `uploadImage${editorFieldName}`;
+  const handleFileChange = async (files) => {
     if (!inProgress) {
       setError(null);
       const selectedFile = files[0];
-
       if (!selectedFile) {
-        setError('Please select a file.');
+        setError("Please select a file.");
         return false;
       }
-
       if (!selectedFile.type.match(ALLOWED_TYPES)) {
-        setError('File must be an image.');
+        setError("File must be an image.");
       } else if (selectedFile.size > DEFAULT_MAX_SIZE) {
-        setError('File is too large.');
+        setError("File is too large.");
       } else {
         const fr = new FileReader();
-
         fr.onload = async () => {
           setInProgress(true);
-
           try {
             const url = await uploadAsset({
               name: selectedFile.name,
@@ -67,59 +75,49 @@ const CustomImageUploader = _ref => {
               file: fr.result
             });
             setIsOpen(false);
-            quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().insertEmbed((lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.index) || 0, 'image', url);
+            quillRef?.getEditor().insertEmbed(lastSelection?.index || 0, "image", url);
           } catch (e) {
-            setError('An error has occurred, try again');
+            setError("An error has occurred, try again");
           }
-
           setInProgress(false);
         };
-
         fr.readAsArrayBuffer(selectedFile);
       }
     }
   };
-
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
-      zIndex: zIndex,
-      tip: "Insert Image",
-      onClick: () => {
-        setLastSelection(quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().getSelection());
-        setIsOpen(true);
-      }
-    }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.Image, {
-      color: ['neutral', 500],
-      size: "s"
-    })), /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
-      isOpen: isOpen,
-      title: "",
-      onConfirm: () => {
-        setIsOpen(false);
-      },
-      onClose: () => {
-        setIsOpen(false);
-      },
-      showClose: true,
-      version: 2,
-      size: "xsmall",
-      modalType: DSModal.MODAL_TYPE_V2.DECISION,
-      confirmLabel: "Cancel",
-      message: ""
-    }, void 0, !inProgress && /*#__PURE__*/_jsx__default["default"](DSUploader__default["default"], {
-      containerProps: {
-        id: elementId
-      },
-      showAltAction: false,
-      acceptedTypesText: allowedImageTypes,
-      onDrop: handleFileChange
-    }), inProgress && 'Upload in progress...', error && /*#__PURE__*/_jsx__default["default"]("div", {
-      style: {
-        color: 'red',
-        marginTop: '10px'
-      }
-    }, void 0, error))]
-  });
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_TippedButton.TippedButton, {
+    zIndex,
+    tip: "Insert Image",
+    onClick: () => {
+      setLastSelection(quillRef?.getEditor().getSelection());
+      setIsOpen(true);
+    }
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Image, {
+    color: ["neutral", 500],
+    size: "s"
+  })), /* @__PURE__ */ import_react.default.createElement(import_ds_modal.default, {
+    isOpen,
+    title: "",
+    onConfirm: () => {
+      setIsOpen(false);
+    },
+    onClose: () => {
+      setIsOpen(false);
+    },
+    showClose: true,
+    version: 2,
+    size: "xsmall",
+    modalType: import_ds_modal.MODAL_TYPE_V2.DECISION,
+    confirmLabel: "Cancel",
+    message: ""
+  }, !inProgress && /* @__PURE__ */ import_react.default.createElement(import_ds_uploader.default, {
+    containerProps: { id: elementId },
+    showAltAction: false,
+    acceptedTypesText: allowedImageTypes,
+    onDrop: handleFileChange
+  }), inProgress && "Upload in progress...", error && /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { color: "red", marginTop: "10px" }
+  }, error)));
 };
-
-exports.CustomImageUploader = CustomImageUploader;
+module.exports = __toCommonJS(CustomImageUploader_exports);
+//# sourceMappingURL=CustomImageUploader.js.map

package/cjs/components/CustomImageUploader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/CustomImageUploader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\nimport { Image } from '@elliemae/ds-icons';\nimport DSUploader from '@elliemae/ds-uploader';\nimport DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';\nimport { TippedButton } from './TippedButton';\n\nconst ALLOWED_TYPES_TEXT = 'JPG, JPEG, PNG, GIF, BMP, TIFF';\nconst ALLOWED_TYPES = /image\\/(jpeg|jpg|png|gif|bmp|tiff)/;\nconst DEFAULT_MAX_SIZE = 1024 * 1024; // 1 MB\n\nexport const CustomImageUploader = ({\n  quillRef,\n  editorFieldName,\n  allowedImageTypes = ALLOWED_TYPES_TEXT,\n  uploadAsset = () => null,\n  zIndex = 1,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [error, setError] = useState(null);\n  const [inProgress, setInProgress] = useState(false);\n  const [lastSelection, setLastSelection] = useState({ index: 0, length: 0 });\n\n  const elementId = `uploadImage${editorFieldName}`;\n\n  // eslint-disable-next-line consistent-return\n  const handleFileChange = async (files) => {\n    if (!inProgress) {\n      setError(null);\n      const selectedFile = files[0];\n      if (!selectedFile) {\n        setError('Please select a file.');\n        return false;\n      }\n      if (!selectedFile.type.match(ALLOWED_TYPES)) {\n        setError('File must be an image.');\n      } else if (selectedFile.size > DEFAULT_MAX_SIZE) {\n        setError('File is too large.');\n      } else {\n        const fr = new FileReader();\n        fr.onload = async () => {\n          setInProgress(true);\n          try {\n            const url = await uploadAsset({\n              name: selectedFile.name,\n              type: selectedFile.type,\n              description: selectedFile.name,\n              isSystemAsset: false,\n              file: fr.result,\n            });\n            setIsOpen(false);\n            quillRef?.getEditor().insertEmbed(lastSelection?.index || 0, 'image', url);\n          } catch (e) {\n            setError('An error has occurred, try again');\n          }\n          setInProgress(false);\n        };\n        fr.readAsArrayBuffer(selectedFile);\n      }\n    }\n  };\n  return (\n    <>\n      <TippedButton\n        zIndex={zIndex}\n        tip=\"Insert Image\"\n        onClick={() => {\n          setLastSelection(quillRef?.getEditor().getSelection());\n          setIsOpen(true);\n        }}\n      >\n        <Image color={['neutral', 500]} size=\"s\" />\n      </TippedButton>\n      <DSModal\n        isOpen={isOpen}\n        title=\"\"\n        onConfirm={() => {\n          setIsOpen(false);\n        }}\n        onClose={() => {\n          setIsOpen(false);\n        }}\n        showClose\n        version={2}\n        size=\"xsmall\"\n        modalType={MODAL_TYPE_V2.DECISION}\n        confirmLabel=\"Cancel\"\n        message=\"\"\n      >\n        {!inProgress && (\n          <DSUploader\n            containerProps={{ id: elementId }}\n            showAltAction={false}\n            acceptedTypesText={allowedImageTypes}\n            onDrop={handleFileChange}\n          />\n        )}\n        {inProgress && 'Upload in progress...'}\n        {error && <div style={{ color: 'red', marginTop: '10px' }}>{error}</div>}\n      </DSModal>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAgC;AAChC,sBAAsB;AACtB,yBAAuB;AACvB,sBAAuC;AACvC,0BAA6B;AAE7B,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AACtB,MAAM,mBAAmB,OAAO;AAEzB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,cAAc,MAAM;AAAA,EACpB,SAAS;AAAA,MACL;AACJ,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,CAAC,OAAO,YAAY,2BAAS;AACnC,QAAM,CAAC,YAAY,iBAAiB,2BAAS;AAC7C,QAAM,CAAC,eAAe,oBAAoB,2BAAS,EAAE,OAAO,GAAG,QAAQ;AAEvE,QAAM,YAAY,cAAc;AAGhC,QAAM,mBAAmB,OAAO,UAAU;AACxC,QAAI,CAAC,YAAY;AACf,eAAS;AACT,YAAM,eAAe,MAAM;AAC3B,UAAI,CAAC,cAAc;AACjB,iBAAS;AACT,eAAO;AAAA;AAET,UAAI,CAAC,aAAa,KAAK,MAAM,gBAAgB;AAC3C,iBAAS;AAAA,iBACA,aAAa,OAAO,kBAAkB;AAC/C,iBAAS;AAAA,aACJ;AACL,cAAM,KAAK,IAAI;AACf,WAAG,SAAS,YAAY;AACtB,wBAAc;AACd,cAAI;AACF,kBAAM,MAAM,MAAM,YAAY;AAAA,cAC5B,MAAM,aAAa;AAAA,cACnB,MAAM,aAAa;AAAA,cACnB,aAAa,aAAa;AAAA,cAC1B,eAAe;AAAA,cACf,MAAM,GAAG;AAAA;AAEX,sBAAU;AACV,sBAAU,YAAY,YAAY,eAAe,SAAS,GAAG,SAAS;AAAA,mBAC/D,GAAP;AACA,qBAAS;AAAA;AAEX,wBAAc;AAAA;AAEhB,WAAG,kBAAkB;AAAA;AAAA;AAAA;AAI3B,SACE,wFACE,mDAAC,kCAAD;AAAA,IACE;AAAA,IACA,KAAI;AAAA,IACJ,SAAS,MAAM;AACb,uBAAiB,UAAU,YAAY;AACvC,gBAAU;AAAA;AAAA,KAGZ,mDAAC,uBAAD;AAAA,IAAO,OAAO,CAAC,WAAW;AAAA,IAAM,MAAK;AAAA,OAEvC,mDAAC,yBAAD;AAAA,IACE;AAAA,IACA,OAAM;AAAA,IACN,WAAW,MAAM;AACf,gBAAU;AAAA;AAAA,IAEZ,SAAS,MAAM;AACb,gBAAU;AAAA;AAAA,IAEZ,WAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAK;AAAA,IACL,WAAW,8BAAc;AAAA,IACzB,cAAa;AAAA,IACb,SAAQ;AAAA,KAEP,CAAC,cACA,mDAAC,4BAAD;AAAA,IACE,gBAAgB,EAAE,IAAI;AAAA,IACtB,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,QAAQ;AAAA,MAGX,cAAc,yBACd,SAAS,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO,OAAO,WAAW;AAAA,KAAW;AAAA;",
+  "names": []
+}