@commercetools-uikit/rich-text-input 14.0.3 → 15.0.2

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 (8) hide show
  1. package/README.md +33 -32
  2. package/dist/commercetools-uikit-rich-text-input.cjs.dev.js +156 -173
  3. package/dist/commercetools-uikit-rich-text-input.cjs.prod.js +144 -142
  4. package/dist/commercetools-uikit-rich-text-input.esm.js +156 -173
  5. package/dist/declarations/src/editor.d.ts +10 -13
  6. package/dist/declarations/src/rich-text-input.d.ts +19 -49
  7. package/package.json +16 -16
  8. package/dist/declarations/src/editor.types.d.ts +0 -100
package/README.md CHANGED
@@ -37,13 +37,19 @@ const html = '<p>hello world</p>';
37
37
 
38
38
  const Example = (props) => {
39
39
  const [value, setValue] = React.useState(html);
40
+ const handleChange = React.useCallback((event) => {
41
+ setValue(event.target.value);
42
+ }, []);
43
+ const ref = React.useRef(null);
44
+ const handleReset = React.useCallback(() => {
45
+ ref.current?.resetValue('<p>after reset</p>');
46
+ }, []);
47
+
40
48
  return (
41
- <RichTextInput
42
- value={value}
43
- onChange={(event) => {
44
- setValue(event.target.value);
45
- }}
46
- />
49
+ <>
50
+ <button onClick={handleReset}>Reset</button>
51
+ <RichTextInput value={value} onChange={handleChange} ref={ref} />
52
+ </>
47
53
  );
48
54
  };
49
55
 
@@ -52,24 +58,25 @@ export default Example;
52
58
 
53
59
  ## Properties
