@elliemae/ds-wysiwygeditor 2.2.1 → 2.3.0-alpha.4

package/esm/components/CustomToolbar.js

@@ -1,101 +1,71 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState } from 'react';
-import DSButton from '@elliemae/ds-button';
-import { ArrowheadDown } from '@elliemae/ds-icons';
-import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
-import { fonts, sizes, sizesReal, colors } from '../constants.js';
-import { TippedButton } from './TippedButton.js';
-import { TippedSelect } from './TippedSelect.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _span, _ArrowheadDown, _Divider, _Divider2, _Divider3, _Divider4, _Divider5, _Divider6, _Divider7, _Divider8, _Divider9, _CustomFields, _Divider10;
-
-const optionsToValues = options => options.map(opt => opt.toLowerCase().replace(' ', '-')); // Stateless Components -----------------------------------------
-
-
-const CustomFields = () => _span || (_span = /*#__PURE__*/_jsx("span", {}, void 0, "\u1438\u1433")); // eslint-disable-line react/jsx-one-expression-per-line
-
-
-const Color = _ref => {
-  let {
-    color
-  } = _ref;
-  return /*#__PURE__*/_jsx("option", {
-    value: color
-  });
-};
-
-const Colors = _ref2 => {
-  let {
-    className,
-    tip,
-    zIndex
-  } = _ref2;
-  return /*#__PURE__*/_jsx(TippedSelect, {
-    className: className,
-    tip: tip,
-    zIndex: zIndex
-  }, void 0, colors.map(color => /*#__PURE__*/_jsx(Color, {
-    color: color
-  }, color)));
-};
-
-const CustomDropdown = _ref3 => {
-  let {
-    options,
-    label,
-    onSelectMenuItem = () => null,
-    onClickOutsideMenu = () => null,
-    onClose = () => null,
-    closeMenuOnItemSelection,
-    isOpen,
-    minWidth,
-    maxWidth,
-    zIndex = 10
-  } = _ref3;
-  return /*#__PURE__*/_jsx(DSDropdownMenu, {
-    onClickOutsideMenu: onClickOutsideMenu,
-    options: options,
-    onSelectMenuItem: onSelectMenuItem,
-    onClose: onClose,
-    closeMenuOnItemSelection: closeMenuOnItemSelection,
-    isOpen: isOpen,
-    minWidth: minWidth,
-    maxWidth: maxWidth,
-    zIndex: zIndex,
-    preventOverflow: "scrollParent",
-    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
-      labelText: label,
-      buttonType: "text",
-      icon: _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {}))
-    })
-  });
-};
-
-const Divider = () => /*#__PURE__*/_jsx("div", {
+import * as React from "react";
+import React2, { useState } from "react";
+import DSButton from "@elliemae/ds-button";
+import { ArrowheadDown } from "@elliemae/ds-icons";
+import DSDropdownMenu from "@elliemae/ds-dropdownmenu";
+import { colors, fonts, sizes, sizesReal } from "../constants";
+import { TippedButton } from "./TippedButton";
+import { TippedSelect } from "./TippedSelect";
+const optionsToValues = (options) => options.map((opt) => opt.toLowerCase().replace(" ", "-"));
+const CustomFields = () => /* @__PURE__ */ React2.createElement("span", null, "\u1438\u1433");
+const Color = ({ color }) => /* @__PURE__ */ React2.createElement("option", {
+  value: color
+});
+const Colors = ({ className, tip, zIndex }) => /* @__PURE__ */ React2.createElement(TippedSelect, {
+  className,
+  tip,
+  zIndex
+}, colors.map((color) => /* @__PURE__ */ React2.createElement(Color, {
+  key: color,
+  color
+})));
+const CustomDropdown = ({
+  options,
+  label,
+  onSelectMenuItem = () => null,
+  onClickOutsideMenu = () => null,
+  onClose = () => null,
+  closeMenuOnItemSelection,
+  isOpen,
+  minWidth,
+  maxWidth,
+  zIndex = 10
+}) => /* @__PURE__ */ React2.createElement(DSDropdownMenu, {
+  onClickOutsideMenu,
+  options,
+  onSelectMenuItem,
+  onClose,
+  closeMenuOnItemSelection,
+  isOpen,
+  minWidth,
+  maxWidth,
+  zIndex,
+  preventOverflow: "scrollParent",
+  triggerComponent: /* @__PURE__ */ React2.createElement(DSButton, {
+    labelText: label,
+    buttonType: "text",
+    icon: /* @__PURE__ */ React2.createElement(ArrowheadDown, null)
+  })
+});
+const Divider = () => /* @__PURE__ */ React2.createElement("div", {
   style: {
-    height: '21px',
-    width: '1px',
-    margin: '0 10px',
-    padding: '0',
-    borderLeft: '1px solid #bbb',
-    display: 'inline-block'
+    height: "21px",
+    width: "1px",
+    margin: "0 10px",
+    padding: "0",
+    borderLeft: "1px solid #bbb",
+    display: "inline-block"
   }
 });
-
-const CustomToolbar = _ref4 => {
-  let {
-    customFields,
-    customItems = [],
-    hideItems = {},
-    onShowHTML = () => {},
-    id = 'toolbar',
-    userProps
-  } = _ref4;
+const CustomToolbar = ({
+  customFields,
+  customItems = [],
+  hideItems = {},
+  onShowHTML = () => {
+  },
+  id = "toolbar",
+  userProps
+}) => {
   const {
     HEADER,
     FONT,
@@ -119,153 +89,144 @@ const CustomToolbar = _ref4 => {
     SHOW_HTML
   } = hideItems;
   const [showHTML, setShowHTML] = useState(false);
-
-  const handleShowHTML = e => {
+  const handleShowHTML = (e) => {
     e.preventDefault();
     setShowHTML(!showHTML);
     onShowHTML();
   };
-
-  return /*#__PURE__*/_jsx("div", {
-    id: id,
+  return /* @__PURE__ */ React2.createElement("div", {
+    id,
     className: "ds-ql-custom-toolbar"
-  }, void 0, (!HEADER || !FONT || !FONT_SIZE) && /*#__PURE__*/_jsx("span", {
+  }, (!HEADER || !FONT || !FONT_SIZE) && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, !HEADER && /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(TippedSelect, {
-      className: "ql-header",
-      tip: "Header",
-      values: ['', '1', '2', '3', '4', '5', '6'],
-      zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1
-    }), _Divider || (_Divider = /*#__PURE__*/_jsx(Divider, {}))]
-  }), !FONT && /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(TippedSelect, {
-      className: "ql-font",
-      defaultValue: "sans-serif",
-      options: fonts,
-      tip: "Font",
-      values: optionsToValues(fonts),
-      zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1
-    }), _Divider2 || (_Divider2 = /*#__PURE__*/_jsx(Divider, {}))]
-  }), !FONT_SIZE && /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(TippedSelect, {
-      className: "ql-size",
-      options: sizes,
-      tip: "Font Size",
-      values: optionsToValues(sizesReal),
-      zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1
-    }), _Divider3 || (_Divider3 = /*#__PURE__*/_jsx(Divider, {}))]
-  })), (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /*#__PURE__*/_jsx("span", {
+  }, !HEADER && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedSelect, {
+    className: "ql-header",
+    tip: "Header",
+    values: ["", "1", "2", "3", "4", "5", "6"],
+    zIndex: userProps?.zIndex || 1
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), !FONT && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedSelect, {
+    className: "ql-font",
+    defaultValue: "sans-serif",
+    options: fonts,
+    tip: "Font",
+    values: optionsToValues(fonts),
+    zIndex: userProps?.zIndex || 1
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), !FONT_SIZE && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedSelect, {
+    className: "ql-size",
+    options: sizes,
+    tip: "Font Size",
+    values: optionsToValues(sizesReal),
+    zIndex: userProps?.zIndex || 1
+  }), /* @__PURE__ */ React2.createElement(Divider, null))), (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, !BOLD && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, !BOLD && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-bold",
     tip: "Bold"
-  }), !ITALIC && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }), !ITALIC && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-italic",
     tip: "Italic"
