@contentful/field-editor-rich-text 2.0.0-next.21 → 2.0.0-next.24

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

@@ -2,7 +2,7 @@ import React__default, { createContext, useContext, useMemo, createElement, useE
 import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
 import { entityHelpers, shortenStorageUnit, isValidImage, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import { BLOCKS, INLINES, TABLE_BLOCKS, TEXT_CONTAINERS, HEADINGS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
-import { usePlateEditorState, usePlateEditorRef, getNodes, toggleNodeType, getText, getAbove, setNodes, isAncestorEmpty, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, getPluginType, ELEMENT_DEFAULT, findNode, unwrapNodes, deleteFragment, isCollapsed, isRangeAcrossBlocks, wrapNodes, isMarkActive, toggleMark, someHtmlElement, match, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, getLastChildPath, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateActions, Plate } from '@udecode/plate-core';
+import { usePlateEditorRef, usePlateEditorState, getNodes, toggleNodeType, getText, getAbove, setNodes, isAncestorEmpty, match, getLastChildPath, wrapNodes, getPluginType, unwrapNodes, isCollapsed, isRangeAcrossBlocks, ELEMENT_DEFAULT, findNode, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, deleteFragment, isMarkActive, toggleMark, someHtmlElement, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateSelectors, getPlateActions, Plate } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash-es/noop';
@@ -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 { getListItemEntry, moveListItemUp, ELEMENT_LI, unwrapList as unwrapList$1, removeFirstListItem, removeListItem, isListNested, deleteForwardList, deleteFragmentList, normalizeList, createListPlugin as createListPlugin$1, ELEMENT_UL, ELEMENT_OL, ELEMENT_LIC } from '@udecode/plate-list';
+import { getListTypes, ELEMENT_LIC, getListItemEntry, isListNested, moveListItemUp, ELEMENT_LI, unwrapList as unwrapList$1, removeFirstListItem, removeListItem, deleteForwardList, deleteFragmentList, normalizeList, createListPlugin as createListPlugin$1, ELEMENT_UL, ELEMENT_OL } from '@udecode/plate-list';
+import castArray from 'lodash-es/castArray';
 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';
@@ -419,10 +420,12 @@ function isBlockSelected(editor, type) {
 function isRootLevel(path) {
   return path.length === 1;
 }
-function getNodeEntryFromSelection(editor, nodeTypeOrTypes) {
-  if (!editor.selection) return [];
+function getNodeEntryFromSelection(editor, nodeTypeOrTypes, path) {
+  var _path, _editor$selection;
+
+  path = (_path = path) != null ? _path : (_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.path;
+  if (!path) return [];
   var nodeTypes = Array.isArray(nodeTypeOrTypes) ? nodeTypeOrTypes : [nodeTypeOrTypes];
-  var path = editor.selection.focus.path;
 
   for (var i = 0; i < path.length; i++) {
     var nodeEntry = Editor.node(editor, path.slice(0, i + 1));
@@ -581,18 +584,18 @@ function getAncestorPathFromSelection(editor) {
   });
 }
 var isAtEndOfTextSelection = function isAtEndOfTextSelection(editor) {
-  var _editor$selection, _editor$selection2;
+  var _editor$selection2, _editor$selection3;
 
-  return ((_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.offset) === getText(editor, (_editor$selection2 = editor.selection) == null ? void 0 : _editor$selection2.focus.path).length;
+  return ((_editor$selection2 = editor.selection) == null ? void 0 : _editor$selection2.focus.offset) === getText(editor, (_editor$selection3 = editor.selection) == null ? void 0 : _editor$selection3.focus.path).length;
 };
 function currentSelectionStartsTableCell(editor) {
-  var _editor$selection3;
+  var _editor$selection4;
 
   var _getNodeEntryFromSele2 = getNodeEntryFromSelection(editor, [BLOCKS.TABLE_CELL, BLOCKS.TABLE_HEADER_CELL]),
       tableCellNode = _getNodeEntryFromSele2[0],
       path = _getNodeEntryFromSele2[1];
 
-  return !!tableCellNode && (!getText(editor, path) || ((_editor$selection3 = editor.selection) == null ? void 0 : _editor$selection3.focus.offset) === 0);
+  return !!tableCellNode && (!getText(editor, path) || ((_editor$selection4 = editor.selection) == null ? void 0 : _editor$selection4.focus.offset) === 0);
 }
 /**
  * This traversal strategy is unfortunately necessary because Slate doesn't
@@ -944,14 +947,22 @@ function FetchingWrappedEntryCard(props) {
   var onEntityFetchComplete = props.onEntityFetchComplete;
   useEffect(function () {
     if (!entry || entry === 'failed') return;
+    var subscribed = true;
     entityHelpers.getEntryImage({
       entry: entry,
       contentType: contentType,
       localeCode: props.locale,
       defaultLocaleCode: defaultLocaleCode
-    }, getOrLoadAsset).then(setFile)["catch"](function () {
-      return setFile(null);
+    }, getOrLoadAsset)["catch"](function () {
+      return null;
+    }).then(function (file) {
+      if (subscribed) {
+        setFile(file);
+      }
     });
+    return function () {
+      subscribed = false;
+    };
   }, [entry, contentType, props.locale, defaultLocaleCode, props.sdk, file, getOrLoadAsset]);
   useEffect(function () {
     getOrLoadEntry(props.entryId);
@@ -1046,7 +1057,14 @@ function FetchingWrappedEntryCard(props) {
 
 var styles$3 = {
   root: /*#__PURE__*/css({
-    marginBottom: '1.25rem !important'
+    marginBottom: '1.25rem !important',
+    display: 'block'
+  }),
+  container: /*#__PURE__*/css({
+    // The next 2 properties ensure Entity card won't be aligned above
+    // a list item marker (i.e. bullet)
+    display: 'inline-block',
+    verticalAlign: 'text-top'
   })
 };
 function LinkedEntityBlock(props) {
@@ -1087,7 +1105,8 @@ function LinkedEntityBlock(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
     contentEditable: HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
-    draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined
+    draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined,
+    className: styles$3.container
   }, entityType === 'Entry' && /*#__PURE__*/React__default.createElement(FetchingWrappedEntryCard, {
     sdk: sdk,
     entryId: entityId,
@@ -3190,29 +3209,31 @@ function HyperlinkModal(props) {
     testId: "confirm-cta"
   }, props.linkType ? 'Update' : 'Insert'))));
 }
-function addOrEditLink(_x, _x2, _x3) {
+function addOrEditLink(_x, _x2, _x3, _x4) {
   return _addOrEditLink.apply(this, arguments);
 }
 
 function _addOrEditLink() {
-  _addOrEditLink = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(editor, sdk, logAction) {
+  _addOrEditLink = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(editor, sdk, logAction, targetPath) {
     var _target$sys$linkType;
 
-    var linkType, linkText, linkTarget, linkEntity, _getNodeEntryFromSele, node, path, selectionBeforeBlur, currentLinkText, isEditing, data, text, url, type, target;
+    var selectionBeforeBlur, linkType, linkText, linkTarget, linkEntity, _getNodeEntryFromSele, node, path, selectionAfterFocus, currentLinkText, isEditing, data, text, url, type, target;
 
     return runtime_1.wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
-            if (editor.selection) {
-              _context3.next = 2;
+            selectionBeforeBlur = editor.selection ? _extends({}, editor.selection) : undefined;
+
+            if (!(!targetPath && !selectionBeforeBlur)) {
+              _context3.next = 3;
               break;
             }
 
             return _context3.abrupt("return");
 
-          case 2:
-            _getNodeEntryFromSele = getNodeEntryFromSelection(editor, LINK_TYPES), node = _getNodeEntryFromSele[0], path = _getNodeEntryFromSele[1];
+          case 3:
+            _getNodeEntryFromSele = getNodeEntryFromSelection(editor, LINK_TYPES, targetPath), node = _getNodeEntryFromSele[0], path = _getNodeEntryFromSele[1];
 
             if (node && path) {
               linkType = node.type;
@@ -3221,11 +3242,11 @@ function _addOrEditLink() {
               linkEntity = node.data.target;
             }
 
-            selectionBeforeBlur = _extends({}, editor.selection);
-            currentLinkText = linkText || Editor.string(editor, editor.selection);
+            selectionAfterFocus = targetPath != null ? targetPath : selectionBeforeBlur;
+            currentLinkText = linkText || (editor.selection ? Editor.string(editor, editor.selection) : '');
             isEditing = Boolean(node && path);
             logAction(isEditing ? 'openEditHyperlinkDialog' : 'openCreateHyperlinkDialog');
-            _context3.next = 10;
+            _context3.next = 11;
             return ModalDialogLauncher.openDialog({
               title: isEditing ? 'Edit hyperlink' : 'Insert hyperlink',
               width: 'large',
@@ -3244,20 +3265,21 @@ function _addOrEditLink() {
               });
             });
 
-          case 10:
+          case 11:
             data = _context3.sent;
+            Transforms.select(editor, selectionAfterFocus);
 
             if (data) {
-              _context3.next = 14;
+              _context3.next = 17;
               break;
             }
 
+            focus(editor);
             logAction(isEditing ? 'cancelEditHyperlinkDialog' : 'cancelCreateHyperlinkDialog');
             return _context3.abrupt("return");
 
-          case 14:
+          case 17:
             text = data.linkText, url = data.linkTarget, type = data.linkType, target = data.linkEntity;
-            Transforms.select(editor, selectionBeforeBlur);
             Editor.withoutNormalizing(editor, function () {
               insertLink(editor, {
                 text: text,
@@ -3273,7 +3295,7 @@ function _addOrEditLink() {
             });
             focus(editor);
 
-          case 19:
+          case 21:
           case "end":
             return _context3.stop();
         }
@@ -3527,7 +3549,11 @@ function EntityHyperlink(props) {
     event.preventDefault();
     event.stopPropagation();
     if (!editor) return;
-    addOrEditLink(editor, sdk, editor.tracking.onViewportAction);
+    var p = ReactEditor.toSlatePoint(editor, [event.target, 0], {
+      exactMatch: false,
+      suppressThrow: false
+    });
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction, p.path);
   }
 
   return /*#__PURE__*/createElement(Tooltip, {
@@ -3555,7 +3581,11 @@ function UrlHyperlink(props) {
     event.preventDefault();
     event.stopPropagation();
     if (!editor) return;
-    addOrEditLink(editor, sdk, editor.tracking.onViewportAction);
+    var p = ReactEditor.toSlatePoint(editor, [event.target, 0], {
+      exactMatch: false,
+      suppressThrow: false
+    });
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction, p.path);
   }
 
   return /*#__PURE__*/createElement(Tooltip, {
@@ -3716,245 +3746,586 @@ function ListItem(props) {
   }), props.children);
 }
 
-var isList = function isList(node) {
-  return [BLOCKS.OL_LIST, BLOCKS.UL_LIST].includes(node.type);
-};
-
-var hasListAsDirectParent = function hasListAsDirectParent(editor, _ref) {
-  var path = _ref[1];
-
-  var _ref2 = getParent(editor, path) || [],
-      parentNode = _ref2[0];
-
-  return isList(parentNode);
-};
-
-var getNearestListAncestor = function getNearestListAncestor(editor, path) {
-  return getAbove(editor, {
-    at: path,
-    mode: 'lowest',
-    match: isList
-  }) || [];
-};
 /**
- * Places orphaned list items in a list. If there's a list somewhere
- * in the node's ancestors, defaults to that list type, else places
- * the list item in an unordered list.
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
  */
+var moveListItemDown = function moveListItemDown(editor, _ref) {
+  var list = _ref.list,
+      listItem = _ref.listItem;
+  var listNode = list[0];
+  var listItemPath = listItem[1];
+  var previousListItemPath;
 
+  try {
+    previousListItemPath = Path.previous(listItemPath);
+  } catch (e) {
+    return;
+  } // Previous sibling is the new parent
 
-var normalizeOrphanedListItem = function normalizeOrphanedListItem(editor, _ref3) {
-  var path = _ref3[1];
-
-  var _getNearestListAncest = getNearestListAncestor(editor, path),
-      parentList = _getNearestListAncest[0];
-
-  var parentListType = parentList == null ? void 0 : parentList.type;
-  Transforms.wrapNodes(editor, {
-    type: parentListType || BLOCKS.UL_LIST,
-    children: [],
-    data: {}
-  }, {
-    at: path
-  });
-};
-var isNonEmptyListItem = function isNonEmptyListItem(editor, _ref4) {
-  var path = _ref4[1];
-  var listItemChildren = Array.from(Node.children(editor, path));
-  return listItemChildren.length !== 0;
-};
-var firstNodeIsNotList = function firstNodeIsNotList(_editor, _ref5) {
-  var node = _ref5[0];
-
-  if (node.children.length === 1) {
-    var firstNode = node.children[0];
-    return !Text.isText(firstNode) && !isList(firstNode);
-  }
-
-  return true;
-};
-var insertParagraphAsChild = function insertParagraphAsChild(editor, _ref6) {
-  var path = _ref6[1];
-  Transforms.insertNodes(editor, [{
-    type: BLOCKS.PARAGRAPH,
-    data: {},
-    children: [{
-      text: ''
-    }]
-  }], {
-    at: path.concat([0])
-  });
-};
-var replaceNodeWithListItems = function replaceNodeWithListItems(editor, entry) {
-  var node = entry[0],
-      path = entry[1];
-  Transforms.removeNodes(editor, {
-    at: path
-  });
-  Transforms.insertNodes(editor, node.children[0].children, {
-    at: path
-  });
-};
-var isListTypeActive = function isListTypeActive(editor, type) {
-  // Lists can be nested. Here, we take the list type at the lowest level
-  var listNode = getBlockAbove(editor, {
-    match: {
-      type: [BLOCKS.OL_LIST, BLOCKS.UL_LIST]
-    },
-    mode: 'lowest'
-  });
-  return (listNode == null ? void 0 : listNode[0].type) === type;
-};
 
-/**
- * Build a new list item node while preserving marks
- */
+  var previousSiblingItem = Editor.node(editor, previousListItemPath);
 
-var emptyListItemNode = function emptyListItemNode(editor, withChildren) {
-  if (withChildren === void 0) {
-    withChildren = false;
-  }
+  if (previousSiblingItem) {
+    var previousPath = previousSiblingItem[1];
+    var subList = Array.from(Node.children(editor, previousPath)).find(function (_ref2) {
+      var n = _ref2[0];
+      return match(n, {
+        type: getListTypes(editor)
+      });
+    });
+    var newPath = Path.next(getLastChildPath(subList != null ? subList : previousSiblingItem));
+    Editor.withoutNormalizing(editor, function () {
+      if (!subList) {
+        // Create new sub-list
+        wrapNodes(editor, {
+          type: listNode.type,
+          children: [],
+          data: {}
+        }, {
+          at: listItemPath
+        });
+      } // Move the current item to the sub-list
 
-  var children = [];
 
-  if (withChildren) {
-    var marks = Editor.marks(editor) || {};
-    children = [{
-      type: BLOCKS.PARAGRAPH,
-      data: {},
-      children: [_extends({
-        text: ''
-      }, marks)]
-    }];
+      Transforms.moveNodes(editor, {
+        at: listItemPath,
+        to: newPath
+      });
+    });
   }
-
-  return {
-    type: BLOCKS.LIST_ITEM,
-    data: {},
-    children: children
-  };
 };
+
 /**
- * Insert list item if selection is in li>p.
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
  */
+var moveListItems = function moveListItems(editor, _temp) {
+  var _editor$selection;
 
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$increase = _ref.increase,
+      increase = _ref$increase === void 0 ? true : _ref$increase,
+      _ref$at = _ref.at,
+      at = _ref$at === void 0 ? (_editor$selection = editor.selection) != null ? _editor$selection : undefined : _ref$at;
 
-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, {
+  var _nodes = getNodes(editor, {
+    at: at,
     match: {
-      type: TEXT_CONTAINERS
+      type: getPluginType(editor, ELEMENT_LIC)
     }
-  });
-
-  if (!paragraph) {
-    return false;
-  }
-
-  var paragraphPath = paragraph[1];
-  var listItem = getParent(editor, paragraphPath);
-
-  if (!listItem) {
-    return false;
-  }
+  }); // Get the selected lic
 
-  var listItemNode = listItem[0],
-      listItemPath = listItem[1];
 
-  if (listItemNode.type !== BLOCKS.LIST_ITEM) {
-    return false;
-  } // We are in a li>p (or heading)
+  var lics = Array.from(_nodes);
+  if (!lics.length) return;
+  var highestLicPaths = [];
+  var highestLicPathRefs = []; // Filter out the nested lic, we just need to move the highest ones
 
+  lics.forEach(function (lic) {
+    var licPath = lic[1];
+    var liPath = Path.parent(licPath);
+    var isAncestor = highestLicPaths.some(function (path) {
+      var highestLiPath = Path.parent(path);
+      return Path.isAncestor(highestLiPath, liPath);
+    });
 
+    if (!isAncestor) {
+      highestLicPaths.push(licPath);
+      highestLicPathRefs.push(Editor.pathRef(editor, licPath));
+    }
+  });
+  var licPathRefsToMove = increase ? highestLicPathRefs : highestLicPathRefs.reverse();
   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
+    licPathRefsToMove.forEach(function (licPathRef) {
+      var licPath = licPathRef.unref();
+      if (!licPath) return;
+      var liEntry = getListItemEntry(editor, {
+        at: licPath
       });
-    } // Move cursor to the start of the new li
 
+      if (!liEntry) {
+        return;
+      }
 
-    Transforms.select(editor, newListItemPath);
-    Transforms.collapse(editor, {
-      edge: 'start'
+      if (increase) {
+        moveListItemDown(editor, liEntry);
+      } else if (isListNested(editor, liEntry.list[1])) {
+        moveListItemUp(editor, liEntry);
+      }
     });
-  }); // 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.
- *
+ * Credit: Modified version of Plate's list plugin
  * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
  */
+var listTypes = [BLOCKS.UL_LIST, BLOCKS.OL_LIST];
+var unwrapList = function unwrapList(editor, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      at = _ref.at;
 
-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);
+  Editor.withoutNormalizing(editor, function () {
+    do {
+      unwrapNodes(editor, {
+        at: at,
+        match: {
+          type: BLOCKS.LIST_ITEM
         },
-        onReset: function onReset(_editor) {
-          return unwrapList$1(_editor);
-        }
+        split: true
+      });
+      unwrapNodes(editor, {
+        at: at,
+        match: {
+          type: listTypes
+        },
+        split: true
+      });
+    } while (getAbove(editor, {
+      match: {
+        type: listTypes,
+        at: at
+      }
+    }));
+  });
+};
+
+var listTypes$1 = [BLOCKS.UL_LIST, BLOCKS.OL_LIST];
+var toggleList = function toggleList(editor, _ref) {
+  var type = _ref.type;
+  return Editor.withoutNormalizing(editor, function () {
+    if (!editor.selection) {
+      return;
+    }
+
+    if (isCollapsed(editor.selection) || !isRangeAcrossBlocks(editor)) {
+      // selection is collapsed
+      var res = getListItemEntry(editor);
+
+      if (res) {
+        var list = res.list;
+
+        if (list[0].type !== type) {
+          setNodes(editor, {
+            type: type
+          }, {
+            at: editor.selection,
+            match: function match(n) {
+              return listTypes$1.includes(n.type);
+            },
+            mode: 'lowest'
+          });
+        } else {
+          unwrapList(editor);
+        }
+      } else {
+        var _list = {
+          type: type,
+          children: [],
+          data: {}
+        };
+        wrapNodes(editor, _list);
+        var nodes = [].concat(getNodes(editor, {
+          match: {
+            type: getPluginType(editor, ELEMENT_DEFAULT)
+          }
+        }));
+        var listItem = {
+          type: BLOCKS.LIST_ITEM,
+          children: [],
+          data: {}
+        };
+
+        for (var _iterator = _createForOfIteratorHelperLoose(nodes), _step; !(_step = _iterator()).done;) {
+          var _step$value = _step.value,
+              path = _step$value[1];
+          wrapNodes(editor, listItem, {
+            at: path
+          });
+        }
+      }
+    } else {
+      // selection is a range
+      var _Range$edges = Range.edges(editor.selection),
+          startPoint = _Range$edges[0],
+          endPoint = _Range$edges[1];
+
+      var commonEntry = Node.common(editor, startPoint.path, endPoint.path);
+
+      if (listTypes$1.includes(commonEntry[0].type) || commonEntry[0].type === BLOCKS.LIST_ITEM) {
+        if (commonEntry[0].type !== type) {
+          var startList = findNode(editor, {
+            at: Range.start(editor.selection),
+            match: {
+              type: listTypes$1
+            },
+            mode: 'lowest'
+          });
+          var endList = findNode(editor, {
+            at: Range.end(editor.selection),
+            match: {
+              type: listTypes$1
+            },
+            mode: 'lowest'
+          });
+
+          if (!startList || !endList) {
+            return;
+          }
+
+          var rangeLength = Math.min(startList[1].length, endList[1].length);
+          setNodes(editor, {
+            type: type
+          }, {
+            at: editor.selection,
+            match: function match(n, path) {
+              return listTypes$1.includes(n.type) && path.length >= rangeLength;
+            },
+            mode: 'all'
+          });
+        } else {
+          unwrapList(editor);
+        }
+      } else {
+        var rootPathLength = commonEntry[1].length;
+
+        var _nodes = Array.from(getNodes(editor, {
+          mode: 'all'
+        })).filter(function (_ref2) {
+          var path = _ref2[1];
+          return path.length === rootPathLength + 1;
+        }).reverse();
+
+        _nodes.forEach(function (n) {
+          if (listTypes$1.includes(n[0].type)) {
+            setNodes(editor, {
+              type: type
+            }, {
+              at: n[1]
+            });
+          } else {
+            setNodes(editor, {
+              type: getPluginType(editor, ELEMENT_LIC)
+            }, {
+              at: n[1]
+            });
+            var _listItem = {
+              type: BLOCKS.LIST_ITEM,
+              children: [],
+              data: {}
+            };
+            wrapNodes(editor, _listItem, {
+              at: n[1]
+            });
+            var _list2 = {
+              type: type,
+              children: [],
+              data: {}
+            };
+            wrapNodes(editor, _list2, {
+              at: n[1]
+            });
+          }
+        });
+      }
+    }
+  });
+};
+
+var onKeyDownList = function onKeyDownList(editor, _ref) {
+  var type = _ref.type,
+      hotkey = _ref.options.hotkey;
+  return function (e) {
+    if (e.key === 'Tab' && editor.selection) {
+      var listSelected = getAbove(editor, {
+        at: editor.selection,
+        match: {
+          type: type
+        }
+      });
+
+      if (listSelected) {
+        e.preventDefault();
+        moveListItems(editor, {
+          increase: !e.shiftKey
+        });
+        return;
+      }
+    }
+
+    if (!hotkey) return;
+    var hotkeys = castArray(hotkey);
+
+    for (var _iterator = _createForOfIteratorHelperLoose(hotkeys), _step; !(_step = _iterator()).done;) {
+      var _hotkey = _step.value;
+
+      if (isHotkey(_hotkey)(e)) {
+        toggleList(editor, {
+          type: type
+        });
+      }
+    }
+  };
+};
+
+var isList = function isList(node) {
+  return [BLOCKS.OL_LIST, BLOCKS.UL_LIST].includes(node.type);
+};
+
+var hasListAsDirectParent = function hasListAsDirectParent(editor, _ref) {
+  var path = _ref[1];
+
+  var _ref2 = getParent(editor, path) || [],
+      parentNode = _ref2[0];
+
+  return isList(parentNode);
+};
+
+var getNearestListAncestor = function getNearestListAncestor(editor, path) {
+  return getAbove(editor, {
+    at: path,
+    mode: 'lowest',
+    match: isList
+  }) || [];
+};
+/**
+ * Places orphaned list items in a list. If there's a list somewhere
+ * in the node's ancestors, defaults to that list type, else places
+ * the list item in an unordered list.
+ */
+
+
+var normalizeOrphanedListItem = function normalizeOrphanedListItem(editor, _ref3) {
+  var path = _ref3[1];
+
+  var _getNearestListAncest = getNearestListAncestor(editor, path),
+      parentList = _getNearestListAncest[0];
+
+  var parentListType = parentList == null ? void 0 : parentList.type;
+  Transforms.wrapNodes(editor, {
+    type: parentListType || BLOCKS.UL_LIST,
+    children: [],
+    data: {}
+  }, {
+    at: path
+  });
+};
+var isNonEmptyListItem = function isNonEmptyListItem(editor, _ref4) {
+  var path = _ref4[1];
+  var listItemChildren = Array.from(Node.children(editor, path));
+  return listItemChildren.length !== 0;
+};
+var firstNodeIsNotList = function firstNodeIsNotList(_editor, _ref5) {
+  var node = _ref5[0];
+
+  if (node.children.length === 1) {
+    var firstNode = node.children[0];
+    return !Text.isText(firstNode) && !isList(firstNode);
+  }
+
+  return true;
+};
+var insertParagraphAsChild = function insertParagraphAsChild(editor, _ref6) {
+  var path = _ref6[1];
+  Transforms.insertNodes(editor, [{
+    type: BLOCKS.PARAGRAPH,
+    data: {},
+    children: [{
+      text: ''
+    }]
+  }], {
+    at: path.concat([0])
+  });
+};
+var replaceNodeWithListItems = function replaceNodeWithListItems(editor, entry) {
+  var node = entry[0],
+      path = entry[1];
+  Transforms.removeNodes(editor, {
+    at: path
+  });
+  Transforms.insertNodes(editor, node.children[0].children, {
+    at: path
+  });
+};
+var isListTypeActive = function isListTypeActive(editor, type) {
+  var selection = editor.selection;
+
+  if (!selection) {
+    return false;
+  }
+
+  if (Range.isExpanded(selection)) {
+    var _Range$edges = Range.edges(selection),
+        start = _Range$edges[0],
+        end = _Range$edges[1];
+
+    var node = Node.common(editor, start.path, end.path);
+
+    if (node[0].type === type) {
+      return true;
+    }
+  } // Lists can be nested. Here, we take the list type at the lowest level
+
+
+  var listNode = getBlockAbove(editor, {
+    match: {
+      type: [BLOCKS.OL_LIST, BLOCKS.UL_LIST]
+    },
+    mode: 'lowest'
+  });
+  return (listNode == null ? void 0 : listNode[0].type) === type;
+};
+
+/**
+ * Build a new list item node while preserving marks
+ */
+
+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 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
+    }
+  });
+
+  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$1(_editor);
+        }
       }]
     }
   }))(SIMULATE_BACKSPACE);
