@elliemae/ds-wysiwygeditor 2.3.1 → 3.0.0-alpha.3

package/dist/esm/components/CustomToolbar.js

@@ -0,0 +1,232 @@
+import * as React from "react";
+import React2, { useState } from "react";
+import DSButton from "@elliemae/ds-button";
+import { ArrowheadDown } from "@elliemae/ds-icons";
+import DSDropdownMenu from "@elliemae/ds-dropdownmenu";
+import { colors, fonts, sizes, sizesReal } from "../constants";
+import { TippedButton } from "./TippedButton";
+import { TippedSelect } from "./TippedSelect";
+const optionsToValues = (options) => options.map((opt) => opt.toLowerCase().replace(" ", "-"));
+const CustomFields = () => /* @__PURE__ */ React2.createElement("span", null, "\u1438\u1433");
+const Color = ({ color }) => /* @__PURE__ */ React2.createElement("option", {
+  value: color
+});
+const Colors = ({ className, tip, zIndex }) => /* @__PURE__ */ React2.createElement(TippedSelect, {
+  className,
+  tip,
+  zIndex
+}, colors.map((color) => /* @__PURE__ */ React2.createElement(Color, {
+  key: color,
+  color
+})));
+const CustomDropdown = ({
+  options,
+  label,
+  onSelectMenuItem = () => null,
+  onClickOutsideMenu = () => null,
+  onClose = () => null,
+  closeMenuOnItemSelection,
+  isOpen,
+  minWidth,
+  maxWidth,
+  zIndex = 10
+}) => /* @__PURE__ */ React2.createElement(DSDropdownMenu, {
+  onClickOutsideMenu,
+  options,
+  onSelectMenuItem,
+  onClose,
+  closeMenuOnItemSelection,
+  isOpen,
+  minWidth,
+  maxWidth,
+  zIndex,
+  preventOverflow: "scrollParent",
+  triggerComponent: /* @__PURE__ */ React2.createElement(DSButton, {
+    labelText: label,
+    buttonType: "text",
+    icon: /* @__PURE__ */ React2.createElement(ArrowheadDown, null)
+  })
+});
+const Divider = () => /* @__PURE__ */ React2.createElement("div", {
+  style: {
+    height: "21px",
+    width: "1px",
+    margin: "0 10px",
+    padding: "0",
+    borderLeft: "1px solid #bbb",
+    display: "inline-block"
+  }
+});
+const CustomToolbar = ({
+  customFields,
+  customItems = [],
+  hideItems = {},
+  onShowHTML = () => {
+  },
+  id = "toolbar",
+  userProps
+}) => {
+  const {
+    HEADER,
+    FONT,
+    FONT_SIZE,
+    BOLD,
+    ITALIC,
+    UNDERLINE,
+    STRIKE,
+    SUB,
+    SUPER,
+    ORDERED_LIST,
+    BULLET_LIST,
+    INDENT_MINUS_ONE,
+    INDENT_PLUS_ONE,
+    ALIGN,
+    FONT_COLOR,
+    FONT_BACKGROUND_COLOR,
+    HYPERLINK,
+    IMAGE,
+    CLEAR_FORMAT,
+    SHOW_HTML
+  } = hideItems;
+  const [showHTML, setShowHTML] = useState(false);
+  const handleShowHTML = (e) => {
+    e.preventDefault();
+    setShowHTML(!showHTML);
+    onShowHTML();
+  };
+  return /* @__PURE__ */ React2.createElement("div", {
+    id,
+    className: "ds-ql-custom-toolbar"
+  }, (!HEADER || !FONT || !FONT_SIZE) && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, !HEADER && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedSelect, {
+    className: "ql-header",
+    tip: "Header",
+    values: ["", "1", "2", "3", "4", "5", "6"],
+    zIndex: userProps?.zIndex || 1
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), !FONT && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedSelect, {
+    className: "ql-font",
+    defaultValue: "sans-serif",
+    options: fonts,
+    tip: "Font",
+    values: optionsToValues(fonts),
+    zIndex: userProps?.zIndex || 1
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), !FONT_SIZE && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedSelect, {
+    className: "ql-size",
+    options: sizes,
+    tip: "Font Size",
+    values: optionsToValues(sizesReal),
+    zIndex: userProps?.zIndex || 1
+  }), /* @__PURE__ */ React2.createElement(Divider, null))), (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, !BOLD && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-bold",
+    tip: "Bold"
+  }), !ITALIC && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-italic",
+    tip: "Italic"
+  }), !UNDERLINE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-underline",
+    tip: "Underline"
+  }), !STRIKE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-strike",
+    tip: "Strike"
+  })), (!SUB || !SUPER) && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, !SUB && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-script",
+    tip: "Sub",
+    value: "sub"
+  }), !SUPER && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-script",
+    tip: "Super",
+    value: "super"
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), (!ORDERED_LIST || !BULLET_LIST) && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, !ORDERED_LIST && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-list",
+    tip: "Ordered List",
+    value: "ordered"
+  }), !BULLET_LIST && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-list",
+    tip: "Bullet List",
+    value: "bullet"
+  })), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, !INDENT_MINUS_ONE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-indent",
+    tip: "Indent -1",
+    value: "-1"
+  }), !INDENT_PLUS_ONE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-indent",
+    tip: "Indent +1",
+    value: "+1"
+  })), !ALIGN && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, /* @__PURE__ */ React2.createElement(TippedSelect, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-align",
+    tip: "Align"
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, !FONT_COLOR && /* @__PURE__ */ React2.createElement(Colors, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-color",
+    tip: "Font Color"
+  }), !FONT_BACKGROUND_COLOR && /* @__PURE__ */ React2.createElement(Colors, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-background",
+    tip: "Font Background Color"
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), (!HYPERLINK || !IMAGE) && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, !HYPERLINK && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-link",
+    tip: "Hyperlink: Select Text First"
+  }), !IMAGE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-image",
+    tip: "Insert Image"
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), !CLEAR_FORMAT && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-clean",
+    tip: "Clear Format (Select Text)"
+  })), !SHOW_HTML && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    style: {
+      width: "fit-content",
+      color: "#1e79c2",
+      fontWeight: "500"
+    },
+    onClick: handleShowHTML,
+    tip: showHTML ? "SHOW TEXT" : "SHOW HTML",
+    className: "ql-customFields-html"
+  }, showHTML ? "SHOW TEXT" : "SHOW HTML")), customFields && /* @__PURE__ */ React2.createElement("span", {
+    className: "ql-formats"
+  }, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
+    className: "ql-customFields",
+    tip: "Insert Custom Field"
+  }, /* @__PURE__ */ React2.createElement(CustomFields, null))), customItems && /* @__PURE__ */ React2.createElement("span", {
+    style: { display: "inline-flex" }
+  }, customItems.map((Item) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(Item, null)))));
+};
+export {
+  CustomDropdown,
+  CustomToolbar
+};
+//# sourceMappingURL=CustomToolbar.js.map

