@elliemae/ds-wysiwygeditor 3.32.2-next.1 → 3.33.0-next.1

package/dist/cjs/DSWYSIWYGEditor.js

@@ -0,0 +1,106 @@
+"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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSWYSIWYGEditor_exports = {};
+__export(DSWYSIWYGEditor_exports, {
+  DSWYSIWYGEditor: () => DSWYSIWYGEditor,
+  WYSIWYWithSchema: () => WYSIWYWithSchema,
+  default: () => DSWYSIWYGEditor_default
+});
+module.exports = __toCommonJS(DSWYSIWYGEditor_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_DSWYSIWYGEditorImpl = __toESM(require("./components/DSWYSIWYGEditorImpl.js"));
+const DSWYSIWYGEditor = ({
+  value = "",
+  onChange = () => null,
+  getQuillRef = () => null,
+  quillModules = {},
+  customToolbar,
+  toolbarHandlers,
+  showRawHTML = false,
+  height,
+  hideItems,
+  ...rest
+}) => {
+  const emptyAction = () => {
+  };
+  const [showHTML, setShowHTML] = (0, import_react.useState)(showRawHTML);
+  (0, import_react.useEffect)(() => setShowHTML(showRawHTML), [showRawHTML]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_DSWYSIWYGEditorImpl.default,
+    {
+      handleCustomFieldClick: emptyAction,
+      handleImageClick: emptyAction,
+      quillOverrides: [],
+      value,
+      onChange,
+      getQuillRef,
+      quillModules,
+      customToolbar,
+      toolbarHandlers,
+      showRawHTML: showHTML,
+      onShowHTML: () => setShowHTML(!showHTML),
+      height,
+      hideItems,
+      ...rest
+    }
+  );
+};
+const wysiwygEditorProps = {
+  value: import_ds_props_helpers.PropTypes.string.description("editors value").isRequired,
+  onChange: import_ds_props_helpers.PropTypes.func.description(
+    `(content, delta, source, editor) : Called back with the new contents of the editor after change. 
+    It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as getHTML(). 
+    \u26A0\uFE0F Do not use this delta object as value, as it will cause a loop. 
+    Use editor.getContents() instead. See Using Deltas for details. 
+    Read more: https://github.com/zenoamaro/react-quill#props`
+  ).isRequired,
+  getQuillRef: import_ds_props_helpers.PropTypes.func.description("function to use quill.js ref"),
+  quillModules: import_ds_props_helpers.PropTypes.object.description("object to override quill modules"),
+  customToolbar: import_ds_props_helpers.PropTypes.element.description("custom toolbar"),
+  toolbarHandlers: import_ds_props_helpers.PropTypes.object.description("object with toolbar handlers"),
+  showRawHTML: import_ds_props_helpers.PropTypes.bool.description("whether to display html view or not").defaultValue(false),
+  height: import_ds_props_helpers.PropTypes.string.description("heigth of the editors text area"),
+  readOnly: import_ds_props_helpers.PropTypes.string.description(
+    "If true, the editor won't allow changing its contents. Wraps the Quill disable API."
+  ),
+  hideToolbar: import_ds_props_helpers.PropTypes.bool.description("If true, the editor will hide the toolbar.").defaultValue(false),
+  hideItems: import_ds_props_helpers.PropTypes.object.description("object of defaultItems to be removed from toolbar").defaultValue({}),
+  zIndex: import_ds_props_helpers.PropTypes.number.description(
+    "zIndex to be used (required when used in a modal for correct tooltips displaying)"
+  )
+};
+DSWYSIWYGEditor.propTypes = wysiwygEditorProps;
+DSWYSIWYGEditor.displayName = "DSWYSIWYGEditor";
+const WYSIWYWithSchema = (0, import_ds_props_helpers.describe)(DSWYSIWYGEditor);
+WYSIWYWithSchema.propTypes = wysiwygEditorProps;
+var DSWYSIWYGEditor_default = DSWYSIWYGEditor;
+//# sourceMappingURL=DSWYSIWYGEditor.js.map

package/dist/cjs/DSWYSIWYGEditor.js.map

@@ -0,0 +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-props-helpers';\nimport DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl.js';\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  hideToolbar: PropTypes.bool.description('If true, the editor will hide the toolbar.').defaultValue(false),\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,8BAAoC;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,EACA,GAAG;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,kCAAU,OAAO,YAAY,eAAe,EAAE;AAAA,EACrD,UAAU,kCAAU,KAAK;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKF,EAAE;AAAA,EACF,aAAa,kCAAU,KAAK,YAAY,8BAA8B;AAAA,EACtE,cAAc,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAC7E,eAAe,kCAAU,QAAQ,YAAY,gBAAgB;AAAA,EAC7D,iBAAiB,kCAAU,OAAO,YAAY,8BAA8B;AAAA,EAC5E,aAAa,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EACjG,QAAQ,kCAAU,OAAO,YAAY,iCAAiC;AAAA,EACtE,UAAU,kCAAU,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EACA,aAAa,kCAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,KAAK;AAAA,EACxG,WAAW,kCAAU,OAAO,YAAY,mDAAmD,EAAE,aAAa,CAAC,CAAC;AAAA,EAC5G,QAAQ,kCAAU,OAAO;AAAA,IACvB;AAAA,EACF;AACF;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,uBAAmB,kCAAS,eAAe;AACjD,iBAAiB,YAAY;AAG7B,IAAO,0BAAQ;",
+  "names": ["DSWYSIWYGEditorImpl"]
+}

