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

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

@@ -14,11 +14,11 @@ var plateCore = require('@udecode/plate-core');
 var emotion = require('emotion');
 var deepEquals = _interopDefault(require('fast-deep-equal'));
 var noop = _interopDefault(require('lodash/noop'));
+var slate = require('slate');
 var constate = _interopDefault(require('constate'));
 var plateSerializerDocx = require('@udecode/plate-serializer-docx');
 var plateBreak = require('@udecode/plate-break');
 var isHotkey = _interopDefault(require('is-hotkey'));
-var slate = require('slate');
 var Slate = require('slate-react');
 var f36Components = require('@contentful/f36-components');
 var mimetype = _interopDefault(require('@contentful/mimetype'));
@@ -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 plateResetNode = require('@udecode/plate-reset-node');
 var plateBasicMarks = require('@udecode/plate-basic-marks');
 var isPlainObject = _interopDefault(require('is-plain-obj'));
 var plateParagraph = require('@udecode/plate-paragraph');
@@ -348,8 +349,8 @@ var schema = {
 function getContentfulEditorId(sdk) {
   var entry = sdk.entry,
       field = sdk.field;
-  var entryId = entry.getSys().id;
-  return "rich-text-editor-" + entryId + "-" + field.id + "-" + field.locale;
+  var sys = entry.getSys();
+  return "rich-text-editor-" + sys.id + "-" + field.id + "-" + field.locale;
 }
 
 function useContentfulEditorHook(_ref) {
@@ -490,6 +491,18 @@ function getParents(el) {
   return parents;
 }
 
+// "modern" Edge was released at 79.x
+var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent); // Native `beforeInput` events don't work well with react on Chrome 75
+// and older, Chrome 76+ can use `beforeInput` though.
+
+var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent); // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
+// Chrome Legacy doesn't support `beforeinput` correctly
+
+var HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
+typeof globalThis !== 'undefined' && globalThis.InputEvent && typeof globalThis.InputEvent.prototype.getTargetRanges === 'function'; // The `getTargetRanges` property isn't recognized.
+
+var IS_SAFARI = typeof navigator !== 'undefined' && /*#__PURE__*/ /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
+
 var LINK_TYPES = [Contentful.INLINES.HYPERLINK, Contentful.INLINES.ENTRY_HYPERLINK, Contentful.INLINES.ASSET_HYPERLINK];
 function isBlockSelected(editor, type) {
   var _Array$from = Array.from(slate.Editor.nodes(editor, {
@@ -707,16 +720,27 @@ var isInlineOrText = function isInlineOrText(node) {
   // either text or inline elements
   return slate.Text.isText(node) || slate.Element.isElement(node) && INLINE_TYPES.includes(node.type);
 };
+var focus = function focus(editor) {
+  var x = window.scrollX;
+  var y = window.scrollY;
+  Slate.ReactEditor.focus(editor); // Safari has issues with `editor.focus({ preventScroll: true })`, it ignores the option `preventScroll`
+
+  if (IS_SAFARI) {
+    setTimeout(function () {
+      window.scrollTo(x, y); // restore position
+    }, 0);
+  }
+};
 
-// "modern" Edge was released at 79.x
-var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent); // Native `beforeInput` events don't work well with react on Chrome 75
-// and older, Chrome 76+ can use `beforeInput` though.
-
-var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent); // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
-// Chrome Legacy doesn't support `beforeinput` correctly
-
-var HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
-typeof globalThis !== 'undefined' && globalThis.InputEvent && typeof globalThis.InputEvent.prototype.getTargetRanges === 'function'; // The `getTargetRanges` property isn't recognized.
+function withLinkTracking(tracking, Component) {
+  return function ComponentWithTracking(props) {
+    return /*#__PURE__*/React__default.createElement(Component, Object.assign({}, props, {
+      onEntityFetchComplete: function onEntityFetchComplete() {
+        tracking.onViewportAction('linkRendered');
+      }
+    }));
+  };
+}
 
 function useSdk(_ref) {
   var sdk = _ref.sdk;
@@ -854,10 +878,19 @@ function FetchingWrappedAssetCard(props) {
   var asset = assets[props.assetId];
   var defaultLocaleCode = props.sdk.locales["default"];
   var entityFile = asset != null && (_asset$fields = asset.fields) != null && _asset$fields.file ? asset.fields.file[props.locale] || asset.fields.file[defaultLocaleCode] : undefined;
+  var onEntityFetchComplete = props.onEntityFetchComplete;
   React.useEffect(function () {
     getOrLoadAsset(props.assetId);
   }, [props.assetId]); // eslint-disable-line
 
+  React.useEffect(function () {
+    if (!asset) {
+      return;
+    }
+
+    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+  }, [asset, onEntityFetchComplete]);
+
   function getAssetSrc() {
     if (!(entityFile != null && entityFile.url)) return '';
     return entityFile.url + "?h=300";
@@ -982,6 +1015,7 @@ function FetchingWrappedEntryCard(props) {
     });
   }, [props.sdk, entry]);
   var defaultLocaleCode = props.sdk.locales["default"];
+  var onEntityFetchComplete = props.onEntityFetchComplete;
   React.useEffect(function () {
     if (!entry || entry === 'failed') return;
     fieldEditorShared.entityHelpers.getEntryImage({
@@ -997,6 +1031,14 @@ function FetchingWrappedEntryCard(props) {
     getOrLoadEntry(props.entryId);
   }, [props.entryId]); // eslint-disable-line
 
+  React.useEffect(function () {
+    if (!entry) {
+      return;
+    }
+
+    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+  }, [entry, onEntityFetchComplete]);
+
   function renderDropdown() {
     if (!props.onEdit || !props.onRemove) return undefined;
     return [props.onEdit ? /*#__PURE__*/React.createElement(f36Components.MenuItem, {
@@ -1078,13 +1120,14 @@ function FetchingWrappedEntryCard(props) {
 
 var styles$3 = {
   root: /*#__PURE__*/emotion.css({
-    marginBottom: '1.25rem'
+    marginBottom: '1.25rem !important'
   })
 };
 function LinkedEntityBlock(props) {
   var attributes = props.attributes,
       children = props.children,
-      element = props.element;
+      element = props.element,
+      onEntityFetchComplete = props.onEntityFetchComplete;
   var isSelected = Slate.useSelected();
   var editor = useContentfulEditor();
   var sdk = useSdkContext();
@@ -1126,7 +1169,8 @@ function LinkedEntityBlock(props) {
     isDisabled: isDisabled,
     isSelected: isSelected,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick
+    onEdit: handleEditClick,
+    onEntityFetchComplete: onEntityFetchComplete
   }), entityType === 'Asset' && /*#__PURE__*/React__default.createElement(FetchingWrappedAssetCard, {
     sdk: sdk,
     assetId: entityId,
@@ -1134,7 +1178,8 @@ function LinkedEntityBlock(props) {
     isDisabled: isDisabled,
     isSelected: isSelected,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick
+    onEdit: handleEditClick,
+    onEntityFetchComplete: onEntityFetchComplete
   })), children);
 }
 
@@ -2038,7 +2083,7 @@ function insertBlock(editor, nodeType, entity) {
     slate.Transforms.setNodes(editor, linkedEntityBlock);
   }
 
-  Slate.ReactEditor.focus(editor);
+  focus(editor);
 }
 
 var styles$4 = {
@@ -2132,13 +2177,13 @@ function getWithEmbeddedEntityEvents(nodeType, sdk) {
 }
 
 var createEmbeddedEntityPlugin = function createEmbeddedEntityPlugin(nodeType, hotkey) {
-  return function (sdk) {
+  return function (sdk, tracking) {
     return {
       key: nodeType,
       type: nodeType,
       isElement: true,
       isVoid: true,
-      component: LinkedEntityBlock,
+      component: withLinkTracking(tracking, LinkedEntityBlock),
       options: {
         hotkey: hotkey
       },
@@ -2196,12 +2241,20 @@ function FetchingWrappedInlineEntryCard(props) {
     return entries[props.entryId];
   }, [entries, props.entryId]);
   var allContentTypes = props.sdk.space.getCachedContentTypes();
+  var onEntityFetchComplete = props.onEntityFetchComplete;
   var contentType = React__default.useMemo(function () {
     if (!entry || entry === 'failed' || !allContentTypes) return undefined;
     return allContentTypes.find(function (contentType) {
       return contentType.sys.id === entry.sys.contentType.sys.id;
     });
   }, [allContentTypes, entry]);
+  React__default.useEffect(function () {
+    if (!entry) {
+      return;
+    }
+
+    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+  }, [entry, onEntityFetchComplete]);
   var contentTypeName = contentType ? contentType.name : '';
   var title = React__default.useMemo(function () {
     return getEntryTitle({
@@ -2297,12 +2350,10 @@ var styles$6 = {
     marginRight: '10px'
   }),
   root: /*#__PURE__*/emotion.css({
-    margin: '0 1px',
+    display: 'inline-block',
+    margin: "0 " + tokens.spacing2Xs,
     fontSize: 'inherit',
     span: {
-      webkitUserSelect: 'none',
-      mozUserSelect: 'none',
-      msUserSelect: 'none',
       userSelect: 'none'
     }
   })
@@ -2345,7 +2396,8 @@ function EmbeddedEntityInline(props) {
     isSelected: isSelected,
     isDisabled: isDisabled,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick
+    onEdit: handleEditClick,
+    onEntityFetchComplete: props.onEntityFetchComplete
   })), props.children);
 }
 
@@ -2369,7 +2421,7 @@ function _selectEntityAndInsert$1() {
 
           case 4:
             entry = _context2.sent;
-            Slate.ReactEditor.focus(editor); // Dialog steals focus from editor, return it.
+            focus(editor); // Dialog steals focus from editor, return it.
 
             if (entry) {
               _context2.next = 8;
@@ -2455,7 +2507,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
     className: "rich-text__embedded-entry-list-icon " + styles$6.icon
   }), /*#__PURE__*/React.createElement("span", null, "Inline entry")));
 }
-function createEmbeddedEntityInlinePlugin(sdk) {
+function createEmbeddedEntityInlinePlugin(sdk, tracking) {
   var htmlAttributeName = 'data-embedded-entity-inline-id';
   return {
     key: Contentful.INLINES.EMBEDDED_ENTRY,
@@ -2463,7 +2515,7 @@ function createEmbeddedEntityInlinePlugin(sdk) {
     isElement: true,
     isInline: true,
     isVoid: true,
-    component: EmbeddedEntityInline,
+    component: withLinkTracking(tracking, EmbeddedEntityInline),
     options: {
       hotkey: 'mod+shift+2'
     },
@@ -2577,14 +2629,25 @@ function ToolbarHeadingButton(props) {
         unwrapFromRoot(editor);
       }
 
+      var prevOnChange = editor.onChange;
+      /*
+       The focus might happen at point in time when
+       `toggleNodeType` changes aren't rendered yet, causing the browser
+       to place the cursor at the start of the text.
+       We wait for the change event before focusing
+       the editor again. This ensures the cursor is back at the previous
+       position.*/
+
+      editor.onChange = function () {
+        focus(editor);
+        editor.onChange = prevOnChange;
+        prevOnChange.apply(void 0, arguments);
+      };
+
       plateCore.toggleNodeType(editor, {
         activeType: type,
         inactiveType: type
-      }); // TODO: Figure out why focus only works with timeout here.
-
-      setTimeout(function () {
-        Slate.ReactEditor.focus(editor);
-      }, 0);
+      });
     };
   }
 
@@ -2714,16 +2777,6 @@ var createHeadingPlugin = function createHeadingPlugin() {
         allow: Contentful.HEADINGS
       }
     }],
-    exitBreak: [// Pressing ENTER at the start or end of a heading text inserts a
-    // normal paragraph
-    {
-      hotkey: 'enter',
-      query: {
-        allow: Contentful.HEADINGS,
-        end: true,
-        start: true
-      }
-    }],
     normalizer: [{
       match: {
         type: Contentful.HEADINGS
@@ -2734,6 +2787,31 @@ var createHeadingPlugin = function createHeadingPlugin() {
       },
       transform: (_transform = {}, _transform[Contentful.BLOCKS.PARAGRAPH] = transformUnwrap, _transform["default"] = transformLift, _transform)
     }],
+    then: function then(editor) {
+      return {
+        exitBreak: [// Pressing ENTER at the start or end of a heading text inserts a
+        // normal paragraph.
+        {
+          hotkey: 'enter',
+          query: {
+            allow: Contentful.HEADINGS,
+            end: true,
+            start: true,
+            // Exclude headings inside lists as it interferes with the list's
+            // insertBreak implementation
+            filter: function filter(_ref2) {
+              var path = _ref2[1];
+              return !plateCore.getAbove(editor, {
+                at: path,
+                match: {
+                  type: Contentful.BLOCKS.LIST_ITEM
+                }
+              });
+            }
+          }
+        }]
+      };
+    },
     plugins: Contentful.HEADINGS.map(function (nodeType, idx) {
       var level = idx + 1;
       var tagName = "h" + level;
@@ -2856,7 +2934,7 @@ function ToolbarHrButton(props) {
     hasText ? slate.Transforms.insertNodes(editor, hr) : plateCore.setNodes(editor, hr); // Move focus to the next paragraph (added by TrailingParagraph plugin)
 
     moveToTheNextLine(editor);
-    Slate.ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -3348,7 +3426,7 @@ function _addOrEditLink() {
                 path: path
               });
             });
-            Slate.ReactEditor.focus(editor);
+            focus(editor);
 
           case 15:
           case "end":
@@ -3410,37 +3488,11 @@ function UrlHyperlink(props) {
   var sdk = useSdkContext();
   var uri = props.element.data.uri;
 
-  function handleClick(_x) {
-    return _handleClick.apply(this, arguments);
-  }
-
-  function _handleClick() {
-    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(event) {
-      return runtime_1.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              event.preventDefault();
-              event.stopPropagation();
-
-              if (editor) {
-                _context.next = 4;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 4:
-              addOrEditLink(editor, sdk);
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _handleClick.apply(this, arguments);
+  function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!editor) return;
+    addOrEditLink(editor, sdk);
   }
 
   return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
@@ -3463,39 +3515,20 @@ function EntityHyperlink(props) {
   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;
 
-  function handleClick(_x2) {
-    return _handleClick2.apply(this, arguments);
-  }
-
-  function _handleClick2() {
-    _handleClick2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(event) {
-      return runtime_1.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              event.preventDefault();
-              event.stopPropagation();
-
-              if (editor) {
-                _context2.next = 4;
-                break;
-              }
-
-              return _context2.abrupt("return");
-
-            case 4:
-              addOrEditLink(editor, sdk);
-
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-    return _handleClick2.apply(this, arguments);
+  function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!editor) return;
+    addOrEditLink(editor, sdk);
   }
 
   return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
@@ -3508,7 +3541,7 @@ function EntityHyperlink(props) {
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/React.createElement(f36Components.TextLink, {
-    as: "button",
+    as: "a",
     onClick: handleClick,
     isDisabled: isReadOnly,
     className: styles$c.hyperlink,
@@ -3523,21 +3556,21 @@ function ToolbarHyperlinkButton(props) {
   var sdk = useSdkContext();
 
   function handleClick() {
-    return _handleClick3.apply(this, arguments);
+    return _handleClick.apply(this, arguments);
   }
 
-  function _handleClick3() {
-    _handleClick3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
-      return runtime_1.wrap(function _callee3$(_context3) {
+  function _handleClick() {
+    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      return runtime_1.wrap(function _callee$(_context) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context.prev = _context.next) {
             case 0:
               if (editor) {
-                _context3.next = 2;
+                _context.next = 2;
                 break;
               }
 
-              return _context3.abrupt("return");
+              return _context.abrupt("return");
 
             case 2:
               if (isActive) {
@@ -3548,12 +3581,12 @@ function ToolbarHyperlinkButton(props) {
 
             case 3:
             case "end":
-              return _context3.stop();
+              return _context.stop();
           }
         }
-      }, _callee3);
+      }, _callee);
     }));
-    return _handleClick3.apply(this, arguments);
+    return _handleClick.apply(this, arguments);
   }
 
   if (!editor) return null;
@@ -3619,7 +3652,7 @@ var getNodeOfType = function getNodeOfType(type) {
   };
 };
 
-var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
+var createHyperlinkPlugin = function createHyperlinkPlugin(sdk, tracking) {
   var common = {
     isElement: true,
     isInline: true
@@ -3650,7 +3683,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
     _extends({}, common, {
       key: Contentful.INLINES.ENTRY_HYPERLINK,
       type: Contentful.INLINES.ENTRY_HYPERLINK,
-      component: EntityHyperlink,
+      component: withLinkTracking(tracking, EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -3664,7 +3697,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
     _extends({}, common, {
       key: Contentful.INLINES.ASSET_HYPERLINK,
       type: Contentful.INLINES.ASSET_HYPERLINK,
-      component: EntityHyperlink,
+      component: withLinkTracking(tracking, EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -3686,7 +3719,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
 };
 
 var _templateObject$4, _templateObject2$3, _templateObject3$3, _styles;
-var baseStyle = /*#__PURE__*/emotion.css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0 0 1.25rem 1.25rem;\n  div:first-child {\n    margin: 0;\n    line-height: ", ";\n  }\n"])), tokens.lineHeightDefault);
+var baseStyle = /*#__PURE__*/emotion.css(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0 0 1.25rem 1.25rem;\n\n  div:first-child {\n    margin: 0;\n    line-height: ", ";\n  }\n"])), tokens.lineHeightDefault);
 var styles$d = (_styles = {}, _styles[Contentful.BLOCKS.UL_LIST] = /*#__PURE__*/emotion.css(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    list-style-type: disc;\n    ul {\n      list-style-type: circle;\n      ul {\n        list-style-type: square;\n      }\n    }\n  "]))), _styles[Contentful.BLOCKS.OL_LIST] = /*#__PURE__*/emotion.css(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    list-style-type: decimal;\n    ol {\n      list-style-type: upper-alpha;\n      ol {\n        list-style-type: lower-roman;\n        ol {\n          list-style-type: lower-alpha;\n        }\n      }\n    }\n  "]))), _styles);
 
 function createList(Tag, block) {
@@ -3701,7 +3734,7 @@ var ListUL = /*#__PURE__*/createList('ul', Contentful.BLOCKS.UL_LIST);
 var ListOL = /*#__PURE__*/createList('ol', Contentful.BLOCKS.OL_LIST);
 
 var _templateObject$5;
-var style = /*#__PURE__*/emotion.css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  list-style: inherit;\n  ol,\n  ul {\n    margin: 0 0 0 ", ";\n  }\n"])), tokens.spacingL);
+var style = /*#__PURE__*/emotion.css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  list-style: inherit;\n  margin-top: ", ";\n\n  ol,\n  ul {\n    margin: 0 0 0 ", ";\n  }\n"])), tokens.spacingXs, tokens.spacingL);
 function ListItem(props) {
   return /*#__PURE__*/React.createElement("li", Object.assign({}, props.attributes, {
     className: style
@@ -3769,66 +3802,285 @@ var insertParagraphAsChild = function insertParagraphAsChild(editor, _ref5) {
 };
 
 /**
- * A copy of Plate's list plugin with a few adjustments
- * to support pasting any element
+ * Build a new list item node while preserving marks
  */
-var getListInsertFragment = function getListInsertFragment(editor) {
-  var insertFragment = editor.insertFragment;
-  var li = plateCore.getPlugin(editor, plateList.ELEMENT_LI);
-  var ul = plateCore.getPlugin(editor, plateList.ELEMENT_UL);
-  var ol = plateCore.getPlugin(editor, plateList.ELEMENT_OL);
 
-  var isListRoot = function isListRoot(node) {
-    return [ul.type, ol.type].includes(node.type);
+var emptyListItemNode = function emptyListItemNode(editor, withChildren) {
+  if (withChildren === void 0) {
+    withChildren = false;
+  }
+
+  var children = [];
+
+  if (withChildren) {
+    var marks = slate.Editor.marks(editor) || {};
+    children = [{
+      type: Contentful.BLOCKS.PARAGRAPH,
+      data: {},
+      children: [_extends({
+        text: ''
+      }, marks)]
+    }];
+  }
+
+  return {
+    type: Contentful.BLOCKS.LIST_ITEM,
+    data: {},
+    children: children
   };
+};
+/**
+ * Insert list item if selection is in li>p.
+ */
 
-  var getFirstAncestorOfType = function getFirstAncestorOfType(root, entry, _ref) {
-    var type = _ref.type;
-    var ancestor = slate.Path.parent(entry[1]);
 
-    while (slate.Node.get(root, ancestor).type !== type) {
-      ancestor = slate.Path.parent(ancestor);
+var insertListItem = function insertListItem(editor) {
+  if (!editor.selection) {
+    return false;
+  } // Naming it paragraph for simplicity but can be a heading as well
+
+
+  var paragraph = plateCore.getAbove(editor, {
+    match: {
+      type: Contentful.TEXT_CONTAINERS
     }
+  });
 
-    return [slate.Node.get(root, ancestor), ancestor];
-  };
+  if (!paragraph) {
+    return false;
+  }
+
+  var paragraphPath = paragraph[1];
+  var listItem = plateCore.getParent(editor, paragraphPath);
+
+  if (!listItem) {
+    return false;
+  }
+
+  var listItemNode = listItem[0],
+      listItemPath = listItem[1];
+
+  if (listItemNode.type !== Contentful.BLOCKS.LIST_ITEM) {
+    return false;
+  } // We are in a li>p (or heading)
+
+
+  slate.Editor.withoutNormalizing(editor, function () {
+    if (!editor.selection) {
+      return;
+    } // Check the cursor position in the current paragraph
+
+
+    var isAtStart = plateCore.isSelectionAtBlockStart(editor);
+    var isAtEnd = plateCore.isSelectionAtBlockEnd(editor);
+    var isAtStartOfListItem = isAtStart && plateCore.isFirstChild(paragraphPath);
+    var shouldSplit = !isAtStart && !isAtEnd; // Split the current paragraph content if necessary
+
+    if (shouldSplit) {
+      slate.Transforms.splitNodes(editor);
+    } // Insert the new li
+
+
+    var newListItemPath = isAtStartOfListItem ? listItemPath : slate.Path.next(listItemPath);
+    plateCore.insertNodes(editor, // Add an empty paragraph to the new li if We will not move some
+    // paragraphs over there.
+    emptyListItemNode(editor, !shouldSplit), {
+      at: newListItemPath
+    }); // Move children *after* selection to the new li
+
+    var fromPath = isAtStart ? paragraphPath : slate.Path.next(paragraphPath);
+    var fromStartIndex = fromPath[fromPath.length - 1] || 0; // On split we don't add paragraph to the new li so we move
+    // content to the very beginning. Otherwise, account for the empty
+    // paragraph at the beginning by moving the content after
+
+    var toPath = newListItemPath.concat([shouldSplit ? 0 : 1]);
+
+    if (!isAtStartOfListItem) {
+      plateCore.moveChildren(editor, {
+        at: listItemPath,
+        to: toPath,
+        fromStartIndex: fromStartIndex
+      });
+    } // Move cursor to the start of the new li
+
+
+    slate.Transforms.select(editor, newListItemPath);
+    slate.Transforms.collapse(editor, {
+      edge: 'start'
+    });
+  }); // Returning True skips processing other editor.insertBreak handlers
+
+  return true;
+};
+
+/**
+ * Credit: Copied & modified version from Plate's list plugin to support
+ * list items with multiple children.
+ *
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+
+var listBreak = function listBreak(editor) {
+  if (!editor.selection) return false;
+  var res = plateList.getListItemEntry(editor, {});
+  var moved; // If selection is in a li
+
+  if (res) {
+    var list = res.list,
+        listItem = res.listItem;
+    var childNode = listItem[0].children[0]; // If selected li is empty, move it up.
+
+    if (plateCore.isBlockAboveEmpty(editor) && listItem[0].children.length === 1 && Contentful.TEXT_CONTAINERS.includes(childNode.type)) {
+      moved = plateList.moveListItemUp(editor, {
+        list: list,
+        listItem: listItem
+      });
+      if (moved) return true;
+    }
+  }
+
+  var didReset = plateResetNode.onKeyDownResetNode(editor, plateCore.mockPlugin({
+    options: {
+      rules: [{
+        types: [plateCore.getPluginType(editor, plateList.ELEMENT_LI)],
+        defaultType: plateCore.getPluginType(editor, plateCore.ELEMENT_DEFAULT),
+        predicate: function predicate() {
+          return !moved && plateCore.isBlockAboveEmpty(editor);
+        },
+        onReset: function onReset(_editor) {
+          return plateList.unwrapList(_editor);
+        }
+      }]
+    }
+  }))(plateResetNode.SIMULATE_BACKSPACE);
+
+  if (didReset) {
+    return true;
+  }
   /**
-   * Removes the "empty" leading lis. Empty in this context means lis only with other lis as children.
-   *
-   * @returns If argument is not a list root, returns it, otherwise returns ul[] or li[].
+   * If selection is in li > p, insert li.
    */
 
 
-  var trimList = function trimList(listRoot) {
-    if (!isListRoot(listRoot)) {
-      return [listRoot];
-    }
+  if (!moved) {
+    var inserted = insertListItem(editor);
+    if (inserted) return true;
+  }
+
+  return false;
+};
 
-    var textEntries = Array.from(slate.Node.texts(listRoot));
-    var commonAncestorEntry = textEntries.reduce(function (commonAncestor, textEntry) {
-      return slate.Path.isAncestor(commonAncestor[1], textEntry[1]) ? commonAncestor : slate.Node.common(listRoot, textEntry[1], commonAncestor[1]);
-    }, // any list item would do, we grab the first one
-    getFirstAncestorOfType(listRoot, textEntries[0], li));
-    return isListRoot(commonAncestorEntry[0]) ? commonAncestorEntry[0].children : [commonAncestorEntry[0]];
+var insertListBreak = function insertListBreak(editor) {
+  var insertBreak = editor.insertBreak;
+  return function () {
+    if (listBreak(editor)) return;
+    insertBreak();
   };
+};
+
+/**
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+
+var getFirstAncestorOfType = function getFirstAncestorOfType(root, entry) {
+  var ancestor = slate.Path.parent(entry[1]);
+
+  while (slate.Node.get(root, ancestor).type !== Contentful.BLOCKS.LIST_ITEM) {
+    ancestor = slate.Path.parent(ancestor);
+  }
+
+  return [slate.Node.get(root, ancestor), ancestor];
+};
+
+var isListRoot = function isListRoot(node) {
+  return [Contentful.BLOCKS.UL_LIST, Contentful.BLOCKS.OL_LIST].includes(node.type);
+};
+/**
+ * Removes the "empty" leading lis. Empty in this context means lis only with other lis as children.
+ *
+ * @returns If argument is not a list root, returns it, otherwise returns ul[] or li[].
+ */
+
+
+var trimList = function trimList(listRoot) {
+  if (!isListRoot(listRoot)) {
+    return [listRoot];
+  }
+
+  var textEntries = Array.from(slate.Node.texts(listRoot));
+  var commonAncestorEntry = textEntries.reduce(function (commonAncestor, textEntry) {
+    return slate.Path.isAncestor(commonAncestor[1], textEntry[1]) ? commonAncestor : slate.Node.common(listRoot, textEntry[1], commonAncestor[1]);
+  }, // any list item would do, we grab the first one
+  getFirstAncestorOfType(listRoot, textEntries[0]));
+  return isListRoot(commonAncestorEntry[0]) ? commonAncestorEntry[0].children : [commonAncestorEntry[0]];
+};
+/**
+ * Removes leading li when pasting a single li with a single child.
+ */
+
+
+var trimLiWrapper = function trimLiWrapper(nodes) {
+  if (nodes.length !== 1) {
+    return nodes;
+  }
+
+  var node = nodes[0];
+
+  if (node.type !== Contentful.BLOCKS.LIST_ITEM || node.children.length !== 1) {
+    return nodes;
+  }
 
+  return node.children;
+};
+
+var unwrapTextContainerAtStart = function unwrapTextContainerAtStart(nodes) {
+  var node = nodes[0];
+
+  if (Contentful.TEXT_CONTAINERS.includes(node.type)) {
+    return [].concat(node.children, nodes.slice(1));
+  }
+
+  return nodes;
+};
+
+var insertListFragment = function insertListFragment(editor) {
+  var insertFragment = editor.insertFragment;
   return function (fragment) {
+    if (!editor.selection) {
+      return;
+    }
+
     var liEntry = plateCore.findNode(editor, {
       match: {
-        type: li.type
+        type: Contentful.BLOCKS.LIST_ITEM
       },
       mode: 'lowest'
     });
 
     if (liEntry) {
-      var liPath = liEntry[1]; // FIXME: this is a temporarily workaround and needs a follow-up to properly
-      // non-text elements
-
-      var nodes = fragment.flatMap(function (node) {
+      var nodes = unwrapTextContainerAtStart(trimLiWrapper(fragment.flatMap(function (node) {
         return trimList(node);
+      })));
+      var firstBlockIndex = nodes.findIndex(function (node) {
+        return slate.Editor.isBlock(editor, node);
+      });
+
+      if (firstBlockIndex < 0) {
+        firstBlockIndex = nodes.length;
+      }
+
+      var inlines = nodes.slice(0, firstBlockIndex);
+      var blocks = nodes.slice(firstBlockIndex); // Two calls to insertNodes are required here. Otherwise, all blocks
+      // after a text or inline element occurrence will be unwrapped for
+      // some reason.
+
+      slate.Transforms.insertNodes(editor, inlines, {
+        at: editor.selection,
+        select: true
       });
-      return slate.Transforms.insertNodes(editor, nodes, {
-        at: editor.selection || slate.Path.next(liPath),
+      return slate.Transforms.insertNodes(editor, blocks, {
+        at: editor.selection,
         select: true
       });
     }
@@ -3840,18 +4092,37 @@ var getListInsertFragment = function getListInsertFragment(editor) {
   };
 };
 
-var options = {
-  validLiChildrenTypes: Contentful.LIST_ITEM_BLOCKS
-};
-var withList = function withList(editor, plugin) {
-  var insertFragment = editor.insertFragment;
-  plateList.withList(editor, _extends({}, plugin, {
-    options: options
-  })); // Reverts any overrides to insertFragment
+/**
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+var validLiChildrenTypes = Contentful.LIST_ITEM_BLOCKS;
+var withList = function withList(editor) {
+  var deleteBackward = editor.deleteBackward,
+      deleteForward = editor.deleteForward,
+      deleteFragment = editor.deleteFragment;
+
+  editor.deleteBackward = function (unit) {
+    if (plateList.deleteBackwardList(editor, unit)) return;
+    deleteBackward(unit);
+  };
 
-  editor.insertFragment = insertFragment; // Use our custom getListInsertFragment
+  editor.deleteForward = function (unit) {
+    if (plateList.deleteForwardList(editor)) return;
+    deleteForward(unit);
+  };
+
+  editor.deleteFragment = function () {
+    if (plateList.deleteFragmentList(editor)) return;
+    deleteFragment();
+  };
 
-  editor.insertFragment = getListInsertFragment(editor);
+  editor.insertBreak = insertListBreak(editor);
+  editor.insertFragment = insertListFragment(editor); // TODO: replace with Normalizer rules
+
+  editor.normalizeNode = plateList.normalizeList(editor, {
+    validLiChildrenTypes: validLiChildrenTypes
+  });
   return editor;
 };
 
@@ -3909,7 +4180,7 @@ function ToolbarListButton(props) {
       plateList.toggleList(editor, {
         type: type
       });
-      Slate.ReactEditor.focus(editor);
+      focus(editor);
     };
   }
 
@@ -3937,7 +4208,7 @@ function ToolbarBoldButton(props) {
     plateCore.toggleMark(editor, {
       key: Contentful.MARKS.BOLD
     });
-    Slate.ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -3996,7 +4267,7 @@ function ToolbarCodeButton(props) {
     plateCore.toggleMark(editor, {
       key: Contentful.MARKS.CODE
     });
-    Slate.ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -4046,7 +4317,7 @@ function ToolbarItalicButton(props) {
     plateCore.toggleMark(editor, {
       key: Contentful.MARKS.ITALIC
     });
-    Slate.ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -4100,7 +4371,7 @@ function ToolbarUnderlineButton(props) {
     plateCore.toggleMark(editor, {
       key: Contentful.MARKS.UNDERLINE
     });
-    Slate.ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -4521,6 +4792,38 @@ function Quote(props) {
   }), props.children);
 }
 
+function toggleQuote(editor) {
+  if (!editor.selection) return;
+  var isActive = isBlockSelected(editor, Contentful.BLOCKS.QUOTE);
+  slate.Editor.withoutNormalizing(editor, function () {
+    slate.Transforms.unwrapNodes(editor, {
+      match: function match(node) {
+        return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.QUOTE;
+      },
+      split: true
+    });
+
+    if (!isActive) {
+      var quote = {
+        type: Contentful.BLOCKS.QUOTE,
+        data: {},
+        children: []
+      };
+      slate.Transforms.wrapNodes(editor, quote);
+    }
+  });
+}
+var onKeyDownToggleQuote = function onKeyDownToggleQuote(editor, plugin) {
+  return function (event) {
+    var hotkey = plugin.options.hotkey;
+
+    if (hotkey && isHotkey(hotkey, event)) {
+      event.preventDefault();
+      toggleQuote(editor);
+    }
+  };
+};
+
 function createQuotePlugin() {
   var _transform;
 
@@ -4533,7 +4836,7 @@ function createQuotePlugin() {
       hotkey: 'mod+shift+1'
     },
     handlers: {
-      onKeyDown: plateCore.onKeyDownToggleElement
+      onKeyDown: onKeyDownToggleQuote
     },
     deserializeHtml: {
       rules: [{
@@ -4547,38 +4850,13 @@ function createQuotePlugin() {
   };
 }
 
-function toggleQuote(editor) {
-  if (!editor.selection) return;
-  var isActive = isBlockSelected(editor, Contentful.BLOCKS.QUOTE);
-  slate.Editor.withoutNormalizing(editor, function () {
-    slate.Transforms.unwrapNodes(editor, {
-      match: function match(node) {
-        return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.QUOTE;
-      },
-      split: true
-    });
-    slate.Transforms.setNodes(editor, {
-      type: isActive ? Contentful.BLOCKS.PARAGRAPH : Contentful.BLOCKS.QUOTE
-    });
-
-    if (!isActive) {
-      var quote = {
-        type: Contentful.BLOCKS.QUOTE,
-        data: {},
-        children: []
-      };
-      slate.Transforms.wrapNodes(editor, quote);
-    }
-  });
-}
-
 function ToolbarQuoteButton(props) {
   var editor = useContentfulEditor();
 
   function handleOnClick() {
     if (!editor) return;
     toggleQuote(editor);
-    Slate.ReactEditor.focus(editor);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -4934,11 +5212,7 @@ var TableActions = function TableActions() {
 
   var close = React__default.useCallback(function () {
     setOpen(false);
-    if (!editor) return; // Makes sure we keep the editor in focus when clicking on/out
-    // the dropdown menu
-
-    Slate.ReactEditor.focus(editor);
-  }, [editor]);
+  }, []);
   React__default.useEffect(function () {
     setHeaderEnabled(Boolean(editor && isTableHeaderEnabled(editor)));
   }, [editor]);
@@ -5207,7 +5481,7 @@ function ToolbarTableButton(props) {
             case 2:
               onViewportAction('insertTable');
               insertTableAndFocusFirstCell(editor);
-              Slate.ReactEditor.focus(editor);
+              focus(editor);
 
             case 5:
             case "end":
@@ -5234,22 +5508,52 @@ function createTextPlugin() {
   return {
     key: 'TextPlugin',
     withOverrides: function withOverrides(editor) {
-      var deleteForward = editor.deleteForward; // When pressing delete instead of backspace
+      // Reverts the change made upstream that caused the cursor
+      // to be trapped inside inline elements.
+      //
+      // Reverts https://github.com/ianstormtaylor/slate/pull/4578/
+      // Related https://github.com/ianstormtaylor/slate/issues/4704
+      var insertText = editor.insertText;
+
+      editor.insertText = function (text) {
+        var selection = editor.selection; // If the cursor is at the end of an inline, move it outside
+        // before inserting
+
+        if (selection && slate.Range.isCollapsed(selection)) {
+          var _Editor$above;
+
+          var inlinePath = (_Editor$above = slate.Editor.above(editor, {
+            match: function match(n) {
+              return slate.Editor.isInline(editor, n);
+            },
+            mode: 'highest'
+          })) == null ? void 0 : _Editor$above[1];
+
+          if (inlinePath && slate.Editor.isEnd(editor, selection.anchor, inlinePath)) {
+            var point = slate.Editor.after(editor, inlinePath);
+            slate.Transforms.setSelection(editor, {
+              anchor: point,
+              focus: point
+            });
+          }
+        }
 
-      editor.deleteForward = function (unit) {
-        var _editor$selection;
+        return insertText(text);
+      }; // When pressing delete instead of backspace
 
-        var _Editor$nodes = slate.Editor.nodes(editor, {
-          at: (_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.path,
-          match: function match(node) {
-            return Contentful.TEXT_CONTAINERS.includes(node.type);
+
+      var deleteForward = editor.deleteForward;
+
+      editor.deleteForward = function (unit) {
+        var entry = plateCore.getAbove(editor, {
+          match: {
+            type: Contentful.TEXT_CONTAINERS
           }
-        }),
-            nodes = _Editor$nodes[0];
+        });
 
-        if (nodes) {
-          var paragraphOrHeading = nodes[0],
-              path = nodes[1];
+        if (entry) {
+          var paragraphOrHeading = entry[0],
+              path = entry[1];
           var isTextEmpty = plateCore.isAncestorEmpty(editor, paragraphOrHeading); // We ignore paragraphs/headings that are children of ul, ol, blockquote, tables, etc
 
           var isRootLevel = path.length === 1;
@@ -5306,8 +5610,9 @@ var transformVoid = function transformVoid(editor, _ref) {
 var createVoidsPlugin = function createVoidsPlugin() {
   return {
     key: 'VoidsPlugin',
-    exitBreak: [// Can insert before first void block
-    {
+    exitBreak: [{
+      // Inserts a new paragraph *before* a void element if it's the very first
+      // node on the editor
       hotkey: 'enter',
       before: true,
       query: {
@@ -5317,14 +5622,17 @@ var createVoidsPlugin = function createVoidsPlugin() {
           return isRootLevel(path) && plateCore.isFirstChild(path) && !!node.isVoid;
         }
       }
-    }, // Can insert after a void block
-    {
+    }, {
+      // Inserts a new paragraph on enter when a void element is focused
       hotkey: 'enter',
+      // exploit the internal use of Array.slice(0, level + 1) by the exitBreak plugin
+      // to stay in the parent element
+      level: -2,
       query: {
         filter: function filter(_ref2) {
           var node = _ref2[0],
               path = _ref2[1];
-          return !plateCore.isFirstChild(path) && !!node.isVoid;
+          return !(isRootLevel(path) && plateCore.isFirstChild(path)) && !!node.isVoid;
         }
       }
     }],
@@ -5353,8 +5661,8 @@ var getPlugins = function getPlugins(sdk, tracking) {
   return [// AST must come after the HTML deserializer
   plateCore.createDeserializeHtmlPlugin(), plateCore.createDeserializeAstPlugin(), plateSerializerDocx.createDeserializeDocxPlugin(), // Global shortcuts
   createDragAndDropPlugin(), // Block Elements
-  createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
-  createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
+  createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk, tracking), createEmbeddedAssetBlockPlugin(sdk, tracking), // Inline elements
+  createHyperlinkPlugin(sdk, tracking), createEmbeddedEntityInlinePlugin(sdk, tracking), // Marks
   createMarksPlugin(), // Other
   createTrailingParagraphPlugin(), createTextPlugin(), createVoidsPlugin(), createSelectOnBackspacePlugin(), // Pasting content from other sources
   createPasteHTMLPlugin(), // These plugins drive their configurations from the list of plugins
@@ -5625,13 +5933,9 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
 var _excluded = ["sdk", "isInitiallyDisabled", "onAction"];
 var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
   var tracking = useTrackingContext();
-  var docFromAdapter = contentfulSlatejsAdapter.toSlatejsDocument({
-    document: props.value || Contentful.EMPTY_DOCUMENT,
-    schema: schema
-  });
-  var doc = sanitizeIncomingSlateDoc(docFromAdapter);
+  var editor = useContentfulEditor();
 
-  var _useState = React.useState(doc),
+  var _useState = React.useState([]),
       value = _useState[0],
       setValue = _useState[1];
 
@@ -5641,12 +5945,33 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
   var plugins = React__default.useMemo(function () {
     return getPlugins(props.sdk, tracking);
   }, [props.sdk, tracking]);
+  React__default.useEffect(function () {
+    if (!editor) {
+      return;
+    }
+
+    var docFromAdapter = contentfulSlatejsAdapter.toSlatejsDocument({
+      document: props.value || Contentful.EMPTY_DOCUMENT,
+      schema: schema
+    });
+    var doc = sanitizeIncomingSlateDoc(docFromAdapter); // Slate throws an error if the value on the initial render is invalid
+    // so we directly set the value on the editor in order
+    // to be able to trigger normalization on the initial value before rendering
+    // TODO: use https://plate.udecode.io/docs/Plate#normalizeinitialvalue when working
+
+    editor.children = doc;
+    slate.Editor.normalize(editor, {
+      force: true
+    }); // We set the value so that the rendering can take over from here
+
+    setValue(editor.children);
+  }, [props.value, editor]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: styles$j.root,
     "data-test-id": "rich-text-editor"
   }, /*#__PURE__*/React__default.createElement(plateCore.Plate, {
     id: getContentfulEditorId(props.sdk),
-    initialValue: value,
+    value: value,
     plugins: plugins,
     disableCorePlugins: disableCorePlugins,
     editableProps: {