package/dist/esm/components/CustomToolbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/CustomToolbar.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/control-has-associated-label */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\n/* eslint-disable react/button-has-type */\nimport React, { useState } from 'react';\nimport DSButton from '@elliemae/ds-button';\nimport { ArrowheadDown } from '@elliemae/ds-icons';\nimport DSDropdownMenu from '@elliemae/ds-dropdownmenu';\nimport { colors, fonts, sizes, sizesReal } from '../constants';\nimport { TippedButton } from './TippedButton';\nimport { TippedSelect } from './TippedSelect';\n\n// Functions -----------------------------------------\nconst optionsToValues = (options) => options.map((opt) => opt.toLowerCase().replace(' ', '-'));\n\n// Stateless Components -----------------------------------------\n\nconst CustomFields = () => <span>\u1438\u1433</span>; // eslint-disable-line react/jsx-one-expression-per-line\nconst Color = ({ color }) => <option value={color} />;\nconst Colors = ({ className, tip, zIndex }) => (\n  <TippedSelect className={className} tip={tip} zIndex={zIndex}>\n    {colors.map((color) => (\n      <Color key={color} color={color} />\n    ))}\n  </TippedSelect>\n);\n\nexport const CustomDropdown = ({\n  options,\n  label,\n  onSelectMenuItem = () => null,\n  onClickOutsideMenu = () => null,\n  onClose = () => null,\n  closeMenuOnItemSelection,\n  isOpen,\n  minWidth,\n  maxWidth,\n  zIndex = 10,\n}) => (\n  <DSDropdownMenu\n    onClickOutsideMenu={onClickOutsideMenu}\n    options={options}\n    onSelectMenuItem={onSelectMenuItem}\n    onClose={onClose}\n    closeMenuOnItemSelection={closeMenuOnItemSelection}\n    isOpen={isOpen}\n    minWidth={minWidth}\n    maxWidth={maxWidth}\n    zIndex={zIndex}\n    preventOverflow=\"scrollParent\"\n    triggerComponent={<DSButton labelText={label} buttonType=\"text\" icon={<ArrowheadDown />} />}\n  />\n);\n\nconst Divider = () => (\n  <div\n    style={{\n      height: '21px',\n      width: '1px',\n      margin: '0 10px',\n      padding: '0',\n      borderLeft: '1px solid #bbb',\n      display: 'inline-block',\n    }}\n  ></div>\n);\n\nexport const CustomToolbar = ({\n  customFields,\n  customItems = [],\n  hideItems = {},\n  onShowHTML = () => {},\n  id = 'toolbar',\n  userProps,\n}) => {\n  const {\n    HEADER,\n    FONT,\n    FONT_SIZE,\n    BOLD,\n    ITALIC,\n    UNDERLINE,\n    STRIKE,\n    SUB,\n    SUPER,\n    ORDERED_LIST,\n    BULLET_LIST,\n    INDENT_MINUS_ONE,\n    INDENT_PLUS_ONE,\n    ALIGN,\n    FONT_COLOR,\n    FONT_BACKGROUND_COLOR,\n    HYPERLINK,\n    IMAGE,\n    CLEAR_FORMAT,\n    SHOW_HTML,\n  } = hideItems;\n  const [showHTML, setShowHTML] = useState(false);\n\n  const handleShowHTML = (e) => {\n    e.preventDefault();\n    setShowHTML(!showHTML);\n    onShowHTML();\n  };\n\n  return (\n    <div id={id} className=\"ds-ql-custom-toolbar\">\n      {(!HEADER || !FONT || !FONT_SIZE) && (\n        <span className=\"ql-formats\">\n          {!HEADER && (\n            <>\n              <TippedSelect\n                className=\"ql-header\"\n                tip=\"Header\"\n                values={['', '1', '2', '3', '4', '5', '6']}\n                zIndex={userProps?.zIndex || 1}\n              />\n              <Divider />\n            </>\n          )}\n          {!FONT && (\n            <>\n              <TippedSelect\n                className=\"ql-font\"\n                defaultValue=\"sans-serif\"\n                options={fonts}\n                tip=\"Font\"\n                values={optionsToValues(fonts)}\n                zIndex={userProps?.zIndex || 1}\n              />\n              <Divider />\n            </>\n          )}\n          {!FONT_SIZE && (\n            <>\n              <TippedSelect\n                className=\"ql-size\"\n                options={sizes}\n                tip=\"Font Size\"\n                values={optionsToValues(sizesReal)}\n                zIndex={userProps?.zIndex || 1}\n              />\n              <Divider />\n            </>\n          )}\n        </span>\n      )}\n      {(!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && (\n        <span className=\"ql-formats\">\n          {!BOLD && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-bold\" tip=\"Bold\" />}\n          {!ITALIC && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-italic\" tip=\"Italic\" />}\n          {!UNDERLINE && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-underline\" tip=\"Underline\" />}\n          {!STRIKE && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-strike\" tip=\"Strike\" />}\n        </span>\n      )}\n      {(!SUB || !SUPER) && (\n        <span className=\"ql-formats\">\n          {!SUB && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-script\" tip=\"Sub\" value=\"sub\" />}\n          {!SUPER && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-script\" tip=\"Super\" value=\"super\" />}\n          <Divider />\n        </span>\n      )}\n      {(!ORDERED_LIST || !BULLET_LIST) && (\n        <span className=\"ql-formats\">\n          {!ORDERED_LIST && (\n            <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-list\" tip=\"Ordered List\" value=\"ordered\" />\n          )}\n          {!BULLET_LIST && (\n            <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-list\" tip=\"Bullet List\" value=\"bullet\" />\n          )}\n        </span>\n      )}\n      {(!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && (\n        <span className=\"ql-formats\">\n          {!INDENT_MINUS_ONE && (\n            <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-indent\" tip=\"Indent -1\" value=\"-1\" />\n          )}\n          {!INDENT_PLUS_ONE && (\n            <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-indent\" tip=\"Indent +1\" value=\"+1\" />\n          )}\n        </span>\n      )}\n      {!ALIGN && (\n        <span className=\"ql-formats\">\n          <TippedSelect zIndex={userProps?.zIndex || 1} className=\"ql-align\" tip=\"Align\" />\n          <Divider />\n        </span>\n      )}\n      {(!FONT_COLOR || !FONT_BACKGROUND_COLOR) && (\n        <span className=\"ql-formats\">\n          {!FONT_COLOR && <Colors zIndex={userProps?.zIndex || 1} className=\"ql-color\" tip=\"Font Color\" />}\n          {!FONT_BACKGROUND_COLOR && (\n            <Colors zIndex={userProps?.zIndex || 1} className=\"ql-background\" tip=\"Font Background Color\" />\n          )}\n          <Divider />\n        </span>\n      )}\n      {(!HYPERLINK || !IMAGE) && (\n        <span className=\"ql-formats\">\n          {!HYPERLINK && (\n            <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-link\" tip=\"Hyperlink: Select Text First\" />\n          )}\n          {!IMAGE && <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-image\" tip=\"Insert Image\" />}\n          <Divider />\n        </span>\n      )}\n      {!CLEAR_FORMAT && (\n        <span className=\"ql-formats\">\n          <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-clean\" tip=\"Clear Format (Select Text)\" />\n        </span>\n      )}\n      {!SHOW_HTML && (\n        <span className=\"ql-formats\">\n          <Divider />\n          <TippedButton\n            zIndex={userProps?.zIndex || 1}\n            style={{\n              width: 'fit-content',\n              color: '#1e79c2',\n              fontWeight: '500',\n            }}\n            onClick={handleShowHTML}\n            tip={showHTML ? 'SHOW TEXT' : 'SHOW HTML'}\n            className=\"ql-customFields-html\"\n          >\n            {showHTML ? 'SHOW TEXT' : 'SHOW HTML'}\n          </TippedButton>\n        </span>\n      )}\n      {customFields && (\n        <span className=\"ql-formats\">\n          <Divider />\n          <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-customFields\" tip=\"Insert Custom Field\">\n            <CustomFields />\n          </TippedButton>\n        </span>\n      )}\n      {customItems && (\n        <span style={{ display: 'inline-flex' }}>\n          {customItems.map((Item) => (\n            <>\n              <Divider />\n              <Item />\n            </>\n          ))}\n        </span>\n      )}\n    </div>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/components/DSWYSIWYGEditorImpl.js