@@ -4085,50 +4456,16 @@ var insertListFragment = function insertListFragment(editor) {
         select: true
       });
       return Transforms.insertNodes(editor, blocks, {
-        at: editor.selection,
-        select: true
-      });
-    }
-
-    var filtered = isListRoot(fragment[0]) ? [{
-      text: ''
-    }].concat(fragment) : fragment;
-    return insertFragment(filtered);
-  };
-};
-
-/**
- * Credit: Modified version of Plate's list plugin
- * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
- */
-var listTypes = [BLOCKS.UL_LIST, BLOCKS.OL_LIST];
-var unwrapList = function unwrapList(editor, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      at = _ref.at;
-
-  Editor.withoutNormalizing(editor, function () {
-    do {
-      unwrapNodes(editor, {
-        at: at,
-        match: {
-          type: BLOCKS.LIST_ITEM
-        },
-        split: true
-      });
-      unwrapNodes(editor, {
-        at: at,
-        match: {
-          type: listTypes
-        },
-        split: true
-      });
-    } while (getAbove(editor, {
-      match: {
-        type: listTypes,
-        at: at
-      }
-    }));
-  });
+        at: editor.selection,
+        select: true
+      });
+    }
+
+    var filtered = isListRoot(fragment[0]) ? [{
+      text: ''
+    }].concat(fragment) : fragment;
+    return insertFragment(filtered);
+  };
 };
 
 /**
@@ -4240,12 +4577,18 @@ var createListPlugin = function createListPlugin() {
     overrideByKey: (_overrideByKey = {}, _overrideByKey[ELEMENT_UL] = {
       type: BLOCKS.UL_LIST,
       component: ListUL,
+      handlers: {
+        onKeyDown: onKeyDownList
+      },
       // The withList is added on ELEMENT_UL plugin in upstream code
       // so we need to override it here
       withOverrides: withList
     }, _overrideByKey[ELEMENT_OL] = {
       type: BLOCKS.OL_LIST,
-      component: ListOL
+      component: ListOL,
+      handlers: {
+        onKeyDown: onKeyDownList
+      }
     }, _overrideByKey[ELEMENT_LIC] = {
       type: BLOCKS.PARAGRAPH
     }, _overrideByKey[ELEMENT_LI] = {
@@ -4269,148 +4612,6 @@ var createListPlugin = function createListPlugin() {
   });
 };
 
-var listTypes$1 = [BLOCKS.UL_LIST, BLOCKS.OL_LIST];
-var toggleList = function toggleList(editor, _ref) {
-  var type = _ref.type;
-  return Editor.withoutNormalizing(editor, function () {
-    if (!editor.selection) {
-      return;
-    }
-
-    if (isCollapsed(editor.selection) || !isRangeAcrossBlocks(editor)) {
-      // selection is collapsed
-      var res = getListItemEntry(editor);
-
-      if (res) {
-        var list = res.list;
-
-        if (list[0].type !== type) {
-          setNodes(editor, {
-            type: type
-          }, {
-            at: editor.selection,
-            match: function match(n) {
-              return listTypes$1.includes(n.type);
-            },
-            mode: 'lowest'
-          });
-        } else {
-          unwrapList(editor);
-        }
-      } else {
-        var _list = {
-          type: type,
-          children: [],
-          data: {}
-        };
-        wrapNodes(editor, _list);
-        var nodes = [].concat(getNodes(editor, {
-          match: {
-            type: getPluginType(editor, ELEMENT_DEFAULT)
-          }
-        }));
-        var listItem = {
-          type: BLOCKS.LIST_ITEM,
-          children: [],
-          data: {}
-        };
-
-        for (var _iterator = _createForOfIteratorHelperLoose(nodes), _step; !(_step = _iterator()).done;) {
-          var _step$value = _step.value,
-              path = _step$value[1];
-          wrapNodes(editor, listItem, {
-            at: path
-          });
-        }
-      }
-    } else {
-      // selection is a range
-      var _Range$edges = Range.edges(editor.selection),
-          startPoint = _Range$edges[0],
-          endPoint = _Range$edges[1];
-
-      var commonEntry = Node.common(editor, startPoint.path, endPoint.path);
-
-      if (listTypes$1.includes(commonEntry[0].type) || commonEntry[0].type === BLOCKS.LIST_ITEM) {
-        if (commonEntry[0].type !== type) {
-          var startList = findNode(editor, {
-            at: Range.start(editor.selection),
-            match: {
-              type: listTypes$1
-            },
-            mode: 'lowest'
-          });
-          var endList = findNode(editor, {
-            at: Range.end(editor.selection),
-            match: {
-              type: listTypes$1
-            },
-            mode: 'lowest'
-          });
-
-          if (!startList || !endList) {
-            return;
-          }
-
-          var rangeLength = Math.min(startList[1].length, endList[1].length);
-          setNodes(editor, {
-            type: type
-          }, {
-            at: editor.selection,
-            match: function match(n, path) {
-              return listTypes$1.includes(n.type) && path.length >= rangeLength;
-            },
-            mode: 'all'
-          });
-        } else {
-          unwrapList(editor);
-        }
-      } else {
-        var rootPathLength = commonEntry[1].length;
-
-        var _nodes = Array.from(getNodes(editor, {
-          mode: 'all'
-        })).filter(function (_ref2) {
-          var path = _ref2[1];
-          return path.length === rootPathLength + 1;
-        }).reverse();
-
-        _nodes.forEach(function (n) {
-          if (listTypes$1.includes(n[0].type)) {
-            setNodes(editor, {
-              type: type
-            }, {
-              at: n[1]
-            });
-          } else {
-            setNodes(editor, {
-              type: getPluginType(editor, ELEMENT_LIC)
-            }, {
-              at: n[1]
-            });
-            var _listItem = {
-              type: BLOCKS.LIST_ITEM,
-              children: [],
-              data: {}
-            };
-            wrapNodes(editor, _listItem, {
-              at: n[1]
-            });
-            var _list2 = {
-              type: type,
-              children: [],
-              data: {}
-            };
-            wrapNodes(editor, _list2, {
-              at: n[1]
-            });
-          }
-        });
-      }
-    }
-  });
-};
-
 function ToolbarListButton(props) {
   var sdk = useSdkContext();
   var editor = useContentfulEditor();
@@ -6212,6 +6413,80 @@ var disableCorePlugins = {
   eventEditor: true
 };
 
+/**
+ * For legacy reasons, a document may not have any content at all
+ * e.g:
+ *
+ * {nodeType: document, data: {}, content: []}
+ *
+ * Rendering such document will break the Slate editor
+ */
+
+var hasContent = function hasContent(doc) {
+  if (!doc) {
+    return false;
+  }
+
+  return doc.content.length > 0;
+};
+/*
+ Plate api doesn't allow to modify (easily) the editor value programmatically
+ after the editor instance is created
+
+ This function is inspired to https://github.com/udecode/plate/issues/1269#issuecomment-1057643622
+ */
+
+var setEditorContent = function setEditorContent(editor, nodes) {
+  // Replaces editor content while keeping change history
+  Editor.withoutNormalizing(editor, function () {
+    var children = [].concat(editor.children);
+    children.forEach(function (node) {
+      return editor.apply({
+        type: 'remove_node',
+        path: [0],
+        node: node
+      });
+    });
+
+    if (nodes) {
+      var nodesArray = Node.isNode(nodes) ? [nodes] : nodes;
+      nodesArray.forEach(function (node, i) {
+        return editor.apply({
+          type: 'insert_node',
+          path: [i],
+          node: node
+        });
+      });
+    }
+
+    var point = Editor.end(editor, []);
+
+    if (point) {
+      Transforms.select(editor, point);
+    }
+  });
+};
+/**
+ * Converts a contenful rich text document to the corresponding slate editor
+ * value
+ */
+
+var documentToEditorValue = function documentToEditorValue(doc) {
+  return toSlatejsDocument({
+    document: hasContent(doc) ? doc : EMPTY_DOCUMENT,
+    // TODO: get rid of schema, https://github.com/contentful/field-editors/pull/1065#discussion_r826723248
+    schema: schema
+  });
+};
+var normalizeEditorValue = function normalizeEditorValue(value, options) {
+  var editor = createPlateEditor(options);
+  editor.children = value;
+  Editor.normalize(editor, {
+    force: true
+  });
+  return editor.children;
+};
+
 var STYLE_EDITOR_BORDER = "1px solid " + tokens.gray400;
 var styles$j = {
   root: /*#__PURE__*/css({
@@ -6308,7 +6583,17 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
       setCanAccessAssets = _useState2[1];
 
   React__default.useEffect(function () {
-    sdk.access.can('read', 'Asset').then(setCanAccessAssets);
+    var subscribed = true;
+    sdk.access.can('read', 'Asset').then(function (can) {
+      if (!subscribed) {
+        return;
+      }
+
+      setCanAccessAssets(can);
+    });
+    return function () {
+      subscribed = false;
+    };
   }, [sdk]);
   var inlineEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, INLINES.EMBEDDED_ENTRY);
   var blockEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
@@ -6463,50 +6748,6 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
   }, children);
 };
 
