@onesy/ui-react 1.0.96 → 1.0.97

package/SmartTextField/SmartTextField.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ITextField } from '../TextField/TextField';
+import { IPropsAny } from '../types';
 export declare type ISmartTextField = ITextField & {
     placeholder?: any;
     edit?: boolean;
@@ -11,8 +12,10 @@ export declare type ISmartTextField = ITextField & {
         addTag?: (value: any) => any;
     }) => any;
     additional?: any;
+    miniMenuExtended?: boolean;
     pasteText?: boolean;
     HelperTextProps?: any;
+    ColorTextFieldProps?: IPropsAny;
 };
 declare const SmartTextField: React.FC<ISmartTextField>;
 export default SmartTextField;

package/SmartTextField/SmartTextField.js

@@ -18,6 +18,12 @@ 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 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"));
@@ -27,6 +33,7 @@ const IconMaterialFormatBoldW100_1 = __importDefault(require("@onesy/icons-mater
 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"));
@@ -42,6 +49,7 @@ 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: {
@@ -124,7 +132,9 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
     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 { 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, HelperTextProps, className } = props, other = __rest(props, ["version", "size", "valueDefault", "value", "inputProps", "onChange", "error", "name", "placeholder", "edit", "mention", "multiline", "onChangeMention", "optionsMention", "error", "helperText", "mentionLabel", "onKeyDown", "pasteText", "readOnly", "additional", "HelperTextProps", "className"]);
+    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);
@@ -161,6 +171,23 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
             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),
@@ -168,7 +195,8 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
         edit: react_1.default.useRef(edit),
         multiline: react_1.default.useRef(multiline),
         readOnly: react_1.default.useRef(readOnly),
-        onChange: react_1.default.useRef(onChange)
+        onChange: react_1.default.useRef(onChange),
+        props: react_1.default.useRef(props)
     };
     refs.value.current = value;
     refs.version.current = version;
@@ -183,6 +211,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
     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;
@@ -560,30 +589,58 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
             case 'italic':
                 refs.rootDocument.current.execCommand('italic');
                 if (query('italic'))
-                    setTextSelected((values) => [...values, 'italic']);
+                    setTextSelected(values => [...values, 'italic']);
                 else
-                    setTextSelected((values) => values.filter((item) => item !== 'italic'));
+                    setTextSelected(values => values.filter(item => item !== 'italic'));
                 break;
             case 'underline':
                 refs.rootDocument.current.execCommand('underline');
                 if (query('underline'))
-                    setTextSelected((values) => [...values, 'underline']);
+                    setTextSelected(values => [...values, 'underline']);
                 else
-                    setTextSelected((values) => values.filter((item) => item !== 'underline'));
+                    setTextSelected(values => values.filter(item => item !== 'underline'));
                 break;
             case 'bold':
                 refs.rootDocument.current.execCommand('bold');
                 if (query('bold'))
-                    setTextSelected((values) => [...values, 'bold']);
+                    setTextSelected(values => [...values, 'bold']);
                 else
-                    setTextSelected((values) => values.filter((item) => item !== 'bold'));
+                    setTextSelected(values => values.filter(item => item !== 'bold'));
                 break;
             case 'strike-line':
                 refs.rootDocument.current.execCommand('strikeThrough');
                 if (query('strikeThrough'))
-                    setTextSelected((values) => [...values, 'strike-line']);
+                    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 !== 'strike-line'));
+                    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');
@@ -599,12 +656,64 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                 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');
@@ -648,6 +757,60 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
         }
         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"]);
+        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, onMouseUp: onMouseUp, onMouseDown: onMouseDown }, { 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: () => {
+                                        onUpdate_('#000000');
+                                        onClose();
+                                    } }), (0, jsx_runtime_1.jsx)(PaletteItem, { color: '#ffffff', onClick: () => {
+                                        onUpdate_('#ffffff');
+                                        onClose();
+                                    } })] })), 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: () => {
+                                    if (refs.range.current) {
+                                        const selection_ = refs.rootWindow.current.getSelection();
+                                        selection_.removeAllRanges();
+                                        selection_.addRange(refs.range.current);
+                                    }
+                                    onUpdate_(style_react_1.colors[item][item_]);
+                                    onClose();
+                                } }, index_))) }), index)))] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
+                        width: '100%'
+                    } }, { 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]
     };
