@onesy/ui-react 1.0.163 → 1.0.165

package/RichTextEditor/RichTextEditor.js

@@ -215,89 +215,29 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-RichTextEditor'
 });
 const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
-  var _refs$root$current;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10, _theme$elements11, _theme$elements12, _theme$elements13, _theme$elements14, _theme$elements15, _theme$elements16, _theme$elements17, _refs$root$current;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRichTextEditor) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props__);
-  }, [props__]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const Fade = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Fade) || _Fade.default;
-  }, [theme]);
-  const Append = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Append) || _Append.default;
-  }, [theme]);
-  const Select = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Select) || _Select.default;
-  }, [theme]);
-  const Switch = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Switch) || _Switch.default;
-  }, [theme]);
-  const Label = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Label) || _Label.default;
-  }, [theme]);
-  const NumericTextField = _react.default.useMemo(() => {
-    var _theme$elements9;
-    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.NumericTextField) || _NumericTextField.default;
-  }, [theme]);
-  const ColorTextField = _react.default.useMemo(() => {
-    var _theme$elements0;
-    return (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ColorTextField) || _ColorTextField.default;
-  }, [theme]);
-  const ToggleButton = _react.default.useMemo(() => {
-    var _theme$elements1;
-    return (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.ToggleButton) || _ToggleButton.default;
-  }, [theme]);
-  const ToggleButtons = _react.default.useMemo(() => {
-    var _theme$elements10;
-    return (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.ToggleButtons) || _ToggleButtons.default;
-  }, [theme]);
-  const Drawing = _react.default.useMemo(() => {
-    var _theme$elements11;
-    return (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.Drawing) || _Drawing.default;
-  }, [theme]);
-  const Divider = _react.default.useMemo(() => {
-    var _theme$elements12;
-    return (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Divider) || _Divider.default;
-  }, [theme]);
-  const ClickListener = _react.default.useMemo(() => {
-    var _theme$elements13;
-    return (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.ClickListener) || _ClickListener.default;
-  }, [theme]);
-  const TextField = _react.default.useMemo(() => {
-    var _theme$elements14;
-    return (theme === null || theme === void 0 || (_theme$elements14 = theme.elements) === null || _theme$elements14 === void 0 ? void 0 : _theme$elements14.TextField) || _TextField.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements15;
-    return (theme === null || theme === void 0 || (_theme$elements15 = theme.elements) === null || _theme$elements15 === void 0 ? void 0 : _theme$elements15.Surface) || _Surface.default;
-  }, [theme]);
-  const Button = _react.default.useMemo(() => {
-    var _theme$elements16;
-    return (theme === null || theme === void 0 || (_theme$elements16 = theme.elements) === null || _theme$elements16 === void 0 ? void 0 : _theme$elements16.Button) || _Button.default;
-  }, [theme]);
-  const ListItem = _react.default.useMemo(() => {
-    var _theme$elements17;
-    return (theme === null || theme === void 0 || (_theme$elements17 = theme.elements) === null || _theme$elements17 === void 0 ? void 0 : _theme$elements17.ListItem) || _ListItem.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyRichTextEditor) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props__);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Fade) || _Fade.default;
+  const Append = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Append) || _Append.default;
+  const Select = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Select) || _Select.default;
+  const Switch = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Switch) || _Switch.default;
+  const Label = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Label) || _Label.default;
+  const NumericTextField = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.NumericTextField) || _NumericTextField.default;
+  const ColorTextField = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ColorTextField) || _ColorTextField.default;
+  const ToggleButton = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.ToggleButton) || _ToggleButton.default;
+  const ToggleButtons = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.ToggleButtons) || _ToggleButtons.default;
+  const Drawing = (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.Drawing) || _Drawing.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Divider) || _Divider.default;
+  const ClickListener = (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.ClickListener) || _ClickListener.default;
+  const TextField = (theme === null || theme === void 0 || (_theme$elements14 = theme.elements) === null || _theme$elements14 === void 0 ? void 0 : _theme$elements14.TextField) || _TextField.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements15 = theme.elements) === null || _theme$elements15 === void 0 ? void 0 : _theme$elements15.Surface) || _Surface.default;
+  const Button = (theme === null || theme === void 0 || (_theme$elements16 = theme.elements) === null || _theme$elements16 === void 0 ? void 0 : _theme$elements16.Button) || _Button.default;
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements17 = theme.elements) === null || _theme$elements17 === void 0 ? void 0 : _theme$elements17.ListItem) || _ListItem.default;
   const {
       tonal = true,
       color = 'default',
@@ -466,11 +406,11 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
     const children_ = Array.from(element.children);
     const toRemove = [];
     const other_ = [];
-    children_.forEach((item, index) => {
-      item.tagName === 'SPAN' && !item.innerHTML || item.tagName === 'BR' && index > 0 && children_[index - 1].tagName === 'SPAN' && !children_[index - 1].innerHTML ? toRemove.push(item) : other_.push(item);
+    children_.forEach((item_0, index) => {
+      item_0.tagName === 'SPAN' && !item_0.innerHTML || item_0.tagName === 'BR' && index > 0 && children_[index - 1].tagName === 'SPAN' && !children_[index - 1].innerHTML ? toRemove.push(item_0) : other_.push(item_0);
     });
-    toRemove.forEach(item => item.remove());
-    other_.forEach(item => clear(item));
+    toRemove.forEach(item_1 => item_1.remove());
+    other_.forEach(item_2 => clear(item_2));
   };
   const onUpdate = event => {
     // Clear from empty element values
@@ -482,64 +422,64 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       [property]: itemValue
     }));
   };
