@commercetools-uikit/rich-text-input 13.0.2 → 14.0.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.
Files changed (12) hide show
  1. package/README.md +73 -27
  2. package/dist/commercetools-uikit-rich-text-input.cjs.d.ts +2 -0
  3. package/dist/commercetools-uikit-rich-text-input.cjs.dev.js +100 -81
  4. package/dist/commercetools-uikit-rich-text-input.cjs.prod.js +59 -42
  5. package/dist/commercetools-uikit-rich-text-input.esm.js +100 -80
  6. package/dist/declarations/src/editor.d.ts +29 -0
  7. package/dist/declarations/src/editor.styles.d.ts +8 -0
  8. package/dist/declarations/src/editor.types.d.ts +100 -0
  9. package/dist/declarations/src/index.d.ts +2 -0
  10. package/dist/declarations/src/rich-text-input.d.ts +68 -0
  11. package/dist/declarations/src/version.d.ts +2 -0
  12. package/package.json +17 -18
package/README.md CHANGED
@@ -1,49 +1,95 @@
1
+ <!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
2
+ <!-- This file is created by the `yarn generate-readme` script. -->
3
+
1
4
  # RichTextInput
2
5
 
3
6
  ## Description
4
7
 
5
- A controlled rich text input component for rich text with validation
6
- states.
8
+ A controlled rich text input component for rich text with validation states.
9
+
10
+ ## Installation
11
+
12
+ ```
13
+ yarn add @commercetools-uikit/rich-text-input
14
+ ```
15
+
16
+ ```
17
+ npm --save install @commercetools-uikit/rich-text-input
18
+ ```
19
+
20
+ Additionally install the peer dependencies (if not present)
21
+
22
+ ```
23
+ yarn add react react-intl
24
+ ```
25
+
26
+ ```
27
+ npm --save install react react-intl
28
+ ```
7
29
 
8
30
  ## Usage
9
31
 
10
- ```js
32
+ ```jsx
33
+ import React from 'react';
11
34
  import RichTextInput from '@commercetools-uikit/rich-text-input';
12
35
 
13
36
  const html = '<p>hello world</p>';
14
37
 
