@onesy/ui-react 1.0.97 → 1.0.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -202,21 +202,6 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
202
202
|
},
|
|
203
203
|
textFieldColor: {
|
|
204
204
|
flex: '1 1 auto'
|
|
205
|
-
},
|
|
206
|
-
inputColor: {
|
|
207
|
-
border: 'none',
|
|
208
|
-
borderRadius: theme.methods.shape.radius.value(40, 'px'),
|
|
209
|
-
overflow: 'hidden',
|
|
210
|
-
width: '17px',
|
|
211
|
-
height: '17px',
|
|
212
|
-
cursor: 'pointer',
|
|
213
|
-
boxShadow: theme.shadows.values.default[1],
|
|
214
|
-
'&::-webkit-color-swatch-wrapper': {
|
|
215
|
-
padding: '0px'
|
|
216
|
-
},
|
|
217
|
-
'&::-webkit-color-swatch': {
|
|
218
|
-
border: 'none'
|
|
219
|
-
}
|
|
220
205
|
}
|
|
221
206
|
}), { name: 'onesy-RichTextEditor' });
|
|
222
207
|
const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
@@ -291,7 +276,7 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
291
276
|
backgroundPalette: react_1.default.useRef(null),
|
|
292
277
|
linkAdd: react_1.default.useRef(null),
|
|
293
278
|
linkAddInput: react_1.default.useRef(null),
|
|
294
|
-
linkRemove: react_1.default.useRef(null)
|
|
279
|
+
linkRemove: react_1.default.useRef(null)
|
|
295
280
|
},
|
|
296
281
|
elements: {
|
|
297
282
|
color: react_1.default.useRef(null),
|
|
@@ -329,7 +314,8 @@ const RichTextEditor = react_1.default.forwardRef((props__, ref) => {
|
|
|
329
314
|
react_1.default.useEffect(() => {
|
|
330
315
|
var _a, _b;
|
|
331
316
|
const selection_ = refs.rootWindow.current.getSelection();
|
|
332
|
-
if (selection_
|
|
317
|
+
if (selection_ &&
|
|
318
|
+
selection_.anchorNode &&
|
|
333
319
|
!((_b = (_a = selection_.anchorNode) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.includes('TextField')))
|
|
334
320
|
refs.range.current = selection_.getRangeAt(0);
|
|
335
321
|
}, [open]);
|
|
@@ -24,6 +24,8 @@ const IconMaterialFormatAlignRightW100_1 = __importDefault(require("@onesy/icons
|
|
|
24
24
|
const IconMaterialFormatAlignJustifyW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatAlignJustifyW100"));
|
|
25
25
|
const IconMaterialFormatColorTextW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatColorTextW100"));
|
|
26
26
|
const IconMaterialFormatColorFillW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatColorFillW100"));
|
|
27
|
+
const IconMaterialFormatListNumberedW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatListNumberedW100"));
|
|
28
|
+
const IconMaterialFormatListBulletedW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatListBulletedW100"));
|
|
27
29
|
const IconMaterialSuperscriptW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSuperscriptW100"));
|
|
28
30
|
const IconMaterialSubscriptW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSubscriptW100"));
|
|
29
31
|
const IconMaterialFormatItalicW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatItalicW100"));
|
|
@@ -55,7 +57,10 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
55
57
|
root: {
|
|
56
58
|
minHeight: '20px',
|
|
57
59
|
width: '100%',
|
|
58
|
-
'& .onesy-TextField-input': Object.assign({ wordBreak: 'break-word', color: theme.methods.palette.color.value('primary', 10) }, theme.typography.values.b2)
|
|
60
|
+
'& .onesy-TextField-input': Object.assign({ wordBreak: 'break-word', color: theme.methods.palette.color.value('primary', 10) }, theme.typography.values.b2),
|
|
61
|
+
'& ul, ol': {
|
|
62
|
+
listStylePosition: 'inside'
|
|
63
|
+
}
|
|
59
64
|
},
|
|
60
65
|
root_type: {
|
|
61
66
|
minHeight: '20px',
|
|
@@ -83,7 +88,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
83
88
|
boxShadow: theme.shadows.values.default[2]
|
|
84
89
|
},
|
|
85
90
|
textMiniMenuAdditionalMenu: {
|
|
86
|
-
|
|
91
|
+
minWidth: 'clamp(140px, 90%, 250px)',
|
|
87
92
|
zIndex: '1514'
|
|
88
93
|
},
|
|
89
94
|
inputWrapper: {
|
|
@@ -95,11 +100,33 @@ const useStyle = (0, style_react_1.style)(theme => ({
|
|
|
95
100
|
whiteSpace: 'nowrap',
|
|
96
101
|
overflow: 'hidden'
|
|
97
102
|
},
|
|
98
|
-
|
|
103
|
+
input: {
|
|
99
104
|
'&.onesy-TextField-root': {
|
|
100
105
|
flex: '1 1 auto !important'
|
|
101
106
|
}
|
|
102
107
|
},
|
|
108
|
+
palette: {
|
|
109
|
+
padding: theme.methods.space.value(1.5, 'px'),
|
|
110
|
+
borderRadius: theme.methods.shape.radius.value(1, 'px'),
|
|
111
|
+
boxShadow: theme.shadows.values.default[2]
|
|
112
|
+
},
|
|
113
|
+
paletteItem: {
|
|
114
|
+
position: 'relative',
|
|
115
|
+
width: '17px',
|
|
116
|
+
height: '17px',
|
|
117
|
+
cursor: 'pointer',
|
|
118
|
+
borderRadius: theme.methods.shape.radius.value(40, 'px'),
|
|
119
|
+
boxShadow: theme.shadows.values.default[1],
|
|
120
|
+
transition: theme.methods.transitions.make('box-shadow'),
|
|
121
|
+
'&:hover': {
|
|
122
|
+
boxShadow: theme.shadows.values.default[2],
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
textFieldColor: {
|
|
126
|
+
'&.onesy-ColorTextField-root': {
|
|
127
|
+
flex: '1 1 auto'
|
|
128
|
+
}
|
|
129
|
+
},
|
|
103
130
|
helperText: {
|
|
104
131
|
display: 'inline-flex',
|
|
105
132
|
color: theme.palette.text.default.secondary,
|
|
@@ -573,9 +600,14 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
573
600
|
}, 140);
|
|
574
601
|
}, []);
|
|
575
602
|
const onMouseDown = react_1.default.useCallback(() => {
|
|
603
|
+
var _a, _b;
|
|
576
604
|
if (!refs.edit.current)
|
|
577
605
|
return;
|
|
578
606
|
textQueryUpdate();
|
|
607
|
+
const selection_ = refs.rootWindow.current.getSelection();
|
|
608
|
+
if (selection_.anchorNode &&
|
|
609
|
+
!((_b = (_a = selection_.anchorNode) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.includes('TextField')))
|
|
610
|
+
refs.range.current = selection_.getRangeAt(0);
|
|
579
611
|
}, []);
|
|
580
612
|
const onKeyUp = react_1.default.useCallback(() => {
|
|
581
613
|
if (!refs.edit.current)
|
|
@@ -775,7 +807,11 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
775
807
|
'onesy-RichTextEditor-palette'
|
|
776
808
|
],
|
|
777
809
|
classes.palette
|
|
778
|
-
]) }, other_, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, onMouseUp: onMouseUp, onMouseDown: onMouseDown
|
|
810
|
+
]) }, other_, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, onMouseUp: onMouseUp, onMouseDown: onMouseDown, style: {
|
|
811
|
+
maxHeight: 136,
|
|
812
|
+
padding: 10,
|
|
813
|
+
overflow: 'hidden auto'
|
|
814
|
+
} }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', style: {
|
|
779
815
|
width: '100%'
|
|
780
816
|
} }, { children: [(0, jsx_runtime_1.jsx)(PaletteItem, { color: '#000000', onClick: () => {
|
|
781
817
|
onUpdate_('#000000');
|
|
@@ -793,8 +829,8 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
793
829
|
}
|
|
794
830
|
onUpdate_(style_react_1.colors[item][item_]);
|
|
795
831
|
onClose();
|
|
796
|
-
} }, index_))) }), index)))] })), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
|
|
797
|
-
|
|
832
|
+
} }, 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: {
|
|
833
|
+
padding: 10
|
|
798
834
|
} }, { 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)([
|
|
799
835
|
(0, utils_2.staticClassName)('RichTextEditor', theme) && [
|
|
800
836
|
'onesy-RichTextEditor-text-field-color'
|
|
@@ -831,13 +867,13 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
831
867
|
size: 'small'
|
|
832
868
|
};
|
|
833
869
|
const Input = react_1.default.useCallback(react_1.default.forwardRef((propsInput, ref_) => {
|
|
834
|
-
const { label: labelInput, labelButton, value: value__, onChange: onChange__, onClick, InputComponent = TextField, InputProps } = propsInput, other_ = __rest(propsInput, ["label", "labelButton", "value", "onChange", "onClick", "InputComponent", "InputProps"]);
|
|
870
|
+
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"]);
|
|
835
871
|
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)([
|
|
836
872
|
other_ === null || other_ === void 0 ? void 0 : other_.className,
|
|
837
873
|
classes.inputWrapper
|
|
838
874
|
]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', style: {
|
|
839
875
|
width: '100%'
|
|
840
|
-
} }, { children: [(0, jsx_runtime_1.jsx)(InputComponent, Object.assign({ name: labelInput, version: 'outlined', size: 'small', valueDefault: value__, onChange: onChange__ }, InputProps, { style: {
|
|
876
|
+
} }, { 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: {
|
|
841
877
|
width: 'unset',
|
|
842
878
|
flex: '1 1 auto'
|
|
843
879
|
} })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'inherit', version: 'text', size: 'small', onClick: onClick }, { children: labelButton }))] })) })));
|
|
@@ -873,7 +909,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
873
909
|
textMethod('link-add')(refs.inputValues.current.link);
|
|
874
910
|
updateOpen('linkMiniMenu', false);
|
|
875
911
|
updateInputValues('link', '');
|
|
876
|
-
}, className: classes.
|
|
912
|
+
}, 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)) })) })) }))),
|
|
877
913
|
'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)) })) }))),
|
|
878
914
|
'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)) })) })) }))),
|
|
879
915
|
'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)) })) })) }))),
|
|
@@ -882,7 +918,9 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
882
918
|
'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)) })) }))),
|
|
883
919
|
'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)) })) }))),
|
|
884
920
|
'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)) })) }))),
|
|
885
|
-
'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)) })) })))
|
|
921
|
+
'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)) })) }))),
|
|
922
|
+
'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)) })) }))),
|
|
923
|
+
'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)) })) })))
|
|
886
924
|
};
|
|
887
925
|
const actionElements = {
|
|
888
926
|
'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)) })) })))
|
|
@@ -907,9 +945,9 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
907
945
|
classes.textMiniMenuWrapper
|
|
908
946
|
]) }, { children: (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !!textSelection, add: true }, { children: (0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => {
|
|
909
947
|
setTextSelection(null);
|
|
910
|
-
}, 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)([
|
|
948
|
+
}, 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', role: 'toolbar', color: 'themed', "aria-label": l('Mini menu'), Component: Surface, className: (0, style_react_1.classNames)([
|
|
911
949
|
classes.textMiniMenu
|
|
912
|
-
]) }, { 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['
|
|
950
|
+
]) }, { 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'] }))] })) })) })) })));
|
|
913
951
|
}, parent: refs.root.current, anchor: textSelection === null || textSelection === void 0 ? void 0 : textSelection.selection, portal: true, alignment: 'center', position: 'bottom', clearOnClose: true }, AppendProps)));
|
|
914
952
|
}, [open, textSelection, textSelected]);
|
|
915
953
|
const menu = react_1.default.useMemo(() => {
|
|
@@ -203,21 +203,6 @@ const useStyle = styleMethod(theme => ({
|
|
|
203
203
|
},
|
|
204
204
|
textFieldColor: {
|
|
205
205
|
flex: '1 1 auto'
|
|
206
|
-
},
|
|
207
|
-
inputColor: {
|
|
208
|
-
border: 'none',
|
|
209
|
-
borderRadius: theme.methods.shape.radius.value(40, 'px'),
|
|
210
|
-
overflow: 'hidden',
|
|
211
|
-
width: '17px',
|
|
212
|
-
height: '17px',
|
|
213
|
-
cursor: 'pointer',
|
|
214
|
-
boxShadow: theme.shadows.values.default[1],
|
|
215
|
-
'&::-webkit-color-swatch-wrapper': {
|
|
216
|
-
padding: '0px'
|
|
217
|
-
},
|
|
218
|
-
'&::-webkit-color-swatch': {
|
|
219
|
-
border: 'none'
|
|
220
|
-
}
|
|
221
206
|
}
|
|
222
207
|
}), {
|
|
223
208
|
name: 'onesy-RichTextEditor'
|
|
@@ -395,7 +380,7 @@ const RichTextEditor = /*#__PURE__*/React.forwardRef((props__, ref) => {
|
|
|
395
380
|
}, [value]);
|
|
396
381
|
React.useEffect(() => {
|
|
397
382
|
const selection_ = refs.rootWindow.current.getSelection();
|
|
398
|
-
if (selection_.anchorNode && !selection_.anchorNode?.className?.includes('TextField')) refs.range.current = selection_.getRangeAt(0);
|
|
383
|
+
if (selection_ && selection_.anchorNode && !selection_.anchorNode?.className?.includes('TextField')) refs.range.current = selection_.getRangeAt(0);
|
|
399
384
|
}, [open]);
|
|
400
385
|
React.useEffect(() => {
|
|
401
386
|
if (!selection) {
|
|
@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
4
4
|
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"],
|
|
5
5
|
_excluded2 = ["color"],
|
|
6
6
|
_excluded3 = ["version", "onUpdate", "onClose"],
|
|
7
|
-
_excluded4 = ["label", "labelButton", "value", "onChange", "onClick", "InputComponent", "InputProps"],
|
|
7
|
+
_excluded4 = ["label", "labelButton", "value", "onChange", "onClick", "placeholder", "InputComponent", "InputProps"],
|
|
8
8
|
_excluded5 = ["open", "element", "anchorElement", "onClose", "children"],
|
|
9
9
|
_excluded6 = ["open", "name", "children"];
|
|
10
10
|
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; }
|
|
@@ -18,6 +18,8 @@ import IconMaterialFormatAlignRight from '@onesy/icons-material-rounded-react/Ic
|
|
|
18
18
|
import IconMaterialFormatAlignJustify from '@onesy/icons-material-rounded-react/IconMaterialFormatAlignJustifyW100';
|
|
19
19
|
import IconMaterialFormatColorText from '@onesy/icons-material-rounded-react/IconMaterialFormatColorTextW100';
|
|
20
20
|
import IconMaterialFormatColorFill from '@onesy/icons-material-rounded-react/IconMaterialFormatColorFillW100';
|
|
21
|
+
import IconMaterialFormatListNumbered from '@onesy/icons-material-rounded-react/IconMaterialFormatListNumberedW100';
|
|
22
|
+
import IconMaterialFormatListBulleted from '@onesy/icons-material-rounded-react/IconMaterialFormatListBulletedW100';
|
|
21
23
|
import IconMaterialSuperscript from '@onesy/icons-material-rounded-react/IconMaterialSuperscriptW100';
|
|
22
24
|
import IconMaterialSubscript from '@onesy/icons-material-rounded-react/IconMaterialSubscriptW100';
|
|
23
25
|
import IconMaterialFormatItalic from '@onesy/icons-material-rounded-react/IconMaterialFormatItalicW100';
|
|
@@ -52,7 +54,10 @@ const useStyle = styleMethod(theme => ({
|
|
|
52
54
|
'& .onesy-TextField-input': _objectSpread({
|
|
53
55
|
wordBreak: 'break-word',
|
|
54
56
|
color: theme.methods.palette.color.value('primary', 10)
|
|
55
|
-
}, theme.typography.values.b2)
|
|
57
|
+
}, theme.typography.values.b2),
|
|
58
|
+
'& ul, ol': {
|
|
59
|
+
listStylePosition: 'inside'
|
|
60
|
+
}
|
|
56
61
|
},
|
|
57
62
|
root_type: {
|
|
58
63
|
minHeight: '20px',
|
|
@@ -83,7 +88,7 @@ const useStyle = styleMethod(theme => ({
|
|
|
83
88
|
boxShadow: theme.shadows.values.default[2]
|
|
84
89
|
},
|
|
85
90
|
textMiniMenuAdditionalMenu: {
|
|
86
|
-
|
|
91
|
+
minWidth: 'clamp(140px, 90%, 250px)',
|
|
87
92
|
zIndex: '1514'
|
|
88
93
|
},
|
|
89
94
|
inputWrapper: {
|
|
@@ -95,11 +100,33 @@ const useStyle = styleMethod(theme => ({
|
|
|
95
100
|
whiteSpace: 'nowrap',
|
|
96
101
|
overflow: 'hidden'
|
|
97
102
|
},
|
|
98
|
-
|
|
103
|
+
input: {
|
|
99
104
|
'&.onesy-TextField-root': {
|
|
100
105
|
flex: '1 1 auto !important'
|
|
101
106
|
}
|
|
102
107
|
},
|
|
108
|
+
palette: {
|
|
109
|
+
padding: theme.methods.space.value(1.5, 'px'),
|
|
110
|
+
borderRadius: theme.methods.shape.radius.value(1, 'px'),
|
|
111
|
+
boxShadow: theme.shadows.values.default[2]
|
|
112
|
+
},
|
|
113
|
+
paletteItem: {
|
|
114
|
+
position: 'relative',
|
|
115
|
+
width: '17px',
|
|
116
|
+
height: '17px',
|
|
117
|
+
cursor: 'pointer',
|
|
118
|
+
borderRadius: theme.methods.shape.radius.value(40, 'px'),
|
|
119
|
+
boxShadow: theme.shadows.values.default[1],
|
|
120
|
+
transition: theme.methods.transitions.make('box-shadow'),
|
|
121
|
+
'&:hover': {
|
|
122
|
+
boxShadow: theme.shadows.values.default[2]
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
textFieldColor: {
|
|
126
|
+
'&.onesy-ColorTextField-root': {
|
|
127
|
+
flex: '1 1 auto'
|
|
128
|
+
}
|
|
129
|
+
},
|
|
103
130
|
helperText: {
|
|
104
131
|
display: 'inline-flex',
|
|
105
132
|
color: theme.palette.text.default.secondary,
|
|
@@ -619,6 +646,8 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
619
646
|
const onMouseDown = React.useCallback(() => {
|
|
620
647
|
if (!refs.edit.current) return;
|
|
621
648
|
textQueryUpdate();
|
|
649
|
+
const selection_ = refs.rootWindow.current.getSelection();
|
|
650
|
+
if (selection_.anchorNode && !selection_.anchorNode?.className?.includes('TextField')) refs.range.current = selection_.getRangeAt(0);
|
|
622
651
|
}, []);
|
|
623
652
|
const onKeyUp = React.useCallback(() => {
|
|
624
653
|
if (!refs.edit.current) return;
|
|
@@ -789,7 +818,12 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
789
818
|
}, other_), /*#__PURE__*/React.createElement(Line, {
|
|
790
819
|
gap: 0.5,
|
|
791
820
|
onMouseUp: onMouseUp,
|
|
792
|
-
onMouseDown: onMouseDown
|
|
821
|
+
onMouseDown: onMouseDown,
|
|
822
|
+
style: {
|
|
823
|
+
maxHeight: 136,
|
|
824
|
+
padding: 10,
|
|
825
|
+
overflow: 'hidden auto'
|
|
826
|
+
}
|
|
793
827
|
}, /*#__PURE__*/React.createElement(Line, {
|
|
794
828
|
gap: 0.5,
|
|
795
829
|
direction: "row",
|
|
@@ -831,8 +865,9 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
831
865
|
gap: 0.5,
|
|
832
866
|
direction: "row",
|
|
833
867
|
align: "center",
|
|
868
|
+
fullWidth: true,
|
|
834
869
|
style: {
|
|
835
|
-
|
|
870
|
+
padding: 10
|
|
836
871
|
}
|
|
837
872
|
}, /*#__PURE__*/React.createElement(ColorTextField, _extends({
|
|
838
873
|
tonal: tonal,
|
|
@@ -886,6 +921,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
886
921
|
value: value__,
|
|
887
922
|
onChange: onChange__,
|
|
888
923
|
onClick,
|
|
924
|
+
placeholder: placeholderInputProps,
|
|
889
925
|
InputComponent = TextField,
|
|
890
926
|
InputProps
|
|
891
927
|
} = propsInput,
|
|
@@ -910,7 +946,9 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
910
946
|
version: "outlined",
|
|
911
947
|
size: "small",
|
|
912
948
|
valueDefault: value__,
|
|
913
|
-
onChange: onChange__
|
|
949
|
+
onChange: onChange__,
|
|
950
|
+
placeholder: placeholderInputProps,
|
|
951
|
+
flex: true
|
|
914
952
|
}, InputProps, {
|
|
915
953
|
style: {
|
|
916
954
|
width: 'unset',
|
|
@@ -1019,7 +1057,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
1019
1057
|
updateOpen('linkMiniMenu', false);
|
|
1020
1058
|
updateInputValues('link', '');
|
|
1021
1059
|
},
|
|
1022
|
-
className: classes.
|
|
1060
|
+
className: classes.input
|
|
1023
1061
|
}))
|
|
1024
1062
|
}, /*#__PURE__*/React.createElement(WrapperToggleButton, {
|
|
1025
1063
|
name: l('Insert Link'),
|
|
@@ -1140,7 +1178,19 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
1140
1178
|
}, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
|
|
1141
1179
|
selected: refs.textSelected.current.includes('align-justify'),
|
|
1142
1180
|
onClick: textMethod('align-justify')
|
|
1143
|
-
}), /*#__PURE__*/React.createElement(IconMaterialFormatAlignJustify, IconProps)))
|
|
1181
|
+
}), /*#__PURE__*/React.createElement(IconMaterialFormatAlignJustify, IconProps))),
|
|
1182
|
+
'list-ordered': /*#__PURE__*/React.createElement(WrapperToggleButton, {
|
|
1183
|
+
name: l('List Ordered')
|
|
1184
|
+
}, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
|
|
1185
|
+
selected: refs.textSelected.current.includes('list-ordered'),
|
|
1186
|
+
onClick: textMethod('list-ordered')
|
|
1187
|
+
}), /*#__PURE__*/React.createElement(IconMaterialFormatListNumbered, IconProps))),
|
|
1188
|
+
'list-unordered': /*#__PURE__*/React.createElement(WrapperToggleButton, {
|
|
1189
|
+
name: l('List Unordered')
|
|
1190
|
+
}, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
|
|
1191
|
+
selected: refs.textSelected.current.includes('list-unordered'),
|
|
1192
|
+
onClick: textMethod('list-unordered')
|
|
1193
|
+
}), /*#__PURE__*/React.createElement(IconMaterialFormatListBulleted, IconProps)))
|
|
1144
1194
|
};
|
|
1145
1195
|
const actionElements = {
|
|
1146
1196
|
'clear': /*#__PURE__*/React.createElement(WrapperToggleButton, {
|
|
@@ -1178,7 +1228,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
1178
1228
|
onClickOutside: () => {
|
|
1179
1229
|
setTextSelection(null);
|
|
1180
1230
|
},
|
|
1181
|
-
include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current]
|
|
1231
|
+
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]
|
|
1182
1232
|
}, /*#__PURE__*/React.createElement(Line, {
|
|
1183
1233
|
gap: 2,
|
|
1184
1234
|
direction: "row",
|
|
@@ -1189,7 +1239,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
1189
1239
|
"aria-label": l('Mini menu'),
|
|
1190
1240
|
Component: Surface,
|
|
1191
1241
|
className: classNames([classes.textMiniMenu])
|
|
1192
|
-
}, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), miniMenuExtended && /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['
|
|
1242
|
+
}, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), 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['font-color-mini-menu'], updateElements['font-background-mini-menu']), 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'])))));
|
|
1193
1243
|
},
|
|
1194
1244
|
parent: refs.root.current,
|
|
1195
1245
|
anchor: textSelection?.selection,
|
package/esm/index.js
CHANGED