-  const updateOpen = (property, itemValue) => {
-    setOpen(values => _objectSpread(_objectSpread({}, values), {}, {
-      [property]: itemValue
+  const updateOpen = (property_0, itemValue_0) => {
+    setOpen(values_0 => _objectSpread(_objectSpread({}, values_0), {}, {
+      [property_0]: itemValue_0
     }));
   };
   const paste = async () => {
     const value_ = await navigator.clipboard.read();
     if (value_) {
-      let values = '';
-      for (const item of Array.from(value_)) {
-        const valueItem = await item.getType('text/html');
-        values += await valueItem.text();
+      let values_1 = '';
+      for (const item_3 of Array.from(value_)) {
+        const valueItem = await item_3.getType('text/html');
+        values_1 += await valueItem.text();
       }
-      refs.rootDocument.current.execCommand('insertHTML', undefined, values);
+      refs.rootDocument.current.execCommand('insertHTML', undefined, values_1);
     }
   };
-  const method = _react.default.useCallback(command => argument => {
-    switch (command) {
+  const method = command_0 => argument => {
+    switch (command_0) {
       // updates
       case 'italic':
         refs.rootDocument.current.execCommand('italic');
-        if (query('italic')) setSelected(values => [...values, 'italic']);else setSelected(values => values.filter(item => item !== 'italic'));
+        if (query('italic')) setSelected(values_24 => [...values_24, 'italic']);else setSelected(values_25 => values_25.filter(item_21 => item_21 !== 'italic'));
         break;
       case 'underline':
         refs.rootDocument.current.execCommand('underline');
-        if (query('underline')) setSelected(values => [...values, 'underline']);else setSelected(values => values.filter(item => item !== 'underline'));
+        if (query('underline')) setSelected(values_22 => [...values_22, 'underline']);else setSelected(values_23 => values_23.filter(item_20 => item_20 !== 'underline'));
         break;
       case 'bold':
         refs.rootDocument.current.execCommand('bold');
-        if (query('bold')) setSelected(values => [...values, 'bold']);else setSelected(values => values.filter(item => item !== 'bold'));
+        if (query('bold')) setSelected(values_20 => [...values_20, 'bold']);else setSelected(values_21 => values_21.filter(item_19 => item_19 !== 'bold'));
         break;
       case 'strike-line':
         refs.rootDocument.current.execCommand('strikeThrough');
-        if (query('strikeThrough')) setSelected(values => [...values, 'strike-line']);else setSelected(values => values.filter(item => item !== 'strike-line'));
+        if (query('strikeThrough')) setSelected(values_18 => [...values_18, 'strike-line']);else setSelected(values_19 => values_19.filter(item_18 => item_18 !== 'strike-line'));
         break;
       case 'align-left':
         refs.rootDocument.current.execCommand('justifyLeft');
-        if (query('justifyLeft')) setSelected(values => [...values.filter(item => !item.includes('align')), 'align-left']);else setSelected(values => values.filter(item => item !== 'align-left'));
+        if (query('justifyLeft')) setSelected(values_16 => [...values_16.filter(item_16 => !item_16.includes('align')), 'align-left']);else setSelected(values_17 => values_17.filter(item_17 => item_17 !== 'align-left'));
         break;
       case 'align-center':
         refs.rootDocument.current.execCommand('justifyCenter');
-        if (query('justifyCenter')) setSelected(values => [...values.filter(item => !item.includes('align')), 'align-center']);else setSelected(values => values.filter(item => item !== 'align-center'));
+        if (query('justifyCenter')) setSelected(values_14 => [...values_14.filter(item_14 => !item_14.includes('align')), 'align-center']);else setSelected(values_15 => values_15.filter(item_15 => item_15 !== 'align-center'));
         break;
       case 'align-right':
         refs.rootDocument.current.execCommand('justifyRight');
-        if (query('justifyRight')) setSelected(values => [...values.filter(item => !item.includes('align')), 'align-right']);else setSelected(values => values.filter(item => item !== 'align-right'));
+        if (query('justifyRight')) setSelected(values_12 => [...values_12.filter(item_12 => !item_12.includes('align')), 'align-right']);else setSelected(values_13 => values_13.filter(item_13 => item_13 !== 'align-right'));
         break;
       case 'align-justify':
         refs.rootDocument.current.execCommand('justifyFull');
-        if (query('justifyFull')) setSelected(values => [...values.filter(item => !item.includes('align')), 'align-justify']);else setSelected(values => values.filter(item => item !== 'align-justify'));
+        if (query('justifyFull')) setSelected(values_10 => [...values_10.filter(item_10 => !item_10.includes('align')), 'align-justify']);else setSelected(values_11 => values_11.filter(item_11 => item_11 !== 'align-justify'));
         break;
       case 'superscript':
         refs.rootDocument.current.execCommand('superscript');
-        if (query('superscript')) setSelected(values => [...values, 'superscript']);else setSelected(values => values.filter(item => item !== 'superscript'));
+        if (query('superscript')) setSelected(values_8 => [...values_8, 'superscript']);else setSelected(values_9 => values_9.filter(item_9 => item_9 !== 'superscript'));
         break;
       case 'subscript':
         refs.rootDocument.current.execCommand('subscript');
-        if (query('subscript')) setSelected(values => [...values, 'subscript']);else setSelected(values => values.filter(item => item !== 'subscript'));
+        if (query('subscript')) setSelected(values_6 => [...values_6, 'subscript']);else setSelected(values_7 => values_7.filter(item_8 => item_8 !== 'subscript'));
         break;
       case 'indent':
         refs.rootDocument.current.execCommand('indent');
@@ -572,11 +512,11 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         break;
       case 'list-ordered':
         refs.rootDocument.current.execCommand('insertOrderedList');
-        if (query('insertOrderedList')) setSelected(values => [...values.filter(item => !item.includes('list')), 'list-ordered']);else setSelected(values => values.filter(item => item !== 'list-ordered'));
+        if (query('insertOrderedList')) setSelected(values_4 => [...values_4.filter(item_6 => !item_6.includes('list')), 'list-ordered']);else setSelected(values_5 => values_5.filter(item_7 => item_7 !== 'list-ordered'));
         break;
       case 'list-unordered':
         refs.rootDocument.current.execCommand('insertUnorderedList');
-        if (query('insertUnorderedList')) setSelected(values => [...values.filter(item => !item.includes('list')), 'list-unordered']);else setSelected(values => values.filter(item => item !== 'list-unordered'));
+        if (query('insertUnorderedList')) setSelected(values_2 => [...values_2.filter(item_4 => !item_4.includes('list')), 'list-unordered']);else setSelected(values_3 => values_3.filter(item_5 => item_5 !== 'list-unordered'));
         break;
       case 'horizontal-rule':
         refs.rootDocument.current.execCommand('insertHorizontalRule');
@@ -622,8 +562,8 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       default:
         break;
     }
-  }, []);
-  const includes = (...args) => !(0, _utils.is)('array', exclude) || args.some(item => !exclude.includes(item));
+  };
+  const includes = (...args_0) => !(0, _utils.is)('array', exclude) || args_0.some(item_22 => !exclude.includes(item_22));
 
   // italic, underline, bold
   // updates toolbar
@@ -680,79 +620,79 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
   const IconProps = _objectSpread({
     size: 'small'
   }, IconProps_);
-  const WrapperToggleButton = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((props_, ref_) => {
+  const WrapperToggleButton = /*#__PURE__*/_react.default.forwardRef((props_, ref_) => {
     const {
         open: open_,
         name,
-        children: children_
+        children: children__0
       } = props_,
-      other_ = (0, _objectWithoutProperties2.default)(props_, _excluded2);
+      other__0 = (0, _objectWithoutProperties2.default)(props_, _excluded2);
     return /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
       open: open_ !== undefined ? open_ : undefined,
       name: name
-    }, TooltipProps), /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread(_objectSpread({}, other_), children_.props)));
-  }), []);
-  const WrapperAppend = _react.default.useCallback(props_ => {
+    }, TooltipProps), /*#__PURE__*/_react.default.cloneElement(children__0, _objectSpread(_objectSpread({}, other__0), children__0.props)));
+  });
+  const WrapperAppend = props__0 => {
     const {
-        open: open_,
-        element,
+        open: open__0,
+        element: element_0,
         anchorElement,
         onClose,
-        children: children_
-      } = props_,
-      other_ = (0, _objectWithoutProperties2.default)(props_, _excluded3);
+        children: children__1
+      } = props__0,
+      other__1 = (0, _objectWithoutProperties2.default)(props__0, _excluded3);
     return /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