-/**
- * For legacy reasons, a document may not have any content at all
- * e.g:
- *
- * {nodeType: document, data: {}, content: []}
- *
- * Rendering such document will break the Slate editor
- */
-
-var hasContent = function hasContent(doc) {
-  if (!doc) {
-    return false;
-  }
-
-  return doc.content.length > 0;
-};
-
-var useNormalizedSlateValue = function useNormalizedSlateValue(_ref) {
-  var id = _ref.id,
-      incomingDoc = _ref.incomingDoc,
-      plugins = _ref.plugins;
-  return useMemo(function () {
-    var editor = createPlateEditor({
-      id: id,
-      plugins: plugins,
-      disableCorePlugins: disableCorePlugins
-    });
-    var doc = toSlatejsDocument({
-      document: hasContent(incomingDoc) ? incomingDoc : EMPTY_DOCUMENT,
-      schema: schema
-    }); // Sets editor value & kicks normalization
-
-    editor.children = doc;
-    Editor.normalize(editor, {
-      force: true
-    }); // TODO: return the editor itself to avoid recompiling & initializing all
-    // of the plugins again. It's currently not possible due to a bug in Plate
-    // with initialValues
-    // See: https://slate-js.slack.com/archives/C013QHXSCG1/p1645112799942819
-
-    return editor.children;
-  }, [id, plugins, incomingDoc]);
-};
-
 /**
  * Returns whether a given operation is relevant enough to trigger a save.
  */
