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

package/esm/DSWYSIWYGEditor.js

@@ -1,72 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useState, useEffect } from 'react';
-import { PropTypes, describe } from 'react-desc';
-import DSWYSIWYGEditorImpl from './components/DSWYSIWYGEditorImpl.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["value", "onChange", "getQuillRef", "quillModules", "customToolbar", "toolbarHandlers", "showRawHTML", "height", "hideItems"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const DSWYSIWYGEditor = _ref => {
-  let {
-    value = '',
-    onChange = () => null,
-    getQuillRef = () => null,
-    quillModules = {},
-    customToolbar,
-    toolbarHandlers,
-    showRawHTML = false,
-    height,
-    hideItems
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const emptyAction = () => {};
-
-  const [showHTML, setShowHTML] = useState(showRawHTML);
-  useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);
-  return /*#__PURE__*/jsx(DSWYSIWYGEditorImpl, _objectSpread({
-    forceHttpLink: true,
-    handleCustomFieldClick: emptyAction,
-    handleImageClick: emptyAction,
-    quillOverrides: [],
-    value: value,
-    onChange: onChange,
-    getQuillRef: getQuillRef,
-    quillModules: quillModules,
-    customToolbar: customToolbar,
-    toolbarHandlers: toolbarHandlers,
-    showRawHTML: showHTML,
-    onShowHTML: () => setShowHTML(!showHTML),
-    height: height,
-    hideItems: hideItems
-  }, rest));
-};
-
-const wysiwygEditorProps = {
-  value: PropTypes.string.description('editors value').isRequired,
-  onChange: PropTypes.func.description("(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").isRequired,
-  getQuillRef: PropTypes.func.description('function to use quill.js ref'),
-  quillModules: PropTypes.object.description('object to override quill modules'),
-  customToolbar: PropTypes.element.description('custom toolbar'),
-  toolbarHandlers: PropTypes.object.description('object with toolbar handlers'),
-  showRawHTML: PropTypes.bool.description('whether to display html view or not').defaultValue(false),
-  height: PropTypes.string.description('heigth of the editors text area'),
-  readOnly: PropTypes.string.description("If true, the editor won't allow changing its contents. Wraps the Quill disable API."),
-  hideItems: PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),
-  zIndex: PropTypes.number.description('zIndex to be used (required when used in a modal for correct tooltips displaying)')
-};
-const WYSIWYWithSchema = describe(DSWYSIWYGEditor);
-WYSIWYWithSchema.propTypes = wysiwygEditorProps;
-
-export { WYSIWYWithSchema, DSWYSIWYGEditor as default };

package/esm/components/CustomImageUploader.js

@@ -1,115 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState } from 'react';
-import { Image } from '@elliemae/ds-icons';
-import DSUploader from '@elliemae/ds-uploader';
-import DSModal, { MODAL_TYPE_V2 } from '@elliemae/ds-modal';
-import { TippedButton } from './TippedButton.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-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; // 1 MB
-
-const CustomImageUploader = _ref => {
-  let {
-    quillRef,
-    editorFieldName,
-    allowedImageTypes = ALLOWED_TYPES_TEXT,
-    uploadAsset = () => null,
-    zIndex = 1
-  } = _ref;
-  const [isOpen, setIsOpen] = useState(false);
-  const [error, setError] = useState(null);
-  const [inProgress, setInProgress] = useState(false);
-  const [lastSelection, setLastSelection] = useState({
-    index: 0,
-    length: 0
-  });
-  const elementId = "uploadImage".concat(editorFieldName); // eslint-disable-next-line consistent-return
-
-  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 === null || quillRef === void 0 ? void 0 : quillRef.getEditor().insertEmbed((lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.index) || 0, 'image', url);
-          } catch (e) {
-            setError('An error has occurred, try again');
-          }
-
-          setInProgress(false);
-        };
-
-        fr.readAsArrayBuffer(selectedFile);
-      }
-    }
-  };
-
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(TippedButton, {
-      zIndex: zIndex,
-      tip: "Insert Image",
-      onClick: () => {
-        setLastSelection(quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().getSelection());
-        setIsOpen(true);
-      }
-    }, void 0, /*#__PURE__*/_jsx(Image, {
-      color: ['neutral', 500],
-      size: "s"
-    })), /*#__PURE__*/_jsx(DSModal, {
-      isOpen: isOpen,
-      title: "",
-      onConfirm: () => {
-        setIsOpen(false);
-      },
-      onClose: () => {
-        setIsOpen(false);
-      },
-      showClose: true,
-      version: 2,
-      size: "xsmall",
-      modalType: MODAL_TYPE_V2.DECISION,
-      confirmLabel: "Cancel",
-      message: ""
-    }, void 0, !inProgress && /*#__PURE__*/_jsx(DSUploader, {
-      containerProps: {
-        id: elementId
-      },
-      showAltAction: false,
-      acceptedTypesText: allowedImageTypes,
-      onDrop: handleFileChange
-    }), inProgress && 'Upload in progress...', error && /*#__PURE__*/_jsx("div", {
-      style: {
-        color: 'red',
-        marginTop: '10px'
-      }
-    }, void 0, error))]
-  });
-};
-
-export { CustomImageUploader };