-      open: open_,
+      open: open__0,
       element: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Fade, {
-        in: open_,
+        in: open__0,
         add: true
-      }, /*#__PURE__*/_react.default.cloneElement(element))),
+      }, /*#__PURE__*/_react.default.cloneElement(element_0))),
       anchorElement: anchorElement,
       portal: true,
       alignment: "center",
       position: "bottom"
-    }, AppendProps), /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread(_objectSpread({}, other_), children_.props)));
-  }, []);
-  const onMouseDown = _react.default.useCallback(() => {
-    var _selection_$anchorNod2;
-    const selection_ = refs.rootWindow.current.getSelection();
-    if (selection_.anchorNode && !((_selection_$anchorNod2 = selection_.anchorNode) !== null && _selection_$anchorNod2 !== void 0 && (_selection_$anchorNod2 = _selection_$anchorNod2.className) !== null && _selection_$anchorNod2 !== void 0 && _selection_$anchorNod2.includes('TextField'))) refs.range.current = selection_.getRangeAt(0);
-  }, []);
-  const onMouseUp = _react.default.useCallback(() => {
+    }, AppendProps), /*#__PURE__*/_react.default.cloneElement(children__1, _objectSpread(_objectSpread({}, other__1), children__1.props)));
+  };
+  const onMouseDown = () => {
+    var _selection__0$anchorN;
+    const selection__0 = refs.rootWindow.current.getSelection();
+    if (selection__0.anchorNode && !((_selection__0$anchorN = selection__0.anchorNode) !== null && _selection__0$anchorN !== void 0 && (_selection__0$anchorN = _selection__0$anchorN.className) !== null && _selection__0$anchorN !== void 0 && _selection__0$anchorN.includes('TextField'))) refs.range.current = selection__0.getRangeAt(0);
+  };
+  const onMouseUp = () => {
     if (refs.range.current) {
-      const selection_ = refs.rootWindow.current.getSelection();
-      selection_.removeAllRanges();
-      selection_.addRange(refs.range.current);
+      const selection__1 = refs.rootWindow.current.getSelection();
+      selection__1.removeAllRanges();
+      selection__1.addRange(refs.range.current);
     }
-  }, []);
-  const PaletteItem = _react.default.useCallback(props_ => {
+  };
+  const PaletteItem = props__1 => {
     const {
         color: color_
-      } = props_,
-      other_ = (0, _objectWithoutProperties2.default)(props_, _excluded4);
+      } = props__1,
+      other__2 = (0, _objectWithoutProperties2.default)(props__1, _excluded4);
     return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-palette-item'], classes.paletteItem]),
       style: {
         background: color_
       }
-    }, other_));
-  }, []);
-  const Palette = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((props_, ref_) => {
+    }, other__2));
+  };
+  const Palette = /*#__PURE__*/_react.default.forwardRef((props__2, ref__0) => {
     const {
         version: version_,
         onUpdate: onUpdate_,
-        onClose
-      } = props_,
-      other_ = (0, _objectWithoutProperties2.default)(props_, _excluded5);
+        onClose: onClose_0
+      } = props__2,
+      other__3 = (0, _objectWithoutProperties2.default)(props__2, _excluded5);
     return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      ref: ref_,
+      ref: ref__0,
       gap: 1,
       direction: "column",
       tonal: tonal,
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-palette'], classes.palette])
-    }, other_), /*#__PURE__*/_react.default.createElement(Line, {
+    }, other__3), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5,
       onMouseUp: onMouseUp,
       onMouseDown: onMouseDown
