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

package/esm/components/CustomToolbar.js

@@ -1,71 +1,101 @@
-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", {
+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", {
   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 = ({
-  customFields,
-  customItems = [],
-  hideItems = {},
-  onShowHTML = () => {
-  },
-  id = "toolbar",
-  userProps
-}) => {
+
+const CustomToolbar = _ref4 => {
+  let {
+    customFields,
+    customItems = [],
+    hideItems = {},
+    onShowHTML = () => {},
+    id = 'toolbar',
+    userProps
+  } = _ref4;
   const {
     HEADER,
     FONT,
@@ -89,144 +119,153 @@ const CustomToolbar = ({
     SHOW_HTML
   } = hideItems;
   const [showHTML, setShowHTML] = useState(false);
-  const handleShowHTML = (e) => {
+
+  const handleShowHTML = e => {
     e.preventDefault();
     setShowHTML(!showHTML);
     onShowHTML();
   };
-  return /* @__PURE__ */ React2.createElement("div", {
-    id,
+
+  return /*#__PURE__*/_jsx("div", {
+    id: id,
     className: "ds-ql-custom-toolbar"
-  }, (!HEADER || !FONT || !FONT_SIZE) && /* @__PURE__ */ React2.createElement("span", {
+  }, void 0, (!HEADER || !FONT || !FONT_SIZE) && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, !HEADER && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedSelect, {
-    className: "ql-header",
-    tip: "Header",
-    values: ["", "1", "2", "3", "4", "5", "6"],
-    zIndex: userProps?.zIndex || 1
-  }), /* @__PURE__ */ React2.createElement(Divider, null)), !FONT && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedSelect, {
-    className: "ql-font",
-    defaultValue: "sans-serif",
-    options: fonts,
-    tip: "Font",
-    values: optionsToValues(fonts),
-    zIndex: userProps?.zIndex || 1
-  }), /* @__PURE__ */ React2.createElement(Divider, null)), !FONT_SIZE && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(TippedSelect, {
-    className: "ql-size",
-    options: sizes,
-    tip: "Font Size",
-    values: optionsToValues(sizesReal),
-    zIndex: userProps?.zIndex || 1
-  }), /* @__PURE__ */ React2.createElement(Divider, null))), (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /* @__PURE__ */ React2.createElement("span", {
+  }, 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", {
     className: "ql-formats"
-  }, !BOLD && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, !BOLD && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-bold",
     tip: "Bold"
-  }), !ITALIC && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }), !ITALIC && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-italic",
     tip: "Italic"
-  }), !UNDERLINE && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }), !UNDERLINE && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-underline",
     tip: "Underline"
-  }), !STRIKE && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }), !STRIKE && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-strike",
     tip: "Strike"
-  })), (!SUB || !SUPER) && /* @__PURE__ */ React2.createElement("span", {
+  })), (!SUB || !SUPER) && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, !SUB && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, !SUB && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-script",
     tip: "Sub",
     value: "sub"
-  }), !SUPER && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }), !SUPER && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-script",
     tip: "Super",
     value: "super"
-  }), /* @__PURE__ */ React2.createElement(Divider, null)), (!ORDERED_LIST || !BULLET_LIST) && /* @__PURE__ */ React2.createElement("span", {
+  }), _Divider4 || (_Divider4 = /*#__PURE__*/_jsx(Divider, {}))), (!ORDERED_LIST || !BULLET_LIST) && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, !ORDERED_LIST && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, !ORDERED_LIST && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-list",
     tip: "Ordered List",
     value: "ordered"
-  }), !BULLET_LIST && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }), !BULLET_LIST && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-list",
     tip: "Bullet List",
     value: "bullet"
-  })), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /* @__PURE__ */ React2.createElement("span", {
+  })), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, !INDENT_MINUS_ONE && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, !INDENT_MINUS_ONE && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-indent",
     tip: "Indent -1",
     value: "-1"
-  }), !INDENT_PLUS_ONE && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }), !INDENT_PLUS_ONE && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-indent",
     tip: "Indent +1",
     value: "+1"
-  })), !ALIGN && /* @__PURE__ */ React2.createElement("span", {
+  })), !ALIGN && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, /* @__PURE__ */ React2.createElement(TippedSelect, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, /*#__PURE__*/_jsx(TippedSelect, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-align",
     tip: "Align"
-  }), /* @__PURE__ */ React2.createElement(Divider, null)), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /* @__PURE__ */ React2.createElement("span", {
+  }), _Divider5 || (_Divider5 = /*#__PURE__*/_jsx(Divider, {}))), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, !FONT_COLOR && /* @__PURE__ */ React2.createElement(Colors, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, !FONT_COLOR && /*#__PURE__*/_jsx(Colors, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-color",
     tip: "Font Color"
-  }), !FONT_BACKGROUND_COLOR && /* @__PURE__ */ React2.createElement(Colors, {
-    zIndex: userProps?.zIndex || 1,
+  }), !FONT_BACKGROUND_COLOR && /*#__PURE__*/_jsx(Colors, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-background",
     tip: "Font Background Color"
-  }), /* @__PURE__ */ React2.createElement(Divider, null)), (!HYPERLINK || !IMAGE) && /* @__PURE__ */ React2.createElement("span", {
+  }), _Divider6 || (_Divider6 = /*#__PURE__*/_jsx(Divider, {}))), (!HYPERLINK || !IMAGE) && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, !HYPERLINK && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, !HYPERLINK && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-link",
     tip: "Hyperlink: Select Text First"
-  }), !IMAGE && /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }), !IMAGE && /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-image",
     tip: "Insert Image"
-  }), /* @__PURE__ */ React2.createElement(Divider, null)), !CLEAR_FORMAT && /* @__PURE__ */ React2.createElement("span", {
+  }), _Divider7 || (_Divider7 = /*#__PURE__*/_jsx(Divider, {}))), !CLEAR_FORMAT && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-clean",
     tip: "Clear Format (Select Text)"
-  })), !SHOW_HTML && /* @__PURE__ */ React2.createElement("span", {
+  })), !SHOW_HTML && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, _Divider8 || (_Divider8 = /*#__PURE__*/_jsx(Divider, {})), /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : 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"
-  }, showHTML ? "SHOW TEXT" : "SHOW HTML")), customFields && /* @__PURE__ */ React2.createElement("span", {
+  }, void 0, showHTML ? 'SHOW TEXT' : 'SHOW HTML')), customFields && /*#__PURE__*/_jsx("span", {
     className: "ql-formats"
-  }, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(TippedButton, {
-    zIndex: userProps?.zIndex || 1,
+  }, void 0, _Divider9 || (_Divider9 = /*#__PURE__*/_jsx(Divider, {})), /*#__PURE__*/_jsx(TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-customFields",
     tip: "Insert Custom Field"
-  }, /* @__PURE__ */ React2.createElement(CustomFields, null))), customItems && /* @__PURE__ */ React2.createElement("span", {
-    style: { display: "inline-flex" }
-  }, customItems.map((Item) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Divider, null), /* @__PURE__ */ React2.createElement(Item, null)))));
-};
-export {
-  CustomDropdown,
-  CustomToolbar
+  }, 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, {})]
+  }))));
 };
-//# sourceMappingURL=CustomToolbar.js.map
+
+export { CustomDropdown, CustomToolbar };