@elliemae/ds-wysiwygeditor 2.2.0-alpha.2 → 2.2.0-beta.0

package/cjs/components/DSWYSIWYGEditorImpl.js

@@ -1,163 +1,199 @@
-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 DSWYSIWYGEditorImpl_exports = {};
-__export(DSWYSIWYGEditorImpl_exports, {
-  default: () => DSWYSIWYGEditorImpl
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_quill = __toESM(require("react-quill"));
-var import_quill_blot_formatter = __toESM(require("quill-blot-formatter"));
-var import_ImageLibraryModal = __toESM(require("./ImageLibraryModal"));
-var import_InsertFieldModal = __toESM(require("./InsertFieldModal"));
-var import_CustomToolbar = __toESM(require("./CustomToolbar"));
-var import_IndentStyle = __toESM(require("../quillOverrides/IndentStyle"));
-var import_LinkFormat = __toESM(require("../quillOverrides/LinkFormat"));
-var import_utils = __toESM(require("../utils"));
-var import_clipboardLinkWithTagMatcher = __toESM(require("../quillMatchers/clipboardLinkWithTagMatcher"));
-import_react_quill.Quill.register("modules/blotFormatter", import_quill_blot_formatter.default);
-const AlignStyle = import_react_quill.Quill.import("attributors/style/align");
-const FontStyle = import_react_quill.Quill.import("attributors/style/font");
-FontStyle.whitelist = [
-  "serif",
-  "monospace",
-  "arial",
-  "comic-sans",
-  "courier-new",
-  "georgia",
-  "helvetica",
-  "lucida"
-];
-const SizeStyle = import_react_quill.Quill.import("attributors/style/size");
-SizeStyle.whitelist = [
-  "x-small",
-  "large",
-  "x-large"
-];
-const Block = import_react_quill.Quill.import("blots/block");
-Block.tagName = "p";
-import_react_quill.Quill.register(Block);
-import_react_quill.Quill.register(AlignStyle, true);
-import_react_quill.Quill.register(import_IndentStyle.default, true);
-import_react_quill.Quill.register(FontStyle, true);
-import_react_quill.Quill.register(SizeStyle, true);
-class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.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 ReactQuill = require('react-quill');
+var BlotFormatter = require('quill-blot-formatter');
+var ImageLibraryModal = require('./ImageLibraryModal.js');
+var InsertFieldModal = require('./InsertFieldModal.js');
+var CustomToolbar = require('./CustomToolbar.js');
+var IndentStyle = require('../quillOverrides/IndentStyle.js');
+var LinkFormat = require('../quillOverrides/LinkFormat.js');
+var utils = require('../utils.js');
+var clipboardLinkWithTagMatcher = require('../quillMatchers/clipboardLinkWithTagMatcher.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactQuill__default = /*#__PURE__*/_interopDefaultLegacy(ReactQuill);
+var BlotFormatter__default = /*#__PURE__*/_interopDefaultLegacy(BlotFormatter);
+
+const _excluded = ["containerProps", "customFields", "imagesData", "customToolbar", "handleImageClick", "handleCustomFieldClick", "height", "value", "showRawHTML", "onShowHTML", "onChange", "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; }
+ReactQuill.Quill.register('modules/blotFormatter', BlotFormatter__default["default"]); // Fix block styled formats ----------------
+
+const AlignStyle = ReactQuill.Quill.import('attributors/style/align');
+const FontStyle = ReactQuill.Quill.import('attributors/style/font');
+FontStyle.whitelist = [// allow ONLY these fonts and the default
+'serif', 'monospace', 'arial', 'comic-sans', 'courier-new', 'georgia', 'helvetica', 'lucida'];
+const SizeStyle = ReactQuill.Quill.import('attributors/style/size');
+SizeStyle.whitelist = [// allow ONLY these sizes and the default
+'x-small', 'large', 'x-large']; // Fix Doc Viewer p tags extra margin issue ---------
+
+const Block = ReactQuill.Quill.import('blots/block');
+Block.tagName = 'p';
+ReactQuill.Quill.register(Block);
+ReactQuill.Quill.register(AlignStyle, true);
+ReactQuill.Quill.register(IndentStyle, true);
+ReactQuill.Quill.register(FontStyle, true);
+ReactQuill.Quill.register(SizeStyle, true); // -----------------------------------------
+
+class DSWYSIWYGEditorImpl extends React__default["default"].PureComponent {
   constructor(props) {
     super(props);
-    this.quillModules = {
+    this.quillModules = _objectSpread({
       toolbar: {
-        container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : "#toolbar",
-        handlers: {
-          ...this.props.toolbarHandlers
-        }
+        container: this.props.toolbarContainer ? "#".concat(this.props.toolbarContainer) : '#toolbar',
+        handlers: _objectSpread({}, this.props.toolbarHandlers)
       },
       clipboard: {
+        // toggle to add extra line breaks when pasting HTML:
         matchVisual: false
       },
-      blotFormatter: {},
-      ...this.props.quillModules
-    };
+      blotFormatter: {// options... https://github.com/Fandom-OSS/quill-blot-formatter
+      }
+    }, this.props.quillModules);
+
     this.onChangeQuill = (html, delta, source, editor) => {
-      const { showRawHTML, onChange } = this.props;
-      if (!showRawHTML)
-        onChange(html, delta, source, editor);
+      const {
+        showRawHTML,
+        onChange
+      } = this.props;
+      if (!showRawHTML) onChange(html, delta, source, editor);
     };
-    this.onChangeTextArea = (e) => {
-      const { showRawHTML, onChange } = this.props;
-      if (showRawHTML)
-        onChange(e.target.value);
+
+    this.onChangeTextArea = e => {
+      const {
+        showRawHTML,
+        onChange
+      } = this.props;
+      if (showRawHTML) onChange(e.target.value);
     };
-    this.onInserFieldConfirm = (fieldCode) => {
+
+    this.onInserFieldConfirm = fieldCode => {
       const editor = this.getEditor();
       const range = editor.getSelection(true);
       editor.insertText(range.index, fieldCode);
     };
-    this.onImageConfirm = (image) => {
+
+    this.onImageConfirm = image => {
       if (!image) {
         return;
       }
+
       const editor = this.getEditor();
       const range = editor.getSelection(true);
-      editor.insertEmbed(range.index, "image", image.url);
+      editor.insertEmbed(range.index, 'image', image.url);
     };
+
     this.onFieldModalClose = () => {
-      this.setState({ isFieldModalOpen: false });
+      this.setState({
+        isFieldModalOpen: false
+      });
     };
+
     this.onImageModalClose = () => {
-      this.setState({ isImageModalOpen: false });
+      this.setState({
+        isImageModalOpen: false
+      });
     };
-    this.quillRef = (ref) => {
+
+    this.quillRef = ref => {
       this.quill = ref;
     };
-    import_react_quill.Quill.register(import_LinkFormat.default, true);
+
+    ReactQuill.Quill.register(LinkFormat, true);
+
     if (props.quillOverrides.length) {
-      props.quillOverrides.map((override) => import_react_quill.Quill.register(override, true));
+      props.quillOverrides.map(override => ReactQuill.Quill.register(override, true));
     }
+
     this.state = {
       isImageModalOpen: false,
       isFieldModalOpen: false
     };
-    const { toolbar } = this.quillModules;
+    const {
+      toolbar
+    } = this.quillModules;
+
     if (props.imagesData) {
-      toolbar.handlers.image = (value) => {
-        const { imagesData, handleImageClick } = this.props;
+      toolbar.handlers.image = value => {
+        const {
+          imagesData,
+          handleImageClick
+        } = this.props;
+
         if (!imagesData.length) {
           return;
         }
-        this.setState({ isImageModalOpen: !!value });
+
+        this.setState({
+          isImageModalOpen: !!value
+        });
         handleImageClick(value);
       };
     }
+
     if (props.customFields) {
-      toolbar.handlers.customFields = (value) => {
-        const { customFields, handleCustomFieldClick } = this.props;
+      toolbar.handlers.customFields = value => {
+        const {
+          customFields,
+          handleCustomFieldClick
+        } = this.props;
+
         if (!customFields.length) {
           return;
         }
-        this.setState({ isFieldModalOpen: !!value });
+
+        this.setState({
+          isFieldModalOpen: !!value
+        });
         handleCustomFieldClick(value);
       };
     }
   }
+
   componentDidMount() {
+    // this.quill doesn't exist untill the full call-stack execute
+    // we need to "setTimeout" so this componentDidMount work as expected
     setTimeout(() => {
       const quillDomRef = this.quill;
       const editor = quillDomRef.getEditor();
-      this.props.getQuillRef(quillDomRef);
-      editor.clipboard.addMatcher("a", import_clipboardLinkWithTagMatcher.clipboardLinkWithTagMatcher);
+      this.props.getQuillRef(quillDomRef); // https://github.com/quilljs/quill/issues/2677
+
+      editor.clipboard.addMatcher('a', clipboardLinkWithTagMatcher.clipboardLinkWithTagMatcher);
     });
-  }
+  } // eslint-disable-next-line max-params
+
+
   getEditor() {
     return this.quill.getEditor();
   }
+
   render() {
-    const { isFieldModalOpen, isImageModalOpen } = this.state;
     const {
+      isFieldModalOpen,
+      isImageModalOpen
+    } = this.state;
+
+    const _this$props = this.props,
+          {
       containerProps = {},
       customFields,
       imagesData,
@@ -169,50 +205,52 @@ class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
       showRawHTML,
       onShowHTML,
       onChange,
-      hideItems,
-      ...editorProps
-    } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement("div", {
-      ...containerProps,
-      className: `quill-wysiwyg-editor ${showRawHTML ? "show-raw" : ""}`
-    }, customToolbar || /* @__PURE__ */ import_react.default.createElement(import_CustomToolbar.CustomToolbar, {
-      customFields,
-      onShowHTML,
-      hideItems,
-      userProps: this.props
-    }), /* @__PURE__ */ import_react.default.createElement(import_react_quill.default, {
-      ref: this.quillRef,
-      modules: this.quillModules,
-      onChange: this.onChangeQuill,
-      value,
-      style: {
-        height,
-        borderBottom: "1px solid #ccc"
-      },
-      ...editorProps,
-      id: "wysiwyg-text-container"
-    }), /* @__PURE__ */ import_react.default.createElement("textarea", {
-      className: "raw-editor ql-container ql-snow ql-editor",
-      style: {
-        width: "100%",
-        resize: "none",
-        height,
-        minHeight: "200px"
-      },
-      onChange: this.onChangeTextArea,
-      value: (0, import_utils.formatHTML)(value)
-    }), imagesData && imagesData.length && /* @__PURE__ */ import_react.default.createElement(import_ImageLibraryModal.default, {
-      imagesData,
-      isOpen: isImageModalOpen,
-      onClose: this.onImageModalClose,
-      onConfirm: this.onImageConfirm
-    }), customFields && customFields.length && /* @__PURE__ */ import_react.default.createElement(import_InsertFieldModal.default, {
-      customFields,
-      isOpen: isFieldModalOpen,
-      onClose: this.onFieldModalClose,
-      onConfirm: this.onInserFieldConfirm
+      hideItems
+    } = _this$props,
+          editorProps = _objectWithoutProperties__default["default"](_this$props, _excluded);
+
+    return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "quill-wysiwyg-editor ".concat(showRawHTML ? 'show-raw' : ''),
+      children: [customToolbar || /*#__PURE__*/_jsx__default["default"](CustomToolbar.CustomToolbar, {
+        customFields: customFields,
+        onShowHTML: onShowHTML,
+        hideItems: hideItems,
+        userProps: this.props
+      }), /*#__PURE__*/jsxRuntime.jsx(ReactQuill__default["default"], _objectSpread(_objectSpread({
+        ref: this.quillRef,
+        modules: this.quillModules,
+        onChange: this.onChangeQuill,
+        value: value,
+        style: {
+          height,
+          borderBottom: '1px solid #ccc'
+        }
+      }, editorProps), {}, {
+        id: "wysiwyg-text-container"
+      })), /*#__PURE__*/_jsx__default["default"]("textarea", {
+        className: "raw-editor ql-container ql-snow ql-editor",
+        style: {
+          width: '100%',
+          resize: 'none',
+          height,
+          minHeight: '200px'
+        },
+        onChange: this.onChangeTextArea,
+        value: utils.formatHTML(value)
+      }), imagesData && imagesData.length && /*#__PURE__*/_jsx__default["default"](ImageLibraryModal, {
+        imagesData: imagesData,
+        isOpen: isImageModalOpen,
+        onClose: this.onImageModalClose,
+        onConfirm: this.onImageConfirm
+      }), customFields && customFields.length && /*#__PURE__*/_jsx__default["default"](InsertFieldModal, {
+        customFields: customFields,
+        isOpen: isFieldModalOpen,
+        onClose: this.onFieldModalClose,
+        onConfirm: this.onInserFieldConfirm
+      })]
     }));
   }
+
 }
-module.exports = __toCommonJS(DSWYSIWYGEditorImpl_exports);
-//# sourceMappingURL=DSWYSIWYGEditorImpl.js.map
+
+module.exports = DSWYSIWYGEditorImpl;

package/cjs/components/ImageLibraryModal.js

@@ -1,92 +1,72 @@
-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 ImageLibraryModal_exports = {};
-__export(ImageLibraryModal_exports, {
-  default: () => ImageLibraryModal
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_imagelibrarymodal = __toESM(require("@elliemae/ds-imagelibrarymodal"));
-var import_prop_types = __toESM(require("prop-types"));
-class ImageLibraryModal extends import_react.default.PureComponent {
+'use strict';
+
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var DSImageLibraryModal = require('@elliemae/ds-imagelibrarymodal');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSImageLibraryModal__default = /*#__PURE__*/_interopDefaultLegacy(DSImageLibraryModal);
+
+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; }
+class ImageLibraryModal extends React__default["default"].PureComponent {
   constructor(props) {
     super(props);
-    this.onSelect = (selectedImage) => {
-      this.setState({ selectedImage });
+
+    this.onSelect = selectedImage => {
+      this.setState({
+        selectedImage
+      });
     };
+
     this.onConfirm = () => {
-      const { selectedImage } = this.state;
-      const { onConfirm, onClose } = this.props;
+      const {
+        selectedImage
+      } = this.state;
+      const {
+        onConfirm,
+        onClose
+      } = this.props;
       onConfirm(selectedImage);
       onClose();
     };
+
     this.state = {
-      selectedImage: void 0
+      selectedImage: undefined
     };
   }
+
   render() {
-    return /* @__PURE__ */ import_react.default.createElement(import_ds_imagelibrarymodal.default, {
-      ...this.props,
+    return /*#__PURE__*/jsxRuntime.jsx(DSImageLibraryModal__default["default"], _objectSpread(_objectSpread({}, this.props), {}, {
       onConfirm: this.onConfirm,
       onSelect: this.onSelect
-    });
+    }));
   }
+
 }
-ImageLibraryModal.propTypes = {
-  onConfirm: import_prop_types.default.func.isRequired,
-  onClose: import_prop_types.default.func.isRequired,
-  onReject: import_prop_types.default.func,
-  imagesData: import_prop_types.default.arrayOf(import_prop_types.default.shape({
-    id: import_prop_types.default.string,
-    url: import_prop_types.default.string.isRequired,
-    name: import_prop_types.default.string.isRequired,
-    description: import_prop_types.default.string,
-    createdBy: import_prop_types.default.string.isRequired,
-    createdDate: import_prop_types.default.string.isRequired
-  })),
-  isOpen: import_prop_types.default.bool.isRequired
-};
 ImageLibraryModal.defaultProps = {
-  onReject: void 0,
-  imagesData: [
-    {
-      url: "https://www.freeiconspng.com/minicovers/no-image-icon-6.png",
-      name: "no image",
-      createdBy: "user:John Doe",
-      createdDate: "0000-01-01 00:00 AM UTC"
-    },
-    {
-      url: "https://asset-service-bucket-int.s3.us-west-2.amazonaws.com/bd527d8c-472f-4dff-b8c5-1c90d5bae01e",
-      name: "no image 2",
-      createdBy: "user:Jane Doe",
-      createdDate: "0000-01-01 00:00 AM UTC"
-    }
-  ]
+  onReject: undefined,
+  imagesData: [{
+    url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',
+    name: 'no image',
+    createdBy: 'user:John Doe',
+    createdDate: '0000-01-01 00:00 AM UTC'
+  }, {
+    url: 'https://asset-service-bucket-int.s3.us-west-2.amazonaws.com/bd527d8c-472f-4dff-b8c5-1c90d5bae01e',
+    name: 'no image 2',
+    createdBy: 'user:Jane Doe',
+    createdDate: '0000-01-01 00:00 AM UTC'
+  }]
 };
-module.exports = __toCommonJS(ImageLibraryModal_exports);
-//# sourceMappingURL=ImageLibraryModal.js.map
+
+module.exports = ImageLibraryModal;