@@ -766,32 +706,32 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       color: "#000000",
       onClick: () => {
         onUpdate_('#000000');
-        onClose();
+        onClose_0();
       }
     }), /*#__PURE__*/_react.default.createElement(PaletteItem, {
       color: "#ffffff",
       onClick: () => {
         onUpdate_('#ffffff');
-        onClose();
+        onClose_0();
       }
-    })), Object.keys(_styleReact.colors).filter(item => !['black', 'white'].includes(item)).map((item, index) => /*#__PURE__*/_react.default.createElement(Line, {
-      key: index,
+    })), Object.keys(_styleReact.colors).filter(item_23 => !['black', 'white'].includes(item_23)).map((item_24, index_0) => /*#__PURE__*/_react.default.createElement(Line, {
+      key: index_0,
       gap: 0.5,
       direction: "row",
       style: {
         width: '100%'
       }
-    }, Object.keys(_styleReact.colors[item]).map((item_, index_) => /*#__PURE__*/_react.default.createElement(PaletteItem, {
+    }, Object.keys(_styleReact.colors[item_24]).map((item_, index_) => /*#__PURE__*/_react.default.createElement(PaletteItem, {
       key: index_,
-      color: _styleReact.colors[item][item_],
+      color: _styleReact.colors[item_24][item_],
       onClick: () => {
         if (refs.range.current) {
-          const selection_ = refs.rootWindow.current.getSelection();
-          selection_.removeAllRanges();
-          selection_.addRange(refs.range.current);
+          const selection__2 = refs.rootWindow.current.getSelection();
+          selection__2.removeAllRanges();
+          selection__2.addRange(refs.range.current);
         }
-        onUpdate_(_styleReact.colors[item][item_]);
-        onClose();
+        onUpdate_(_styleReact.colors[item_24][item_]);
+        onClose_0();
       }
     }))))), /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5,
@@ -817,16 +757,16 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       size: "small",
       onClick: () => {
         if (refs.range.current) {
-          const selection_ = refs.rootWindow.current.getSelection();
-          selection_.removeAllRanges();
-          selection_.addRange(refs.range.current);
+          const selection__3 = refs.rootWindow.current.getSelection();
+          selection__3.removeAllRanges();
+          selection__3.addRange(refs.range.current);
         }
         onUpdate_(refs.inputValues.current[version_]);
-        onClose();
+        onClose_0();
       }
     }, "Apply")));