54
60
 
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 |
61
+ | Props | Type | Required | Default | Description |
62
+ | ---------------------------- | ----------------------------------------------------------------------------------------- | :------: | --------- | ------------------------------------------------------------------------------------------------------------------------- |
63
+ | `isAutofocussed` | `boolean` | | | Focus the control when it is mounted |
64
+ | `defaultExpandMultilineText` | `boolean` | | `false` | Expands multiline text input initially |
65
+ | `hasError` | `boolean` | | | Indicates the input field has an error |
66
+ | `hasWarning` | `boolean` | | | Indicates the input field has warning |
67
+ | `id` | `string` | | | Used as the HTML `id` attribute. |
68
+ | `name` | `string` | | | Used as the HTML `name` attribute. |
69
+ | `placeholder` | `string` | | `''` | Placeholder value to show in the input field |
70
+ | `isDisabled` | `boolean` | | | Disables the rich text input |
71
+ | `isReadOnly` | `boolean` | | | Indicates that the rich text input is displaying read-only content |
72
+ | `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields |
73
+ | `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. |
74
+ | `onFocus` | `FocusEventHandler` | | | Called when input is focused |
75
+ | `onBlur` | `FocusEventHandler` | | | Called when input is blurred |
76
+ | `value` | `string` | | | Value of the input component. |
77
+ | `showExpandIcon` | `boolean` | | `false` | Indicates whether the expand icon should be visible |
78
+ | `onClickExpand` | `Function`<br/>[See signature.](#signature-onClickExpand) | | | Called when the `expand` button is clicked |
79
+ | `parentRef` | `ForwardedRef` | | | |
73
80
 
74
81
  ## Signatures
75
82
 
@@ -79,16 +86,10 @@ export default Example;
79
86
  (event: TChangeEvent) => void
80
87
  ```
81
88
 
82
- ### Signature `onFocus`
83
-
84
- ```ts
85
- (event: TFocusEvent) => void
86
- ```
87
-
88
- ### Signature `onBlur`
89
+ ### Signature `onClickExpand`
89
90
 
90
91
  ```ts
91
- (event: TFocusEvent) => void
92
+ () => boolean;
92
93
  ```
93
94
 
94
95
  ## Static methods
package/dist/commercetools-uikit-rich-text-input.cjs.dev.js CHANGED
@@ -2,6 +2,7 @@
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');
5
6
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
6
7
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
7
8
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -10,35 +11,36 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
10
11
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
11
12
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
12
13
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
13
- var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
14
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
14
15
  var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
15
16
  var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
16
17
  var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
17
18
  var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
18
19
  var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
19
- var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
20
20
  var _pt = require('prop-types');
21
21
  var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
22
- var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
23
22
  var react = require('react');
24
- var slateReact = require('slate-react');
25
- var pick = require('lodash/pick');
26
23
  var utils = require('@commercetools-uikit/utils');
27
24
  var richTextUtils = require('@commercetools-uikit/rich-text-utils');
28
25
  var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
29
26
  var reactIntl = require('react-intl');
30
27
  var CollapsibleMotion = require('@commercetools-uikit/collapsible-motion');
31
- var hooks = require('@commercetools-uikit/hooks');
32
28
  var Stack = require('@commercetools-uikit/spacings-stack');
33
29
  var icons = require('@commercetools-uikit/icons');
34
30
  var Constraints = require('@commercetools-uikit/constraints');
35
31
  var FlatButton = require('@commercetools-uikit/flat-button');
36
32
  var inputUtils = require('@commercetools-uikit/input-utils');
33
+ var slateReact = require('slate-react');
34
+ var slate = require('slate');
35
+ var slateHistory = require('slate-history');
36
+ var isHotkey = require('is-hotkey');
37
+ var pipe = require('lodash/fp/pipe');
37
38
  var _styled = require('@emotion/styled/base');
38
39
  var jsxRuntime = require('@emotion/react/jsx-runtime');
39
40
 
40
41
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
41
42
 
43
+ var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
42
44
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
43
45
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
44
46
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -47,15 +49,14 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
47
49
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
48
50
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
49
51
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
50
- var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
51
52
  var _pt__default = /*#__PURE__*/_interopDefault(_pt);
52
53
  var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
53
- var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
54
- var pick__default = /*#__PURE__*/_interopDefault(pick);
55
54
  var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
56
55
  var Stack__default = /*#__PURE__*/_interopDefault(Stack);
57
56
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
58
57
  var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
58
+ var isHotkey__default = /*#__PURE__*/_interopDefault(isHotkey);
59
+ var pipe__default = /*#__PURE__*/_interopDefault(pipe);
59
60
  var _styled__default = /*#__PURE__*/_interopDefault(_styled);
60
61
 
61
62
  var EditorWrapper = _styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
@@ -70,12 +71,30 @@ var EditorWrapper = _styled__default["default"]("div", process.env.NODE_ENV ===
70
71
  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; }
71
72
 
72
73
  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; }
74
+ var HOTKEYS = {
75
+ 'mod+b': 'bold',
76
+ 'mod+i': 'italic',
77
+ 'mod+u': 'underline',
78
+ 'mod+`': 'code'
79
+ };
73
80
  var COLLAPSED_HEIGHT = 32;
74
81
 
