@commercetools-uikit/rich-text-utils 13.0.0 → 13.0.4

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

@@ -37,14 +37,13 @@ var _styled = require('@emotion/styled/base');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
 var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
 var reactIntl = require('react-intl');
-require('react-required-if');
 var react$1 = require('@emotion/react');
 var Tooltip = require('@commercetools-uikit/tooltip');
 var icons = require('@commercetools-uikit/icons');
 var Inline = require('@commercetools-uikit/spacings-inline');
 var designSystem = require('@commercetools-uikit/design-system');
 var omit = require('lodash/omit');
-var Downshift = require('downshift');
+var DownshiftUntyped = require('downshift');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -75,7 +74,7 @@ var _Array$from__default = /*#__PURE__*/_interopDefault(_Array$from);
 var Tooltip__default = /*#__PURE__*/_interopDefault(Tooltip);
 var Inline__default = /*#__PURE__*/_interopDefault(Inline);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
-var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
+var DownshiftUntyped__default = /*#__PURE__*/_interopDefault(DownshiftUntyped);
 
 var BLOCK_TAGS = {
   blockquote: 'block-quote',
@@ -134,10 +133,11 @@ var rules = [{
         nodes: next(el.childNodes)
       };
     }
+
+    return;
   },
   serialize: function serialize(obj, children) {
     if (obj.object === 'block') {
-      // eslint-disable-next-line default-case
       switch (obj.type) {
         case 'code':
           return jsxRuntime.jsx("pre", {
@@ -203,6 +203,8 @@ var rules = [{
           });
       }
     }
+
+    return;
   }
 }, {
   // Special case for code blocks, which need to grab the nested childNodes.
@@ -226,11 +228,13 @@ var rules = [{
             return _defineProperty({}, _sliceInstanceProperty__default["default"](key).call(key, 0, -1), value);
           });
         })).call(_context2, function (val) {
+          var _mapper$key;
+
           var _Object$entries$ = _slicedToArray(_Object$entries__default["default"](val)[0], 2),
               key = _Object$entries$[0],
               value = _Object$entries$[1];
 
-          return mapper[key] && mapper[key][value];
+          return (_mapper$key = mapper[key]) === null || _mapper$key === void 0 ? void 0 : _mapper$key[value];
         })).call(_context, function (val) {
           return Boolean(val);
         });
@@ -256,6 +260,8 @@ var rules = [{
         nodes: next(el.childNodes)
       };
     }
+
+    return;
   }
 }, // Add a new rule that handles marks...
 {
@@ -269,10 +275,11 @@ var rules = [{
         nodes: next(el.childNodes)
       };
     }
+
+    return;
   },
   serialize: function serialize(obj, children) {
     if (obj.object === 'mark') {
-      // eslint-disable-next-line default-case
       switch (obj.type) {
         case 'span':
           return jsxRuntime.jsx("span", {
@@ -317,6 +324,8 @@ var rules = [{
           });
       }
     }
+
+    return;
   }
 }]; // Create a new serializer instance with our `rules` from above.
 
