@contentful/field-editor-rich-text 2.0.0-next.20 → 2.0.0-next.23

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);
@@ -1053,7 +1062,11 @@ function FetchingWrappedEntryCard(props) {
 
 var styles$3 = {
   root: /*#__PURE__*/emotion.css({
-    marginBottom: '1.25rem !important'
+    marginBottom: '1.25rem !important',
+    // 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) {
@@ -2277,15 +2290,7 @@ function FetchingWrappedInlineEntryCard(props) {
   return /*#__PURE__*/React__default.createElement(f36Components.InlineEntryCard, {
     testId: Contentful.INLINES.EMBEDDED_ENTRY,
     isSelected: props.isSelected,
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", null, contentTypeName, " ", title), /*#__PURE__*/React__default.createElement(fieldEditorReference.ScheduledIconWithTooltip, {
-      getEntityScheduledActions: loadEntityScheduledActions,
-      entityType: "Entry",
-      entityId: entry.sys.id
-    }, /*#__PURE__*/React__default.createElement(f36Icons.ClockIcon, {
-      className: styles$5.scheduledIcon,
-      variant: "muted",
-      testId: "scheduled-icon"
-    }))),
+    title: contentTypeName + ": " + title,
     status: status,
     actions: [/*#__PURE__*/React__default.createElement(f36Components.MenuItem, {
       key: "edit",
@@ -2297,7 +2302,15 @@ function FetchingWrappedInlineEntryCard(props) {
       disabled: props.isDisabled,
       testId: "card-action-remove"
     }, "Remove")]
-  });
+  }, /*#__PURE__*/React__default.createElement(fieldEditorReference.ScheduledIconWithTooltip, {
+    getEntityScheduledActions: loadEntityScheduledActions,
+    entityType: "Entry",
+    entityId: entry.sys.id
+  }, /*#__PURE__*/React__default.createElement(f36Icons.ClockIcon, {
+    className: styles$5.scheduledIcon,
+    variant: "muted",
+    testId: "scheduled-icon"
+  })), /*#__PURE__*/React__default.createElement(f36Components.Text, null, title));
 }
 
 function createInlineEntryNode(id) {
@@ -2979,159 +2992,6 @@ var createHrPlugin = function createHrPlugin() {
   };
 };
 
