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

package/dist/field-editor-rich-text.cjs.development.js

@@ -28,6 +28,7 @@ var tokens = _interopDefault(require('@contentful/f36-tokens'));
 var find = _interopDefault(require('lodash/find'));
 var flow = _interopDefault(require('lodash/flow'));
 var plateList = require('@udecode/plate-list');
+var castArray = _interopDefault(require('lodash/castArray'));
 var plateBasicMarks = require('@udecode/plate-basic-marks');
 var isPlainObject = _interopDefault(require('is-plain-obj'));
 var plateParagraph = require('@udecode/plate-paragraph');
@@ -951,14 +952,22 @@ function FetchingWrappedEntryCard(props) {
   var onEntityFetchComplete = props.onEntityFetchComplete;
   React.useEffect(function () {
     if (!entry || entry === 'failed') return;
+    var subscribed = true;
     fieldEditorShared.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]);
   React.useEffect(function () {
     getOrLoadEntry(props.entryId);
@@ -3723,6 +3732,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 = slate.Path.previous(listItemPath);
+  } catch (e) {
+    return;
+  } // Previous sibling is the new parent
+
+
+  var previousSiblingItem = slate.Editor.node(editor, previousListItemPath);
+
+  if (previousSiblingItem) {
+    var previousPath = previousSiblingItem[1];
+    var subList = Array.from(slate.Node.children(editor, previousPath)).find(function (_ref2) {
+      var n = _ref2[0];
+      return plateCore.match(n, {
+        type: plateList.getListTypes(editor)
+      });
+    });
+    var newPath = slate.Path.next(plateCore.getLastChildPath(subList != null ? subList : previousSiblingItem));
+    slate.Editor.withoutNormalizing(editor, function () {
+      if (!subList) {
+        // Create new sub-list
+        plateCore.wrapNodes(editor, {
+          type: listNode.type,
+          children: [],
+          data: {}
+        }, {
+          at: listItemPath
+        });
+      } // Move the current item to the sub-list
+
+
+      slate.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 = plateCore.getNodes(editor, {
+    at: at,
+    match: {
+      type: plateCore.getPluginType(editor, plateList.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 = slate.Path.parent(licPath);
+    var isAncestor = highestLicPaths.some(function (path) {
+      var highestLiPath = slate.Path.parent(path);
+      return slate.Path.isAncestor(highestLiPath, liPath);
+    });
+
+    if (!isAncestor) {
+      highestLicPaths.push(licPath);
+      highestLicPathRefs.push(slate.Editor.pathRef(editor, licPath));
+    }
+  });
+  var licPathRefsToMove = increase ? highestLicPathRefs : highestLicPathRefs.reverse();
+  slate.Editor.withoutNormalizing(editor, function () {
+    licPathRefsToMove.forEach(function (licPathRef) {
+      var licPath = licPathRef.unref();
+      if (!licPath) return;
+      var liEntry = plateList.getListItemEntry(editor, {
+        at: licPath
+      });
+
+      if (!liEntry) {
+        return;
+      }
+
+      if (increase) {
+        moveListItemDown(editor, liEntry);
+      } else if (plateList.isListNested(editor, liEntry.list[1])) {
+        plateList.moveListItemUp(editor, liEntry);
+      }
+    });
+  });
+};
+
+/**
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+var listTypes = [Contentful.BLOCKS.UL_LIST, Contentful.BLOCKS.OL_LIST];
+var unwrapList = function unwrapList(editor, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      at = _ref.at;
+
+  slate.Editor.withoutNormalizing(editor, function () {
+    do {
+      plateCore.unwrapNodes(editor, {
+        at: at,
+        match: {
+          type: Contentful.BLOCKS.LIST_ITEM
+        },
+        split: true
+      });
+      plateCore.unwrapNodes(editor, {
+        at: at,
+        match: {
+          type: listTypes
+        },
+        split: true
+      });
+    } while (plateCore.getAbove(editor, {
+      match: {
+        type: listTypes,
+        at: at
+      }
+    }));
+  });
+};
+
+var listTypes$1 = [Contentful.BLOCKS.UL_LIST, Contentful.BLOCKS.OL_LIST];
+var toggleList = function toggleList(editor, _ref) {
+  var type = _ref.type;
+  return slate.Editor.withoutNormalizing(editor, function () {
+    if (!editor.selection) {
+      return;
+    }
+
+    if (plateCore.isCollapsed(editor.selection) || !plateCore.isRangeAcrossBlocks(editor)) {
+      // selection is collapsed
+      var res = plateList.getListItemEntry(editor);
+
+      if (res) {
+        var list = res.list;
+
+        if (list[0].type !== type) {
+          plateCore.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: {}
+        };
+        plateCore.wrapNodes(editor, _list);
+        var nodes = [].concat(plateCore.getNodes(editor, {
+          match: {
+            type: plateCore.getPluginType(editor, plateCore.ELEMENT_DEFAULT)
+          }
+        }));
+        var listItem = {
+          type: Contentful.BLOCKS.LIST_ITEM,
+          children: [],
+          data: {}
+        };
+
+        for (var _iterator = _createForOfIteratorHelperLoose(nodes), _step; !(_step = _iterator()).done;) {
+          var _step$value = _step.value,
+              path = _step$value[1];
+          plateCore.wrapNodes(editor, listItem, {
+            at: path
+          });
+        }
+      }
+    } else {
+      // selection is a range
+      var _Range$edges = slate.Range.edges(editor.selection),
+          startPoint = _Range$edges[0],
+          endPoint = _Range$edges[1];
+
+      var commonEntry = slate.Node.common(editor, startPoint.path, endPoint.path);
+
+      if (listTypes$1.includes(commonEntry[0].type) || commonEntry[0].type === Contentful.BLOCKS.LIST_ITEM) {
+        if (commonEntry[0].type !== type) {
+          var startList = plateCore.findNode(editor, {
+            at: slate.Range.start(editor.selection),
+            match: {
+              type: listTypes$1
+            },
+            mode: 'lowest'
+          });
+          var endList = plateCore.findNode(editor, {
+            at: slate.Range.end(editor.selection),
+            match: {
+              type: listTypes$1
+            },
+            mode: 'lowest'
+          });
+
+          if (!startList || !endList) {
+            return;
+          }
+
+          var rangeLength = Math.min(startList[1].length, endList[1].length);
+          plateCore.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(plateCore.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)) {
+            plateCore.setNodes(editor, {
+              type: type
+            }, {
+              at: n[1]
+            });
+          } else {
+            plateCore.setNodes(editor, {
+              type: plateCore.getPluginType(editor, plateList.ELEMENT_LIC)
+            }, {
+              at: n[1]
+            });
+            var _listItem = {
+              type: Contentful.BLOCKS.LIST_ITEM,
+              children: [],
+              data: {}
+            };
+            plateCore.wrapNodes(editor, _listItem, {
+              at: n[1]
+            });
+            var _list2 = {
+              type: type,
+              children: [],
+              data: {}
+            };
+            plateCore.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 = plateCore.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 [Contentful.BLOCKS.OL_LIST, Contentful.BLOCKS.UL_LIST].includes(node.type);
 };
@@ -4104,40 +4436,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 = [Contentful.BLOCKS.UL_LIST, Contentful.BLOCKS.OL_LIST];
-var unwrapList = function unwrapList(editor, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      at = _ref.at;
-
-  slate.Editor.withoutNormalizing(editor, function () {
-    do {
-      plateCore.unwrapNodes(editor, {
-        at: at,
-        match: {
-          type: Contentful.BLOCKS.LIST_ITEM
-        },
-        split: true
-      });
-      plateCore.unwrapNodes(editor, {
-        at: at,
-        match: {
-          type: listTypes
-        },
-        split: true
-      });
-    } while (plateCore.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
@@ -4247,12 +4545,18 @@ var createListPlugin = function createListPlugin() {
     overrideByKey: (_overrideByKey = {}, _overrideByKey[plateList.ELEMENT_UL] = {
       type: Contentful.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[plateList.ELEMENT_OL] = {
       type: Contentful.BLOCKS.OL_LIST,
-      component: ListOL
+      component: ListOL,
+      handlers: {
+        onKeyDown: onKeyDownList
+      }
     }, _overrideByKey[plateList.ELEMENT_LIC] = {
       type: Contentful.BLOCKS.PARAGRAPH
     }, _overrideByKey[plateList.ELEMENT_LI] = {
@@ -4276,148 +4580,6 @@ var createListPlugin = function createListPlugin() {
   });
 };
 
-var listTypes$1 = [Contentful.BLOCKS.UL_LIST, Contentful.BLOCKS.OL_LIST];
-var toggleList = function toggleList(editor, _ref) {
-  var type = _ref.type;
-  return slate.Editor.withoutNormalizing(editor, function () {
-    if (!editor.selection) {
-      return;
-    }
-
-    if (plateCore.isCollapsed(editor.selection) || !plateCore.isRangeAcrossBlocks(editor)) {
-      // selection is collapsed
-      var res = plateList.getListItemEntry(editor);
-
-      if (res) {
-        var list = res.list;
-
-        if (list[0].type !== type) {
-          plateCore.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: {}
-        };
-        plateCore.wrapNodes(editor, _list);
-        var nodes = [].concat(plateCore.getNodes(editor, {
-          match: {
-            type: plateCore.getPluginType(editor, plateCore.ELEMENT_DEFAULT)
-          }
-        }));
-        var listItem = {
-          type: Contentful.BLOCKS.LIST_ITEM,
-          children: [],
-          data: {}
-        };
-
-        for (var _iterator = _createForOfIteratorHelperLoose(nodes), _step; !(_step = _iterator()).done;) {
-          var _step$value = _step.value,
-              path = _step$value[1];
-          plateCore.wrapNodes(editor, listItem, {
-            at: path
-          });
-        }
-      }
-    } else {
-      // selection is a range
-      var _Range$edges = slate.Range.edges(editor.selection),
-          startPoint = _Range$edges[0],
-          endPoint = _Range$edges[1];
-
-      var commonEntry = slate.Node.common(editor, startPoint.path, endPoint.path);
-
-      if (listTypes$1.includes(commonEntry[0].type) || commonEntry[0].type === Contentful.BLOCKS.LIST_ITEM) {
-        if (commonEntry[0].type !== type) {
-          var startList = plateCore.findNode(editor, {
-            at: slate.Range.start(editor.selection),
-            match: {
-              type: listTypes$1
-            },
-            mode: 'lowest'
-          });
-          var endList = plateCore.findNode(editor, {
-            at: slate.Range.end(editor.selection),
-            match: {
-              type: listTypes$1
-            },
-            mode: 'lowest'
-          });
-
-          if (!startList || !endList) {
-            return;
-          }
-
-          var rangeLength = Math.min(startList[1].length, endList[1].length);
-          plateCore.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(plateCore.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)) {
-            plateCore.setNodes(editor, {
-              type: type
-            }, {
-              at: n[1]
-            });
-          } else {
-            plateCore.setNodes(editor, {
-              type: plateCore.getPluginType(editor, plateList.ELEMENT_LIC)
-            }, {
-              at: n[1]
-            });
-            var _listItem = {
-              type: Contentful.BLOCKS.LIST_ITEM,
-              children: [],
-              data: {}
-            };
-            plateCore.wrapNodes(editor, _listItem, {
-              at: n[1]
-            });
-            var _list2 = {
-              type: type,
-              children: [],
-              data: {}
-            };
-            plateCore.wrapNodes(editor, _list2, {
-              at: n[1]
-            });
-          }
-        });
-      }
-    }
-  });
-};
-
 function ToolbarListButton(props) {
   var sdk = useSdkContext();
   var editor = useContentfulEditor();
@@ -6219,6 +6381,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
+  slate.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 = slate.Node.isNode(nodes) ? [nodes] : nodes;
+      nodesArray.forEach(function (node, i) {
+        return editor.apply({
+          type: 'insert_node',
+          path: [i],
+          node: node
+        });
+      });
+    }
+
+    var point = slate.Editor.end(editor, []);
+
+    if (point) {
+      slate.Transforms.select(editor, point);
+    }
+  });
+};
+/**
+ * Converts a contenful rich text document to the corresponding slate editor
+ * value
+ */
+
+var documentToEditorValue = function documentToEditorValue(doc) {
+  return contentfulSlateJSAdapter.toSlatejsDocument({
+    document: hasContent(doc) ? doc : Contentful.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 = plateCore.createPlateEditor(options);
+  editor.children = value;
+  slate.Editor.normalize(editor, {
+    force: true
+  });
+  return editor.children;
+};
+
 var STYLE_EDITOR_BORDER = "1px solid " + tokens.gray400;
 var styles$j = {
   root: /*#__PURE__*/emotion.css({
@@ -6315,7 +6551,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, Contentful.INLINES.EMBEDDED_ENTRY);
   var blockEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
@@ -6470,50 +6716,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 React.useMemo(function () {
-    var editor = plateCore.createPlateEditor({
-      id: id,
-      plugins: plugins,
-      disableCorePlugins: disableCorePlugins
-    });
-    var doc = contentfulSlateJSAdapter.toSlatejsDocument({
-      document: hasContent(incomingDoc) ? incomingDoc : Contentful.EMPTY_DOCUMENT,
-      schema: schema
-    }); // Sets editor value & kicks normalization
-
-    editor.children = doc;
-    slate.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.
  */
@@ -6527,8 +6729,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 = React.useMemo(function () {
     return debounce(function (document) {
       handler == null ? void 0 : handler(contentfulSlateJSAdapter.toContentfulDocument({
@@ -6538,45 +6742,84 @@ var useOnValueChanged = function useOnValueChanged(_ref) {
     }, 500);
   }, [handler]);
   return React.useCallback(function (value) {
-    var operations = editor.operations.filter(isRelevantOperation);
+    var editor = plateCore.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 = React.useState(true),
+      isFirstRender = _useState[0],
+      setIsFirstRender = _useState[1];
+
+  var _useState2 = React.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);
+    }
   });
+  React.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 = plateCore.getPlateSelectors(id).editor();
+
+    if (!editor) {
+      return;
+    }
+
+    setPendingExternalUpdate(true);
+    setEditorContent(editor, documentToEditorValue(props.value));
+  }, [props.value, id]);
   var classNames = emotion.cx(styles$j.editor, props.minHeight !== undefined ? emotion.css({
     minHeight: props.minHeight
   }) : undefined, props.isDisabled ? styles$j.disabled : styles$j.enabled, props.isToolbarHidden && styles$j.hiddenToolbar);
   React.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
-    plateCore.getPlateActions(id).enabled(true);
-    return function () {
-      return plateCore.getPlateActions(id).enabled(false);
-    };
-  }, [id]);
+    if (!isFirstRender) {
+      return;
+    }
+
+    plateCore.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, {
@@ -6586,7 +6829,6 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
     "data-test-id": "rich-text-editor"
   }, /*#__PURE__*/React__default.createElement(plateCore.Plate, {
     id: id,
-    initialValue: initialValue,
     plugins: plugins,
     disableCorePlugins: disableCorePlugins,
     editableProps: {
@@ -6610,6 +6852,7 @@ var RichTextEditor = function RichTextEditor(props) {
   var isEmptyValue = React.useCallback(function (value) {
     return !value || deepEquals(value, Contentful.EMPTY_DOCUMENT);
   }, []);
+  var id = getContentfulEditorId(props.sdk);
   return /*#__PURE__*/React__default.createElement(fieldEditorReference.EntityProvider, {
     sdk: sdk
   }, /*#__PURE__*/React__default.createElement(fieldEditorShared.FieldConnector, {
@@ -6621,10 +6864,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,