@onesy/ui-react 1.0.130 → 1.0.132

package/SmartTextField/SmartTextField.js

@@ -1,1029 +1,1421 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialFormatAlignLeftW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignLeftW100"));
-const IconMaterialFormatAlignCenterW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignCenterW100"));
-const IconMaterialFormatAlignRightW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignRightW100"));
-const IconMaterialFormatAlignJustifyW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignJustifyW100"));
-const IconMaterialFormatColorTextW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatColorTextW100"));
-const IconMaterialFormatColorFillW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatColorFillW100"));
-const IconMaterialFormatListNumberedW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatListNumberedW100"));
-const IconMaterialFormatListBulletedW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatListBulletedW100"));
-const IconMaterialSuperscriptW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSuperscriptW100"));
-const IconMaterialSubscriptW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSubscriptW100"));
-const IconMaterialFormatItalicW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatItalicW100"));
-const IconMaterialFormatUnderlinedW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatUnderlinedW100"));
-const IconMaterialStrikethroughSW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialStrikethroughSW100"));
-const IconMaterialFormatBoldW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatBoldW100"));
-const IconMaterialAddLinkW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialAddLinkW100"));
-const IconMaterialLinkOffW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialLinkOffW100"));
-const IconMaterialFormatClearW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatClearW100"));
-const ColorTextField_1 = __importDefault(require("../ColorTextField"));
-const TextField_1 = __importDefault(require("../TextField/TextField"));
-const Line_1 = __importDefault(require("../Line"));
-const List_1 = __importDefault(require("../List"));
-const ListItem_1 = __importDefault(require("../ListItem"));
-const Avatar_1 = __importDefault(require("../Avatar"));
-const Type_1 = __importDefault(require("../Type"));
-const Surface_1 = __importDefault(require("../Surface"));
-const Button_1 = __importDefault(require("../Button"));
-const Append_1 = __importDefault(require("../Append"));
-const Fade_1 = __importDefault(require("../Fade"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const ToggleButton_1 = __importDefault(require("../ToggleButton"));
-const ClickListener_1 = __importDefault(require("../ClickListener"));
-const ToggleButtons_1 = __importDefault(require("../ToggleButtons"));
-const Menu_1 = __importDefault(require("../Menu"));
-const Divider_1 = __importDefault(require("../Divider"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        minHeight: '20px',
-        width: '100%',
-        '& .onesy-TextField-input': Object.assign({ wordBreak: 'break-word', color: theme.methods.palette.color.value('primary', 10) }, theme.typography.values.b2),
-        '& ul, & ol': {
-            listStylePosition: 'inside'
-        }
-    },
-    root_type: {
-        minHeight: '20px',
-        width: '100%',
-        cursor: 'text',
-        '& .onesy-TextField-input': Object.assign({ wordBreak: 'break-word', color: theme.methods.palette.color.value('primary', 10) }, theme.typography.values.b2),
-        '& ul, & ol': {
-            listStylePosition: 'inside'
-        }
-    },
-    menu: {
-        width: '100vw',
-        maxWidth: '240px',
-        borderRadius: theme.methods.shape.radius.value(2.5),
-        boxShadow: '0px 4px 32px 0px rgba(0, 0, 0, 0.04)',
-        background: theme.palette.light ? theme.palette.color.neutral[99] : theme.palette.color.neutral[20]
-    },
-    list: {
-        maxHeight: '240px',
-        overflow: 'hidden auto'
-    },
-    textMiniMenuWrapper: {
-        paddingBlock: theme.methods.space.value(1, 'px')
-    },
-    textMiniMenu: {
-        padding: theme.methods.space.value(1.5, 'px'),
-        borderRadius: theme.methods.shape.radius.value(140, 'px'),
-        boxShadow: theme.shadows.values.default[2],
-        maxWidth: 'calc(100vw - 24px)',
-        rowGap: '4px'
-    },
-    textMiniMenuAdditionalMenu: {
-        minWidth: 'clamp(140px, 90%, 250px)',
-        zIndex: '1514',
-        boxShadow: theme.shadows.values.default[2]
-    },
-    inputWrapper: {
-        padding: theme.methods.space.value(1, 'px'),
-        borderRadius: theme.methods.shape.radius.value(1, 'px'),
-        boxShadow: theme.shadows.values.default[2]
-    },
-    singleLine: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden'
-    },
-    input: {
-        '&.onesy-TextField-root': {
-            flex: '1 1 auto !important'
-        }
-    },
-    palette: {
-        padding: theme.methods.space.value(1.5, 'px'),
-        borderRadius: theme.methods.shape.radius.value(1, 'px'),
-        boxShadow: theme.shadows.values.default[2]
-    },
-    paletteItem: {
-        position: 'relative',
-        width: '17px',
-        height: '17px',
-        cursor: 'pointer',
-        borderRadius: theme.methods.shape.radius.value(40, 'px'),
-        boxShadow: theme.shadows.values.default[1],
-        transition: theme.methods.transitions.make('box-shadow'),
-        '&:hover': {
-            boxShadow: theme.shadows.values.default[2],
-        }
-    },
-    textFieldColor: {
-        '&.onesy-ColorTextField-root': {
-            flex: '1 1 auto'
-        }
-    },
-    helperText: {
-        display: 'inline-flex',
-        color: theme.palette.text.default.secondary,
-        userSelect: 'none'
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialFormatAlignLeftW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignLeftW100"));
+var _IconMaterialFormatAlignCenterW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignCenterW100"));
+var _IconMaterialFormatAlignRightW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignRightW100"));
+var _IconMaterialFormatAlignJustifyW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignJustifyW100"));
+var _IconMaterialFormatColorTextW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatColorTextW100"));
+var _IconMaterialFormatColorFillW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatColorFillW100"));
+var _IconMaterialFormatListNumberedW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatListNumberedW100"));
+var _IconMaterialFormatListBulletedW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatListBulletedW100"));
+var _IconMaterialSuperscriptW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSuperscriptW100"));
+var _IconMaterialSubscriptW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSubscriptW100"));
+var _IconMaterialFormatItalicW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatItalicW100"));
+var _IconMaterialFormatUnderlinedW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatUnderlinedW100"));
+var _IconMaterialStrikethroughSW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialStrikethroughSW100"));
+var _IconMaterialFormatBoldW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatBoldW100"));
+var _IconMaterialAddLinkW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialAddLinkW100"));
+var _IconMaterialLinkOffW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialLinkOffW100"));
+var _IconMaterialFormatClearW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatClearW100"));
+var _ColorTextField = _interopRequireDefault(require("../ColorTextField"));
+var _TextField = _interopRequireDefault(require("../TextField/TextField"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _List = _interopRequireDefault(require("../List"));
+var _ListItem = _interopRequireDefault(require("../ListItem"));
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Append = _interopRequireDefault(require("../Append"));
+var _Fade = _interopRequireDefault(require("../Fade"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _ToggleButton = _interopRequireDefault(require("../ToggleButton"));
+var _ClickListener = _interopRequireDefault(require("../ClickListener"));
+var _ToggleButtons = _interopRequireDefault(require("../ToggleButtons"));
+var _Menu = _interopRequireDefault(require("../Menu"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "version", "size", "valueDefault", "value", "inputProps", "onChange", "error", "name", "placeholder", "edit", "mention", "multiline", "onChangeMention", "optionsMention", "error", "helperText", "mentionLabel", "onKeyDown", "pasteText", "readOnly", "additional", "miniMenuExtended", "HelperTextProps", "ColorTextFieldProps", "className"],
+  _excluded2 = ["color"],
+  _excluded3 = ["version", "onUpdate", "onClose"],
+  _excluded4 = ["label", "labelButton", "value", "onChange", "onClick", "placeholder", "InputComponent", "InputProps"],
+  _excluded5 = ["open", "element", "anchorElement", "onClose", "children"],
+  _excluded6 = ["open", "name", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    minHeight: '20px',
+    width: '100%',
+    '& .onesy-TextField-input': _objectSpread({
+      wordBreak: 'break-word',
+      color: theme.methods.palette.color.value('primary', 10)
+    }, theme.typography.values.b2),
+    '& ul, & ol': {
+      listStylePosition: 'inside'
+    }
+  },
+  root_type: {
+    minHeight: '20px',
+    width: '100%',
+    cursor: 'text',
+    '& .onesy-TextField-input': _objectSpread({
+      wordBreak: 'break-word',
+      color: theme.methods.palette.color.value('primary', 10)
+    }, theme.typography.values.b2),
+    '& ul, & ol': {
+      listStylePosition: 'inside'
+    }
+  },
+  menu: {
+    width: '100vw',
+    maxWidth: '240px',
+    borderRadius: theme.methods.shape.radius.value(2.5),
+    boxShadow: '0px 4px 32px 0px rgba(0, 0, 0, 0.04)',
+    background: theme.palette.light ? theme.palette.color.neutral[99] : theme.palette.color.neutral[20]
+  },
+  list: {
+    maxHeight: '240px',
+    overflow: 'hidden auto'
+  },
+  textMiniMenuWrapper: {
+    paddingBlock: theme.methods.space.value(1, 'px')
+  },
+  textMiniMenu: {
+    padding: theme.methods.space.value(1.5, 'px'),
+    borderRadius: theme.methods.shape.radius.value(140, 'px'),
+    boxShadow: theme.shadows.values.default[2],
+    maxWidth: 'calc(100vw - 24px)',
+    rowGap: '4px'
+  },
+  textMiniMenuAdditionalMenu: {
+    minWidth: 'clamp(140px, 90%, 250px)',
+    zIndex: '1514',
+    boxShadow: theme.shadows.values.default[2]
+  },
+  inputWrapper: {
+    padding: theme.methods.space.value(1, 'px'),
+    borderRadius: theme.methods.shape.radius.value(1, 'px'),
+    boxShadow: theme.shadows.values.default[2]
+  },
+  singleLine: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden'
+  },
+  input: {
+    '&.onesy-TextField-root': {
+      flex: '1 1 auto !important'
+    }
+  },
+  palette: {
+    padding: theme.methods.space.value(1.5, 'px'),
+    borderRadius: theme.methods.shape.radius.value(1, 'px'),
+    boxShadow: theme.shadows.values.default[2]
+  },
+  paletteItem: {
+    position: 'relative',
+    width: '17px',
+    height: '17px',
+    cursor: 'pointer',
+    borderRadius: theme.methods.shape.radius.value(40, 'px'),
+    boxShadow: theme.shadows.values.default[1],
+    transition: theme.methods.transitions.make('box-shadow'),
+    '&:hover': {
+      boxShadow: theme.shadows.values.default[2]
+    }
+  },
+  textFieldColor: {
+    '&.onesy-ColorTextField-root': {
+      flex: '1 1 auto'
+    }
+  },
+  helperText: {
+    display: 'inline-flex',
+    color: theme.palette.text.default.secondary,
+    userSelect: 'none'
+  },
+  error_color: {
+    color: [theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80], '!important']
+  },
+  error_hover_color: {
+    color: [theme.palette.light ? theme.palette.color.error[20] : theme.palette.color.error[90], '!important']
+  }
+}), {
+  name: 'onesy-SmartTextField'
+});
+const SmartTextField = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _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.onesySmartTextField) === 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 TextField = _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.TextField) || _TextField.default;
+  }, [theme]);
+  const List = _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.List) || _List.default;
+  }, [theme]);
+  const ListItem = _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.ListItem) || _ListItem.default;
+  }, [theme]);
+  const Avatar = _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.Avatar) || _Avatar.default;
+  }, [theme]);
+  const Type = _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.Type) || _Type.default;
+  }, [theme]);
+  const Surface = _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.Surface) || _Surface.default;
+  }, [theme]);
+  const Button = _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.Button) || _Button.default;
+  }, [theme]);
+  const Append = _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.Append) || _Append.default;
+  }, [theme]);
+  const Fade = _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.Fade) || _Fade.default;
+  }, [theme]);
+  const Tooltip = _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.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const ToggleButton = _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.ToggleButton) || _ToggleButton.default;
+  }, [theme]);
+  const ClickListener = _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.ClickListener) || _ClickListener.default;
+  }, [theme]);
+  const ToggleButtons = _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.ToggleButtons) || _ToggleButtons.default;
+  }, [theme]);
+  const Menu = _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.Menu) || _Menu.default;
+  }, [theme]);
+  const Divider = _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.Divider) || _Divider.default;
+  }, [theme]);
+  const ColorTextField = _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.ColorTextField) || _ColorTextField.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'default',
+      version = 'text',
+      size = 'regular',
+      valueDefault,
+      value: value_,
+      inputProps,
+      onChange,
+      error: error_,
+      name,
+      placeholder,
+      edit,
+      mention,
+      multiline,
+      onChangeMention,
+      optionsMention: optionsMention_,
+      error,
+      helperText,
+      mentionLabel,
+      onKeyDown: onKeyDown_,
+      pasteText = true,
+      readOnly,
+      additional,
+      miniMenuExtended,
+      HelperTextProps,
+      ColorTextFieldProps,
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [value, setValue] = _react.default.useState(valueDefault || '');
+  const [openMenu, setOpenMenu] = _react.default.useState(false);
+  const [offset, setOffset] = _react.default.useState([0, 8]);
+  const [selectionMenu, setSelectionMenu] = _react.default.useState();
+  const [optionsMention, setOptionsMention] = _react.default.useState([]);
+  const [textSelection, setTextSelection] = _react.default.useState();
+  const [textSelected, setTextSelected] = _react.default.useState([]);
+  const [open, setOpen] = _react.default.useState({});
+  const [inputValues, setInputValues] = _react.default.useState({});
+  const refs = {
+    root: _react.default.useRef(null),
+    input: _react.default.useRef(null),
+    searchElement: _react.default.useRef(null),
+    error: _react.default.useRef(null),
+    search: _react.default.useRef(null),
+    open: _react.default.useRef(null),
+    openMenu: _react.default.useRef(null),
+    selectionMenu: _react.default.useRef(null),
+    caret: _react.default.useRef(null),
+    value: _react.default.useRef(null),
+    version: _react.default.useRef(version),
+    optionsMention: _react.default.useRef(optionsMention),
+    validateMeta: _react.default.useRef({}),
+    range: _react.default.useRef(null),
+    inputValues: _react.default.useRef(null),
+    miniMenu: _react.default.useRef(null),
+    miniMenuElements: {
+      color: _react.default.useRef(null),
+      colorPalette: _react.default.useRef(null),
+      background: _react.default.useRef(null),
+      backgroundPalette: _react.default.useRef(null),
+      linkAdd: _react.default.useRef(null),
+      linkAddInput: _react.default.useRef(null),
+      linkRemove: _react.default.useRef(null)
     },
-    error_color: {
-        color: [theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80], '!important']
+    elements: {
+      color: _react.default.useRef(null),
+      background: _react.default.useRef(null),
+      linkAdd: _react.default.useRef(null),
+      linkRemove: _react.default.useRef(null),
+      quote: _react.default.useRef(null),
+      image: _react.default.useRef(null),
+      video: _react.default.useRef(null),
+      videoYoutube: _react.default.useRef(null),
+      table: _react.default.useRef(null),
+      drawing: _react.default.useRef(null),
+      drawingSvg: _react.default.useRef(null),
+      drawingSize: _react.default.useRef(null),
+      drawingSelect: _react.default.useRef(null),
+      drawingPalette: _react.default.useRef(null),
+      code: _react.default.useRef(null)
     },
-    error_hover_color: {
-        color: [theme.palette.light ? theme.palette.color.error[20] : theme.palette.color.error[90], '!important']
+    textSelected: _react.default.useRef(null),
+    textSelection: _react.default.useRef(null),
+    rootDocument: _react.default.useRef(null),
+    rootWindow: _react.default.useRef(null),
+    edit: _react.default.useRef(edit),
+    multiline: _react.default.useRef(multiline),
+    readOnly: _react.default.useRef(readOnly),
+    onChange: _react.default.useRef(onChange),
+    props: _react.default.useRef(props)
+  };
+  refs.value.current = value;
+  refs.version.current = version;
+  refs.open.current = open;
+  refs.openMenu.current = openMenu;
+  refs.selectionMenu.current = selectionMenu;
+  refs.optionsMention.current = optionsMention;
+  refs.inputValues.current = inputValues;
+  refs.textSelected.current = textSelected;
+  refs.textSelection.current = textSelection;
+  refs.edit.current = edit;
+  refs.multiline.current = multiline;
+  refs.readOnly.current = readOnly;
+  refs.onChange.current = onChange;
+  refs.props.current = props;
+  const rootDocument = (0, _utils.isEnvironment)('browser') && (((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document);
+  const rootWindow = rootDocument && (rootDocument.defaultView || window);
+  refs.rootDocument.current = rootDocument;
+  refs.rootWindow.current = rootWindow;
+  const init = _react.default.useCallback(() => {
+    if (version === 'text') {
+      const valueNew = valueDefault || value || '';
+      if (refs.root.current) {
+        refs.root.current.innerHTML = valueNew;
+      }
     }
-}), { name: 'onesy-SmartTextField' });
-const SmartTextField = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySmartTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
-    const List = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.List) || List_1.default; }, [theme]);
-    const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
-    const Avatar = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Avatar) || Avatar_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
-    const Append = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Append) || Append_1.default; }, [theme]);
-    const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const ToggleButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ToggleButton) || ToggleButton_1.default; }, [theme]);
-    const ClickListener = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ClickListener) || ClickListener_1.default; }, [theme]);
-    const ToggleButtons = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ToggleButtons) || ToggleButtons_1.default; }, [theme]);
-    const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
-    const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
-    const ColorTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ColorTextField) || ColorTextField_1.default; }, [theme]);
-    const { tonal = true, color = 'default', version = 'text', size = 'regular', valueDefault, value: value_, inputProps, onChange, error: error_, name, placeholder, edit, mention, multiline, onChangeMention, optionsMention: optionsMention_, error, helperText, mentionLabel, onKeyDown: onKeyDown_, pasteText = true, readOnly, additional, miniMenuExtended, HelperTextProps, ColorTextFieldProps, className } = props, other = __rest(props, ["tonal", "color", "version", "size", "valueDefault", "value", "inputProps", "onChange", "error", "name", "placeholder", "edit", "mention", "multiline", "onChangeMention", "optionsMention", "error", "helperText", "mentionLabel", "onKeyDown", "pasteText", "readOnly", "additional", "miniMenuExtended", "HelperTextProps", "ColorTextFieldProps", "className"]);
-    const { classes } = useStyle();
-    const [value, setValue] = react_1.default.useState(valueDefault || '');
-    const [openMenu, setOpenMenu] = react_1.default.useState(false);
-    const [offset, setOffset] = react_1.default.useState([0, 8]);
-    const [selectionMenu, setSelectionMenu] = react_1.default.useState();
-    const [optionsMention, setOptionsMention] = react_1.default.useState([]);
-    const [textSelection, setTextSelection] = react_1.default.useState();
-    const [textSelected, setTextSelected] = react_1.default.useState([]);
-    const [open, setOpen] = react_1.default.useState({});
-    const [inputValues, setInputValues] = react_1.default.useState({});
-    const refs = {
-        root: react_1.default.useRef(null),
-        input: react_1.default.useRef(null),
-        searchElement: react_1.default.useRef(null),
-        error: react_1.default.useRef(null),
-        search: react_1.default.useRef(null),
-        open: react_1.default.useRef(null),
-        openMenu: react_1.default.useRef(null),
-        selectionMenu: react_1.default.useRef(null),
-        caret: react_1.default.useRef(null),
-        value: react_1.default.useRef(null),
-        version: react_1.default.useRef(version),
-        optionsMention: react_1.default.useRef(optionsMention),
-        validateMeta: react_1.default.useRef({}),
-        range: react_1.default.useRef(null),
-        inputValues: react_1.default.useRef(null),
-        miniMenu: react_1.default.useRef(null),
-        miniMenuElements: {
-            color: react_1.default.useRef(null),
-            colorPalette: react_1.default.useRef(null),
-            background: react_1.default.useRef(null),
-            backgroundPalette: react_1.default.useRef(null),
-            linkAdd: react_1.default.useRef(null),
-            linkAddInput: react_1.default.useRef(null),
-            linkRemove: react_1.default.useRef(null)
-        },
-        elements: {
-            color: react_1.default.useRef(null),
-            background: react_1.default.useRef(null),
-            linkAdd: react_1.default.useRef(null),
-            linkRemove: react_1.default.useRef(null),
-            quote: react_1.default.useRef(null),
-            image: react_1.default.useRef(null),
-            video: react_1.default.useRef(null),
-            videoYoutube: react_1.default.useRef(null),
-            table: react_1.default.useRef(null),
-            drawing: react_1.default.useRef(null),
-            drawingSvg: react_1.default.useRef(null),
-            drawingSize: react_1.default.useRef(null),
-            drawingSelect: react_1.default.useRef(null),
-            drawingPalette: react_1.default.useRef(null),
-            code: react_1.default.useRef(null)
-        },
-        textSelected: react_1.default.useRef(null),
-        textSelection: react_1.default.useRef(null),
-        rootDocument: react_1.default.useRef(null),
-        rootWindow: react_1.default.useRef(null),
-        edit: react_1.default.useRef(edit),
-        multiline: react_1.default.useRef(multiline),
-        readOnly: react_1.default.useRef(readOnly),
-        onChange: react_1.default.useRef(onChange),
-        props: react_1.default.useRef(props)
-    };
-    refs.value.current = value;
-    refs.version.current = version;
-    refs.open.current = open;
-    refs.openMenu.current = openMenu;
-    refs.selectionMenu.current = selectionMenu;
-    refs.optionsMention.current = optionsMention;
-    refs.inputValues.current = inputValues;
-    refs.textSelected.current = textSelected;
-    refs.textSelection.current = textSelection;
-    refs.edit.current = edit;
-    refs.multiline.current = multiline;
-    refs.readOnly.current = readOnly;
-    refs.onChange.current = onChange;
-    refs.props.current = props;
-    const rootDocument = (0, utils_1.isEnvironment)('browser') && (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document);
-    const rootWindow = rootDocument && (rootDocument.defaultView || window);
-    refs.rootDocument.current = rootDocument;
-    refs.rootWindow.current = rootWindow;
-    const init = react_1.default.useCallback(() => {
-        if (version === 'text') {
-            const valueNew = valueDefault || value || '';
-            if (refs.root.current) {
-                refs.root.current.innerHTML = valueNew;
-            }
+  }, [version, value, valueDefault]);
+  _react.default.useEffect(() => {
+    // init
+    init();
+  }, []);
+  _react.default.useEffect(() => {
+    setOptionsMention([...(optionsMention_ || [])]);
+  }, [(0, _utils.hash)(optionsMention_)]);
+  _react.default.useEffect(() => {
+    const valuePrevious = (refs.root.current.innerHTML || '').replaceAll('&nbsp;', ' ');
+    const valueNew = (0, _utils.textToInnerHTML)(value_);
+    if (value_ !== undefined && valuePrevious !== valueNew) validate(!value_ ? '' : (0, _utils2.sanitize)(value_));
+  }, [value_]);
+
+  // Save selection to revive, use it on execComand
+  _react.default.useEffect(() => {
+    var _selection_$anchorNod;
+    const selection_ = refs.rootWindow.current.getSelection();
+    if (selection_ && selection_.anchorNode && !((_selection_$anchorNod = selection_.anchorNode) !== null && _selection_$anchorNod !== void 0 && (_selection_$anchorNod = _selection_$anchorNod.className) !== null && _selection_$anchorNod !== void 0 && _selection_$anchorNod.includes('TextField'))) refs.range.current = selection_.getRangeAt(0);
+  }, [open]);
+  const updateInputValues = (property, itemValue) => {
+    setInputValues(values => _objectSpread(_objectSpread({}, values), {}, {
+      [property]: itemValue
+    }));
+  };
+  const updateOpen = (property, itemValue) => {
+    setOpen(values => _objectSpread(_objectSpread({}, values), {}, {
+      [property]: itemValue
+    }));
+  };
+  const validateElement = _react.default.useCallback(element => {
+    if (element !== null && element !== void 0 && element.children) {
+      Array.from(element === null || element === void 0 ? void 0 : element.children).forEach(child => {
+        // Any tag
+        if (child.dataset.onesyVersion === 'mention-user') {
+          // Replace the child if label & textContent don't match
+          if (child.dataset.onesyLabel !== child.innerHTML) {
+            element.replaceChild(window.document.createTextNode(child.textContent), child);
+            refs.validateMeta.current.restore = true;
+          }
         }
-    }, [version, value, valueDefault]);
-    react_1.default.useEffect(() => {
-        // init
-        init();
-    }, []);
-    react_1.default.useEffect(() => {
-        setOptionsMention([...(optionsMention_ || [])]);
-    }, [(0, utils_1.hash)(optionsMention_)]);
-    react_1.default.useEffect(() => {
-        const valuePrevious = (refs.root.current.innerHTML || '').replaceAll('&nbsp;', ' ');
-        const valueNew = (0, utils_1.textToInnerHTML)(value_);
-        if (value_ !== undefined && valuePrevious !== valueNew)
-            validate(!value_ ? '' : (0, utils_2.sanitize)(value_));
-    }, [value_]);
-    // Save selection to revive, use it on execComand
-    react_1.default.useEffect(() => {
-        var _a, _b;
-        const selection_ = refs.rootWindow.current.getSelection();
-        if (selection_ &&
-            selection_.anchorNode &&
-            !((_b = (_a = selection_.anchorNode) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.includes('TextField')))
-            refs.range.current = selection_.getRangeAt(0);
-    }, [open]);
-    const updateInputValues = (property, itemValue) => {
-        setInputValues((values) => (Object.assign(Object.assign({}, values), { [property]: itemValue })));
+        if (child !== null && child !== void 0 && child.children) validateElement(child);
+      });
+    }
+  }, []);
+  const validate = _react.default.useCallback((valueNew = undefined) => {
+    // Save caret position
+    refs.caret.current = _utils2.caret.save(refs.root.current);
+
+    // Update the root innerHTML
+    if (valueNew !== undefined) refs.root.current.innerHTML = valueNew;
+    refs.validateMeta.current.restore = false;
+
+    // Find all span onesy-mention children
+    // if they aren't valid, replace them with text node of their textContent
+    validateElement(refs.root.current);
+    if (refs.validateMeta.current.restore) _utils2.caret.restore(refs.root.current, refs.caret.current);
+    return refs.root.current.innerHTML;
+  }, []);
+  const getAtSearchData = _react.default.useCallback(() => {
+    if (refs.root.current) {
+      var _anchorNode, _range$commonAncestor, _anchorNode2;
+      const windowSelection = window.document.getSelection();
+      if (!(windowSelection && windowSelection.rangeCount > 0)) return;
+      const range = windowSelection === null || windowSelection === void 0 ? void 0 : windowSelection.getRangeAt(0);
+      if (!range) return;
+
+      // Only allow for text not in span user mention element
+      if (((_anchorNode = windowSelection.anchorNode) === null || _anchorNode === void 0 || (_anchorNode = _anchorNode.parentElement) === null || _anchorNode === void 0 || (_anchorNode = _anchorNode.dataset) === null || _anchorNode === void 0 ? void 0 : _anchorNode.onesyVersion) === 'mention-user') return '';
+
+      // Text
+      if (!['text', '#text'].includes(range === null || range === void 0 || (_range$commonAncestor = range.commonAncestorContainer) === null || _range$commonAncestor === void 0 ? void 0 : _range$commonAncestor.nodeName)) return '';
+      const text = ((_anchorNode2 = windowSelection.anchorNode) === null || _anchorNode2 === void 0 ? void 0 : _anchorNode2.textContent) || '';
+      const start = text.slice(0, range.endOffset).split('').reverse().join('');
+      let result = [];
+      for (const valueText of start) {
+        // All characters other than space, numbers
+        if (!!valueText.match(/[^<>\\/\n\r\t]/)) result.unshift(valueText);else break;
+        if (['@'].includes(valueText)) break;
+      }
+      result = result.includes('@') ? result.join('') : '';
+
+      // Allow 1 space only
+      if (result && result.match(/\s{2}/g)) return '';
+      return result;
+    }
+  }, []);
+  refs.search.current = getAtSearchData();
+  const onInput = _react.default.useCallback(event => {
+    if (refs.root.current) {
+      let valueInput = refs.root.current.innerHTML || '';
+      if (refs.root.current.textContent === '') {
+        valueInput = '';
+        refs.root.current.innerHTML = '';
+      }
+      if (!refs.multiline.current) {
+        const previous = valueInput;
+        valueInput = valueInput.replace(/\r?\n|\r/gm, '');
+        if (previous !== valueInput) refs.root.current.innerHTML = valueInput;
+      }
+      valueInput = (0, _utils.innerHTMLToText)(valueInput);
+      setValue(valueInput);
+      if ((0, _utils.is)('function', refs.onChange.current)) refs.onChange.current(valueInput, event);
+    }
+  }, []);
+  _react.default.useEffect(() => {
+    if (mention && refs.search.current !== undefined) onChangeMention === null || onChangeMention === void 0 || onChangeMention(refs.search.current, '@');
+  }, [mention, refs.search.current]);
+  _react.default.useEffect(() => {
+    const method = () => {
+      if (window.document.activeElement === refs.input.current) onInput();
     };
-    const updateOpen = (property, itemValue) => {
-        setOpen((values) => (Object.assign(Object.assign({}, values), { [property]: itemValue })));
+    window.document.addEventListener('selectionchange', method);
+    onChangeMention === null || onChangeMention === void 0 || onChangeMention(refs.search.current, '@');
+    return () => {
+      window.document.removeEventListener('selectionchange', method);
     };
-    const validateElement = react_1.default.useCallback((element) => {
-        if (element === null || element === void 0 ? void 0 : element.children) {
-            Array.from(element === null || element === void 0 ? void 0 : element.children).forEach((child) => {
-                // Any tag
-                if (child.dataset.onesyVersion === 'mention-user') {
-                    // Replace the child if label & textContent don't match
-                    if (child.dataset.onesyLabel !== child.innerHTML) {
-                        element.replaceChild(window.document.createTextNode(child.textContent), child);
-                        refs.validateMeta.current.restore = true;
-                    }
-                }
-                if (child === null || child === void 0 ? void 0 : child.children)
-                    validateElement(child);
-            });
-        }
-    }, []);
-    const validate = react_1.default.useCallback((valueNew = undefined) => {
-        // Save caret position
-        refs.caret.current = utils_2.caret.save(refs.root.current);
-        // Update the root innerHTML
-        if (valueNew !== undefined)
-            refs.root.current.innerHTML = valueNew;
-        refs.validateMeta.current.restore = false;
-        // Find all span onesy-mention children
-        // if they aren't valid, replace them with text node of their textContent
-        validateElement(refs.root.current);
-        if (refs.validateMeta.current.restore)
-            utils_2.caret.restore(refs.root.current, refs.caret.current);
-        return refs.root.current.innerHTML;
-    }, []);
-    const getAtSearchData = react_1.default.useCallback(() => {
-        var _a, _b, _c, _d, _e;
-        if (refs.root.current) {
-            const windowSelection = window.document.getSelection();
-            if (!(windowSelection && windowSelection.rangeCount > 0))
-                return;
-            const range = windowSelection === null || windowSelection === void 0 ? void 0 : windowSelection.getRangeAt(0);
-            if (!range)
-                return;
-            // Only allow for text not in span user mention element
-            if (((_c = (_b = (_a = windowSelection.anchorNode) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.dataset) === null || _c === void 0 ? void 0 : _c.onesyVersion) === 'mention-user')
-                return '';
-            // Text
-            if (!['text', '#text'].includes((_d = range === null || range === void 0 ? void 0 : range.commonAncestorContainer) === null || _d === void 0 ? void 0 : _d.nodeName))
-                return '';
-            const text = ((_e = windowSelection.anchorNode) === null || _e === void 0 ? void 0 : _e.textContent) || '';
-            const start = text.slice(0, range.endOffset).split('').reverse().join('');
-            let result = [];
-            for (const valueText of start) {
-                // All characters other than space, numbers
-                if (!!valueText.match(/[^<>\\/\n\r\t]/))
-                    result.unshift(valueText);
-                else
-                    break;
-                if (['@'].includes(valueText))
-                    break;
-            }
-            result = result.includes('@') ? result.join('') : '';
-            // Allow 1 space only
-            if (result && result.match(/\s{2}/g))
-                return '';
-            return result;
-        }
-    }, []);
-    refs.search.current = getAtSearchData();
-    const onInput = react_1.default.useCallback((event) => {
-        if (refs.root.current) {
-            let valueInput = refs.root.current.innerHTML || '';
-            if (refs.root.current.textContent === '') {
-                valueInput = '';
-                refs.root.current.innerHTML = '';
-            }
-            if (!refs.multiline.current) {
-                const previous = valueInput;
-                valueInput = valueInput.replace(/\r?\n|\r/gm, '');
-                if (previous !== valueInput)
-                    refs.root.current.innerHTML = valueInput;
-            }
-            valueInput = (0, utils_1.innerHTMLToText)(valueInput);
-            setValue(valueInput);
-            if ((0, utils_1.is)('function', refs.onChange.current))
-                refs.onChange.current(valueInput, event);
-        }
-    }, []);
-    react_1.default.useEffect(() => {
-        if (mention && refs.search.current !== undefined)
-            onChangeMention === null || onChangeMention === void 0 ? void 0 : onChangeMention(refs.search.current, '@');
-    }, [mention, refs.search.current]);
-    react_1.default.useEffect(() => {
-        const method = () => {
-            if (window.document.activeElement === refs.input.current)
-                onInput();
-        };
-        window.document.addEventListener('selectionchange', method);
-        onChangeMention === null || onChangeMention === void 0 ? void 0 : onChangeMention(refs.search.current, '@');
-        return () => {
-            window.document.removeEventListener('selectionchange', method);
-        };
-    }, []);
-    const updateSelection = react_1.default.useCallback(() => {
-        const windowSelection = window.document.getSelection();
-        if (!(windowSelection && windowSelection.rangeCount > 0))
-            return;
-        const range = windowSelection === null || windowSelection === void 0 ? void 0 : windowSelection.getRangeAt(0);
-        if (range)
-            setSelectionMenu(range === null || range === void 0 ? void 0 : range.getBoundingClientRect());
-    }, []);
-    const onOpenSearch = react_1.default.useCallback(async () => {
-        if (!refs.openMenu.current && !!refs.optionsMention.current.length) {
-            // open
-            setOpenMenu(true);
-            // selection
-            updateSelection();
-        }
-    }, []);
-    const onCloseSearch = react_1.default.useCallback(() => {
-        if (refs.openMenu.current) {
-            setOpenMenu(false);
-            setSelectionMenu(null);
-        }
-    }, []);
-    const updateOffset = react_1.default.useCallback(() => {
-        var _a;
-        setOffset([-(((_a = refs.searchElement.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0), 8]);
-    }, []);
-    const onFocus = react_1.default.useCallback(() => {
-        // setFocus(true);
-    }, []);
-    const onBlur = react_1.default.useCallback(() => {
-        // setFocus(false);
-    }, []);
-    const onKeyDown = react_1.default.useCallback((event) => {
-        var _a;
-        const windowSelection = window.getSelection();
-        if (windowSelection) {
-            // if (event.key === 'Enter') {
-            //   event.preventDefault();
-            //   const anchor = windowSelection.anchorNode as HTMLElement;
-            //   const element = anchor.parentElement;
-            //   const multiple = anchor.tagName === 'P' && anchor.children.length === 1 && anchor.children[0].tagName === 'BR';
-            //   window.document.execCommand('insertHTML', false, `<p><br /></p>`.repeat(multiple ? 2 : 1));
-            //   const range = new Range();
-            //   const rangeStartElement = ((multiple ? anchor : element) as any)?.nextElementSibling;
-            //   if (rangeStartElement) range.setStart(rangeStartElement, 0);
-            //   windowSelection.removeAllRanges();
-            //   windowSelection.addRange(range);
-            // }
-            if (event.key === 'ArrowRight') {
-                // If in user mention span
-                // move out of it with adding new empty space root node after the user mention span
-                // only if caret is at the end of the span, & span is last child of it's parent
-                if (!(windowSelection && windowSelection.rangeCount > 0))
-                    return;
-                const range = windowSelection.getRangeAt(0);
-                const caretElement = windowSelection.anchorNode.parentElement;
-                const caretElementParent = caretElement.parentElement;
-                const caretElementParentChildNodes = Array.from(caretElementParent.childNodes);
-                if (((_a = caretElement === null || caretElement === void 0 ? void 0 : caretElement.dataset) === null || _a === void 0 ? void 0 : _a.onesyVersion) === 'mention-user' &&
-                    range.endOffset === windowSelection.anchorNode.textContent.length &&
-                    caretElementParentChildNodes[caretElementParentChildNodes.length - 1] === caretElement) {
-                    caretElementParent.insertBefore(window.document.createTextNode('\u00A0'), caretElement.nextElementSibling);
-                }
-            }
-        }
-        if (!refs.multiline.current) {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-            }
-        }
-        if (!refs.edit.current &&
-            ((event.metaKey && (utils_2.keyboardStyleCommands.includes(event.key))) ||
-                (event.ctrlKey && (utils_2.keyboardStyleCommands.includes(event.key))))) {
-            event.preventDefault();
+  }, []);
+  const updateSelection = _react.default.useCallback(() => {
+    const windowSelection = window.document.getSelection();
+    if (!(windowSelection && windowSelection.rangeCount > 0)) return;
+    const range = windowSelection === null || windowSelection === void 0 ? void 0 : windowSelection.getRangeAt(0);
+    if (range) setSelectionMenu(range === null || range === void 0 ? void 0 : range.getBoundingClientRect());
+  }, []);
+  const onOpenSearch = _react.default.useCallback(async () => {
+    if (!refs.openMenu.current && !!refs.optionsMention.current.length) {
+      // open
+      setOpenMenu(true);
+
+      // selection
+      updateSelection();
+    }
+  }, []);
+  const onCloseSearch = _react.default.useCallback(() => {
+    if (refs.openMenu.current) {
+      setOpenMenu(false);
+      setSelectionMenu(null);
+    }
+  }, []);
+  const updateOffset = _react.default.useCallback(() => {
+    var _refs$searchElement$c;
+    setOffset([-(((_refs$searchElement$c = refs.searchElement.current) === null || _refs$searchElement$c === void 0 ? void 0 : _refs$searchElement$c.clientWidth) || 0), 8]);
+  }, []);
+  const onFocus = _react.default.useCallback(() => {
+    // setFocus(true);
+  }, []);
+  const onBlur = _react.default.useCallback(() => {
+    // setFocus(false);
+  }, []);
+  const onKeyDown = _react.default.useCallback(event => {
+    const windowSelection = window.getSelection();
+    if (windowSelection) {
+      // if (event.key === 'Enter') {
+      //   event.preventDefault();
+
+      //   const anchor = windowSelection.anchorNode as HTMLElement;
+      //   const element = anchor.parentElement;
+
+      //   const multiple = anchor.tagName === 'P' && anchor.children.length === 1 && anchor.children[0].tagName === 'BR';
+
+      //   window.document.execCommand('insertHTML', false, `<p><br /></p>`.repeat(multiple ? 2 : 1));
+
+      //   const range = new Range();
+
+      //   const rangeStartElement = ((multiple ? anchor : element) as any)?.nextElementSibling;
+
+      //   if (rangeStartElement) range.setStart(rangeStartElement, 0);
+
+      //   windowSelection.removeAllRanges();
+      //   windowSelection.addRange(range);
+      // }
+
+      if (event.key === 'ArrowRight') {
+        var _caretElement$dataset;
+        // If in user mention span
+        // move out of it with adding new empty space root node after the user mention span
+        // only if caret is at the end of the span, & span is last child of it's parent
+        if (!(windowSelection && windowSelection.rangeCount > 0)) return;
+        const range = windowSelection.getRangeAt(0);
+        const caretElement = windowSelection.anchorNode.parentElement;
+        const caretElementParent = caretElement.parentElement;
+        const caretElementParentChildNodes = Array.from(caretElementParent.childNodes);
+        if ((caretElement === null || caretElement === void 0 || (_caretElement$dataset = caretElement.dataset) === null || _caretElement$dataset === void 0 ? void 0 : _caretElement$dataset.onesyVersion) === 'mention-user' && range.endOffset === windowSelection.anchorNode.textContent.length && caretElementParentChildNodes[caretElementParentChildNodes.length - 1] === caretElement) {
+          caretElementParent.insertBefore(window.document.createTextNode('\u00A0'), caretElement.nextElementSibling);
         }
-        if ((0, utils_1.is)('function', onKeyDown_))
-            onKeyDown_(event);
-    }, [onKeyDown_]);
-    const onPaste = react_1.default.useCallback((event) => {
-        // event.preventDefault();
-        // const text = event.clipboardData?.getData('text/plain');
-        // window.document.execCommand('insertText', false, text);
-    }, []);
-    const onPasteText = react_1.default.useCallback((event) => {
-        var _a;
-        event.preventDefault();
-        const text = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
-        window.document.execCommand('insertText', false, text);
-    }, []);
-    const onDrop = react_1.default.useCallback((event) => {
+      }
+    }
+    if (!refs.multiline.current) {
+      if (event.key === 'Enter') {
         event.preventDefault();
-    }, []);
-    const addTag = react_1.default.useCallback((item, versionMention = 'user') => {
-        // Save caret position
-        refs.caret.current = utils_2.caret.save(refs.root.current);
-        const itemName = item.name;
-        const classesElement = ['onesy-mention'];
-        // Query text node that equals selection anchorNode
-        // and replace its textContent's search value with new span
-        const windowSelection = window.document.getSelection();
-        if (!(windowSelection && windowSelection.rangeCount > 0))
-            return;
-        const range = windowSelection === null || windowSelection === void 0 ? void 0 : windowSelection.getRangeAt(0);
-        if (!range)
-            return;
-        const textNode = windowSelection.anchorNode;
-        const textContent = textNode.textContent;
-        // Bug fix
-        // only be able to insert data within the input
-        // if by accident selection went outside the input
-        // basically do nothing with it
-        if (refs.root.current.contains(textNode.parentElement)) {
-            const end = range.endOffset;
-            const start = end - refs.search.current.length;
-            const pre = textContent.slice(0, start);
-            const post = textContent.slice(end);
-            // Insert before anchorNode pre, item mention, and post
-            if (pre)
-                textNode.parentElement.insertBefore(window.document.createTextNode(pre), windowSelection.anchorNode);
-            const span = window.document.createElement('span');
-            span.className = classesElement.join(' ');
-            span.dataset.onesyLabel = `@${itemName}`;
-            span.dataset.onesyVersion = `mention-${versionMention}`;
-            span.dataset.onesyObject = `${versionMention}`;
-            span.dataset.onesyId = item.id;
-            span.innerHTML = `@${itemName}`;
-            textNode.parentElement.insertBefore(span, windowSelection.anchorNode);
-            // 1 space only following the item mention
-            textNode.parentElement.insertBefore(window.document.createTextNode('\u00A0'), windowSelection.anchorNode);
-            if (post)
-                textNode.parentElement.insertBefore(window.document.createTextNode(post), windowSelection.anchorNode);
-            // Remove the text node
-            textNode.remove();
-            // Invoke onChange method with new value
-            const valueInput = (0, utils_1.innerHTMLToText)(refs.root.current.innerHTML);
-            if ((0, utils_1.is)('function', refs.onChange.current))
-                refs.onChange.current(valueInput, { target: refs.root.current });
-            // Update the caret position to be outside the span mention
-            // for amount of added characters + 1 space
-            const added = `@${itemName}`.length - refs.search.current.length + 1;
-            refs.caret.current.start = refs.caret.current.end += added;
-            utils_2.caret.restore(refs.root.current, refs.caret.current);
-        }
-        // Close the search
-        onCloseSearch();
-    }, [onChange]);
-    // If users response & not open, open
-    // else if no users response & opened, close the search
-    react_1.default.useEffect(() => {
-        if (mention) {
-            if (refs.openMenu.current && !optionsMention.length)
-                onCloseSearch();
-            else if (!refs.openMenu.current && refs.search.current && !!optionsMention.length)
-                onOpenSearch();
-        }
-    }, [mention, optionsMention]);
-    react_1.default.useEffect(() => {
-        if (mention) {
-            // Validate
-            validate();
-            // Update
-            // open, selection & offset
-            setTimeout(() => {
-                refs.search.current ? onOpenSearch() : onCloseSearch();
-                if (refs.openMenu.current)
-                    updateSelection();
-                updateOffset();
-            });
-        }
-    }, [mention, value]);
-    react_1.default.useEffect(() => {
-        // setError(error_);
-    }, [error_]);
-    const label = react_1.default.useCallback(() => ((0, utils_1.is)('function', mentionLabel) ? mentionLabel(optionsMention, { addTag }) :
-        (0, jsx_runtime_1.jsx)(Line, Object.assign({ className: classes.menu }, { children: (0, jsx_runtime_1.jsx)(List, Object.assign({ size: 'small', className: classes.list }, { children: optionsMention === null || optionsMention === void 0 ? void 0 : optionsMention.map((item, index) => {
-                    var _a;
-                    return ((0, jsx_runtime_1.jsx)(ListItem, { start: ((0, jsx_runtime_1.jsx)(Avatar, Object.assign({ color: (0, utils_1.stringToColor)(item.name), size: 'small' }, { children: (_a = item.name) === null || _a === void 0 ? void 0 : _a.slice(0, 1) }))), primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'l3' }, { children: item.name }))), onClick: () => addTag(item), button: true }, index));
-                }) })) }))), [optionsMention]);
-    const paste = async () => {
-        const valueClipboard = await navigator.clipboard.read();
-        if (valueClipboard) {
-            let values = '';
-            for (const item of Array.from(valueClipboard)) {
-                const valueItem = await item.getType('text/html');
-                values += await valueItem.text();
-            }
-            rootDocument.execCommand('insertHTML', undefined, values);
-        }
-    };
-    const query = (command) => {
-        return (0, utils_1.parse)(refs.rootDocument.current.queryCommandValue(command));
-    };
-    const textQueryUpdate = () => {
-        const selected = [];
-        const updateOptionValues = [
-            { name: 'italic', command: 'italic' },
-            { name: 'underline', command: 'underline' },
-            { name: 'bold', command: 'bold' },
-            { name: 'strike-line', command: 'strikeThrough' }
-        ];
-        updateOptionValues.forEach(item => {
-            if (query(item.command))
-                selected.push(item.name);
-        });
-        setTextSelected(selected);
-    };
-    const onMouseUp = react_1.default.useCallback(() => {
-        if (!refs.edit.current)
-            return;
+      }
+    }
+    if (!refs.edit.current && (event.metaKey && _utils2.keyboardStyleCommands.includes(event.key) || event.ctrlKey && _utils2.keyboardStyleCommands.includes(event.key))) {
+      event.preventDefault();
+    }
+    if ((0, _utils.is)('function', onKeyDown_)) onKeyDown_(event);
+  }, [onKeyDown_]);
+  const onPaste = _react.default.useCallback(event => {
+    // event.preventDefault();
+
+    // const text = event.clipboardData?.getData('text/plain');
+
+    // window.document.execCommand('insertText', false, text);
+  }, []);
+  const onPasteText = _react.default.useCallback(event => {
+    var _event$clipboardData;
+    event.preventDefault();
+    const text = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData('text/plain');
+    window.document.execCommand('insertText', false, text);
+  }, []);
+  const onDrop = _react.default.useCallback(event => {
+    event.preventDefault();
+  }, []);
+  const addTag = _react.default.useCallback((item, versionMention = 'user') => {
+    // Save caret position
+    refs.caret.current = _utils2.caret.save(refs.root.current);
+    const itemName = item.name;
+    const classesElement = ['onesy-mention'];
+
+    // Query text node that equals selection anchorNode
+    // and replace its textContent's search value with new span
+    const windowSelection = window.document.getSelection();
+    if (!(windowSelection && windowSelection.rangeCount > 0)) return;
+    const range = windowSelection === null || windowSelection === void 0 ? void 0 : windowSelection.getRangeAt(0);
+    if (!range) return;
+    const textNode = windowSelection.anchorNode;
+    const textContent = textNode.textContent;
+
+    // Bug fix
+    // only be able to insert data within the input
+    // if by accident selection went outside the input
+    // basically do nothing with it
+    if (refs.root.current.contains(textNode.parentElement)) {
+      const end = range.endOffset;
+      const start = end - refs.search.current.length;
+      const pre = textContent.slice(0, start);
+      const post = textContent.slice(end);
+
+      // Insert before anchorNode pre, item mention, and post
+      if (pre) textNode.parentElement.insertBefore(window.document.createTextNode(pre), windowSelection.anchorNode);
+      const span = window.document.createElement('span');
+      span.className = classesElement.join(' ');
+      span.dataset.onesyLabel = `@${itemName}`;
+      span.dataset.onesyVersion = `mention-${versionMention}`;
+      span.dataset.onesyObject = `${versionMention}`;
+      span.dataset.onesyId = item.id;
+      span.innerHTML = `@${itemName}`;
+      textNode.parentElement.insertBefore(span, windowSelection.anchorNode);
+
+      // 1 space only following the item mention
+      textNode.parentElement.insertBefore(window.document.createTextNode('\u00A0'), windowSelection.anchorNode);
+      if (post) textNode.parentElement.insertBefore(window.document.createTextNode(post), windowSelection.anchorNode);
+
+      // Remove the text node
+      textNode.remove();
+
+      // Invoke onChange method with new value
+      const valueInput = (0, _utils.innerHTMLToText)(refs.root.current.innerHTML);
+      if ((0, _utils.is)('function', refs.onChange.current)) refs.onChange.current(valueInput, {
+        target: refs.root.current
+      });
+
+      // Update the caret position to be outside the span mention
+      // for amount of added characters + 1 space
+      const added = `@${itemName}`.length - refs.search.current.length + 1;
+      refs.caret.current.start = refs.caret.current.end += added;
+      _utils2.caret.restore(refs.root.current, refs.caret.current);
+    }
+
+    // Close the search
+    onCloseSearch();
+  }, [onChange]);
+
+  // If users response & not open, open
+  // else if no users response & opened, close the search
+  _react.default.useEffect(() => {
+    if (mention) {
+      if (refs.openMenu.current && !optionsMention.length) onCloseSearch();else if (!refs.openMenu.current && refs.search.current && !!optionsMention.length) onOpenSearch();
+    }
+  }, [mention, optionsMention]);
+  _react.default.useEffect(() => {
+    if (mention) {
+      // Validate
+      validate();
+
+      // Update
+      // open, selection & offset
+      setTimeout(() => {
+        refs.search.current ? onOpenSearch() : onCloseSearch();
+        if (refs.openMenu.current) updateSelection();
+        updateOffset();
+      });
+    }
+  }, [mention, value]);
+  _react.default.useEffect(() => {
+    // setError(error_);
+  }, [error_]);
+  const label = _react.default.useCallback(() => (0, _utils.is)('function', mentionLabel) ? mentionLabel(optionsMention, {
+    addTag
+  }) : /*#__PURE__*/_react.default.createElement(Line, {
+    className: classes.menu
+  }, /*#__PURE__*/_react.default.createElement(List, {
+    size: "small",
+    className: classes.list
+  }, optionsMention === null || optionsMention === void 0 ? void 0 : optionsMention.map((item, index) => {
+    var _item$name;
+    return /*#__PURE__*/_react.default.createElement(ListItem, {
+      key: index,
+      start: /*#__PURE__*/_react.default.createElement(Avatar, {
+        color: (0, _utils.stringToColor)(item.name),
+        size: "small"
+      }, (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.slice(0, 1)),
+      primary: /*#__PURE__*/_react.default.createElement(Type, {
+        version: "l3"
+      }, item.name),
+      onClick: () => addTag(item),
+      button: true
+    });
+  }))), [optionsMention]);
+  const paste = async () => {
+    const valueClipboard = await navigator.clipboard.read();
+    if (valueClipboard) {
+      let values = '';
+      for (const item of Array.from(valueClipboard)) {
+        const valueItem = await item.getType('text/html');
+        values += await valueItem.text();
+      }
+      rootDocument.execCommand('insertHTML', undefined, values);
+    }
+  };
+  const query = command => {
+    return (0, _utils.parse)(refs.rootDocument.current.queryCommandValue(command));
+  };
+  const textQueryUpdate = () => {
+    const selected = [];
+    const updateOptionValues = [{
+      name: 'italic',
+      command: 'italic'
+    }, {
+      name: 'underline',
+      command: 'underline'
+    }, {
+      name: 'bold',
+      command: 'bold'
+    }, {
+      name: 'strike-line',
+      command: 'strikeThrough'
+    }];
+    updateOptionValues.forEach(item => {
+      if (query(item.command)) selected.push(item.name);
+    });
+    setTextSelected(selected);
+  };
+  const onMouseUp = _react.default.useCallback(() => {
+    if (!refs.edit.current) return;
+    const selection_ = refs.rootWindow.current.getSelection();
+    if (!selection_) return;
+    if (!selection_.anchorNode || !refs.root.current.contains(selection_.anchorNode)) return setTextSelection(null);
+    setTimeout(() => {
+      var _selection_$anchorNod2;
+      const rect = selection_.getRangeAt(0).getBoundingClientRect();
+      setTextSelection(Math.round(rect.width) ? {
+        selection: rect,
+        element: (_selection_$anchorNod2 = selection_.anchorNode) === null || _selection_$anchorNod2 === void 0 ? void 0 : _selection_$anchorNod2.parentElement
+      } : null);
+      textQueryUpdate();
+    }, 140);
+  }, []);
+  const onMouseDown = _react.default.useCallback(() => {
+    if (!refs.edit.current) return;
+    textQueryUpdate();
+  }, []);
+  const onKeyUp = _react.default.useCallback(() => {
+    if (!refs.edit.current) return;
+    textQueryUpdate();
+  }, []);
+  const textMethod = _react.default.useCallback(command => argument => {
+    var _refs$textSelection$c;
+    switch (command) {
+      // updates
+      case 'italic':
+        refs.rootDocument.current.execCommand('italic');
+        if (query('italic')) setTextSelected(values => [...values, 'italic']);else setTextSelected(values => values.filter(item => item !== 'italic'));
+        break;
+      case 'underline':
+        refs.rootDocument.current.execCommand('underline');
+        if (query('underline')) setTextSelected(values => [...values, 'underline']);else setTextSelected(values => values.filter(item => item !== 'underline'));
+        break;
+      case 'bold':
+        refs.rootDocument.current.execCommand('bold');
+        if (query('bold')) setTextSelected(values => [...values, 'bold']);else setTextSelected(values => values.filter(item => item !== 'bold'));
+        break;
+      case 'strike-line':
+        refs.rootDocument.current.execCommand('strikeThrough');
+        if (query('strikeThrough')) setTextSelected(values => [...values, 'strike-line']);else setTextSelected(values => values.filter(item => item !== 'strike-line'));
+        break;
+      case 'align-left':
+        refs.rootDocument.current.execCommand('justifyLeft');
+        if (query('justifyLeft')) setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-left']);else setTextSelected(values => values.filter(item => item !== 'align-left'));
+        break;
+      case 'align-center':
+        refs.rootDocument.current.execCommand('justifyCenter');
+        if (query('justifyCenter')) setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-center']);else setTextSelected(values => values.filter(item => item !== 'align-center'));
+        break;
+      case 'align-right':
+        refs.rootDocument.current.execCommand('justifyRight');
+        if (query('justifyRight')) setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-right']);else setTextSelected(values => values.filter(item => item !== 'align-right'));
+        break;
+      case 'align-justify':
+        refs.rootDocument.current.execCommand('justifyFull');
+        if (query('justifyFull')) setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-justify']);else setTextSelected(values => values.filter(item => item !== 'align-justify'));
+        break;
+      case 'superscript':
+        refs.rootDocument.current.execCommand('superscript');
+        if (query('superscript')) setTextSelected(values => [...values, 'superscript']);else setTextSelected(values => values.filter(item => item !== 'superscript'));
+        break;
+      case 'subscript':
+        refs.rootDocument.current.execCommand('subscript');
+        if (query('subscript')) setTextSelected(values => [...values, 'subscript']);else setTextSelected(values => values.filter(item => item !== 'subscript'));
+        break;
+      case 'indent':
+        refs.rootDocument.current.execCommand('indent');
+        break;
+      case 'outdent':
+        refs.rootDocument.current.execCommand('outdent');
+        break;
+      case 'font-version':
+        refs.rootDocument.current.execCommand('formatBlock', undefined, argument);
+        break;
+      case 'font-family':
+        refs.rootDocument.current.execCommand('styleWithCSS', true);
+        refs.rootDocument.current.execCommand('fontName', undefined, argument);
+        refs.rootDocument.current.execCommand('styleWithCSS', false);
+        break;
+      case 'font-size':
+        refs.rootDocument.current.execCommand('styleWithCSS', true);
+        refs.rootDocument.current.execCommand('fontSize', undefined, argument);
+        refs.rootDocument.current.execCommand('styleWithCSS', false);
+        break;
+      case 'font-color':
+        refs.rootDocument.current.execCommand('styleWithCSS', true);
+        refs.rootDocument.current.execCommand('foreColor', undefined, argument);
+        refs.rootDocument.current.execCommand('styleWithCSS', false);
+        break;
+      case 'font-background':
+        refs.rootDocument.current.execCommand('styleWithCSS', true);
+        refs.rootDocument.current.execCommand('backColor', undefined, argument);
+        refs.rootDocument.current.execCommand('styleWithCSS', false);
+        break;
+      case 'list-ordered':
+        refs.rootDocument.current.execCommand('insertOrderedList');
+        if (query('insertOrderedList')) setTextSelected(values => [...values.filter(item => !item.includes('list')), 'list-ordered']);else setTextSelected(values => values.filter(item => item !== 'list-ordered'));
+        break;
+      case 'list-unordered':
+        refs.rootDocument.current.execCommand('insertUnorderedList');
+        if (query('insertUnorderedList')) setTextSelected(values => [...values.filter(item => !item.includes('list')), 'list-unordered']);else setTextSelected(values => values.filter(item => item !== 'list-unordered'));
+        break;
+      case 'horizontal-rule':
+        refs.rootDocument.current.execCommand('insertHorizontalRule');
+        break;
+      case 'link-add':
+        refs.rootDocument.current.execCommand('createLink', undefined, argument);
+        break;
+      case 'link-remove':
+        refs.rootDocument.current.execCommand('unlink');
+        break;
+      case 'image':
+        refs.rootDocument.current.execCommand('insertImage', undefined, argument);
+        break;
+      case 'html':
+        refs.rootDocument.current.execCommand('insertHTML', undefined, argument);
+        break;
+
+      // actions
+      case 'copy':
+        refs.rootDocument.current.execCommand('copy');
+        break;
+      case 'cut':
+        refs.rootDocument.current.execCommand('cut');
+        break;
+      case 'paste':
+        if (refs.rootDocument.current.queryCommandSupported('paste')) refs.rootDocument.current.execCommand('paste');else paste();
+        break;
+      case 'delete':
+        refs.rootDocument.current.execCommand('delete');
+        break;
+      case 'clear':
+        refs.rootDocument.current.execCommand('removeFormat');
+        break;
+      case 'select-all':
+        refs.rootDocument.current.execCommand('selectAll');
+        break;
+      case 'undo':
+        refs.rootDocument.current.execCommand('undo');
+        break;
+      case 'redo':
+        refs.rootDocument.current.execCommand('redo');
+        break;
+      default:
+        break;
+    }
+    const element = (_refs$textSelection$c = refs.textSelection.current) === null || _refs$textSelection$c === void 0 ? void 0 : _refs$textSelection$c.element;
+    if (element) {
+      let valueElement = element.innerHTML || '';
+      if (element.textContent === '') {
+        valueElement = '';
+        element.innerHTML = '';
+      }
+      if (valueElement) valueElement = (0, _utils.innerHTMLToText)(valueElement);
+    }
+    textQueryUpdate();
+  }, []);
+  const PaletteItem = _react.default.useCallback(propsItem => {
+    const {
+        color: color_
+      } = propsItem,
+      other_ = (0, _objectWithoutProperties2.default)(propsItem, _excluded2);
+    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((propsPalette, ref_) => {
+    const {
+        version: version_,
+        onUpdate: onUpdate_,
+        onClose
+      } = propsPalette,
+      other_ = (0, _objectWithoutProperties2.default)(propsPalette, _excluded3);
+    const onUpdateColor = itemColor => {
+      if (refs.range.current) {
         const selection_ = refs.rootWindow.current.getSelection();
-        if (!selection_)
-            return;
-        if (!selection_.anchorNode || !refs.root.current.contains(selection_.anchorNode))
-            return setTextSelection(null);
-        setTimeout(() => {
-            var _a;
-            const rect = selection_.getRangeAt(0).getBoundingClientRect();
-            setTextSelection(Math.round(rect.width) ? { selection: rect, element: (_a = selection_.anchorNode) === null || _a === void 0 ? void 0 : _a.parentElement } : null);
-            textQueryUpdate();
-        }, 140);
-    }, []);
-    const onMouseDown = react_1.default.useCallback(() => {
-        if (!refs.edit.current)
-            return;
-        textQueryUpdate();
-    }, []);
-    const onKeyUp = react_1.default.useCallback(() => {
-        if (!refs.edit.current)
-            return;
-        textQueryUpdate();
-    }, []);
-    const textMethod = react_1.default.useCallback((command) => (argument) => {
-        var _a;
-        switch (command) {
-            // updates
-            case 'italic':
-                refs.rootDocument.current.execCommand('italic');
-                if (query('italic'))
-                    setTextSelected(values => [...values, 'italic']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'italic'));
-                break;
-            case 'underline':
-                refs.rootDocument.current.execCommand('underline');
-                if (query('underline'))
-                    setTextSelected(values => [...values, 'underline']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'underline'));
-                break;
-            case 'bold':
-                refs.rootDocument.current.execCommand('bold');
-                if (query('bold'))
-                    setTextSelected(values => [...values, 'bold']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'bold'));
-                break;
-            case 'strike-line':
-                refs.rootDocument.current.execCommand('strikeThrough');
-                if (query('strikeThrough'))
-                    setTextSelected(values => [...values, 'strike-line']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'strike-line'));
-                break;
-            case 'align-left':
-                refs.rootDocument.current.execCommand('justifyLeft');
-                if (query('justifyLeft'))
-                    setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-left']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'align-left'));
-                break;
-            case 'align-center':
-                refs.rootDocument.current.execCommand('justifyCenter');
-                if (query('justifyCenter'))
-                    setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-center']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'align-center'));
-                break;
-            case 'align-right':
-                refs.rootDocument.current.execCommand('justifyRight');
-                if (query('justifyRight'))
-                    setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-right']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'align-right'));
-                break;
-            case 'align-justify':
-                refs.rootDocument.current.execCommand('justifyFull');
-                if (query('justifyFull'))
-                    setTextSelected(values => [...values.filter(item => !item.includes('align')), 'align-justify']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'align-justify'));
-                break;
-            case 'superscript':
-                refs.rootDocument.current.execCommand('superscript');
-                if (query('superscript'))
-                    setTextSelected(values => [...values, 'superscript']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'superscript'));
-                break;
-            case 'subscript':
-                refs.rootDocument.current.execCommand('subscript');
-                if (query('subscript'))
-                    setTextSelected(values => [...values, 'subscript']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'subscript'));
-                break;
-            case 'indent':
-                refs.rootDocument.current.execCommand('indent');
-                break;
-            case 'outdent':
-                refs.rootDocument.current.execCommand('outdent');
-                break;
-            case 'font-version':
-                refs.rootDocument.current.execCommand('formatBlock', undefined, argument);
-                break;
-            case 'font-family':
-                refs.rootDocument.current.execCommand('styleWithCSS', true);
-                refs.rootDocument.current.execCommand('fontName', undefined, argument);
-                refs.rootDocument.current.execCommand('styleWithCSS', false);
-                break;
-            case 'font-size':
-                refs.rootDocument.current.execCommand('styleWithCSS', true);
-                refs.rootDocument.current.execCommand('fontSize', undefined, argument);
-                refs.rootDocument.current.execCommand('styleWithCSS', false);
-                break;
-            case 'font-color':
-                refs.rootDocument.current.execCommand('styleWithCSS', true);
-                refs.rootDocument.current.execCommand('foreColor', undefined, argument);
-                refs.rootDocument.current.execCommand('styleWithCSS', false);
-                break;
-            case 'font-background':
-                refs.rootDocument.current.execCommand('styleWithCSS', true);
-                refs.rootDocument.current.execCommand('backColor', undefined, argument);
-                refs.rootDocument.current.execCommand('styleWithCSS', false);
-                break;
-            case 'list-ordered':
-                refs.rootDocument.current.execCommand('insertOrderedList');
-                if (query('insertOrderedList'))
-                    setTextSelected(values => [...values.filter(item => !item.includes('list')), 'list-ordered']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'list-ordered'));
-                break;
-            case 'list-unordered':
-                refs.rootDocument.current.execCommand('insertUnorderedList');
-                if (query('insertUnorderedList'))
-                    setTextSelected(values => [...values.filter(item => !item.includes('list')), 'list-unordered']);
-                else
-                    setTextSelected(values => values.filter(item => item !== 'list-unordered'));
-                break;
-            case 'horizontal-rule':
-                refs.rootDocument.current.execCommand('insertHorizontalRule');
-                break;
-            case 'link-add':
-                refs.rootDocument.current.execCommand('createLink', undefined, argument);
-                break;
-            case 'link-remove':
-                refs.rootDocument.current.execCommand('unlink');
-                break;
-            case 'image':
-                refs.rootDocument.current.execCommand('insertImage', undefined, argument);
-                break;
-            case 'html':
-                refs.rootDocument.current.execCommand('insertHTML', undefined, argument);
-                break;
-            // actions
-            case 'copy':
-                refs.rootDocument.current.execCommand('copy');
-                break;
-            case 'cut':
-                refs.rootDocument.current.execCommand('cut');
-                break;
-            case 'paste':
-                if (refs.rootDocument.current.queryCommandSupported('paste'))
-                    refs.rootDocument.current.execCommand('paste');
-                else
-                    paste();
-                break;
-            case 'delete':
-                refs.rootDocument.current.execCommand('delete');
-                break;
-            case 'clear':
-                refs.rootDocument.current.execCommand('removeFormat');
-                break;
-            case 'select-all':
-                refs.rootDocument.current.execCommand('selectAll');
-                break;
-            case 'undo':
-                refs.rootDocument.current.execCommand('undo');
-                break;
-            case 'redo':
-                refs.rootDocument.current.execCommand('redo');
-                break;
-            default:
-                break;
+        selection_.removeAllRanges();
+        selection_.addRange(refs.range.current);
+      }
+      onUpdate_(itemColor);
+      onClose();
+    };
+    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      ref: ref_,
+      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, {
+      gap: 0.5,
+      style: {
+        maxHeight: 136,
+        padding: '10px 10px 0',
+        overflow: 'hidden auto'
+      }
+    }, /*#__PURE__*/_react.default.createElement(Line, {
+      gap: 0.5,
+      direction: "row",
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/_react.default.createElement(PaletteItem, {
+      color: "#000000",
+      onClick: () => {
+        onUpdateColor('#000000');
+      }
+    }), /*#__PURE__*/_react.default.createElement(PaletteItem, {
+      color: "#ffffff",
+      onClick: () => {
+        onUpdateColor('#ffffff');
+      }
+    })), Object.keys(_styleReact.colors).filter(item => !['black', 'white'].includes(item)).map((item, index) => /*#__PURE__*/_react.default.createElement(Line, {
+      key: index,
+      gap: 0.5,
+      direction: "row",
+      style: {
+        width: '100%'
+      }
+    }, Object.keys(_styleReact.colors[item]).map((item_, index_) => /*#__PURE__*/_react.default.createElement(PaletteItem, {
+      key: index_,
+      color: _styleReact.colors[item][item_],
+      onClick: () => {
+        onUpdateColor(_styleReact.colors[item][item_]);
+      }
+    }))))), /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(Line, {
+      gap: 0.5,
+      direction: "row",
+      align: "center",
+      fullWidth: true,
+      style: {
+        padding: '0px 10px 10px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(ColorTextField, (0, _extends2.default)({
+      tonal: tonal,
+      color: color,
+      name: l('Custom color'),
+      version: "outlined",
+      size: "small",
+      value: refs.inputValues.current[version_],
+      onChange: valueNew => updateInputValues(version_, valueNew)
+    }, ColorTextFieldProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('RichTextEditor', theme) && ['onesy-RichTextEditor-text-field-color'], ColorTextFieldProps === null || ColorTextFieldProps === void 0 ? void 0 : ColorTextFieldProps.className, classes.textFieldColor])
+    })), /*#__PURE__*/_react.default.createElement(Button, {
+      tonal: tonal,
+      color: "inherit",
+      version: "text",
+      size: "small",
+      onClick: () => {
+        if (refs.range.current) {
+          const selection_ = refs.rootWindow.current.getSelection();
+          selection_.removeAllRanges();
+          selection_.addRange(refs.range.current);
         }
-        const element = (_a = refs.textSelection.current) === null || _a === void 0 ? void 0 : _a.element;
-        if (element) {
-            let valueElement = element.innerHTML || '';
-            if (element.textContent === '') {
-                valueElement = '';
-                element.innerHTML = '';
-            }
-            if (valueElement)
-                valueElement = (0, utils_1.innerHTMLToText)(valueElement);
+        onUpdate_(refs.inputValues.current[version_]);
+        onClose();
+      }
+    }, "Apply")));
+  }), []);
+  const AppendProps = {
+    padding: [14, 14]
+  };
+  const IconProps = {
+    size: 'small'
+  };
+  const TooltipProps = {
+    position: 'bottom',
+    interactive: false
+  };
+  const ToggleButtonsProps = {
+    tonal: false,
+    color: 'default',
+    version: 'text',
+    border: false
+  };
+  const ToggleButtonProps = {
+    size: 'small'
+  };
+  const Input = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((propsInput, ref_) => {
+    const {
+        label: labelInput,
+        labelButton,
+        value: value__,
+        onChange: onChange__,
+        onClick,
+        placeholder: placeholderInputProps,
+        InputComponent = TextField,
+        InputProps
+      } = propsInput,
+      other_ = (0, _objectWithoutProperties2.default)(propsInput, _excluded4);
+    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      ref: ref_,
+      gap: 1,
+      direction: "column",
+      color: "themed",
+      Component: Surface
+    }, other_, {
+      className: (0, _styleReact.classNames)([other_ === null || other_ === void 0 ? void 0 : other_.className, classes.inputWrapper])
+    }), /*#__PURE__*/_react.default.createElement(Line, {
+      gap: 0.5,
+      direction: "row",
+      align: "center",
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/_react.default.createElement(InputComponent, (0, _extends2.default)({
+      name: labelInput,
+      version: "outlined",
+      size: "small",
+      valueDefault: value__,
+      onChange: onChange__,
+      placeholder: placeholderInputProps,
+      flex: true
+    }, InputProps, {
+      style: {
+        width: 'unset',
+        flex: '1 1 auto'
+      }
+    })), /*#__PURE__*/_react.default.createElement(Button, {
+      color: "inherit",
+      version: "text",
+      size: "small",
+      onClick: onClick
+    }, labelButton)));
+  }), []);
+  const WrapperAppend = _react.default.useCallback(propsWrapper => {
+    const {
+        open: open_,
+        element,
+        anchorElement,
+        onClose,
+        children: childrenWrapperAppend
+      } = propsWrapper,
+      other_ = (0, _objectWithoutProperties2.default)(propsWrapper, _excluded5);
+    return /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
+      open: open_,
+      element: /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-additional'], classes.textMiniMenuAdditionalMenu])
+      }, /*#__PURE__*/_react.default.createElement(Fade, {
+        in: open_,
+        add: true
+      }, /*#__PURE__*/_react.default.cloneElement(element))),
+      anchorElement: anchorElement,
+      portal: true,
+      alignment: "center",
+      position: "bottom"
+    }, AppendProps), /*#__PURE__*/_react.default.cloneElement(childrenWrapperAppend, _objectSpread(_objectSpread({}, other_), childrenWrapperAppend.props)));
+  }, []);
+  const WrapperToggleButton = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((propsWrapperToggleButton, ref_) => {
+    const {
+        open: open_,
+        name: nameWrapperToogleButton,
+        children: childrenWrapperToggleButton
+      } = propsWrapperToggleButton,
+      other_ = (0, _objectWithoutProperties2.default)(propsWrapperToggleButton, _excluded6);
+    return /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      open: open_ !== undefined ? open_ : undefined,
+      name: nameWrapperToogleButton
+    }, TooltipProps), /*#__PURE__*/_react.default.cloneElement(childrenWrapperToggleButton, _objectSpread(_objectSpread({}, other_), childrenWrapperToggleButton.props)));
+  }), []);
+  const updateElements = {
+    'italic': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Italic')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('italic'),
+      onClick: textMethod('italic')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatItalicW.default, IconProps))),
+    'underline': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Underline')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('underline'),
+      onClick: textMethod('underline')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatUnderlinedW.default, IconProps))),
+    'bold': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Bold'),
+      onClick: textMethod('bold')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('bold')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatBoldW.default, IconProps))),
+    'superscript': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Superscript'),
+      onClick: textMethod('superscript')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('superscript')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialSuperscriptW.default, IconProps))),
+    'subscript': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Subscript'),
+      onClick: textMethod('subscript')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('subscript')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialSubscriptW.default, IconProps))),
+    'strike-line': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Strike Line'),
+      onClick: textMethod('strike-line')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('strike-line')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialStrikethroughSW.default, IconProps))),
+    'link-add': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+      open: refs.open.current.linkMiniMenu,
+      anchorElement: refs.miniMenuElements.linkAdd,
+      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+        onClickOutside: () => updateOpen('linkMiniMenu', false),
+        include: [refs.miniMenuElements.linkAdd]
+      }, /*#__PURE__*/_react.default.createElement(Input, {
+        ref: refs.miniMenuElements.linkAddInput,
+        name: l('Link'),
+        labelButton: l('Add'),
+        value: refs.inputValues.current.link,
+        onChange: valueNew => updateInputValues('link', valueNew),
+        placeholder: l('URL'),
+        onClick: () => {
+          if (refs.range.current) {
+            const selection_ = refs.rootWindow.current.getSelection();
+            if (!selection_) return;
+            selection_.removeAllRanges();
+            selection_.addRange(refs.range.current);
+          }
+          textMethod('link-add')(refs.inputValues.current.link);
+          updateOpen('linkMiniMenu', false);
+          updateInputValues('link', '');
+        },
+        className: classes.input
+      }))
+    }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Insert Link'),
+      open: refs.open.current.linkMiniMenu ? false : undefined
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
+      ref: refs.miniMenuElements.linkAdd
+    }, ToggleButtonProps, {
+      selected: refs.open.current.linkMiniMenu,
+      onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu)
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialAddLinkW.default, IconProps)))),
+    'link-remove': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Remove Link')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      onClick: textMethod('link-remove')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialLinkOffW.default, IconProps))),
+    'font-color': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+      open: refs.open.current.color,
+      anchorElement: refs.elements.color.current,
+      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+        onClickOutside: () => updateOpen('color', false),
+        include: [refs.elements.color.current]
+      }, /*#__PURE__*/_react.default.createElement(Palette, {
+        version: "font-color",
+        onClose: () => updateOpen('color', false),
+        onUpdate: () => {
+          if (refs.range.current) {
+            const selection_ = refs.rootWindow.current.getSelection();
+            selection_.removeAllRanges();
+            selection_.addRange(refs.range.current);
+          }
+          textMethod('font-color');
         }
-        textQueryUpdate();
-    }, []);
-    const PaletteItem = react_1.default.useCallback((propsItem) => {
-        const { color: color_ } = propsItem, other_ = __rest(propsItem, ["color"]);
-        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('RichTextEditor', theme) && [
-                    'onesy-RichTextEditor-palette-item'
-                ],
-                classes.paletteItem
-            ]), style: {
-                background: color_
-            } }, other_)));
-    }, []);
-    const Palette = react_1.default.useCallback(react_1.default.forwardRef((propsPalette, ref_) => {
-        const { version: version_, onUpdate: onUpdate_, onClose } = propsPalette, other_ = __rest(propsPalette, ["version", "onUpdate", "onClose"]);
-        const onUpdateColor = itemColor => {
-            if (refs.range.current) {
-                const selection_ = refs.rootWindow.current.getSelection();
-                selection_.removeAllRanges();
-                selection_.addRange(refs.range.current);
-            }
-            onUpdate_(itemColor);
-            onClose();
-        };
-        return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref_, gap: 1, direction: 'column', tonal: tonal, color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed', Component: Surface, className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('RichTextEditor', theme) && [
-                    'onesy-RichTextEditor-palette'
-                ],
-                classes.palette
-            ]) }, other_, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, style: {
-                        maxHeight: 136,
-                        padding: '10px 10px 0',
-                        overflow: 'hidden auto'
-                    } }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', style: {
-                                width: '100%'
-                            } }, { children: [(0, jsx_runtime_1.jsx)(PaletteItem, { color: '#000000', onClick: () => {
-                                        onUpdateColor('#000000');
-                                    } }), (0, jsx_runtime_1.jsx)(PaletteItem, { color: '#ffffff', onClick: () => {
-                                        onUpdateColor('#ffffff');
-                                    } })] })), Object.keys(style_react_1.colors).filter(item => !['black', 'white'].includes(item)).map((item, index) => ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0.5, direction: 'row', style: {
-                                width: '100%'
-                            } }, { children: Object.keys(style_react_1.colors[item]).map((item_, index_) => ((0, jsx_runtime_1.jsx)(PaletteItem, { color: style_react_1.colors[item][item_], onClick: () => {
-                                    onUpdateColor(style_react_1.colors[item][item_]);
-                                } }, index_))) }), index)))] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', fullWidth: true, style: {
-                        padding: '0px 10px 10px'
-                    } }, { children: [(0, jsx_runtime_1.jsx)(ColorTextField, Object.assign({ tonal: tonal, color: color, name: l('Custom color'), version: 'outlined', size: 'small', value: refs.inputValues.current[version_], onChange: valueNew => updateInputValues(version_, valueNew) }, ColorTextFieldProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('RichTextEditor', theme) && [
-                                    'onesy-RichTextEditor-text-field-color'
-                                ],
-                                ColorTextFieldProps === null || ColorTextFieldProps === void 0 ? void 0 : ColorTextFieldProps.className,
-                                classes.textFieldColor
-                            ]) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: tonal, color: 'inherit', version: 'text', size: 'small', onClick: () => {
-                                if (refs.range.current) {
-                                    const selection_ = refs.rootWindow.current.getSelection();
-                                    selection_.removeAllRanges();
-                                    selection_.addRange(refs.range.current);
-                                }
-                                onUpdate_(refs.inputValues.current[version_]);
-                                onClose();
-                            } }, { children: "Apply" }))] }))] })));
-    }), []);
-    const AppendProps = {
-        padding: [14, 14]
-    };
-    const IconProps = {
-        size: 'small'
-    };
-    const TooltipProps = {
-        position: 'bottom',
-        interactive: false
-    };
-    const ToggleButtonsProps = {
-        tonal: false,
-        color: 'default',
-        version: 'text',
-        border: false
-    };
-    const ToggleButtonProps = {
-        size: 'small'
-    };
-    const Input = react_1.default.useCallback(react_1.default.forwardRef((propsInput, ref_) => {
-        const { label: labelInput, labelButton, value: value__, onChange: onChange__, onClick, placeholder: placeholderInputProps, InputComponent = TextField, InputProps } = propsInput, other_ = __rest(propsInput, ["label", "labelButton", "value", "onChange", "onClick", "placeholder", "InputComponent", "InputProps"]);
-        return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: ref_, gap: 1, direction: 'column', color: 'themed', Component: Surface }, other_, { className: (0, style_react_1.classNames)([
-                other_ === null || other_ === void 0 ? void 0 : other_.className,
-                classes.inputWrapper
-            ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
-                    width: '100%'
-                } }, { children: [(0, jsx_runtime_1.jsx)(InputComponent, Object.assign({ name: labelInput, version: 'outlined', size: 'small', valueDefault: value__, onChange: onChange__, placeholder: placeholderInputProps, flex: true }, InputProps, { style: {
-                            width: 'unset',
-                            flex: '1 1 auto'
-                        } })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'inherit', version: 'text', size: 'small', onClick: onClick }, { children: labelButton }))] })) })));
-    }), []);
-    const WrapperAppend = react_1.default.useCallback((propsWrapper) => {
-        const { open: open_, element, anchorElement, onClose, children: childrenWrapperAppend } = propsWrapper, other_ = __rest(propsWrapper, ["open", "element", "anchorElement", "onClose", "children"]);
-        return ((0, jsx_runtime_1.jsx)(Append, Object.assign({ open: open_, element: ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('SmartTextField', theme) && [
-                        'onesy-SmartTextField-mini-menu-additional'
-                    ],
-                    classes.textMiniMenuAdditionalMenu
-                ]) }, { children: (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open_, add: true }, { children: react_1.default.cloneElement(element) })) }))), anchorElement: anchorElement, portal: true, alignment: 'center', position: 'bottom' }, AppendProps, { children: react_1.default.cloneElement(childrenWrapperAppend, Object.assign(Object.assign({}, other_), childrenWrapperAppend.props)) })));
-    }, []);
-    const WrapperToggleButton = react_1.default.useCallback(react_1.default.forwardRef((propsWrapperToggleButton, ref_) => {
-        const { open: open_, name: nameWrapperToogleButton, children: childrenWrapperToggleButton } = propsWrapperToggleButton, other_ = __rest(propsWrapperToggleButton, ["open", "name", "children"]);
-        return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ open: open_ !== undefined ? open_ : undefined, name: nameWrapperToogleButton }, TooltipProps, { children: react_1.default.cloneElement(childrenWrapperToggleButton, Object.assign(Object.assign({}, other_), childrenWrapperToggleButton.props)) })));
-    }), []);
-    const updateElements = {
-        'italic': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Italic') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('italic'), onClick: textMethod('italic') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatItalicW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'underline': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Underline') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('underline'), onClick: textMethod('underline') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatUnderlinedW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'bold': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Bold'), onClick: textMethod('bold') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('bold') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatBoldW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'superscript': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Superscript'), onClick: textMethod('superscript') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('superscript') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialSuperscriptW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'subscript': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Subscript'), onClick: textMethod('subscript') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('subscript') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialSubscriptW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'strike-line': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Strike Line'), onClick: textMethod('strike-line') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('strike-line') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialStrikethroughSW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'link-add': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.linkMiniMenu, anchorElement: refs.miniMenuElements.linkAdd, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('linkMiniMenu', false), include: [refs.miniMenuElements.linkAdd] }, { children: (0, jsx_runtime_1.jsx)(Input, { ref: refs.miniMenuElements.linkAddInput, name: l('Link'), labelButton: l('Add'), value: refs.inputValues.current.link, onChange: (valueNew) => updateInputValues('link', valueNew), placeholder: l('URL'), onClick: () => {
-                        if (refs.range.current) {
-                            const selection_ = refs.rootWindow.current.getSelection();
-                            if (!selection_)
-                                return;
-                            selection_.removeAllRanges();
-                            selection_.addRange(refs.range.current);
-                        }
-                        textMethod('link-add')(refs.inputValues.current.link);
-                        updateOpen('linkMiniMenu', false);
-                        updateInputValues('link', '');
-                    }, className: classes.input }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Insert Link'), open: refs.open.current.linkMiniMenu ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.linkAdd }, ToggleButtonProps, { selected: refs.open.current.linkMiniMenu, onClick: () => updateOpen('linkMiniMenu', !refs.open.current.linkMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialAddLinkW100_1.default, Object.assign({}, IconProps)) })) })) }))),
-        'link-remove': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Remove Link') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: textMethod('link-remove') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialLinkOffW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'font-color': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.color, anchorElement: refs.elements.color.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('color', false), include: [refs.elements.color.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, { version: 'font-color', onClose: () => updateOpen('color', false), onUpdate: () => {
-                        if (refs.range.current) {
-                            const selection_ = refs.rootWindow.current.getSelection();
-                            selection_.removeAllRanges();
-                            selection_.addRange(refs.range.current);
-                        }
-                        textMethod('font-color');
-                    } }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Text Color'), open: refs.open.current.color ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.color }, ToggleButtonProps, { selected: refs.open.current.color, onClick: () => updateOpen('color', !refs.open.current.color) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatColorTextW100_1.default, Object.assign({}, IconProps)) })) })) }))),
-        'font-color-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.colorMiniMenu, anchorElement: refs.miniMenuElements.color, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('colorMiniMenu', false), include: [refs.miniMenuElements.color] }, { children: (0, jsx_runtime_1.jsx)(Palette, { ref: refs.miniMenuElements.colorPalette, version: 'font-color', onClose: () => updateOpen('colorMiniMenu', false), onUpdate: textMethod('font-color') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Text Color'), open: refs.open.current.colorMiniMenu ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.color }, ToggleButtonProps, { selected: refs.open.current.colorMiniMenu, onClick: () => updateOpen('colorMiniMenu', !refs.open.current.colorMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatColorTextW100_1.default, Object.assign({}, IconProps)) })) })) }))),
-        'font-background': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.background, anchorElement: refs.elements.background.current, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('background', false), include: [refs.elements.background.current] }, { children: (0, jsx_runtime_1.jsx)(Palette, { version: 'font-background', onClose: () => updateOpen('background', false), onUpdate: textMethod('font-background') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Background Color'), open: refs.open.current.background ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.elements.background }, ToggleButtonProps, { selected: refs.open.current.background, onClick: () => updateOpen('background', !refs.open.current.background) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatColorFillW100_1.default, Object.assign({}, IconProps)) })) })) }))),
-        'font-background-mini-menu': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.backgroundMiniMenu, anchorElement: refs.miniMenuElements.background, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('backgroundMiniMenu', false), include: [refs.miniMenuElements.background] }, { children: (0, jsx_runtime_1.jsx)(Palette, { ref: refs.miniMenuElements.backgroundPalette, version: 'font-background', onClose: () => updateOpen('backgroundMiniMenu', false), onUpdate: textMethod('font-background') }) }))) }, { children: (0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Text Color'), open: refs.open.current.backgroundMiniMenu ? false : undefined }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({ ref: refs.miniMenuElements.background }, ToggleButtonProps, { selected: refs.open.current.backgroundMiniMenu, onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatColorFillW100_1.default, Object.assign({}, IconProps)) })) })) }))),
-        'align-left': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Left') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('align-left'), onClick: textMethod('align-left') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatAlignLeftW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'align-center': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Center') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('align-center'), onClick: textMethod('align-center') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatAlignCenterW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'align-right': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Right') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('align-right'), onClick: textMethod('align-right') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatAlignRightW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'align-justify': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Align Justify') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('align-justify'), onClick: textMethod('align-justify') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatAlignJustifyW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'list-ordered': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('List Ordered') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('list-ordered'), onClick: textMethod('list-ordered') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatListNumberedW100_1.default, Object.assign({}, IconProps)) })) }))),
-        'list-unordered': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('List Unordered') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('list-unordered'), onClick: textMethod('list-unordered') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatListBulletedW100_1.default, Object.assign({}, IconProps)) })) })))
-    };
-    const actionElements = {
-        'clear': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Clear') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { onClick: textMethod('clear') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatClearW100_1.default, Object.assign({}, IconProps)) })) })))
-    };
-    const miniMenu = react_1.default.useMemo(() => {
-        return ((0, jsx_runtime_1.jsx)(Append, Object.assign({ open: !!textSelection, element: (body) => {
-                const { ref: ref_, values, style: styleAppend } = body;
-                return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: item => {
-                        if (ref_) {
-                            if ((0, utils_1.is)('function', ref_))
-                                ref_(item);
-                            else
-                                ref_.current = item;
-                            refs.miniMenu.current = item;
-                        }
-                    }, style: Object.assign(Object.assign(Object.assign({}, (((values === null || values === void 0 ? void 0 : values.x) === 0 && (values === null || values === void 0 ? void 0 : values.y) === 0) ? {
-                        visibility: 'hidden'
-                    } : undefined)), styleAppend), { zIndex: 1500 }), className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('SmartTextField', theme) && [
-                            'onesy-SmartTextField-mini-menu-wrapper'
-                        ],
-                        classes.textMiniMenuWrapper
-                    ]) }, { children: (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !!textSelection, add: true }, { children: (0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => {
-                                setTextSelection(null);
-                            }, include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.colorPalette, refs.miniMenuElements.colorPalette.current, refs.miniMenuElements.backgroundPalette, refs.miniMenuElements.backgroundPalette.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', wrap: 'wrap', role: 'toolbar', color: 'themed', "aria-label": l('Mini menu'), Component: Surface, className: (0, style_react_1.classNames)([
-                                    classes.textMiniMenu
-                                ]) }, { children: [(0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']] })), miniMenuExtended && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']] }))), miniMenuExtended && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']] }))), miniMenuExtended && ((0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['list-ordered'], updateElements['list-unordered']] }))), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['superscript'], updateElements['subscript']] })), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['link-add'], updateElements['link-remove']] })), (0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: actionElements['clear'] }))] })) })) })) })));
-            }, parent: refs.root.current, anchor: textSelection === null || textSelection === void 0 ? void 0 : textSelection.selection, portal: true, alignment: 'center', position: 'bottom', clearOnClose: true }, AppendProps)));
-    }, [open, textSelection, textSelected]);
-    const menu = react_1.default.useMemo(() => {
-        return ((0, jsx_runtime_1.jsx)(Menu, { open: openMenu, position: 'top', alignment: 'start', offset: offset, anchor: selectionMenu, onClose: onCloseSearch, label: label(), interactive: true }));
-    }, [openMenu, optionsMention, selectionMenu, label]);
-    let main = ((0, jsx_runtime_1.jsx)(TextField, Object.assign({ ref: (item) => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
+      }))
+    }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Text Color'),
+      open: refs.open.current.color ? false : undefined
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
+      ref: refs.elements.color
+    }, ToggleButtonProps, {
+      selected: refs.open.current.color,
+      onClick: () => updateOpen('color', !refs.open.current.color)
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatColorTextW.default, IconProps)))),
+    'font-color-mini-menu': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+      open: refs.open.current.colorMiniMenu,
+      anchorElement: refs.miniMenuElements.color,
+      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+        onClickOutside: () => updateOpen('colorMiniMenu', false),
+        include: [refs.miniMenuElements.color]
+      }, /*#__PURE__*/_react.default.createElement(Palette, {
+        ref: refs.miniMenuElements.colorPalette,
+        version: "font-color",
+        onClose: () => updateOpen('colorMiniMenu', false),
+        onUpdate: textMethod('font-color')
+      }))
+    }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Text Color'),
+      open: refs.open.current.colorMiniMenu ? false : undefined
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
+      ref: refs.miniMenuElements.color
+    }, ToggleButtonProps, {
+      selected: refs.open.current.colorMiniMenu,
+      onClick: () => updateOpen('colorMiniMenu', !refs.open.current.colorMiniMenu)
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatColorTextW.default, IconProps)))),
+    'font-background': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+      open: refs.open.current.background,
+      anchorElement: refs.elements.background.current,
+      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+        onClickOutside: () => updateOpen('background', false),
+        include: [refs.elements.background.current]
+      }, /*#__PURE__*/_react.default.createElement(Palette, {
+        version: "font-background",
+        onClose: () => updateOpen('background', false),
+        onUpdate: textMethod('font-background')
+      }))
+    }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Background Color'),
+      open: refs.open.current.background ? false : undefined
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
+      ref: refs.elements.background
+    }, ToggleButtonProps, {
+      selected: refs.open.current.background,
+      onClick: () => updateOpen('background', !refs.open.current.background)
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatColorFillW.default, IconProps)))),
+    'font-background-mini-menu': /*#__PURE__*/_react.default.createElement(WrapperAppend, {
+      open: refs.open.current.backgroundMiniMenu,
+      anchorElement: refs.miniMenuElements.background,
+      element: /*#__PURE__*/_react.default.createElement(ClickListener, {
+        onClickOutside: () => updateOpen('backgroundMiniMenu', false),
+        include: [refs.miniMenuElements.background]
+      }, /*#__PURE__*/_react.default.createElement(Palette, {
+        ref: refs.miniMenuElements.backgroundPalette,
+        version: "font-background",
+        onClose: () => updateOpen('backgroundMiniMenu', false),
+        onUpdate: textMethod('font-background')
+      }))
+    }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Text Color'),
+      open: refs.open.current.backgroundMiniMenu ? false : undefined
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
+      ref: refs.miniMenuElements.background
+    }, ToggleButtonProps, {
+      selected: refs.open.current.backgroundMiniMenu,
+      onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu)
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatColorFillW.default, IconProps)))),
+    'align-left': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Align Left')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('align-left'),
+      onClick: textMethod('align-left')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatAlignLeftW.default, IconProps))),
+    'align-center': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Align Center')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('align-center'),
+      onClick: textMethod('align-center')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatAlignCenterW.default, IconProps))),
+    'align-right': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Align Right')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('align-right'),
+      onClick: textMethod('align-right')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatAlignRightW.default, IconProps))),
+    'align-justify': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Align Justify')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('align-justify'),
+      onClick: textMethod('align-justify')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatAlignJustifyW.default, IconProps))),
+    'list-ordered': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('List Ordered')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('list-ordered'),
+      onClick: textMethod('list-ordered')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatListNumberedW.default, IconProps))),
+    'list-unordered': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('List Unordered')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('list-unordered'),
+      onClick: textMethod('list-unordered')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatListBulletedW.default, IconProps)))
+  };
+  const actionElements = {
+    'clear': /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
+      name: l('Clear')
+    }, /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({}, ToggleButtonProps, {
+      onClick: textMethod('clear')
+    }), /*#__PURE__*/_react.default.createElement(_IconMaterialFormatClearW.default, IconProps)))
+  };
+  const miniMenu = _react.default.useMemo(() => {
+    return /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
+      open: !!textSelection,
+      element: body => {
+        const {
+          ref: ref_,
+          values,
+          style: styleAppend
+        } = body;
+        return /*#__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;
             }
-            refs.root.current = item;
-        }, color: color, tonal: tonal, version: 'text', size: size, minRows: 12, multiline: true, enabled: true, fullWidth: true, onInput: onInput, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly, inputProps: Object.assign(Object.assign({ version: 'b2', contentEditable: true, spellCheck: false, onPaste: pasteText ? onPasteText : onPaste, onDrop,
-            onMouseUp,
-            onMouseDown, 'data-placeholder': placeholder !== undefined ? placeholder : name }, inputProps), { ref: (item) => {
-                refs.input.current = item;
-                if (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref) {
-                    if ((0, utils_1.is)('function', inputProps.ref))
-                        inputProps.ref(item);
-                    else
-                        inputProps.ref.current = item;
-                }
-            } }), InputComponent: Type, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('SmartTextField', theme) && [
-                'onesy-SmartTextField-root',
-                `onesy-SmartTextField-version-${version}`,
-                `onesy-SmartTextField-size-${size}`
-            ],
-            className,
-            classes.root
-        ]) }, additional, other)));
-    if (version === 'text')
-        main = ((0, jsx_runtime_1.jsx)(Type, Object.assign({ ref: (item) => {
-                if (ref) {
-                    if ((0, utils_1.is)('function', ref))
-                        ref(item);
-                    else
-                        ref.current = item;
-                }
-                if (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref) {
-                    if ((0, utils_1.is)('function', inputProps.ref))
-                        inputProps.ref(item);
-                    else
-                        inputProps.ref.current = item;
-                }
-                refs.root.current = item;
-                refs.input.current = item;
-            }, color: color, tonal: tonal, onInput: onInput, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onPaste: pasteText ? onPasteText : onPaste, onDrop: onDrop, onMouseUp: onMouseUp, onMouseDown: onMouseDown, spellCheck: false, "data-placeholder": placeholder !== undefined ? placeholder : name }, inputProps, { contentEditable: !readOnly, className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('SmartTextField', theme) && [
-                    'onesy-SmartTextField-root',
-                    `onesy-SmartTextField-version-${version}`,
-                    `onesy-SmartTextField-size-${size}`
-                ],
-                className,
-                classes.root_type,
-                !multiline && classes.singleLine
-            ]) }, additional, other)));
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [main, version === 'text' && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: helperText && (0, utils_1.is)('string', helperText) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3' }, HelperTextProps, { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('SmartTextField', theme) && [
-                            'onesy-SmartTextField-helper-text',
-                            error && 'onesy-SmartTextField-error'
-                        ],
-                        HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className,
-                        classes.helperText,
-                        error && classes.error_color
-                    ]) }, { children: (0, utils_1.textToInnerHTML)(helperText) }))) : helperText }), miniMenu, menu] });
+          },
+          style: _objectSpread(_objectSpread(_objectSpread({}, (values === null || values === void 0 ? void 0 : values.x) === 0 && (values === null || values === void 0 ? void 0 : values.y) === 0 ? {
+            visibility: 'hidden'
+          } : undefined), styleAppend), {}, {
+            zIndex: 1500
+          }),
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-mini-menu-wrapper'], classes.textMiniMenuWrapper])
+        }, /*#__PURE__*/_react.default.createElement(Fade, {
+          in: !!textSelection,
+          add: true
+        }, /*#__PURE__*/_react.default.createElement(ClickListener, {
+          onClickOutside: () => {
+            setTextSelection(null);
+          },
+          include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.colorPalette, refs.miniMenuElements.colorPalette.current, refs.miniMenuElements.backgroundPalette, refs.miniMenuElements.backgroundPalette.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current]
+        }, /*#__PURE__*/_react.default.createElement(Line, {
+          gap: 2,
+          direction: "row",
+          align: "center",
+          justify: "flex-start",
+          wrap: "wrap",
+          role: "toolbar",
+          color: "themed",
+          "aria-label": l('Mini menu'),
+          Component: Surface,
+          className: (0, _styleReact.classNames)([classes.textMiniMenu])
+        }, /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), miniMenuExtended && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']), miniMenuExtended && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']), miniMenuExtended && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['list-ordered'], updateElements['list-unordered']), /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['superscript'], updateElements['subscript']), /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));
+      },
+      parent: refs.root.current,
+      anchor: textSelection === null || textSelection === void 0 ? void 0 : textSelection.selection,
+      portal: true,
+      alignment: "center",
+      position: "bottom",
+      clearOnClose: true
+    }, AppendProps));
+  }, [open, textSelection, textSelected]);
+  const menu = _react.default.useMemo(() => {
+    return /*#__PURE__*/_react.default.createElement(Menu, {
+      open: openMenu,
+      position: "top",
+      alignment: "start",
+      offset: offset,
+      anchor: selectionMenu,
+      onClose: onCloseSearch,
+      label: label(),
+      interactive: true
+    });
+  }, [openMenu, optionsMention, selectionMenu, label]);
+  let main = /*#__PURE__*/_react.default.createElement(TextField, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    color: color,
+    tonal: tonal,
+    version: "text",
+    size: size,
+    minRows: 12,
+    multiline: true,
+    enabled: true,
+    fullWidth: true,
+    onInput: onInput,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    readOnly: readOnly,
+    inputProps: _objectSpread(_objectSpread({
+      version: 'b2',
+      contentEditable: true,
+      spellCheck: false,
+      onPaste: pasteText ? onPasteText : onPaste,
+      onDrop,
+      onMouseUp,
+      onMouseDown,
+      'data-placeholder': placeholder !== undefined ? placeholder : name
+    }, inputProps), {}, {
+      ref: item => {
+        refs.input.current = item;
+        if (inputProps !== null && inputProps !== void 0 && inputProps.ref) {
+          if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
+        }
+      }
+    }),
+    InputComponent: Type,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-root', `onesy-SmartTextField-version-${version}`, `onesy-SmartTextField-size-${size}`], className, classes.root])
+  }, additional, other));
+  if (version === 'text') main = /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      if (inputProps !== null && inputProps !== void 0 && inputProps.ref) {
+        if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
+      }
+      refs.root.current = item;
+      refs.input.current = item;
+    },
+    color: color,
+    tonal: tonal,
+    onInput: onInput,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onPaste: pasteText ? onPasteText : onPaste,
+    onDrop: onDrop,
+    onMouseUp: onMouseUp,
+    onMouseDown: onMouseDown,
+    spellCheck: false,
+    "data-placeholder": placeholder !== undefined ? placeholder : name
+  }, inputProps, {
+    contentEditable: !readOnly,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-root', `onesy-SmartTextField-version-${version}`, `onesy-SmartTextField-size-${size}`], className, classes.root_type, !multiline && classes.singleLine])
+  }, additional, other));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, main, version === 'text' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, helperText && (0, _utils.is)('string', helperText) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+  }, HelperTextProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SmartTextField', theme) && ['onesy-SmartTextField-helper-text', error && 'onesy-SmartTextField-error'], HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className, classes.helperText, error && classes.error_color])
+  }), (0, _utils.textToInnerHTML)(helperText)) : helperText), miniMenu, menu);
 });
 SmartTextField.displayName = 'onesy-SmartTextField';
-exports.default = SmartTextField;
+var _default = exports.default = SmartTextField;