-  }), !UNDERLINE && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }), !UNDERLINE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-underline",
     tip: "Underline"
-  }), !STRIKE && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }), !STRIKE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-strike",
     tip: "Strike"
-  })), (!SUB || !SUPER) && /*#__PURE__*/_jsx("span", {
+  })), (!SUB || !SUPER) && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, !SUB && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, !SUB && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-script",
     tip: "Sub",
     value: "sub"
-  }), !SUPER && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }), !SUPER && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-script",
     tip: "Super",
     value: "super"
-  }), _Divider4 || (_Divider4 = /*#__PURE__*/_jsx(Divider, {}))), (!ORDERED_LIST || !BULLET_LIST) && /*#__PURE__*/_jsx("span", {
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), (!ORDERED_LIST || !BULLET_LIST) && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, !ORDERED_LIST && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, !ORDERED_LIST && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-list",
     tip: "Ordered List",
     value: "ordered"
-  }), !BULLET_LIST && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }), !BULLET_LIST && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-list",
     tip: "Bullet List",
     value: "bullet"
-  })), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /*#__PURE__*/_jsx("span", {
+  })), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, !INDENT_MINUS_ONE && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, !INDENT_MINUS_ONE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-indent",
     tip: "Indent -1",
     value: "-1"