75
- var Editor$1 = function Editor(props) {
82
+ var renderElement = function renderElement(props) {
83
+ return jsxRuntime.jsx(richTextUtils.Element, _objectSpread$1({}, props));
84
+ };
85
+
86
+ var renderLeaf = function renderLeaf(props) {
87
+ return jsxRuntime.jsx(richTextUtils.Leaf, _objectSpread$1({}, props));
88
+ };
89
+
90
+ var Editor = /*#__PURE__*/react.forwardRef(function (props, forwardedRef) {
76
91
  var intl = reactIntl.useIntl();
77
92
  var ref = react.useRef(null);
78
- var prevIsFocused = hooks.usePrevious(props.editor.value.selection.isFocused);
93
+ var createEditorWithPlugins = pipe__default["default"](slateReact.withReact, slateHistory.withHistory); // eslint-disable-next-line react-hooks/exhaustive-deps
94
+
95
+ var editor = react.useMemo(function () {
96
+ return createEditorWithPlugins(slate.createEditor());
97
+ }, []);
79
98
 
80
99
  var _useState = react.useState(false),
81
100
  _useState2 = _slicedToArray(_useState, 2),
@@ -97,7 +116,23 @@ var Editor$1 = function Editor(props) {
97
116
  }, [setRenderToggleButton, renderToggleButton]);
98
117
  react.useEffect(function () {
99
118
  updateRenderToggleButton();
100
- }, [props.editor.value.document, updateRenderToggleButton]);
119
+ }, [editor, updateRenderToggleButton]); // resetting
120
+
121
+ var resetValue = react.useCallback(function (newValue) {
122
+ richTextUtils.resetEditor(editor, newValue);
123
+ }, [editor]);
124
+ /*
125
+ Resetting the editor requires access to `editor` object returned from `useSlate` hook.
126
+ Therefore, `reset` function is attached to the passed `ref` object via `useImperativeHandle` hook
127
+ to be called from the parent component.
128
+ e.g. <button onMouseDown={() => ref.current?.resetValue("<p><strong>Value after reset</strong></p>")}>Reset</button>
129
+ */
130
+
131
+ react.useImperativeHandle(forwardedRef, function () {
132
+ return {
133
+ resetValue: resetValue
134
+ };
135
+ });
101
136
  return jsxRuntime.jsx(CollapsibleMotion__default["default"], {
102
137
  minHeight: COLLAPSED_HEIGHT,
103
138
  isDefaultClosed: !props.defaultExpandMultilineText,
@@ -106,12 +141,6 @@ var Editor$1 = function Editor(props) {
106
141
  toggle = _ref.toggle,
107
142
  containerStyles = _ref.containerStyles,
108
143
  registerContentNode = _ref.registerContentNode;
109
-
110
- // opens the input if it regains focus and it's closed
111
- if (prevIsFocused !== props.editor.value.selection.isFocused && props.editor.value.selection.isFocused && !isOpen) {
112
- toggle();
113
- }
114
-
115
144
  var refObj = {
116
145
  containerRef: ref,
117
146
  registerContentNode: registerContentNode
@@ -124,17 +153,59 @@ var Editor$1 = function Editor(props) {
124
153
  children: [jsxRuntime.jsx(EditorWrapper, {
125
154
  isDisabled: props.isDisabled,
126
155
  isReadOnly: props.isReadOnly,
127
- children: jsxRuntime.jsx(richTextUtils.RichTextBody, {
128
- ref: refObj,
129
- hasError: props.hasError,
130
- isDisabled: props.isDisabled,
131
- hasWarning: props.hasWarning,
132
- isReadOnly: Boolean(props.isReadOnly),
133
- showExpandIcon: Boolean(props.showExpandIcon),
134
- onClickExpand: props.onClickExpand,
135
- editor: props.editor,
136
- containerStyles: containerStyles,
137
- children: props.children
156
+ children: jsxRuntime.jsx(slateReact.Slate, {
157
+ editor: editor,
158
+ value: props.value,
159
+ onChange: props.onChange,
160
+ children: jsxRuntime.jsxs(richTextUtils.RichTextBody // @ts-ignore
161
+ , {
162
+ ref: refObj,
163
+ hasError: props.hasError,
164
+ isDisabled: props.isDisabled,
165
+ hasWarning: props.hasWarning,
166
+ isReadOnly: Boolean(props.isReadOnly),
167
+ showExpandIcon: Boolean(props.showExpandIcon),
168
+ onClickExpand: props.onClickExpand,
169
+ containerStyles: containerStyles,
170
+ children: [jsxRuntime.jsx(slateReact.Editable, _objectSpread$1(_objectSpread$1({}, utils.filterDataAttributes(props)), {}, {
171
+ name: props.name,
172
+ renderElement: renderElement,
173
+ renderLeaf: renderLeaf,
174
+ placeholder: props.placeholder,
175
+ autoFocus: props.isAutofocused,
176
+ readOnly: props.isReadOnly,
177
+ disabled: props.isDisabled,
178
+ onBlur: props.onBlur,
179
+ onFocus: function onFocus(event) {
180
+ var _props$onFocus;
181
+
182
+ (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, event); // opens the input if it regains focus and it's closed
183
+
184
+ if (!isOpen) {
185
+ toggle();
186
+ richTextUtils.focusEditor(editor);
187
+ }
188
+ },
189
+ onKeyDown: function onKeyDown(event) {
190
+ for (var hotkey in HOTKEYS) {
191
+ if (isHotkey__default["default"](hotkey, event)) {
192
+ event.preventDefault();
193
+ var mark = HOTKEYS[hotkey];
194
+ richTextUtils.toggleMark(editor, mark);
195
+ break;
196
+ }
197
+ }
198
+ }
199
+ })), props.children, jsxRuntime.jsx(richTextUtils.HiddenInput, {
200
+ isFocused: slateReact.ReactEditor.isFocused(editor),
201
+ handleFocus: function handleFocus() {
202
+ richTextUtils.focusEditor(editor);
203
+ },
204
+ id: props.id,
205
+ disabled: props.isDisabled,
206
+ readOnly: props.isReadOnly
207
+ })]
208
+ })
138
209
  })
139
210
  }), renderToggleButton && jsxRuntime.jsx(FlatButton__default["default"], {
140
211
  onClick: toggle,
@@ -149,82 +220,17 @@ var Editor$1 = function Editor(props) {
149
220
  });
150
221
  }
151
222
  });
152
- };
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
- } : {};
171
-
172
- var renderEditor = function renderEditor(props, editor, next) {
173
- var internalId = "".concat(props.id, "__internal__id");
174
- var children = /*#__PURE__*/react.cloneElement(next(), {
175
- id: internalId
176
- });
177
- var isFocused = props.editor.value.selection.isFocused;
178
-
179
- var passedProps = _objectSpread$1(_objectSpread$1({
180
- name: props.name,
181
- id: props.id,
182
- isReadOnly: Boolean(props.readOnly),
183
- isDisabled: Boolean(props.disabled)
184
- }, pick__default["default"](props.options, ['horizontalConstraint', 'defaultExpandMultilineText', 'showExpandIcon', 'onClickExpand', 'hasError', 'hasWarning'])), utils.filterDataAttributes(props));
185
-
186
- return jsxRuntime.jsxs(Editor$1, _objectSpread$1(_objectSpread$1({
187
- editor: editor
188
- }, passedProps), {}, {
189
- children: [children, jsxRuntime.jsx(richTextUtils.HiddenInput, {
190
- isFocused: isFocused,
191
- handleFocus: editor.focus,
192
- id: props.id,
193
- disabled: props.disabled,
194
- readOnly: Boolean(props.readOnly)
195
- })]
196
- }));
197
- };
198
-
199
- Editor$1.displayName = 'Editor';
200
- var renderEditor$1 = renderEditor;
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; } }
223
+ });
224
+ Editor.displayName = 'Editor';
225
+ var Editor$1 = Editor;
205
226
 