-  }), []);
-  const Input = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((props_, ref_) => {
+  });
+  const Input = /*#__PURE__*/_react.default.forwardRef((props__3, ref__1) => {
     const {
         label,
         labelButton,
@@ -835,17 +775,17 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         onClick,
         InputComponent = TextField,
         InputProps
-      } = props_,
-      other_ = (0, _objectWithoutProperties2.default)(props_, _excluded6);
+      } = props__3,
+      other__4 = (0, _objectWithoutProperties2.default)(props__3, _excluded6);
     return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      ref: ref_,
+      ref: ref__1,
       gap: 1,
       direction: "column",
       tonal: tonal,
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-palette'], classes.palette])
-    }, other_), /*#__PURE__*/_react.default.createElement(Line, {
+    }, other__4), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5,
       direction: "row",
       align: "center",
@@ -868,7 +808,7 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       size: "small",
       onClick: onClick
     }, labelButton)));
-  }), []);
+  });
   const font_families = [...fontFamilies, ...addFontFamilies];
   const font_sizes = [{
     label: '11',
@@ -963,47 +903,47 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       name: 'list-unordered',
       command: 'insertUnorderedList'
     }];
-    updateOptionValues.forEach(item => {
-      if (query(item.command)) selected_.push(item.name);
+    updateOptionValues.forEach(item_25 => {
+      if (query(item_25.command)) selected_.push(item_25.name);
     });
 
     // Font version
     const fontVersion = query('formatBlock');
-    const fontVersionValue = font_versions.find(item_ => item_.value === fontVersion) || font_versions[0];
+    const fontVersionValue = font_versions.find(item__0 => item__0.value === fontVersion) || font_versions[0];
     inputValues_['font-version'] = fontVersionValue === null || fontVersionValue === void 0 ? void 0 : fontVersionValue.value;
 
     // Font family
     const fontFamily = query('fontName');
-    const fontFamilyValue = font_families.find(item_ => fontFamily === null || fontFamily === void 0 ? void 0 : fontFamily.includes(item_.label)) || font_families.find(item_ => item_.label === 'DM Sans');
+    const fontFamilyValue = font_families.find(item__2 => fontFamily === null || fontFamily === void 0 ? void 0 : fontFamily.includes(item__2.label)) || font_families.find(item__1 => item__1.label === 'DM Sans');
     inputValues_['font-family'] = fontFamilyValue === null || fontFamilyValue === void 0 ? void 0 : fontFamilyValue.value;
 
     // Font version
     const fontSize = query('fontSize');
-    const fontSizeValue = font_sizes.find(item_ => item_.value === fontSize) || font_sizes.find(item_ => item_.label === '14');
+    const fontSizeValue = font_sizes.find(item__4 => item__4.value === fontSize) || font_sizes.find(item__3 => item__3.label === '14');
     inputValues_['font-size'] = fontSizeValue === null || fontSizeValue === void 0 ? void 0 : fontSizeValue.value;
     setInputValues(inputValues_);
     setSelected(selected_);
   };
-  const onMouseUpValue = _react.default.useCallback(() => {
+  const onMouseUpValue = () => {
     queryValueUpdate();
     setTimeout(() => {
-      const selection_ = refs.rootWindow.current.getSelection();
-      if (!selection_.anchorNode || !refs.value.current.contains(selection_.anchorNode)) return setSelection('');
-      const rect = selection_.getRangeAt(0).getBoundingClientRect();
+      const selection__4 = refs.rootWindow.current.getSelection();
+      if (!selection__4.anchorNode || !refs.value.current.contains(selection__4.anchorNode)) return setSelection('');
+      const rect = selection__4.getRangeAt(0).getBoundingClientRect();
       setSelection(Math.round(rect.width) ? rect : '');
     });
-  }, []);
-  const onMouseDownValue = _react.default.useCallback(() => {
+  };
+  const onMouseDownValue = () => {
     queryValueUpdate();
-  }, []);
+  };
   const updateElements = {
     'font-version': /*#__PURE__*/_react.default.createElement(Select, (0, _extends2.default)({
       name: l('Font Version'),
-      valueDefault: font_versions.find(item => item.value.includes('p')).value,
+      valueDefault: font_versions.find(item_26 => item_26.value.includes('p')).value,
       value: inputValues['font-version'],
-      onChange: valueNew => {
-        updateInputValues('font-version', valueNew);
-        method('font-version')(valueNew);
+      onChange: valueNew_0 => {
+        updateInputValues('font-version', valueNew_0);
+        method('font-version')(valueNew_0);
       },
       onMouseUp: onMouseUp,
       onMouseDown: onMouseDown
@@ -1012,19 +952,19 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       style: {
         minWidth: '150px'
       }
-    }), font_versions.map(item => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-      key: item.value,
-      primary: item.label,
-      value: item.value,
+    }), font_versions.map(item_27 => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+      key: item_27.value,
+      primary: item_27.label,
+      value: item_27.value,
       button: true
     }, ListItemProps)))),
     'font-family': /*#__PURE__*/_react.default.createElement(Select, (0, _extends2.default)({
       name: l('Font Family'),
-      valueDefault: font_families.find(item => item.label.includes('DM Sans')).value,
+      valueDefault: font_families.find(item_28 => item_28.label.includes('DM Sans')).value,
       value: inputValues['font-family'],
-      onChange: valueNew => {
-        updateInputValues('font-family', valueNew);
-        method('font-family')(valueNew);
+      onChange: valueNew_1 => {
+        updateInputValues('font-family', valueNew_1);
+        method('font-family')(valueNew_1);
       },
       onMouseUp: onMouseUp,
       onMouseDown: onMouseDown
@@ -1033,31 +973,31 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
       style: {
         minWidth: '140px'
       }
-    }), font_families.map(item => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-      key: item.value,
-      primary: item.label,
-      value: item.value,
+    }), font_families.map(item_29 => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+      key: item_29.value,
+      primary: item_29.label,
+      value: item_29.value,
       button: true,
       style: {
-        fontFamily: item.value
+        fontFamily: item_29.value
       }
     }, ListItemProps)))),
     'font-size': /*#__PURE__*/_react.default.createElement(Select, (0, _extends2.default)({
       name: l('Font Size'),
-      valueDefault: +font_sizes.find(item => item.label.includes('14')).value,
+      valueDefault: +font_sizes.find(item_30 => item_30.label.includes('14')).value,
       value: inputValues['font-size'],
-      onChange: valueNew => {
-        updateInputValues('font-size', +valueNew);
-        method('font-size')(+valueNew);
+      onChange: valueNew_2 => {
+        updateInputValues('font-size', +valueNew_2);
+        method('font-size')(+valueNew_2);
       },
       onMouseUp: onMouseUp,
       onMouseDown: onMouseDown
     }, SelectProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-select'], SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.className, classes.select])
-    }), font_sizes.map(item => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-      key: item.value,
-      primary: item.label,
-      value: item.value,
+    }), font_sizes.map(item_31 => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+      key: item_31.value,
+      primary: item_31.label,
+      value: item_31.value,
       button: true
     }, ListItemProps)))),
     'italic': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