-function truncate(str, length) {
-  if (typeof str === 'string' && str.length > length) {
-    return str && str.substr(0, length + 1) // +1 to look ahead and be replaced below.
-    // Get rid of orphan letters but not one letter words (I, a, 2).
-    // Try to not have “.” as last character to avoid awkward “....”.
-    .replace(/(\s+\S(?=\S)|\s*)\.?.$/, '…');
-  }
-
-  return str;
-}
-
-function getEntityInfo(_ref) {
-  var entityTitle = _ref.entityTitle,
-      entityStatus = _ref.entityStatus,
-      contentTypeName = _ref.contentTypeName;
-  var title = truncate(entityTitle, 60) || 'Untitled';
-  return (contentTypeName || 'Asset') + " \"" + title + "\", " + entityStatus;
-}
-
-function EntryAssetTooltip(_ref2) {
-  var id = _ref2.id,
-      type = _ref2.type,
-      sdk = _ref2.sdk;
-
-  var _React$useState = React.useState(''),
-      entityTitle = _React$useState[0],
-      setEntityTitle = _React$useState[1];
-
-  var _React$useState2 = React.useState(''),
-      entityStatus = _React$useState2[0],
-      setEntityStatus = _React$useState2[1];
-
-  var _React$useState3 = React.useState([]),
-      jobs = _React$useState3[0],
-      setJobs = _React$useState3[1];
-
-  var _React$useState4 = React.useState(true),
-      isLoading = _React$useState4[0],
-      setIsLoading = _React$useState4[1];
-
-  var _React$useState5 = React.useState(false),
-      hasError = _React$useState5[0],
-      setHasError = _React$useState5[1];
-
-  React.useEffect(function () {
-    function loadContent() {
-      return _loadContent.apply(this, arguments);
-    }
-
-    function _loadContent() {
-      _loadContent = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var actions, contentType, entity, contentTypeId, contentTypes, _entityTitle, _jobs, _entityStatus;
-
-        return runtime_1.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                setIsLoading(true);
-                setHasError(false);
-                actions = {
-                  Asset: {
-                    getEntity: sdk.space.getAsset,
-                    getEntityTitle: function getEntityTitle(args) {
-                      return fieldEditorShared.entityHelpers.getAssetTitle(_extends({}, args, {
-                        asset: args.entity
-                      }));
-                    }
-                  },
-                  Entry: {
-                    getEntity: sdk.space.getEntry,
-                    getEntityTitle: function getEntityTitle(args) {
-                      return fieldEditorShared.entityHelpers.getEntryTitle(_extends({}, args, {
-                        entry: args.entity
-                      }));
-                    }
-                  }
-                };
-                _context.next = 6;
-                return actions[type].getEntity(id);
-
-              case 6:
-                entity = _context.sent;
-
-                if (entity.sys.contentType) {
-                  contentTypeId = entity.sys.contentType.sys.id;
-                  contentTypes = sdk.space.getCachedContentTypes();
-                  contentType = contentTypes.find(function (ct) {
-                    return ct.sys.id === contentTypeId;
-                  });
-                }
-
-                _entityTitle = actions[type].getEntityTitle({
-                  entity: entity,
-                  contentType: contentType,
-                  localeCode: sdk.field.locale,
-                  defaultLocaleCode: sdk.locales["default"],
-                  entityType: type
-                });
-                _context.next = 11;
-                return sdk.space.getEntityScheduledActions(type, id);
-
-              case 11:
-                _jobs = _context.sent;
-                _entityStatus = fieldEditorShared.entityHelpers.getEntryStatus(entity.sys);
-                setEntityTitle(_entityTitle);
-                setEntityStatus(_entityStatus);
-                setJobs(_jobs);
-                _context.next = 22;
-                break;
-
-              case 18:
-                _context.prev = 18;
-                _context.t0 = _context["catch"](0);
-                console.log(_context.t0);
-                setHasError(true);
-
-              case 22:
-                _context.prev = 22;
-                setIsLoading(false);
-                return _context.finish(22);
-
-              case 25:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[0, 18, 22, 25]]);
-      }));
-      return _loadContent.apply(this, arguments);
-    }
-
-    loadContent();
-  }, [id, type, sdk]);
-
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, "Loading " + type.toLowerCase() + "...");
-  }
-
-  if (hasError) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, type + " missing or inaccessible");
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, getEntityInfo({
-    entityTitle: entityTitle,
-    contentTypeName: type,
-    entityStatus: entityStatus
-  }), ' ', jobs.length > 0 ? fieldEditorReference.getScheduleTooltipContent({
-    job: jobs[0],
-    jobsCount: jobs.length
-  }) : '');
-}
-
 var _templateObject$3, _SYS_LINK_TYPES, _LINK_TYPE_SELECTION_;
 var styles$b = {
   removeSelectionLabel: /*#__PURE__*/emotion.css(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    margin-left: ", ";\n  "])), tokens.spacingS)
@@ -3443,11 +3303,213 @@ function _addOrEditLink() {
   return _addOrEditLink.apply(this, arguments);
 }
 
+function ToolbarHyperlinkButton(props) {
+  var editor = useContentfulEditor();
+  var isActive = !!(editor && isLinkActive(editor));
+  var sdk = useSdkContext();
+
+  function handleClick() {
+    return _handleClick.apply(this, arguments);
+  }
+
+  function _handleClick() {
+    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (editor) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              if (isActive) {
+                unwrapLink(editor);
+                editor.tracking.onToolbarAction('unlinkHyperlinks');
+              } else {
+                addOrEditLink(editor, sdk, editor.tracking.onToolbarAction);
+              }
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _handleClick.apply(this, arguments);
+  }
+
+  if (!editor) return null;
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    title: "Hyperlink",
+    testId: "hyperlink-toolbar-button",
+    onClick: handleClick,
+    isActive: isActive,
+    isDisabled: props.isDisabled
+  }, /*#__PURE__*/React.createElement(f36Icons.LinkIcon, null));
+}
+
 var hasText = function hasText(editor, entry) {
   var node = entry[0];
   return !plateCore.isAncestorEmpty(editor, node) && slate.Node.string(node).trim() !== '';
 };
 