206
227
  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; }
207
228
 
208
229
  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; }
209
230
 
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
- };
231
+ 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); }; }
215
232
 
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
- } : {};
233
+ 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; } }
228
234
 
229
235
  var RichTextInput = /*#__PURE__*/function (_PureComponent) {
230
236
  _inherits(RichTextInput, _PureComponent);
@@ -244,32 +250,29 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
244
250
 
245
251
  _this = _super.call.apply(_super, _concatInstanceProperty__default["default"](_context = [this]).call(_context, args));
246
252
  _this.serializedValue = _this.props.value;
247
- _this.internalSlateValue = richTextUtils.html.deserialize(_this.props.value || '');
253
+ _this.internalSlateValue = richTextUtils.validSlateStateAdapter(richTextUtils.html.deserialize(_this.props.value || ''));
248
254
 
249
- _this.onValueChange = function (event) {
250
- var serializedValue = richTextUtils.html.serialize(event.value); // because we are not using setState, we need to make sure that
255
+ _this.onValueChange = function (state) {
256
+ var serializedValue = richTextUtils.html.serialize(state); // because we are not using setState, we need to make sure that
251
257
  // we perform an update when the slate value changes
252
258
  // as this can contain things like cursor location
253
259
  // in this case, the internalSlateValue would change
254
260
  // but the serializedValue would NOT change.
255
261
 
256
- var hasInternalSlateValueChanged = _this.internalSlateValue !== event.value;
262
+ var hasInternalSlateValueChanged = _this.internalSlateValue !== state;
257
263
  var hasSerializedValueChanged = serializedValue !== _this.serializedValue;
258
- _this.internalSlateValue = event.value;
264
+ _this.internalSlateValue = richTextUtils.validSlateStateAdapter(state);
259
265
  _this.serializedValue = serializedValue; // the consumer only cares about the serializedValue, so it doesn't make sense to call
260
266
  // onChange unless this value changes.
261
267
 
262
268
  if (hasSerializedValueChanged) {
263
269
  var _this$props$onChange, _this$props;
264
270
 
265
- var fakeEvent = {
271
+ (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
266
272
  target: {
267
- id: _this.props.id,
268
- name: _this.props.name,
269
- value: serializedValue
273
+ value: richTextUtils.html.serialize(state)
270
274
  }
271
- };
272
- (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, fakeEvent);
275
+ });
273
276
  }
274
277
 
275
278
  if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
@@ -278,44 +281,6 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
278
281
  }
279
282
  };
