@commercetools-uikit/localized-rich-text-input 20.5.0 → 20.6.0
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.
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
|
|
2
|
-
<!-- This file is created by the `
|
|
2
|
+
<!-- This file is created by the `pnpm generate-readme` script. -->
|
|
3
3
|
|
|
4
4
|
# LocalizedRichTextInput
|
|
5
5
|
|
|
@@ -11,7 +11,7 @@ states.
|
|
|
11
11
|
## Installation
|
|
12
12
|
|
|
13
13
|
```
|
|
14
|
-
|
|
14
|
+
pnpm add @commercetools-uikit/localized-rich-text-input
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
```
|
|
@@ -21,7 +21,7 @@ npm --save install @commercetools-uikit/localized-rich-text-input
|
|
|
21
21
|
Additionally install the peer dependencies (if not present)
|
|
22
22
|
|
|
23
23
|
```
|
|
24
|
-
|
|
24
|
+
pnpm add react react-dom react-intl
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
```
|
|
@@ -13,7 +13,6 @@ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWit
|
|
|
13
13
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
14
14
|
var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
|
|
15
15
|
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
16
|
-
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
17
16
|
var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
|
|
18
17
|
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
|
|
19
18
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
@@ -57,7 +56,6 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
|
|
|
57
56
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
58
57
|
var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
|
|
59
58
|
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
60
|
-
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
61
59
|
var _Map__default = /*#__PURE__*/_interopDefault(_Map);
|
|
62
60
|
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
|
|
63
61
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
@@ -72,7 +70,7 @@ var isHotkey__default = /*#__PURE__*/_interopDefault(isHotkey);
|
|
|
72
70
|
var pipe__default = /*#__PURE__*/_interopDefault(pipe);
|
|
73
71
|
|
|
74
72
|
function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
75
|
-
const getEditorLanguageLabelBorderColor = props =>
|
|
73
|
+
const getEditorLanguageLabelBorderColor = props => `1px solid ${props.isReadOnly ? designSystem.designTokens.borderColorForInputWhenReadonly : designSystem.designTokens.borderColorForInputWhenDisabled}`;
|
|
76
74
|
const getBackgroundColor = props => {
|
|
77
75
|
if (props.isDisabled) {
|
|
78
76
|
return designSystem.designTokens.backgroundColorForInputWhenDisabled;
|
|
@@ -185,8 +183,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
|
|
|
185
183
|
toggleLanguage(props.language);
|
|
186
184
|
}, [toggleLanguage, props.language]);
|
|
187
185
|
const updateRenderToggleButton = react.useCallback(() => {
|
|
188
|
-
|
|
189
|
-
const doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
|
|
186
|
+
const doesExceedCollapsedHeightLimit = Number(ref.current?.clientHeight) > COLLAPSED_HEIGHT;
|
|
190
187
|
if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
|
|
191
188
|
setRenderToggleButton(true);
|
|
192
189
|
}
|
|
@@ -200,8 +197,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
|
|
|
200
197
|
|
|
201
198
|
// resetting
|
|
202
199
|
const resetValue = react.useCallback(newValue => {
|
|
203
|
-
|
|
204
|
-
const newStringValue = typeof newValue === 'string' ? newValue : (_newValue$props$langu = newValue === null || newValue === void 0 ? void 0 : newValue[props.language]) !== null && _newValue$props$langu !== void 0 ? _newValue$props$langu : '';
|
|
200
|
+
const newStringValue = typeof newValue === 'string' ? newValue : newValue?.[props.language] ?? '';
|
|
205
201
|
richTextUtils.resetEditor(editor, newStringValue);
|
|
206
202
|
}, [editor, props.language]);
|
|
207
203
|
/*
|
|
@@ -279,8 +275,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
|
|
|
279
275
|
autoFocus: props.isAutofocused,
|
|
280
276
|
onBlur: props.onBlur,
|
|
281
277
|
onFocus: event => {
|
|
282
|
-
|
|
283
|
-
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
|
|
278
|
+
props.onFocus?.(event);
|
|
284
279
|
// opens the input if it regains focus and it's closed
|
|
285
280
|
if (!isOpen) {
|
|
286
281
|
toggle();
|
|
@@ -388,8 +383,7 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
|
|
|
388
383
|
// the consumer only cares about the serializedValue, so it doesn't make sense to call
|
|
389
384
|
// onChange unless this value changes.
|
|
390
385
|
if (hasSerializedValueChanged) {
|
|
391
|
-
|
|
392
|
-
(_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props, richTextUtils.html.serialize(state));
|
|
386
|
+
_this.props.onChange?.(richTextUtils.html.serialize(state));
|
|
393
387
|
}
|
|
394
388
|
if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
|
|
395
389
|
// this way we force update if cursor or selection changes
|
|
@@ -465,7 +459,7 @@ var RequiredValueErrorMessage$1 = RequiredValueErrorMessage;
|
|
|
465
459
|
|
|
466
460
|
const _excluded = ["horizontalConstraint", "showExpandIcon"];
|
|
467
461
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
468
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
462
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
469
463
|
const expandedTranslationsReducer = (state, action) => {
|
|
470
464
|
switch (action.type) {
|
|
471
465
|
case 'toggle':
|
|
@@ -528,11 +522,10 @@ const LocalizedRichTextInput = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
528
522
|
});
|
|
529
523
|
}, [expandedTranslationsDispatch]);
|
|
530
524
|
const createChangeHandler = react.useCallback(language => state => {
|
|
531
|
-
|
|
532
|
-
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, {
|
|
525
|
+
props.onChange?.({
|
|
533
526
|
target: {
|
|
534
|
-
id: props
|
|
535
|
-
name: props
|
|
527
|
+
id: props?.id ? `${props.id}.${language}` : '',
|
|
528
|
+
name: props?.name ? `${props.name}.${language}` : '',
|
|
536
529
|
language,
|
|
537
530
|
value: state
|
|
538
531
|
}
|
|
@@ -552,9 +545,9 @@ const LocalizedRichTextInput = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
552
545
|
}
|
|
553
546
|
const langRefs = react.useRef(new _Map__default["default"]());
|
|
554
547
|
const resetValue = react.useCallback(newValue => {
|
|
555
|
-
var
|
|
556
|
-
_forEachInstanceProperty__default["default"](
|
|
557
|
-
langRef
|
|
548
|
+
var _context3;
|
|
549
|
+
_forEachInstanceProperty__default["default"](_context3 = langRefs.current).call(_context3, langRef => {
|
|
550
|
+
langRef?.resetValue(newValue);
|
|
558
551
|
});
|
|
559
552
|
}, []);
|
|
560
553
|
react.useImperativeHandle(ref, () => {
|
|
@@ -621,7 +614,7 @@ LocalizedRichTextInput.isTouched = localizedUtils.isTouched;
|
|
|
621
614
|
var LocalizedRichTextInput$1 = LocalizedRichTextInput;
|
|
622
615
|
|
|
623
616
|
// NOTE: This string will be replaced on build time with the package version.
|
|
624
|
-
var version = "20.
|
|
617
|
+
var version = "20.6.0";
|
|
625
618
|
|
|
626
619
|
exports["default"] = LocalizedRichTextInput$1;
|
|
627
620
|
exports.version = version;
|
|
@@ -13,7 +13,6 @@ var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWit
|
|
|
13
13
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
14
14
|
var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
|
|
15
15
|
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
16
|
-
var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
|
|
17
16
|
var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
|
|
18
17
|
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
|
|
19
18
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
@@ -57,7 +56,6 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
|
|
|
57
56
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
58
57
|
var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
|
|
59
58
|
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
60
|
-
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
61
59
|
var _Map__default = /*#__PURE__*/_interopDefault(_Map);
|
|
62
60
|
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
|
|
63
61
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
@@ -71,7 +69,7 @@ var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
|
|
|
71
69
|
var isHotkey__default = /*#__PURE__*/_interopDefault(isHotkey);
|
|
72
70
|
var pipe__default = /*#__PURE__*/_interopDefault(pipe);
|
|
73
71
|
|
|
74
|
-
const getEditorLanguageLabelBorderColor = props =>
|
|
72
|
+
const getEditorLanguageLabelBorderColor = props => `1px solid ${props.isReadOnly ? designSystem.designTokens.borderColorForInputWhenReadonly : designSystem.designTokens.borderColorForInputWhenDisabled}`;
|
|
75
73
|
const getBackgroundColor = props => {
|
|
76
74
|
if (props.isDisabled) {
|
|
77
75
|
return designSystem.designTokens.backgroundColorForInputWhenDisabled;
|
|
@@ -143,8 +141,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
|
|
|
143
141
|
toggleLanguage(props.language);
|
|
144
142
|
}, [toggleLanguage, props.language]);
|
|
145
143
|
const updateRenderToggleButton = react.useCallback(() => {
|
|
146
|
-
|
|
147
|
-
const doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
|
|
144
|
+
const doesExceedCollapsedHeightLimit = Number(ref.current?.clientHeight) > COLLAPSED_HEIGHT;
|
|
148
145
|
if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
|
|
149
146
|
setRenderToggleButton(true);
|
|
150
147
|
}
|
|
@@ -158,8 +155,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
|
|
|
158
155
|
|
|
159
156
|
// resetting
|
|
160
157
|
const resetValue = react.useCallback(newValue => {
|
|
161
|
-
|
|
162
|
-
const newStringValue = typeof newValue === 'string' ? newValue : (_newValue$props$langu = newValue === null || newValue === void 0 ? void 0 : newValue[props.language]) !== null && _newValue$props$langu !== void 0 ? _newValue$props$langu : '';
|
|
158
|
+
const newStringValue = typeof newValue === 'string' ? newValue : newValue?.[props.language] ?? '';
|
|
163
159
|
richTextUtils.resetEditor(editor, newStringValue);
|
|
164
160
|
}, [editor, props.language]);
|
|
165
161
|
/*
|
|
@@ -237,8 +233,7 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
|
|
|
237
233
|
autoFocus: props.isAutofocused,
|
|
238
234
|
onBlur: props.onBlur,
|
|
239
235
|
onFocus: event => {
|
|
240
|
-
|
|
241
|
-
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
|
|
236
|
+
props.onFocus?.(event);
|
|
242
237
|
// opens the input if it regains focus and it's closed
|
|
243
238
|
if (!isOpen) {
|
|
244
239
|
toggle();
|
|
@@ -346,8 +341,7 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
|
|
|
346
341
|
// the consumer only cares about the serializedValue, so it doesn't make sense to call
|
|
347
342
|
// onChange unless this value changes.
|
|
348
343
|
if (hasSerializedValueChanged) {
|
|
349
|
-
|
|
350
|
-
(_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props, richTextUtils.html.serialize(state));
|
|
344
|
+
_this.props.onChange?.(richTextUtils.html.serialize(state));
|
|
351
345
|
}
|
|
352
346
|
if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
|
|
353
347
|
// this way we force update if cursor or selection changes
|
|
@@ -419,7 +413,7 @@ var RequiredValueErrorMessage$1 = RequiredValueErrorMessage;
|
|
|
419
413
|
|
|
420
414
|
const _excluded = ["horizontalConstraint", "showExpandIcon"];
|
|
421
415
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
422
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
416
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
423
417
|
const expandedTranslationsReducer = (state, action) => {
|
|
424
418
|
switch (action.type) {
|
|
425
419
|
case 'toggle':
|
|
@@ -475,11 +469,10 @@ const LocalizedRichTextInput = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
475
469
|
});
|
|
476
470
|
}, [expandedTranslationsDispatch]);
|
|
477
471
|
const createChangeHandler = react.useCallback(language => state => {
|
|
478
|
-
|
|
479
|
-
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, {
|
|
472
|
+
props.onChange?.({
|
|
480
473
|
target: {
|
|
481
|
-
id: props
|
|
482
|
-
name: props
|
|
474
|
+
id: props?.id ? `${props.id}.${language}` : '',
|
|
475
|
+
name: props?.name ? `${props.name}.${language}` : '',
|
|
483
476
|
language,
|
|
484
477
|
value: state
|
|
485
478
|
}
|
|
@@ -499,9 +492,9 @@ const LocalizedRichTextInput = /*#__PURE__*/react.forwardRef((_ref, ref) => {
|
|
|
499
492
|
}
|
|
500
493
|
const langRefs = react.useRef(new _Map__default["default"]());
|
|
501
494
|
const resetValue = react.useCallback(newValue => {
|
|
502
|
-
var
|
|
503
|
-
_forEachInstanceProperty__default["default"](
|
|
504
|
-
langRef
|
|
495
|
+
var _context3;
|
|
496
|
+
_forEachInstanceProperty__default["default"](_context3 = langRefs.current).call(_context3, langRef => {
|
|
497
|
+
langRef?.resetValue(newValue);
|
|
505
498
|
});
|
|
506
499
|
}, []);
|
|
507
500
|
react.useImperativeHandle(ref, () => {
|
|
@@ -568,7 +561,7 @@ LocalizedRichTextInput.isTouched = localizedUtils.isTouched;
|
|
|
568
561
|
var LocalizedRichTextInput$1 = LocalizedRichTextInput;
|
|
569
562
|
|
|
570
563
|
// NOTE: This string will be replaced on build time with the package version.
|
|
571
|
-
var version = "20.
|
|
564
|
+
var version = "20.6.0";
|
|
572
565
|
|
|
573
566
|
exports["default"] = LocalizedRichTextInput$1;
|
|
574
567
|
exports.version = version;
|
|
@@ -9,7 +9,6 @@ import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectW
|
|
|
9
9
|
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
10
10
|
import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
|
|
11
11
|
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
|
|
12
|
-
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
|
|
13
12
|
import _Map from '@babel/runtime-corejs3/core-js-stable/map';
|
|
14
13
|
import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
|
|
15
14
|
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
|
|
@@ -44,7 +43,7 @@ import pipe from 'lodash/fp/pipe';
|
|
|
44
43
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
45
44
|
|
|
46
45
|
function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
47
|
-
const getEditorLanguageLabelBorderColor = props =>
|
|
46
|
+
const getEditorLanguageLabelBorderColor = props => `1px solid ${props.isReadOnly ? designTokens.borderColorForInputWhenReadonly : designTokens.borderColorForInputWhenDisabled}`;
|
|
48
47
|
const getBackgroundColor = props => {
|
|
49
48
|
if (props.isDisabled) {
|
|
50
49
|
return designTokens.backgroundColorForInputWhenDisabled;
|
|
@@ -157,8 +156,7 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
157
156
|
toggleLanguage(props.language);
|
|
158
157
|
}, [toggleLanguage, props.language]);
|
|
159
158
|
const updateRenderToggleButton = useCallback(() => {
|
|
160
|
-
|
|
161
|
-
const doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
|
|
159
|
+
const doesExceedCollapsedHeightLimit = Number(ref.current?.clientHeight) > COLLAPSED_HEIGHT;
|
|
162
160
|
if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
|
|
163
161
|
setRenderToggleButton(true);
|
|
164
162
|
}
|
|
@@ -172,8 +170,7 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
172
170
|
|
|
173
171
|
// resetting
|
|
174
172
|
const resetValue = useCallback(newValue => {
|
|
175
|
-
|
|
176
|
-
const newStringValue = typeof newValue === 'string' ? newValue : (_newValue$props$langu = newValue === null || newValue === void 0 ? void 0 : newValue[props.language]) !== null && _newValue$props$langu !== void 0 ? _newValue$props$langu : '';
|
|
173
|
+
const newStringValue = typeof newValue === 'string' ? newValue : newValue?.[props.language] ?? '';
|
|
177
174
|
resetEditor(editor, newStringValue);
|
|
178
175
|
}, [editor, props.language]);
|
|
179
176
|
/*
|
|
@@ -251,8 +248,7 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
251
248
|
autoFocus: props.isAutofocused,
|
|
252
249
|
onBlur: props.onBlur,
|
|
253
250
|
onFocus: event => {
|
|
254
|
-
|
|
255
|
-
(_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, event);
|
|
251
|
+
props.onFocus?.(event);
|
|
256
252
|
// opens the input if it regains focus and it's closed
|
|
257
253
|
if (!isOpen) {
|
|
258
254
|
toggle();
|
|
@@ -360,8 +356,7 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
|
|
|
360
356
|
// the consumer only cares about the serializedValue, so it doesn't make sense to call
|
|
361
357
|
// onChange unless this value changes.
|
|
362
358
|
if (hasSerializedValueChanged) {
|
|
363
|
-
|
|
364
|
-
(_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 || _this$props$onChange.call(_this$props, html.serialize(state));
|
|
359
|
+
_this.props.onChange?.(html.serialize(state));
|
|
365
360
|
}
|
|
366
361
|
if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
|
|
367
362
|
// this way we force update if cursor or selection changes
|
|
@@ -437,7 +432,7 @@ var RequiredValueErrorMessage$1 = RequiredValueErrorMessage;
|
|
|
437
432
|
|
|
438
433
|
const _excluded = ["horizontalConstraint", "showExpandIcon"];
|
|
439
434
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
440
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
435
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
441
436
|
const expandedTranslationsReducer = (state, action) => {
|
|
442
437
|
switch (action.type) {
|
|
443
438
|
case 'toggle':
|
|
@@ -500,11 +495,10 @@ const LocalizedRichTextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
500
495
|
});
|
|
501
496
|
}, [expandedTranslationsDispatch]);
|
|
502
497
|
const createChangeHandler = useCallback(language => state => {
|
|
503
|
-
|
|
504
|
-
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, {
|
|
498
|
+
props.onChange?.({
|
|
505
499
|
target: {
|
|
506
|
-
id: props
|
|
507
|
-
name: props
|
|
500
|
+
id: props?.id ? `${props.id}.${language}` : '',
|
|
501
|
+
name: props?.name ? `${props.name}.${language}` : '',
|
|
508
502
|
language,
|
|
509
503
|
value: state
|
|
510
504
|
}
|
|
@@ -524,9 +518,9 @@ const LocalizedRichTextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
524
518
|
}
|
|
525
519
|
const langRefs = useRef(new _Map());
|
|
526
520
|
const resetValue = useCallback(newValue => {
|
|
527
|
-
var
|
|
528
|
-
_forEachInstanceProperty(
|
|
529
|
-
langRef
|
|
521
|
+
var _context3;
|
|
522
|
+
_forEachInstanceProperty(_context3 = langRefs.current).call(_context3, langRef => {
|
|
523
|
+
langRef?.resetValue(newValue);
|
|
530
524
|
});
|
|
531
525
|
}, []);
|
|
532
526
|
useImperativeHandle(ref, () => {
|
|
@@ -593,6 +587,6 @@ LocalizedRichTextInput.isTouched = isTouched;
|
|
|
593
587
|
var LocalizedRichTextInput$1 = LocalizedRichTextInput;
|
|
594
588
|
|
|
595
589
|
// NOTE: This string will be replaced on build time with the package version.
|
|
596
|
-
var version = "20.
|
|
590
|
+
var version = "20.6.0";
|
|
597
591
|
|
|
598
592
|
export { LocalizedRichTextInput$1 as default, version };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/localized-rich-text-input",
|
|
3
3
|
"description": "A controlled text input component for localized rich text input with validation states.",
|
|
4
|
-
"version": "20.
|
|
4
|
+
"version": "20.6.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -9,7 +9,13 @@
|
|
|
9
9
|
"directory": "packages/components/inputs/localized-rich-text-input"
|
|
10
10
|
},
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
|
-
"keywords": [
|
|
12
|
+
"keywords": [
|
|
13
|
+
"javascript",
|
|
14
|
+
"typescript",
|
|
15
|
+
"design-system",
|
|
16
|
+
"react",
|
|
17
|
+
"uikit"
|
|
18
|
+
],
|
|
13
19
|
"license": "MIT",
|
|
14
20
|
"publishConfig": {
|
|
15
21
|
"access": "public"
|
|
@@ -17,44 +23,50 @@
|
|
|
17
23
|
"sideEffects": false,
|
|
18
24
|
"main": "dist/commercetools-uikit-localized-rich-text-input.cjs.js",
|
|
19
25
|
"module": "dist/commercetools-uikit-localized-rich-text-input.esm.js",
|
|
20
|
-
"files": [
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
21
29
|
"dependencies": {
|
|
22
30
|
"@babel/runtime": "^7.20.13",
|
|
23
31
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/collapsible-motion": "20.5.0",
|
|
25
|
-
"@commercetools-uikit/constraints": "20.5.0",
|
|
26
|
-
"@commercetools-uikit/design-system": "20.5.0",
|
|
27
|
-
"@commercetools-uikit/flat-button": "20.5.0",
|
|
28
|
-
"@commercetools-uikit/hooks": "20.5.0",
|
|
29
|
-
"@commercetools-uikit/icons": "20.5.0",
|
|
30
|
-
"@commercetools-uikit/input-utils": "20.5.0",
|
|
31
|
-
"@commercetools-uikit/localized-utils": "20.5.0",
|
|
32
|
-
"@commercetools-uikit/messages": "20.5.0",
|
|
33
|
-
"@commercetools-uikit/rich-text-utils": "20.5.0",
|
|
34
|
-
"@commercetools-uikit/spacings-inline": "20.5.0",
|
|
35
|
-
"@commercetools-uikit/spacings-stack": "20.5.0",
|
|
36
|
-
"@commercetools-uikit/text": "20.5.0",
|
|
37
|
-
"@commercetools-uikit/tooltip": "20.5.0",
|
|
38
|
-
"@commercetools-uikit/utils": "20.5.0",
|
|
39
32
|
"@emotion/react": "^11.10.5",
|
|
40
33
|
"@emotion/styled": "^11.10.5",
|
|
41
34
|
"downshift": "9.0.10",
|
|
42
|
-
"immutable": "4.3.
|
|
35
|
+
"immutable": "4.3.8",
|
|
43
36
|
"is-hotkey": "0.2.0",
|
|
44
|
-
"lodash": "4.
|
|
37
|
+
"lodash": "4.18.1",
|
|
45
38
|
"react-textarea-autosize": "8.4.0",
|
|
46
39
|
"slate": "0.75.0",
|
|
47
40
|
"slate-history": "0.113.1",
|
|
48
|
-
"slate-react": "0.75.0"
|
|
41
|
+
"slate-react": "0.75.0",
|
|
42
|
+
"@commercetools-uikit/collapsible-motion": "^20.6.0",
|
|
43
|
+
"@commercetools-uikit/design-system": "^20.6.0",
|
|
44
|
+
"@commercetools-uikit/constraints": "^20.6.0",
|
|
45
|
+
"@commercetools-uikit/flat-button": "^20.6.0",
|
|
46
|
+
"@commercetools-uikit/hooks": "^20.6.0",
|
|
47
|
+
"@commercetools-uikit/input-utils": "^20.6.0",
|
|
48
|
+
"@commercetools-uikit/rich-text-utils": "^20.6.0",
|
|
49
|
+
"@commercetools-uikit/messages": "^20.6.0",
|
|
50
|
+
"@commercetools-uikit/spacings-inline": "^20.6.0",
|
|
51
|
+
"@commercetools-uikit/spacings-stack": "^20.6.0",
|
|
52
|
+
"@commercetools-uikit/text": "^20.6.0",
|
|
53
|
+
"@commercetools-uikit/icons": "^20.6.0",
|
|
54
|
+
"@commercetools-uikit/utils": "^20.6.0",
|
|
55
|
+
"@commercetools-uikit/localized-utils": "^20.6.0",
|
|
56
|
+
"@commercetools-uikit/tooltip": "^20.6.0"
|
|
49
57
|
},
|
|
50
58
|
"devDependencies": {
|
|
51
59
|
"react": "19.2.0",
|
|
52
60
|
"react-dom": "19.2.0",
|
|
53
|
-
"react-intl": "^7.1.4"
|
|
61
|
+
"react-intl": "^7.1.4",
|
|
62
|
+
"react-router-dom": "5.3.4",
|
|
63
|
+
"@commercetools-uikit/collapsible-panel": "^20.6.0",
|
|
64
|
+
"@commercetools-uikit/spacings": "^20.6.0",
|
|
65
|
+
"@commercetools-uikit/primary-button": "^20.6.0"
|
|
54
66
|
},
|
|
55
67
|
"peerDependencies": {
|
|
56
68
|
"react": "19.x",
|
|
57
69
|
"react-dom": "19.x",
|
|
58
70
|
"react-intl": "7.x"
|
|
59
71
|
}
|
|
60
|
-
}
|
|
72
|
+
}
|