@commercetools-uikit/rich-text-input 16.0.0 → 16.1.0

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

@@ -65,7 +65,6 @@ const EditorWrapper = /*#__PURE__*/_styled__default["default"]("div", process.en
 })("align-self:stretch;cursor:", props => props.isDisabled || props.isReadOnly ? 'not-allowed' : 'inherit', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVkaXRvci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3FEIiwiZmlsZSI6ImVkaXRvci5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgdHlwZSB7IFRFZGl0b3JQcm9wcyB9IGZyb20gJy4vZWRpdG9yJztcblxudHlwZSBURWRpdG9yV3JhcHBlclByb3BzID0gUGljazxURWRpdG9yUHJvcHMsICdpc0Rpc2FibGVkJyB8ICdpc1JlYWRPbmx5Jz47XG5cbmNvbnN0IEVkaXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2PFRFZGl0b3JXcmFwcGVyUHJvcHM+YFxuICBhbGlnbi1zZWxmOiBzdHJldGNoO1xuICBjdXJzb3I6ICR7KHByb3BzKSA9PlxuICAgIHByb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuaXNSZWFkT25seSA/ICdub3QtYWxsb3dlZCcgOiAnaW5oZXJpdCd9O1xuYDtcblxuZXhwb3J0IHsgRWRpdG9yV3JhcHBlciB9O1xuIl19 */"));
 
 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; }
-
 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; }
 const HOTKEYS = {
   'mod+b': 'bold',
@@ -74,40 +73,33 @@ const HOTKEYS = {
   'mod+`': 'code'
 };
 const COLLAPSED_HEIGHT = 32;
-
 const renderElement = props => jsxRuntime.jsx(richTextUtils.Element, _objectSpread$1({}, props));
-
 const renderLeaf = props => jsxRuntime.jsx(richTextUtils.Leaf, _objectSpread$1({}, props));
-
 const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
   const intl = reactIntl.useIntl();
   const ref = react.useRef(null);
-  const createEditorWithPlugins = pipe__default["default"](slateReact.withReact, slateHistory.withHistory); // eslint-disable-next-line react-hooks/exhaustive-deps
-
+  const createEditorWithPlugins = pipe__default["default"](slateReact.withReact, slateHistory.withHistory);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const editor = react.useMemo(() => createEditorWithPlugins(slate.createEditor()), []);
-
   const _useState = react.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        renderToggleButton = _useState2[0],
-        setRenderToggleButton = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    renderToggleButton = _useState2[0],
+    setRenderToggleButton = _useState2[1];
   const updateRenderToggleButton = react.useCallback(() => {
     var _ref$current;
-
     const doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
-
     if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
       setRenderToggleButton(true);
     }
-
     if (!doesExceedCollapsedHeightLimit && renderToggleButton) {
       setRenderToggleButton(false);
     }
   }, [setRenderToggleButton, renderToggleButton]);
   react.useEffect(() => {
     updateRenderToggleButton();
-  }, [editor, updateRenderToggleButton]); // resetting
+  }, [editor, updateRenderToggleButton]);
 
+  // resetting
   const resetValue = react.useCallback(newValue => {
     richTextUtils.resetEditor(editor, newValue);
   }, [editor]);
@@ -117,7 +109,6 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
   to be called from the parent component. 
   e.g. <button onMouseDown={() => ref.current?.resetValue("<p><strong>Value after reset</strong></p>")}>Reset</button>
   */