@@ -1238,12 +1178,12 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         name: l('Link'),
         labelButton: l('Add'),
         value: refs.inputValues.current.link,
-        onChange: valueNew => updateInputValues('link', valueNew),
+        onChange: valueNew_3 => updateInputValues('link', valueNew_3),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__5 = refs.rootWindow.current.getSelection();
+            selection__5.removeAllRanges();
+            selection__5.addRange(refs.range.current);
           }
           method('link-add')(refs.inputValues.current.link);
           updateOpen('link', false);
@@ -1270,12 +1210,12 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         name: l('Link'),
         labelButton: l('Add'),
         value: refs.inputValues.current.link,
-        onChange: valueNew => updateInputValues('link', valueNew),
+        onChange: valueNew_4 => updateInputValues('link', valueNew_4),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__6 = refs.rootWindow.current.getSelection();
+            selection__6.removeAllRanges();
+            selection__6.addRange(refs.range.current);
           }
           method('link-add')(refs.inputValues.current.link);
           updateOpen('linkMiniMenu', false);
@@ -1306,15 +1246,15 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         name: l('Quote'),
         labelButton: l('Add'),
         value: refs.inputValues.current.quote,
-        onChange: valueNew => updateInputValues('quote', valueNew),
+        onChange: valueNew_5 => updateInputValues('quote', valueNew_5),
         InputProps: {
           multiline: true
         },
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__7 = refs.rootWindow.current.getSelection();
+            selection__7.removeAllRanges();
+            selection__7.addRange(refs.range.current);
           }
           method('html')(`<blockquote>${refs.inputValues.current.quote}</blockquote>`);
           updateOpen('quote', false);