15
- const Input = props => {
38
+ const Example = (props) => {
16
39
  const [value, setValue] = React.useState(html);
17
40
  return (
18
41
  <RichTextInput
19
42
  value={value}
20
- onChange={event => { setValue(event.target.value)}
21
- />;
22
- )
23
- }
43
+ onChange={(event) => {
44
+ setValue(event.target.value);
45
+ }}
46
+ />
47
+ );
48
+ };
49
+
50
+ export default Example;
24
51
  ```
25
52
 
26
53
  ## Properties
27
54
 
28
- | Props | Type | Required | Values | Default | Description |
29
- | ---------------------------- | -------- | :------: | ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
30
- | `name` | `string` | - | - | - | Used as HTML `name` property |
31
- | `autoComplete` | `string` | - | - | - | Used as HTML `autoComplete` property |
32
- | `id` | `string` | - | - | - | Specifies the id of an element |
33
- | `value` | `string` | ✅ | - | - | Value of the input |
34
- | `onChange` | `func` | ✅ | - | - | Called with an event containing the new value. Required, unless input is `read-only`. Parent should pass it back as `value` |
35
- | `onBlur` | `func` | - | - | - | Called when field is blurred |
36
- | `onFocus` | `func` | - | - | - | Called when field is focused |
37
- | `isAutofocussed` | `bool` | - | - | - | Focuses the input field on initial render |
38
- | `defaultExpandMultilineText` | `bool` | - | - | `false` | Expands rich text input initially |
39
- | `placeholder` | `string` | - | - | - | Placeholder text for the input |
40
- | `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
41
- | `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
42
- | `hasError` | `bool` | - | - | `false` | Indicates the input field has an error |
43
- | `hasWarning` | `bool` | - | - | `false` | Indicates the input field has a warning |
44
- | `horizontalConstraint` | `object` | | `m`, `l`, `xl`, `scale` | `scale` | Horizontal size limit of the input fields. |
45
- | `showExpandIcon` | `bool` | - | - | `false` | Shows an `expand` icon in the toolbar |
46
- | `onClickExpand` | `func` | - | - | - | Called when the `expand` button is clicked |
55
+ | Props | Type | Required | Default | Description |
56
+ | ---------------------------- | ---------------------------------------------------- | :------: | --------- | ------------------------------------------------------------------------------------------------------------------------- |
57
+ | `isAutofocussed` | `boolean` | | | Focus the control when it is mounted |
58
+ | `defaultExpandMultilineText` | `TEditorProps['defaultExpandMultilineText']` | | `false` | Expands multiline text input initially |
59
+ | `hasError` | `TEditorProps['hasError']` | | | Indicates the input field has an error |
60
+ | `hasWarning` | `TEditorProps['hasWarning']` | | | Indicates the input field has warning |
61
+ | `id` | `string` | | | Used as the HTML `id` attribute. |
62
+ | `name` | `string` | | | Used as the HTML `name` attribute. |
63
+ | `placeholder` | `string` | | `''` | Placeholder value to show in the input field |
64
+ | `isDisabled` | `TEditorProps['isDisabled']` | | | Disables the rich text input |
65
+ | `isReadOnly` | `TEditorProps['isReadOnly']` | | | Indicates that the rich text input is displaying read-only content |
66
+ | `horizontalConstraint` | `TEditorProps['horizontalConstraint']` | | `'scale'` | Horizontal size limit of the input fields |
67
+ | `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
68
+ | `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
69
+ | `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
70
+ | `value` | `string` | | | Value of the input component. |
71
+ | `showExpandIcon` | `TEditorProps['showExpandIcon']` | | `false` | Indicates whether the expand icon should be visible |
72
+ | `onClickExpand` | `TEditorProps['onClickExpand']` | | | Called when the `expand` button is clicked |
73
+
74
+ ## Signatures
75
+
76
+ ### Signature `onChange`
77
+
78
+ ```ts
79
+ (event: TChangeEvent) => void
80
+ ```
81
+
82
+ ### Signature `onFocus`
83
+
84
+ ```ts
85
+ (event: TFocusEvent) => void
86
+ ```
87
+
88
+ ### Signature `onBlur`
89
+
90
+ ```ts
91
+ (event: TFocusEvent) => void
92
+ ```
47
93
 
48
94
  ## Static methods
49
95
 
package/dist/commercetools-uikit-rich-text-input.cjs.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./declarations/src/index";
2
+ export { default } from "./declarations/src/index";
package/dist/commercetools-uikit-rich-text-input.cjs.dev.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
6
5
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
7
6
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
8
7
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -11,17 +10,17 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
11
10
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
12
11
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
13
12
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
14
- var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
13
+ var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
15
14
  var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
16
15
  var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
17
16
  var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
18
17
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
19
18
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
19
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
20
+ var _pt = require('prop-types');
20
21
  var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
21
22
  var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
22
23
  var react = require('react');
23
- var PropTypes = require('prop-types');
24
- var requiredIf = require('react-required-if');
25
24
  var slateReact = require('slate-react');
26
25
  var pick = require('lodash/pick');
27
26
  var utils = require('@commercetools-uikit/utils');
@@ -40,7 +39,6 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
40
39
 
41
40
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
42
41
 
43
- var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
44
42
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
45
43
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
46
44
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -49,10 +47,10 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
49
47
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
50
48
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
51
49
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
50
+ var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
51
+ var _pt__default = /*#__PURE__*/_interopDefault(_pt);
52
52
  var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
53
53
  var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
54
- var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
55
- var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
56
54
  var pick__default = /*#__PURE__*/_interopDefault(pick);
57
55
  var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
58
56
  var Stack__default = /*#__PURE__*/_interopDefault(Stack);
@@ -60,24 +58,23 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
60
58
  var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
61
59
  var _styled__default = /*#__PURE__*/_interopDefault(_styled);
62
60
 
63
- /* eslint-disable import/prefer-default-export */
64
61
  var EditorWrapper = _styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
