@commercetools-uikit/localized-rich-text-input 14.0.3 → 15.0.1

package/dist/commercetools-uikit-localized-rich-text-input.cjs.prod.js

@@ -5,15 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
-var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-require('prop-types');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var react$1 = require('react');
 var react = require('@emotion/react');
@@ -30,10 +31,7 @@ var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
 var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
 var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
 var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
-var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
-var pick = require('lodash/pick');
-var slateReact = require('slate-react');
+require('prop-types');
 var _styled = require('@emotion/styled/base');
 var reactIntl = require('react-intl');
 var designSystem = require('@commercetools-uikit/design-system');
@@ -41,6 +39,11 @@ var CollapsibleMotion = require('@commercetools-uikit/collapsible-motion');
 var icons = require('@commercetools-uikit/icons');
 var Text = require('@commercetools-uikit/text');
 var FlatButton = require('@commercetools-uikit/flat-button');
+var slateReact = require('slate-react');
+var slate = require('slate');
+var slateHistory = require('slate-history');
+var isHotkey = require('is-hotkey');
+var pipe = require('lodash/fp/pipe');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var messages = require('@commercetools-uikit/messages');
 
@@ -49,23 +52,24 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
 var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
-var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _Map__default = /*#__PURE__*/_interopDefault(_Map);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var Stack__default = /*#__PURE__*/_interopDefault(Stack);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
-var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
-var pick__default = /*#__PURE__*/_interopDefault(pick);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
 var Text__default = /*#__PURE__*/_interopDefault(Text);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
+var isHotkey__default = /*#__PURE__*/_interopDefault(isHotkey);
+var pipe__default = /*#__PURE__*/_interopDefault(pipe);
 
 function ownKeys$4(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; }
 
