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

package/esm/components/DSWYSIWYGEditorImpl.js

@@ -1,132 +1,188 @@
-import * as React from "react";
-import React2 from "react";
-import ReactQuill, { Quill } from "react-quill";
-import BlotFormatter from "quill-blot-formatter";
-import ImageLibraryModal from "./ImageLibraryModal";
-import InsertFieldModal from "./InsertFieldModal";
-import { CustomToolbar } from "./CustomToolbar";
-import IndentStyle from "../quillOverrides/IndentStyle";
-import LinkFormat from "../quillOverrides/LinkFormat";
-import { formatHTML } from "../utils";
-import { clipboardLinkWithTagMatcher } from "../quillMatchers/clipboardLinkWithTagMatcher";
-Quill.register("modules/blotFormatter", BlotFormatter);
-const AlignStyle = Quill.import("attributors/style/align");
-const FontStyle = Quill.import("attributors/style/font");
-FontStyle.whitelist = [
-  "serif",
-  "monospace",
-  "arial",
-  "comic-sans",
-  "courier-new",
-  "georgia",
-  "helvetica",
-  "lucida"
-];
-const SizeStyle = Quill.import("attributors/style/size");
-SizeStyle.whitelist = [
-  "x-small",
-  "large",
-  "x-large"
-];
-const Block = Quill.import("blots/block");
-Block.tagName = "p";
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React from 'react';
+import ReactQuill, { Quill } from 'react-quill';
+import BlotFormatter from 'quill-blot-formatter';
+import ImageLibraryModal from './ImageLibraryModal.js';
+import InsertFieldModal from './InsertFieldModal.js';
+import { CustomToolbar } from './CustomToolbar.js';
+import IndentStyle from '../quillOverrides/IndentStyle.js';
+import LinkFormat from '../quillOverrides/LinkFormat.js';
+import { formatHTML } from '../utils.js';
+import { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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(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; }
+Quill.register('modules/blotFormatter', BlotFormatter); // Fix block styled formats ----------------
+
+const AlignStyle = Quill.import('attributors/style/align');
+const FontStyle = 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 = 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 = Quill.import('blots/block');
+Block.tagName = 'p';
 Quill.register(Block);
 Quill.register(AlignStyle, true);
 Quill.register(IndentStyle, true);
 Quill.register(FontStyle, true);
-Quill.register(SizeStyle, true);
-class DSWYSIWYGEditorImpl extends React2.PureComponent {
+Quill.register(SizeStyle, true); // -----------------------------------------
+
+class DSWYSIWYGEditorImpl extends React.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;
     };
+
     Quill.register(LinkFormat, true);
+
     if (props.quillOverrides.length) {
-      props.quillOverrides.map((override) => Quill.register(override, true));
+      props.quillOverrides.map(override => 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", clipboardLinkWithTagMatcher);
+      this.props.getQuillRef(quillDomRef); // https://github.com/quilljs/quill/issues/2677
+
+      editor.clipboard.addMatcher('a', 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,
@@ -138,52 +194,52 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
       showRawHTML,
       onShowHTML,
       onChange,
-      hideItems,
-      ...editorProps
-    } = this.props;
-    return /* @__PURE__ */ React2.createElement("div", {
-      ...containerProps,
-      className: `quill-wysiwyg-editor ${showRawHTML ? "show-raw" : ""}`
-    }, customToolbar || /* @__PURE__ */ React2.createElement(CustomToolbar, {
-      customFields,
-      onShowHTML,
-      hideItems,
-      userProps: this.props
-    }), /* @__PURE__ */ React2.createElement(ReactQuill, {
-      ref: this.quillRef,
-      modules: this.quillModules,
-      onChange: this.onChangeQuill,
-      value,
-      style: {
-        height,
-        borderBottom: "1px solid #ccc"
-      },
-      ...editorProps,
-      id: "wysiwyg-text-container"
-    }), /* @__PURE__ */ React2.createElement("textarea", {
-      className: "raw-editor ql-container ql-snow ql-editor",
-      style: {
-        width: "100%",
-        resize: "none",
-        height,
-        minHeight: "200px"
-      },
-      onChange: this.onChangeTextArea,
-      value: formatHTML(value)
-    }), imagesData && imagesData.length && /* @__PURE__ */ React2.createElement(ImageLibraryModal, {
-      imagesData,
-      isOpen: isImageModalOpen,
-      onClose: this.onImageModalClose,
-      onConfirm: this.onImageConfirm
-    }), customFields && customFields.length && /* @__PURE__ */ React2.createElement(InsertFieldModal, {
-      customFields,
-      isOpen: isFieldModalOpen,
-      onClose: this.onFieldModalClose,
-      onConfirm: this.onInserFieldConfirm
+      hideItems
+    } = _this$props,
+          editorProps = _objectWithoutProperties(_this$props, _excluded);
+
+    return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "quill-wysiwyg-editor ".concat(showRawHTML ? 'show-raw' : ''),
+      children: [customToolbar || /*#__PURE__*/_jsx(CustomToolbar, {
+        customFields: customFields,
+        onShowHTML: onShowHTML,
+        hideItems: hideItems,
+        userProps: this.props
+      }), /*#__PURE__*/jsx(ReactQuill, _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("textarea", {
+        className: "raw-editor ql-container ql-snow ql-editor",
+        style: {
+          width: '100%',
+          resize: 'none',
+          height,
+          minHeight: '200px'
+        },
+        onChange: this.onChangeTextArea,
+        value: formatHTML(value)
+      }), imagesData && imagesData.length && /*#__PURE__*/_jsx(ImageLibraryModal, {
+        imagesData: imagesData,
+        isOpen: isImageModalOpen,
+        onClose: this.onImageModalClose,
+        onConfirm: this.onImageConfirm
+      }), customFields && customFields.length && /*#__PURE__*/_jsx(InsertFieldModal, {
+        customFields: customFields,
+        isOpen: isFieldModalOpen,
+        onClose: this.onFieldModalClose,
+        onConfirm: this.onInserFieldConfirm
+      })]
     }));
   }
+
 }
-export {
-  DSWYSIWYGEditorImpl as default
-};
-//# sourceMappingURL=DSWYSIWYGEditorImpl.js.map
+
+export { DSWYSIWYGEditorImpl as default };

package/esm/components/ImageLibraryModal.js

@@ -1,63 +1,64 @@
-import * as React from "react";
-import React2 from "react";
-import DSImageLibraryModal from "@elliemae/ds-imagelibrarymodal";
-import PropTypes from "prop-types";
-class ImageLibraryModal extends React2.PureComponent {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import React from 'react';
+import DSImageLibraryModal from '@elliemae/ds-imagelibrarymodal';
+import { jsx } from 'react/jsx-runtime';
+
+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(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.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__ */ React2.createElement(DSImageLibraryModal, {
-      ...this.props,
+    return /*#__PURE__*/jsx(DSImageLibraryModal, _objectSpread(_objectSpread({}, this.props), {}, {
       onConfirm: this.onConfirm,
       onSelect: this.onSelect
-    });
+    }));
   }
+
 }
-ImageLibraryModal.propTypes = {
-  onConfirm: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onReject: PropTypes.func,
-  imagesData: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    createdBy: PropTypes.string.isRequired,
-    createdDate: PropTypes.string.isRequired
-  })),
-  isOpen: PropTypes.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"
-    }
-  ]
-};
-export {
-  ImageLibraryModal as default
+  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'
+  }]
 };
-//# sourceMappingURL=ImageLibraryModal.js.map
+
+export { ImageLibraryModal as default };