@elliemae/ds-wysiwygeditor 1.60.0 → 2.0.0-alpha.12

package/cjs/DSWYSIWYGEditor.js

@@ -2,85 +2,49 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+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 components_DSWYSIWYGEditorImpl = require('./components/DSWYSIWYGEditorImpl.js');
-require('@babel/runtime/helpers/defineProperty');
-require('@babel/runtime/helpers/classCallCheck');
-require('@babel/runtime/helpers/createClass');
-require('@babel/runtime/helpers/inherits');
-require('@babel/runtime/helpers/possibleConstructorReturn');
-require('@babel/runtime/helpers/getPrototypeOf');
-require('react-quill');
-require('quill-blot-formatter');
-require('./components/ImageLibraryModal.js');
-require('@elliemae/ds-imagelibrarymodal');
-require('prop-types');
-require('./components/InsertFieldModal.js');
-require('@elliemae/ds-modal');
-require('@elliemae/ds-shared/constants');
-require('lodash');
-require('./components/customFields.js');
-require('./components/CustomToolbar.js');
-require('@elliemae/ds-button');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-dropdownmenu');
-require('./constants.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('./components/colors.js');
-require('./components/TippedButton.js');
-require('@elliemae/ds-tooltip');
-require('./components/TippedSelect.js');
-require('./quillOverrides/IndentStyle.js');
-require('@babel/runtime/helpers/get');
-require('./quillOverrides/LinkFormat.js');
-require('./utils.js');
-require('./quillMatchers/clipboardLinkWithTagMatcher.js');
+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 _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["value", "onChange", "getQuillRef", "quillModules", "customToolbar", "toolbarHandlers", "showRawHTML", "height", "hideItems"];
+const _excluded = ["value", "onChange", "getQuillRef", "quillModules", "customToolbar", "toolbarHandlers", "showRawHTML", "height", "hideItems"];
 
-var DSWYSIWYGEditor = function DSWYSIWYGEditor(_ref) {
-  var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {
-    return null;
-  } : _ref$onChange,
-      _ref$getQuillRef = _ref.getQuillRef,
-      getQuillRef = _ref$getQuillRef === void 0 ? function () {
-    return null;
-  } : _ref$getQuillRef,
-      _ref$quillModules = _ref.quillModules,
-      quillModules = _ref$quillModules === void 0 ? {} : _ref$quillModules,
-      customToolbar = _ref.customToolbar,
-      toolbarHandlers = _ref.toolbarHandlers,
-      _ref$showRawHTML = _ref.showRawHTML,
-      showRawHTML = _ref$showRawHTML === void 0 ? false : _ref$showRawHTML,
-      height = _ref.height,
-      hideItems = _ref.hideItems,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-  var emptyAction = function emptyAction() {};
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  var _useState = React.useState(showRawHTML),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      showHTML = _useState2[0],
-      setShowHTML = _useState2[1];
+const DSWYSIWYGEditor = _ref => {
+  let {
+    value = '',
+    onChange = () => null,
+    getQuillRef = () => null,
+    quillModules = {},
+    customToolbar,
+    toolbarHandlers,
+    showRawHTML = false,
+    height,
+    hideItems
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-  React.useEffect(function () {
-    return setShowHTML(showRawHTML);
-  }, [showRawHTML]);
-  return /*#__PURE__*/React__default['default'].createElement(components_DSWYSIWYGEditorImpl, _extends__default['default']({
+  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,
@@ -92,15 +56,13 @@ var DSWYSIWYGEditor = function DSWYSIWYGEditor(_ref) {
     customToolbar: customToolbar,
     toolbarHandlers: toolbarHandlers,
     showRawHTML: showHTML,
-    onShowHTML: function onShowHTML() {
-      return setShowHTML(!showHTML);
-    },
+    onShowHTML: () => setShowHTML(!showHTML),
     height: height,
     hideItems: hideItems
   }, rest));
 };
 
-var wysiwygEditorProps = {
+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'),
@@ -113,10 +75,8 @@ var wysiwygEditorProps = {
   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;
-var WYSIWYWithSchema = reactDesc.describe(DSWYSIWYGEditor);
+const WYSIWYWithSchema = reactDesc.describe(DSWYSIWYGEditor);
 WYSIWYWithSchema.propTypes = wysiwygEditorProps;
 
 exports.WYSIWYWithSchema = WYSIWYWithSchema;
-exports['default'] = DSWYSIWYGEditor;
-//# sourceMappingURL=DSWYSIWYGEditor.js.map
+exports["default"] = DSWYSIWYGEditor;

package/cjs/components/CustomImageUploader.js

@@ -2,192 +2,124 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
+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 components_TippedButton = require('./TippedButton.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('@elliemae/ds-tooltip');
+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 _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSUploader__default = /*#__PURE__*/_interopDefaultLegacy(DSUploader);
 var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
 
-var ALLOWED_TYPES_TEXT = 'JPG, JPEG, PNG, GIF, BMP, TIFF';
-var ALLOWED_TYPES = /image\/(jpeg|jpg|png|gif|bmp|tiff)/;
-var DEFAULT_MAX_SIZE = 1024 * 1024; // 1 MB
-
-var CustomImageUploader = function CustomImageUploader(_ref) {
-  var quillRef = _ref.quillRef,
-      editorFieldName = _ref.editorFieldName,
-      _ref$allowedImageType = _ref.allowedImageTypes,
-      allowedImageTypes = _ref$allowedImageType === void 0 ? ALLOWED_TYPES_TEXT : _ref$allowedImageType,
-      _ref$uploadAsset = _ref.uploadAsset,
-      uploadAsset = _ref$uploadAsset === void 0 ? function () {
-    return null;
-  } : _ref$uploadAsset,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 1 : _ref$zIndex;
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      inProgress = _useState6[0],
-      setInProgress = _useState6[1];
-
-  var _useState7 = React.useState({
+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
-  }),
-      _useState8 = _slicedToArray__default['default'](_useState7, 2),
-      lastSelection = _useState8[0],
-      setLastSelection = _useState8[1];
-
-  var elementId = "uploadImage".concat(editorFieldName); // eslint-disable-next-line consistent-return
-
-  var handleFileChange = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2(files) {
-      var selectedFile, fr;
-      return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (inProgress) {
-                _context2.next = 7;
-                break;
-              }
-
-              setError(null);
-              selectedFile = files[0];
-
-              if (selectedFile) {
-                _context2.next = 6;
-                break;
-              }
-
-              setError('Please select a file.');
-              return _context2.abrupt("return", false);
-
-            case 6:
-              if (!selectedFile.type.match(ALLOWED_TYPES)) {
-                setError('File must be an image.');
-              } else if (selectedFile.size > DEFAULT_MAX_SIZE) {
-                setError('File is too large.');
-              } else {
-                fr = new FileReader();
-                fr.onload = /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
-                  var url;
-                  return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
-                    while (1) {
-                      switch (_context.prev = _context.next) {
-                        case 0:
-                          setInProgress(true);
-                          _context.prev = 1;
-                          _context.next = 4;
-                          return uploadAsset({
-                            name: selectedFile.name,
-                            type: selectedFile.type,
-                            description: selectedFile.name,
-                            isSystemAsset: false,
-                            file: fr.result
-                          });
-
-                        case 4:
-                          url = _context.sent;
-                          setIsOpen(false);
-                          quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().insertEmbed((lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.index) || 0, 'image', url);
-                          _context.next = 12;
-                          break;
-
-                        case 9:
-                          _context.prev = 9;
-                          _context.t0 = _context["catch"](1);
-                          setError('An error has occurred, try again');
-
-                        case 12:
-                          setInProgress(false);
-
-                        case 13:
-                        case "end":
-                          return _context.stop();
-                      }
-                    }
-                  }, _callee, null, [[1, 9]]);
-                }));
-                fr.readAsArrayBuffer(selectedFile);
-              }
-
-            case 7:
-            case "end":
-              return _context2.stop();
+  });
+  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.');
+        return false;
+      }
+
+      if (!selectedFile.type.match(ALLOWED_TYPES)) {
+        setError('File must be an image.');
+      } else if (selectedFile.size > DEFAULT_MAX_SIZE) {
+        setError('File is too large.');
+      } else {
+        const fr = new FileReader();
+
+        fr.onload = async () => {
+          setInProgress(true);
+
+          try {
+            const url = await uploadAsset({
+              name: selectedFile.name,
+              type: selectedFile.type,
+              description: selectedFile.name,
+              isSystemAsset: false,
+              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);
+          } catch (e) {
+            setError('An error has occurred, try again');
           }
-        }
-      }, _callee2);
-    }));
 