@@ -353,7 +362,6 @@ var omitEmptyTranslations = function omitEmptyTranslations(localizedString) {
         value = _ref2[1];
 
     if (!isLocalizedHtmlValueEmpty(value)) {
-      // eslint-disable-next-line no-param-reassign
       localizedStringWithoutEmptyTranslations[language] = value;
     }
 
@@ -366,8 +374,7 @@ var createLocalizedString = function createLocalizedString(languages) {
   var existingTranslations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var mergedLanguages = existingTranslations ? uniq__default["default"](_concatInstanceProperty__default["default"](_context3 = []).call(_context3, _toConsumableArray(languages), _toConsumableArray(_Object$keys__default["default"](existingTranslations)))) : languages;
   return _reduceInstanceProperty__default["default"](mergedLanguages).call(mergedLanguages, function (localizedString, language) {
-    // eslint-disable-next-line no-param-reassign
-    localizedString[language] = existingTranslations && existingTranslations[language] ? initializeValue(existingTranslations[language]) : initializeValue('');
+    localizedString[language] = existingTranslations[language] ? initializeValue(existingTranslations[language]) : initializeValue('');
     return localizedString;
   }, {});
 };
@@ -394,7 +401,6 @@ var UndoPlugin = function UndoPlugin() {
   var hotkey = options.hotkey || HOT_KEY$1;
   var isUndoHotkey = memoizedIsHotkey$2(hotkey);
   return [{
-    // eslint-disable-next-line consistent-return
     onKeyDown: function onKeyDown(event, editor, next) {
       if (!isUndoHotkey(event) || !_hasUndos(editor)) {
         return next();
@@ -435,14 +441,15 @@ var RedoPlugin = function RedoPlugin() {
   var hotkey = options.hotkey || HOT_KEY;
   var isRedoHotkey = memoizedIsHotkey$1(hotkey);
   return [{
-    // eslint-disable-next-line consistent-return
     onKeyDown: function onKeyDown(event, editor, next) {
+      var _editor$toggleRedo;
+
       if (!isRedoHotkey(event) || !_hasRedos(editor)) {
         return next();
       }
 
       event.preventDefault();
-      editor.toggleRedo();
+      (_editor$toggleRedo = editor.toggleRedo) === null || _editor$toggleRedo === void 0 ? void 0 : _editor$toggleRedo.call(editor);
     },
     queries: {
       hasRedos: function hasRedos(editor) {
@@ -456,7 +463,9 @@ var RedoPlugin = function RedoPlugin() {
         }
 
         if (_hasRedos(editor)) {
-          editor.redo();
+          var _editor$redo;
+
+          (_editor$redo = editor.redo) === null || _editor$redo === void 0 ? void 0 : _editor$redo.call(editor);
         }
       }
     }
@@ -502,8 +511,10 @@ var toggle = function toggle(editor, typeName) {
 var query = function query(editor, typeName) {
   var isActive = hasBlock$2(typeName, editor);
 
-  if (editor.value.blocks.size > 0) {
-    var parent = editor.value.document.getParent(editor.value.blocks.first().key);
+  if (typeof editor.value.blocks.size === 'number' && editor.value.blocks.size > 0) {
+    var _editor$value$documen, _editor$value$documen2;
+
+    var parent = (_editor$value$documen = (_editor$value$documen2 = editor.value.document).getParent) === null || _editor$value$documen === void 0 ? void 0 : _editor$value$documen.call(_editor$value$documen2, editor.value.blocks.first().key);
     isActive = hasBlock$2(BLOCK_TAGS.li, editor) && parent && parent.type === typeName;
   }
 
@@ -512,7 +523,7 @@ var query = function query(editor, typeName) {
 
 var ListPlugin = function ListPlugin() {
   return [{
-    renderBlock: function renderBlock(props, editor, next) {
+    renderBlock: function renderBlock(props, _editor, next) {
       var attributes = props.attributes,
           children = props.children,
           node = props.node;
@@ -573,29 +584,28 @@ var memoizedIsHotkey = memoize__default["default"](isHotkey.isKeyHotkey);
 var requiredOptions = ['typeName', 'hotkey', 'command', 'query', 'RenderMark'];
 
 var validate = function validate(options) {
-  // eslint-disable-next-line consistent-return
   var missingRequiredOptions = _filterInstanceProperty__default["default"](requiredOptions).call(requiredOptions, function (option) {
-    return !options[option];
+    return !(options !== null && options !== void 0 && options[option]);
   });
 
   return missingRequiredOptions;
 };
 
-var MarkPlugin = function MarkPlugin() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+var MarkPlugin = function MarkPlugin(options) {
   validate(options);
   var isHotKey = memoizedIsHotkey(options.hotkey);
   return [{
-    // eslint-disable-next-line consistent-return
     onKeyDown: function onKeyDown(event, editor, next) {
+      var _editor$toggleMark;
+
       if (!isHotKey(event)) {
         return next();
       }
 
       event.preventDefault();
-      editor.toggleMark(options.typeName);
+      (_editor$toggleMark = editor.toggleMark) === null || _editor$toggleMark === void 0 ? void 0 : _editor$toggleMark.call(editor, options.typeName);
     },
-    renderMark: function renderMark(props, editor, next) {
+    renderMark: function renderMark(props, _editor, next) {
       var children = props.children,
           mark = props.mark,
           attributes = props.attributes;
@@ -611,7 +621,9 @@ var MarkPlugin = function MarkPlugin() {
       }
     },
     commands: _defineProperty({}, options.command, function (editor) {
-      return editor.toggleMark(options.typeName);
+      var _editor$toggleMark2;
+
+      return (_editor$toggleMark2 = editor.toggleMark) === null || _editor$toggleMark2 === void 0 ? void 0 : _editor$toggleMark2.call(editor, options.typeName);
     }),
     queries: _defineProperty({}, options.query, function (editor) {
       var _context;
@@ -623,6 +635,7 @@ var MarkPlugin = function MarkPlugin() {
   }];
 };
 
+MarkPlugin.propTypes = {};
 var MarkPlugin$1 = MarkPlugin;
 
 function ownKeys$h(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; }
@@ -630,7 +643,7 @@ function ownKeys$h(object, enumerableOnly) { var keys = _Object$keys__default["d
 function _objectSpread$h(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$h(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$h(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var RenderBlockPlugin = function RenderBlockPlugin() {
   return {
-    renderBlock: function renderBlock(props, editor, next) {
+    renderBlock: function renderBlock(props, next) {
       var attributes = props.attributes,
           children = props.children,
           node = props.node;
@@ -701,7 +714,7 @@ var RenderBlockPlugin = function RenderBlockPlugin() {
 };
 var RenderMarkPlugin = function RenderMarkPlugin() {
   return {
-    renderMark: function renderMark(props, editor, next) {
+    renderMark: function renderMark(props, next) {
       var children = props.children,
           mark = props.mark,
           attributes = props.attributes;
@@ -732,6 +745,10 @@ var RenderMarkPlugin = function RenderMarkPlugin() {
 function ownKeys$g(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$g(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$g(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$g(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+
+/*
+ * Instance counter to enable unique marks for multiple Placeholder instances.
+ */
 var instanceCounter = 0;
 /**
  * A plugin that renders a React placeholder for a given Slate node.
@@ -740,13 +757,8 @@ var instanceCounter = 0;
  * @return {Object}
  */
 
-function SlateReactPlaceholder() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  // eslint-disable-next-line no-plusplus
+function SlateReactPlaceholder(options) {
   var instanceId = instanceCounter++;
-  var when = options.when,
-      _options$style = options.style,
-      style = _options$style === void 0 ? {} : _options$style;
   /**
    * Decorate a match node with a placeholder mark when it fits the query.
    *
@@ -757,9 +769,9 @@ function SlateReactPlaceholder() {
    */
 
   function decorateNode(node, editor, next) {
-    var _context;
+    var _editor$query, _context;
 
-    if (!editor.query(when, node)) {
+    if (!((_editor$query = editor.query) !== null && _editor$query !== void 0 && _editor$query.call(editor, options.when, node))) {
       return next();
     }
 
@@ -812,10 +824,12 @@ function SlateReactPlaceholder() {
 
 
   function renderDecoration(props, editor, next) {
+    var _deco$data$get, _deco$data;
+
     var children = props.children,
         deco = props.decoration;
 
-    if (deco.type === 'placeholder' && deco.data.get('key') === instanceId) {
+    if (deco.type === 'placeholder' && ((_deco$data$get = (_deco$data = deco.data).get) === null || _deco$data$get === void 0 ? void 0 : _deco$data$get.call(_deco$data, 'key')) === instanceId) {
       var placeHolderStyle = _objectSpread$g({
         pointerEvents: 'none',
         display: 'inline-block',
@@ -825,7 +839,7 @@ function SlateReactPlaceholder() {
         whiteSpace: 'nowrap',
         opacity: '0.333',
         verticalAlign: 'text-top'
-      }, style);
+      }, options.style);
 
       return jsxRuntime.jsxs("span", {
         children: [jsxRuntime.jsx("span", {
@@ -850,20 +864,26 @@ function SlateReactPlaceholder() {
     renderDecoration: renderDecoration
   };
 }
+/**
+ * Export.
+ *
+ * @type {Function}
+ */
+
+
+SlateReactPlaceholder.propTypes = {};
 
 function ownKeys$f(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$f(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$f(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$f(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$f(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$f(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$f(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var RenderMark_Strong = function RenderMark_Strong(props) {
   return jsxRuntime.jsx("strong", _objectSpread$f({}, props));
-}; // eslint-disable-next-line camelcase, react/display-name
-
+};
 
 var RenderMark_Em = function RenderMark_Em(props) {
   return jsxRuntime.jsx("em", _objectSpread$f({}, props));
-}; // eslint-disable-next-line camelcase, react/display-name
-
+};
 
 var RenderMark_U = function RenderMark_U(props) {
   return jsxRuntime.jsx("u", _objectSpread$f({}, props));
@@ -873,21 +893,20 @@ var plugins = [{
   queries: {
     // used for the placeholder plugin
     shouldUsePlaceholder: function shouldUsePlaceholder(editor) {
-      var _context, _context2;
+      var _editor$value$documen, _context;
 
       var isEditorEmpty = editor.value.document.text === '';
-      var hasOneNode = _mapInstanceProperty__default["default"](_context = editor.value.document.nodes).call(_context, function (node) {
+      var hasOneNode = ((_editor$value$documen = editor.value.document.nodes) === null || _editor$value$documen === void 0 ? void 0 : _mapInstanceProperty__default["default"](_editor$value$documen).call(_editor$value$documen, function (node) {
         return node.text;
-      }).toArray().length === 1;
+      }).toArray().length) === 1;
 
-      var blocks = _mapInstanceProperty__default["default"](_context2 = editor.value.blocks).call(_context2, function (block) {
+      var blocks = _mapInstanceProperty__default["default"](_context = editor.value.blocks).call(_context, function (block) {
         return block.type;
       }).toArray();
 
       var hasOneBlock = blocks.length === 1;
       var isParagraph = blocks[0] && blocks[0] === BLOCK_TAGS.p;
-      var shouldUsePlaceholder = !editor.hasPlaceholder && isEditorEmpty && hasOneNode && hasOneBlock && isParagraph; // eslint-disable-next-line no-param-reassign
-
+      var shouldUsePlaceholder = Boolean(!editor.hasPlaceholder && isEditorEmpty && hasOneNode && hasOneBlock && isParagraph);
       editor.hasPlaceholder = shouldUsePlaceholder;
       return shouldUsePlaceholder;
     }
@@ -942,8 +961,8 @@ var HiddenInput = function HiddenInput(props) {
   });
 };
 
-HiddenInput.displayName = 'HiddenInput';
 HiddenInput.propTypes = {};
+HiddenInput.displayName = 'HiddenInput';
 var HiddenInput$1 = HiddenInput;
 
 function ownKeys$e(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; }
@@ -2573,24 +2592,20 @@ var getBackgroundColor = function getBackgroundColor(props) {
     return /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.backgroundColorForInputWhenDisabled, ";" + ("" ), "" );
   }
 
-  if (props.isReadOnly) {
-    return /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.backgroundColorForInputWhenReadonly, ";" + ("" ), "" );
-  }
-
   return /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.backgroundColorForInput, ";" + ("" ), "" );
 };
 
 var ToolbarMainControls = _styled__default["default"]("div", {
-  target: "e10epvnp4"
+  target: "e1sckae44"
 } )({
   name: "tg5p88",
   styles: "display:flex;flex-wrap:wrap;flex:1;align-items:flex-start;>*{margin-left:1px;}"
 } );
 var ToolbarRightControls = _styled__default["default"]("div", {
-  target: "e10epvnp3"
+  target: "e1sckae43"
 } )("" );
 var Toolbar = _styled__default["default"]("div", {
-  target: "e10epvnp2"
+  target: "e1sckae42"
 } )("display:flex;flex-wrap:wrap;font-family:", designSystem.customProperties.fontFamilyDefault, ";border-radius:", designSystem.customProperties.borderRadiusForInput, ";border-bottom:0;padding:", designSystem.customProperties.spacingXs, " calc(", designSystem.customProperties.spacingS, " - 1px);padding-left:calc(", designSystem.customProperties.spacingXs, " - 1px);align-items:flex-start;align-content:stretch;position:relative;&::after{position:absolute;content:'';width:calc(100% - ", designSystem.customProperties.spacingS, ");height:1px;background:", designSystem.customProperties.colorNeutral, ";left:50%;transform:translateX(-50%);bottom:-1px;}&:focus{outline:none;}" + ("" ));
 
 var _ref$2 = {
@@ -2603,10 +2618,10 @@ var reset = function reset(props) {
 };
 
 var EditorContainer = _styled__default["default"]("div", {
-  target: "e10epvnp1"
+  target: "e1sckae41"
 } )("padding:4px ", designSystem.customProperties.spacingS, ";padding-top:6px;border-radius:", designSystem.customProperties.borderRadiusForInput, ";font-family:", designSystem.customProperties.fontFamilyDefault, ";", getBorderColor, " overflow-y:scroll;", reset, ";" + ("" ));
 var Container = _styled__default["default"]("div", {
-  target: "e10epvnp0"
+  target: "e1sckae40"
 } )("border-radius:", designSystem.customProperties.borderRadiusForInput, ";border:1px solid ", designSystem.customProperties.borderColorForInput, ";transition:", designSystem.customProperties.transitionStandard, ";", getBorderColor, " ", getBackgroundColor, " pointer-events:", function (props) {
   return props.isDisabled || props.isReadOnly ? 'none' : 'inherit';
 }, ";position:relative;&:hover{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}&:focus{outline:none;box-shadow:inset 0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";}", Toolbar, "{border-radius:", designSystem.customProperties.borderRadiusForInput, ";border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:", designSystem.customProperties.borderColorForInput, ";}&:focus-within{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";", Toolbar, "{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}", EditorContainer, "{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}}" + ("" ));
@@ -2639,44 +2654,41 @@ RichTextBodyButton.displayName = 'RichTextInputButton';
 var Button = RichTextBodyButton;
 
 var Divider = _styled__default["default"]("span", {
-  target: "ek11h3e0"
+  target: "ehglnxa0"
 } )("width:1px;height:", designSystem.customProperties.spacingL, ";background:", designSystem.customProperties.colorNeutral, ";margin:0 ", designSystem.customProperties.spacingXs, ";" + ("" ));
 
 var Divider$1 = Divider;
 
 var DropdownItem = _styled__default["default"]("button", {
-  target: "e10zulpn1"
+  target: "e1f4n71b1"
 } )("width:100%;border:0;font-size:1rem;cursor:pointer;padding:", designSystem.customProperties.spacingXs, " ", designSystem.customProperties.spacingS, ";font-family:", designSystem.customProperties.fontFamilyDefault, ";display:block;background-color:", function (props) {
   return props.isSelected ? designSystem.customProperties.colorAccent95 : designSystem.customProperties.colorSurface;
 }, ";&:focus,&:hover{outline:none;background-color:", designSystem.customProperties.colorNeutral90, ";}" + ("" ));
 
-var getButtonStyles = function getButtonStyles() {
+var getButtonStyles = function getButtonStyles(props) {
   var _context;
 
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-    isStyleButton: true
-  };
   return [/*#__PURE__*/react$1.css("border:0;font-family:", designSystem.customProperties.fontFamilyDefault, ";border-radius:", designSystem.customProperties.borderRadius4, ";cursor:pointer;font-size:", designSystem.customProperties.fontSizeForInput, ";color:", designSystem.customProperties.colorSolid, ";display:flex;justify-content:center;align-items:center;padding:", props.isStyleButton ? _concatInstanceProperty__default["default"](_context = "calc(".concat(designSystem.customProperties.spacingXs, " - 1px) ")).call(_context, designSystem.customProperties.spacingS) : designSystem.customProperties.spacingXs, ";&:hover{background-color:", designSystem.customProperties.colorNeutral90, ";}" + ("" ), "" ), props.isIndeterminate && /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.colorAccent95, ";" + ("" ), "" ), props.isOpen && /*#__PURE__*/react$1.css("&:not(:hover){background-color:", designSystem.customProperties.colorAccent30, ";color:", designSystem.customProperties.colorSurface, ";svg{fill:", designSystem.customProperties.colorSurface, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.customProperties.colorNeutral60, ";svg{fill:", designSystem.customProperties.colorNeutral60, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.customProperties.colorNeutral60, ";svg{fill:", designSystem.customProperties.colorNeutral60, ";}" + ("" ), "" )];
 };
 
 var DropdownContainer = _styled__default["default"]("div", {
-  target: "e10zulpn0"
+  target: "e1f4n71b0"
 } )("position:absolute;cursor:pointer;font-size:", designSystem.customProperties.fontSizeForInput, ";top:", designSystem.customProperties.spacingXs, ";margin-top:", designSystem.customProperties.spacingXs, ";left:0;white-space:nowrap;background:", designSystem.customProperties.colorSurface, ";overflow:hidden;z-index:9999;border:1px solid ", designSystem.customProperties.colorPrimary, ";border-radius:", designSystem.customProperties.borderRadius6, ";" + ("" ));
 
 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 _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys$1(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys$1(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$1(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$1(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$1(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var getIsSelected = function getIsSelected(props, item) {
   var _context;
 
-  return !props.isMulti ? item.value === props.value : _findInstanceProperty__default["default"](_context = props.value).call(_context, function (selectedItem) {
+  return !props.isMulti ? item.value === props.value : props.value && _findInstanceProperty__default["default"](_context = props.value).call(_context, function (selectedItem) {
     return selectedItem === item.value;
   });
 };
 
 var Label = _styled__default["default"]("div", {
-  target: "eow992s0"
+  target: "e176a1kh0"
 } );
 
 var _ref$1 = {
@@ -2688,11 +2700,12 @@ var Dropdown = function Dropdown(props) {
   var DropdownItem = props.components.Item;
   var DropdownLabel = props.components.Label;
   var isIndeterminate = props.isMulti && props.value && props.value.length > 0;
-  return jsxRuntime.jsx(Downshift__default["default"], {
+  var Downshift = DownshiftUntyped__default["default"];
+  return jsxRuntime.jsx(Downshift, {
     onChange: props.onChange,
     selectedItem: props.value,
     itemToString: function itemToString(headings) {
-      return headings ? headings.label : '';
+      return (headings === null || headings === void 0 ? void 0 : headings.label) || '';
     },
     children: function children(_ref2) {
       var _context2;
@@ -2706,7 +2719,7 @@ var Dropdown = function Dropdown(props) {
           title: props.label,
           placement: "bottom",
           off: isOpen,
-          style: {
+          styles: {
             body: {
               zIndex: 9999
             }
@@ -2747,6 +2760,7 @@ var Dropdown = function Dropdown(props) {
   });
 };
 
+Dropdown.propTypes = {};
 Dropdown.displayName = 'Dropdown';
 Dropdown.defaultProps = {
   components: {
@@ -2755,13 +2769,12 @@ Dropdown.defaultProps = {
   },
   isMulti: false
 };
-Dropdown.propTypes = {};
 var Dropdown$1 = Dropdown;
 
 var hasBlock = function hasBlock(type, editor) {
-  var _context;
+  var _editor$value, _context;
 
-  return _someInstanceProperty__default["default"](_context = editor.value.blocks).call(_context, function (node) {
+  return (_editor$value = editor.value) === null || _editor$value === void 0 ? void 0 : _someInstanceProperty__default["default"](_context = _editor$value.blocks).call(_context, function (node) {
     return node.type === type;
   });
 };
@@ -2938,7 +2951,7 @@ DropdownLabel.displayName = 'DropdownLabel';
 DropdownLabel.propTypes = {};
 
 var Item = _styled__default["default"]("div", {
-  target: "e1i52mlj0"
+  target: "e1yf02eo0"
 } )({
   name: "1rmndyi",
   styles: "margin:0;text-align:left"
@@ -2947,12 +2960,12 @@ var Item = _styled__default["default"]("div", {
 var StylesDropdownItem = function StylesDropdownItem(props) {
   var _context;
 
-  var as = _findInstanceProperty__default["default"](_context = _Object$keys__default["default"](BLOCK_TAGS)).call(_context, function (key) {
+  var asProp = _findInstanceProperty__default["default"](_context = _Object$keys__default["default"](BLOCK_TAGS)).call(_context, function (key) {
     return BLOCK_TAGS[key] === props.value;
   }) || 'div';
   return jsxRuntime.jsx(DropdownItem, _objectSpread(_objectSpread({}, props), {}, {
     children: jsxRuntime.jsx(Item, {
-      as: as,
+      as: asProp,
       children: props.children
     })
   }));
@@ -3014,15 +3027,19 @@ var _ref = {
 } ;
 
 var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  var registerContentNode = ref.registerContentNode,
-      containerRef = ref.containerRef;
+  var _props$editor$value3, _props$editor$value3$, _props$editor$value4, _props$styles, _props$editor$value5, _props$editor$value6, _props$editor$value7, _props$editor$value8, _props$editor$value9;
+
+  // NOTE: the forwarded ref is an object of refs, thus making it a bit trickier to type.
+  var _ref2 = ref,
+      registerContentNode = _ref2.registerContentNode,
+      containerRef = _ref2.containerRef;
   var intl = reactIntl.useIntl();
   var dropdownOptions = createMoreStylesDropdownOptions(intl);
   var styleDropdownOptions = createStyleDropdownOptions(intl);
   var hasUndos = props.editor.hasUndos();
   var hasRedos = props.editor.hasRedos();
-  var onClickBlock = react.useCallback(function (_ref2) {
-    var type = _ref2.value;
+  var onClickBlock = react.useCallback(function (_ref3) {
+    var type = _ref3.value;
 
     // Handle everything but list buttons.
     if (type !== BLOCK_TAGS.ul && type !== BLOCK_TAGS.ol) {
@@ -3035,15 +3052,17 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
         props.editor.setBlocks(isActive ? DEFAULT_NODE : type);
       }
     } else {
-      var _context2;
+      var _props$editor$value, _context2;
 
       // Handle the extra wrapping required for list buttons.
       var _isList = hasBlock$1(BLOCK_TAGS.li, props.editor);
 
-      var isType = _someInstanceProperty__default["default"](_context2 = props.editor.value.blocks).call(_context2, function (block) {
-        return !!props.editor.value.document.getClosest(block.key, function (parent) {
+      var isType = (_props$editor$value = props.editor.value) === null || _props$editor$value === void 0 ? void 0 : _someInstanceProperty__default["default"](_context2 = _props$editor$value.blocks).call(_context2, function (block) {
+        var _props$editor$value2;
+
+        return !!((_props$editor$value2 = props.editor.value) !== null && _props$editor$value2 !== void 0 && _props$editor$value2.document.getClosest(block.key, function (parent) {
           return parent.type === type;
-        });
+        }));
       });
 
       if (_isList && isType) {
@@ -3056,14 +3075,16 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
     }
   }, [props.editor]);
   var onChangeMoreStyles = react.useCallback(function (val) {
-    props.editor.toggleMark(val.value);
+    var _props$editor$toggleM, _props$editor;
+
+    (_props$editor$toggleM = (_props$editor = props.editor).toggleMark) === null || _props$editor$toggleM === void 0 ? void 0 : _props$editor$toggleM.call(_props$editor, val.value);
   }, [props.editor]);
-  var activeBlock = props.editor.value.blocks.first() && props.editor.value.blocks.first().type || ''; // so that we don't show our multi dropdown in an `indeterminate`
+  var activeBlock = ((_props$editor$value3 = props.editor.value) === null || _props$editor$value3 === void 0 ? void 0 : (_props$editor$value3$ = _props$editor$value3.blocks.first()) === null || _props$editor$value3$ === void 0 ? void 0 : _props$editor$value3$.type) || ''; // so that we don't show our multi dropdown in an `indeterminate`
   // while the component is not in focus
 
   var activeMoreStyleMarks = [];
 
-  if (props.editor.value.selection.isFocused) {
+  if ((_props$editor$value4 = props.editor.value) !== null && _props$editor$value4 !== void 0 && _props$editor$value4.selection.isFocused) {
     var _context3;
 
     var activeMarks = _mapInstanceProperty__default["default"](_context3 = _Array$from__default["default"](props.editor.value.activeMarks)).call(_context3, function (mark) {
@@ -3083,8 +3104,11 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
   var onToolbarMouseDown = react.useCallback(function (event) {
     event.preventDefault();
   }, []);
+
+  if (props.showExpandIcon) ;
+
   return jsxRuntime.jsxs(Container, {
-    css: props.styles.container,
+    css: (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.container,
     hasError: props.hasError,
     hasWarning: props.hasWarning,
     isReadOnly: props.isReadOnly,
@@ -3108,7 +3132,7 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
           placement: "bottom",
           styles: tooltipStyles,
           children: jsxRuntime.jsx(Button, {
-            isActive: props.editor.value.selection.isFocused && props.editor.hasBoldMark(),
+            isActive: ((_props$editor$value5 = props.editor.value) === null || _props$editor$value5 === void 0 ? void 0 : _props$editor$value5.selection.isFocused) && props.editor.hasBoldMark(),
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             label: intl.formatMessage(messages.boldButtonLabel),
@@ -3122,7 +3146,7 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
           placement: "bottom",
           styles: tooltipStyles,
           children: jsxRuntime.jsx(Button, {
-            isActive: props.editor.value.selection.isFocused && props.editor.hasItalicMark(),
+            isActive: ((_props$editor$value6 = props.editor.value) === null || _props$editor$value6 === void 0 ? void 0 : _props$editor$value6.selection.isFocused) && props.editor.hasItalicMark(),
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             label: intl.formatMessage(messages.italicButtonLabel),
@@ -3136,7 +3160,7 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
           placement: "bottom",
           styles: tooltipStyles,
           children: jsxRuntime.jsx(Button, {
-            isActive: props.editor.value.selection.isFocused && props.editor.hasUnderlinedMark(),
+            isActive: ((_props$editor$value7 = props.editor.value) === null || _props$editor$value7 === void 0 ? void 0 : _props$editor$value7.selection.isFocused) && props.editor.hasUnderlinedMark(),
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             label: intl.formatMessage(messages.underlinedButtonLabel),
@@ -3162,7 +3186,7 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
           placement: "bottom",
           styles: tooltipStyles,
           children: jsxRuntime.jsx(Button, {
-            isActive: props.editor.value.selection.isFocused && props.editor.hasNumberedListBlock(),
+            isActive: ((_props$editor$value8 = props.editor.value) === null || _props$editor$value8 === void 0 ? void 0 : _props$editor$value8.selection.isFocused) && props.editor.hasNumberedListBlock(),
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             label: intl.formatMessage(messages.orderedListButtonLabel),
@@ -3176,7 +3200,7 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
           placement: "bottom",
           styles: tooltipStyles,
           children: jsxRuntime.jsx(Button, {
-            isActive: props.editor.value.selection.isFocused && props.editor.hasBulletedListBlock(),
+            isActive: ((_props$editor$value9 = props.editor.value) === null || _props$editor$value9 === void 0 ? void 0 : _props$editor$value9.selection.isFocused) && props.editor.hasBulletedListBlock(),
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             label: intl.formatMessage(messages.unorderedListButtonLabel),
@@ -3249,15 +3273,15 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
     })]
   });
 });
-RichTextEditorBody.displayName = 'RichTextEditorBody';
-RichTextEditorBody.propTypes = {};
-RichTextEditorBody.defaultProps = {
+var defaultProps = {
   styles: {}
 };
+RichTextEditorBody.displayName = 'RichTextEditorBody';
+RichTextEditorBody.defaultProps = defaultProps;
 var RichTextEditorBody$1 = RichTextEditorBody;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.0";
+var version = "13.0.4";
 
 exports.HiddenInput = HiddenInput$1;
 exports.RichTextBody = RichTextEditorBody$1;