65
- target: "e125ents0"
62
+ target: "e1d53kc50"
66
63
  } : {
67
- target: "e125ents0",
64
+ target: "e1d53kc50",
68
65
  label: "EditorWrapper"
69
66
  })("align-self:stretch;cursor:", function (props) {
70
- return props.isDisabled ? 'not-allowed' : 'inherit';
71
- }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVkaXRvci5zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2dDIiwiZmlsZSI6ImVkaXRvci5zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0ICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmNvbnN0IEVkaXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBhbGlnbi1zZWxmOiBzdHJldGNoO1xuICBjdXJzb3I6ICR7KHByb3BzKSA9PiAocHJvcHMuaXNEaXNhYmxlZCA/ICdub3QtYWxsb3dlZCcgOiAnaW5oZXJpdCcpfTtcbmA7XG5cbmV4cG9ydCB7IEVkaXRvcldyYXBwZXIgfTtcbiJdfQ== */"));
67
+ return props.isDisabled || props.isReadOnly ? 'not-allowed' : 'inherit';
68
+ }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVkaXRvci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3FEIiwiZmlsZSI6ImVkaXRvci5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgdHlwZSB7IFRFZGl0b3JQcm9wcyB9IGZyb20gJy4vZWRpdG9yJztcblxudHlwZSBURWRpdG9yV3JhcHBlclByb3BzID0gUGljazxURWRpdG9yUHJvcHMsICdpc0Rpc2FibGVkJyB8ICdpc1JlYWRPbmx5Jz47XG5cbmNvbnN0IEVkaXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2PFRFZGl0b3JXcmFwcGVyUHJvcHM+YFxuICBhbGlnbi1zZWxmOiBzdHJldGNoO1xuICBjdXJzb3I6ICR7KHByb3BzKSA9PlxuICAgIHByb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuaXNSZWFkT25seSA/ICdub3QtYWxsb3dlZCcgOiAnaW5oZXJpdCd9O1xuYDtcblxuZXhwb3J0IHsgRWRpdG9yV3JhcHBlciB9O1xuIl19 */"));
72
69
 
73
70
  function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
74
71
 
75
72
  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
76
73
  var COLLAPSED_HEIGHT = 32;
77
74
 
78
- var Editor = function Editor(props) {
75
+ var Editor$1 = function Editor(props) {
79
76
  var intl = reactIntl.useIntl();
80
- var ref = react.useRef();
77
+ var ref = react.useRef(null);
81
78
  var prevIsFocused = hooks.usePrevious(props.editor.value.selection.isFocused);
82
79
 
83
80
  var _useState = react.useState(false),
@@ -86,7 +83,9 @@ var Editor = function Editor(props) {
86
83
  setRenderToggleButton = _useState2[1];
87
84
 
88
85
  var updateRenderToggleButton = react.useCallback(function () {
89
- var doesExceedCollapsedHeightLimit = ref.current.clientHeight > COLLAPSED_HEIGHT;
86
+ var _ref$current;
87
+
88
+ var doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
90
89
 
91
90
  if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
92
91
  setRenderToggleButton(true);
@@ -113,6 +112,10 @@ var Editor = function Editor(props) {
113
112
  toggle();
114
113
  }
115
114
 
115
+ var refObj = {
116
+ containerRef: ref,
117
+ registerContentNode: registerContentNode
118
+ };
116
119
  return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
117
120
  max: props.horizontalConstraint,
118
121
  children: jsxRuntime.jsxs(Stack__default["default"], {
@@ -122,22 +125,18 @@ var Editor = function Editor(props) {
122
125
  isDisabled: props.isDisabled,
123
126
  isReadOnly: props.isReadOnly,
124
127
  children: jsxRuntime.jsx(richTextUtils.RichTextBody, {
125
- ref: {
126
- containerRef: ref,
127
- registerContentNode: registerContentNode
128
- },
128
+ ref: refObj,
129
129
  hasError: props.hasError,
130
130
  isDisabled: props.isDisabled,
131
131
  hasWarning: props.hasWarning,
132
- isReadOnly: props.isReadOnly,
133
- showExpandIcon: props.showExpandIcon,
132
+ isReadOnly: Boolean(props.isReadOnly),
133
+ showExpandIcon: Boolean(props.showExpandIcon),
134
134
  onClickExpand: props.onClickExpand,
135
135
  editor: props.editor,
136
136
  containerStyles: containerStyles,
137
137
  children: props.children
138
138
  })
139
- }), renderToggleButton && // <div>
140
- jsxRuntime.jsx(FlatButton__default["default"], {
139
+ }), renderToggleButton && jsxRuntime.jsx(FlatButton__default["default"], {
141
140
  onClick: toggle,
142
141
  label: isOpen ? intl.formatMessage(inputUtils.messagesMultilineInput.collapse) : intl.formatMessage(inputUtils.messagesMultilineInput.expand),
143
142
  icon: isOpen ? jsxRuntime.jsx(icons.AngleUpIcon, {
@@ -145,14 +144,30 @@ var Editor = function Editor(props) {
145
144
  }) : jsxRuntime.jsx(icons.AngleDownIcon, {
146
145
  size: "small"
147
146
  })
148
- }) // </div>
149
- ]
147
+ })]
150
148
  })
151
149
  });