@@ -95,6 +99,12 @@ var ToggleButtonWrapper = _styled__default["default"]("div", {
 function ownKeys$3(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; }
 
 function _objectSpread$3(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$3(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$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+var HOTKEYS = {
+  'mod+b': 'bold',
+  'mod+i': 'italic',
+  'mod+u': 'underline',
+  'mod+`': 'code'
+};
 var COLLAPSED_HEIGHT = 32;
 
 var LeftColumn = _styled__default["default"]("div", {
@@ -118,17 +128,27 @@ var Row = _styled__default["default"]("div", {
   styles: "display:flex;justify-content:flex-end"
 } );
 
+var renderElement = function renderElement(props) {
+  return jsxRuntime.jsx(richTextUtils.Element, _objectSpread$3({}, props));
+};
+
+var renderLeaf = function renderLeaf(props) {
+  return jsxRuntime.jsx(richTextUtils.Leaf, _objectSpread$3({}, props));
+};
+
 var _ref$1 = {
   name: "bcltzc",
   styles: "flex:auto;width:0;border-top-left-radius:0;border-bottom-left-radius:0"
 } ;
 
-var Editor$1 = function Editor(props) {
-  var _props$editor, _props$editor2, _props$editor3, _props$editor4;
-
+var Editor = /*#__PURE__*/react$1.forwardRef(function (props, forwardedRef) {
   var intl = reactIntl.useIntl();
   var ref = react$1.useRef();
-  var prevIsFocused = hooks.usePrevious((_props$editor = props.editor) === null || _props$editor === void 0 ? void 0 : _props$editor.value.selection.isFocused);
+  var createEditorWithPlugins = pipe__default["default"](slateReact.withReact, slateHistory.withHistory); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var editor = react$1.useMemo(function () {
+    return createEditorWithPlugins(slate.createEditor());
+  }, []);
 
   if (props.showExpandIcon) ;
 
@@ -156,20 +176,34 @@ var Editor$1 = function Editor(props) {
   }, [setRenderToggleButton, renderToggleButton]);
   react$1.useEffect(function () {
     updateRenderToggleButton();
-  }, [(_props$editor2 = props.editor) === null || _props$editor2 === void 0 ? void 0 : _props$editor2.value.document, updateRenderToggleButton]); // opens the input if it regains focus and it's closed
-
-  if (prevIsFocused !== ((_props$editor3 = props.editor) === null || _props$editor3 === void 0 ? void 0 : _props$editor3.value.selection.isFocused) && (_props$editor4 = props.editor) !== null && _props$editor4 !== void 0 && _props$editor4.value.selection.isFocused && !props.isOpen) {
-    onToggle();
-  }
+  }, [editor, updateRenderToggleButton]); // resetting
+
+  var resetValue = react$1.useCallback(function (newValue) {
+    var _newValue$props$langu;
+
+    var 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 : '';
+    richTextUtils.resetEditor(editor, newStringValue);
+  }, [editor, props.language]);
+  /* 
+  Resetting the editor requires access to `editor` object returned from `useSlate` hook.
+  Therefore, `reset` function is attached to the passed `ref` object via `useImperativeHandle` 
+  to be called from the parent component. 
+  e.g. <button onMouseDown={() => ref.current?.resetValue("<p><strong>Value after reset</strong></p>")}>Reset</button>
+  */
 
+  react$1.useImperativeHandle(forwardedRef, function () {
+    return {
+      resetValue: resetValue
+    };
+  });
   var shouldToggleButtonTakeSpace =
-  /*
+  /* 
     - if hasLanguagesControl and there are no errors/warnings to display
     - then the toggleButton is absolutely positioned
     This is because the toggle button is placed next to the LocalizedInputToggle without being siblings in the DOM.
     If there is a error or warning showing,
     then it can be placed statically because it will then be a sibling to the error/warning message
-    and LocalizedInputToggle is placed below the errors/warnings.
+    and LocalizedInputToggle is placed below the errors/warnings. 
   */
   renderToggleButton && !props.hasLanguagesControl || props.error || props.warning;
   var theme = react.useTheme();
@@ -189,31 +223,73 @@ var Editor$1 = function Editor(props) {
       };
       return jsxRuntime.jsxs(Stack__default["default"], {
         scale: "xs",
-        children: [jsxRuntime.jsxs(EditorWrapper, {
+        children: [jsxRuntime.jsx(EditorWrapper, {
           isDisabled: props.isDisabled,
           isReadOnly: props.isReadOnly,
-          children: [jsxRuntime.jsx(EditorLanguageLabel, {
-            htmlFor: props.id,
-            theme: theme,
-            children: jsxRuntime.jsx(Text__default["default"].Detail, {
-              tone: "secondary",
-              children: props.language.toUpperCase()
-            })
-          }), jsxRuntime.jsx(richTextUtils.RichTextBody, {
-            ref: refObj,
-            styles: {
-              container: _ref$1
-            },
-            hasError: props.hasError,
-            isDisabled: props.isDisabled,
-            hasWarning: props.hasWarning,
-            isReadOnly: Boolean(props.isReadOnly),
-            editor: props.editor,
-            containerStyles: containerStyles,
-            showExpandIcon: props.showExpandIcon,
-            onClickExpand: props.onClickExpand,
-            children: props.children
-          })]
+          children: jsxRuntime.jsxs(slateReact.Slate, {
+            editor: editor,
+            value: props.value,
+            onChange: props.onChange,
+            children: [jsxRuntime.jsx(EditorLanguageLabel, {
+              htmlFor: props.id,
+              theme: theme,
+              children: jsxRuntime.jsx(Text__default["default"].Detail, {
+                tone: "secondary",
+                children: props.language.toUpperCase()
+              })
+            }), jsxRuntime.jsxs(richTextUtils.RichTextBody // @ts-ignore
+            , {
+              ref: refObj,
+              styles: {
+                container: _ref$1
+              },
+              hasError: props.hasError,
+              isDisabled: props.isDisabled,
+              hasWarning: props.hasWarning,
+              isReadOnly: Boolean(props.isReadOnly),
+              showExpandIcon: Boolean(props.showExpandIcon),
+              onClickExpand: props.onClickExpand,
+              containerStyles: containerStyles,
+              children: [jsxRuntime.jsx(slateReact.Editable, _objectSpread$3(_objectSpread$3({}, utils.filterDataAttributes(props)), {}, {
+                name: props.name,
+                renderElement: renderElement,
+                renderLeaf: renderLeaf,
+                placeholder: props.placeholder,
+                autoFocus: props.isAutofocused,
+                onBlur: props.onBlur,
+                onFocus: function onFocus(event) {
+                  var _props$onFocus;
+
+                  (_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
+
+                  if (!isOpen) {
+                    toggle();
+                    richTextUtils.focusEditor(editor);
+                  }
+                },
+                readOnly: props.isReadOnly,
+                disabled: props.isDisabled,
+                onKeyDown: function onKeyDown(event) {
+                  for (var hotkey in HOTKEYS) {
+                    if (isHotkey__default["default"](hotkey, event)) {
+                      event.preventDefault();
+                      var mark = HOTKEYS[hotkey];
+                      richTextUtils.toggleMark(editor, mark);
+                      break;
+                    }
+                  }
+                }
+              })), props.children, jsxRuntime.jsx(richTextUtils.HiddenInput, {
+                isFocused: slateReact.ReactEditor.isFocused(editor),
+                handleFocus: function handleFocus() {
+                  richTextUtils.focusEditor(editor);
+                },
+                id: props.id,
+                disabled: props.isDisabled,
+                readOnly: props.isReadOnly
+              })]
+            })]
+          })
         }, props.language), jsxRuntime.jsxs(Row // NOTE: applying this style withing the `styled` component results in the production
         // bundle to apply the style in the wrong order.
         // For instance, we need to override the marging of the spacing component, which also
@@ -253,58 +329,17 @@ var Editor$1 = function Editor(props) {
       });
     }
   });
-};
-
-Editor$1.propTypes = {};
-
-var renderEditor = function renderEditor(props, editor, next) {
-  var _props$editor5;
-
-  if (props.options.showExpandIcon) ;
-
-  var internalId = "".concat(props.id, "__internal__id");
-  var children = /*#__PURE__*/react$1.cloneElement(next(), {
-    id: internalId
-  });
-
-  var passedProps = _objectSpread$3(_objectSpread$3({
-    id: props.id,
-    isDisabled: props.disabled,
-    isReadOnly: props.readOnly
-  }, pick__default["default"](props.options, ['defaultExpandMultilineText', 'language', 'warning', 'error', 'hasWarning', 'hasError', 'toggleLanguage', 'isOpen', 'showExpandIcon', 'onClickExpand', 'hasLanguagesControl'])), utils.filterDataAttributes(props));
-
-  var isFocused = (_props$editor5 = props.editor) === null || _props$editor5 === void 0 ? void 0 : _props$editor5.value.selection.isFocused;
-  return jsxRuntime.jsxs(Editor$1, _objectSpread$3(_objectSpread$3({
-    editor: editor
-  }, passedProps), {}, {
-    children: [children, jsxRuntime.jsx(richTextUtils.HiddenInput, {
-      isFocused: Boolean(isFocused),
-      handleFocus: editor.focus,
-      disabled: props.disabled,
-      readOnly: props.readOnly,
-      id: props.id
-    })]
-  }));
-};
-
-Editor$1.displayName = 'Editor';
-var renderEditor$1 = renderEditor;
-
-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); }; }
-
-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; } }
+});
+Editor.displayName = 'Editor';
+var Editor$1 = Editor;
 
 function ownKeys$2(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; }
 
 function _objectSpread$2(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$2(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$2(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-// This is a temporary wrapper component helping to mitigate typing issues of `slate-react@0.22.10` package.
-// TODO: remove after upgrade of `slate-react` to the latest version
-var Editor = function Editor(props) {
-  return jsxRuntime.jsx(slateReact.Editor, _objectSpread$2({}, props));
-};
+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); }; }
 
-Editor.propTypes = {};
+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; } }
 
 var RichTextInput = /*#__PURE__*/function (_PureComponent) {
   _inherits(RichTextInput, _PureComponent);
@@ -324,33 +359,25 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call.apply(_super, _concatInstanceProperty__default["default"](_context = [this]).call(_context, args));
     _this.serializedValue = _this.props.value || '';
-    _this.internalSlateValue = richTextUtils.html.deserialize(_this.props.value || '');
+    _this.internalSlateValue = richTextUtils.validSlateStateAdapter(richTextUtils.html.deserialize(_this.props.value || ''));
 
-    _this.onValueChange = function (event) {
-      var serializedValue = richTextUtils.html.serialize(event.value); // because we are not using setState, we need to make sure that
+    _this.onValueChange = function (state) {
+      var serializedValue = richTextUtils.html.serialize(state); // because we are not using setState, we need to make sure that
       // we perform an update when the slate value changes
       // as this can contain things like cursor location
       // in this case, the internalSlateValue would change
       // but the serializedValue would NOT change.
 
-      var hasInternalSlateValueChanged = _this.internalSlateValue !== event.value;
+      var hasInternalSlateValueChanged = _this.internalSlateValue !== state;
       var hasSerializedValueChanged = serializedValue !== _this.serializedValue;
-      _this.internalSlateValue = event.value;
+      _this.internalSlateValue = richTextUtils.validSlateStateAdapter(state);
       _this.serializedValue = serializedValue; // the consumer only cares about the serializedValue, so it doesn't make sense to call
       // onChange unless this value changes.
 
       if (hasSerializedValueChanged) {
         var _this$props$onChange, _this$props;
 
-        var fakeEvent = {
-          target: {
-            id: _this.props.id,
-            name: _this.props.name,
-            language: _this.props.language,
-            value: serializedValue
-          }
-        };
-        (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, fakeEvent);
+        (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, richTextUtils.html.serialize(state));
       }
 
       if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
@@ -359,44 +386,6 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
       }
     };
 
-    _this.onBlur = function (_event, _editor, next) {
-      next();
-
-      if (_this.props.onBlur) {
-        var fakeEvent = {
-          target: {
-            id: _this.props.id,
-            name: _this.props.name
-          }
-        };
-
-        _setTimeout__default["default"](function () {
-          var _this$props$onBlur, _this$props2;
-
-          return (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, fakeEvent);
-        }, 0);
-      }
-    };
-
-    _this.onFocus = function (_event, _editor, next) {
-      next();
-
-      if (_this.props.onFocus) {
-        var fakeEvent = {
-          target: {
-            id: _this.props.id,
-            name: _this.props.name
-          }
-        };
-
-        _setTimeout__default["default"](function () {
-          var _this$props$onFocus, _this$props3;
-
-          return (_this$props$onFocus = (_this$props3 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props3, fakeEvent);
-        }, 0);
-      }
-    };
-
     return _this;
   }
 
@@ -404,7 +393,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       if (this.props.value !== this.serializedValue) {
-        this.internalSlateValue = richTextUtils.html.deserialize(this.props.value);
+        this.internalSlateValue = richTextUtils.validSlateStateAdapter(richTextUtils.html.deserialize(this.props.value));
         this.serializedValue = this.props.value;
         this.forceUpdate();
       }
@@ -416,21 +405,28 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
 
       if (this.props.showExpandIcon) ;
 
-      return jsxRuntime.jsx(Editor, _objectSpread$2(_objectSpread$2({}, utils.filterDataAttributes(this.props)), {}, {
-        id: this.props.id,
+      return jsxRuntime.jsx(Editor$1, _objectSpread$2(_objectSpread$2({}, utils.filterDataAttributes(this.props)), {}, {
         name: this.props.name,
-        disabled: this.props.isDisabled,
-        readOnly: this.props.isReadOnly || this.props.isDisabled,
-        value: this.internalSlateValue,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur // we can only pass this.props to the Editor that Slate understands without getting
-        // warning in the console,
-        // so instead we pass our extra this.props through this `options` prop.
-        ,
-        options: pick__default["default"](this.props, ['language', 'onToggle', 'toggleLanguage', 'isOpen', 'warning', 'error', 'defaultExpandMultilineText', 'hasWarning', 'hasError', 'placeholder', 'onClickExpand', 'showExpandIcon', 'hasLanguagesControl']),
+        isReadOnly: this.props.isReadOnly || this.props.isDisabled,
         onChange: this.onValueChange,
-        plugins: richTextUtils.richTextPlugins,
-        renderEditor: renderEditor$1
+        id: this.props.id,
+        value: this.internalSlateValue,
+        onFocus: this.props.onFocus,
+        onBlur: this.props.onBlur,
+        isDisabled: this.props.isDisabled,
+        defaultExpandMultilineText: this.props.defaultExpandMultilineText,
+        hasWarning: this.props.hasWarning,
+        hasError: this.props.hasError,
+        placeholder: this.props.placeholder,
+        showExpandIcon: this.props.showExpandIcon,
+        onClickExpand: this.props.onClickExpand,
+        language: this.props.language,
+        toggleLanguage: this.props.toggleLanguage,
+        isOpen: this.props.isOpen,
+        warning: this.props.warning,
+        error: this.props.error,
+        hasLanguagesControl: this.props.hasLanguagesControl,
+        ref: this.props.parentRef
       }));
     }
   }]);
