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

package/cjs/quillOverrides/PlainClipboard.js

@@ -1,47 +1,27 @@
-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 PlainClipboard_exports = {};
-__export(PlainClipboard_exports, {
-  default: () => PlainClipboard
-});
-var React = __toESM(require("react"));
-var import_react_quill = __toESM(require("react-quill"));
-const Clipboard = import_react_quill.Quill.import("modules/clipboard");
-const Delta = import_react_quill.Quill.import("delta");
+'use strict';
+
+var ReactQuill = require('react-quill');
+
+const Clipboard = ReactQuill.Quill.import('modules/clipboard');
+const Delta = ReactQuill.Quill.import('delta');
+/**
+ * Just for the sake of an example. https://quilljs.com/docs/modules/
+ */
+
 class PlainClipboard extends Clipboard {
-  convert(html = null) {
-    if (typeof html === "string") {
+  convert() {
+    let html = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+    if (typeof html === 'string') {
       this.container.innerHTML = html;
     }
+
     const text = this.container.innerText;
-    this.container.innerHTML = "";
+    this.container.innerHTML = '';
     return new Delta().insert(text);
   }
-}
-module.exports = __toCommonJS(PlainClipboard_exports);
-//# sourceMappingURL=PlainClipboard.js.map
+
+} // Uncomment if adding custom clipboard, or add in the file you are importing this to
+// Quill.register('modules/clipboard', PlainClipboard)
+
+module.exports = PlainClipboard;

package/cjs/utils.js

@@ -1,50 +1,27 @@
-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 utils_exports = {};
-__export(utils_exports, {
-  formatHTML: () => formatHTML
-});
-var React = __toESM(require("react"));
-const formatHTML = (html) => {
-  const tab = "	";
-  let result = "";
-  let indent = "";
-  html.split(/>\s*</).forEach((element) => {
+'use strict';
+
+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 = '';
+  let indent = '';
+  html.split(/>\s*</).forEach(element => {
     if (element.match(/^\/\w/)) {
       indent = indent.substring(tab.length);
     }
-    result += `${indent}<${element}>\r
-`;
+
+    result += "".concat(indent, "<").concat(element, ">\r\n");
+
     if (element.match(/^<?\w[^>]*[^/]$/)) {
       indent += tab;
     }
   });
   return result.substring(1, result.length - 3);
 };
-module.exports = __toCommonJS(utils_exports);
-//# sourceMappingURL=utils.js.map
+
+exports.formatHTML = formatHTML;

package/esm/DSWYSIWYGEditor.js

@@ -1,64 +1,72 @@
-import * as React from "react";
-import React2, { useState, useEffect } from "react";
-import { describe, PropTypes } from "react-desc";
-import DSWYSIWYGEditorImpl from "./components/DSWYSIWYGEditorImpl";
-const DSWYSIWYGEditor = ({
-  value = "",
-  onChange = () => null,
-  getQuillRef = () => null,
-  quillModules = {},
-  customToolbar,
-  toolbarHandlers,
-  showRawHTML = false,
-  height,
-  hideItems,
-  ...rest
-}) => {
-  const emptyAction = () => {
-  };
+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';
+import { jsx } from 'react/jsx-runtime';
+
+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(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(_ref, _excluded);
+
+  const emptyAction = () => {};
+
   const [showHTML, setShowHTML] = useState(showRawHTML);
   useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);
-  return /* @__PURE__ */ React2.createElement(DSWYSIWYGEditorImpl, {
+  return /*#__PURE__*/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: 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(). 
-    \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: PropTypes.func.description("function to use quill.js ref"),
-  quillModules: PropTypes.object.description("object to override quill modules"),
-  customToolbar: PropTypes.element.description("custom toolbar"),
-  toolbarHandlers: PropTypes.object.description("object with toolbar handlers"),
-  showRawHTML: PropTypes.bool.description("whether to display html view or not").defaultValue(false),
-  height: PropTypes.string.description("heigth of the editors text area"),
+  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. \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'),
+  toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),
+  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({}),
-  zIndex: PropTypes.number.description("zIndex to be used (required when used in a modal for correct tooltips displaying)")
+  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)')
 };
-DSWYSIWYGEditor.propTypes = wysiwygEditorProps;
 const WYSIWYWithSchema = describe(DSWYSIWYGEditor);
 WYSIWYWithSchema.propTypes = wysiwygEditorProps;
-var DSWYSIWYGEditor_default = DSWYSIWYGEditor;
-export {
-  WYSIWYWithSchema,
-  DSWYSIWYGEditor_default as default
-};
-//# sourceMappingURL=DSWYSIWYGEditor.js.map
+
+export { WYSIWYWithSchema, DSWYSIWYGEditor as default };

package/esm/components/CustomImageUploader.js

@@ -1,40 +1,53 @@
-import * as React from "react";
-import React2, { useState } from "react";
-import { Image } from "@elliemae/ds-icons";
-import DSUploader from "@elliemae/ds-uploader";
-import DSModal, { MODAL_TYPE_V2 } from "@elliemae/ds-modal";
-import { TippedButton } from "./TippedButton";
-const ALLOWED_TYPES_TEXT = "JPG, JPEG, PNG, GIF, BMP, TIFF";
+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';
+import DSUploader from '@elliemae/ds-uploader';
+import DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';
+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;
-const CustomImageUploader = ({
-  quillRef,
-  editorFieldName,
-  allowedImageTypes = ALLOWED_TYPES_TEXT,
-  uploadAsset = () => null,
-  zIndex = 1
-}) => {
+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] = useState(false);
   const [error, setError] = useState(null);
   const [inProgress, setInProgress] = useState(false);
-  const [lastSelection, setLastSelection] = useState({ index: 0, length: 0 });
-  const elementId = `uploadImage${editorFieldName}`;
-  const handleFileChange = async (files) => {
+  const [lastSelection, setLastSelection] = 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,
@@ -44,51 +57,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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex,
-    tip: "Insert Image",
-    onClick: () => {
-      setLastSelection(quillRef?.getEditor().getSelection());
-      setIsOpen(true);
-    }
-  }, /* @__PURE__ */ React2.createElement(Image, {
-    color: ["neutral", 500],
-    size: "s"
-  })), /* @__PURE__ */ React2.createElement(DSModal, {
-    isOpen,
-    title: "",
-    onConfirm: () => {
-      setIsOpen(false);
-    },
-    onClose: () => {
-      setIsOpen(false);
-    },
-    showClose: true,
-    version: 2,
-    size: "xsmall",
-    modalType: MODAL_TYPE_V2.DECISION,
-    confirmLabel: "Cancel",
-    message: ""
-  }, !inProgress && /* @__PURE__ */ React2.createElement(DSUploader, {
-    containerProps: { id: elementId },
-    showAltAction: false,
-    acceptedTypesText: allowedImageTypes,
-    onDrop: handleFileChange
-  }), inProgress && "Upload in progress...", error && /* @__PURE__ */ React2.createElement("div", {
-    style: { color: "red", marginTop: "10px" }
-  }, error)));
-};
-export {
-  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());
+        setIsOpen(true);
+      }
+    }, void 0, /*#__PURE__*/_jsx(Image, {
+      color: ['neutral', 500],
+      size: "s"
+    })), /*#__PURE__*/_jsx(DSModal, {
+      isOpen: isOpen,
+      title: "",
+      onConfirm: () => {
+        setIsOpen(false);
+      },
+      onClose: () => {
+        setIsOpen(false);
+      },
+      showClose: true,
+      version: 2,
+      size: "xsmall",
+      modalType: MODAL_TYPE_V2.DECISION,
+      confirmLabel: "Cancel",
+      message: ""
+    }, void 0, !inProgress && /*#__PURE__*/_jsx(DSUploader, {
+      containerProps: {
+        id: elementId
+      },
+      showAltAction: false,
+      acceptedTypesText: allowedImageTypes,
+      onDrop: handleFileChange
+    }), inProgress && 'Upload in progress...', error && /*#__PURE__*/_jsx("div", {
+      style: {
+        color: 'red',
+        marginTop: '10px'
+      }
+    }, void 0, error))]
+  });
 };
-//# sourceMappingURL=CustomImageUploader.js.map
+
+export { CustomImageUploader };