@elliemae/ds-wysiwygeditor 3.14.13 → 3.14.15

package/dist/cjs/DSWYSIWYGEditor.js

@@ -53,7 +53,6 @@ const DSWYSIWYGEditor = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_DSWYSIWYGEditorImpl.default,
     {
-      forceHttpLink: true,
       handleCustomFieldClick: emptyAction,
       handleImageClick: emptyAction,
       quillOverrides: [],

package/dist/cjs/DSWYSIWYGEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSWYSIWYGEditor.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl';\n\nconst DSWYSIWYGEditor = ({\n  value = '',\n  onChange = () => null,\n  getQuillRef = () => null,\n  quillModules = {},\n  customToolbar,\n  toolbarHandlers,\n  showRawHTML = false,\n  height,\n  hideItems,\n  ...rest\n}) => {\n  const emptyAction = () => {};\n  const [showHTML, setShowHTML] = useState(showRawHTML);\n\n  useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);\n\n  return (\n    <DSWYSIWYGEditorImpl\n      forceHttpLink\n      handleCustomFieldClick={emptyAction}\n      handleImageClick={emptyAction}\n      quillOverrides={[]}\n      value={value}\n      onChange={onChange}\n      getQuillRef={getQuillRef}\n      quillModules={quillModules}\n      customToolbar={customToolbar}\n      toolbarHandlers={toolbarHandlers}\n      showRawHTML={showHTML}\n      onShowHTML={() => setShowHTML(!showHTML)}\n      height={height}\n      hideItems={hideItems}\n      {...rest}\n    />\n  );\n};\n\nconst wysiwygEditorProps = {\n  value: PropTypes.string.description('editors value').isRequired,\n  onChange: PropTypes.func.description(\n    `(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`,\n  ).isRequired,\n  getQuillRef: PropTypes.func.description('function to use quill.js ref'),\n  quillModules: PropTypes.object.description('object to override quill modules'),\n  customToolbar: PropTypes.element.description('custom toolbar'),\n  toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),\n  showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),\n  height: PropTypes.string.description('heigth of the editors text area'),\n  readOnly: PropTypes.string.description(\n    \"If true, the editor won't allow changing its contents. Wraps the Quill disable API.\",\n  ),\n  hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),\n  zIndex: PropTypes.number.description(\n    'zIndex to be used (required when used in a modal for correct tooltips displaying)',\n  ),\n};\n\nDSWYSIWYGEditor.propTypes = wysiwygEditorProps;\nDSWYSIWYGEditor.displayName = 'DSWYSIWYGEditor';\nconst WYSIWYWithSchema = describe(DSWYSIWYGEditor);\nWYSIWYWithSchema.propTypes = wysiwygEditorProps;\n\nexport { WYSIWYWithSchema, DSWYSIWYGEditor };\nexport default DSWYSIWYGEditor;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AAtBJ,mBAA2C;AAC3C,0BAAoC;AACpC,iCAAgC;AAEhC,MAAM,kBAAkB,CAAC;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,cAAc,MAAM;AAAA,EAAC;AAC3B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,WAAW;AAEpD,8BAAU,MAAM,YAAY,WAAW,GAAG,CAAC,WAAW,CAAC;AAEvD,SACE;AAAA,IAAC,2BAAAA;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,wBAAwB;AAAA,MACxB,kBAAkB;AAAA,MAClB,gBAAgB,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,YAAY,MAAM,YAAY,CAAC,QAAQ;AAAA,MACvC;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,qBAAqB;AAAA,EACzB,OAAO,8BAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,UAAU,8BAAU,KAAK;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EAAE;AAAA,EACF,aAAa,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EACtE,cAAc,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAC7E,eAAe,8BAAU,QAAQ,YAAY,gBAAgB;AAAA,EAC7D,iBAAiB,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EAC5E,aAAa,8BAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,8BAAU,OAAO,YAAY,iCAAiC;AAAA,EACtE,UAAU,8BAAU,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EACA,WAAW,8BAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EAC5G,QAAQ,8BAAU,OAAO;AAAA,IACvB;AAAA,EACF;AACF;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,uBAAmB,8BAAS,eAAe;AACjD,iBAAiB,YAAY;AAG7B,IAAO,0BAAQ;",
+  "sourcesContent": ["import React, { useState, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl';\n\nconst DSWYSIWYGEditor = ({\n  value = '',\n  onChange = () => null,\n  getQuillRef = () => null,\n  quillModules = {},\n  customToolbar,\n  toolbarHandlers,\n  showRawHTML = false,\n  height,\n  hideItems,\n  ...rest\n}) => {\n  const emptyAction = () => {};\n  const [showHTML, setShowHTML] = useState(showRawHTML);\n\n  useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);\n\n  return (\n    <DSWYSIWYGEditorImpl\n      handleCustomFieldClick={emptyAction}\n      handleImageClick={emptyAction}\n      quillOverrides={[]}\n      value={value}\n      onChange={onChange}\n      getQuillRef={getQuillRef}\n      quillModules={quillModules}\n      customToolbar={customToolbar}\n      toolbarHandlers={toolbarHandlers}\n      showRawHTML={showHTML}\n      onShowHTML={() => setShowHTML(!showHTML)}\n      height={height}\n      hideItems={hideItems}\n      {...rest}\n    />\n  );\n};\n\nconst wysiwygEditorProps = {\n  value: PropTypes.string.description('editors value').isRequired,\n  onChange: PropTypes.func.description(\n    `(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`,\n  ).isRequired,\n  getQuillRef: PropTypes.func.description('function to use quill.js ref'),\n  quillModules: PropTypes.object.description('object to override quill modules'),\n  customToolbar: PropTypes.element.description('custom toolbar'),\n  toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),\n  showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),\n  height: PropTypes.string.description('heigth of the editors text area'),\n  readOnly: PropTypes.string.description(\n    \"If true, the editor won't allow changing its contents. Wraps the Quill disable API.\",\n  ),\n  hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),\n  zIndex: PropTypes.number.description(\n    'zIndex to be used (required when used in a modal for correct tooltips displaying)',\n  ),\n};\n\nDSWYSIWYGEditor.propTypes = wysiwygEditorProps;\nDSWYSIWYGEditor.displayName = 'DSWYSIWYGEditor';\nconst WYSIWYWithSchema = describe(DSWYSIWYGEditor);\nWYSIWYWithSchema.propTypes = wysiwygEditorProps;\n\nexport { WYSIWYWithSchema, DSWYSIWYGEditor };\nexport default DSWYSIWYGEditor;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AAtBJ,mBAA2C;AAC3C,0BAAoC;AACpC,iCAAgC;AAEhC,MAAM,kBAAkB,CAAC;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,cAAc,MAAM;AAAA,EAAC;AAC3B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,WAAW;AAEpD,8BAAU,MAAM,YAAY,WAAW,GAAG,CAAC,WAAW,CAAC;AAEvD,SACE;AAAA,IAAC,2BAAAA;AAAA,IAAA;AAAA,MACC,wBAAwB;AAAA,MACxB,kBAAkB;AAAA,MAClB,gBAAgB,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,YAAY,MAAM,YAAY,CAAC,QAAQ;AAAA,MACvC;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,qBAAqB;AAAA,EACzB,OAAO,8BAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,UAAU,8BAAU,KAAK;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EAAE;AAAA,EACF,aAAa,8BAAU,KAAK,YAAY,8BAA8B;AAAA,EACtE,cAAc,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAC7E,eAAe,8BAAU,QAAQ,YAAY,gBAAgB;AAAA,EAC7D,iBAAiB,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EAC5E,aAAa,8BAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,8BAAU,OAAO,YAAY,iCAAiC;AAAA,EACtE,UAAU,8BAAU,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EACA,WAAW,8BAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EAC5G,QAAQ,8BAAU,OAAO;AAAA,IACvB;AAAA,EACF;AACF;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,uBAAmB,8BAAS,eAAe;AACjD,iBAAiB,YAAY;AAG7B,IAAO,0BAAQ;",
   "names": ["DSWYSIWYGEditorImpl"]
 }

package/dist/cjs/components/CustomToolbar.js

@@ -180,7 +180,28 @@ const CustomToolbar = ({
       !INDENT_PLUS_ONE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || 1, className: "ql-indent", tip: "Indent +1", value: "+1" })
     ] }),
     !ALIGN && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedSelect.TippedSelect, { zIndex: userProps?.zIndex || 1, className: "ql-align", tip: "Align" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || 1, className: "ql-align", tip: "Left", value: "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TippedButton.TippedButton,
+          {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-align",
+            tip: "Center",
+            value: "center"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || 1, className: "ql-align", tip: "Right", value: "right" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TippedButton.TippedButton,
+          {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-align",
+            tip: "Justify",
+            value: "justify"
+          }
+        )
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
     ] }),
     (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/CustomToolbar.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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          {/* \n           quill js has a bug where using ql-align with the html tag \"select\" leave us with a can not read property innerhtml of undefined\n            we can't update quill js because it's a peer dependency of react-quill\n            this is a workaround to keep provide the ql-align module but not use the html tag \"select\"\n           */}\n          <span className=\"ql-formats\">\n            <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-align\" tip=\"Left\" value=\"\"></TippedButton>\n            <TippedButton\n              zIndex={userProps?.zIndex || 1}\n              className=\"ql-align\"\n              tip=\"Center\"\n              value=\"center\"\n            ></TippedButton>\n            <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-align\" tip=\"Right\" value=\"right\"></TippedButton>\n            <TippedButton\n              zIndex={userProps?.zIndex || 1}\n              className=\"ql-align\"\n              tip=\"Justify\"\n              value=\"justify\"\n            ></TippedButton>\n          </span>\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["DSDropdownMenu", "DSButton"]
 }