@@ -699,7 +862,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
         '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), onClick: () => {
+        '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_)
@@ -711,7 +874,15 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                         updateOpen('linkMiniMenu', false);
                         updateInputValues('link', '');
                     }, className: classes.inputLink }) }))) }, { 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)) })) })))
+        '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: 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)) })) })))
     };
     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)) })) })))
@@ -738,7 +909,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                                 setTextSelection(null);
                             }, include: [refs.miniMenu, refs.miniMenu.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', 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']] })), (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'] }))] })) })) })) })));
+                                ]) }, { 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['font-color-mini-menu'], updateElements['font-background-mini-menu']] }))), 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['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(() => {
@@ -752,7 +923,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                     ref.current = item;
             }
             refs.root.current = item;
-        }, 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,
+        }, 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;
@@ -787,7 +958,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                 }
                 refs.root.current = item;
                 refs.input.current = item;
-            }, 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)([
+            }, 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}`,

package/esm/SmartTextField/SmartTextField.js

@@ -1,15 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["version", "size", "valueDefault", "value", "inputProps", "onChange", "error", "name", "placeholder", "edit", "mention", "multiline", "onChangeMention", "optionsMention", "error", "helperText", "mentionLabel", "onKeyDown", "pasteText", "readOnly", "additional", "HelperTextProps", "className"],
-  _excluded2 = ["label", "labelButton", "value", "onChange", "onClick", "InputComponent", "InputProps"],
-  _excluded3 = ["open", "element", "anchorElement", "onClose", "children"],
-  _excluded4 = ["open", "name", "children"];
+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", "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) { _defineProperty(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; }
 import React from 'react';
 import { hash, innerHTMLToText, is, isEnvironment, parse, stringToColor, textToInnerHTML } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import { classNames, colors, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialFormatAlignLeft from '@onesy/icons-material-rounded-react/IconMaterialFormatAlignLeftW100';
+import IconMaterialFormatAlignCenter from '@onesy/icons-material-rounded-react/IconMaterialFormatAlignCenterW100';
+import IconMaterialFormatAlignRight from '@onesy/icons-material-rounded-react/IconMaterialFormatAlignRightW100';
+import IconMaterialFormatAlignJustify from '@onesy/icons-material-rounded-react/IconMaterialFormatAlignJustifyW100';
+import IconMaterialFormatColorText from '@onesy/icons-material-rounded-react/IconMaterialFormatColorTextW100';
+import IconMaterialFormatColorFill from '@onesy/icons-material-rounded-react/IconMaterialFormatColorFillW100';
 import IconMaterialSuperscript from '@onesy/icons-material-rounded-react/IconMaterialSuperscriptW100';
 import IconMaterialSubscript from '@onesy/icons-material-rounded-react/IconMaterialSubscriptW100';
 import IconMaterialFormatItalic from '@onesy/icons-material-rounded-react/IconMaterialFormatItalicW100';
@@ -19,6 +27,7 @@ import IconMaterialFormatBold from '@onesy/icons-material-rounded-react/IconMate
 import IconMaterialAddLink from '@onesy/icons-material-rounded-react/IconMaterialAddLinkW100';
 import IconMaterialLinkOff from '@onesy/icons-material-rounded-react/IconMaterialLinkOffW100';
 import IconMaterialFormatClear from '@onesy/icons-material-rounded-react/IconMaterialFormatClearW100';
+import ColorTextFieldElement from '../ColorTextField';
 import TextFieldElement from '../TextField/TextField';
 import LineElement from '../Line';
 import ListElement from '../List';
@@ -34,6 +43,7 @@ import ToggleButtonElement from '../ToggleButton';
 import ClickListenerElement from '../ClickListener';
 import ToggleButtonsElement from '../ToggleButtons';
 import MenuElement from '../Menu';
+import DividerElement from '../Divider';
 import { sanitize, caret, keyboardStyleCommands, staticClassName } from '../utils';
 const useStyle = styleMethod(theme => ({
   root: {
@@ -123,7 +133,11 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const ClickListener = React.useMemo(() => theme?.elements?.ClickListener || ClickListenerElement, [theme]);
   const ToggleButtons = React.useMemo(() => theme?.elements?.ToggleButtons || ToggleButtonsElement, [theme]);
   const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
+  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
+  const ColorTextField = React.useMemo(() => theme?.elements?.ColorTextField || ColorTextFieldElement, [theme]);
   const {
+      tonal = true,
+      color = 'default',
       version = 'text',
       size = 'regular',
       valueDefault,
@@ -145,7 +159,9 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       pasteText = true,
       readOnly,
       additional,
+      miniMenuExtended,
       HelperTextProps,
+      ColorTextFieldProps,
       className
     } = props,
     other = _objectWithoutProperties(props, _excluded);
@@ -187,6 +203,23 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       linkAddInput: React.useRef(null),
       linkRemove: React.useRef(null)
     },
+    elements: {
+      color: React.useRef(null),
+      background: React.useRef(null),
+      linkAdd: React.useRef(null),
+      linkRemove: React.useRef(null),
+      quote: React.useRef(null),
+      image: React.useRef(null),
+      video: React.useRef(null),
+      videoYoutube: React.useRef(null),
+      table: React.useRef(null),
+      drawing: React.useRef(null),
+      drawingSvg: React.useRef(null),
+      drawingSize: React.useRef(null),
+      drawingSelect: React.useRef(null),
+      drawingPalette: React.useRef(null),
+      code: React.useRef(null)
+    },
     textSelected: React.useRef(null),
     textSelection: React.useRef(null),
     rootDocument: React.useRef(null),
@@ -194,7 +227,8 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     edit: React.useRef(edit),
     multiline: React.useRef(multiline),
     readOnly: React.useRef(readOnly),
-    onChange: React.useRef(onChange)
+    onChange: React.useRef(onChange),
+    props: React.useRef(props)
   };
   refs.value.current = value;
   refs.version.current = version;
@@ -209,6 +243,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.multiline.current = multiline;
   refs.readOnly.current = readOnly;
   refs.onChange.current = onChange;
+  refs.props.current = props;
   const rootDocument = isEnvironment('browser') && (refs.root.current?.ownerDocument || window.document);
   const rootWindow = rootDocument && (rootDocument.defaultView || window);
   refs.rootDocument.current = rootDocument;
@@ -608,6 +643,22 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         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'));
@@ -616,12 +667,58 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         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':
@@ -662,6 +759,107 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     textQueryUpdate();
   }, []);
+  const PaletteItem = React.useCallback(propsItem => {
+    const {
+        color: color_
+      } = propsItem,
+      other_ = _objectWithoutProperties(propsItem, _excluded2);
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-palette-item'], classes.paletteItem]),
+      style: {
+        background: color_
+      }
+    }, other_));
+  }, []);
+  const Palette = React.useCallback(/*#__PURE__*/React.forwardRef((propsPalette, ref_) => {
+    const {
+        version: version_,
+        onUpdate: onUpdate_,
+        onClose
+      } = propsPalette,
+      other_ = _objectWithoutProperties(propsPalette, _excluded3);
+    return /*#__PURE__*/React.createElement(Line, _extends({
+      ref: ref_,
+      gap: 1,
+      direction: "column",
+      tonal: tonal,
+      color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
+      Component: Surface,
+      className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-palette'], classes.palette])
+    }, other_), /*#__PURE__*/React.createElement(Line, {
+      gap: 0.5,
+      onMouseUp: onMouseUp,
+      onMouseDown: onMouseDown
+    }, /*#__PURE__*/React.createElement(Line, {
+      gap: 0.5,
+      direction: "row",
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(PaletteItem, {
+      color: "#000000",
+      onClick: () => {
+        onUpdate_('#000000');
+        onClose();
+      }
+    }), /*#__PURE__*/React.createElement(PaletteItem, {
+      color: "#ffffff",
+      onClick: () => {
+        onUpdate_('#ffffff');
+        onClose();
+      }
+    })), Object.keys(colors).filter(item => !['black', 'white'].includes(item)).map((item, index) => /*#__PURE__*/React.createElement(Line, {
+      key: index,
+      gap: 0.5,
+      direction: "row",
+      style: {
+        width: '100%'
+      }
+    }, Object.keys(colors[item]).map((item_, index_) => /*#__PURE__*/React.createElement(PaletteItem, {
+      key: index_,
+      color: colors[item][item_],
+      onClick: () => {
+        if (refs.range.current) {
+          const selection_ = refs.rootWindow.current.getSelection();
+          selection_.removeAllRanges();
+          selection_.addRange(refs.range.current);
+        }
+        onUpdate_(colors[item][item_]);
+        onClose();
+      }
+    }))))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Line, {
+      gap: 0.5,
+      direction: "row",
+      align: "center",
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(ColorTextField, _extends({
+      tonal: tonal,
+      color: color,
+      name: l('Custom color'),
+      version: "outlined",
+      size: "small",
+      value: refs.inputValues.current[version_],
+      onChange: valueNew => updateInputValues(version_, valueNew)
+    }, ColorTextFieldProps, {
+      className: classNames([staticClassName('RichTextEditor', theme) && ['onesy-RichTextEditor-text-field-color'], ColorTextFieldProps?.className, classes.textFieldColor])
+    })), /*#__PURE__*/React.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);
+        }
+        onUpdate_(refs.inputValues.current[version_]);
+        onClose();
+      }
+    }, "Apply")));
+  }), []);
   const AppendProps = {
     padding: [14, 14]
   };
@@ -691,7 +889,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         InputComponent = TextField,
         InputProps
       } = propsInput,
-      other_ = _objectWithoutProperties(propsInput, _excluded2);
+      other_ = _objectWithoutProperties(propsInput, _excluded4);
     return /*#__PURE__*/React.createElement(Line, _extends({
       ref: ref_,
       gap: 1,
@@ -733,7 +931,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         onClose,
         children: childrenWrapperAppend
       } = propsWrapper,
-      other_ = _objectWithoutProperties(propsWrapper, _excluded3);
+      other_ = _objectWithoutProperties(propsWrapper, _excluded5);
     return /*#__PURE__*/React.createElement(Append, _extends({
       open: open_,
       element: /*#__PURE__*/React.createElement("div", {
@@ -754,7 +952,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         name: nameWrapperToogleButton,
         children: childrenWrapperToggleButton
       } = propsWrapperToggleButton,
-      other_ = _objectWithoutProperties(propsWrapperToggleButton, _excluded4);
+      other_ = _objectWithoutProperties(propsWrapperToggleButton, _excluded6);
     return /*#__PURE__*/React.createElement(Tooltip, _extends({
       open: open_ !== undefined ? open_ : undefined,
       name: nameWrapperToogleButton
@@ -809,6 +1007,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         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();
@@ -835,7 +1034,113 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       name: l('Remove Link')
     }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       onClick: textMethod('link-remove')
-    }), /*#__PURE__*/React.createElement(IconMaterialLinkOff, IconProps)))
+    }), /*#__PURE__*/React.createElement(IconMaterialLinkOff, IconProps))),
+    'font-color': /*#__PURE__*/React.createElement(WrapperAppend, {
+      open: refs.open.current.color,
+      anchorElement: refs.elements.color.current,
+      element: /*#__PURE__*/React.createElement(ClickListener, {
+        onClickOutside: () => updateOpen('color', false),
+        include: [refs.elements.color.current]
+      }, /*#__PURE__*/React.createElement(Palette, {
+        version: "font-color",
+        onClose: () => updateOpen('color', false),
+        onUpdate: textMethod('font-color')
+      }))
+    }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Text Color'),
+      open: refs.open.current.color ? false : undefined
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
+      ref: refs.elements.color
+    }, ToggleButtonProps, {
+      selected: refs.open.current.color,
+      onClick: () => updateOpen('color', !refs.open.current.color)
+    }), /*#__PURE__*/React.createElement(IconMaterialFormatColorText, IconProps)))),
+    'font-color-mini-menu': /*#__PURE__*/React.createElement(WrapperAppend, {
+      open: refs.open.current.colorMiniMenu,
+      anchorElement: refs.miniMenuElements.color,
+      element: /*#__PURE__*/React.createElement(ClickListener, {
+        onClickOutside: () => updateOpen('colorMiniMenu', false),
+        include: [refs.miniMenuElements.color]
+      }, /*#__PURE__*/React.createElement(Palette, {
+        ref: refs.miniMenuElements.colorPalette,
+        version: "font-color",
+        onClose: () => updateOpen('colorMiniMenu', false),
+        onUpdate: textMethod('font-color')
+      }))
+    }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Text Color'),
+      open: refs.open.current.colorMiniMenu ? false : undefined
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
+      ref: refs.miniMenuElements.color
+    }, ToggleButtonProps, {
+      selected: refs.open.current.colorMiniMenu,
+      onClick: () => updateOpen('colorMiniMenu', !refs.open.current.colorMiniMenu)
+    }), /*#__PURE__*/React.createElement(IconMaterialFormatColorText, IconProps)))),
+    'font-background': /*#__PURE__*/React.createElement(WrapperAppend, {
+      open: refs.open.current.background,
+      anchorElement: refs.elements.background.current,
+      element: /*#__PURE__*/React.createElement(ClickListener, {
+        onClickOutside: () => updateOpen('background', false),
+        include: [refs.elements.background.current]
+      }, /*#__PURE__*/React.createElement(Palette, {
+        version: "font-background",
+        onClose: () => updateOpen('background', false),
+        onUpdate: textMethod('font-background')
+      }))
+    }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Background Color'),
+      open: refs.open.current.background ? false : undefined
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
+      ref: refs.elements.background
+    }, ToggleButtonProps, {
+      selected: refs.open.current.background,
+      onClick: () => updateOpen('background', !refs.open.current.background)
+    }), /*#__PURE__*/React.createElement(IconMaterialFormatColorFill, IconProps)))),
+    'font-background-mini-menu': /*#__PURE__*/React.createElement(WrapperAppend, {
+      open: refs.open.current.backgroundMiniMenu,
+      anchorElement: refs.miniMenuElements.background,
+      element: /*#__PURE__*/React.createElement(ClickListener, {
+        onClickOutside: () => updateOpen('backgroundMiniMenu', false),
+        include: [refs.miniMenuElements.background]
+      }, /*#__PURE__*/React.createElement(Palette, {
+        ref: refs.miniMenuElements.backgroundPalette,
+        version: "font-background",
+        onClose: () => updateOpen('backgroundMiniMenu', false),
+        onUpdate: textMethod('font-background')
+      }))
+    }, /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Text Color'),
+      open: refs.open.current.backgroundMiniMenu ? false : undefined
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({
+      ref: refs.miniMenuElements.background
+    }, ToggleButtonProps, {
+      selected: refs.open.current.backgroundMiniMenu,
+      onClick: () => updateOpen('backgroundMiniMenu', !refs.open.current.backgroundMiniMenu)
+    }), /*#__PURE__*/React.createElement(IconMaterialFormatColorFill, IconProps)))),
+    'align-left': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Align Left')
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('align-left'),
+      onClick: textMethod('align-left')
+    }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignLeft, IconProps))),
+    'align-center': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Align Center')
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('align-center'),
+      onClick: textMethod('align-center')
+    }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignCenter, IconProps))),
+    'align-right': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Align Right')
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('align-right'),
+      onClick: textMethod('align-right')
+    }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignRight, IconProps))),
+    'align-justify': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Align Justify')
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('align-justify'),
+      onClick: textMethod('align-justify')
+    }), /*#__PURE__*/React.createElement(IconMaterialFormatAlignJustify, IconProps)))
   };
   const actionElements = {
     'clear': /*#__PURE__*/React.createElement(WrapperToggleButton, {
@@ -884,7 +1189,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
           "aria-label": l('Mini menu'),
           Component: Surface,
           className: classNames([classes.textMiniMenu])
-        }, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['superscript'], updateElements['subscript']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));
+        }, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['font-color-mini-menu'], updateElements['font-background-mini-menu']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['align-left'], updateElements['align-center'], updateElements['align-right'], updateElements['align-justify']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['list-ordered'], updateElements['list-unordered']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['superscript'], updateElements['subscript']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));
       },
       parent: refs.root.current,
       anchor: textSelection?.selection,
@@ -913,6 +1218,8 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
       refs.root.current = item;
     },
+    color: color,
+    tonal: tonal,
     version: "text",
     size: size,
     minRows: 12,
@@ -956,6 +1263,8 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       refs.root.current = item;
       refs.input.current = item;
     },
+    color: color,
+    tonal: tonal,
     onInput: onInput,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.96
+/** @license UiReact v1.0.97
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.96",
+  "version": "1.0.97",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",