-  }), !INDENT_PLUS_ONE && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }), !INDENT_PLUS_ONE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-indent",
     tip: "Indent +1",
     value: "+1"
-  })), !ALIGN && /*#__PURE__*/_jsx("span", {
+  })), !ALIGN && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, /*#__PURE__*/_jsx(TippedSelect, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, /* @__PURE__ */ React2.createElement(TippedSelect, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-align",
     tip: "Align"
-  }), _Divider5 || (_Divider5 = /*#__PURE__*/_jsx(Divider, {}))), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /*#__PURE__*/_jsx("span", {
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, !FONT_COLOR && /*#__PURE__*/_jsx(Colors, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, !FONT_COLOR && /* @__PURE__ */ React2.createElement(Colors, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-color",
     tip: "Font Color"
-  }), !FONT_BACKGROUND_COLOR && /*#__PURE__*/_jsx(Colors, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }), !FONT_BACKGROUND_COLOR && /* @__PURE__ */ React2.createElement(Colors, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-background",
     tip: "Font Background Color"
-  }), _Divider6 || (_Divider6 = /*#__PURE__*/_jsx(Divider, {}))), (!HYPERLINK || !IMAGE) && /*#__PURE__*/_jsx("span", {
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), (!HYPERLINK || !IMAGE) && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, !HYPERLINK && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, !HYPERLINK && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-link",
     tip: "Hyperlink: Select Text First"
-  }), !IMAGE && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }), !IMAGE && /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-image",
     tip: "Insert Image"
-  }), _Divider7 || (_Divider7 = /*#__PURE__*/_jsx(Divider, {}))), !CLEAR_FORMAT && /*#__PURE__*/_jsx("span", {
+  }), /* @__PURE__ */ React2.createElement(Divider, null)), !CLEAR_FORMAT && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-clean",
     tip: "Clear Format (Select Text)"
-  })), !SHOW_HTML && /*#__PURE__*/_jsx("span", {
+  })), !SHOW_HTML && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, _Divider8 || (_Divider8 = /*#__PURE__*/_jsx(Divider, {})), /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     style: {
-      width: 'fit-content',
-      color: '#1e79c2',
-      fontWeight: '500'
+      width: "fit-content",
+      color: "#1e79c2",
+      fontWeight: "500"
     },
     onClick: handleShowHTML,
-    tip: showHTML ? 'SHOW TEXT' : 'SHOW HTML',
+    tip: showHTML ? "SHOW TEXT" : "SHOW HTML",
     className: "ql-customFields-html"
-  }, void 0, showHTML ? 'SHOW TEXT' : 'SHOW HTML')), customFields && /*#__PURE__*/_jsx("span", {
+  }, showHTML ? "SHOW TEXT" : "SHOW HTML")), customFields && /* @__PURE__ */ React2.createElement("span", {
     className: "ql-formats"
-  }, void 0, _Divider9 || (_Divider9 = /*#__PURE__*/_jsx(Divider, {})), /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+  }, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(TippedButton, {
+    zIndex: userProps?.zIndex || 1,
     className: "ql-customFields",
     tip: "Insert Custom Field"
-  }, void 0, _CustomFields || (_CustomFields = /*#__PURE__*/_jsx(CustomFields, {})))), customItems && /*#__PURE__*/_jsx("span", {
-    style: {
-      display: 'inline-flex'
-    }
-  }, void 0, customItems.map(Item => /*#__PURE__*/jsxs(Fragment, {
-    children: [_Divider10 || (_Divider10 = /*#__PURE__*/_jsx(Divider, {})), /*#__PURE__*/_jsx(Item, {})]
-  }))));
+  }, /* @__PURE__ */ React2.createElement(CustomFields, null))), customItems && /* @__PURE__ */ React2.createElement("span", {
+    style: { display: "inline-flex" }
+  }, customItems.map((Item) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(Item, null)))));
+};
+export {
+  CustomDropdown,
+  CustomToolbar
 };
-
-export { CustomDropdown, CustomToolbar };
+//# sourceMappingURL=CustomToolbar.js.map

package/esm/components/CustomToolbar.js.map

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