package/dist/cjs/components/CustomImageUploader.js

@@ -0,0 +1,138 @@
+"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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CustomImageUploader_exports = {};
+__export(CustomImageUploader_exports, {
+  CustomImageUploader: () => CustomImageUploader
+});
+module.exports = __toCommonJS(CustomImageUploader_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_uploader = require("@elliemae/ds-uploader");
+var import_ds_modal = require("@elliemae/ds-modal");
+var import_TippedButton = require("./TippedButton.js");
+const ALLOWED_TYPES_TEXT = "JPG, JPEG, PNG, GIF, BMP, TIFF";
+const ALLOWED_TYPES = /image\/(jpeg|jpg|png|gif|bmp|tiff)/;
+const DEFAULT_MAX_SIZE = 1024 * 1024;
+const CustomImageUploader = ({
+  quillRef,
+  editorFieldName,
+  allowedImageTypes = ALLOWED_TYPES_TEXT,
+  uploadAsset = () => null,
+  zIndex = 1
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [inProgress, setInProgress] = (0, import_react.useState)(false);
+  const [lastSelection, setLastSelection] = (0, import_react.useState)({ index: 0, length: 0 });
+  const elementId = `uploadImage${editorFieldName}`;
+  const handleFileChange = async (files) => {
+    if (!inProgress) {
+      setError(null);
+      const selectedFile = files[0];
+      if (!selectedFile) {
+        setError("Please select a file.");
+        return false;
+      }
+      if (!selectedFile.type.match(ALLOWED_TYPES)) {
+        setError("File must be an image.");
+      } else if (selectedFile.size > DEFAULT_MAX_SIZE) {
+        setError("File is too large.");
+      } else {
+        const fr = new FileReader();
+        fr.onload = async () => {
+          setInProgress(true);
+          try {
+            const url = await uploadAsset({
+              name: selectedFile.name,
+              type: selectedFile.type,
+              description: selectedFile.name,
+              isSystemAsset: false,
+              file: fr.result
+            });
+            setIsOpen(false);
+            quillRef?.getEditor().insertEmbed(lastSelection?.index || 0, "image", url);
+          } catch (e) {
+            setError("An error has occurred, try again");
+          }
+          setInProgress(false);
+        };
+        fr.readAsArrayBuffer(selectedFile);
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TippedButton.TippedButton,
+      {
+        zIndex,
+        tip: "Insert Image",
+        onClick: () => {
+          setLastSelection(quillRef?.getEditor().getSelection());
+          setIsOpen(true);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Image, { color: ["neutral", 500], size: "s" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_ds_modal.DSModal,
+      {
+        isOpen,
+        title: "",
+        onConfirm: () => {
+          setIsOpen(false);
+        },
+        onClose: () => {
+          setIsOpen(false);
+        },
+        showClose: true,
+        version: 2,
+        size: "xsmall",
+        modalType: import_ds_modal.MODAL_TYPE_V2.DECISION,
+        confirmLabel: "Cancel",
+        message: "",
+        children: [
+          !inProgress && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_uploader.DSUploader,
+            {
+              containerProps: { id: elementId },
+              showAltAction: false,
+              acceptedTypesText: allowedImageTypes,
+              onDrop: handleFileChange
+            }
+          ),
+          inProgress && "Upload in progress...",
+          error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "red", marginTop: "10px" }, children: error })
+        ]
+      }
+    )
+  ] });
+};
+//# sourceMappingURL=CustomImageUploader.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/CustomImageUploader.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\nimport { Image } from '@elliemae/ds-icons';\nimport { DSUploader } from '@elliemae/ds-uploader';\nimport { DSModal, MODAL_TYPE_V2 } from '@elliemae/ds-modal';\nimport { TippedButton } from './TippedButton.js';\n\nconst ALLOWED_TYPES_TEXT = 'JPG, JPEG, PNG, GIF, BMP, TIFF';\nconst ALLOWED_TYPES = /image\\/(jpeg|jpg|png|gif|bmp|tiff)/;\nconst DEFAULT_MAX_SIZE = 1024 * 1024; // 1 MB\n\nexport const CustomImageUploader = ({\n  quillRef,\n  editorFieldName,\n  allowedImageTypes = ALLOWED_TYPES_TEXT,\n  uploadAsset = () => null,\n  zIndex = 1,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [error, setError] = useState(null);\n  const [inProgress, setInProgress] = useState(false);\n  const [lastSelection, setLastSelection] = useState({ index: 0, length: 0 });\n\n  const elementId = `uploadImage${editorFieldName}`;\n\n  // eslint-disable-next-line consistent-return\n  const handleFileChange = async (files) => {\n    if (!inProgress) {\n      setError(null);\n      const selectedFile = files[0];\n      if (!selectedFile) {\n        setError('Please select a file.');\n        return false;\n      }\n      if (!selectedFile.type.match(ALLOWED_TYPES)) {\n        setError('File must be an image.');\n      } else if (selectedFile.size > DEFAULT_MAX_SIZE) {\n        setError('File is too large.');\n      } else {\n        const fr = new FileReader();\n        fr.onload = async () => {\n          setInProgress(true);\n          try {\n            const url = await uploadAsset({\n              name: selectedFile.name,\n              type: selectedFile.type,\n              description: selectedFile.name,\n              isSystemAsset: false,\n              file: fr.result,\n            });\n            setIsOpen(false);\n            quillRef?.getEditor().insertEmbed(lastSelection?.index || 0, 'image', url);\n          } catch (e) {\n            setError('An error has occurred, try again');\n          }\n          setInProgress(false);\n        };\n        fr.readAsArrayBuffer(selectedFile);\n      }\n    }\n  };\n  return (\n    <>\n      <TippedButton\n        zIndex={zIndex}\n        tip=\"Insert Image\"\n        onClick={() => {\n          setLastSelection(quillRef?.getEditor().getSelection());\n          setIsOpen(true);\n        }}\n      >\n        <Image color={['neutral', 500]} size=\"s\" />\n      </TippedButton>\n      <DSModal\n        isOpen={isOpen}\n        title=\"\"\n        onConfirm={() => {\n          setIsOpen(false);\n        }}\n        onClose={() => {\n          setIsOpen(false);\n        }}\n        showClose\n        version={2}\n        size=\"xsmall\"\n        modalType={MODAL_TYPE_V2.DECISION}\n        confirmLabel=\"Cancel\"\n        message=\"\"\n      >\n        {!inProgress && (\n          <DSUploader\n            containerProps={{ id: elementId }}\n            showAltAction={false}\n            acceptedTypesText={allowedImageTypes}\n            onDrop={handleFileChange}\n          />\n        )}\n        {inProgress && 'Upload in progress...'}\n        {error && <div style={{ color: 'red', marginTop: '10px' }}>{error}</div>}\n      </DSModal>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiEnB;AA7DJ,mBAAgC;AAChC,sBAAsB;AACtB,yBAA2B;AAC3B,sBAAuC;AACvC,0BAA6B;AAE7B,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AACtB,MAAM,mBAAmB,OAAO;AAEzB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,cAAc,MAAM;AAAA,EACpB,SAAS;AACX,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,IAAI;AACvC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAE1E,QAAM,YAAY,cAAc;AAGhC,QAAM,mBAAmB,OAAO,UAAU;AACxC,QAAI,CAAC,YAAY;AACf,eAAS,IAAI;AACb,YAAM,eAAe,MAAM,CAAC;AAC5B,UAAI,CAAC,cAAc;AACjB,iBAAS,uBAAuB;AAChC,eAAO;AAAA,MACT;AACA,UAAI,CAAC,aAAa,KAAK,MAAM,aAAa,GAAG;AAC3C,iBAAS,wBAAwB;AAAA,MACnC,WAAW,aAAa,OAAO,kBAAkB;AAC/C,iBAAS,oBAAoB;AAAA,MAC/B,OAAO;AACL,cAAM,KAAK,IAAI,WAAW;AAC1B,WAAG,SAAS,YAAY;AACtB,wBAAc,IAAI;AAClB,cAAI;AACF,kBAAM,MAAM,MAAM,YAAY;AAAA,cAC5B,MAAM,aAAa;AAAA,cACnB,MAAM,aAAa;AAAA,cACnB,aAAa,aAAa;AAAA,cAC1B,eAAe;AAAA,cACf,MAAM,GAAG;AAAA,YACX,CAAC;AACD,sBAAU,KAAK;AACf,sBAAU,UAAU,EAAE,YAAY,eAAe,SAAS,GAAG,SAAS,GAAG;AAAA,UAC3E,SAAS,GAAP;AACA,qBAAS,kCAAkC;AAAA,UAC7C;AACA,wBAAc,KAAK;AAAA,QACrB;AACA,WAAG,kBAAkB,YAAY;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AACA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAI;AAAA,QACJ,SAAS,MAAM;AACb,2BAAiB,UAAU,UAAU,EAAE,aAAa,CAAC;AACrD,oBAAU,IAAI;AAAA,QAChB;AAAA,QAEA,sDAAC,yBAAM,OAAO,CAAC,WAAW,GAAG,GAAG,MAAK,KAAI;AAAA;AAAA,IAC3C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAM;AAAA,QACN,WAAW,MAAM;AACf,oBAAU,KAAK;AAAA,QACjB;AAAA,QACA,SAAS,MAAM;AACb,oBAAU,KAAK;AAAA,QACjB;AAAA,QACA,WAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAK;AAAA,QACL,WAAW,8BAAc;AAAA,QACzB,cAAa;AAAA,QACb,SAAQ;AAAA,QAEP;AAAA,WAAC,cACA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAgB,EAAE,IAAI,UAAU;AAAA,cAChC,eAAe;AAAA,cACf,mBAAmB;AAAA,cACnB,QAAQ;AAAA;AAAA,UACV;AAAA,UAED,cAAc;AAAA,UACd,SAAS,4CAAC,SAAI,OAAO,EAAE,OAAO,OAAO,WAAW,OAAO,GAAI,iBAAM;AAAA;AAAA;AAAA,IACpE;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/components/CustomToolbar.js