package/esm/components/CustomToolbar.js

@@ -1,271 +0,0 @@
-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'
-  }
-});
-
-const CustomToolbar = _ref4 => {
-  let {
-    customFields,
-    customItems = [],
-    hideItems = {},
-    onShowHTML = () => {},
-    id = 'toolbar',
-    userProps
-  } = _ref4;
-  const {
-    HEADER,
-    FONT,
-    FONT_SIZE,
-    BOLD,
-    ITALIC,
-    UNDERLINE,
-    STRIKE,
-    SUB,
-    SUPER,
-    ORDERED_LIST,
-    BULLET_LIST,
-    INDENT_MINUS_ONE,
-    INDENT_PLUS_ONE,
-    ALIGN,
-    FONT_COLOR,
-    FONT_BACKGROUND_COLOR,
-    HYPERLINK,
-    IMAGE,
-    CLEAR_FORMAT,
-    SHOW_HTML
-  } = hideItems;
-  const [showHTML, setShowHTML] = useState(false);
-
-  const handleShowHTML = e => {
-    e.preventDefault();
-    setShowHTML(!showHTML);
-    onShowHTML();
-  };
-
-  return /*#__PURE__*/_jsx("div", {
-    id: id,
-    className: "ds-ql-custom-toolbar"
-  }, void 0, (!HEADER || !FONT || !FONT_SIZE) && /*#__PURE__*/_jsx("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", {
-    className: "ql-formats"
-  }, void 0, !BOLD && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
-    className: "ql-bold",
-    tip: "Bold"
-  }), !ITALIC && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
-    className: "ql-italic",
-    tip: "Italic"
-  }), !UNDERLINE && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
-    className: "ql-underline",
-    tip: "Underline"
-  }), !STRIKE && /*#__PURE__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
-    className: "ql-strike",
-    tip: "Strike"
-  })), (!SUB || !SUPER) && /*#__PURE__*/_jsx("span", {
-    className: "ql-formats"
-  }, 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__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
-    className: "ql-script",
-    tip: "Super",
-    value: "super"
-  }), _Divider4 || (_Divider4 = /*#__PURE__*/_jsx(Divider, {}))), (!ORDERED_LIST || !BULLET_LIST) && /*#__PURE__*/_jsx("span", {
-    className: "ql-formats"
-  }, 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__*/_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__*/_jsx("span", {
-    className: "ql-formats"
-  }, 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__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
-    className: "ql-indent",
-    tip: "Indent +1",
-    value: "+1"
-  })), !ALIGN && /*#__PURE__*/_jsx("span", {
-    className: "ql-formats"
-  }, void 0, /*#__PURE__*/_jsx(TippedSelect, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
-    className: "ql-align",
-    tip: "Align"
-  }), _Divider5 || (_Divider5 = /*#__PURE__*/_jsx(Divider, {}))), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /*#__PURE__*/_jsx("span", {
-    className: "ql-formats"
-  }, 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__*/_jsx(Colors, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
-    className: "ql-background",
-    tip: "Font Background Color"
-  }), _Divider6 || (_Divider6 = /*#__PURE__*/_jsx(Divider, {}))), (!HYPERLINK || !IMAGE) && /*#__PURE__*/_jsx("span", {
-    className: "ql-formats"
-  }, 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__*/_jsx(TippedButton, {
-    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
-    className: "ql-image",
-    tip: "Insert Image"
-  }), _Divider7 || (_Divider7 = /*#__PURE__*/_jsx(Divider, {}))), !CLEAR_FORMAT && /*#__PURE__*/_jsx("span", {
-    className: "ql-formats"
-  }, 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__*/_jsx("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,
-    style: {
-      width: 'fit-content',
-      color: '#1e79c2',
-      fontWeight: '500'
-    },
-    onClick: handleShowHTML,
-    tip: showHTML ? 'SHOW TEXT' : 'SHOW HTML',
-    className: "ql-customFields-html"
-  }, void 0, showHTML ? 'SHOW TEXT' : 'SHOW HTML')), customFields && /*#__PURE__*/_jsx("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,
-    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, {})]
-  }))));
-};
-
-export { CustomDropdown, CustomToolbar };