@@ -6520,8 +6761,10 @@ var isRelevantOperation = function isRelevantOperation(op) {
 };
 
 var useOnValueChanged = function useOnValueChanged(_ref) {
-  var editor = _ref.editor,
-      handler = _ref.handler;
+  var editorId = _ref.editorId,
+      handler = _ref.handler,
+      skip = _ref.skip,
+      onSkip = _ref.onSkip;
   var onChange = useMemo(function () {
     return debounce(function (document) {
       handler == null ? void 0 : handler(toContentfulDocument({
@@ -6531,45 +6774,84 @@ var useOnValueChanged = function useOnValueChanged(_ref) {
     }, 500);
   }, [handler]);
   return useCallback(function (value) {
-    var operations = editor.operations.filter(isRelevantOperation);
+    var editor = getPlateSelectors(editorId).editor();
+
+    if (!editor) {
+      throw new Error('Editor change callback called but editor not defined. Editor id: ' + editorId);
+    }
+
+    var operations = editor == null ? void 0 : editor.operations.filter(isRelevantOperation);
 
     if (operations.length > 0) {
+      if (skip) {
+        onSkip == null ? void 0 : onSkip();
+        return;
+      }
+
       onChange(value);
     }
-  }, [editor, onChange]);
+  }, [editorId, onChange, skip, onSkip]);
 };
 
 var _excluded = ["sdk", "isInitiallyDisabled", "onAction"];
 var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
-  var id = getContentfulEditorId(props.sdk); // TODO: remove in favor of getting the editor from useNormalizedSlateValue after upgrading to Plate v10
-
-  var editor = useContentfulEditor(id);
+  var id = getContentfulEditorId(props.sdk);
   var plugins = React__default.useMemo(function () {
     var _props$onAction;
 
     return getPlugins(props.sdk, (_props$onAction = props.onAction) != null ? _props$onAction : noop);
   }, [props.sdk, props.onAction]);
-  var initialValue = useNormalizedSlateValue({
-    id: id,
-    incomingDoc: props.value,
-    plugins: plugins
-  });
+
+  var _useState = useState(true),
+      isFirstRender = _useState[0],
+      setIsFirstRender = _useState[1];
+
+  var _useState2 = useState(false),
+      pendingExternalUpdate = _useState2[0],
+      setPendingExternalUpdate = _useState2[1];
+
   var onValueChanged = useOnValueChanged({
-    editor: editor,
-    handler: props.onChange
+    editorId: id,
+    handler: props.onChange,
+    skip: pendingExternalUpdate || isFirstRender,
+    onSkip: function onSkip() {
+      return setPendingExternalUpdate(false);
+    }
   });
+  useEffect(function () {
+    /*
+      This effect is called when the value prop changes. Normally
+      this happens when the value is changed outside of the editor,
+      like in snapshots restoration or remote updates
+      Plate won't update the displayed value on its own, see:
+       - https://github.com/ianstormtaylor/slate/pull/4540
+       - https://github.com/udecode/plate/issues/1169
+            The content is forcely set to the new value and it's ensured
+       the change listener isn't invoked
+    */
+    setIsFirstRender(false);
+    var editor = getPlateSelectors(id).editor();
+
+    if (!editor) {
+      return;
+    }
+
+    setPendingExternalUpdate(true);
+    setEditorContent(editor, documentToEditorValue(props.value));
+  }, [props.value, id]);
   var classNames = cx(styles$j.editor, props.minHeight !== undefined ? css({
     minHeight: props.minHeight
   }) : undefined, props.isDisabled ? styles$j.disabled : styles$j.enabled, props.isToolbarHidden && styles$j.hiddenToolbar);
   useEffect(function () {
-    // Ensure the plate state is cleared after the component unmounts
-    // This prevent new editors for the same field to display old outdated values
-    // Typical scenario: coming back to the entry editor after restoring a previous entry version
-    getPlateActions(id).enabled(true);
-    return function () {
-      return getPlateActions(id).enabled(false);
-    };
-  }, [id]);
+    if (!isFirstRender) {
+      return;
+    }
+
+    getPlateActions(id).value(normalizeEditorValue(documentToEditorValue(props.value), {
+      plugins: plugins,
+      disableCorePlugins: disableCorePlugins
+    }));
+  }, [isFirstRender, plugins, id, props.value]);
   return /*#__PURE__*/React__default.createElement(SdkProvider, {
     sdk: props.sdk
   }, /*#__PURE__*/React__default.createElement(ContentfulEditorIdProvider, {
@@ -6579,7 +6861,6 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
     "data-test-id": "rich-text-editor"
   }, /*#__PURE__*/React__default.createElement(Plate, {
     id: id,
-    initialValue: initialValue,
     plugins: plugins,
     disableCorePlugins: disableCorePlugins,
     editableProps: {
@@ -6603,6 +6884,7 @@ var RichTextEditor = function RichTextEditor(props) {
   var isEmptyValue = useCallback(function (value) {
     return !value || deepEquals(value, EMPTY_DOCUMENT);
   }, []);
+  var id = getContentfulEditorId(props.sdk);
   return /*#__PURE__*/React__default.createElement(EntityProvider, {
     sdk: sdk
   }, /*#__PURE__*/React__default.createElement(FieldConnector, {
@@ -6614,10 +6896,9 @@ var RichTextEditor = function RichTextEditor(props) {
   }, function (_ref) {
     var lastRemoteValue = _ref.lastRemoteValue,
         disabled = _ref.disabled,
-        setValue = _ref.setValue,
-        externalReset = _ref.externalReset;
+        setValue = _ref.setValue;
     return /*#__PURE__*/React__default.createElement(ConnectedRichTextEditor, Object.assign({}, otherProps, {
-      key: "rich-text-editor-" + externalReset,
+      key: "rich-text-editor-" + id,
       value: lastRemoteValue,
       sdk: sdk,
       onAction: onAction,