280
283
 
281
- _this.onBlur = function (_event, _editor, next) {
282
- next();
283
-
284
- if (_this.props.onBlur) {
285
- var fakeEvent = {
286
- target: {
287
- id: _this.props.id,
288
- name: _this.props.name
289
- }
290
- };
291
-
292
- _setTimeout__default["default"](function () {
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);
296
- }, 0);
297
- }
298
- };
299
-
300
- _this.onFocus = function (_event, _editor, next) {
301
- next();
302
-
303
- if (_this.props.onFocus) {
304
- var fakeEvent = {
305
- target: {
306
- id: _this.props.id,
307
- name: _this.props.name
308
- }
309
- };
310
-
311
- _setTimeout__default["default"](function () {
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);
315
- }, 0);
316
- }
317
- };
318
-
319
284
  return _this;
320
285
  }
321
286
 
@@ -332,7 +297,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
332
297
  // this keeps the component in sync.
333
298
  if (this.props.value !== this.serializedValue) {
334
299
  var value = this.props.value || '';
335
- this.internalSlateValue = richTextUtils.html.deserialize(value);
300
+ this.internalSlateValue = richTextUtils.validSlateStateAdapter(richTextUtils.html.deserialize(value));
336
301
  this.serializedValue = value;
337
302
  this.forceUpdate();
338
303
  }
@@ -348,28 +313,31 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
348
313
  process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onClickExpand === 'function', 'RichTextInput: "onClickExpand" is required when showExpandIcon is true') : void 0;
349
314
  }
350
315
 