@@ -1356,7 +1296,7 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         increment: false,
         decrement: false,
         value: refs.inputValues.current.tableRows,
-        onChange: valueNew => updateInputValues('tableRows', valueNew)
+        onChange: valueNew_6 => updateInputValues('tableRows', valueNew_6)
       }), "\xD7", /*#__PURE__*/_react.default.createElement(NumericTextField, {
         name: l('Columns'),
         tonal: tonal,
@@ -1366,7 +1306,7 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         increment: false,
         decrement: false,
         value: refs.inputValues.current.tableColumns,
-        onChange: valueNew => updateInputValues('tableColumns', valueNew)
+        onChange: valueNew_7 => updateInputValues('tableColumns', valueNew_7)
       })), /*#__PURE__*/_react.default.createElement(Line, {
         gap: 1,
         direction: "row",
@@ -1381,7 +1321,7 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         tonal: tonal,
         color: props.color !== undefined ? props.color : 'default',
         checked: refs.inputValues.current.tableHeader,
-        onChange: valueNew => updateInputValues('tableHeader', valueNew)
+        onChange: valueNew_8 => updateInputValues('tableHeader', valueNew_8)
       }), l('Header')), /*#__PURE__*/_react.default.createElement(Button, {
         tonal: tonal,
         color: "inherit",
@@ -1389,9 +1329,9 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         size: "small",
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__8 = refs.rootWindow.current.getSelection();
+            selection__8.removeAllRanges();
+            selection__8.addRange(refs.range.current);
           }
           let table = `<table>`;
           if (refs.inputValues.current.tableHeader && refs.inputValues.current.tableColumns > 0) {
@@ -1431,12 +1371,12 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         name: l('Image'),
         labelButton: l('Add'),
         value: refs.inputValues.current.image,
-        onChange: valueNew => updateInputValues('image', valueNew),
+        onChange: valueNew_9 => updateInputValues('image', valueNew_9),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__9 = refs.rootWindow.current.getSelection();
+            selection__9.removeAllRanges();
+            selection__9.addRange(refs.range.current);
           }
           method('image')(refs.inputValues.current.image);
           updateOpen('image', false);
@@ -1462,12 +1402,12 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         name: l('Video'),
         labelButton: l('Add'),
         value: refs.inputValues.current.video,
-        onChange: valueNew => updateInputValues('video', valueNew),
+        onChange: valueNew_10 => updateInputValues('video', valueNew_10),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__10 = refs.rootWindow.current.getSelection();
+            selection__10.removeAllRanges();
+            selection__10.addRange(refs.range.current);
           }
           method('html')(`<video controls><source src='${refs.inputValues.current.video}' /></video>`);
           updateOpen('video', false);
