@elliemae/ds-wysiwygeditor 2.0.0-next.0 → 2.0.0-next.13

package/cjs/components/TippedButton.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var dsTooltip = require('@elliemae/ds-tooltip');
+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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["className", "tip", "children", "onClick", "zIndex"];
+
+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; }
+
+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; }
+const TippedButton = _ref => {
+  let {
+    className,
+    tip,
+    children,
+    onClick = () => null,
+    zIndex = 1
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "tooltip"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTooltip.DSTooltipV3, {
+    text: tip,
+    zIndex: zIndex
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread(_objectSpread({
+    type: "button",
+    className: className,
+    onClick: e => {
+      e.preventDefault();
+      onClick(e);
+    }
+  }, rest), {}, {
+    children: children
+  }))));
+};
+
+exports.TippedButton = TippedButton;

package/cjs/components/TippedSelect.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('react');
+var dsTooltip = require('@elliemae/ds-tooltip');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const TippedSelect = props => {
+  const {
+    tip,
+    onChange = () => null,
+    className,
+    options,
+    defaultValue = '',
+    values,
+    zIndex,
+    children
+  } = props;
+  const fallBackChildren = values && values.map((value, index) => /*#__PURE__*/_jsx__default["default"]("option", {
+    value: value === 'normal' ? '' : value
+  }, value, options ? options[index] : null));
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "tooltip"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTooltip.DSTooltipV3, {
+    text: tip,
+    zIndex: zIndex
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"]("select", {
+    className: className,
+    defaultValue: defaultValue,
+    onChange: e => {
+      e.persist();
+      onChange(e);
+    }
+  }, void 0, children || fallBackChildren))));
+};
+
+exports.TippedSelect = TippedSelect;

package/cjs/components/colors.js

@@ -2,14 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+
 function sinToHex(i, size, phase) {
   const sin = Math.sin(Math.PI / size * 2 * i + phase);
   const int = Math.floor(sin * 127) + 128;
   const hex = int.toString(16);
-  return hex.length === 1 ? `0${hex}` : hex;
+  return hex.length === 1 ? "0".concat(hex) : hex;
 }
 