152
150
  }
153
151
  });
154
- }; // eslint-disable-next-line react/display-name
152
+ };
155
153
 
154
+ Editor$1.propTypes = process.env.NODE_ENV !== "production" ? {
155
+ editor: _pt__default["default"].any.isRequired,
156
+ id: _pt__default["default"].string,
157
+ name: _pt__default["default"].string,
158
+ placeholder: _pt__default["default"].string,
159
+ disabled: _pt__default["default"].bool,
160
+ readOnly: _pt__default["default"].bool,
161
+ horizontalConstraint: _pt__default["default"].oneOf([7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
162
+ children: _pt__default["default"].node,
163
+ isDisabled: _pt__default["default"].bool,
164
+ isReadOnly: _pt__default["default"].bool,
165
+ showExpandIcon: _pt__default["default"].bool.isRequired,
166
+ onClickExpand: _pt__default["default"].func,
167
+ hasWarning: _pt__default["default"].bool,
168
+ hasError: _pt__default["default"].bool,
169
+ defaultExpandMultilineText: _pt__default["default"].bool
170
+ } : {};
156
171
 
157
172
  var renderEditor = function renderEditor(props, editor, next) {
158
173
  var internalId = "".concat(props.id, "__internal__id");
@@ -164,11 +179,11 @@ var renderEditor = function renderEditor(props, editor, next) {
164
179
  var passedProps = _objectSpread$1(_objectSpread$1({
165
180
  name: props.name,
166
181
  id: props.id,
167
- isReadOnly: props.readOnly,
168
- isDisabled: props.disabled
182
+ isReadOnly: Boolean(props.readOnly),
183
+ isDisabled: Boolean(props.disabled)
169
184
  }, pick__default["default"](props.options, ['horizontalConstraint', 'defaultExpandMultilineText', 'showExpandIcon', 'onClickExpand', 'hasError', 'hasWarning'])), utils.filterDataAttributes(props));
170
185
 
171
- return jsxRuntime.jsxs(Editor, _objectSpread$1(_objectSpread$1({
186
+ return jsxRuntime.jsxs(Editor$1, _objectSpread$1(_objectSpread$1({
172
187
  editor: editor
173
188
  }, passedProps), {}, {
174
189
  children: [children, jsxRuntime.jsx(richTextUtils.HiddenInput, {
@@ -176,38 +191,40 @@ var renderEditor = function renderEditor(props, editor, next) {
176
191
  handleFocus: editor.focus,
177
192
  id: props.id,
178
193
  disabled: props.disabled,
179
- readOnly: props.readOnly
194
+ readOnly: Boolean(props.readOnly)
180
195
  })]
181
196
  }));
182
197
  };
183
198
 
184
- var sharedProps = process.env.NODE_ENV !== "production" ? {
185
- id: PropTypes__default["default"].string,
186
- name: PropTypes__default["default"].string,
187
- placeholder: PropTypes__default["default"].string,
188
- disabled: PropTypes__default["default"].bool,
189
- readOnly: PropTypes__default["default"].bool,
190
- horizontalConstraint: PropTypes__default["default"].oneOf([7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
191
- } : {};
192
- Editor.displayName = 'Editor';
193
- Editor.propTypes = process.env.NODE_ENV !== "production" ? _objectSpread$1(_objectSpread$1({}, sharedProps), {}, {
194
- editor: PropTypes__default["default"].any
195
- }) : {};
196
- renderEditor.propTypes = process.env.NODE_ENV !== "production" ? _objectSpread$1(_objectSpread$1({}, sharedProps), {}, {
197
- options: PropTypes__default["default"].shape({
198
- hasWarning: PropTypes__default["default"].bool,
199
- hasError: PropTypes__default["default"].bool
200
- })
201
- }) : {};
199
+ Editor$1.displayName = 'Editor';
202
200
  var renderEditor$1 = renderEditor;
203
201
 
202
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
203
+
204
+ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
205
+
204
206
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
205
207
 
206
208
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
207
209
 
208
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
210
+ // This is a temporary wrapper component helping to mitigate typing issues of `slate-react@0.22.10` package.
211
+ // TODO: remove after upgrade of `slate-react` to the latest version
212
+ var Editor = function Editor(props) {
213
+ return jsxRuntime.jsx(slateReact.Editor, _objectSpread({}, props));
214
+ };
209
215
 
210
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
216
+ Editor.propTypes = process.env.NODE_ENV !== "production" ? {
217
+ autoFocus: _pt__default["default"].bool,
218
+ id: _pt__default["default"].string,
219
+ name: _pt__default["default"].string,
220
+ onFocus: _pt__default["default"].func,
221
+ onBlur: _pt__default["default"].func,
222
+ value: _pt__default["default"].any.isRequired,
223
+ options: _pt__default["default"].any.isRequired,
224
+ onChange: _pt__default["default"].func,
225
+ plugins: _pt__default["default"].any.isRequired,
226
+ renderEditor: _pt__default["default"].any.isRequired
227
+ } : {};
211
228
 
212
229
  var RichTextInput = /*#__PURE__*/function (_PureComponent) {
213
230
  _inherits(RichTextInput, _PureComponent);
@@ -226,7 +243,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
226
243
  }
227
244
 
228
245
  _this = _super.call.apply(_super, _concatInstanceProperty__default["default"](_context = [this]).call(_context, args));
229
- _this.serializedValue = _this.props.value || '';
246
+ _this.serializedValue = _this.props.value;
230
247
  _this.internalSlateValue = richTextUtils.html.deserialize(_this.props.value || '');
231
248
 
232
249
  _this.onValueChange = function (event) {
@@ -243,6 +260,8 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
243
260
  // onChange unless this value changes.
244
261
 
245
262
  if (hasSerializedValueChanged) {
263
+ var _this$props$onChange, _this$props;
264
+
246
265
  var fakeEvent = {
247
266
  target: {
248
267
  id: _this.props.id,
@@ -250,8 +269,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
250
269
  value: serializedValue
251
270
  }
252
271
  };
253
-
254
- _this.props.onChange(fakeEvent);
272
+ (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, fakeEvent);
255
273
  }
256
274
 
257
275
  if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
@@ -260,7 +278,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
260
278
  }
261
279
  };
262
280
 
263
- _this.onBlur = function (event, editor, next) {
281
+ _this.onBlur = function (_event, _editor, next) {
264
282
  next();
265
283
 
266
284
  if (_this.props.onBlur) {
@@ -272,12 +290,14 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
272
290
  };
273
291
 
274
292
  _setTimeout__default["default"](function () {
275
- return _this.props.onBlur(fakeEvent);
293
+ var _this$props$onBlur, _this$props2;
294
+
295
+ return (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, fakeEvent);
276
296
  }, 0);
277
297
  }
278
298
  };
279
299
 
280
- _this.onFocus = function (event, editor, next) {
300
+ _this.onFocus = function (_event, _editor, next) {
281
301
  next();
282
302
 
283
303
  if (_this.props.onFocus) {
@@ -289,7 +309,9 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
289
309
  };
290
310
 
291
311
  _setTimeout__default["default"](function () {
292
- return _this.props.onFocus(fakeEvent);
312
+ var _this$props$onFocus, _this$props3;
313
+
314
+ return (_this$props$onFocus = (_this$props3 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props3, fakeEvent);
293
315
  }, 0);
294
316
  }
295
317
  };
@@ -309,15 +331,24 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
309
331
  // can understand, save this value to our class variable, and forceUpdate
310
332
  // this keeps the component in sync.
311
333
  if (this.props.value !== this.serializedValue) {
312
- this.internalSlateValue = richTextUtils.html.deserialize(this.props.value);
313
- this.serializedValue = this.props.value;
334
+ var value = this.props.value || '';
335
+ this.internalSlateValue = richTextUtils.html.deserialize(value);
336
+ this.serializedValue = value;
314
337
  this.forceUpdate();
315
338
  }
316
339
  }
317
340
  }, {
318
341
  key: "render",
319
342
  value: function render() {
320
- return jsxRuntime.jsx(slateReact.Editor, _objectSpread(_objectSpread({}, utils.filterDataAttributes(this.props)), {}, {
343
+ if (!this.props.isReadOnly) {
344
+ process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'RichTextInput: "onChange" is required when field is not read only.') : void 0;
345
+ }
346
+
347
+ if (this.props.showExpandIcon) {
348
+ process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onClickExpand === 'function', 'RichTextInput: "onClickExpand" is required when showExpandIcon is true') : void 0;
349
+ }
350
+
351
+ return jsxRuntime.jsx(Editor, _objectSpread(_objectSpread({}, utils.filterDataAttributes(this.props)), {}, {
321
352
  autoFocus: this.props.isAutofocussed,
322
353
  id: this.props.id,
323
354
  name: this.props.name,
@@ -354,31 +385,19 @@ RichTextInput.isTouched = function (touched) {
354
385
  };
355
386
 
356
387
  RichTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
357
- isAutofocussed: PropTypes__default["default"].bool,
358
- defaultExpandMultilineText: PropTypes__default["default"].bool,
359
- hasError: PropTypes__default["default"].bool,
360
- hasWarning: PropTypes__default["default"].bool,
361
- id: PropTypes__default["default"].string,
362
- name: PropTypes__default["default"].string,
363
- placeholder: PropTypes__default["default"].string.isRequired,
364
- isDisabled: PropTypes__default["default"].bool,
365
- isReadOnly: PropTypes__default["default"].bool,
366
- horizontalConstraint: PropTypes__default["default"].oneOf([7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
367
- onChange: requiredIf__default["default"](PropTypes__default["default"].func, function (props) {
368
- return !props.isReadOnly;
369
- }),
370
- onFocus: PropTypes__default["default"].func,
371
- onBlur: PropTypes__default["default"].func,
372
- value: PropTypes__default["default"].string,
373
- showExpandIcon: PropTypes__default["default"].bool.isRequired,
374
- onClickExpand: requiredIf__default["default"](PropTypes__default["default"].func, function (props) {
375
- return props.showExpandIcon;
376
- })
388
+ isAutofocussed: _pt__default["default"].bool,
389
+ id: _pt__default["default"].string,
390
+ name: _pt__default["default"].string,
391
+ placeholder: _pt__default["default"].string,
392
+ onChange: _pt__default["default"].func,
393
+ onFocus: _pt__default["default"].func,
394
+ onBlur: _pt__default["default"].func,
395
+ value: _pt__default["default"].string
377
396
  } : {};
378
397
  var RichTextInput$1 = RichTextInput;
379
398
 
380
399
  // NOTE: This string will be replaced on build time with the package version.
381
- var version = "13.0.2";
400
+ var version = "14.0.0";
382
401
 
383
402
  exports["default"] = RichTextInput$1;
384
403
  exports.version = version;