+function truncate(str, length) {
+  if (typeof str === 'string' && str.length > length) {
+    return str && str.substr(0, length + 1) // +1 to look ahead and be replaced below.
+    // Get rid of orphan letters but not one letter words (I, a, 2).
+    // Try to not have “.” as last character to avoid awkward “....”.
+    .replace(/(\s+\S(?=\S)|\s*)\.?.$/, '…');
+  }
+
+  return str;
+}
+
+function getEntityInfo(data) {
+  if (!data) {
+    return '';
+  }
+
+  var entityTitle = data.entityTitle,
+      contentTypeName = data.contentTypeName,
+      entityStatus = data.entityStatus,
+      jobs = data.jobs;
+  var title = truncate(entityTitle, 60) || 'Untitled';
+  var scheduledActions = jobs.length > 0 ? fieldEditorReference.getScheduleTooltipContent({
+    job: jobs[0],
+    jobsCount: jobs.length
+  }) : '';
+  return (contentTypeName || 'Asset') + " \"" + title + "\", " + entityStatus + " " + scheduledActions;
+}
+
+function fetchAllData(_x) {
+  return _fetchAllData.apply(this, arguments);
+}
+
+function _fetchAllData() {
+  _fetchAllData = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref) {
+    var sdk, entityId, entityType, localeCode, defaultLocaleCode, contentType, getEntity, entity, contentTypeId, entityTitle, entityDescription, jobs, entityStatus;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            sdk = _ref.sdk, entityId = _ref.entityId, entityType = _ref.entityType, localeCode = _ref.localeCode, defaultLocaleCode = _ref.defaultLocaleCode;
+            getEntity = entityType === 'Entry' ? sdk.space.getEntry : sdk.space.getAsset;
+            _context.next = 4;
+            return getEntity(entityId);
+
+          case 4:
+            entity = _context.sent;
+
+            if (entity.sys.contentType) {
+              contentTypeId = entity.sys.contentType.sys.id;
+              contentType = sdk.space.getCachedContentTypes().find(function (ct) {
+                return ct.sys.id === contentTypeId;
+              });
+            }
+
+            entityTitle = entityType === 'Entry' ? fieldEditorShared.entityHelpers.getEntryTitle({
+              entry: entity,
+              contentType: contentType,
+              localeCode: localeCode,
+              defaultLocaleCode: defaultLocaleCode,
+              defaultTitle: 'Untitled'
+            }) : fieldEditorShared.entityHelpers.getAssetTitle({
+              asset: entity,
+              localeCode: localeCode,
+              defaultLocaleCode: defaultLocaleCode,
+              defaultTitle: 'Untitled'
+            });
+            entityDescription = fieldEditorShared.entityHelpers.getEntityDescription({
+              entity: entity,
+              contentType: contentType,
+              localeCode: localeCode,
+              defaultLocaleCode: defaultLocaleCode
+            });
+            _context.next = 10;
+            return sdk.space.getEntityScheduledActions(entityType, entityId);
+
+          case 10:
+            jobs = _context.sent;
+            entityStatus = fieldEditorShared.entityHelpers.getEntryStatus(entity.sys);
+            return _context.abrupt("return", {
+              jobs: jobs,
+              entity: entity,
+              entityTitle: entityTitle,
+              entityDescription: entityDescription,
+              entityStatus: entityStatus,
+              contentTypeName: contentType ? contentType.name : ''
+            });
+
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _fetchAllData.apply(this, arguments);
+}
+
+function useRequestStatus(_ref2) {
+  var sdk = _ref2.sdk,
+      target = _ref2.target,
+      onEntityFetchComplete = _ref2.onEntityFetchComplete;
+
+  var _useState = React.useState({
+    type: 'loading'
+  }),
+      requestStatus = _useState[0],
+      setRequestStatus = _useState[1];
+
+  React.useEffect(function () {
+    if (target) {
+      var _target$sys, _target$sys2;
+
+      fetchAllData({
+        sdk: sdk,
+        entityId: target == null ? void 0 : (_target$sys = target.sys) == null ? void 0 : _target$sys.id,
+        entityType: target == null ? void 0 : (_target$sys2 = target.sys) == null ? void 0 : _target$sys2.linkType,
+        localeCode: sdk.field.locale,
+        defaultLocaleCode: sdk.locales["default"]
+      }).then(function (entityInfo) {
+        setRequestStatus({
+          type: 'success',
+          data: entityInfo
+        });
+      })["catch"](function (e) {
+        console.log(e);
+        setRequestStatus({
+          type: 'error',
+          error: e
+        });
+      })["finally"](function () {
+        onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+      });
+    }
+  }, [sdk, target, onEntityFetchComplete]);
+  return requestStatus;
+}
+
+function useEntityInfo(props) {
+  var status = useRequestStatus(props);
+  var linkType = props.target.sys.linkType;
+
+  if (status.type === 'loading') {
+    return "Loading " + linkType.toLowerCase() + "...";
+  }
+
+  if (status.type === 'error') {
+    return linkType + " missing or inaccessible";
+  }
+
+  return getEntityInfo(status.data);
+}
+
 var styles$c = {
   hyperlinkWrapper: /*#__PURE__*/emotion.css({
     display: 'inline',
@@ -3465,33 +3527,21 @@ var styles$c = {
     '&:focus': {
       fill: tokens.gray900
     }
-  }),
-  hyperlinkIEFallback: /*#__PURE__*/emotion.css({
-    color: '#1683d0',
-    textDecoration: 'underline'
-  }),
-  // TODO: use these styles once we can use the icon
-  hyperlinkIcon: /*#__PURE__*/emotion.css({
-    position: 'relative',
-    top: '4px',
-    height: '14px',
-    margin: '0 -2px 0 -1px',
-    webkitTransition: 'fill 100ms ease-in-out',
-    transition: 'fill 100ms ease-in-out',
-    '&:hover': {
-      fill: tokens.gray900
-    },
-    '&:focus': {
-      fill: tokens.gray900
-    }
   })
 };
 
-function UrlHyperlink(props) {
+function EntityHyperlink(props) {
   var editor = useContentfulEditor();
   var isReadOnly = Slate.useReadOnly();
   var sdk = useSdkContext();
-  var uri = props.element.data.uri;
+  var target = props.element.data.target;
+  var onEntityFetchComplete = props.onEntityFetchComplete;
+  var tooltipContent = useEntityInfo({
+    target: target,
+    sdk: sdk,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  if (!target) return null;
 
   function handleClick(event) {
     event.preventDefault();
@@ -3501,33 +3551,25 @@ function UrlHyperlink(props) {
   }
 
   return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
-    content: uri,
+    content: tooltipContent,
     targetWrapperClassName: styles$c.hyperlinkWrapper,
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/React.createElement(f36Components.TextLink, {
     as: "a",
-    href: uri,
-    rel: "noopener noreferrer",
     onClick: handleClick,
     isDisabled: isReadOnly,
-    className: styles$c.hyperlink
+    className: styles$c.hyperlink,
+    "data-link-type": target.sys.linkType,
+    "data-link-id": target.sys.id
   }, props.children));
 }
 
-function EntityHyperlink(props) {
+function UrlHyperlink(props) {
   var editor = useContentfulEditor();
   var isReadOnly = Slate.useReadOnly();
   var sdk = useSdkContext();
-  var target = props.element.data.target;
-  var onEntityFetchComplete = props.onEntityFetchComplete;
-  React.useEffect(function () {
-    // The real entity loading happens in the tooltip
-    // Since that is deferred the link is considered rendered as soon
-    // the component mounts (link text displayed)
-    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
-  }, [onEntityFetchComplete]);
-  if (!target) return null;
+  var uri = props.element.data.uri;
 
   function handleClick(event) {
     event.preventDefault();
@@ -3537,74 +3579,20 @@ function EntityHyperlink(props) {
   }
 
   return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
-    content: /*#__PURE__*/React.createElement(EntryAssetTooltip, {
-      id: target.sys.id,
-      type: target.sys.linkType,
-      sdk: sdk
-    }),
+    content: uri,
     targetWrapperClassName: styles$c.hyperlinkWrapper,
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/React.createElement(f36Components.TextLink, {
     as: "a",
+    href: uri,
+    rel: "noopener noreferrer",
     onClick: handleClick,
     isDisabled: isReadOnly,
-    className: styles$c.hyperlink,
-    "data-link-type": target.sys.linkType,
-    "data-link-id": target.sys.id
+    className: styles$c.hyperlink
   }, props.children));
 }
 
-function ToolbarHyperlinkButton(props) {
-  var editor = useContentfulEditor();
-  var isActive = !!(editor && isLinkActive(editor));
-  var sdk = useSdkContext();
-
-  function handleClick() {
-    return _handleClick.apply(this, arguments);
-  }
-
-  function _handleClick() {
-    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      return runtime_1.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (editor) {
-                _context.next = 2;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 2:
-              if (isActive) {
-                unwrapLink(editor);
-                editor.tracking.onToolbarAction('unlinkHyperlinks');
-              } else {
-                addOrEditLink(editor, sdk, editor.tracking.onToolbarAction);
-              }
-
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _handleClick.apply(this, arguments);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Hyperlink",
-    testId: "hyperlink-toolbar-button",
-    onClick: handleClick,
-    isActive: isActive,
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.LinkIcon, null));
-}
-
 var isAnchor = function isAnchor(element) {
   return element.nodeName === 'A' && !!element.getAttribute('href') && element.getAttribute('href') !== '#';
 };
@@ -3748,8 +3736,331 @@ function ListItem(props) {
   }), props.children);
 }
 
-var isList = function isList(node) {
-  return [Contentful.BLOCKS.OL_LIST, Contentful.BLOCKS.UL_LIST].includes(node.type);
+/**
+ * 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);
 };
 
 var hasListAsDirectParent = function hasListAsDirectParent(editor, _ref) {
@@ -4117,50 +4428,16 @@ var insertListFragment = function insertListFragment(editor) {
         select: true
       });
       return slate.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 = [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
-      }
-    }));
-  });
+        at: editor.selection,
+        select: true
+      });
+    }
+
+    var filtered = isListRoot(fragment[0]) ? [{
+      text: ''
+    }].concat(fragment) : fragment;
+    return insertFragment(filtered);
+  };
 };
 
 /**
@@ -4272,12 +4549,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] = {
@@ -4301,148 +4584,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();
@@ -6244,6 +6385,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({
@@ -6340,7 +6555,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;
@@ -6495,50 +6720,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.
  */
@@ -6552,8 +6733,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({
@@ -6563,45 +6746,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, {
@@ -6611,7 +6833,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: {
@@ -6635,6 +6856,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, {
@@ -6646,10 +6868,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,