@@ -0,0 +1,327 @@
+"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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CustomToolbar_exports = {};
+__export(CustomToolbar_exports, {
+  CustomDropdown: () => CustomDropdown,
+  CustomToolbar: () => CustomToolbar
+});
+module.exports = __toCommonJS(CustomToolbar_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
+var import_constants = require("../constants.js");
+var import_TippedButton = require("./TippedButton.js");
+var import_TippedSelect = require("./TippedSelect.js");
+const optionsToValues = (options) => options.map((opt) => opt.toLowerCase().replace(" ", "-"));
+const CustomFields = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u1438\u1433" });
+const Color = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: color });
+const Colors = ({ className, tip, zIndex }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedSelect.TippedSelect, { className, tip, zIndex, children: import_constants.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Color, { color }, color)) });
+const CustomDropdown = ({
+  options,
+  label,
+  onSelectMenuItem = () => null,
+  onClickOutsideMenu = () => null,
+  onClose = () => null,
+  closeMenuOnItemSelection,
+  isOpen,
+  minWidth,
+  maxWidth,
+  zIndex = 10
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_ds_dropdownmenu.DSDropdownMenu,
+  {
+    onClickOutsideMenu,
+    options,
+    onSelectMenuItem,
+    onClose,
+    closeMenuOnItemSelection,
+    isOpen,
+    minWidth,
+    maxWidth,
+    zIndex,
+    preventOverflow: "scrollParent",
+    triggerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button_v2.DSButtonV2, { buttonType: "text", "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { gap: "xxs", cols: ["auto", "max-content"], children: [
+      label,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadDown, {})
+    ] }) })
+  }
+);
+const Divider = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    style: {
+      height: "21px",
+      width: "1px",
+      margin: "0 10px",
+      padding: "0",
+      borderLeft: "1px solid #bbb",
+      display: "inline-block"
+    }
+  }
+);
+const CustomToolbar = ({
+  customFields,
+  customItems = [],
+  hideItems = {},
+  onShowHTML = () => {
+  },
+  id = "toolbar",
+  userProps
+}) => {
+  const {
+    HEADER,
+    FONT,
+    FONT_SIZE,
+    BOLD,
+    ITALIC,
+    UNDERLINE,
+    STRIKE,
+    SUB,
+    SUPER,
+    ORDERED_LIST,
+    BULLET_LIST,
+    INDENT_MINUS_ONE,
+    INDENT_PLUS_ONE,
+    ALIGN,
+    FONT_COLOR,
+    FONT_BACKGROUND_COLOR,
+    HYPERLINK,
+    IMAGE,
+    CLEAR_FORMAT,
+    SHOW_HTML
+  } = hideItems;
+  const [showHTML, setShowHTML] = (0, import_react.useState)(false);
+  const handleShowHTML = (e) => {
+    e.preventDefault();
+    setShowHTML(!showHTML);
+    onShowHTML();
+  };
+  const theme = (0, import_react.useContext)(import_ds_system.ThemeContext);
+  const defaultZIndex = theme?.zIndex?.tooltip;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id, className: "ds-ql-custom-toolbar", children: [
+    (!HEADER || !FONT || !FONT_SIZE) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
+      !HEADER && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TippedSelect.TippedSelect,
+          {
+            className: "ql-header",
+            tip: "Header",
+            values: ["", "1", "2", "3", "4", "5", "6"],
+            zIndex: userProps?.zIndex || defaultZIndex
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+      ] }),
+      !FONT && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TippedSelect.TippedSelect,
+          {
+            className: "ql-font",
+            defaultValue: "sans-serif",
+            options: import_constants.fonts,
+            tip: "Font",
+            values: optionsToValues(import_constants.fonts),
+            zIndex: userProps?.zIndex || defaultZIndex
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+      ] }),
+      !FONT_SIZE && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TippedSelect.TippedSelect,
+          {
+            className: "ql-size",
+            options: import_constants.sizes,
+            tip: "Font Size",
+            values: optionsToValues(import_constants.sizesReal),
+            zIndex: userProps?.zIndex || defaultZIndex
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+      ] })
+    ] }),
+    (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
+      !BOLD && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || defaultZIndex, className: "ql-bold", tip: "Bold" }),
+      !ITALIC && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || defaultZIndex, className: "ql-italic", tip: "Italic" }),
+      !UNDERLINE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || defaultZIndex, className: "ql-underline", tip: "Underline" }),
+      !STRIKE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || defaultZIndex, className: "ql-strike", tip: "Strike" })
+    ] }),
+    (!SUB || !SUPER) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
+      !SUB && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || defaultZIndex, className: "ql-script", tip: "Sub", value: "sub" }),
+      !SUPER && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || defaultZIndex, className: "ql-script", tip: "Super", value: "super" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+    ] }),
+    (!ORDERED_LIST || !BULLET_LIST) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
+      !ORDERED_LIST && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TippedButton.TippedButton,
+        {
+          zIndex: userProps?.zIndex || defaultZIndex,
+          className: "ql-list",
+          tip: "Ordered List",
+          value: "ordered"
+        }
+      ),
+      !BULLET_LIST && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TippedButton.TippedButton,
+        {
+          zIndex: userProps?.zIndex || defaultZIndex,
+          className: "ql-list",
+          tip: "Bullet List",
+          value: "bullet"
+        }
+      )
+    ] }),
+    (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
+      !INDENT_MINUS_ONE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TippedButton.TippedButton,
+        {
+          zIndex: userProps?.zIndex || defaultZIndex,
+          className: "ql-indent",
+          tip: "Indent -1",
+          value: "-1"
+        }
+      ),
+      !INDENT_PLUS_ONE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TippedButton.TippedButton,
+        {
+          zIndex: userProps?.zIndex || defaultZIndex,
+          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.jsxs)("span", { className: "ql-formats", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TippedButton.TippedButton,
+          {
+            zIndex: userProps?.zIndex || defaultZIndex,
+            className: "ql-align",
+            tip: "Left",
+            value: ""
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TippedButton.TippedButton,
+          {
+            zIndex: userProps?.zIndex || defaultZIndex,
+            className: "ql-align",
+            tip: "Center",
+            value: "center"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TippedButton.TippedButton,
+          {
+            zIndex: userProps?.zIndex || defaultZIndex,
+            className: "ql-align",
+            tip: "Right",
+            value: "right"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TippedButton.TippedButton,
+          {
+            zIndex: userProps?.zIndex || defaultZIndex,
+            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: [
+      !FONT_COLOR && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Colors, { zIndex: userProps?.zIndex || defaultZIndex, className: "ql-color", tip: "Font Color" }),
+      !FONT_BACKGROUND_COLOR && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Colors, { zIndex: userProps?.zIndex || defaultZIndex, className: "ql-background", tip: "Font Background Color" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+    ] }),
+    (!HYPERLINK || !IMAGE) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
+      !HYPERLINK && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TippedButton.TippedButton,
+        {
+          zIndex: userProps?.zIndex || defaultZIndex,
+          className: "ql-link",
+          tip: "Hyperlink: Select Text First"
+        }
+      ),
+      !IMAGE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TippedButton.TippedButton, { zIndex: userProps?.zIndex || defaultZIndex, className: "ql-image", tip: "Insert Image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+    ] }),
+    !CLEAR_FORMAT && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ql-formats", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TippedButton.TippedButton,
+      {
+        zIndex: userProps?.zIndex || defaultZIndex,
+        className: "ql-clean",
+        tip: "Clear Format (Select Text)"
+      }
+    ) }),
+    !SHOW_HTML && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TippedButton.TippedButton,
+        {
+          zIndex: userProps?.zIndex || defaultZIndex,
+          style: {
+            width: "fit-content",
+            color: "#1e79c2",
+            fontWeight: "500"
+          },
+          onClick: handleShowHTML,
+          tip: showHTML ? "SHOW TEXT" : "SHOW HTML",
+          className: "ql-customFields-html",
+          children: showHTML ? "SHOW TEXT" : "SHOW HTML"
+        }
+      )
+    ] }),
+    customFields && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ql-formats", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TippedButton.TippedButton,
+        {
+          zIndex: userProps?.zIndex || defaultZIndex,
+          className: "ql-customFields",
+          tip: "Insert Custom Field",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomFields, {})
+        }
+      )
+    ] }),
+    customItems && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "inline-flex" }, children: customItems.map((Item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, {})
+    ] })) })
+  ] });
+};
+//# sourceMappingURL=CustomToolbar.js.map

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

