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

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';
@@ -944,14 +945,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);
@@ -3716,6 +3725,329 @@ function ListItem(props) {
   }), props.children);
 }
 
+/**
+ * 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 previousSiblingItem = Editor.node(editor, previousListItemPath);
+
+  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
+
+
+      Transforms.moveNodes(editor, {
+        at: listItemPath,
+        to: newPath
+      });
+    });
+  }
+};
+
+/**
+ * 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 _nodes = getNodes(editor, {
+    at: at,
+    match: {
+      type: getPluginType(editor, ELEMENT_LIC)
+    }
+  }); // Get the selected lic
+
+
+  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 () {
+    licPathRefsToMove.forEach(function (licPathRef) {
+      var licPath = licPathRef.unref();
+      if (!licPath) return;
+      var liEntry = getListItemEntry(editor, {
+        at: licPath
+      });
+
+      if (!liEntry) {
+        return;
+      }
+
+      if (increase) {
+        moveListItemDown(editor, liEntry);
+      } else if (isListNested(editor, liEntry.list[1])) {
+        moveListItemUp(editor, liEntry);
+      }
+    });
+  });
+};
+
+/**
+ * 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
+      }
+    }));
+  });
+};
+
+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);
 };
@@ -4097,40 +4429,6 @@ var insertListFragment = function insertListFragment(editor) {
   };
 };
 
-/**
- * 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
-      }
-    }));
-  });
-};
-
 /**
  * Credit: Modified version of Plate's list plugin
  * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
@@ -4240,12 +4538,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 +4573,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 +6374,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 +6544,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 +6709,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 +6722,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 +6735,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 +6822,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 +6845,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 +6857,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,