@@ -1493,12 +1433,12 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         name: l('Youtube Video ID'),
         labelButton: l('Add'),
         value: refs.inputValues.current.videoYoutube,
-        onChange: valueNew => updateInputValues('videoYoutube', valueNew),
+        onChange: valueNew_11 => updateInputValues('videoYoutube', valueNew_11),
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__11 = refs.rootWindow.current.getSelection();
+            selection__11.removeAllRanges();
+            selection__11.addRange(refs.range.current);
           }
           method('html')(`<iframe width="560" height="315" src="https://www.youtube.com/embed/${refs.inputValues.current.videoYoutube}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`);
           updateOpen('videoYoutube', false);
@@ -1561,9 +1501,9 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         size: "small",
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__12 = refs.rootWindow.current.getSelection();
+            selection__12.removeAllRanges();
+            selection__12.addRange(refs.range.current);
           }
 
           // Get svg html element
@@ -1579,8 +1519,8 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
           svgClone.style.boxShadow = 'none';
           const pointers = Array.from(svgClone.querySelectorAll('.onesy-Drawing-pointer'));
           pointers.forEach(pointer => pointer.remove());
-          const valueNew = svgClone.outerHTML;
-          method('html')(valueNew);
+          const valueNew_12 = svgClone.outerHTML;
+          method('html')(valueNew_12);
           updateOpen('drawing', false);
         }
       }, l('Add')))))
@@ -1603,15 +1543,15 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
         name: l('Code'),
         labelButton: l('Add'),
         value: refs.inputValues.current.code,
-        onChange: valueNew => updateInputValues('code', valueNew),
+        onChange: valueNew_13 => updateInputValues('code', valueNew_13),
         InputProps: {
           multiline: true
         },
         onClick: () => {
           if (refs.range.current) {
-            const selection_ = refs.rootWindow.current.getSelection();
-            selection_.removeAllRanges();
-            selection_.addRange(refs.range.current);
+            const selection__13 = refs.rootWindow.current.getSelection();
+            selection__13.removeAllRanges();
+            selection__13.addRange(refs.range.current);
           }
           method('html')(`<pre><code>${refs.inputValues.current.code}</code></pre>`);
           updateOpen('code', false);
@@ -1636,11 +1576,11 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
     }), /*#__PURE__*/_react.default.createElement(IconClear, IconProps)))
   };
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_32 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_32);else ref.current = item_32;
       }
-      refs.root.current = item;
+      refs.root.current = item_32;
     },
     gap: 0,
     Component: Component,
@@ -1739,17 +1679,17 @@ const RichTextEditor = /*#__PURE__*/_react.default.forwardRef((props__, ref) =>
   }))), miniMenu && !!refs.miniMenuInclude.current.length && /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
     open: selection,
     element: ({
-      ref: ref_,
-      values,
+      ref: ref__2,
+      values: values_26,
       style
     }) => /*#__PURE__*/_react.default.createElement("div", {
-      ref: item => {
-        if (ref_) {
-          if ((0, _utils.is)('function', ref_)) ref_(item);else ref_.current = item;
-          refs.miniMenu.current = item;
+      ref: item_33 => {
+        if (ref__2) {
+          if ((0, _utils.is)('function', ref__2)) ref__2(item_33);else ref__2.current = item_33;
+          refs.miniMenu.current = item_33;
         }
       },
-      style: _objectSpread(_objectSpread({}, (values === null || values === void 0 ? void 0 : values.x) === 0 && (values === null || values === void 0 ? void 0 : values.y) === 0 ? {
+      style: _objectSpread(_objectSpread({}, (values_26 === null || values_26 === void 0 ? void 0 : values_26.x) === 0 && (values_26 === null || values_26 === void 0 ? void 0 : values_26.y) === 0 ? {
         visibility: 'hidden'
       } : undefined), style)
     }, /*#__PURE__*/_react.default.createElement(Fade, {