-    return function handleFileChange(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+          setInProgress(false);
+        };
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(components_TippedButton.TippedButton, {
-    zIndex: zIndex,
-    tip: "Insert Image",
-    onClick: function onClick() {
-      setLastSelection(quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().getSelection());
-      setIsOpen(true);
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(dsIcons.Image, {
-    color: ['neutral', 500],
-    size: "s"
-  })), /*#__PURE__*/React__default['default'].createElement(DSModal__default['default'], {
-    isOpen: isOpen,
-    title: "",
-    onConfirm: function onConfirm() {
-      setIsOpen(false);
-    },
-    onClose: function onClose() {
-      setIsOpen(false);
-    },
-    showClose: true,
-    version: 2,
-    size: "xsmall",
-    modalType: DSModal.MODAL_TYPE_V2.DECISION,
-    confirmLabel: "Cancel",
-    message: ""
-  }, !inProgress && /*#__PURE__*/React__default['default'].createElement(DSUploader__default['default'], {
-    containerProps: {
-      id: elementId
-    },
-    showAltAction: false,
-    acceptedTypesText: allowedImageTypes,
-    onDrop: handleFileChange
-  }), inProgress && 'Upload in progress...', error && /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      color: 'red',
-      marginTop: '10px'
+        fr.readAsArrayBuffer(selectedFile);
+      }
     }
-  }, 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))]
+  });
 };
 
 exports.CustomImageUploader = CustomImageUploader;
-//# sourceMappingURL=CustomImageUploader.js.map