-
   react.useImperativeHandle(forwardedRef, () => {
     return {
       resetValue
@@ -128,9 +119,9 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
     isDefaultClosed: !props.defaultExpandMultilineText,
     children: _ref => {
       let isOpen = _ref.isOpen,
-          toggle = _ref.toggle,
-          containerStyles = _ref.containerStyles,
-          registerContentNode = _ref.registerContentNode;
+        toggle = _ref.toggle,
+        containerStyles = _ref.containerStyles,
+        registerContentNode = _ref.registerContentNode;
       const refObj = {
         containerRef: ref,
         registerContentNode
@@ -147,7 +138,8 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
               editor: editor,
               value: props.value,
               onChange: props.onChange,
-              children: jsxRuntime.jsxs(richTextUtils.RichTextBody // @ts-ignore
+              children: jsxRuntime.jsxs(richTextUtils.RichTextBody
+              // @ts-ignore
               , {
                 ref: refObj,
                 hasError: props.hasError,
@@ -168,9 +160,8 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
                   onBlur: props.onBlur,
                   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
-
+                    (_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);
@@ -215,63 +206,49 @@ Editor.displayName = 'Editor';
 var Editor$1 = Editor;
 
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(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(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 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; } }
-
 let RichTextInput = /*#__PURE__*/function (_PureComponent) {
   _inherits(RichTextInput, _PureComponent);
-
   var _super = _createSuper(RichTextInput);
-
   function RichTextInput() {
     var _this;
-
     _classCallCheck(this, RichTextInput);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call(this, ...args);
     _this.serializedValue = _this.props.value;
     _this.internalSlateValue = richTextUtils.validSlateStateAdapter(richTextUtils.html.deserialize(_this.props.value || ''));
-
     _this.onValueChange = state => {
-      const serializedValue = richTextUtils.html.serialize(state); // because we are not using setState, we need to make sure that
+      const 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.
-
       const hasInternalSlateValueChanged = _this.internalSlateValue !== state;
       const hasSerializedValueChanged = serializedValue !== _this.serializedValue;
       _this.internalSlateValue = richTextUtils.validSlateStateAdapter(state);
-      _this.serializedValue = serializedValue; // the consumer only cares about the serializedValue, so it doesn't make sense to call
+      _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;
-
         (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
           target: {
             value: richTextUtils.html.serialize(state)
           }
         });
       }
-
       if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
         // this way we force update if cursor or selection changes
         _this.forceUpdate();
       }
     };
-
     return _this;
   }
-
   _createClass(RichTextInput, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
@@ -296,11 +273,9 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
       if (!this.props.isReadOnly) {
         process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onChange === 'function', 'RichTextInput: "onChange" is required when input is not read only.') : void 0;
       }
-
       if (this.props.showExpandIcon) {
         process.env.NODE_ENV !== "production" ? utils.warning(typeof this.props.onClickExpand === 'function', 'RichTextInput: "onClickExpand" is required when showExpandIcon is true') : void 0;
       }
-
       return jsxRuntime.jsx(Editor$1, _objectSpread(_objectSpread({}, utils.filterDataAttributes(this.props)), {}, {
         isAutofocused: this.props.isAutofocussed,
         id: this.props.id,
@@ -322,11 +297,8 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
       }));
     }
   }]);
-
   return RichTextInput;
 }(react.PureComponent); // When component is using `forwardRef` only `defaultProps` and `displayName` are recognized by default as static props
-
-
 RichTextInput.defaultProps = {
   defaultExpandMultilineText: false,
   horizontalConstraint: 'scale',
@@ -352,9 +324,7 @@ RichTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
   showExpandIcon: _pt__default["default"].bool,
   onClickExpand: _pt__default["default"].func
 } : {};
-
 const isTouched = touched => Boolean(touched);
-
 const RichTextInputWithRef = /*#__PURE__*/react.forwardRef((props, ref) => jsxRuntime.jsx(RichTextInput, _objectSpread({
   parentRef: ref
 }, props)));
@@ -364,7 +334,7 @@ RichTextInputWithRef.isTouched = isTouched;
 var RichTextInputWithRef$1 = RichTextInputWithRef;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.0";
 
 exports["default"] = RichTextInputWithRef$1;
 exports.version = version;

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

@@ -61,7 +61,6 @@ const EditorWrapper = /*#__PURE__*/_styled__default["default"]("div", {
 } )("align-self:stretch;cursor:", props => props.isDisabled || props.isReadOnly ? 'not-allowed' : 'inherit', ";" + ("" ));
 
 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; }
-
 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; }
 const HOTKEYS = {
   'mod+b': 'bold',
@@ -70,40 +69,33 @@ const HOTKEYS = {
   'mod+`': 'code'
 };
 const COLLAPSED_HEIGHT = 32;
-
 const renderElement = props => jsxRuntime.jsx(richTextUtils.Element, _objectSpread$1({}, props));
-
 const renderLeaf = props => jsxRuntime.jsx(richTextUtils.Leaf, _objectSpread$1({}, props));
-
 const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
   const intl = reactIntl.useIntl();
   const ref = react.useRef(null);
-  const createEditorWithPlugins = pipe__default["default"](slateReact.withReact, slateHistory.withHistory); // eslint-disable-next-line react-hooks/exhaustive-deps
-
+  const createEditorWithPlugins = pipe__default["default"](slateReact.withReact, slateHistory.withHistory);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const editor = react.useMemo(() => createEditorWithPlugins(slate.createEditor()), []);
-
   const _useState = react.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        renderToggleButton = _useState2[0],
-        setRenderToggleButton = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    renderToggleButton = _useState2[0],
+    setRenderToggleButton = _useState2[1];
   const updateRenderToggleButton = react.useCallback(() => {
     var _ref$current;
-
     const doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
-
     if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
       setRenderToggleButton(true);
     }
-
     if (!doesExceedCollapsedHeightLimit && renderToggleButton) {
       setRenderToggleButton(false);
     }
   }, [setRenderToggleButton, renderToggleButton]);
   react.useEffect(() => {
     updateRenderToggleButton();
-  }, [editor, updateRenderToggleButton]); // resetting
+  }, [editor, updateRenderToggleButton]);
 