@@ -444,7 +440,13 @@ RichTextInput.defaultProps = {
 };
 RichTextInput.displayName = 'RichTextInput';
 RichTextInput.propTypes = {};
-var RichTextInput$1 = RichTextInput;
+var RichTextInputWithRef = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
+  return jsxRuntime.jsx(RichTextInput, _objectSpread$2({
+    parentRef: ref
+  }, props));
+});
+RichTextInputWithRef.displayName = 'RichTextInputWithRef';
+var RichTextInput$1 = RichTextInputWithRef;
 
 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; }
 
@@ -461,7 +463,7 @@ var RequiredValueErrorMessage$1 = RequiredValueErrorMessage;
 
 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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var defaultProps = {
   horizontalConstraint: 'scale',
   showExpandIcon: false
@@ -499,7 +501,7 @@ var _ref = {
   styles: "align-self:flex-start"
 } ;
 
-var LocalizedRichTextInput = function LocalizedRichTextInput(props) {
+var LocalizedRichTextInput = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
   var _context2;
 
   if (!props.isReadOnly) ;
@@ -517,8 +519,7 @@ var LocalizedRichTextInput = function LocalizedRichTextInput(props) {
       expandedTranslationsState = _useReducer2[0],
       expandedTranslationsDispatch = _useReducer2[1];
 
-  var defaultExpansionState = props.hideLanguageExpansionControls || props.defaultExpandLanguages || // useToggleState's default is `true`, but we want `false`
-  false;
+  var defaultExpansionState = Boolean(props.hideLanguageExpansionControls || props.defaultExpandLanguages);
 
   var _useToggleState = hooks.useToggleState(defaultExpansionState),
       _useToggleState2 = _slicedToArray(_useToggleState, 2),
@@ -531,6 +532,21 @@ var LocalizedRichTextInput = function LocalizedRichTextInput(props) {
       payload: language
     });
   }, [expandedTranslationsDispatch]);