-function getRainbowColors(size = 28) {
+function getRainbowColors() {
+  let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 28;
   const colors = new Array(size).fill(undefined);
   return colors.map((color, idx) => {
     const red = sinToHex(idx, size, 0 * Math.PI * 2 / 3); // 0   deg
@@ -18,7 +22,7 @@ function getRainbowColors(size = 28) {
 
     const green = sinToHex(idx, size, 2 * Math.PI * 2 / 3); // 240 deg
 
-    color = `#${red}${green}${blue}`;
+    color = "#".concat(red).concat(green).concat(blue);
     return color;
   });
 }

package/cjs/components/customFields.js

@@ -2,6 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+
+var _this = undefined;
 const fields = ['Lender Name ­ «315»', 'Lender Address ­ «319»', 'Lender City ­ «313»', 'Lender State ­ «321»', 'Lender Zip ­ «323»', 'Borrower First Name ­ «4000»', 'Borrower Last Name ­ «4002»', 'Total Loan Amount ­ «2»', 'Loan Term ­ «4»', 'Loan to Value ­ «976»', 'Monthly Payment ­ «912»', 'Interest Rate ­ «3»', 'Loan Originator Name ­ «1612»', 'Loan Originator Email ­ «3968»', 'Loan Originator Phone ­ «1823»', 'NMLS Loan Originator ID ­ «3238»'];
 /**
  * Returns the fields names
@@ -9,13 +13,16 @@ const fields = ['Lender Name ­ «315»', 'Lender Address ­ «319»', 'Lender C
  * @param customFields
  */
 
-const getFields = (customFields = fields) => customFields.map((opt, index) => ({
-  id: `${opt}_${index}`,
-  // icon: 'ADD',
-  label: `${opt}`,
-  onClick: opt.indexOf('«') !== -1 ? () => undefined.onOptionClick(undefined.getFieldCode(opt)) : null,
-  type: opt === '' ? 'separator' : null
-}));
+const getFields = function () {
+  let customFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : fields;
+  return customFields.map((opt, index) => ({
+    id: "".concat(opt, "_").concat(index),
+    // icon: 'ADD',
+    label: "".concat(opt),
+    onClick: opt.indexOf('«') !== -1 ? () => _this.onOptionClick(_this.getFieldCode(opt)) : null,
+    type: opt === '' ? 'separator' : null
+  }));
+};
 /**
  * Returns a field's name
  *

package/cjs/constants.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var colors$1 = require('./components/colors.js');
 
 const colors = ['#000000', '#e60000', '#ff9900', '#ffff00', '#008A00', '#0066cc', '#9933ff', '#ffffff', '#facccc', '#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff', '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966', '#66a3e0', '#c285ff', '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2', '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466', ...colors$1.getRainbowColors(28)];

package/cjs/index.js

@@ -13,8 +13,6 @@ exports.WYSIWYWithSchema = DSWYSIWYGEditor.WYSIWYWithSchema;
 exports["default"] = DSWYSIWYGEditor["default"];
 exports.CustomDropdown = CustomToolbar.CustomDropdown;
 exports.CustomToolbar = CustomToolbar.CustomToolbar;
-exports.TippedButton = CustomToolbar.TippedButton;
-exports.TippedSelect = CustomToolbar.TippedSelect;
 exports.CustomImageUploader = CustomImageUploader.CustomImageUploader;
 exports.colors = constants.colors;
 exports.defaultItems = constants.defaultItems;

package/cjs/quillMatchers/clipboardLinkWithTagMatcher.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/es.string.replace.js');
+
+const hrefTagRegexp = /%7B%7B.+%7D%7D/gm;
+const clipboardLinkWithTagMatcher = (node, delta) => {
+  if (node.origin === window.location.origin) {
+    const nodeHref = node.href;
+    const tagMatch = nodeHref.match(hrefTagRegexp);
+
+    if (tagMatch) {
+      var _delta$ops;
+
+      const [overWrittenHrefValue] = tagMatch;
+      const insertLinkOperation = delta === null || delta === void 0 ? void 0 : (_delta$ops = delta.ops) === null || _delta$ops === void 0 ? void 0 : _delta$ops.find(operation => {
+        var _operation$attributes, _operation$attributes2, _operation$attributes3;
+
+        return operation === null || operation === void 0 ? void 0 : (_operation$attributes = operation.attributes) === null || _operation$attributes === void 0 ? void 0 : (_operation$attributes2 = _operation$attributes.link) === null || _operation$attributes2 === void 0 ? void 0 : (_operation$attributes3 = _operation$attributes2.match) === null || _operation$attributes3 === void 0 ? void 0 : _operation$attributes3.call(_operation$attributes2, hrefTagRegexp);
+      });
+      if (insertLinkOperation) insertLinkOperation.attributes.link = overWrittenHrefValue.replace(/%7B%7B/gm, '{{').replace(/%7D%7D/gm, '}}');
+    }
+  }
+
+  return delta;
+};
+
+exports.clipboardLinkWithTagMatcher = clipboardLinkWithTagMatcher;

package/cjs/quillOverrides/IndentStyle.js

@@ -8,7 +8,7 @@ const multiplier = 2;
 
 class IndentAttributor extends Parchment.Attributor.Style {
   add(node, value) {
-    return super.add(node, `${value * multiplier}em`);
+    return super.add(node, "".concat(value * multiplier, "em"));
   }
 
   value(node) {
@@ -23,7 +23,7 @@ class IndentAttributor extends Parchment.Attributor.Style {
 
 const IndentStyle = new IndentAttributor('indent', 'margin-left', {
   scope: Parchment.Scope.BLOCK,
-  whitelist: levels.map(value => `${value * multiplier}em`)
+  whitelist: levels.map(value => "".concat(value * multiplier, "em"))
 });
 
 module.exports = IndentStyle;

package/cjs/quillOverrides/LinkFormat.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
 var ReactQuill = require('react-quill');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,8 +14,8 @@ const sanitizeProtocol = value => {
 
   if (!value.startsWith('http') && !value.startsWith('ftp') && !value.startsWith('mailto:') && !value.startsWith('{{')) {
     if (!value.startsWith('www')) {
-      newVal = `https://www.${value}`;
-    } else newVal = `https://${value}`;
+      newVal = "https://www.".concat(value);
+    } else newVal = "https://".concat(value);
   }
 
   return newVal;
@@ -30,8 +31,8 @@ function getIsValidProtocol(url, protocols) {
 const Link = ReactQuill.Quill.import('formats/link');
 
 class LinkFormat extends Link {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
 
     _defineProperty__default["default"](this, "blotName", 'link');
 

package/cjs/quillOverrides/PlainClipboard.js

@@ -9,7 +9,9 @@ const Delta = ReactQuill.Quill.import('delta');
  */
 
 class PlainClipboard extends Clipboard {
-  convert(html = null) {
+  convert() {
+    let html = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
     if (typeof html === 'string') {
       this.container.innerHTML = html;
     }

package/cjs/utils.js

@@ -2,6 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+
 const formatHTML = html => {
   const tab = '\t';
   let result = '';
@@ -11,7 +15,7 @@ const formatHTML = html => {
       indent = indent.substring(tab.length);
     }
 
-    result += `${indent}<${element}>\r\n`;
+    result += "".concat(indent, "<").concat(element, ">\r\n");
 
     if (element.match(/^<?\w[^>]*[^/]$/)) {
       indent += tab;

package/esm/DSWYSIWYGEditor.js

@@ -1,5 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 { useState, useEffect } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl.js';
@@ -49,11 +55,7 @@ const DSWYSIWYGEditor = _ref => {
 
 const wysiwygEditorProps = {
   value: PropTypes.string.description('editors value').isRequired,
-  onChange: 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(). 
-    ⚠️ 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,
+  onChange: 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: PropTypes.func.description('function to use quill.js ref'),
   quillModules: PropTypes.object.description('object to override quill modules'),
   customToolbar: PropTypes.element.description('custom toolbar'),
@@ -61,7 +63,8 @@ const wysiwygEditorProps = {
   showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),
   height: PropTypes.string.description('heigth of the editors text area'),
   readOnly: PropTypes.string.description("If true, the editor won't allow changing its contents. Wraps the Quill disable API."),
-  hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({})
+  hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),
+  zIndex: PropTypes.number.description('zIndex to be used (required when used in a modal for correct tooltips displaying)')
 };
 const WYSIWYWithSchema = describe(DSWYSIWYGEditor);
 WYSIWYWithSchema.propTypes = wysiwygEditorProps;

package/esm/components/CustomImageUploader.js

@@ -1,21 +1,24 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState } from 'react';
-import Image from '@elliemae/ds-icons/Image';
+import { Image } from '@elliemae/ds-icons';
 import DSUploader from '@elliemae/ds-uploader';
 import DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';
-import { TippedButton } from './CustomToolbar.js';
+import { TippedButton } from './TippedButton.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';
 
 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 = ({
-  quillRef,
-  editorFieldName,
-  allowedImageTypes = ALLOWED_TYPES_TEXT,
-  uploadAsset = () => null
-}) => {
+const CustomImageUploader = _ref => {
+  let {
+    quillRef,
+    editorFieldName,
+    allowedImageTypes = ALLOWED_TYPES_TEXT,
+    uploadAsset = () => null,
+    zIndex = 1
+  } = _ref;
   const [isOpen, setIsOpen] = useState(false);
   const [error, setError] = useState(null);
   const [inProgress, setInProgress] = useState(false);
@@ -23,7 +26,7 @@ const CustomImageUploader = ({
     index: 0,
     length: 0
   });
-  const elementId = `uploadImage${editorFieldName}`; // eslint-disable-next-line consistent-return
+  const elementId = "uploadImage".concat(editorFieldName); // eslint-disable-next-line consistent-return
 
   const handleFileChange = async files => {
     if (!inProgress) {
@@ -69,6 +72,7 @@ const CustomImageUploader = ({
 
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(TippedButton, {
+      zIndex: zIndex,
       tip: "Insert Image",
       onClick: () => {
         setLastSelection(quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().getSelection());