@elliemae/ds-wysiwygeditor 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/DSWYSIWYGEditor.js

@@ -1,93 +1,82 @@
-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, {
+'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({
     forceHttpLink: true,
     handleCustomFieldClick: emptyAction,
     handleImageClick: emptyAction,
     quillOverrides: [],
-    value,
-    onChange,
-    getQuillRef,
-    quillModules,
-    customToolbar,
-    toolbarHandlers,
+    value: value,
+    onChange: onChange,
+    getQuillRef: getQuillRef,
+    quillModules: quillModules,
+    customToolbar: customToolbar,
+    toolbarHandlers: toolbarHandlers,
     showRawHTML: showHTML,
     onShowHTML: () => setShowHTML(!showHTML),
-    height,
-    hideItems,
-    ...rest
-  });
+    height: height,
+    hideItems: hideItems
+  }, rest));
 };
+
 const wysiwygEditorProps = {
-  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)")
+  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)')
 };
-DSWYSIWYGEditor.propTypes = wysiwygEditorProps;
-const WYSIWYWithSchema = (0, import_react_desc.describe)(DSWYSIWYGEditor);
+const WYSIWYWithSchema = reactDesc.describe(DSWYSIWYGEditor);
 WYSIWYWithSchema.propTypes = wysiwygEditorProps;
-var DSWYSIWYGEditor_default = DSWYSIWYGEditor;
-module.exports = __toCommonJS(DSWYSIWYGEditor_exports);
-//# sourceMappingURL=DSWYSIWYGEditor.js.map
+
+exports.WYSIWYWithSchema = WYSIWYWithSchema;
+exports["default"] = DSWYSIWYGEditor;

package/cjs/components/CustomImageUploader.js

@@ -1,71 +1,63 @@
-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";
+'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';
 const ALLOWED_TYPES = /image\/(jpeg|jpg|png|gif|bmp|tiff)/;
-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) => {
+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 => {
     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,
@@ -75,49 +67,59 @@ const CustomImageUploader = ({
               file: fr.result
             });
             setIsOpen(false);
-            quillRef?.getEditor().insertEmbed(lastSelection?.index || 0, "image", url);
+            quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().insertEmbed((lastSelection === null || lastSelection === void 0 ? void 0 : 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__ */ 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)));
+
+  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))]
+  });
 };
-module.exports = __toCommonJS(CustomImageUploader_exports);
-//# sourceMappingURL=CustomImageUploader.js.map
+
+exports.CustomImageUploader = CustomImageUploader;