+  var createChangeHandler = react$1.useCallback(function (language) {
+    return function (state) {
+      var _props$onChange, _context3, _context4;
+
+      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
+        target: {
+          id: props !== null && props !== void 0 && props.id ? _concatInstanceProperty__default["default"](_context3 = "".concat(props.id, ".")).call(_context3, language) : '',
+          name: props !== null && props !== void 0 && props.name ? _concatInstanceProperty__default["default"](_context4 = "".concat(props.name, ".")).call(_context4, language) : '',
+          language: language,
+          value: state
+        }
+      });
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.id, props.name, props.onChange]);
   var languages = localizedUtils.sortLanguages(props.selectedLanguage, _Object$keys__default["default"](props.value));
   var hasErrorInRemainingLanguages = props.hasError || localizedUtils.getHasErrorOnRemainingLanguages(props.errors, props.selectedLanguage);
   var hasWarningInRemainingLanguages = props.hasWarning || localizedUtils.getHasWarningOnRemainingLanguages(props.warnings, props.selectedLanguage);
@@ -543,6 +559,19 @@ var LocalizedRichTextInput = function LocalizedRichTextInput(props) {
     }
   }
 
+  var langRefs = react$1.useRef(new _Map__default["default"]());
+  var resetValue = react$1.useCallback(function (newValue) {
+    var _context5;
+
+    _forEachInstanceProperty__default["default"](_context5 = langRefs.current).call(_context5, function (langRef) {
+      langRef.resetValue(newValue);
+    });
+  }, []);
+  react$1.useImperativeHandle(ref, function () {
+    return {
+      resetValue: resetValue
+    };
+  });
   var shouldRenderLanguagesControl = languages.length > 1 && !props.hideLanguageExpansionControls;
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
@@ -554,11 +583,12 @@ var LocalizedRichTextInput = function LocalizedRichTextInput(props) {
           if (!isFirstLanguage && !areLanguagesOpened) return null;
           var isLastLanguage = index === languages.length - 1;
           var hasLanguagesControl = isFirstLanguage && !areLanguagesOpened || isLastLanguage;
-          return jsxRuntime.jsx(RichTextInput$1, _objectSpread({
-            id: LocalizedRichTextInput.getId(props.id, language),
-            name: LocalizedRichTextInput.getName(props.name, language),
+          return react.createElement(RichTextInput$1, _objectSpread(_objectSpread({}, utils.filterDataAttributes(props)), {}, {
+            key: language,
+            id: localizedUtils.getId(props.id, language),
+            name: localizedUtils.getName(props.name, language),
             value: props.value[language],
-            onChange: props.onChange,
+            onChange: createChangeHandler(language),
             language: language,
             isOpen: expandedTranslationsState[language],
             toggleLanguage: toggleLanguage,
@@ -573,8 +603,12 @@ var LocalizedRichTextInput = function LocalizedRichTextInput(props) {
             error: props.errors && props.errors[language],
             showExpandIcon: props.showExpandIcon,
             onClickExpand: props.onClickExpand,
-            hasLanguagesControl: hasLanguagesControl
-          }, localizedUtils.createLocalizedDataAttributes(props, language)), language);
+            hasLanguagesControl: hasLanguagesControl,
+            defaultExpandMultilineText: Boolean(props.defaultExpandMultilineText),
+            ref: function ref(el) {
+              return langRefs.current.set(language, el);
+            }
+          }, localizedUtils.createLocalizedDataAttributes(props, language)));
         })
       }), shouldRenderLanguagesControl && jsxRuntime.jsx("div", {
         css: _ref,
@@ -587,9 +621,7 @@ var LocalizedRichTextInput = function LocalizedRichTextInput(props) {
       })]
     })
   });
-};
-
-LocalizedRichTextInput.propTypes = {};
+});
 LocalizedRichTextInput.displayName = 'LocalizedRichTextInput';
 LocalizedRichTextInput.RequiredValueErrorMessage = RequiredValueErrorMessage$1;
 LocalizedRichTextInput.getId = localizedUtils.getId;
@@ -602,7 +634,7 @@ LocalizedRichTextInput.isTouched = localizedUtils.isTouched;
 var LocalizedRichTextInput$1 = LocalizedRichTextInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.3";
+var version = "15.0.1";
 
 exports["default"] = LocalizedRichTextInput$1;
 exports.version = version;