@@ -0,0 +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, useContext } from 'react';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ArrowheadDown } from '@elliemae/ds-icons';\nimport { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { colors, fonts, sizes, sizesReal } from '../constants.js';\nimport { TippedButton } from './TippedButton.js';\nimport { TippedSelect } from './TippedSelect.js';\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={\n      <DSButtonV2 buttonType=\"text\" aria-label={label}>\n        <Grid gap=\"xxs\" cols={['auto', 'max-content']}>\n          {label}\n          <ArrowheadDown />\n        </Grid>\n      </DSButtonV2>\n    }\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  const theme = useContext(ThemeContext);\n  const defaultZIndex = theme?.zIndex?.tooltip;\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 || defaultZIndex}\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 || defaultZIndex}\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 || defaultZIndex}\n              />\n              <Divider />\n            </>\n          )}\n        </span>\n      )}\n      {(!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && (\n        <span className=\"ql-formats\">\n          {!BOLD && <TippedButton zIndex={userProps?.zIndex || defaultZIndex} className=\"ql-bold\" tip=\"Bold\" />}\n          {!ITALIC && <TippedButton zIndex={userProps?.zIndex || defaultZIndex} className=\"ql-italic\" tip=\"Italic\" />}\n          {!UNDERLINE && (\n            <TippedButton zIndex={userProps?.zIndex || defaultZIndex} className=\"ql-underline\" tip=\"Underline\" />\n          )}\n          {!STRIKE && <TippedButton zIndex={userProps?.zIndex || defaultZIndex} className=\"ql-strike\" tip=\"Strike\" />}\n        </span>\n      )}\n      {(!SUB || !SUPER) && (\n        <span className=\"ql-formats\">\n          {!SUB && (\n            <TippedButton zIndex={userProps?.zIndex || defaultZIndex} className=\"ql-script\" tip=\"Sub\" value=\"sub\" />\n          )}\n          {!SUPER && (\n            <TippedButton zIndex={userProps?.zIndex || defaultZIndex} className=\"ql-script\" tip=\"Super\" value=\"super\" />\n          )}\n          <Divider />\n        </span>\n      )}\n      {(!ORDERED_LIST || !BULLET_LIST) && (\n        <span className=\"ql-formats\">\n          {!ORDERED_LIST && (\n            <TippedButton\n              zIndex={userProps?.zIndex || defaultZIndex}\n              className=\"ql-list\"\n              tip=\"Ordered List\"\n              value=\"ordered\"\n            />\n          )}\n          {!BULLET_LIST && (\n            <TippedButton\n              zIndex={userProps?.zIndex || defaultZIndex}\n              className=\"ql-list\"\n              tip=\"Bullet List\"\n              value=\"bullet\"\n            />\n          )}\n        </span>\n      )}\n      {(!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && (\n        <span className=\"ql-formats\">\n          {!INDENT_MINUS_ONE && (\n            <TippedButton\n              zIndex={userProps?.zIndex || defaultZIndex}\n              className=\"ql-indent\"\n              tip=\"Indent -1\"\n              value=\"-1\"\n            />\n          )}\n          {!INDENT_PLUS_ONE && (\n            <TippedButton\n              zIndex={userProps?.zIndex || defaultZIndex}\n              className=\"ql-indent\"\n              tip=\"Indent +1\"\n              value=\"+1\"\n            />\n          )}\n        </span>\n      )}\n      {!ALIGN && (\n        <span className=\"ql-formats\">\n          {/* <TippedSelect zIndex={userProps?.zIndex || defaultZIndex} 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\n              zIndex={userProps?.zIndex || defaultZIndex}\n              className=\"ql-align\"\n              tip=\"Left\"\n              value=\"\"\n            ></TippedButton>\n            <TippedButton\n              zIndex={userProps?.zIndex || defaultZIndex}\n              className=\"ql-align\"\n              tip=\"Center\"\n              value=\"center\"\n            ></TippedButton>\n            <TippedButton\n              zIndex={userProps?.zIndex || defaultZIndex}\n              className=\"ql-align\"\n              tip=\"Right\"\n              value=\"right\"\n            ></TippedButton>\n            <TippedButton\n              zIndex={userProps?.zIndex || defaultZIndex}\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 || defaultZIndex} className=\"ql-color\" tip=\"Font Color\" />}\n          {!FONT_BACKGROUND_COLOR && (\n            <Colors zIndex={userProps?.zIndex || defaultZIndex} 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\n              zIndex={userProps?.zIndex || defaultZIndex}\n              className=\"ql-link\"\n              tip=\"Hyperlink: Select Text First\"\n            />\n          )}\n          {!IMAGE && (\n            <TippedButton zIndex={userProps?.zIndex || defaultZIndex} className=\"ql-image\" tip=\"Insert Image\" />\n          )}\n          <Divider />\n        </span>\n      )}\n      {!CLEAR_FORMAT && (\n        <span className=\"ql-formats\">\n          <TippedButton\n            zIndex={userProps?.zIndex || defaultZIndex}\n            className=\"ql-clean\"\n            tip=\"Clear Format (Select Text)\"\n          />\n        </span>\n      )}\n      {!SHOW_HTML && (\n        <span className=\"ql-formats\">\n          <Divider />\n          <TippedButton\n            zIndex={userProps?.zIndex || defaultZIndex}\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\n            zIndex={userProps?.zIndex || defaultZIndex}\n            className=\"ql-customFields\"\n            tip=\"Insert Custom Field\"\n          >\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": []
+}