@@ -0,0 +1,228 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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";
+Quill.register(Block);
+Quill.register(AlignStyle, true);
+Quill.register(IndentStyle, true);
+Quill.register(FontStyle, true);
+Quill.register(SizeStyle, true);
+class DSWYSIWYGEditorImpl extends React2.PureComponent {
+  constructor(props) {
+    super(props);
+    this.quillModules = __spreadValues({
+      toolbar: {
+        container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : "#toolbar",
+        handlers: __spreadValues({}, this.props.toolbarHandlers)
+      },
+      clipboard: {
+        matchVisual: false
+      },
+      blotFormatter: {}
+    }, this.props.quillModules);
+    this.onChangeQuill = (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.onInserFieldConfirm = (fieldCode) => {
+      const editor = this.getEditor();
+      const range = editor.getSelection(true);
+      editor.insertText(range.index, fieldCode);
+    };
+    this.onImageConfirm = (image) => {
+      if (!image) {
+        return;
+      }
+      const editor = this.getEditor();
+      const range = editor.getSelection(true);
+      editor.insertEmbed(range.index, "image", image.url);
+    };
+    this.onFieldModalClose = () => {
+      this.setState({ isFieldModalOpen: false });
+    };
+    this.onImageModalClose = () => {
+      this.setState({ isImageModalOpen: false });
+    };
+    this.quillRef = (ref) => {
+      this.quill = ref;
+    };
+    Quill.register(LinkFormat, true);
+    if (props.quillOverrides.length) {
+      props.quillOverrides.map((override) => Quill.register(override, true));
+    }
+    this.state = {
+      isImageModalOpen: false,
+      isFieldModalOpen: false
+    };
+    const { toolbar } = this.quillModules;
+    if (props.imagesData) {
+      toolbar.handlers.image = (value) => {
+        const { imagesData, handleImageClick } = this.props;
+        if (!imagesData.length) {
+          return;
+        }
+        this.setState({ isImageModalOpen: !!value });
+        handleImageClick(value);
+      };
+    }
+    if (props.customFields) {
+      toolbar.handlers.customFields = (value) => {
+        const { customFields, handleCustomFieldClick } = this.props;
+        if (!customFields.length) {
+          return;
+        }
+        this.setState({ isFieldModalOpen: !!value });
+        handleCustomFieldClick(value);
+      };
+    }
+  }
+  componentDidMount() {
+    setTimeout(() => {
+      const quillDomRef = this.quill;
+      const editor = quillDomRef.getEditor();
+      this.props.getQuillRef(quillDomRef);
+      editor.clipboard.addMatcher("a", clipboardLinkWithTagMatcher);
+    });
+  }
+  getEditor() {
+    return this.quill.getEditor();
+  }
+  render() {
+    const { isFieldModalOpen, isImageModalOpen } = this.state;
+    const _a = this.props, {
+      containerProps = {},
+      customFields,
+      imagesData,
+      customToolbar,
+      handleImageClick,
+      handleCustomFieldClick,
+      height,
+      value,
+      showRawHTML,
+      onShowHTML,
+      onChange,
+      hideItems
+    } = _a, editorProps = __objRest(_a, [
+      "containerProps",
+      "customFields",
+      "imagesData",
+      "customToolbar",
+      "handleImageClick",
+      "handleCustomFieldClick",
+      "height",
+      "value",
+      "showRawHTML",
+      "onShowHTML",
+      "onChange",
+      "hideItems"
+    ]);
+    return /* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
+      className: `quill-wysiwyg-editor ${showRawHTML ? "show-raw" : ""}`
+    }), customToolbar || /* @__PURE__ */ React2.createElement(CustomToolbar, {
+      customFields,
+      onShowHTML,
+      hideItems,
+      userProps: this.props
+    }), /* @__PURE__ */ React2.createElement(ReactQuill, __spreadProps(__spreadValues({
+      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
+    }));
+  }
+}
+export {
+  DSWYSIWYGEditorImpl as default
+};
+//# sourceMappingURL=DSWYSIWYGEditorImpl.js.map

package/dist/esm/components/DSWYSIWYGEditorImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DSWYSIWYGEditorImpl.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport ReactQuill, { Quill } from 'react-quill';\nimport BlotFormatter from 'quill-blot-formatter';\n\nimport ImageLibraryModal from './ImageLibraryModal';\nimport InsertFieldModal from './InsertFieldModal';\nimport { CustomToolbar } from './CustomToolbar';\nimport IndentStyle from '../quillOverrides/IndentStyle';\nimport LinkFormat from '../quillOverrides/LinkFormat';\nimport { formatHTML } from '../utils';\nimport { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher';\n\nQuill.register('modules/blotFormatter', BlotFormatter);\n\n// Fix block styled formats ----------------\nconst AlignStyle = Quill.import('attributors/style/align');\nconst FontStyle = Quill.import('attributors/style/font');\nFontStyle.whitelist = [\n  // allow ONLY these fonts and the default\n  'serif',\n  'monospace',\n  'arial',\n  'comic-sans',\n  'courier-new',\n  'georgia',\n  'helvetica',\n  'lucida',\n];\nconst SizeStyle = Quill.import('attributors/style/size');\nSizeStyle.whitelist = [\n  // allow ONLY these sizes and the default\n  'x-small',\n  'large',\n  'x-large',\n];\n\n// Fix Doc Viewer p tags extra margin issue ---------\nconst Block = Quill.import('blots/block');\nBlock.tagName = 'p';\nQuill.register(Block);\n\nQuill.register(AlignStyle, true);\nQuill.register(IndentStyle, true);\nQuill.register(FontStyle, true);\nQuill.register(SizeStyle, true);\n// -----------------------------------------\n\nexport default class DSWYSIWYGEditorImpl extends React.PureComponent {\n  quillModules = {\n    toolbar: {\n      container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : '#toolbar',\n      handlers: {\n        ...this.props.toolbarHandlers,\n      },\n    },\n    clipboard: {\n      // toggle to add extra line breaks when pasting HTML:\n      matchVisual: false,\n    },\n    blotFormatter: {\n      // options... https://github.com/Fandom-OSS/quill-blot-formatter\n    },\n    ...this.props.quillModules,\n  };\n\n  constructor(props) {\n    super(props);\n    Quill.register(LinkFormat, true);\n    if (props.quillOverrides.length) {\n      props.quillOverrides.map((override) => Quill.register(override, true));\n    }\n    this.state = {\n      isImageModalOpen: false,\n      isFieldModalOpen: false,\n    };\n    const { toolbar } = this.quillModules;\n    if (props.imagesData) {\n      toolbar.handlers.image = (value) => {\n        const { imagesData, handleImageClick } = this.props;\n        if (!imagesData.length) {\n          return;\n        }\n        this.setState({ isImageModalOpen: !!value });\n        handleImageClick(value);\n      };\n    }\n    if (props.customFields) {\n      toolbar.handlers.customFields = (value) => {\n        const { customFields, handleCustomFieldClick } = this.props;\n        if (!customFields.length) {\n          return;\n        }\n        this.setState({ isFieldModalOpen: !!value });\n        handleCustomFieldClick(value);\n      };\n    }\n  }\n\n  componentDidMount() {\n    // this.quill doesn't exist untill the full call-stack execute\n    // we need to \"setTimeout\" so this componentDidMount work as expected\n    setTimeout(() => {\n      const quillDomRef = this.quill;\n      const editor = quillDomRef.getEditor();\n      this.props.getQuillRef(quillDomRef);\n      // https://github.com/quilljs/quill/issues/2677\n      editor.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);\n    });\n  }\n\n  // eslint-disable-next-line max-params\n  onChangeQuill = (html, delta, source, editor) => {\n    const { showRawHTML, onChange } = this.props;\n    if (!showRawHTML) onChange(html, delta, source, editor);\n  };\n\n  onChangeTextArea = (e) => {\n    const { showRawHTML, onChange } = this.props;\n    if (showRawHTML) onChange(e.target.value);\n  };\n\n  onInserFieldConfirm = (fieldCode) => {\n    const editor = this.getEditor();\n    const range = editor.getSelection(true);\n    editor.insertText(range.index, fieldCode);\n  };\n\n  onImageConfirm = (image) => {\n    if (!image) {\n      return;\n    }\n    const editor = this.getEditor();\n    const range = editor.getSelection(true);\n    editor.insertEmbed(range.index, 'image', image.url);\n  };\n\n  onFieldModalClose = () => {\n    this.setState({ isFieldModalOpen: false });\n  };\n\n  onImageModalClose = () => {\n    this.setState({ isImageModalOpen: false });\n  };\n\n  getEditor() {\n    return this.quill.getEditor();\n  }\n\n  quillRef = (ref) => {\n    this.quill = ref;\n  };\n\n  render() {\n    const { isFieldModalOpen, isImageModalOpen } = this.state;\n    const {\n      containerProps = {},\n      customFields,\n      imagesData,\n      customToolbar,\n      handleImageClick,\n      handleCustomFieldClick,\n      height,\n      value,\n      showRawHTML,\n      onShowHTML,\n      onChange,\n      hideItems,\n      ...editorProps\n    } = this.props;\n\n    return (\n      <div\n        // data-testid=\"wysiwyg-text-container\"\n        {...containerProps}\n        className={`quill-wysiwyg-editor ${showRawHTML ? 'show-raw' : ''}`}\n      >\n        {customToolbar || (\n          <CustomToolbar\n            customFields={customFields}\n            onShowHTML={onShowHTML}\n            hideItems={hideItems}\n            userProps={this.props}\n          />\n        )}\n        <ReactQuill\n          ref={this.quillRef}\n          modules={this.quillModules}\n          onChange={this.onChangeQuill}\n          value={value}\n          style={{\n            height,\n            borderBottom: '1px solid #ccc',\n          }}\n          {...editorProps}\n          id=\"wysiwyg-text-container\"\n        />\n        <textarea\n          className=\"raw-editor ql-container ql-snow ql-editor\"\n          style={{\n            width: '100%',\n            resize: 'none',\n            height,\n            minHeight: '200px',\n          }}\n          onChange={this.onChangeTextArea}\n          value={formatHTML(value)}\n        />\n        {imagesData && imagesData.length && (\n          <ImageLibraryModal\n            imagesData={imagesData}\n            isOpen={isImageModalOpen}\n            onClose={this.onImageModalClose}\n            onConfirm={this.onImageConfirm}\n          />\n        )}\n        {customFields && customFields.length && (\n          <InsertFieldModal\n            customFields={customFields}\n            isOpen={isFieldModalOpen}\n            onClose={this.onFieldModalClose}\n            onConfirm={this.onInserFieldConfirm}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/components/ImageLibraryModal.js

@@ -0,0 +1,81 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 {
+  constructor(props) {
+    super(props);
+    this.onSelect = (selectedImage) => {
+      this.setState({ selectedImage });
+    };
+    this.onConfirm = () => {
+      const { selectedImage } = this.state;
+      const { onConfirm, onClose } = this.props;
+      onConfirm(selectedImage);
+      onClose();
+    };
+    this.state = {
+      selectedImage: void 0
+    };
+  }
+  render() {
+    return /* @__PURE__ */ React2.createElement(DSImageLibraryModal, __spreadProps(__spreadValues({}, 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
+};
+//# sourceMappingURL=ImageLibraryModal.js.map

package/dist/esm/components/ImageLibraryModal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/ImageLibraryModal.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport DSImageLibraryModal from '@elliemae/ds-imagelibrarymodal';\nimport PropTypes from 'prop-types';\n\nexport default class ImageLibraryModal extends React.PureComponent {\n  static propTypes = {\n    onConfirm: PropTypes.func.isRequired,\n    onClose: PropTypes.func.isRequired,\n    onReject: PropTypes.func,\n    imagesData: PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string,\n        url: PropTypes.string.isRequired,\n        name: PropTypes.string.isRequired,\n        description: PropTypes.string,\n        createdBy: PropTypes.string.isRequired,\n        createdDate: PropTypes.string.isRequired,\n      }),\n    ),\n    isOpen: PropTypes.bool.isRequired,\n  };\n\n  static defaultProps = {\n    onReject: undefined,\n    imagesData: [\n      {\n        url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',\n        name: 'no image',\n        createdBy: 'user:John Doe',\n        createdDate: '0000-01-01 00:00 AM UTC',\n      },\n      {\n        url:\n          'https://asset-service-bucket-int.s3.us-west-2.amazonaws.com/bd527d8c-472f-4dff-b8c5-1c90d5bae01e',\n        name: 'no image 2',\n        createdBy: 'user:Jane Doe',\n        createdDate: '0000-01-01 00:00 AM UTC',\n      },\n    ],\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      selectedImage: undefined,\n    };\n  }\n\n  onSelect = selectedImage => {\n    this.setState({ selectedImage });\n  };\n\n  onConfirm = () => {\n    const { selectedImage } = this.state;\n    const { onConfirm, onClose } = this.props;\n    onConfirm(selectedImage);\n    onClose();\n  };\n\n  render() {\n    return (\n      <DSImageLibraryModal\n        {...this.props}\n        onConfirm={this.onConfirm}\n        onSelect={this.onSelect}\n      />\n    );\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,gCAA+C,OAAM,cAAc;AAAA,EAqCjE,YAAY,OAAO;AACjB,UAAM;AAMR,oBAAW,mBAAiB;AAC1B,WAAK,SAAS,EAAE;AAAA;AAGlB,qBAAY,MAAM;AAChB,YAAM,EAAE,kBAAkB,KAAK;AAC/B,YAAM,EAAE,WAAW,YAAY,KAAK;AACpC,gBAAU;AACV;AAAA;AAbA,SAAK,QAAQ;AAAA,MACX,eAAe;AAAA;AAAA;AAAA,EAenB,SAAS;AACP,WACE,qCAAC,qBAAD,iCACM,KAAK,QADX;AAAA,MAEE,WAAW,KAAK;AAAA,MAChB,UAAU,KAAK;AAAA;AAAA;AAAA;AA3Dd,AADT,kBACS,YAAY;AAAA,EACjB,WAAW,UAAU,KAAK;AAAA,EAC1B,SAAS,UAAU,KAAK;AAAA,EACxB,UAAU,UAAU;AAAA,EACpB,YAAY,UAAU,QACpB,UAAU,MAAM;AAAA,IACd,IAAI,UAAU;AAAA,IACd,KAAK,UAAU,OAAO;AAAA,IACtB,MAAM,UAAU,OAAO;AAAA,IACvB,aAAa,UAAU;AAAA,IACvB,WAAW,UAAU,OAAO;AAAA,IAC5B,aAAa,UAAU,OAAO;AAAA;AAAA,EAGlC,QAAQ,UAAU,KAAK;AAAA;AAGlB,AAlBT,kBAkBS,eAAe;AAAA,EACpB,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,aAAa;AAAA;AAAA,IAEf;AAAA,MACE,KACE;AAAA,MACF,MAAM;AAAA,MACN,WAAW;AAAA,MACX,aAAa;AAAA;AAAA;AAAA;",
+  "names": []
+}