@contentful/field-editor-rich-text 2.0.0-next.4 → 2.0.0-next.8

package/dist/field-editor-rich-text.esm.js

@@ -3,16 +3,16 @@ import { toSlatejsDocument, toContentfulDocument } from '@contentful/contentful-
 import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, getScheduleTooltipContent, EntityProvider } from '@contentful/field-editor-reference';
 import { entityHelpers, shortenStorageUnit, isValidImage, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import { TOP_LEVEL_BLOCKS, BLOCKS, CONTAINERS, VOID_BLOCKS, INLINES, TABLE_BLOCKS, HEADINGS, TEXT_CONTAINERS, LIST_ITEM_BLOCKS, MARKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
-import { usePlateEditorRef, getNodes, getText, toggleNodeType, onKeyDownToggleElement, setNodes, isAncestorEmpty, getParent, getAbove, findNode, getPlugin, someHtmlElement, isMarkActive, toggleMark, getPluginType, match, KEY_DESERIALIZE_HTML, someNode, insertNodes, getChildren as getChildren$1, isFirstChild, getBlockAbove, getLastChildPath, createDeserializeHtmlPlugin, createDeserializeAstPlugin, Plate } from '@udecode/plate-core';
+import { usePlateEditorRef, getNodes, getText, toggleNodeType, getAbove, onKeyDownToggleElement, setNodes, isAncestorEmpty, getParent, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, getPluginType, ELEMENT_DEFAULT, findNode, someHtmlElement, isMarkActive, toggleMark, match, KEY_DESERIALIZE_HTML, someNode, getChildren as getChildren$1, getBlockAbove, getLastChildPath, createDeserializeHtmlPlugin, createDeserializeAstPlugin, Plate } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash-es/noop';
+import { Text, Element, Editor, Transforms, Range, Path, Node } from 'slate';
 import constate from 'constate';
 import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
 import { createSoftBreakPlugin as createSoftBreakPlugin$1, createExitBreakPlugin as createExitBreakPlugin$1 } from '@udecode/plate-break';
 import isHotkey from 'is-hotkey';
-import { Text, Element, Editor, Transforms, Range, Path, Node } from 'slate';
-import { useSelected, useReadOnly, ReactEditor, useFocused } from 'slate-react';
+import { ReactEditor, useSelected, useReadOnly, useFocused } from 'slate-react';
 import { AssetCard, Menu, Text as Text$1, Notification, EntryCard, MenuItem, Button, Flex, Icon, InlineEntryCard, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, IconButton } from '@contentful/f36-components';
 import mimetype from '@contentful/mimetype';
 import get from 'lodash-es/get';
@@ -20,7 +20,8 @@ import { ClockIcon, AssetIcon, EmbeddedEntryBlockIcon, EmbeddedEntryInlineIcon,
 import tokens from '@contentful/f36-tokens';
 import find from 'lodash-es/find';
 import flow from 'lodash-es/flow';
-import { ELEMENT_LI, ELEMENT_UL, ELEMENT_OL, withList as withList$1, createListPlugin as createListPlugin$1, ELEMENT_LIC, toggleList } from '@udecode/plate-list';
+import { getListItemEntry, moveListItemUp, ELEMENT_LI, unwrapList, deleteBackwardList, deleteForwardList, deleteFragmentList, normalizeList, createListPlugin as createListPlugin$1, ELEMENT_UL, ELEMENT_OL, ELEMENT_LIC, toggleList } from '@udecode/plate-list';
+import { onKeyDownResetNode, SIMULATE_BACKSPACE } from '@udecode/plate-reset-node';
 import { createBoldPlugin as createBoldPlugin$1, createCodePlugin as createCodePlugin$1, createItalicPlugin as createItalicPlugin$1, createUnderlinePlugin as createUnderlinePlugin$1 } from '@udecode/plate-basic-marks';
 import isPlainObject from 'is-plain-obj';
 import { createParagraphPlugin as createParagraphPlugin$1 } from '@udecode/plate-paragraph';
@@ -341,8 +342,8 @@ var schema = {
 function getContentfulEditorId(sdk) {
   var entry = sdk.entry,
       field = sdk.field;
-  var entryId = entry.getSys().id;
-  return "rich-text-editor-" + entryId + "-" + field.id + "-" + field.locale;
+  var sys = entry.getSys();
+  return "rich-text-editor-" + sys.id + "-" + field.id + "-" + field.locale;
 }
 
 function useContentfulEditorHook(_ref) {
@@ -483,6 +484,18 @@ function getParents(el) {
   return parents;
 }
 
+// "modern" Edge was released at 79.x
+var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent); // Native `beforeInput` events don't work well with react on Chrome 75
+// and older, Chrome 76+ can use `beforeInput` though.
+
+var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent); // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
+// Chrome Legacy doesn't support `beforeinput` correctly
+
+var HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
+typeof globalThis !== 'undefined' && globalThis.InputEvent && typeof globalThis.InputEvent.prototype.getTargetRanges === 'function'; // The `getTargetRanges` property isn't recognized.
+
+var IS_SAFARI = typeof navigator !== 'undefined' && /*#__PURE__*/ /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
+
 var LINK_TYPES = [INLINES.HYPERLINK, INLINES.ENTRY_HYPERLINK, INLINES.ASSET_HYPERLINK];
 function isBlockSelected(editor, type) {
   var _Array$from = Array.from(Editor.nodes(editor, {
@@ -700,16 +713,27 @@ var isInlineOrText = function isInlineOrText(node) {
   // either text or inline elements
   return Text.isText(node) || Element.isElement(node) && INLINE_TYPES.includes(node.type);
 };
+var focus = function focus(editor) {
+  var x = window.scrollX;
+  var y = window.scrollY;
+  ReactEditor.focus(editor); // Safari has issues with `editor.focus({ preventScroll: true })`, it ignores the option `preventScroll`
+
+  if (IS_SAFARI) {
+    setTimeout(function () {
+      window.scrollTo(x, y); // restore position
+    }, 0);
+  }
+};
 
-// "modern" Edge was released at 79.x
-var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent); // Native `beforeInput` events don't work well with react on Chrome 75
-// and older, Chrome 76+ can use `beforeInput` though.
-
-var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent); // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
-// Chrome Legacy doesn't support `beforeinput` correctly
-
-var HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
-typeof globalThis !== 'undefined' && globalThis.InputEvent && typeof globalThis.InputEvent.prototype.getTargetRanges === 'function'; // The `getTargetRanges` property isn't recognized.
+function withLinkTracking(tracking, Component) {
+  return function ComponentWithTracking(props) {
+    return /*#__PURE__*/React__default.createElement(Component, Object.assign({}, props, {
+      onEntityFetchComplete: function onEntityFetchComplete() {
+        tracking.onViewportAction('linkRendered');
+      }
+    }));
+  };
+}
 
 function useSdk(_ref) {
   var sdk = _ref.sdk;
@@ -847,10 +871,19 @@ function FetchingWrappedAssetCard(props) {
   var asset = assets[props.assetId];
   var defaultLocaleCode = props.sdk.locales["default"];
   var entityFile = asset != null && (_asset$fields = asset.fields) != null && _asset$fields.file ? asset.fields.file[props.locale] || asset.fields.file[defaultLocaleCode] : undefined;
+  var onEntityFetchComplete = props.onEntityFetchComplete;
   useEffect(function () {
     getOrLoadAsset(props.assetId);
   }, [props.assetId]); // eslint-disable-line
 
+  useEffect(function () {
+    if (!asset) {
+      return;
+    }
+
+    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+  }, [asset, onEntityFetchComplete]);
+
   function getAssetSrc() {
     if (!(entityFile != null && entityFile.url)) return '';
     return entityFile.url + "?h=300";
@@ -975,6 +1008,7 @@ function FetchingWrappedEntryCard(props) {
     });
   }, [props.sdk, entry]);
   var defaultLocaleCode = props.sdk.locales["default"];
+  var onEntityFetchComplete = props.onEntityFetchComplete;
   useEffect(function () {
     if (!entry || entry === 'failed') return;
     entityHelpers.getEntryImage({
@@ -990,6 +1024,14 @@ function FetchingWrappedEntryCard(props) {
     getOrLoadEntry(props.entryId);
   }, [props.entryId]); // eslint-disable-line
 
+  useEffect(function () {
+    if (!entry) {
+      return;
+    }
+
+    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+  }, [entry, onEntityFetchComplete]);
+
   function renderDropdown() {
     if (!props.onEdit || !props.onRemove) return undefined;
     return [props.onEdit ? /*#__PURE__*/createElement(MenuItem, {
@@ -1071,13 +1113,14 @@ function FetchingWrappedEntryCard(props) {
 
 var styles$3 = {
   root: /*#__PURE__*/css({
-    marginBottom: '1.25rem'
+    marginBottom: '1.25rem !important'
   })
 };
 function LinkedEntityBlock(props) {
   var attributes = props.attributes,
       children = props.children,
-      element = props.element;
+      element = props.element,
+      onEntityFetchComplete = props.onEntityFetchComplete;
   var isSelected = useSelected();
   var editor = useContentfulEditor();
   var sdk = useSdkContext();
@@ -1119,7 +1162,8 @@ function LinkedEntityBlock(props) {
     isDisabled: isDisabled,
     isSelected: isSelected,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick
+    onEdit: handleEditClick,
+    onEntityFetchComplete: onEntityFetchComplete
   }), entityType === 'Asset' && /*#__PURE__*/React__default.createElement(FetchingWrappedAssetCard, {
     sdk: sdk,
     assetId: entityId,
@@ -1127,7 +1171,8 @@ function LinkedEntityBlock(props) {
     isDisabled: isDisabled,
     isSelected: isSelected,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick
+    onEdit: handleEditClick,
+    onEntityFetchComplete: onEntityFetchComplete
   })), children);
 }
 
@@ -2031,7 +2076,7 @@ function insertBlock(editor, nodeType, entity) {
     Transforms.setNodes(editor, linkedEntityBlock);
   }
 
-  ReactEditor.focus(editor);
+  focus(editor);
 }
 
 var styles$4 = {
@@ -2125,13 +2170,13 @@ function getWithEmbeddedEntityEvents(nodeType, sdk) {
 }
 
 var createEmbeddedEntityPlugin = function createEmbeddedEntityPlugin(nodeType, hotkey) {
-  return function (sdk) {
+  return function (sdk, tracking) {
     return {
       key: nodeType,
       type: nodeType,
       isElement: true,
       isVoid: true,
-      component: LinkedEntityBlock,
+      component: withLinkTracking(tracking, LinkedEntityBlock),
       options: {
         hotkey: hotkey
       },
@@ -2189,12 +2234,20 @@ function FetchingWrappedInlineEntryCard(props) {
     return entries[props.entryId];
   }, [entries, props.entryId]);
   var allContentTypes = props.sdk.space.getCachedContentTypes();
+  var onEntityFetchComplete = props.onEntityFetchComplete;
   var contentType = React__default.useMemo(function () {
     if (!entry || entry === 'failed' || !allContentTypes) return undefined;
     return allContentTypes.find(function (contentType) {
       return contentType.sys.id === entry.sys.contentType.sys.id;
     });
   }, [allContentTypes, entry]);
+  React__default.useEffect(function () {
+    if (!entry) {
+      return;
+    }
+
+    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+  }, [entry, onEntityFetchComplete]);
   var contentTypeName = contentType ? contentType.name : '';
   var title = React__default.useMemo(function () {
     return getEntryTitle({
@@ -2290,12 +2343,10 @@ var styles$6 = {
     marginRight: '10px'
   }),
   root: /*#__PURE__*/css({
-    margin: '0 1px',
+    display: 'inline-block',
+    margin: "0 " + tokens.spacing2Xs,
     fontSize: 'inherit',
     span: {
-      webkitUserSelect: 'none',
-      mozUserSelect: 'none',
-      msUserSelect: 'none',
       userSelect: 'none'
     }
   })
@@ -2338,7 +2389,8 @@ function EmbeddedEntityInline(props) {
     isSelected: isSelected,
     isDisabled: isDisabled,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick
+    onEdit: handleEditClick,
+    onEntityFetchComplete: props.onEntityFetchComplete
   })), props.children);
 }
 
@@ -2362,7 +2414,7 @@ function _selectEntityAndInsert$1() {
 
           case 4:
             entry = _context2.sent;
-            ReactEditor.focus(editor); // Dialog steals focus from editor, return it.
+            focus(editor); // Dialog steals focus from editor, return it.
 
             if (entry) {
               _context2.next = 8;
@@ -2448,7 +2500,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
     className: "rich-text__embedded-entry-list-icon " + styles$6.icon
   }), /*#__PURE__*/createElement("span", null, "Inline entry")));
 }
-function createEmbeddedEntityInlinePlugin(sdk) {
+function createEmbeddedEntityInlinePlugin(sdk, tracking) {
   var htmlAttributeName = 'data-embedded-entity-inline-id';
   return {
     key: INLINES.EMBEDDED_ENTRY,
@@ -2456,7 +2508,7 @@ function createEmbeddedEntityInlinePlugin(sdk) {
     isElement: true,
     isInline: true,
     isVoid: true,
-    component: EmbeddedEntityInline,
+    component: withLinkTracking(tracking, EmbeddedEntityInline),
     options: {
       hotkey: 'mod+shift+2'
     },
@@ -2570,14 +2622,25 @@ function ToolbarHeadingButton(props) {
         unwrapFromRoot(editor);
       }
 
+      var prevOnChange = editor.onChange;
+      /*
+       The focus might happen at point in time when
+       `toggleNodeType` changes aren't rendered yet, causing the browser
+       to place the cursor at the start of the text.
+       We wait for the change event before focusing
+       the editor again. This ensures the cursor is back at the previous
+       position.*/
+
+      editor.onChange = function () {
+        focus(editor);
+        editor.onChange = prevOnChange;
+        prevOnChange.apply(void 0, arguments);
+      };
+
       toggleNodeType(editor, {
         activeType: type,
         inactiveType: type
-      }); // TODO: Figure out why focus only works with timeout here.
-
-      setTimeout(function () {
-        ReactEditor.focus(editor);
-      }, 0);
+      });
     };
   }
 
@@ -2707,16 +2770,6 @@ var createHeadingPlugin = function createHeadingPlugin() {
         allow: HEADINGS
       }
     }],
-    exitBreak: [// Pressing ENTER at the start or end of a heading text inserts a
-    // normal paragraph
-    {
-      hotkey: 'enter',
-      query: {
-        allow: HEADINGS,
-        end: true,
-        start: true
-      }
-    }],
     normalizer: [{
       match: {
         type: HEADINGS
@@ -2727,6 +2780,31 @@ var createHeadingPlugin = function createHeadingPlugin() {
       },
       transform: (_transform = {}, _transform[BLOCKS.PARAGRAPH] = transformUnwrap, _transform["default"] = transformLift, _transform)
     }],
+    then: function then(editor) {
+      return {
+        exitBreak: [// Pressing ENTER at the start or end of a heading text inserts a
+        // normal paragraph.
+        {
+          hotkey: 'enter',
+          query: {
+            allow: HEADINGS,
+            end: true,
+            start: true,
+            // Exclude headings inside lists as it interferes with the list's
+            // insertBreak implementation
+            filter: function filter(_ref2) {
+              var path = _ref2[1];
+              return !getAbove(editor, {
+                at: path,
+                match: {
+                  type: BLOCKS.LIST_ITEM
+                }
+              });
+            }
+          }
+        }]
+      };
+    },
     plugins: HEADINGS.map(function (nodeType, idx) {
       var level = idx + 1;
       var tagName = "h" + level;
@@ -2849,7 +2927,7 @@ function ToolbarHrButton(props) {
     hasText ? Transforms.insertNodes(editor, hr) : setNodes(editor, hr); // Move focus to the next paragraph (added by TrailingParagraph plugin)
 
     moveToTheNextLine(editor);
-    ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -3341,7 +3419,7 @@ function _addOrEditLink() {
                 path: path
               });
             });
-            ReactEditor.focus(editor);
+            focus(editor);
 
           case 15:
           case "end":
@@ -3403,37 +3481,11 @@ function UrlHyperlink(props) {
   var sdk = useSdkContext();
   var uri = props.element.data.uri;
 
-  function handleClick(_x) {
-    return _handleClick.apply(this, arguments);
-  }
-
-  function _handleClick() {
-    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(event) {
-      return runtime_1.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              event.preventDefault();
-              event.stopPropagation();
-
-              if (editor) {
-                _context.next = 4;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 4:
-              addOrEditLink(editor, sdk);
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _handleClick.apply(this, arguments);
+  function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!editor) return;
+    addOrEditLink(editor, sdk);
   }
 
   return /*#__PURE__*/createElement(Tooltip, {
@@ -3456,39 +3508,20 @@ function EntityHyperlink(props) {
   var isReadOnly = useReadOnly();
   var sdk = useSdkContext();
   var target = props.element.data.target;
+  var onEntityFetchComplete = props.onEntityFetchComplete;
+  useEffect(function () {
+    // The real entity loading happens in the tooltip
+    // Since that is deferred the link is considered rendered as soon
+    // the component mounts (link text displayed)
+    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+  }, [onEntityFetchComplete]);
   if (!target) return null;
 
-  function handleClick(_x2) {
-    return _handleClick2.apply(this, arguments);
-  }
-
-  function _handleClick2() {
-    _handleClick2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(event) {
-      return runtime_1.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              event.preventDefault();
-              event.stopPropagation();
-
-              if (editor) {
-                _context2.next = 4;
-                break;
-              }
-
-              return _context2.abrupt("return");
-
-            case 4:
-              addOrEditLink(editor, sdk);
-
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-    return _handleClick2.apply(this, arguments);
+  function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!editor) return;
+    addOrEditLink(editor, sdk);
   }
 
   return /*#__PURE__*/createElement(Tooltip, {
@@ -3501,7 +3534,7 @@ function EntityHyperlink(props) {
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/createElement(TextLink, {
-    as: "button",
+    as: "a",
     onClick: handleClick,
     isDisabled: isReadOnly,
     className: styles$c.hyperlink,
@@ -3516,21 +3549,21 @@ function ToolbarHyperlinkButton(props) {
   var sdk = useSdkContext();
 
   function handleClick() {
-    return _handleClick3.apply(this, arguments);
+    return _handleClick.apply(this, arguments);
   }
 
-  function _handleClick3() {
-    _handleClick3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
-      return runtime_1.wrap(function _callee3$(_context3) {
+  function _handleClick() {
+    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      return runtime_1.wrap(function _callee$(_context) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context.prev = _context.next) {
             case 0:
               if (editor) {
-                _context3.next = 2;
+                _context.next = 2;
                 break;
               }
 
-              return _context3.abrupt("return");
+              return _context.abrupt("return");
 
             case 2:
               if (isActive) {
@@ -3541,12 +3574,12 @@ function ToolbarHyperlinkButton(props) {
 
             case 3:
             case "end":
-              return _context3.stop();
+              return _context.stop();
           }
         }
-      }, _callee3);
+      }, _callee);
     }));
-    return _handleClick3.apply(this, arguments);
+    return _handleClick.apply(this, arguments);
   }
 
   if (!editor) return null;
@@ -3612,7 +3645,7 @@ var getNodeOfType = function getNodeOfType(type) {
   };
 };
 
-var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
+var createHyperlinkPlugin = function createHyperlinkPlugin(sdk, tracking) {
   var common = {
     isElement: true,
     isInline: true
@@ -3643,7 +3676,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
     _extends({}, common, {
       key: INLINES.ENTRY_HYPERLINK,
       type: INLINES.ENTRY_HYPERLINK,
-      component: EntityHyperlink,
+      component: withLinkTracking(tracking, EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -3657,7 +3690,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
     _extends({}, common, {
       key: INLINES.ASSET_HYPERLINK,
       type: INLINES.ASSET_HYPERLINK,
-      component: EntityHyperlink,
+      component: withLinkTracking(tracking, EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -3679,7 +3712,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
 };
 
 var _templateObject$4, _templateObject2$3, _templateObject3$3, _styles;
-var baseStyle = /*#__PURE__*/css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0 0 1.25rem 1.25rem;\n  div:first-child {\n    margin: 0;\n    line-height: ", ";\n  }\n"])), tokens.lineHeightDefault);
+var baseStyle = /*#__PURE__*/css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0 0 1.25rem 1.25rem;\n\n  div:first-child {\n    margin: 0;\n    line-height: ", ";\n  }\n"])), tokens.lineHeightDefault);
 var styles$d = (_styles = {}, _styles[BLOCKS.UL_LIST] = /*#__PURE__*/css(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    list-style-type: disc;\n    ul {\n      list-style-type: circle;\n      ul {\n        list-style-type: square;\n      }\n    }\n  "]))), _styles[BLOCKS.OL_LIST] = /*#__PURE__*/css(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    list-style-type: decimal;\n    ol {\n      list-style-type: upper-alpha;\n      ol {\n        list-style-type: lower-roman;\n        ol {\n          list-style-type: lower-alpha;\n        }\n      }\n    }\n  "]))), _styles);
 
 function createList(Tag, block) {
@@ -3694,7 +3727,7 @@ var ListUL = /*#__PURE__*/createList('ul', BLOCKS.UL_LIST);
 var ListOL = /*#__PURE__*/createList('ol', BLOCKS.OL_LIST);
 
 var _templateObject$5;
-var style = /*#__PURE__*/css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  list-style: inherit;\n  ol,\n  ul {\n    margin: 0 0 0 ", ";\n  }\n"])), tokens.spacingL);
+var style = /*#__PURE__*/css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  list-style: inherit;\n  margin-top: ", ";\n\n  ol,\n  ul {\n    margin: 0 0 0 ", ";\n  }\n"])), tokens.spacingXs, tokens.spacingL);
 function ListItem(props) {
   return /*#__PURE__*/createElement("li", Object.assign({}, props.attributes, {
     className: style
@@ -3762,66 +3795,285 @@ var insertParagraphAsChild = function insertParagraphAsChild(editor, _ref5) {
 };
 
 /**
- * A copy of Plate's list plugin with a few adjustments
- * to support pasting any element
+ * Build a new list item node while preserving marks
  */
-var getListInsertFragment = function getListInsertFragment(editor) {
-  var insertFragment = editor.insertFragment;
-  var li = getPlugin(editor, ELEMENT_LI);
-  var ul = getPlugin(editor, ELEMENT_UL);
-  var ol = getPlugin(editor, ELEMENT_OL);
 
-  var isListRoot = function isListRoot(node) {
-    return [ul.type, ol.type].includes(node.type);
+var emptyListItemNode = function emptyListItemNode(editor, withChildren) {
+  if (withChildren === void 0) {
+    withChildren = false;
+  }
+
+  var children = [];
+
+  if (withChildren) {
+    var marks = Editor.marks(editor) || {};
+    children = [{
+      type: BLOCKS.PARAGRAPH,
+      data: {},
+      children: [_extends({
+        text: ''
+      }, marks)]
+    }];
+  }
+
+  return {
+    type: BLOCKS.LIST_ITEM,
+    data: {},
+    children: children
   };
+};
+/**
+ * Insert list item if selection is in li>p.
+ */
 
-  var getFirstAncestorOfType = function getFirstAncestorOfType(root, entry, _ref) {
-    var type = _ref.type;
-    var ancestor = Path.parent(entry[1]);
 
-    while (Node.get(root, ancestor).type !== type) {
-      ancestor = Path.parent(ancestor);
+var insertListItem = function insertListItem(editor) {
+  if (!editor.selection) {
+    return false;
+  } // Naming it paragraph for simplicity but can be a heading as well
+
+
+  var paragraph = getAbove(editor, {
+    match: {
+      type: TEXT_CONTAINERS
     }
+  });
 
-    return [Node.get(root, ancestor), ancestor];
-  };
+  if (!paragraph) {
+    return false;
+  }
+
+  var paragraphPath = paragraph[1];
+  var listItem = getParent(editor, paragraphPath);
+
+  if (!listItem) {
+    return false;
+  }
+
+  var listItemNode = listItem[0],
+      listItemPath = listItem[1];
+
+  if (listItemNode.type !== BLOCKS.LIST_ITEM) {
+    return false;
+  } // We are in a li>p (or heading)
+
+
+  Editor.withoutNormalizing(editor, function () {
+    if (!editor.selection) {
+      return;
+    } // Check the cursor position in the current paragraph
+
+
+    var isAtStart = isSelectionAtBlockStart(editor);
+    var isAtEnd = isSelectionAtBlockEnd(editor);
+    var isAtStartOfListItem = isAtStart && isFirstChild(paragraphPath);
+    var shouldSplit = !isAtStart && !isAtEnd; // Split the current paragraph content if necessary
+
+    if (shouldSplit) {
+      Transforms.splitNodes(editor);
+    } // Insert the new li
+
+
+    var newListItemPath = isAtStartOfListItem ? listItemPath : Path.next(listItemPath);
+    insertNodes(editor, // Add an empty paragraph to the new li if We will not move some
+    // paragraphs over there.
+    emptyListItemNode(editor, !shouldSplit), {
+      at: newListItemPath
+    }); // Move children *after* selection to the new li
+
+    var fromPath = isAtStart ? paragraphPath : Path.next(paragraphPath);
+    var fromStartIndex = fromPath[fromPath.length - 1] || 0; // On split we don't add paragraph to the new li so we move
+    // content to the very beginning. Otherwise, account for the empty
+    // paragraph at the beginning by moving the content after
+
+    var toPath = newListItemPath.concat([shouldSplit ? 0 : 1]);
+
+    if (!isAtStartOfListItem) {
+      moveChildren(editor, {
+        at: listItemPath,
+        to: toPath,
+        fromStartIndex: fromStartIndex
+      });
+    } // Move cursor to the start of the new li
+
+
+    Transforms.select(editor, newListItemPath);
+    Transforms.collapse(editor, {
+      edge: 'start'
+    });
+  }); // Returning True skips processing other editor.insertBreak handlers
+
+  return true;
+};
+
+/**
+ * Credit: Copied & modified version from Plate's list plugin to support
+ * list items with multiple children.
+ *
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+
+var listBreak = function listBreak(editor) {
+  if (!editor.selection) return false;
+  var res = getListItemEntry(editor, {});
+  var moved; // If selection is in a li
+
+  if (res) {
+    var list = res.list,
+        listItem = res.listItem;
+    var childNode = listItem[0].children[0]; // If selected li is empty, move it up.
+
+    if (isBlockAboveEmpty(editor) && listItem[0].children.length === 1 && TEXT_CONTAINERS.includes(childNode.type)) {
+      moved = moveListItemUp(editor, {
+        list: list,
+        listItem: listItem
+      });
+      if (moved) return true;
+    }
+  }
+
+  var didReset = onKeyDownResetNode(editor, mockPlugin({
+    options: {
+      rules: [{
+        types: [getPluginType(editor, ELEMENT_LI)],
+        defaultType: getPluginType(editor, ELEMENT_DEFAULT),
+        predicate: function predicate() {
+          return !moved && isBlockAboveEmpty(editor);
+        },
+        onReset: function onReset(_editor) {
+          return unwrapList(_editor);
+        }
+      }]
+    }
+  }))(SIMULATE_BACKSPACE);
+
+  if (didReset) {
+    return true;
+  }
   /**
-   * Removes the "empty" leading lis. Empty in this context means lis only with other lis as children.
-   *
-   * @returns If argument is not a list root, returns it, otherwise returns ul[] or li[].
+   * If selection is in li > p, insert li.
    */
 
 
-  var trimList = function trimList(listRoot) {
-    if (!isListRoot(listRoot)) {
-      return [listRoot];
-    }
+  if (!moved) {
+    var inserted = insertListItem(editor);
+    if (inserted) return true;
+  }
+
+  return false;
+};
 
-    var textEntries = Array.from(Node.texts(listRoot));
-    var commonAncestorEntry = textEntries.reduce(function (commonAncestor, textEntry) {
-      return Path.isAncestor(commonAncestor[1], textEntry[1]) ? commonAncestor : Node.common(listRoot, textEntry[1], commonAncestor[1]);
-    }, // any list item would do, we grab the first one
-    getFirstAncestorOfType(listRoot, textEntries[0], li));
-    return isListRoot(commonAncestorEntry[0]) ? commonAncestorEntry[0].children : [commonAncestorEntry[0]];
+var insertListBreak = function insertListBreak(editor) {
+  var insertBreak = editor.insertBreak;
+  return function () {
+    if (listBreak(editor)) return;
+    insertBreak();
   };
+};
+
+/**
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+
+var getFirstAncestorOfType = function getFirstAncestorOfType(root, entry) {
+  var ancestor = Path.parent(entry[1]);
+
+  while (Node.get(root, ancestor).type !== BLOCKS.LIST_ITEM) {
+    ancestor = Path.parent(ancestor);
+  }
+
+  return [Node.get(root, ancestor), ancestor];
+};
+
+var isListRoot = function isListRoot(node) {
+  return [BLOCKS.UL_LIST, BLOCKS.OL_LIST].includes(node.type);
+};
+/**
+ * Removes the "empty" leading lis. Empty in this context means lis only with other lis as children.
+ *
+ * @returns If argument is not a list root, returns it, otherwise returns ul[] or li[].
+ */
+
+
+var trimList = function trimList(listRoot) {
+  if (!isListRoot(listRoot)) {
+    return [listRoot];
+  }
+
+  var textEntries = Array.from(Node.texts(listRoot));
+  var commonAncestorEntry = textEntries.reduce(function (commonAncestor, textEntry) {
+    return Path.isAncestor(commonAncestor[1], textEntry[1]) ? commonAncestor : Node.common(listRoot, textEntry[1], commonAncestor[1]);
+  }, // any list item would do, we grab the first one
+  getFirstAncestorOfType(listRoot, textEntries[0]));
+  return isListRoot(commonAncestorEntry[0]) ? commonAncestorEntry[0].children : [commonAncestorEntry[0]];
+};
+/**
+ * Removes leading li when pasting a single li with a single child.
+ */
+
+
+var trimLiWrapper = function trimLiWrapper(nodes) {
+  if (nodes.length !== 1) {
+    return nodes;
+  }
+
+  var node = nodes[0];
+
+  if (node.type !== BLOCKS.LIST_ITEM || node.children.length !== 1) {
+    return nodes;
+  }
 
+  return node.children;
+};
+
+var unwrapTextContainerAtStart = function unwrapTextContainerAtStart(nodes) {
+  var node = nodes[0];
+
+  if (TEXT_CONTAINERS.includes(node.type)) {
+    return [].concat(node.children, nodes.slice(1));
+  }
+
+  return nodes;
+};
+
+var insertListFragment = function insertListFragment(editor) {
+  var insertFragment = editor.insertFragment;
   return function (fragment) {
+    if (!editor.selection) {
+      return;
+    }
+
     var liEntry = findNode(editor, {
       match: {
-        type: li.type
+        type: BLOCKS.LIST_ITEM
       },
       mode: 'lowest'
     });
 
     if (liEntry) {
-      var liPath = liEntry[1]; // FIXME: this is a temporarily workaround and needs a follow-up to properly
-      // non-text elements
-
-      var nodes = fragment.flatMap(function (node) {
+      var nodes = unwrapTextContainerAtStart(trimLiWrapper(fragment.flatMap(function (node) {
         return trimList(node);
+      })));
+      var firstBlockIndex = nodes.findIndex(function (node) {
+        return Editor.isBlock(editor, node);
+      });
+
+      if (firstBlockIndex < 0) {
+        firstBlockIndex = nodes.length;
+      }
+
+      var inlines = nodes.slice(0, firstBlockIndex);
+      var blocks = nodes.slice(firstBlockIndex); // Two calls to insertNodes are required here. Otherwise, all blocks
+      // after a text or inline element occurrence will be unwrapped for
+      // some reason.
+
+      Transforms.insertNodes(editor, inlines, {
+        at: editor.selection,
+        select: true
       });
-      return Transforms.insertNodes(editor, nodes, {
-        at: editor.selection || Path.next(liPath),
+      return Transforms.insertNodes(editor, blocks, {
+        at: editor.selection,
         select: true
       });
     }
@@ -3833,18 +4085,37 @@ var getListInsertFragment = function getListInsertFragment(editor) {
   };
 };
 
-var options = {
-  validLiChildrenTypes: LIST_ITEM_BLOCKS
-};
-var withList = function withList(editor, plugin) {
-  var insertFragment = editor.insertFragment;
-  withList$1(editor, _extends({}, plugin, {
-    options: options
-  })); // Reverts any overrides to insertFragment
+/**
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+var validLiChildrenTypes = LIST_ITEM_BLOCKS;
+var withList = function withList(editor) {
+  var deleteBackward = editor.deleteBackward,
+      deleteForward = editor.deleteForward,
+      deleteFragment = editor.deleteFragment;
+
+  editor.deleteBackward = function (unit) {
+    if (deleteBackwardList(editor, unit)) return;
+    deleteBackward(unit);
+  };
 
-  editor.insertFragment = insertFragment; // Use our custom getListInsertFragment
+  editor.deleteForward = function (unit) {
+    if (deleteForwardList(editor)) return;
+    deleteForward(unit);
+  };
+
+  editor.deleteFragment = function () {
+    if (deleteFragmentList(editor)) return;
+    deleteFragment();
+  };
 
-  editor.insertFragment = getListInsertFragment(editor);
+  editor.insertBreak = insertListBreak(editor);
+  editor.insertFragment = insertListFragment(editor); // TODO: replace with Normalizer rules
+
+  editor.normalizeNode = normalizeList(editor, {
+    validLiChildrenTypes: validLiChildrenTypes
+  });
   return editor;
 };
 
@@ -3902,7 +4173,7 @@ function ToolbarListButton(props) {
       toggleList(editor, {
         type: type
       });
-      ReactEditor.focus(editor);
+      focus(editor);
     };
   }
 
@@ -3930,7 +4201,7 @@ function ToolbarBoldButton(props) {
     toggleMark(editor, {
       key: MARKS.BOLD
     });
-    ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -3989,7 +4260,7 @@ function ToolbarCodeButton(props) {
     toggleMark(editor, {
       key: MARKS.CODE
     });
-    ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -4039,7 +4310,7 @@ function ToolbarItalicButton(props) {
     toggleMark(editor, {
       key: MARKS.ITALIC
     });
-    ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -4093,7 +4364,7 @@ function ToolbarUnderlineButton(props) {
     toggleMark(editor, {
       key: MARKS.UNDERLINE
     });
-    ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -4514,6 +4785,38 @@ function Quote(props) {
   }), props.children);
 }
 
+function toggleQuote(editor) {
+  if (!editor.selection) return;
+  var isActive = isBlockSelected(editor, BLOCKS.QUOTE);
+  Editor.withoutNormalizing(editor, function () {
+    Transforms.unwrapNodes(editor, {
+      match: function match(node) {
+        return Element.isElement(node) && node.type === BLOCKS.QUOTE;
+      },
+      split: true
+    });
+
+    if (!isActive) {
+      var quote = {
+        type: BLOCKS.QUOTE,
+        data: {},
+        children: []
+      };
+      Transforms.wrapNodes(editor, quote);
+    }
+  });
+}
+var onKeyDownToggleQuote = function onKeyDownToggleQuote(editor, plugin) {
+  return function (event) {
+    var hotkey = plugin.options.hotkey;
+
+    if (hotkey && isHotkey(hotkey, event)) {
+      event.preventDefault();
+      toggleQuote(editor);
+    }
+  };
+};
+
 function createQuotePlugin() {
   var _transform;
 
@@ -4526,7 +4829,7 @@ function createQuotePlugin() {
       hotkey: 'mod+shift+1'
     },
     handlers: {
-      onKeyDown: onKeyDownToggleElement
+      onKeyDown: onKeyDownToggleQuote
     },
     deserializeHtml: {
       rules: [{
@@ -4540,38 +4843,13 @@ function createQuotePlugin() {
   };
 }
 
-function toggleQuote(editor) {
-  if (!editor.selection) return;
-  var isActive = isBlockSelected(editor, BLOCKS.QUOTE);
-  Editor.withoutNormalizing(editor, function () {
-    Transforms.unwrapNodes(editor, {
-      match: function match(node) {
-        return Element.isElement(node) && node.type === BLOCKS.QUOTE;
-      },
-      split: true
-    });
-    Transforms.setNodes(editor, {
-      type: isActive ? BLOCKS.PARAGRAPH : BLOCKS.QUOTE
-    });
-
-    if (!isActive) {
-      var quote = {
-        type: BLOCKS.QUOTE,
-        data: {},
-        children: []
-      };
-      Transforms.wrapNodes(editor, quote);
-    }
-  });
-}
-
 function ToolbarQuoteButton(props) {
   var editor = useContentfulEditor();
 
   function handleOnClick() {
     if (!editor) return;
     toggleQuote(editor);
-    ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -4927,11 +5205,7 @@ var TableActions = function TableActions() {
 
   var close = React__default.useCallback(function () {
     setOpen(false);
-    if (!editor) return; // Makes sure we keep the editor in focus when clicking on/out
-    // the dropdown menu
-
-    ReactEditor.focus(editor);
-  }, [editor]);
+  }, []);
   React__default.useEffect(function () {
     setHeaderEnabled(Boolean(editor && isTableHeaderEnabled(editor)));
   }, [editor]);
@@ -5200,7 +5474,7 @@ function ToolbarTableButton(props) {
             case 2:
               onViewportAction('insertTable');
               insertTableAndFocusFirstCell(editor);
-              ReactEditor.focus(editor);
+              focus(editor);
 
             case 5:
             case "end":
@@ -5227,22 +5501,52 @@ function createTextPlugin() {
   return {
     key: 'TextPlugin',
     withOverrides: function withOverrides(editor) {
-      var deleteForward = editor.deleteForward; // When pressing delete instead of backspace
+      // Reverts the change made upstream that caused the cursor
+      // to be trapped inside inline elements.
+      //
+      // Reverts https://github.com/ianstormtaylor/slate/pull/4578/
+      // Related https://github.com/ianstormtaylor/slate/issues/4704
+      var insertText = editor.insertText;
+
+      editor.insertText = function (text) {
+        var selection = editor.selection; // If the cursor is at the end of an inline, move it outside
+        // before inserting
+
+        if (selection && Range.isCollapsed(selection)) {
+          var _Editor$above;
+
+          var inlinePath = (_Editor$above = Editor.above(editor, {
+            match: function match(n) {
+              return Editor.isInline(editor, n);
+            },
+            mode: 'highest'
+          })) == null ? void 0 : _Editor$above[1];
+
+          if (inlinePath && Editor.isEnd(editor, selection.anchor, inlinePath)) {
+            var point = Editor.after(editor, inlinePath);
+            Transforms.setSelection(editor, {
+              anchor: point,
+              focus: point
+            });
+          }
+        }
 
-      editor.deleteForward = function (unit) {
-        var _editor$selection;
+        return insertText(text);
+      }; // When pressing delete instead of backspace
 
-        var _Editor$nodes = Editor.nodes(editor, {
-          at: (_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.path,
-          match: function match(node) {
-            return TEXT_CONTAINERS.includes(node.type);
+
+      var deleteForward = editor.deleteForward;
+
+      editor.deleteForward = function (unit) {
+        var entry = getAbove(editor, {
+          match: {
+            type: TEXT_CONTAINERS
           }
-        }),
-            nodes = _Editor$nodes[0];
+        });
 
-        if (nodes) {
-          var paragraphOrHeading = nodes[0],
-              path = nodes[1];
+        if (entry) {
+          var paragraphOrHeading = entry[0],
+              path = entry[1];
           var isTextEmpty = isAncestorEmpty(editor, paragraphOrHeading); // We ignore paragraphs/headings that are children of ul, ol, blockquote, tables, etc
 
           var isRootLevel = path.length === 1;
@@ -5299,8 +5603,9 @@ var transformVoid = function transformVoid(editor, _ref) {
 var createVoidsPlugin = function createVoidsPlugin() {
   return {
     key: 'VoidsPlugin',
-    exitBreak: [// Can insert before first void block
-    {
+    exitBreak: [{
+      // Inserts a new paragraph *before* a void element if it's the very first
+      // node on the editor
       hotkey: 'enter',
       before: true,
       query: {
@@ -5310,14 +5615,17 @@ var createVoidsPlugin = function createVoidsPlugin() {
           return isRootLevel(path) && isFirstChild(path) && !!node.isVoid;
         }
       }
-    }, // Can insert after a void block
-    {
+    }, {
+      // Inserts a new paragraph on enter when a void element is focused
       hotkey: 'enter',
+      // exploit the internal use of Array.slice(0, level + 1) by the exitBreak plugin
+      // to stay in the parent element
+      level: -2,
       query: {
         filter: function filter(_ref2) {
           var node = _ref2[0],
               path = _ref2[1];
-          return !isFirstChild(path) && !!node.isVoid;
+          return !(isRootLevel(path) && isFirstChild(path)) && !!node.isVoid;
         }
       }
     }],
@@ -5346,8 +5654,8 @@ var getPlugins = function getPlugins(sdk, tracking) {
   return [// AST must come after the HTML deserializer
   createDeserializeHtmlPlugin(), createDeserializeAstPlugin(), createDeserializeDocxPlugin(), // Global shortcuts
   createDragAndDropPlugin(), // Block Elements
-  createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
-  createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
+  createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk, tracking), createEmbeddedAssetBlockPlugin(sdk, tracking), // Inline elements
+  createHyperlinkPlugin(sdk, tracking), createEmbeddedEntityInlinePlugin(sdk, tracking), // Marks
   createMarksPlugin(), // Other
   createTrailingParagraphPlugin(), createTextPlugin(), createVoidsPlugin(), createSelectOnBackspacePlugin(), // Pasting content from other sources
   createPasteHTMLPlugin(), // These plugins drive their configurations from the list of plugins
@@ -5618,13 +5926,9 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
 var _excluded = ["sdk", "isInitiallyDisabled", "onAction"];
 var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
   var tracking = useTrackingContext();
-  var docFromAdapter = toSlatejsDocument({
-    document: props.value || EMPTY_DOCUMENT,
-    schema: schema
-  });
-  var doc = sanitizeIncomingSlateDoc(docFromAdapter);
+  var editor = useContentfulEditor();
 
-  var _useState = useState(doc),
+  var _useState = useState([]),
       value = _useState[0],
       setValue = _useState[1];
 
@@ -5634,12 +5938,33 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
   var plugins = React__default.useMemo(function () {
     return getPlugins(props.sdk, tracking);
   }, [props.sdk, tracking]);
+  React__default.useEffect(function () {
+    if (!editor) {
+      return;
+    }
+
+    var docFromAdapter = toSlatejsDocument({
+      document: props.value || EMPTY_DOCUMENT,
+      schema: schema
+    });
+    var doc = sanitizeIncomingSlateDoc(docFromAdapter); // Slate throws an error if the value on the initial render is invalid
+    // so we directly set the value on the editor in order
+    // to be able to trigger normalization on the initial value before rendering
+    // TODO: use https://plate.udecode.io/docs/Plate#normalizeinitialvalue when working
+
+    editor.children = doc;
+    Editor.normalize(editor, {
+      force: true
+    }); // We set the value so that the rendering can take over from here
+
+    setValue(editor.children);
+  }, [props.value, editor]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: styles$j.root,
     "data-test-id": "rich-text-editor"
   }, /*#__PURE__*/React__default.createElement(Plate, {
     id: getContentfulEditorId(props.sdk),
-    initialValue: value,
+    value: value,
     plugins: plugins,
     disableCorePlugins: disableCorePlugins,
     editableProps: {