package/dist/cjs/components/DSWYSIWYGEditorImpl.js

@@ -31,61 +31,18 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 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_uid = require("uid");
 var import_ImageLibraryModal = __toESM(require("./ImageLibraryModal"));
 var import_InsertFieldModal = __toESM(require("./InsertFieldModal"));
 var import_CustomToolbar = require("./CustomToolbar");
-var import_IndentStyle = __toESM(require("../quillOverrides/IndentStyle"));
-var import_LinkFormat = __toESM(require("../quillOverrides/LinkFormat"));
-var import_Image = __toESM(require("../quillOverrides/Image"));
 var import_utils = require("../utils");
 var import_clipboardLinkWithTagMatcher = 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);
-import_react_quill.Quill.register(import_Image.default, true);
+var import_quillSingletonConfigurations = __toESM(require("../config/quillSingletonConfigurations"));
 class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
   constructor(props) {
     super(props);
-    this.quillModules = {
-      toolbar: {
-        container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : "#toolbar",
-        handlers: {
-          ...this.props.toolbarHandlers
-        }
-      },
-      clipboard: {
-        matchVisual: false
-      },
-      blotFormatter: {},
-      ...this.props.quillModules
-    };
     this.getEditor = () => this.quill?.getEditor();
     this.onChangeQuill = (html, delta, source, editor) => {
-      console.log("quill detected a change");
       const { showRawHTML, onChange } = this.props;
       if (!showRawHTML)
         onChange(html, delta, source, editor);
@@ -115,17 +72,39 @@ class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
       this.setState({ isImageModalOpen: false });
     };
     this.quillRef = (ref) => {
+      const editor = ref?.getEditor();
+      if (this.getEditor() !== editor) {
+        editor?.clipboard.addMatcher("a", import_clipboardLinkWithTagMatcher.clipboardLinkWithTagMatcher);
+      }
+      this.props.getQuillRef(ref);
       this.quill = ref;
     };
-    import_react_quill.Quill.register(import_LinkFormat.default, true);
+    this.quill = void 0;
+    const instanceUid = (0, import_uid.uid)(12);
+    const uniqueClassName = `ds-wysiwyg-editor-${instanceUid}`;
+    const quillModules = {
+      toolbar: {
+        container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : `#toolbar-${uniqueClassName}`,
+        handlers: {
+          ...this.props.toolbarHandlers
+        }
+      },
+      clipboard: {
+        matchVisual: false
+      },
+      ...this.props.quillModules
+    };
     if (props.quillOverrides.length) {
-      props.quillOverrides.map((override) => import_react_quill.Quill.register(override, true));
+      props.quillOverrides.map((override) => import_quillSingletonConfigurations.default.register(override, true));
     }
     this.state = {
       isImageModalOpen: false,
-      isFieldModalOpen: false
+      isFieldModalOpen: false,
+      uid: instanceUid,
+      uniqueClassName,
+      quillModules
     };
-    const { toolbar } = this.quillModules;
+    const { toolbar } = quillModules;
     if (props.imagesData) {
       toolbar.handlers.image = (value) => {
         const { imagesData, handleImageClick } = this.props;
@@ -148,12 +127,6 @@ class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
     }
   }
   componentDidMount() {
-    setTimeout(() => {
-      const quillDomRef = this.quill;
-      this.props.getQuillRef(quillDomRef);
-      const editor = quillDomRef?.getEditor();
-      editor?.clipboard.addMatcher("a", import_clipboardLinkWithTagMatcher.clipboardLinkWithTagMatcher);
-    });
   }
   render() {
     const { isFieldModalOpen, isImageModalOpen } = this.state;
@@ -162,14 +135,14 @@ class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
       customFields,
       imagesData,
       customToolbar,
-      handleImageClick,
-      handleCustomFieldClick,
       height,
       value,
       showRawHTML,
       onShowHTML,
-      onChange,
       hideItems,
+      onChange,
+      handleImageClick,
+      handleCustomFieldClick,
       ...editorProps
     } = this.props;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -177,6 +150,7 @@ class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
       {
         ...containerProps,
         className: `quill-wysiwyg-editor ${showRawHTML ? "show-raw" : ""}`,
+        "data-uid": this.state.uid,
         children: [
           customToolbar || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_CustomToolbar.CustomToolbar,
@@ -184,14 +158,15 @@ class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
               customFields,
               onShowHTML,
               hideItems,
-              userProps: this.props
+              userProps: this.props,
+              id: `toolbar-${this.state.uniqueClassName}`
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_react_quill.default,
             {
               ref: this.quillRef,
-              modules: this.quillModules,
+              modules: this.state.quillModules,
               onChange: this.onChangeQuill,
               value,
               style: {
@@ -199,7 +174,7 @@ class DSWYSIWYGEditorImpl extends import_react.default.PureComponent {
                 borderBottom: "1px solid #ccc"
               },
               ...editorProps,
-              id: "wysiwyg-text-container"
+              id: `wysiwyg-text-container-${this.state.uid}`
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/DSWYSIWYGEditorImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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 Image from '../quillOverrides/Image';\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// -----------------------------------------\nQuill.register(Image, true);\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      this.props.getQuillRef(quillDomRef);\n\n      const editor = quillDomRef?.getEditor();\n      // https://github.com/quilljs/quill/issues/2677\n      editor?.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);\n    });\n  }\n\n  getEditor = () => this.quill?.getEditor();\n\n  // eslint-disable-next-line max-params\n  onChangeQuill = (html, delta, source, editor) => {\n    console.log('quill detected a change');\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  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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": ["BlotFormatter", "IndentStyle", "Image", "React", "LinkFormat", "ReactQuill", "ImageLibraryModal", "InsertFieldModal"]
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-argument */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport ReactQuill from 'react-quill';\nimport { uid } from 'uid';\n\nimport ImageLibraryModal from './ImageLibraryModal';\nimport InsertFieldModal from './InsertFieldModal';\nimport { CustomToolbar } from './CustomToolbar';\nimport { formatHTML } from '../utils';\nimport { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher';\nimport Quill from '../config/quillSingletonConfigurations';\n\nexport default class DSWYSIWYGEditorImpl extends React.PureComponent {\n  quill: undefined | typeof ReactQuill;\n\n  constructor(props) {\n    super(props);\n    this.quill = undefined; // this will hold the quill instance reference\n    const instanceUid = uid(12);\n    const uniqueClassName = `ds-wysiwyg-editor-${instanceUid}`;\n    const quillModules = {\n      toolbar: {\n        container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : `#toolbar-${uniqueClassName}`,\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      ...this.props.quillModules,\n    };\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      uid: instanceUid,\n      uniqueClassName,\n      quillModules,\n    };\n    const { toolbar } = 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\n  getEditor = () => this.quill?.getEditor();\n\n  // eslint-disable-next-line max-params\n  onChangeQuill = (html, delta, source, editor) => {\n    // console.log('quill detected a change');\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  quillRef = (ref) => {\n    const editor = ref?.getEditor();\n    if (this.getEditor() !== editor) {\n      // the underlying quill instance has changed\n      // this may happens because it's the first render or for other reasons\n      // but any instance configuration must happen again in this case\n\n      // we add a clipboard matcher\n      // https://github.com/quilljs/quill/issues/2677\n      editor?.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);\n    }\n    this.props.getQuillRef(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      height,\n      value,\n      showRawHTML,\n      onShowHTML,\n      hideItems,\n      // bounds,\n      // a bunch of props we don't want to pass to the editor\n      onChange,\n      handleImageClick,\n      handleCustomFieldClick,\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        data-uid={this.state.uid}\n      >\n        {customToolbar || (\n          <CustomToolbar\n            customFields={customFields}\n            onShowHTML={onShowHTML}\n            hideItems={hideItems}\n            userProps={this.props}\n            id={`toolbar-${this.state.uniqueClassName}`}\n          />\n        )}\n        <ReactQuill\n          ref={this.quillRef}\n          modules={this.state.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-${this.state.uid}`}\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React", "Quill", "ReactQuill", "ImageLibraryModal", "InsertFieldModal"]
 }

package/dist/cjs/config/quillSingletonConfigurations.js

@@ -0,0 +1,80 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var quillSingletonConfigurations_exports = {};
+__export(quillSingletonConfigurations_exports, {
+  default: () => quillSingletonConfigurations_default
+});
+module.exports = __toCommonJS(quillSingletonConfigurations_exports);
+var React = __toESM(require("react"));
+var import_react_quill = require("react-quill");
+var import_quill_blot_formatter = __toESM(require("quill-blot-formatter"));
+var import_IndentStyle = __toESM(require("../quillOverrides/IndentStyle"));
+var import_Image = __toESM(require("../quillOverrides/Image"));
+var import_LinkFormat = __toESM(require("../quillOverrides/LinkFormat"));
+if (!import_react_quill.Quill._dsDidRegisterBlotFormatter) {
+  import_react_quill.Quill.register("modules/blotFormatter", import_quill_blot_formatter.default);
+  import_react_quill.Quill._dsDidRegisterBlotFormatter = true;
+}
+if (!import_react_quill.Quill._dsDidConfigureTextWhitelist) {
+  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"
+  ];
+  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);
+  import_react_quill.Quill._dsDidConfigureTextWhitelist = true;
+}
+if (!import_react_quill.Quill._dsDidConfigureBlock) {
+  const Block = import_react_quill.Quill.import("blots/block");
+  Block.tagName = "p";
+  import_react_quill.Quill.register(Block);
+  import_react_quill.Quill._dsDidConfigureBlock = true;
+}
+if (!import_react_quill.Quill._dsDidConfigureImage) {
+  import_react_quill.Quill.register(import_Image.default, true);
+  import_react_quill.Quill._dsDidConfigureImage = true;
+}
+if (!import_react_quill.Quill._dsDidConfigureLink) {
+  import_react_quill.Quill.register(import_LinkFormat.default, true);
+  import_react_quill.Quill._dsDidConfigureLink = true;
+}
+var quillSingletonConfigurations_default = import_react_quill.Quill;
+//# sourceMappingURL=quillSingletonConfigurations.js.map

package/dist/cjs/config/quillSingletonConfigurations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/config/quillSingletonConfigurations.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { Quill } from 'react-quill';\nimport BlotFormatter from 'quill-blot-formatter';\nimport IndentStyle from '../quillOverrides/IndentStyle';\nimport Image from '../quillOverrides/Image';\nimport LinkFormat from '../quillOverrides/LinkFormat';\n\n// hystorically we have always been modifying the Quill object directly\n//   in node this means we have modified the global Quill object which is a singleton\n//   it's not a good practice and we should not do it but to ensure our changes are transparent\n//      we keep up the bad practice untill a new version of our editor is released\n//   we will atleast reduce the amount of times we modify the Quill object by only doing it once\n//      this is \"new\" bad practice but it's better than modifying the global Quill object constantly\n//      we achieve this by adding a flag to the Quill object to indicate that we have already modified it\nif (!Quill._dsDidRegisterBlotFormatter) {\n  Quill.register('modules/blotFormatter', BlotFormatter);\n  Quill._dsDidRegisterBlotFormatter = true;\n}\nif (!Quill._dsDidConfigureTextWhitelist) {\n  // Fix block styled formats ----------------\n  const AlignStyle = Quill.import('attributors/style/align');\n  const FontStyle = Quill.import('attributors/style/font');\n  FontStyle.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  ];\n  const SizeStyle = Quill.import('attributors/style/size');\n  SizeStyle.whitelist = [\n    // allow ONLY these sizes and the default\n    'x-small',\n    'large',\n    'x-large',\n  ];\n  Quill.register(AlignStyle, true);\n  Quill.register(IndentStyle, true);\n  Quill.register(FontStyle, true);\n  Quill.register(SizeStyle, true);\n  Quill._dsDidConfigureTextWhitelist = true;\n}\nif (!Quill._dsDidConfigureBlock) {\n  // Fix Doc Viewer p tags extra margin issue ---------\n  const Block = Quill.import('blots/block');\n  Block.tagName = 'p';\n  Quill.register(Block);\n  Quill._dsDidConfigureBlock = true;\n  // -----------------------------------------\n}\nif (!Quill._dsDidConfigureImage) {\n  Quill.register(Image, true);\n  Quill._dsDidConfigureImage = true;\n}\n\nif (!Quill._dsDidConfigureLink) {\n  Quill.register(LinkFormat, true);\n  Quill._dsDidConfigureLink = true;\n}\n\nexport default Quill;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAsB;AACtB,kCAA0B;AAC1B,yBAAwB;AACxB,mBAAkB;AAClB,wBAAuB;AASvB,IAAI,CAAC,yBAAM,6BAA6B;AACtC,2BAAM,SAAS,yBAAyB,4BAAAA,OAAa;AACrD,2BAAM,8BAA8B;AACtC;AACA,IAAI,CAAC,yBAAM,8BAA8B;AAEvC,QAAM,aAAa,yBAAM,OAAO,yBAAyB;AACzD,QAAM,YAAY,yBAAM,OAAO,wBAAwB;AACvD,YAAU,YAAY;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY,yBAAM,OAAO,wBAAwB;AACvD,YAAU,YAAY;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,2BAAM,SAAS,YAAY,IAAI;AAC/B,2BAAM,SAAS,mBAAAC,SAAa,IAAI;AAChC,2BAAM,SAAS,WAAW,IAAI;AAC9B,2BAAM,SAAS,WAAW,IAAI;AAC9B,2BAAM,+BAA+B;AACvC;AACA,IAAI,CAAC,yBAAM,sBAAsB;AAE/B,QAAM,QAAQ,yBAAM,OAAO,aAAa;AACxC,QAAM,UAAU;AAChB,2BAAM,SAAS,KAAK;AACpB,2BAAM,uBAAuB;AAE/B;AACA,IAAI,CAAC,yBAAM,sBAAsB;AAC/B,2BAAM,SAAS,aAAAC,SAAO,IAAI;AAC1B,2BAAM,uBAAuB;AAC/B;AAEA,IAAI,CAAC,yBAAM,qBAAqB;AAC9B,2BAAM,SAAS,kBAAAC,SAAY,IAAI;AAC/B,2BAAM,sBAAsB;AAC9B;AAEA,IAAO,uCAAQ;",
+  "names": ["BlotFormatter", "IndentStyle", "Image", "LinkFormat"]
+}

package/dist/esm/DSWYSIWYGEditor.js

@@ -22,7 +22,6 @@ const DSWYSIWYGEditor = ({
   return /* @__PURE__ */ jsx(
     DSWYSIWYGEditorImpl,
     {
-      forceHttpLink: true,
       handleCustomFieldClick: emptyAction,
       handleImageClick: emptyAction,
       quillOverrides: [],

package/dist/esm/DSWYSIWYGEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSWYSIWYGEditor.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl';\n\nconst DSWYSIWYGEditor = ({\n  value = '',\n  onChange = () => null,\n  getQuillRef = () => null,\n  quillModules = {},\n  customToolbar,\n  toolbarHandlers,\n  showRawHTML = false,\n  height,\n  hideItems,\n  ...rest\n}) => {\n  const emptyAction = () => {};\n  const [showHTML, setShowHTML] = useState(showRawHTML);\n\n  useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);\n\n  return (\n    <DSWYSIWYGEditorImpl\n      forceHttpLink\n      handleCustomFieldClick={emptyAction}\n      handleImageClick={emptyAction}\n      quillOverrides={[]}\n      value={value}\n      onChange={onChange}\n      getQuillRef={getQuillRef}\n      quillModules={quillModules}\n      customToolbar={customToolbar}\n      toolbarHandlers={toolbarHandlers}\n      showRawHTML={showHTML}\n      onShowHTML={() => setShowHTML(!showHTML)}\n      height={height}\n      hideItems={hideItems}\n      {...rest}\n    />\n  );\n};\n\nconst wysiwygEditorProps = {\n  value: PropTypes.string.description('editors value').isRequired,\n  onChange: PropTypes.func.description(\n    `(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`,\n  ).isRequired,\n  getQuillRef: PropTypes.func.description('function to use quill.js ref'),\n  quillModules: PropTypes.object.description('object to override quill modules'),\n  customToolbar: PropTypes.element.description('custom toolbar'),\n  toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),\n  showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),\n  height: PropTypes.string.description('heigth of the editors text area'),\n  readOnly: PropTypes.string.description(\n    \"If true, the editor won't allow changing its contents. Wraps the Quill disable API.\",\n  ),\n  hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),\n  zIndex: PropTypes.number.description(\n    'zIndex to be used (required when used in a modal for correct tooltips displaying)',\n  ),\n};\n\nDSWYSIWYGEditor.propTypes = wysiwygEditorProps;\nDSWYSIWYGEditor.displayName = 'DSWYSIWYGEditor';\nconst WYSIWYWithSchema = describe(DSWYSIWYGEditor);\nWYSIWYWithSchema.propTypes = wysiwygEditorProps;\n\nexport { WYSIWYWithSchema, DSWYSIWYGEditor };\nexport default DSWYSIWYGEditor;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsBnB;AAtBJ,SAAgB,UAAU,iBAAiB;AAC3C,SAAS,UAAU,iBAAiB;AACpC,OAAO,yBAAyB;AAEhC,MAAM,kBAAkB,CAAC;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,cAAc,MAAM;AAAA,EAAC;AAC3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,WAAW;AAEpD,YAAU,MAAM,YAAY,WAAW,GAAG,CAAC,WAAW,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,wBAAwB;AAAA,MACxB,kBAAkB;AAAA,MAClB,gBAAgB,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,YAAY,MAAM,YAAY,CAAC,QAAQ;AAAA,MACvC;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,qBAAqB;AAAA,EACzB,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,UAAU,UAAU,KAAK;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EAAE;AAAA,EACF,aAAa,UAAU,KAAK,YAAY,8BAA8B;AAAA,EACtE,cAAc,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAC7E,eAAe,UAAU,QAAQ,YAAY,gBAAgB;AAAA,EAC7D,iBAAiB,UAAU,OAAO,YAAY,8BAA8B;AAAA,EAC5E,aAAa,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,UAAU,OAAO,YAAY,iCAAiC;AAAA,EACtE,UAAU,UAAU,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EACA,WAAW,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EAC5G,QAAQ,UAAU,OAAO;AAAA,IACvB;AAAA,EACF;AACF;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,mBAAmB,SAAS,eAAe;AACjD,iBAAiB,YAAY;AAG7B,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-utilities';\nimport DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl';\n\nconst DSWYSIWYGEditor = ({\n  value = '',\n  onChange = () => null,\n  getQuillRef = () => null,\n  quillModules = {},\n  customToolbar,\n  toolbarHandlers,\n  showRawHTML = false,\n  height,\n  hideItems,\n  ...rest\n}) => {\n  const emptyAction = () => {};\n  const [showHTML, setShowHTML] = useState(showRawHTML);\n\n  useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);\n\n  return (\n    <DSWYSIWYGEditorImpl\n      handleCustomFieldClick={emptyAction}\n      handleImageClick={emptyAction}\n      quillOverrides={[]}\n      value={value}\n      onChange={onChange}\n      getQuillRef={getQuillRef}\n      quillModules={quillModules}\n      customToolbar={customToolbar}\n      toolbarHandlers={toolbarHandlers}\n      showRawHTML={showHTML}\n      onShowHTML={() => setShowHTML(!showHTML)}\n      height={height}\n      hideItems={hideItems}\n      {...rest}\n    />\n  );\n};\n\nconst wysiwygEditorProps = {\n  value: PropTypes.string.description('editors value').isRequired,\n  onChange: PropTypes.func.description(\n    `(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`,\n  ).isRequired,\n  getQuillRef: PropTypes.func.description('function to use quill.js ref'),\n  quillModules: PropTypes.object.description('object to override quill modules'),\n  customToolbar: PropTypes.element.description('custom toolbar'),\n  toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),\n  showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),\n  height: PropTypes.string.description('heigth of the editors text area'),\n  readOnly: PropTypes.string.description(\n    \"If true, the editor won't allow changing its contents. Wraps the Quill disable API.\",\n  ),\n  hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),\n  zIndex: PropTypes.number.description(\n    'zIndex to be used (required when used in a modal for correct tooltips displaying)',\n  ),\n};\n\nDSWYSIWYGEditor.propTypes = wysiwygEditorProps;\nDSWYSIWYGEditor.displayName = 'DSWYSIWYGEditor';\nconst WYSIWYWithSchema = describe(DSWYSIWYGEditor);\nWYSIWYWithSchema.propTypes = wysiwygEditorProps;\n\nexport { WYSIWYWithSchema, DSWYSIWYGEditor };\nexport default DSWYSIWYGEditor;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBnB;AAtBJ,SAAgB,UAAU,iBAAiB;AAC3C,SAAS,UAAU,iBAAiB;AACpC,OAAO,yBAAyB;AAEhC,MAAM,kBAAkB,CAAC;AAAA,EACvB,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,QAAM,cAAc,MAAM;AAAA,EAAC;AAC3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,WAAW;AAEpD,YAAU,MAAM,YAAY,WAAW,GAAG,CAAC,WAAW,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAwB;AAAA,MACxB,kBAAkB;AAAA,MAClB,gBAAgB,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,YAAY,MAAM,YAAY,CAAC,QAAQ;AAAA,MACvC;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,qBAAqB;AAAA,EACzB,OAAO,UAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,UAAU,UAAU,KAAK;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EAAE;AAAA,EACF,aAAa,UAAU,KAAK,YAAY,8BAA8B;AAAA,EACtE,cAAc,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAC7E,eAAe,UAAU,QAAQ,YAAY,gBAAgB;AAAA,EAC7D,iBAAiB,UAAU,OAAO,YAAY,8BAA8B;AAAA,EAC5E,aAAa,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,UAAU,OAAO,YAAY,iCAAiC;AAAA,EACtE,UAAU,UAAU,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EACA,WAAW,UAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EAC5G,QAAQ,UAAU,OAAO;AAAA,IACvB;AAAA,EACF;AACF;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,mBAAmB,SAAS,eAAe;AACjD,iBAAiB,YAAY;AAG7B,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/components/CustomToolbar.js

@@ -150,7 +150,28 @@ const CustomToolbar = ({
       !INDENT_PLUS_ONE && /* @__PURE__ */ jsx(TippedButton, { zIndex: userProps?.zIndex || 1, className: "ql-indent", tip: "Indent +1", value: "+1" })
     ] }),
     !ALIGN && /* @__PURE__ */ jsxs("span", { className: "ql-formats", children: [
-      /* @__PURE__ */ jsx(TippedSelect, { zIndex: userProps?.zIndex || 1, className: "ql-align", tip: "Align" }),
+      /* @__PURE__ */ jsxs("span", { className: "ql-formats", children: [
+        /* @__PURE__ */ jsx(TippedButton, { zIndex: userProps?.zIndex || 1, className: "ql-align", tip: "Left", value: "" }),
+        /* @__PURE__ */ jsx(
+          TippedButton,
+          {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-align",
+            tip: "Center",
+            value: "center"
+          }
+        ),
+        /* @__PURE__ */ jsx(TippedButton, { zIndex: userProps?.zIndex || 1, className: "ql-align", tip: "Right", value: "right" }),
+        /* @__PURE__ */ jsx(
+          TippedButton,
+          {
+            zIndex: userProps?.zIndex || 1,
+            className: "ql-align",
+            tip: "Justify",
+            value: "justify"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(Divider, {})
     ] }),
     (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /* @__PURE__ */ jsxs("span", { className: "ql-formats", children: [

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

@@ -1,7 +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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",
+  "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          {/* \n           quill js has a bug where using ql-align with the html tag \"select\" leave us with a can not read property innerhtml of undefined\n            we can't update quill js because it's a peer dependency of react-quill\n            this is a workaround to keep provide the ql-align module but not use the html tag \"select\"\n           */}\n          <span className=\"ql-formats\">\n            <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-align\" tip=\"Left\" value=\"\"></TippedButton>\n            <TippedButton\n              zIndex={userProps?.zIndex || 1}\n              className=\"ql-align\"\n              tip=\"Center\"\n              value=\"center\"\n            ></TippedButton>\n            <TippedButton zIndex={userProps?.zIndex || 1} className=\"ql-align\" tip=\"Right\" value=\"right\"></TippedButton>\n            <TippedButton\n              zIndex={userProps?.zIndex || 1}\n              className=\"ql-align\"\n              tip=\"Justify\"\n              value=\"justify\"\n            ></TippedButton>\n          </span>\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

@@ -1,62 +1,19 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
-import ReactQuill, { Quill } from "react-quill";
-import BlotFormatter from "quill-blot-formatter";
+import ReactQuill from "react-quill";
+import { uid } from "uid";
 import ImageLibraryModal from "./ImageLibraryModal";
 import InsertFieldModal from "./InsertFieldModal";
 import { CustomToolbar } from "./CustomToolbar";
-import IndentStyle from "../quillOverrides/IndentStyle";
-import LinkFormat from "../quillOverrides/LinkFormat";
-import Image from "../quillOverrides/Image";
 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);
-Quill.register(Image, true);
+import Quill from "../config/quillSingletonConfigurations";
 class DSWYSIWYGEditorImpl extends React2.PureComponent {
   constructor(props) {
     super(props);
-    this.quillModules = {
-      toolbar: {
-        container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : "#toolbar",
-        handlers: {
-          ...this.props.toolbarHandlers
-        }
-      },
-      clipboard: {
-        matchVisual: false
-      },
-      blotFormatter: {},
-      ...this.props.quillModules
-    };
     this.getEditor = () => this.quill?.getEditor();
     this.onChangeQuill = (html, delta, source, editor) => {
-      console.log("quill detected a change");
       const { showRawHTML, onChange } = this.props;
       if (!showRawHTML)
         onChange(html, delta, source, editor);
@@ -86,17 +43,39 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
       this.setState({ isImageModalOpen: false });
     };
     this.quillRef = (ref) => {
+      const editor = ref?.getEditor();
+      if (this.getEditor() !== editor) {
+        editor?.clipboard.addMatcher("a", clipboardLinkWithTagMatcher);
+      }
+      this.props.getQuillRef(ref);
       this.quill = ref;
     };
-    Quill.register(LinkFormat, true);
+    this.quill = void 0;
+    const instanceUid = uid(12);
+    const uniqueClassName = `ds-wysiwyg-editor-${instanceUid}`;
+    const quillModules = {
+      toolbar: {
+        container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : `#toolbar-${uniqueClassName}`,
+        handlers: {
+          ...this.props.toolbarHandlers
+        }
+      },
+      clipboard: {
+        matchVisual: false
+      },
+      ...this.props.quillModules
+    };
     if (props.quillOverrides.length) {
       props.quillOverrides.map((override) => Quill.register(override, true));
     }
     this.state = {
       isImageModalOpen: false,
-      isFieldModalOpen: false
+      isFieldModalOpen: false,
+      uid: instanceUid,
+      uniqueClassName,
+      quillModules
     };
-    const { toolbar } = this.quillModules;
+    const { toolbar } = quillModules;
     if (props.imagesData) {
       toolbar.handlers.image = (value) => {
         const { imagesData, handleImageClick } = this.props;
@@ -119,12 +98,6 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
     }
   }
   componentDidMount() {
-    setTimeout(() => {
-      const quillDomRef = this.quill;
-      this.props.getQuillRef(quillDomRef);
-      const editor = quillDomRef?.getEditor();
-      editor?.clipboard.addMatcher("a", clipboardLinkWithTagMatcher);
-    });
   }
   render() {
     const { isFieldModalOpen, isImageModalOpen } = this.state;
@@ -133,14 +106,14 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
       customFields,
       imagesData,
       customToolbar,
-      handleImageClick,
-      handleCustomFieldClick,
       height,
       value,
       showRawHTML,
       onShowHTML,
-      onChange,
       hideItems,
+      onChange,
+      handleImageClick,
+      handleCustomFieldClick,
       ...editorProps
     } = this.props;
     return /* @__PURE__ */ jsxs(
@@ -148,6 +121,7 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
       {
         ...containerProps,
         className: `quill-wysiwyg-editor ${showRawHTML ? "show-raw" : ""}`,
+        "data-uid": this.state.uid,
         children: [
           customToolbar || /* @__PURE__ */ jsx(
             CustomToolbar,
@@ -155,14 +129,15 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
               customFields,
               onShowHTML,
               hideItems,
-              userProps: this.props
+              userProps: this.props,
+              id: `toolbar-${this.state.uniqueClassName}`
             }
           ),
           /* @__PURE__ */ jsx(
             ReactQuill,
             {
               ref: this.quillRef,
-              modules: this.quillModules,
+              modules: this.state.quillModules,
               onChange: this.onChangeQuill,
               value,
               style: {
@@ -170,7 +145,7 @@ class DSWYSIWYGEditorImpl extends React2.PureComponent {
                 borderBottom: "1px solid #ccc"
               },
               ...editorProps,
-              id: "wysiwyg-text-container"
+              id: `wysiwyg-text-container-${this.state.uid}`
             }
           ),
           /* @__PURE__ */ jsx(

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

@@ -1,7 +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 Image from '../quillOverrides/Image';\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// -----------------------------------------\nQuill.register(Image, true);\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      this.props.getQuillRef(quillDomRef);\n\n      const editor = quillDomRef?.getEditor();\n      // https://github.com/quilljs/quill/issues/2677\n      editor?.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);\n    });\n  }\n\n  getEditor = () => this.quill?.getEditor();\n\n  // eslint-disable-next-line max-params\n  onChangeQuill = (html, delta, source, editor) => {\n    console.log('quill detected a change');\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  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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-return */\n/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-argument */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport ReactQuill from 'react-quill';\nimport { uid } from 'uid';\n\nimport ImageLibraryModal from './ImageLibraryModal';\nimport InsertFieldModal from './InsertFieldModal';\nimport { CustomToolbar } from './CustomToolbar';\nimport { formatHTML } from '../utils';\nimport { clipboardLinkWithTagMatcher } from '../quillMatchers/clipboardLinkWithTagMatcher';\nimport Quill from '../config/quillSingletonConfigurations';\n\nexport default class DSWYSIWYGEditorImpl extends React.PureComponent {\n  quill: undefined | typeof ReactQuill;\n\n  constructor(props) {\n    super(props);\n    this.quill = undefined; // this will hold the quill instance reference\n    const instanceUid = uid(12);\n    const uniqueClassName = `ds-wysiwyg-editor-${instanceUid}`;\n    const quillModules = {\n      toolbar: {\n        container: this.props.toolbarContainer ? `#${this.props.toolbarContainer}` : `#toolbar-${uniqueClassName}`,\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      ...this.props.quillModules,\n    };\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      uid: instanceUid,\n      uniqueClassName,\n      quillModules,\n    };\n    const { toolbar } = 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\n  getEditor = () => this.quill?.getEditor();\n\n  // eslint-disable-next-line max-params\n  onChangeQuill = (html, delta, source, editor) => {\n    // console.log('quill detected a change');\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  quillRef = (ref) => {\n    const editor = ref?.getEditor();\n    if (this.getEditor() !== editor) {\n      // the underlying quill instance has changed\n      // this may happens because it's the first render or for other reasons\n      // but any instance configuration must happen again in this case\n\n      // we add a clipboard matcher\n      // https://github.com/quilljs/quill/issues/2677\n      editor?.clipboard.addMatcher('a', clipboardLinkWithTagMatcher);\n    }\n    this.props.getQuillRef(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      height,\n      value,\n      showRawHTML,\n      onShowHTML,\n      hideItems,\n      // bounds,\n      // a bunch of props we don't want to pass to the editor\n      onChange,\n      handleImageClick,\n      handleCustomFieldClick,\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        data-uid={this.state.uid}\n      >\n        {customToolbar || (\n          <CustomToolbar\n            customFields={customFields}\n            onShowHTML={onShowHTML}\n            hideItems={hideItems}\n            userProps={this.props}\n            id={`toolbar-${this.state.uniqueClassName}`}\n          />\n        )}\n        <ReactQuill\n          ref={this.quillRef}\n          modules={this.state.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-${this.state.uid}`}\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": ["React"]
 }

package/dist/esm/config/quillSingletonConfigurations.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Quill } from "react-quill";
+import BlotFormatter from "quill-blot-formatter";
+import IndentStyle from "../quillOverrides/IndentStyle";
+import Image from "../quillOverrides/Image";
+import LinkFormat from "../quillOverrides/LinkFormat";
+if (!Quill._dsDidRegisterBlotFormatter) {
+  Quill.register("modules/blotFormatter", BlotFormatter);
+  Quill._dsDidRegisterBlotFormatter = true;
+}
+if (!Quill._dsDidConfigureTextWhitelist) {
+  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"
+  ];
+  Quill.register(AlignStyle, true);
+  Quill.register(IndentStyle, true);
+  Quill.register(FontStyle, true);
+  Quill.register(SizeStyle, true);
+  Quill._dsDidConfigureTextWhitelist = true;
+}
+if (!Quill._dsDidConfigureBlock) {
+  const Block = Quill.import("blots/block");
+  Block.tagName = "p";
+  Quill.register(Block);
+  Quill._dsDidConfigureBlock = true;
+}
+if (!Quill._dsDidConfigureImage) {
+  Quill.register(Image, true);
+  Quill._dsDidConfigureImage = true;
+}
+if (!Quill._dsDidConfigureLink) {
+  Quill.register(LinkFormat, true);
+  Quill._dsDidConfigureLink = true;
+}
+var quillSingletonConfigurations_default = Quill;
+export {
+  quillSingletonConfigurations_default as default
+};
+//# sourceMappingURL=quillSingletonConfigurations.js.map

package/dist/esm/config/quillSingletonConfigurations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/quillSingletonConfigurations.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Quill } from 'react-quill';\nimport BlotFormatter from 'quill-blot-formatter';\nimport IndentStyle from '../quillOverrides/IndentStyle';\nimport Image from '../quillOverrides/Image';\nimport LinkFormat from '../quillOverrides/LinkFormat';\n\n// hystorically we have always been modifying the Quill object directly\n//   in node this means we have modified the global Quill object which is a singleton\n//   it's not a good practice and we should not do it but to ensure our changes are transparent\n//      we keep up the bad practice untill a new version of our editor is released\n//   we will atleast reduce the amount of times we modify the Quill object by only doing it once\n//      this is \"new\" bad practice but it's better than modifying the global Quill object constantly\n//      we achieve this by adding a flag to the Quill object to indicate that we have already modified it\nif (!Quill._dsDidRegisterBlotFormatter) {\n  Quill.register('modules/blotFormatter', BlotFormatter);\n  Quill._dsDidRegisterBlotFormatter = true;\n}\nif (!Quill._dsDidConfigureTextWhitelist) {\n  // Fix block styled formats ----------------\n  const AlignStyle = Quill.import('attributors/style/align');\n  const FontStyle = Quill.import('attributors/style/font');\n  FontStyle.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  ];\n  const SizeStyle = Quill.import('attributors/style/size');\n  SizeStyle.whitelist = [\n    // allow ONLY these sizes and the default\n    'x-small',\n    'large',\n    'x-large',\n  ];\n  Quill.register(AlignStyle, true);\n  Quill.register(IndentStyle, true);\n  Quill.register(FontStyle, true);\n  Quill.register(SizeStyle, true);\n  Quill._dsDidConfigureTextWhitelist = true;\n}\nif (!Quill._dsDidConfigureBlock) {\n  // Fix Doc Viewer p tags extra margin issue ---------\n  const Block = Quill.import('blots/block');\n  Block.tagName = 'p';\n  Quill.register(Block);\n  Quill._dsDidConfigureBlock = true;\n  // -----------------------------------------\n}\nif (!Quill._dsDidConfigureImage) {\n  Quill.register(Image, true);\n  Quill._dsDidConfigureImage = true;\n}\n\nif (!Quill._dsDidConfigureLink) {\n  Quill.register(LinkFormat, true);\n  Quill._dsDidConfigureLink = true;\n}\n\nexport default Quill;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa;AACtB,OAAO,mBAAmB;AAC1B,OAAO,iBAAiB;AACxB,OAAO,WAAW;AAClB,OAAO,gBAAgB;AASvB,IAAI,CAAC,MAAM,6BAA6B;AACtC,QAAM,SAAS,yBAAyB,aAAa;AACrD,QAAM,8BAA8B;AACtC;AACA,IAAI,CAAC,MAAM,8BAA8B;AAEvC,QAAM,aAAa,MAAM,OAAO,yBAAyB;AACzD,QAAM,YAAY,MAAM,OAAO,wBAAwB;AACvD,YAAU,YAAY;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY,MAAM,OAAO,wBAAwB;AACvD,YAAU,YAAY;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,SAAS,YAAY,IAAI;AAC/B,QAAM,SAAS,aAAa,IAAI;AAChC,QAAM,SAAS,WAAW,IAAI;AAC9B,QAAM,SAAS,WAAW,IAAI;AAC9B,QAAM,+BAA+B;AACvC;AACA,IAAI,CAAC,MAAM,sBAAsB;AAE/B,QAAM,QAAQ,MAAM,OAAO,aAAa;AACxC,QAAM,UAAU;AAChB,QAAM,SAAS,KAAK;AACpB,QAAM,uBAAuB;AAE/B;AACA,IAAI,CAAC,MAAM,sBAAsB;AAC/B,QAAM,SAAS,OAAO,IAAI;AAC1B,QAAM,uBAAuB;AAC/B;AAEA,IAAI,CAAC,MAAM,qBAAqB;AAC9B,QAAM,SAAS,YAAY,IAAI;AAC/B,QAAM,sBAAsB;AAC9B;AAEA,IAAO,uCAAQ;",
+  "names": []
+}

package/dist/types/components/DSWYSIWYGEditorImpl.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import ReactQuill from 'react-quill';
 export default class DSWYSIWYGEditorImpl extends React.PureComponent {
-    quillModules: any;
+    quill: undefined | typeof ReactQuill;
     constructor(props: any);
     componentDidMount(): void;
     getEditor: () => any;

package/dist/types/config/quillSingletonConfigurations.d.ts

@@ -0,0 +1,2 @@
+import { Quill } from 'react-quill';
+export default Quill;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-wysiwygeditor",
-  "version": "3.14.13",
+  "version": "3.14.15",
   "license": "MIT",
   "description": "ICE MT - Dimsum - WYSIWYG Editor",
   "files": [
@@ -101,19 +101,17 @@
   "dependencies": {
     "prop-types": "~15.8.1",
     "quill-blot-formatter": "~1.0.5",
-    "react-quill": "2.0.0-beta.2",
-    "@elliemae/ds-button": "3.14.13",
-    "@elliemae/ds-dropdownmenu": "3.14.13",
-    "@elliemae/ds-imagelibrarymodal": "3.14.13",
-    "@elliemae/ds-modal": "3.14.13",
-    "@elliemae/ds-shared": "3.14.13",
-    "@elliemae/ds-tooltip": "3.14.13",
-    "@elliemae/ds-uploader": "3.14.13",
-    "@elliemae/ds-utilities": "3.14.13",
-    "@elliemae/ds-icons": "3.14.13"
-  },
-  "devDependencies": {
-    "quill-delta": "5.0.0"
+    "quill-delta": "5.0.0",
+    "react-quill": "2.0.0-beta.4",
+    "@elliemae/ds-dropdownmenu": "3.14.15",
+    "@elliemae/ds-modal": "3.14.15",
+    "@elliemae/ds-shared": "3.14.15",
+    "@elliemae/ds-button": "3.14.15",
+    "@elliemae/ds-tooltip": "3.14.15",
+    "@elliemae/ds-uploader": "3.14.15",
+    "@elliemae/ds-utilities": "3.14.15",
+    "@elliemae/ds-icons": "3.14.15",
+    "@elliemae/ds-imagelibrarymodal": "3.14.15"
   },
   "publishConfig": {
     "access": "public",