351
- return jsxRuntime.jsx(Editor, _objectSpread(_objectSpread({}, utils.filterDataAttributes(this.props)), {}, {
352
- autoFocus: this.props.isAutofocussed,
316
+ return jsxRuntime.jsx(Editor$1, _objectSpread(_objectSpread({}, utils.filterDataAttributes(this.props)), {}, {
317
+ isAutofocused: this.props.isAutofocussed,
353
318
  id: this.props.id,
354
319
  name: this.props.name,
355
- onFocus: this.onFocus,
356
- onBlur: this.onBlur,
357
- disabled: this.props.isDisabled,
358
- readOnly: this.props.isReadOnly || this.props.isDisabled,
359
- value: this.internalSlateValue // we can only pass this.props to the Editor that Slate understands without getting
360
- // warning in the console,
361
- // so instead we pass our extra this.props through this `options` prop.
362
- ,
363
- options: pick__default["default"](this.props, ['horizontalConstraint', 'defaultExpandMultilineText', 'hasWarning', 'hasError', 'placeholder', 'showExpandIcon', 'onClickExpand']),
320
+ onFocus: this.props.onFocus,
321
+ onBlur: this.props.onBlur,
322
+ isDisabled: this.props.isDisabled,
323
+ isReadOnly: this.props.isReadOnly || this.props.isDisabled,
324
+ value: this.internalSlateValue,
364
325
  onChange: this.onValueChange,
365
- plugins: richTextUtils.richTextPlugins,
366
- renderEditor: renderEditor$1
326
+ horizontalConstraint: this.props.horizontalConstraint,
327
+ defaultExpandMultilineText: this.props.defaultExpandMultilineText,
328
+ hasWarning: this.props.hasWarning,
329
+ hasError: this.props.hasError,
330
+ placeholder: this.props.placeholder,
331
+ showExpandIcon: this.props.showExpandIcon,
332
+ onClickExpand: this.props.onClickExpand,
333
+ ref: this.props.parentRef
367
334
  }));
368
335
  }
369
336
  }]);
370
337
 
371
338
  return RichTextInput;
372
- }(react.PureComponent);
339
+ }(react.PureComponent); // When component is using `forwardRef` only `defaultProps` and `displayName` are recognized by default as static props
340
+
373
341
 
374
342
  RichTextInput.defaultProps = {
375
343
  defaultExpandMultilineText: false,
@@ -378,26 +346,41 @@ RichTextInput.defaultProps = {
378
346
  showExpandIcon: false
379
347
  };
380
348
  RichTextInput.displayName = 'RichTextInput';
381
- RichTextInput.isEmpty = richTextUtils.isEmpty;
382
-
383
- RichTextInput.isTouched = function (touched) {
384
- return Boolean(touched);
385
- };
386
-
387
349
  RichTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
388
350
  isAutofocussed: _pt__default["default"].bool,
351
+ defaultExpandMultilineText: _pt__default["default"].bool,
352
+ hasError: _pt__default["default"].bool,
353
+ hasWarning: _pt__default["default"].bool,
389
354
  id: _pt__default["default"].string,
390
355
  name: _pt__default["default"].string,
391
356
  placeholder: _pt__default["default"].string,
357
+ isDisabled: _pt__default["default"].bool,
358
+ isReadOnly: _pt__default["default"].bool,
359
+ horizontalConstraint: _pt__default["default"].oneOf([7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
392
360
  onChange: _pt__default["default"].func,
393
361
  onFocus: _pt__default["default"].func,
394
362
  onBlur: _pt__default["default"].func,
395
- value: _pt__default["default"].string
363
+ value: _pt__default["default"].string,
364
+ showExpandIcon: _pt__default["default"].bool,
365
+ onClickExpand: _pt__default["default"].func
396
366
  } : {};
397
- var RichTextInput$1 = RichTextInput;
367
+
368
+ var isTouched = function isTouched(touched) {
369
+ return Boolean(touched);
370
+ };
371
+
372
+ var RichTextInputWithRef = /*#__PURE__*/react.forwardRef(function (props, ref) {
373
+ return jsxRuntime.jsx(RichTextInput, _objectSpread({
374
+ parentRef: ref
375
+ }, props));
376
+ });
377
+ RichTextInputWithRef.displayName = 'RichTextInputWithRef';
378
+ RichTextInputWithRef.isEmpty = richTextUtils.isEmpty;
379
+ RichTextInputWithRef.isTouched = isTouched;
380
+ var RichTextInputWithRef$1 = RichTextInputWithRef;
398
381
 
399
382
  // NOTE: This string will be replaced on build time with the package version.
400
- var version = "14.0.3";
383
+ var version = "15.0.2";
401
384
 
402
- exports["default"] = RichTextInput$1;
385
+ exports["default"] = RichTextInputWithRef$1;
403
386
  exports.version = version;