+  // resetting
   const resetValue = react.useCallback(newValue => {
     richTextUtils.resetEditor(editor, newValue);
   }, [editor]);
@@ -113,7 +105,6 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
   to be called from the parent component. 
   e.g. <button onMouseDown={() => ref.current?.resetValue("<p><strong>Value after reset</strong></p>")}>Reset</button>
   */
-
   react.useImperativeHandle(forwardedRef, () => {
     return {
       resetValue
@@ -124,9 +115,9 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
     isDefaultClosed: !props.defaultExpandMultilineText,
     children: _ref => {
       let isOpen = _ref.isOpen,
-          toggle = _ref.toggle,
-          containerStyles = _ref.containerStyles,
-          registerContentNode = _ref.registerContentNode;
+        toggle = _ref.toggle,
+        containerStyles = _ref.containerStyles,
+        registerContentNode = _ref.registerContentNode;
       const refObj = {
         containerRef: ref,
         registerContentNode
@@ -143,7 +134,8 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
               editor: editor,
               value: props.value,
               onChange: props.onChange,
-              children: jsxRuntime.jsxs(richTextUtils.RichTextBody // @ts-ignore
+              children: jsxRuntime.jsxs(richTextUtils.RichTextBody
+              // @ts-ignore
               , {
                 ref: refObj,
                 hasError: props.hasError,
@@ -164,9 +156,8 @@ const Editor = /*#__PURE__*/react.forwardRef((props, forwardedRef) => {
                   onBlur: props.onBlur,
                   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
-
+                    (_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);
@@ -211,63 +202,49 @@ Editor.displayName = 'Editor';
 var Editor$1 = Editor;
 
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(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(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 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; } }
-
 let RichTextInput = /*#__PURE__*/function (_PureComponent) {
   _inherits(RichTextInput, _PureComponent);
-
   var _super = _createSuper(RichTextInput);
-
   function RichTextInput() {
     var _this;
-
     _classCallCheck(this, RichTextInput);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call(this, ...args);
     _this.serializedValue = _this.props.value;
     _this.internalSlateValue = richTextUtils.validSlateStateAdapter(richTextUtils.html.deserialize(_this.props.value || ''));
-
     _this.onValueChange = state => {
-      const serializedValue = richTextUtils.html.serialize(state); // because we are not using setState, we need to make sure that
+      const 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.
-
       const hasInternalSlateValueChanged = _this.internalSlateValue !== state;
       const hasSerializedValueChanged = serializedValue !== _this.serializedValue;
       _this.internalSlateValue = richTextUtils.validSlateStateAdapter(state);
-      _this.serializedValue = serializedValue; // the consumer only cares about the serializedValue, so it doesn't make sense to call
+      _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;
-
         (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
           target: {
             value: richTextUtils.html.serialize(state)
           }
         });
       }
-
       if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
         // this way we force update if cursor or selection changes
         _this.forceUpdate();
       }
     };
-
     return _this;
   }
-
   _createClass(RichTextInput, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
@@ -290,9 +267,7 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       if (!this.props.isReadOnly) ;
-
       if (this.props.showExpandIcon) ;
-
       return jsxRuntime.jsx(Editor$1, _objectSpread(_objectSpread({}, utils.filterDataAttributes(this.props)), {}, {
         isAutofocused: this.props.isAutofocussed,
         id: this.props.id,
@@ -314,11 +289,8 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
       }));
     }
   }]);
-
   return RichTextInput;
 }(react.PureComponent); // When component is using `forwardRef` only `defaultProps` and `displayName` are recognized by default as static props
-
-
 RichTextInput.defaultProps = {
   defaultExpandMultilineText: false,
   horizontalConstraint: 'scale',
@@ -327,9 +299,7 @@ RichTextInput.defaultProps = {
 };
 RichTextInput.displayName = 'RichTextInput';
 RichTextInput.propTypes = {};
-
 const isTouched = touched => Boolean(touched);
-
 const RichTextInputWithRef = /*#__PURE__*/react.forwardRef((props, ref) => jsxRuntime.jsx(RichTextInput, _objectSpread({
   parentRef: ref
 }, props)));
@@ -339,7 +309,7 @@ RichTextInputWithRef.isTouched = isTouched;
 var RichTextInputWithRef$1 = RichTextInputWithRef;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.0";
 
 exports["default"] = RichTextInputWithRef$1;
 exports.version = version;

package/dist/commercetools-uikit-rich-text-input.esm.js

@@ -41,7 +41,6 @@ const EditorWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "prod
 })("align-self:stretch;cursor:", props => props.isDisabled || props.isReadOnly ? 'not-allowed' : 'inherit', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVkaXRvci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3FEIiwiZmlsZSI6ImVkaXRvci5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgdHlwZSB7IFRFZGl0b3JQcm9wcyB9IGZyb20gJy4vZWRpdG9yJztcblxudHlwZSBURWRpdG9yV3JhcHBlclByb3BzID0gUGljazxURWRpdG9yUHJvcHMsICdpc0Rpc2FibGVkJyB8ICdpc1JlYWRPbmx5Jz47XG5cbmNvbnN0IEVkaXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2PFRFZGl0b3JXcmFwcGVyUHJvcHM+YFxuICBhbGlnbi1zZWxmOiBzdHJldGNoO1xuICBjdXJzb3I6ICR7KHByb3BzKSA9PlxuICAgIHByb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuaXNSZWFkT25seSA/ICdub3QtYWxsb3dlZCcgOiAnaW5oZXJpdCd9O1xuYDtcblxuZXhwb3J0IHsgRWRpdG9yV3JhcHBlciB9O1xuIl19 */"));
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 const HOTKEYS = {
   'mod+b': 'bold',
@@ -50,40 +49,33 @@ const HOTKEYS = {
   'mod+`': 'code'
 };
 const COLLAPSED_HEIGHT = 32;
-
 const renderElement = props => jsx(Element, _objectSpread$1({}, props));
-
 const renderLeaf = props => jsx(Leaf, _objectSpread$1({}, props));
-
 const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const intl = useIntl();
   const ref = useRef(null);
-  const createEditorWithPlugins = pipe(withReact, withHistory); // eslint-disable-next-line react-hooks/exhaustive-deps
-
+  const createEditorWithPlugins = pipe(withReact, withHistory);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const editor = useMemo(() => createEditorWithPlugins(createEditor()), []);
-
   const _useState = useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        renderToggleButton = _useState2[0],
-        setRenderToggleButton = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    renderToggleButton = _useState2[0],
+    setRenderToggleButton = _useState2[1];
   const updateRenderToggleButton = useCallback(() => {
     var _ref$current;
-
     const doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
-
     if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
       setRenderToggleButton(true);
     }
-
     if (!doesExceedCollapsedHeightLimit && renderToggleButton) {
       setRenderToggleButton(false);
     }
   }, [setRenderToggleButton, renderToggleButton]);
   useEffect(() => {
     updateRenderToggleButton();
-  }, [editor, updateRenderToggleButton]); // resetting
+  }, [editor, updateRenderToggleButton]);
 
+  // resetting
   const resetValue = useCallback(newValue => {
     resetEditor(editor, newValue);
   }, [editor]);
@@ -93,7 +85,6 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   to be called from the parent component. 
   e.g. <button onMouseDown={() => ref.current?.resetValue("<p><strong>Value after reset</strong></p>")}>Reset</button>
   */
-
   useImperativeHandle(forwardedRef, () => {
     return {
       resetValue
@@ -104,9 +95,9 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     isDefaultClosed: !props.defaultExpandMultilineText,
     children: _ref => {
       let isOpen = _ref.isOpen,
-          toggle = _ref.toggle,
-          containerStyles = _ref.containerStyles,
-          registerContentNode = _ref.registerContentNode;
+        toggle = _ref.toggle,
+        containerStyles = _ref.containerStyles,
+        registerContentNode = _ref.registerContentNode;
       const refObj = {
         containerRef: ref,
         registerContentNode
@@ -123,7 +114,8 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
               editor: editor,
               value: props.value,
               onChange: props.onChange,
-              children: jsxs(RichTextBody // @ts-ignore
+              children: jsxs(RichTextBody
+              // @ts-ignore
               , {
                 ref: refObj,
                 hasError: props.hasError,
@@ -144,9 +136,8 @@ const Editor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
                   onBlur: props.onBlur,
                   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
-
+                    (_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();
                       focusEditor(editor);
@@ -191,63 +182,49 @@ Editor.displayName = 'Editor';
 var Editor$1 = Editor;
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 let RichTextInput = /*#__PURE__*/function (_PureComponent) {
   _inherits(RichTextInput, _PureComponent);
-
   var _super = _createSuper(RichTextInput);
-
   function RichTextInput() {
     var _this;
-
     _classCallCheck(this, RichTextInput);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call(this, ...args);
     _this.serializedValue = _this.props.value;
     _this.internalSlateValue = validSlateStateAdapter(html.deserialize(_this.props.value || ''));
-
     _this.onValueChange = state => {
-      const serializedValue = html.serialize(state); // because we are not using setState, we need to make sure that
+      const serializedValue = 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.
-
       const hasInternalSlateValueChanged = _this.internalSlateValue !== state;
       const hasSerializedValueChanged = serializedValue !== _this.serializedValue;
       _this.internalSlateValue = validSlateStateAdapter(state);
-      _this.serializedValue = serializedValue; // the consumer only cares about the serializedValue, so it doesn't make sense to call
+      _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;
-
         (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, {
           target: {
             value: html.serialize(state)
           }
         });
       }
-
       if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
         // this way we force update if cursor or selection changes
         _this.forceUpdate();
       }
     };
-
     return _this;
   }
-
   _createClass(RichTextInput, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
@@ -272,11 +249,9 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
       if (!this.props.isReadOnly) {
         process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'RichTextInput: "onChange" is required when input is not read only.') : void 0;
       }
-
       if (this.props.showExpandIcon) {
         process.env.NODE_ENV !== "production" ? warning(typeof this.props.onClickExpand === 'function', 'RichTextInput: "onClickExpand" is required when showExpandIcon is true') : void 0;
       }
-
       return jsx(Editor$1, _objectSpread(_objectSpread({}, filterDataAttributes(this.props)), {}, {
         isAutofocused: this.props.isAutofocussed,
         id: this.props.id,
@@ -298,11 +273,8 @@ let RichTextInput = /*#__PURE__*/function (_PureComponent) {
       }));
     }
   }]);
-
   return RichTextInput;
 }(PureComponent); // When component is using `forwardRef` only `defaultProps` and `displayName` are recognized by default as static props
-
-
 RichTextInput.defaultProps = {
   defaultExpandMultilineText: false,
   horizontalConstraint: 'scale',
@@ -328,9 +300,7 @@ RichTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
   showExpandIcon: _pt.bool,
   onClickExpand: _pt.func
 } : {};
-
 const isTouched = touched => Boolean(touched);
-
 const RichTextInputWithRef = /*#__PURE__*/forwardRef((props, ref) => jsx(RichTextInput, _objectSpread({
   parentRef: ref
 }, props)));
@@ -340,6 +310,6 @@ RichTextInputWithRef.isTouched = isTouched;
 var RichTextInputWithRef$1 = RichTextInputWithRef;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.0";
 
 export { RichTextInputWithRef$1 as default, version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/rich-text-input",
   "description": "A controlled rich text input component for rich text with validation states.",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,18 +21,18 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/collapsible-motion": "16.0.0",
-    "@commercetools-uikit/constraints": "16.0.0",
-    "@commercetools-uikit/design-system": "16.0.0",
-    "@commercetools-uikit/flat-button": "16.0.0",
-    "@commercetools-uikit/hooks": "16.0.0",
-    "@commercetools-uikit/icons": "16.0.0",
-    "@commercetools-uikit/input-utils": "16.0.0",
-    "@commercetools-uikit/rich-text-utils": "16.0.0",
-    "@commercetools-uikit/spacings-inline": "16.0.0",
-    "@commercetools-uikit/spacings-stack": "16.0.0",
-    "@commercetools-uikit/tooltip": "16.0.0",
-    "@commercetools-uikit/utils": "16.0.0",
+    "@commercetools-uikit/collapsible-motion": "16.1.0",
+    "@commercetools-uikit/constraints": "16.1.0",
+    "@commercetools-uikit/design-system": "16.1.0",
+    "@commercetools-uikit/flat-button": "16.1.0",
+    "@commercetools-uikit/hooks": "16.1.0",
+    "@commercetools-uikit/icons": "16.1.0",
+    "@commercetools-uikit/input-utils": "16.1.0",
+    "@commercetools-uikit/rich-text-utils": "16.1.0",
+    "@commercetools-uikit/spacings-inline": "16.1.0",
+    "@commercetools-uikit/spacings-stack": "16.1.0",
+    "@commercetools-uikit/tooltip": "16.1.0",
+    "@commercetools-uikit/utils": "16.1.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "downshift": "6.1.12",