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

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

@@ -6,7 +6,6 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var contentfulSlatejsAdapter = require('@contentful/contentful-slatejs-adapter');
 var fieldEditorReference = require('@contentful/field-editor-reference');
 var fieldEditorShared = require('@contentful/field-editor-shared');
 var Contentful = require('@contentful/rich-text-types');
@@ -14,12 +13,13 @@ var plateCore = require('@udecode/plate-core');
 var emotion = require('emotion');
 var deepEquals = _interopDefault(require('fast-deep-equal'));
 var noop = _interopDefault(require('lodash/noop'));
-var constate = _interopDefault(require('constate'));
 var plateSerializerDocx = require('@udecode/plate-serializer-docx');
 var plateBreak = require('@udecode/plate-break');
+var plateResetNode = require('@udecode/plate-reset-node');
 var isHotkey = _interopDefault(require('is-hotkey'));
 var slate = require('slate');
 var Slate = require('slate-react');
+var constate = _interopDefault(require('constate'));
 var f36Components = require('@contentful/f36-components');
 var mimetype = _interopDefault(require('@contentful/mimetype'));
 var get = _interopDefault(require('lodash/get'));
@@ -28,12 +28,16 @@ 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');
 var plateSelect = require('@udecode/plate-select');
 var plateTable = require('@udecode/plate-table');
+var contentfulSlateJSAdapter = require('@contentful/contentful-slatejs-adapter');
+var richTextPlainTextRenderer = require('@contentful/rich-text-plain-text-renderer');
 var plateTrailingBlock = require('@udecode/plate-trailing-block');
+var debounce = _interopDefault(require('lodash/debounce'));
 var PropTypes = _interopDefault(require('prop-types'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -243,159 +247,39 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var _extends2, _extends4, _inlines;
-var inlines = /*#__PURE__*/Object.values(Contentful.INLINES).map(function (type) {
-  return {
-    type: type
-  };
-});
-var schema = {
-  document: {
-    nodes: [{
-      types: /*#__PURE__*/Contentful.TOP_LEVEL_BLOCKS.map(function (type) {
-        return {
-          type: type
-        };
-      })
-    }]
-  },
-  blocks: /*#__PURE__*/_extends((_extends2 = {}, _extends2[Contentful.BLOCKS.PARAGRAPH] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_1] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_2] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_3] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_4] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_5] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_6] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2), /*#__PURE__*/Contentful.VOID_BLOCKS.reduce(function (blocks, nodeType) {
-    var _extends3;
-
-    return _extends({}, blocks, (_extends3 = {}, _extends3[nodeType] = {
-      isVoid: true
-    }, _extends3));
-  }, {}), (_extends4 = {}, _extends4[Contentful.BLOCKS.QUOTE] = {
-    nodes: [{
-      match: [/*#__PURE__*/Contentful.CONTAINERS[Contentful.BLOCKS.QUOTE].map(function (type) {
-        return {
-          type: type
-        };
-      })],
-      min: 1
-    }],
-    normalize: function normalize(editor, error) {
-      if (error.code === 'child_type_invalid') {
-        return editor.unwrapBlockByKey(error.node.key, Contentful.BLOCKS.QUOTE);
-      }
-    }
-  }, _extends4)),
-  inlines: (_inlines = {}, _inlines[Contentful.INLINES.HYPERLINK] = {
-    nodes: [{
-      match: [{
-        object: 'text'
-      }]
-    }]
-  }, _inlines[Contentful.INLINES.ENTRY_HYPERLINK] = {
-    nodes: [{
-      match: [{
-        object: 'text'
-      }]
-    }]
-  }, _inlines[Contentful.INLINES.ASSET_HYPERLINK] = {
-    nodes: [{
-      match: [{
-        object: 'text'
-      }]
-    }]
-  }, _inlines[Contentful.INLINES.EMBEDDED_ENTRY] = {
-    isVoid: true
-  }, _inlines)
-};
-
 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;
 }
+var editorContext = /*#__PURE__*/React.createContext('');
+var ContentfulEditorIdProvider = editorContext.Provider;
+function useContentfulEditorId(id) {
+  var contextId = React.useContext(editorContext);
 
-function useContentfulEditorHook(_ref) {
-  var sdk = _ref.sdk;
-  var editorId = getContentfulEditorId(sdk);
-  var editor = plateCore.usePlateEditorRef(editorId);
-  return editor;
-}
-
-var _constate = /*#__PURE__*/constate(useContentfulEditorHook),
-    ContentfulEditorProvider = _constate[0],
-    useContentfulEditor = _constate[1];
-
-var isTextElement = function isTextElement(node) {
-  return 'text' in node;
-};
-/**
- * Ensures incoming void nodes have a child leaf text element.
- */
-
-
-function sanitizeIncomingSlateDoc(nodes) {
-  if (nodes === void 0) {
-    nodes = [];
+  if (id) {
+    return id;
   }
 
-  return nodes.map(function (node) {
-    var _node$children;
+  if (!contextId) {
+    throw new Error('could not find editor id. Please ensure the component is wrapped in <ContentfulEditorIdProvider> ');
+  }
 
-    if (isTextElement(node)) {
-      return node;
-    }
+  return contextId;
+} // This hook re-renders when the value changes
+// Use case: Toolbar icons, for example
 
-    if (node.isVoid && ((_node$children = node.children) == null ? void 0 : _node$children.length) === 0) {
-      return _extends({}, node, {
-        children: [{
-          text: '',
-          data: {}
-        }]
-      });
-    }
+function useContentfulEditor(id) {
+  var editorId = useContentfulEditorId(id);
+  var editor = plateCore.usePlateEditorState(editorId);
+  return editor;
+} // This doesn't re-render when the value changes
 
-    return _extends({}, node, {
-      children: sanitizeIncomingSlateDoc(node.children)
-    });
-  });
+function useContentfulEditorRef(id) {
+  var editorId = useContentfulEditorId(id);
+  var editor = plateCore.usePlateEditorRef(editorId);
+  return editor;
 }
 
 var createSoftBreakPlugin = function createSoftBreakPlugin() {
@@ -431,6 +315,33 @@ var createExitBreakPlugin = function createExitBreakPlugin() {
   });
 };
 
+var createResetNodePlugin = function createResetNodePlugin() {
+  return plateResetNode.createResetNodePlugin({
+    options: {
+      rules: []
+    },
+    then: function then(editor) {
+      var rules = editor.plugins.flatMap(function (p) {
+        return p.resetNode || [];
+      }); // set defaultType to Paragraph if not set
+
+      for (var _iterator = _createForOfIteratorHelperLoose(rules), _step; !(_step = _iterator()).done;) {
+        var rule = _step.value;
+
+        if (!rule.defaultType) {
+          rule.defaultType = Contentful.BLOCKS.PARAGRAPH;
+        }
+      }
+
+      return {
+        options: {
+          rules: rules
+        }
+      };
+    }
+  });
+};
+
 function createDragAndDropPlugin() {
   var DRAGGABLE_TYPES = [Contentful.BLOCKS.EMBEDDED_ENTRY, Contentful.BLOCKS.EMBEDDED_ASSET, Contentful.BLOCKS.HR, Contentful.INLINES.EMBEDDED_ENTRY];
   /**
@@ -490,6 +401,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, {
@@ -504,10 +427,12 @@ function isBlockSelected(editor, type) {
 function isRootLevel(path) {
   return path.length === 1;
 }
-function getNodeEntryFromSelection(editor, nodeTypeOrTypes) {
-  if (!editor.selection) return [];
+function getNodeEntryFromSelection(editor, nodeTypeOrTypes, path) {
+  var _path, _editor$selection;
+
+  path = (_path = path) != null ? _path : (_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.path;
+  if (!path) return [];
   var nodeTypes = Array.isArray(nodeTypeOrTypes) ? nodeTypeOrTypes : [nodeTypeOrTypes];
-  var path = editor.selection.focus.path;
 
   for (var i = 0; i < path.length; i++) {
     var nodeEntry = slate.Editor.node(editor, path.slice(0, i + 1));
@@ -530,10 +455,32 @@ function moveToTheNextLine(editor) {
     unit: 'line'
   });
 }
+function moveToTheNextChar(editor) {
+  slate.Transforms.move(editor, {
+    distance: 1,
+    unit: 'offset'
+  });
+}
+function insertEmptyParagraph(editor, options) {
+  var emptyParagraph = {
+    type: Contentful.BLOCKS.PARAGRAPH,
+    children: [{
+      text: ''
+    }],
+    data: {},
+    isVoid: false
+  };
+  slate.Transforms.insertNodes(editor, emptyParagraph, options);
+}
 function getElementFromCurrentSelection(editor) {
   if (!editor.selection) return [];
   return Array.from(slate.Editor.nodes(editor, {
-    at: editor.selection.focus,
+    /**
+     * editor.select is a Range, which includes anchor and focus, the beginning and the end of a selection
+     * when using only editor.selection.focus, we might get only the end of the selection, or where the text cursor is
+     * and in some cases getting the next element instead of the one we want
+     **/
+    at: editor.selection,
     match: function match(node) {
       return slate.Element.isElement(node);
     }
@@ -560,6 +507,10 @@ function insertLink(editor, options) {
 } // TODO: move to hyperlink plugin
 
 function isLinkActive(editor) {
+  if (!editor) {
+    return false;
+  }
+
   var _Array$from2 = Array.from(slate.Editor.nodes(editor, {
     match: function match(node) {
       return !slate.Editor.isEditor(node) && slate.Element.isElement(node) && LINK_TYPES.includes(node.type);
@@ -639,84 +590,41 @@ function getAncestorPathFromSelection(editor) {
     return level.length === 1;
   });
 }
-function shouldUnwrapBlockquote(editor, type) {
-  var isQuoteSelected = isBlockSelected(editor, Contentful.BLOCKS.QUOTE);
-  var isValidType = [].concat(Contentful.HEADINGS, [Contentful.BLOCKS.OL_LIST, Contentful.BLOCKS.UL_LIST, Contentful.BLOCKS.HR]).includes(type);
-  return isQuoteSelected && isValidType;
-}
-function unwrapFromRoot(editor) {
-  var ancestorPath = getAncestorPathFromSelection(editor);
-  slate.Transforms.unwrapNodes(editor, {
-    at: ancestorPath
-  });
-}
-var isAtEndOfTextSelection = function isAtEndOfTextSelection(editor) {
-  var _editor$selection, _editor$selection2;
-
-  return ((_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.offset) === plateCore.getText(editor, (_editor$selection2 = editor.selection) == null ? void 0 : _editor$selection2.focus.path).length;
-};
-function currentSelectionStartsTableCell(editor) {
-  var _editor$selection3;
-
-  var _getNodeEntryFromSele2 = getNodeEntryFromSelection(editor, [Contentful.BLOCKS.TABLE_CELL, Contentful.BLOCKS.TABLE_HEADER_CELL]),
-      tableCellNode = _getNodeEntryFromSele2[0],
-      path = _getNodeEntryFromSele2[1];
-
-  return !!tableCellNode && (!plateCore.getText(editor, path) || ((_editor$selection3 = editor.selection) == null ? void 0 : _editor$selection3.focus.offset) === 0);
-}
-/**
- * This traversal strategy is unfortunately necessary because Slate doesn't
- * expose something like Node.next(editor).
- */
-
-function getNextNode(editor) {
-  if (!editor.selection) {
-    return null;
-  }
-
-  var descendants = slate.Node.descendants(editor, {
-    from: editor.selection.focus.path
-  }); // eslint-disable-next-line no-constant-condition
-
-  while (true) {
-    var _descendants$next = descendants.next(),
-        done = _descendants$next.done,
-        value = _descendants$next.value;
-
-    if (done) {
-      return null;
-    }
-
-    var node = value[0],
-        path = value[1];
-
-    if (slate.Path.isCommon(path, editor.selection.focus.path)) {
-      continue;
-    }
-
-    return node;
-  }
-} // TODO: move to table plugin
-
-function currentSelectionPrecedesTableCell(editor) {
-  var nextNode = getNextNode(editor);
-  return !!nextNode && Contentful.TABLE_BLOCKS.includes(nextNode.type) && isAtEndOfTextSelection(editor);
-}
 var INLINE_TYPES = /*#__PURE__*/Object.values(Contentful.INLINES);
 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);
+  }
+};
+function toggleElement(editor, options, editorOptions) {
+  plateCore.toggleNodeType(editor, options, editorOptions); // We must reset `data` from one element to another
 
-// "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
+  slate.Transforms.setNodes(editor, {
+    data: {}
+  });
+}
 
-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(Component) {
+  return function ComponentWithTracking(props) {
+    var editor = useContentfulEditorRef();
+    var onEntityFetchComplete = React__default.useCallback(function () {
+      return editor.tracking.onViewportAction('linkRendered');
+    }, [editor]);
+    return /*#__PURE__*/React__default.createElement(Component, Object.assign({}, props, {
+      onEntityFetchComplete: onEntityFetchComplete
+    }));
+  };
+}
 
 function useSdk(_ref) {
   var sdk = _ref.sdk;
@@ -727,9 +635,9 @@ function useSdk(_ref) {
   return sdkMemo;
 }
 
-var _constate$1 = /*#__PURE__*/constate(useSdk),
-    SdkProvider = _constate$1[0],
-    useSdkContext = _constate$1[1];
+var _constate = /*#__PURE__*/constate(useSdk),
+    SdkProvider = _constate[0],
+    useSdkContext = _constate[1];
 
 var styles = {
   scheduleIcon: /*#__PURE__*/emotion.css({
@@ -824,7 +732,6 @@ function renderActions(props) {
     key: "section-title"
   }, "Actions"), onEdit ? /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
     key: "edit",
-    disabled: isDisabled,
     onClick: onEdit,
     testId: "card-action-edit"
   }, "Edit") : null, entityFile ? /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
@@ -854,10 +761,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,26 +898,42 @@ function FetchingWrappedEntryCard(props) {
     });
   }, [props.sdk, entry]);
   var defaultLocaleCode = props.sdk.locales["default"];
+  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);
   }, [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, {
       key: "edit",
-      disabled: props.isDisabled,
       testId: "card-action-edit",
       onClick: function onClick() {
         props.onEdit && props.onEdit();
@@ -1078,13 +1010,22 @@ function FetchingWrappedEntryCard(props) {
 
 var styles$3 = {
   root: /*#__PURE__*/emotion.css({
-    marginBottom: '1.25rem'
+    marginBottom: '1.25rem !important',
+    display: 'block'
+  }),
+  container: /*#__PURE__*/emotion.css({
+    // The next 2 properties ensure Entity card won't be aligned above
+    // a list item marker (i.e. bullet)
+    display: 'inline-block',
+    verticalAlign: 'text-top',
+    width: '100%'
   })
 };
 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();
@@ -1118,7 +1059,8 @@ function LinkedEntityBlock(props) {
   }), /*#__PURE__*/React__default.createElement("div", {
     // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
     contentEditable: HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
-    draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined
+    draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined,
+    className: styles$3.container
   }, entityType === 'Entry' && /*#__PURE__*/React__default.createElement(FetchingWrappedEntryCard, {
     sdk: sdk,
     entryId: entityId,
@@ -1126,7 +1068,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 +1077,8 @@ function LinkedEntityBlock(props) {
     isDisabled: isDisabled,
     isSelected: isSelected,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick
+    onEdit: handleEditClick,
+    onEntityFetchComplete: onEntityFetchComplete
   })), children);
 }
 
@@ -1235,11 +1179,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 
 
     var IteratorPrototype = {};
-
-    IteratorPrototype[iteratorSymbol] = function () {
+    define(IteratorPrototype, iteratorSymbol, function () {
       return this;
-    };
-
+    });
     var getProto = Object.getPrototypeOf;
     var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
 
@@ -1250,8 +1192,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-    GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
-    GeneratorFunctionPrototype.constructor = GeneratorFunction;
+    GeneratorFunction.prototype = GeneratorFunctionPrototype;
+    define(Gp, "constructor", GeneratorFunctionPrototype);
+    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
     GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"); // Helper for defining the .next, .throw, and .return methods of the
     // Iterator interface in terms of a single ._invoke method.
 
@@ -1356,11 +1299,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     defineIteratorMethods(AsyncIterator.prototype);
-
-    AsyncIterator.prototype[asyncIteratorSymbol] = function () {
+    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
       return this;
-    };
-
+    });
     exports.AsyncIterator = AsyncIterator; // Note that simple async functions are implemented on top of
     // AsyncIterator objects; they just return a Promise for the value of
     // the final result produced by the iterator.
@@ -1537,13 +1478,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     // object to not be returned from this call. This ensures that doesn't happen.
     // See https://github.com/facebook/regenerator/issues/274 for more details.
 
-    Gp[iteratorSymbol] = function () {
+    define(Gp, iteratorSymbol, function () {
       return this;
-    };
-
-    Gp.toString = function () {
+    });
+    define(Gp, "toString", function () {
       return "[object Generator]";
-    };
+    });
 
     function pushTryEntry(locs) {
       var entry = {
@@ -1855,14 +1795,19 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   } catch (accidentalStrictMode) {
     // This module should not be running in strict mode, so the above
     // assignment should always work unless something is misconfigured. Just
-    // in case runtime.js accidentally runs in strict mode, we can escape
+    // in case runtime.js accidentally runs in strict mode, in modern engines
+    // we can explicitly access globalThis. In older engines we can escape
     // strict mode using a global Function call. This could conceivably fail
     // if a Content Security Policy forbids using Function, but in that case
     // the proper solution is to fix the accidental strict mode problem. If
     // you've misconfigured your bundler to force strict mode and applied a
     // CSP to forbid Function, and you're not willing to fix either of those
     // problems, please detail your unique predicament in a GitHub issue.
-    Function("r", "regeneratorRuntime = r")(runtime);
+    if (typeof globalThis === "object") {
+      globalThis.regeneratorRuntime = runtime;
+    } else {
+      Function("r", "regeneratorRuntime = r")(runtime);
+    }
   }
 });
 
@@ -1957,12 +1902,11 @@ function _selectEntityAndInsert() {
             config = _extends({}, baseConfig, {
               withCreate: true
             });
-            _context.prev = 5;
             selection = editor.selection;
-            _context.next = 9;
+            _context.next = 8;
             return selectEntity(config);
 
-          case 9:
+          case 8:
             entity = _context.sent;
 
             if (entity) {
@@ -1970,43 +1914,66 @@ function _selectEntityAndInsert() {
               break;
             }
 
+            logAction('cancelCreateEmbedDialog', {
+              nodeType: nodeType
+            });
             return _context.abrupt("return");
 
           case 12:
             slate.Transforms.select(editor, selection);
             insertBlock(editor, nodeType, entity);
+            ensureFollowingParagraph(editor);
             logAction('insert', {
               nodeType: nodeType
             });
-            _context.next = 24;
-            break;
-
-          case 17:
-            _context.prev = 17;
-            _context.t0 = _context["catch"](5);
-
-            if (!_context.t0) {
-              _context.next = 23;
-              break;
-            }
-
-            throw _context.t0;
-
-          case 23:
-            logAction('cancelCreateEmbedDialog', {
-              nodeType: nodeType
-            });
 
-          case 24:
+          case 16:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[5, 17]]);
+    }, _callee);
   }));
   return _selectEntityAndInsert.apply(this, arguments);
 }
 
+function ensureFollowingParagraph(editor) {
+  /*
+     If the new block isn't followed by a sibling paragraph we insert a new empty one
+   */
+  var next = slate.Editor.next(editor);
+
+  if (!next) {
+    return insertEmptyParagraph(editor);
+  }
+
+  var parent = slate.Editor.above(editor, {
+    voids: false,
+    match: function match(e) {
+      return !slate.Element.isElement(e) || ![Contentful.BLOCKS.EMBEDDED_ASSET, Contentful.BLOCKS.EMBEDDED_ENTRY].includes(e.type);
+    }
+  });
+
+  if (slate.Editor.isEditor(parent)) {
+    // at level 0, a following paragraph is handled by the tralingParagraph plugin
+    moveToTheNextChar(editor);
+    return;
+  }
+
+  var paragraph = slate.Editor.above(editor, {
+    at: next[1],
+    match: function match(e) {
+      return slate.Element.isElement(e) && Contentful.TEXT_CONTAINERS.includes(e.type);
+    }
+  });
+
+  if (!paragraph || !parent || !slate.Path.isChild(paragraph[1], parent[1])) {
+    return insertEmptyParagraph(editor);
+  }
+
+  moveToTheNextChar(editor);
+}
+
 var createNode = function createNode(nodeType, entity) {
   return {
     type: nodeType,
@@ -2038,7 +2005,7 @@ function insertBlock(editor, nodeType, entity) {
     slate.Transforms.setNodes(editor, linkedEntityBlock);
   }
 
-  Slate.ReactEditor.focus(editor);
+  focus(editor);
 }
 
 var styles$4 = {
@@ -2047,31 +2014,39 @@ var styles$4 = {
   })
 };
 function EmbeddedEntityBlockToolbarIcon(_ref) {
-  var isButton = _ref.isButton,
-      isDisabled = _ref.isDisabled,
-      logAction = _ref.logAction,
+  var isDisabled = _ref.isDisabled,
       nodeType = _ref.nodeType,
       onClose = _ref.onClose;
   var editor = useContentfulEditor();
   var sdk = useSdkContext();
 
-  var handleClick = function handleClick(event) {
-    event.preventDefault();
-    onClose();
-    selectEntityAndInsert(nodeType, sdk, editor, logAction || noop);
-  };
+  var handleClick = /*#__PURE__*/function () {
+    var _ref2 = _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();
+              onClose();
+              _context.next = 4;
+              return selectEntityAndInsert(nodeType, sdk, editor, editor.tracking.onToolbarAction);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleClick(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
   var type = getEntityTypeFromNodeType(nodeType);
   var baseClass = "rich-text__" + nodeType;
-  return isButton ? /*#__PURE__*/React__default.createElement(f36Components.Button, {
-    isDisabled: isDisabled,
-    className: baseClass + "-button",
-    size: "small",
-    onClick: handleClick,
-    startIcon: type === 'Asset' ? /*#__PURE__*/React__default.createElement(f36Icons.AssetIcon, null) : /*#__PURE__*/React__default.createElement(f36Icons.EmbeddedEntryBlockIcon, null),
-    variant: "secondary",
-    testId: "toolbar-toggle-" + nodeType
-  }, "Embed " + type.toLowerCase()) : /*#__PURE__*/React__default.createElement(f36Components.Menu.Item, {
+  return /*#__PURE__*/React__default.createElement(f36Components.Menu.Item, {
     disabled: isDisabled,
     className: baseClass + "-list-item",
     onClick: handleClick,
@@ -2125,7 +2100,7 @@ function getWithEmbeddedEntityEvents(nodeType, sdk) {
       }
 
       if (hotkey && isHotkey(hotkey, event)) {
-        selectEntityAndInsert(nodeType, sdk, editor, noop);
+        selectEntityAndInsert(nodeType, sdk, editor, editor.tracking.onShortcutAction);
       }
     };
   };
@@ -2138,7 +2113,7 @@ var createEmbeddedEntityPlugin = function createEmbeddedEntityPlugin(nodeType, h
       type: nodeType,
       isElement: true,
       isVoid: true,
-      component: LinkedEntityBlock,
+      component: withLinkTracking(LinkedEntityBlock),
       options: {
         hotkey: hotkey
       },
@@ -2196,12 +2171,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({
@@ -2251,27 +2234,26 @@ 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",
-      onClick: props.onEdit,
-      disabled: props.isDisabled
+      onClick: props.onEdit
     }, "Edit"), /*#__PURE__*/React__default.createElement(f36Components.MenuItem, {
       key: "remove",
       onClick: props.onRemove,
       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) {
@@ -2297,12 +2279,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,48 +2325,61 @@ function EmbeddedEntityInline(props) {
     isSelected: isSelected,
     isDisabled: isDisabled,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick
+    onEdit: handleEditClick,
+    onEntityFetchComplete: props.onEntityFetchComplete
   })), props.children);
 }
 
-function selectEntityAndInsert$1(_x, _x2) {
+function selectEntityAndInsert$1(_x, _x2, _x3) {
   return _selectEntityAndInsert$1.apply(this, arguments);
 }
 
 function _selectEntityAndInsert$1() {
-  _selectEntityAndInsert$1 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(editor, sdk) {
+  _selectEntityAndInsert$1 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(editor, sdk, logAction) {
     var config, selection, entry, inlineEntryNode;
     return runtime_1.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
+            logAction('openCreateEmbedDialog', {
+              nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+            });
             config = _extends({}, newEntitySelectorConfigFromRichTextField(sdk.field, Contentful.INLINES.EMBEDDED_ENTRY), {
               withCreate: true
             });
             selection = editor.selection;
-            _context2.next = 4;
+            _context2.next = 5;
             return sdk.dialogs.selectSingleEntry(config);
 
-          case 4:
+          case 5:
             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;
+              _context2.next = 10;
               break;
             }
 
+            logAction('cancelCreateEmbedDialog', {
+              nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+            });
             return _context2.abrupt("return");
 
-          case 8:
-            inlineEntryNode = createInlineEntryNode(entry.sys.id); // Got to wait until focus is really back on the editor or setSelection() won't work.
-
-            setTimeout(function () {
-              slate.Transforms.setSelection(editor, selection);
-              slate.Transforms.insertNodes(editor, inlineEntryNode);
-            }, 0);
-
           case 10:
+            inlineEntryNode = createInlineEntryNode(entry.sys.id);
+            logAction('insert', {
+              nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+            }); // Got to wait until focus is really back on the editor or setSelection() won't work.
+
+            return _context2.abrupt("return", new Promise(function (resolve) {
+              setTimeout(function () {
+                slate.Transforms.setSelection(editor, selection);
+                slate.Transforms.insertNodes(editor, inlineEntryNode);
+                resolve();
+              }, 0);
+            }));
+
+          case 13:
           case "end":
             return _context2.stop();
         }
@@ -2400,7 +2393,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
   var editor = useContentfulEditor();
   var sdk = useSdkContext();
 
-  function handleClick(_x3) {
+  function handleClick(_x4) {
     return _handleClick.apply(this, arguments);
   }
 
@@ -2422,9 +2415,12 @@ function ToolbarEmbeddedEntityInlineButton(props) {
             case 3:
               props.onClose();
               _context.next = 6;
-              return selectEntityAndInsert$1(editor, sdk);
+              return selectEntityAndInsert$1(editor, sdk, editor.tracking.onToolbarAction);
 
             case 6:
+              moveToTheNextChar(editor);
+
+            case 7:
             case "end":
               return _context.stop();
           }
@@ -2434,15 +2430,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
     return _handleClick.apply(this, arguments);
   }
 
-  return props.isButton ? /*#__PURE__*/React.createElement(f36Components.Button, {
-    isDisabled: props.isDisabled,
-    className: Contentful.INLINES.EMBEDDED_ENTRY + "-button",
-    size: "small",
-    onClick: handleClick,
-    startIcon: /*#__PURE__*/React.createElement(f36Icons.EmbeddedEntryInlineIcon, null),
-    variant: "secondary",
-    testId: "toolbar-toggle-" + Contentful.INLINES.EMBEDDED_ENTRY
-  }, "Embed inline entry") : /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
+  return /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
     disabled: props.isDisabled,
     className: "rich-text__entry-link-block-button",
     testId: "toolbar-toggle-" + Contentful.INLINES.EMBEDDED_ENTRY,
@@ -2463,7 +2451,7 @@ function createEmbeddedEntityInlinePlugin(sdk) {
     isElement: true,
     isInline: true,
     isVoid: true,
-    component: EmbeddedEntityInline,
+    component: withLinkTracking(EmbeddedEntityInline),
     options: {
       hotkey: 'mod+shift+2'
     },
@@ -2489,7 +2477,7 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
       if (!editor) return;
 
       if (hotkey && isHotkey(hotkey, event)) {
-        selectEntityAndInsert$1(editor, sdk);
+        selectEntityAndInsert$1(editor, sdk, editor.tracking.onShortcutAction);
       }
     };
   };
@@ -2572,19 +2560,29 @@ function ToolbarHeadingButton(props) {
       if (!(editor != null && editor.selection)) return;
       setSelected(type);
       setOpen(false);
+      var prevOnChange = editor.onChange;
+      /*
+       The focus might happen at point in time when
+       `toggleElement` (helper for 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);
+      };
 
-      if (shouldUnwrapBlockquote(editor, type)) {
-        unwrapFromRoot(editor);
-      }
-
-      plateCore.toggleNodeType(editor, {
+      var isActive = isBlockSelected(editor, type);
+      editor.tracking.onToolbarAction(isActive ? 'remove' : 'insert', {
+        nodeType: type
+      });
+      toggleElement(editor, {
         activeType: type,
         inactiveType: type
-      }); // TODO: Figure out why focus only works with timeout here.
-
-      setTimeout(function () {
-        Slate.ReactEditor.focus(editor);
-      }, 0);
+      });
     };
   }
 
@@ -2622,7 +2620,7 @@ function extractNodes(editor, path, match) {
   return Array.from(plateCore.getNodes(editor, {
     match: match,
     at: path,
-    mode: 'all'
+    mode: 'lowest'
   })).map(function (_ref) {
     var node = _ref[0];
     return node;
@@ -2702,6 +2700,24 @@ function createHeading(Tag, block) {
 
 var HeadingComponents = (_HeadingComponents = {}, _HeadingComponents[Contentful.BLOCKS.HEADING_1] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h1', Contentful.BLOCKS.HEADING_1)), _HeadingComponents[Contentful.BLOCKS.HEADING_2] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h2', Contentful.BLOCKS.HEADING_2)), _HeadingComponents[Contentful.BLOCKS.HEADING_3] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h3', Contentful.BLOCKS.HEADING_3)), _HeadingComponents[Contentful.BLOCKS.HEADING_4] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h4', Contentful.BLOCKS.HEADING_4)), _HeadingComponents[Contentful.BLOCKS.HEADING_5] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h5', Contentful.BLOCKS.HEADING_5)), _HeadingComponents[Contentful.BLOCKS.HEADING_6] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h6', Contentful.BLOCKS.HEADING_6)), _HeadingComponents);
 
+var buildHeadingEventHandler = function buildHeadingEventHandler(type) {
+  return function (editor, _ref) {
+    var hotkey = _ref.options.hotkey;
+    return function (event) {
+      if (editor.selection && hotkey && isHotkey(hotkey, event)) {
+        var isActive = isBlockSelected(editor, type);
+        editor.tracking.onShortcutAction(isActive ? 'remove' : 'insert', {
+          nodeType: type
+        });
+        toggleElement(editor, {
+          activeType: type,
+          inactiveType: Contentful.BLOCKS.PARAGRAPH
+        });
+      }
+    };
+  };
+};
+
 var createHeadingPlugin = function createHeadingPlugin() {
   var _transform;
 
@@ -2714,26 +2730,41 @@ 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
       },
-      validChildren: function validChildren(_, _ref) {
-        var node = _ref[0];
+      validChildren: function validChildren(_, _ref2) {
+        var node = _ref2[0];
         return isInlineOrText(node);
       },
       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(_ref3) {
+              var path = _ref3[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;
@@ -2746,7 +2777,7 @@ var createHeadingPlugin = function createHeadingPlugin() {
           hotkey: ["mod+alt+" + level]
         },
         handlers: {
-          onKeyDown: plateCore.onKeyDownToggleElement
+          onKeyDown: buildHeadingEventHandler(nodeType)
         },
         deserializeHtml: {
           rules: [{
@@ -2818,10 +2849,6 @@ function withHrEvents(editor) {
         pathToSelectedHr = _getNodeEntryFromSele[1];
 
     if (pathToSelectedHr) {
-      if (shouldUnwrapBlockquote(editor, Contentful.BLOCKS.HR)) {
-        unwrapFromRoot(editor);
-      }
-
       var isBackspace = event.key === 'Backspace';
       var isDelete = event.key === 'Delete';
 
@@ -2839,11 +2866,6 @@ function ToolbarHrButton(props) {
 
   function handleOnClick() {
     if (!(editor != null && editor.selection)) return;
-
-    if (shouldUnwrapBlockquote(editor, Contentful.BLOCKS.HR)) {
-      unwrapFromRoot(editor);
-    }
-
     var hr = {
       type: Contentful.BLOCKS.HR,
       data: {},
@@ -2856,7 +2878,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;
@@ -2905,159 +2927,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)
@@ -3217,7 +3086,8 @@ function HyperlinkModal(props) {
     onChange: function onChange(event) {
       return setLinkType(event.target.value);
     },
-    testId: "link-type-input"
+    testId: "link-type-input",
+    isDisabled: props.readonly
   }, enabledLinkTypes.map(function (nodeType) {
     return /*#__PURE__*/React.createElement(f36Components.Select.Option, {
       key: nodeType,
@@ -3233,11 +3103,12 @@ function HyperlinkModal(props) {
       setLinkEntity(null);
       setLinkTarget(event.target.value);
     },
-    testId: "link-target-input"
+    testId: "link-target-input",
+    isDisabled: props.readonly
   }), /*#__PURE__*/React.createElement(f36Components.FormControl.HelpText, null, "A protocol may be required, e.g. https://")), linkType !== Contentful.INLINES.HYPERLINK && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(f36Components.FormLabel, {
     isRequired: true,
     htmlFor: ""
-  }, "Link target", ' '), linkEntity && linkEntity.sys.linkType === SYS_LINK_TYPES[linkType] ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(f36Components.TextLink, {
+  }, "Link target", ' '), linkEntity && linkEntity.sys.linkType === SYS_LINK_TYPES[linkType] ? /*#__PURE__*/React.createElement(React.Fragment, null, !props.readonly && /*#__PURE__*/React.createElement(f36Components.TextLink, {
     testId: "entity-selection-link",
     onClick: resetLinkEntity,
     className: styles$b.removeSelectionLabel
@@ -3271,32 +3142,37 @@ function HyperlinkModal(props) {
     type: "submit",
     variant: "positive",
     size: "small",
-    isDisabled: !isLinkComplete(),
+    isDisabled: props.readonly || !isLinkComplete(),
     onClick: handleOnSubmit,
     testId: "confirm-cta"
   }, props.linkType ? 'Update' : 'Insert'))));
 }
-function addOrEditLink(_x, _x2) {
+function addOrEditLink(_x, _x2, _x3, _x4) {
   return _addOrEditLink.apply(this, arguments);
 }
 
 function _addOrEditLink() {
-  _addOrEditLink = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(editor, sdk) {
-    var linkType, linkText, linkTarget, linkEntity, _getNodeEntryFromSele, node, path, selectionBeforeBlur, currentLinkText, data, text, url, type, target;
+  _addOrEditLink = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(editor, sdk, logAction, targetPath) {
+    var _target$sys$linkType;
+
+    var isReadOnly, selectionBeforeBlur, linkType, linkText, linkTarget, linkEntity, _getNodeEntryFromSele, node, path, selectionAfterFocus, currentLinkText, isEditing, data, text, url, type, target;
 
     return runtime_1.wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
-            if (editor.selection) {
-              _context3.next = 2;
+            isReadOnly = Slate.ReactEditor.isReadOnly(editor);
+            selectionBeforeBlur = editor.selection ? _extends({}, editor.selection) : undefined;
+
+            if (!(!targetPath && !selectionBeforeBlur)) {
+              _context3.next = 4;
               break;
             }
 
             return _context3.abrupt("return");
 
-          case 2:
-            _getNodeEntryFromSele = getNodeEntryFromSelection(editor, LINK_TYPES), node = _getNodeEntryFromSele[0], path = _getNodeEntryFromSele[1];
+          case 4:
+            _getNodeEntryFromSele = getNodeEntryFromSelection(editor, LINK_TYPES, targetPath), node = _getNodeEntryFromSele[0], path = _getNodeEntryFromSele[1];
 
             if (node && path) {
               linkType = node.type;
@@ -3305,11 +3181,13 @@ function _addOrEditLink() {
               linkEntity = node.data.target;
             }
 
-            selectionBeforeBlur = _extends({}, editor.selection);
-            currentLinkText = linkText || slate.Editor.string(editor, editor.selection);
-            _context3.next = 8;
+            selectionAfterFocus = targetPath != null ? targetPath : selectionBeforeBlur;
+            currentLinkText = linkText || (editor.selection ? slate.Editor.string(editor, editor.selection) : '');
+            isEditing = Boolean(node && path);
+            logAction(isEditing ? 'openEditHyperlinkDialog' : 'openCreateHyperlinkDialog');
+            _context3.next = 12;
             return fieldEditorShared.ModalDialogLauncher.openDialog({
-              title: linkType ? 'Edit hyperlink' : 'Insert hyperlink',
+              title: isEditing ? 'Edit hyperlink' : 'Insert hyperlink',
               width: 'large',
               shouldCloseOnEscapePress: true,
               shouldCloseOnOverlayClick: true,
@@ -3322,23 +3200,26 @@ function _addOrEditLink() {
                 linkType: linkType,
                 linkEntity: linkEntity,
                 onClose: onClose,
-                sdk: sdk
+                sdk: sdk,
+                readonly: isReadOnly
               });
             });
 
-          case 8:
+          case 12:
             data = _context3.sent;
+            slate.Transforms.select(editor, selectionAfterFocus);
 
             if (data) {
-              _context3.next = 11;
+              _context3.next = 18;
               break;
             }
 
+            focus(editor);
+            logAction(isEditing ? 'cancelEditHyperlinkDialog' : 'cancelCreateHyperlinkDialog');
             return _context3.abrupt("return");
 
-          case 11:
+          case 18:
             text = data.linkText, url = data.linkTarget, type = data.linkType, target = data.linkEntity;
-            slate.Transforms.select(editor, selectionBeforeBlur);
             slate.Editor.withoutNormalizing(editor, function () {
               insertLink(editor, {
                 text: text,
@@ -3348,9 +3229,13 @@ function _addOrEditLink() {
                 path: path
               });
             });
-            Slate.ReactEditor.focus(editor);
+            logAction(isEditing ? 'edit' : 'insert', {
+              nodeType: type,
+              linkType: (_target$sys$linkType = target == null ? void 0 : target.sys.linkType) != null ? _target$sys$linkType : 'uri'
+            });
+            focus(editor);
 
-          case 15:
+          case 22:
           case "end":
             return _context3.stop();
         }
@@ -3360,80 +3245,37 @@ function _addOrEditLink() {
   return _addOrEditLink.apply(this, arguments);
 }
 
-var hasText = function hasText(editor, entry) {
-  var node = entry[0];
-  return !plateCore.isAncestorEmpty(editor, node) && slate.Node.string(node).trim() !== '';
-};
-
-var styles$c = {
-  hyperlinkWrapper: /*#__PURE__*/emotion.css({
-    display: 'inline',
-    position: 'static',
-    a: {
-      fontSize: 'inherit !important'
-    }
-  }),
-  hyperlink: /*#__PURE__*/emotion.css({
-    fontSize: 'inherit !important',
-    display: 'inline !important',
-    '&:hover': {
-      fill: tokens.gray900
-    },
-    '&: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 ToolbarHyperlinkButton(props) {
   var editor = useContentfulEditor();
-  var isReadOnly = Slate.useReadOnly();
+  var isActive = !!(editor && isLinkActive(editor));
   var sdk = useSdkContext();
-  var uri = props.element.data.uri;
 
-  function handleClick(_x) {
+  function handleClick() {
     return _handleClick.apply(this, arguments);
   }
 
   function _handleClick() {
-    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(event) {
+    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       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;
+                _context.next = 2;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 4:
-              addOrEditLink(editor, sdk);
+            case 2:
+              if (isActive) {
+                unwrapLink(editor);
+                editor.tracking.onToolbarAction('unlinkHyperlinks');
+              } else {
+                addOrEditLink(editor, sdk, editor.tracking.onToolbarAction);
+              }
 
-            case 5:
+            case 3:
             case "end":
               return _context.stop();
           }
@@ -3443,127 +3285,258 @@ function UrlHyperlink(props) {
     return _handleClick.apply(this, arguments);
   }
 
-  return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
-    content: uri,
-    targetWrapperClassName: styles$c.hyperlinkWrapper,
-    placement: "bottom",
-    maxWidth: "auto"
-  }, /*#__PURE__*/React.createElement(f36Components.TextLink, {
-    as: "a",
-    href: uri,
-    rel: "noopener noreferrer",
+  if (!editor) return null;
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    title: "Hyperlink",
+    testId: "hyperlink-toolbar-button",
     onClick: handleClick,
-    isDisabled: isReadOnly,
-    className: styles$c.hyperlink
-  }, props.children));
+    isActive: isActive,
+    isDisabled: props.isDisabled
+  }, /*#__PURE__*/React.createElement(f36Icons.LinkIcon, null));
 }
 
-function EntityHyperlink(props) {
-  var editor = useContentfulEditor();
-  var isReadOnly = Slate.useReadOnly();
-  var sdk = useSdkContext();
-  var target = props.element.data.target;
-  if (!target) return null;
-
-  function handleClick(_x2) {
-    return _handleClick2.apply(this, arguments);
-  }
+var hasText = function hasText(editor, entry) {
+  var node = entry[0];
+  return !plateCore.isAncestorEmpty(editor, node) && slate.Node.string(node).trim() !== '';
+};
 
-  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();
+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*)\.?.$/, '…');
+  }
 
-              if (editor) {
-                _context2.next = 4;
-                break;
-              }
+  return str;
+}
 
-              return _context2.abrupt("return");
+function getEntityInfo(data) {
+  if (!data) {
+    return '';
+  }
 
-            case 4:
-              addOrEditLink(editor, sdk);
+  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;
+}
 
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
+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();
         }
-      }, _callee2);
-    }));
-    return _handleClick2.apply(this, arguments);
+      }
+    }, _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',
+    position: 'static',
+    a: {
+      fontSize: 'inherit !important'
+    }
+  }),
+  hyperlink: /*#__PURE__*/emotion.css({
+    fontSize: 'inherit !important',
+    display: 'inline !important',
+    '&:hover': {
+      fill: tokens.gray900
+    },
+    '&:focus': {
+      fill: tokens.gray900
+    }
+  })
+};
+
+function EntityHyperlink(props) {
+  var editor = useContentfulEditor();
+  var sdk = useSdkContext();
+  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();
+    event.stopPropagation();
+    if (!editor) return;
+    var p = Slate.ReactEditor.toSlatePoint(editor, [event.target, 0], {
+      exactMatch: false,
+      suppressThrow: false
+    });
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction, p.path);
   }
 
   return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
-    content: /*#__PURE__*/React.createElement(EntryAssetTooltip, {
-      id: target.sys.id,
-      type: target.sys.linkType,
-      sdk: sdk
-    }),
+    content: tooltipContent,
     targetWrapperClassName: styles$c.hyperlinkWrapper,
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/React.createElement(f36Components.TextLink, {
-    as: "button",
+    as: "a",
     onClick: handleClick,
-    isDisabled: isReadOnly,
     className: styles$c.hyperlink,
     "data-link-type": target.sys.linkType,
     "data-link-id": target.sys.id
   }, props.children));
 }
 
-function ToolbarHyperlinkButton(props) {
+function UrlHyperlink(props) {
   var editor = useContentfulEditor();
-  var isActive = !!(editor && isLinkActive(editor));
   var sdk = useSdkContext();
+  var uri = props.element.data.uri;
 
-  function handleClick() {
-    return _handleClick3.apply(this, arguments);
-  }
-
-  function _handleClick3() {
-    _handleClick3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
-      return runtime_1.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              if (editor) {
-                _context3.next = 2;
-                break;
-              }
-
-              return _context3.abrupt("return");
-
-            case 2:
-              if (isActive) {
-                unwrapLink(editor);
-              } else {
-                addOrEditLink(editor, sdk);
-              }
-
-            case 3:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3);
-    }));
-    return _handleClick3.apply(this, arguments);
+  function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!editor) return;
+    var p = Slate.ReactEditor.toSlatePoint(editor, [event.target, 0], {
+      exactMatch: false,
+      suppressThrow: false
+    });
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction, p.path);
   }
 
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Hyperlink",
-    testId: "hyperlink-toolbar-button",
+  return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
+    content: uri,
+    targetWrapperClassName: styles$c.hyperlinkWrapper,
+    placement: "bottom",
+    maxWidth: "auto"
+  }, /*#__PURE__*/React.createElement(f36Components.TextLink, {
+    as: "a",
+    href: uri,
+    rel: "noopener noreferrer",
     onClick: handleClick,
-    isActive: isActive,
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.LinkIcon, null));
+    className: styles$c.hyperlink
+  }, props.children));
 }
 
 var isAnchor = function isAnchor(element) {
@@ -3571,11 +3544,11 @@ var isAnchor = function isAnchor(element) {
 };
 
 var isEntryAnchor = function isEntryAnchor(element) {
-  return isAnchor(element) && element.getAttribute('data-link-type') === 'Entry';
+  return element.nodeName === 'A' && element.getAttribute('data-link-type') === 'Entry';
 };
 
 var isAssetAnchor = function isAssetAnchor(element) {
-  return isAnchor(element) && element.getAttribute('data-link-type') === 'Asset';
+  return element.nodeName === 'A' && element.getAttribute('data-link-type') === 'Asset';
 };
 
 var buildHyperlinkEventHandler = function buildHyperlinkEventHandler(sdk) {
@@ -3592,8 +3565,9 @@ var buildHyperlinkEventHandler = function buildHyperlinkEventHandler(sdk) {
 
       if (isLinkActive(editor)) {
         unwrapLink(editor);
+        editor.tracking.onShortcutAction('unlinkHyperlinks');
       } else {
-        addOrEditLink(editor, sdk);
+        addOrEditLink(editor, sdk, editor.tracking.onShortcutAction);
       }
     };
   };
@@ -3650,7 +3624,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
     _extends({}, common, {
       key: Contentful.INLINES.ENTRY_HYPERLINK,
       type: Contentful.INLINES.ENTRY_HYPERLINK,
-      component: EntityHyperlink,
+      component: withLinkTracking(EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -3664,7 +3638,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
     _extends({}, common, {
       key: Contentful.INLINES.ASSET_HYPERLINK,
       type: Contentful.INLINES.ASSET_HYPERLINK,
-      component: EntityHyperlink,
+      component: withLinkTracking(EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -3686,7 +3660,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,13 +3675,349 @@ 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
   }), props.children);
 }
 
+/**
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+var moveListItemDown = function moveListItemDown(editor, _ref) {
+  var list = _ref.list,
+      listItem = _ref.listItem;
+  var listNode = list[0];
+  var listItemPath = listItem[1];
+  var previousListItemPath;
+
+  try {
+    previousListItemPath = slate.Path.previous(listItemPath);
+  } catch (e) {
+    return;
+  } // Previous sibling is the new parent
+
+
+  var previousSiblingItem = slate.Editor.node(editor, previousListItemPath);
+
+  if (previousSiblingItem) {
+    var previousPath = previousSiblingItem[1];
+    var subList = Array.from(slate.Node.children(editor, previousPath)).find(function (_ref2) {
+      var n = _ref2[0];
+      return plateCore.match(n, {
+        type: plateList.getListTypes(editor)
+      });
+    });
+    var newPath = slate.Path.next(plateCore.getLastChildPath(subList != null ? subList : previousSiblingItem));
+    slate.Editor.withoutNormalizing(editor, function () {
+      if (!subList) {
+        // Create new sub-list
+        plateCore.wrapNodes(editor, {
+          type: listNode.type,
+          children: [],
+          data: {}
+        }, {
+          at: listItemPath
+        });
+      } // Move the current item to the sub-list
+
+
+      slate.Transforms.moveNodes(editor, {
+        at: listItemPath,
+        to: newPath
+      });
+    });
+  }
+};
+
+/**
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+var moveListItems = function moveListItems(editor, _temp) {
+  var _editor$selection;
+
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$increase = _ref.increase,
+      increase = _ref$increase === void 0 ? true : _ref$increase,
+      _ref$at = _ref.at,
+      at = _ref$at === void 0 ? (_editor$selection = editor.selection) != null ? _editor$selection : undefined : _ref$at;
+
+  var _nodes = plateCore.getNodes(editor, {
+    at: at,
+    match: {
+      type: plateCore.getPluginType(editor, plateList.ELEMENT_LIC)
+    }
+  }); // Get the selected lic
+
+
+  var lics = Array.from(_nodes);
+  if (!lics.length) return;
+  var highestLicPaths = [];
+  var highestLicPathRefs = []; // Filter out the nested lic, we just need to move the highest ones
+
+  lics.forEach(function (lic) {
+    var licPath = lic[1];
+    var liPath = slate.Path.parent(licPath);
+    var isAncestor = highestLicPaths.some(function (path) {
+      var highestLiPath = slate.Path.parent(path);
+      return slate.Path.isAncestor(highestLiPath, liPath);
+    });
+
+    if (!isAncestor) {
+      highestLicPaths.push(licPath);
+      highestLicPathRefs.push(slate.Editor.pathRef(editor, licPath));
+    }
+  });
+  var licPathRefsToMove = increase ? highestLicPathRefs : highestLicPathRefs.reverse();
+  slate.Editor.withoutNormalizing(editor, function () {
+    licPathRefsToMove.forEach(function (licPathRef) {
+      var licPath = licPathRef.unref();
+      if (!licPath) return;
+      var liEntry = plateList.getListItemEntry(editor, {
+        at: licPath
+      });
+
+      if (!liEntry) {
+        return;
+      }
+
+      if (increase) {
+        moveListItemDown(editor, liEntry);
+      } else if (plateList.isListNested(editor, liEntry.list[1])) {
+        plateList.moveListItemUp(editor, liEntry);
+      }
+    });
+  });
+};
+
+/**
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+
+function hasUnliftedListItems(editor, at) {
+  return slate.Editor.nodes(editor, {
+    at: at,
+    match: function match(node, path) {
+      return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.LIST_ITEM && path.length >= 2;
+    }
+  }).next().done;
+}
+
+var unwrapList = function unwrapList(editor, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      at = _ref.at;
+
+  slate.Editor.withoutNormalizing(editor, function () {
+    do {
+      // lift list items to the root level
+      slate.Transforms.liftNodes(editor, {
+        at: at,
+        match: function match(node) {
+          return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.LIST_ITEM;
+        },
+        mode: 'lowest'
+      });
+    } while (!hasUnliftedListItems(editor, at)); // finally unwrap all lifted items
+
+
+    plateCore.unwrapNodes(editor, {
+      at: at,
+      match: {
+        type: Contentful.BLOCKS.LIST_ITEM
+      },
+      split: false
+    });
+  });
+};
+
+var listTypes = [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.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.includes(commonEntry[0].type) || commonEntry[0].type === Contentful.BLOCKS.LIST_ITEM) {
+        var listType = commonEntry[0].type;
+
+        if (commonEntry[0].type === Contentful.BLOCKS.LIST_ITEM) {
+          listType = slate.Editor.parent(editor, commonEntry[1])[0].type;
+        }
+
+        if (listType !== type) {
+          var startList = plateCore.findNode(editor, {
+            at: slate.Range.start(editor.selection),
+            match: {
+              type: listTypes
+            },
+            mode: 'lowest'
+          });
+          var endList = plateCore.findNode(editor, {
+            at: slate.Range.end(editor.selection),
+            match: {
+              type: listTypes
+            },
+            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.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.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);
 };
@@ -3755,8 +4065,18 @@ var isNonEmptyListItem = function isNonEmptyListItem(editor, _ref4) {
   var listItemChildren = Array.from(slate.Node.children(editor, path));
   return listItemChildren.length !== 0;
 };
-var insertParagraphAsChild = function insertParagraphAsChild(editor, _ref5) {
-  var path = _ref5[1];
+var firstNodeIsNotList = function firstNodeIsNotList(_editor, _ref5) {
+  var node = _ref5[0];
+
+  if (node.children.length === 1) {
+    var firstNode = node.children[0];
+    return !slate.Text.isText(firstNode) && !isList(firstNode);
+  }
+
+  return true;
+};
+var insertParagraphAsChild = function insertParagraphAsChild(editor, _ref6) {
+  var path = _ref6[1];
   slate.Transforms.insertNodes(editor, [{
     type: Contentful.BLOCKS.PARAGRAPH,
     data: {},
@@ -3767,68 +4087,325 @@ var insertParagraphAsChild = function insertParagraphAsChild(editor, _ref5) {
     at: path.concat([0])
   });
 };
+var replaceNodeWithListItems = function replaceNodeWithListItems(editor, entry) {
+  var node = entry[0],
+      path = entry[1];
+  slate.Transforms.removeNodes(editor, {
+    at: path
+  });
+  slate.Transforms.insertNodes(editor, node.children[0].children, {
+    at: path
+  });
+};
+var isListTypeActive = function isListTypeActive(editor, type) {
+  var selection = editor.selection;
+
+  if (!selection) {
+    return false;
+  }
+
+  if (slate.Range.isExpanded(selection)) {
+    var _Range$edges = slate.Range.edges(selection),
+        start = _Range$edges[0],
+        end = _Range$edges[1];
+
+    var node = slate.Node.common(editor, start.path, end.path);
+
+    if (node[0].type === type) {
+      return true;
+    }
+  } // Lists can be nested. Here, we take the list type at the lowest level
+
+
+  var listNode = plateCore.getBlockAbove(editor, {
+    match: {
+      type: [Contentful.BLOCKS.OL_LIST, Contentful.BLOCKS.UL_LIST]
+    },
+    mode: 'lowest'
+  });
+  return (listNode == null ? void 0 : listNode[0].type) === type;
+};
 
 /**
- * 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;
+  }
 
-    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]];
+  return false;
+};
+
+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 +4417,98 @@ var getListInsertFragment = function getListInsertFragment(editor) {
   };
 };
 
-var options = {
-  validLiChildrenTypes: Contentful.LIST_ITEM_BLOCKS
+/**
+ * Credit: Modified version of Plate's list plugin
+ * See: https://github.com/udecode/plate/blob/main/packages/nodes/list
+ */
+var deleteBackwardList = function deleteBackwardList(editor, unit) {
+  var res = plateList.getListItemEntry(editor, {});
+  var moved = false;
+
+  if (res) {
+    var list = res.list,
+        listItem = res.listItem;
+
+    if (plateCore.isSelectionAtBlockStart(editor, {
+      match: function match(node) {
+        return node.type === Contentful.BLOCKS.LIST_ITEM;
+      }
+    })) {
+      slate.Editor.withoutNormalizing(editor, function () {
+        moved = plateList.removeFirstListItem(editor, {
+          list: list,
+          listItem: listItem
+        });
+        if (moved) return;
+        moved = plateList.removeListItem(editor, {
+          list: list,
+          listItem: listItem
+        });
+        if (moved) return;
+
+        if (plateCore.isFirstChild(listItem[1]) && !plateList.isListNested(editor, list[1])) {
+          plateResetNode.onKeyDownResetNode(editor, plateCore.mockPlugin({
+            options: {
+              rules: [{
+                types: [Contentful.BLOCKS.LIST_ITEM],
+                defaultType: Contentful.BLOCKS.PARAGRAPH,
+                hotkey: 'backspace',
+                predicate: function predicate() {
+                  return plateCore.isSelectionAtBlockStart(editor);
+                },
+                onReset: function onReset(e) {
+                  return unwrapList(e);
+                }
+              }]
+            }
+          }))(plateResetNode.SIMULATE_BACKSPACE);
+          moved = true;
+          return;
+        }
+
+        plateCore.deleteFragment(editor, {
+          unit: unit,
+          reverse: true
+        });
+        moved = true;
+      });
+    }
+  }
+
+  return moved;
 };
-var withList = function withList(editor, plugin) {
-  var insertFragment = editor.insertFragment;
-  plateList.withList(editor, _extends({}, plugin, {
-    options: options
-  })); // Reverts any overrides to insertFragment
 
-  editor.insertFragment = insertFragment; // Use our custom getListInsertFragment
+/**
+ * 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 (deleteBackwardList(editor, unit)) return;
+    deleteBackward(unit);
+  };
+
+  editor.deleteForward = function (unit) {
+    if (plateList.deleteForwardList(editor)) return;
+    deleteForward(unit);
+  };
+
+  editor.deleteFragment = function () {
+    if (plateList.deleteFragmentList(editor)) return;
+    deleteFragment();
+  };
+
+  editor.insertBreak = insertListBreak(editor);
+  editor.insertFragment = insertListFragment(editor); // TODO: replace with Normalizer rules
 
-  editor.insertFragment = getListInsertFragment(editor);
+  editor.normalizeNode = plateList.normalizeList(editor, {
+    validLiChildrenTypes: validLiChildrenTypes
+  });
   return editor;
 };
 
@@ -3869,17 +4526,24 @@ 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] = {
       type: Contentful.BLOCKS.LIST_ITEM,
       component: ListItem,
+      // @ts-expect-error
       normalizer: [{
         validNode: hasListAsDirectParent,
         transform: normalizeOrphanedListItem
@@ -3889,6 +4553,9 @@ var createListPlugin = function createListPlugin() {
       }, {
         validChildren: Contentful.LIST_ITEM_BLOCKS,
         transform: transformParagraphs
+      }, {
+        validNode: firstNodeIsNotList,
+        transform: replaceNodeWithListItems
       }]
     }, _overrideByKey)
   });
@@ -3901,15 +4568,10 @@ function ToolbarListButton(props) {
   function handleClick(type) {
     return function () {
       if (!(editor != null && editor.selection)) return;
-
-      if (shouldUnwrapBlockquote(editor, type)) {
-        unwrapFromRoot(editor);
-      }
-
-      plateList.toggleList(editor, {
+      toggleList(editor, {
         type: type
       });
-      Slate.ReactEditor.focus(editor);
+      focus(editor);
     };
   }
 
@@ -3918,37 +4580,73 @@ function ToolbarListButton(props) {
     title: "UL",
     testId: "ul-toolbar-button",
     onClick: handleClick(Contentful.BLOCKS.UL_LIST),
-    isActive: isBlockSelected(editor, Contentful.BLOCKS.UL_LIST),
+    isActive: isListTypeActive(editor, Contentful.BLOCKS.UL_LIST),
     isDisabled: props.isDisabled
   }, /*#__PURE__*/React.createElement(f36Icons.ListBulletedIcon, null)), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.OL_LIST) && /*#__PURE__*/React.createElement(ToolbarButton, {
     title: "OL",
     testId: "ol-toolbar-button",
     onClick: handleClick(Contentful.BLOCKS.OL_LIST),
-    isActive: isBlockSelected(editor, Contentful.BLOCKS.OL_LIST),
+    isActive: isListTypeActive(editor, Contentful.BLOCKS.OL_LIST),
     isDisabled: props.isDisabled
   }, /*#__PURE__*/React.createElement(f36Icons.ListNumberedIcon, null)));
 }
 
-function ToolbarBoldButton(props) {
-  var editor = useContentfulEditor();
+var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
+  var mark = _ref.mark,
+      title = _ref.title,
+      icon = _ref.icon;
 
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    plateCore.toggleMark(editor, {
-      key: Contentful.MARKS.BOLD
-    });
-    Slate.ReactEditor.focus(editor);
-  }
+  var Mark = function Mark(_ref2) {
+    var isDisabled = _ref2.isDisabled;
+    var editor = useContentfulEditor();
+    var handleClick = React.useCallback(function () {
+      if (!(editor != null && editor.selection)) return;
+      var isActive = plateCore.isMarkActive(editor, mark);
+      editor.tracking.onToolbarAction(isActive ? 'unmark' : 'mark', {
+        markType: mark
+      });
+      plateCore.toggleMark(editor, {
+        key: mark
+      });
+      focus(editor);
+    }, [editor]);
+    if (!editor) return null;
+    return /*#__PURE__*/React.createElement(ToolbarButton, {
+      title: title,
+      testId: mark + "-toolbar-button",
+      onClick: handleClick,
+      isActive: plateCore.isMarkActive(editor, mark),
+      isDisabled: isDisabled
+    }, icon);
+  };
 
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Bold",
-    testId: "bold-toolbar-button",
-    onClick: handleClick,
-    isActive: plateCore.isMarkActive(editor, Contentful.MARKS.BOLD),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.FormatBoldIcon, null));
-}
+  Mark.displayName = mark;
+  return Mark;
+};
+
+var buildMarkEventHandler = function buildMarkEventHandler(type) {
+  return function (editor, _ref) {
+    var hotkey = _ref.options.hotkey;
+    return function (event) {
+      if (editor.selection && hotkey && isHotkey(hotkey, event)) {
+        event.preventDefault();
+        var isActive = plateCore.isMarkActive(editor, type);
+        editor.tracking.onShortcutAction(isActive ? 'unmark' : 'mark', {
+          markType: type
+        });
+        plateCore.toggleMark(editor, {
+          key: type
+        });
+      }
+    };
+  };
+};
+
+var ToolbarBoldButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Bold',
+  mark: Contentful.MARKS.BOLD,
+  icon: /*#__PURE__*/React.createElement(f36Icons.FormatBoldIcon, null)
+});
 var styles$e = {
   bold: /*#__PURE__*/emotion.css({
     fontWeight: 600
@@ -3971,6 +4669,9 @@ var createBoldPlugin = function createBoldPlugin() {
     options: {
       hotkey: ['mod+b']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.BOLD)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['STRONG', 'B']
@@ -3985,29 +4686,14 @@ var createBoldPlugin = function createBoldPlugin() {
         });
       }
     }
-  });
-};
-
-function ToolbarCodeButton(props) {
-  var editor = useContentfulEditor();
-
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    plateCore.toggleMark(editor, {
-      key: Contentful.MARKS.CODE
-    });
-    Slate.ReactEditor.focus(editor);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Code",
-    testId: "code-toolbar-button",
-    onClick: handleClick,
-    isActive: plateCore.isMarkActive(editor, Contentful.MARKS.CODE),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.CodeIcon, null));
-}
+  });
+};
+
+var ToolbarCodeButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Code',
+  mark: Contentful.MARKS.CODE,
+  icon: /*#__PURE__*/React.createElement(f36Icons.CodeIcon, null)
+});
 var styles$f = {
   code: /*#__PURE__*/emotion.css({
     fontFamily: 'monospace',
@@ -4026,6 +4712,9 @@ var createCodePlugin = function createCodePlugin() {
     options: {
       hotkey: ['mod+/']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.CODE)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['CODE', 'PRE']
@@ -4038,26 +4727,11 @@ var createCodePlugin = function createCodePlugin() {
   });
 };
 
-function ToolbarItalicButton(props) {
-  var editor = useContentfulEditor();
-
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    plateCore.toggleMark(editor, {
-      key: Contentful.MARKS.ITALIC
-    });
-    Slate.ReactEditor.focus(editor);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Italic",
-    testId: "italic-toolbar-button",
-    onClick: handleClick,
-    isActive: plateCore.isMarkActive(editor, Contentful.MARKS.ITALIC),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.FormatItalicIcon, null));
-}
+var ToolbarItalicButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Italic',
+  mark: Contentful.MARKS.ITALIC,
+  icon: /*#__PURE__*/React.createElement(f36Icons.FormatItalicIcon, null)
+});
 var styles$g = {
   italic: /*#__PURE__*/emotion.css({
     fontStyle: 'italic'
@@ -4075,6 +4749,9 @@ var createItalicPlugin = function createItalicPlugin() {
     options: {
       hotkey: ['mod+i']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.ITALIC)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['I', 'EM']
@@ -4092,26 +4769,11 @@ var createItalicPlugin = function createItalicPlugin() {
   });
 };
 
-function ToolbarUnderlineButton(props) {
-  var editor = useContentfulEditor();
-
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    plateCore.toggleMark(editor, {
-      key: Contentful.MARKS.UNDERLINE
-    });
-    Slate.ReactEditor.focus(editor);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Underline",
-    testId: "underline-toolbar-button",
-    onClick: handleClick,
-    isActive: plateCore.isMarkActive(editor, Contentful.MARKS.UNDERLINE),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.FormatUnderlinedIcon, null));
-}
+var ToolbarUnderlineButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Underline',
+  mark: Contentful.MARKS.UNDERLINE,
+  icon: /*#__PURE__*/React.createElement(f36Icons.FormatUnderlinedIcon, null)
+});
 function Underline(props) {
   return /*#__PURE__*/React.createElement("u", Object.assign({}, props.attributes), props.children);
 }
@@ -4122,6 +4784,9 @@ var createUnderlinePlugin = function createUnderlinePlugin() {
     options: {
       hotkey: ['mod+u']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.UNDERLINE)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['U']
@@ -4344,6 +5009,7 @@ var withNormalizer = function withNormalizer(editor) {
 var createNormalizerPlugin = function createNormalizerPlugin() {
   return {
     key: 'NormalizerPlugin',
+    // @ts-expect-error
     withOverrides: withNormalizer
   };
 };
@@ -4363,6 +5029,18 @@ function isEmptyElement(element) {
   return element.textContent === '';
 }
 
+var buildParagraphKeyDownHandler = function buildParagraphKeyDownHandler(editor, _ref) {
+  var hotkey = _ref.options.hotkey;
+  return function (event) {
+    if (editor.selection && hotkey && isHotkey(hotkey, event)) {
+      toggleElement(editor, {
+        activeType: Contentful.BLOCKS.PARAGRAPH,
+        inactiveType: Contentful.BLOCKS.PARAGRAPH
+      });
+    }
+  };
+};
+
 var createParagraphPlugin = function createParagraphPlugin() {
   var _transform;
 
@@ -4372,6 +5050,9 @@ var createParagraphPlugin = function createParagraphPlugin() {
     options: {
       hotkey: ['mod+opt+0']
     },
+    handlers: {
+      onKeyDown: buildParagraphKeyDownHandler
+    },
     softBreak: [// create a new line with SHIFT+Enter inside a paragraph
     {
       hotkey: 'shift+enter',
@@ -4388,8 +5069,8 @@ var createParagraphPlugin = function createParagraphPlugin() {
       }
     },
     normalizer: [{
-      validChildren: function validChildren(_, _ref) {
-        var node = _ref[0];
+      validChildren: function validChildren(_, _ref2) {
+        var node = _ref2[0];
         return isInlineOrText(node);
       },
       transform: (_transform = {}, _transform[Contentful.BLOCKS.PARAGRAPH] = transformUnwrap, _transform["default"] = transformLift, _transform)
@@ -4482,16 +5163,59 @@ var sanitizeHTML = function sanitizeHTML(html) {
   // Parse the HTML string and pipe it through our transformers
   var doc = transformers.reduce(function (value, cb) {
     return cb(value);
-  }, new DOMParser().parseFromString(html, 'text/html')); // Remove whitespace between tags
+  }, new DOMParser().parseFromString(html, 'text/html'));
+  return doc.body.innerHTML.replace(/>\s+</g, '><') // Remove whitespace between tags
+  .replace(/(.*)<div.*>(<table.*<\/table>)<\/div>(.*)/g, '$1$2$3'); // remove div containers from tables
+};
+
+/**
+ * Get x-slate-fragment attribute from data-slate-fragment
+ */
 
-  return doc.body.innerHTML.replace(/>\s+</g, '><');
+var catchSlateFragment = /data-slate-fragment="(.+?)"/m;
+var getSlateFragmentAttribute = function getSlateFragmentAttribute(dataTransfer) {
+  var htmlData = dataTransfer.getData('text/html');
+
+  var _ref = htmlData.match(catchSlateFragment) || [],
+      fragment = _ref[1];
+
+  return fragment;
 };
+/**
+ * Get the x-slate-fragment attribute that exist in text/html data
+ * and append it to the DataTransfer object
+ */
+
+var ensureXSlateFragment = function ensureXSlateFragment(dataTransfer) {
+  if (!dataTransfer.getData('application/x-slate-fragment')) {
+    var fragment = getSlateFragmentAttribute(dataTransfer);
+
+    if (fragment) {
+      var clipboardData = new DataTransfer();
+      dataTransfer.types.forEach(function (type) {
+        clipboardData.setData(type, dataTransfer.getData(type));
+      });
+      clipboardData.setData('application/x-slate-fragment', fragment);
+      return clipboardData;
+    }
+  }
 
+  return dataTransfer;
+};
 var createPasteHTMLPlugin = function createPasteHTMLPlugin() {
   var _pluginsByKey;
 
   return {
     key: 'PasteHTMLPlugin',
+    withOverrides: function withOverrides(editor) {
+      var insertData = editor.insertData;
+
+      editor.insertData = function (data) {
+        return insertData(ensureXSlateFragment(data));
+      };
+
+      return editor;
+    },
     inject: {
       pluginsByKey: (_pluginsByKey = {}, _pluginsByKey[plateCore.KEY_DESERIALIZE_HTML] = {
         editor: {
@@ -4510,10 +5234,7 @@ var style$1 = /*#__PURE__*/emotion.css({
   margin: '0 0 1.3125rem',
   borderLeft: "6px solid " + tokens.gray200,
   paddingLeft: '0.875rem',
-  fontStyle: 'normal',
-  '& a': {
-    color: 'inherit'
-  }
+  fontStyle: 'normal'
 });
 function Quote(props) {
   return /*#__PURE__*/React.createElement("blockquote", Object.assign({}, props.attributes, {
@@ -4521,45 +5242,61 @@ function Quote(props) {
   }), props.children);
 }
 
-function createQuotePlugin() {
-  var _transform;
+/**
+ * Returns true if we are:
+ * 1) Inside a blockquote
+ * 2) With no only one child paragraph/heading and
+ * 3) that child is empty
+ */
 
-  return {
-    key: Contentful.BLOCKS.QUOTE,
-    type: Contentful.BLOCKS.QUOTE,
-    isElement: true,
-    component: Quote,
-    options: {
-      hotkey: 'mod+shift+1'
-    },
-    handlers: {
-      onKeyDown: plateCore.onKeyDownToggleElement
+var shouldResetQuoteOnBackspace = function shouldResetQuoteOnBackspace(editor) {
+  var container = plateCore.getAbove(editor, {
+    match: {
+      type: Contentful.TEXT_CONTAINERS
     },
-    deserializeHtml: {
-      rules: [{
-        validNodeName: 'BLOCKQUOTE'
-      }]
+    mode: 'lowest'
+  });
+
+  if (!container) {
+    return false;
+  }
+
+  if (!plateCore.isAncestorEmpty(editor, container[0])) {
+    return false;
+  }
+
+  var quote = plateCore.getBlockAbove(editor, {
+    match: {
+      type: Contentful.BLOCKS.QUOTE
     },
-    normalizer: [{
-      validChildren: Contentful.CONTAINERS[Contentful.BLOCKS.QUOTE],
-      transform: (_transform = {}, _transform[Contentful.BLOCKS.QUOTE] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_1] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_2] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_3] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_4] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_5] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_6] = transformUnwrap, _transform["default"] = transformLift, _transform)
-    }]
-  };
-}
+    mode: 'lowest'
+  });
+
+  if (!quote) {
+    return false;
+  }
+
+  if (plateCore.hasSingleChild(quote[0]) && plateCore.isLastChild(quote, container[1])) {
+    return true;
+  }
 
-function toggleQuote(editor) {
+  return false;
+};
+
+function toggleQuote(editor, logAction) {
   if (!editor.selection) return;
   var isActive = isBlockSelected(editor, Contentful.BLOCKS.QUOTE);
+  logAction == null ? void 0 : logAction(isActive ? 'remove' : 'insert', {
+    nodeType: Contentful.BLOCKS.QUOTE
+  });
   slate.Editor.withoutNormalizing(editor, function () {
+    if (!editor.selection) return;
     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 = {
@@ -4571,14 +5308,106 @@ function toggleQuote(editor) {
     }
   });
 }
+var onKeyDownToggleQuote = function onKeyDownToggleQuote(editor, plugin) {
+  return function (event) {
+    var hotkey = plugin.options.hotkey;
+
+    if (hotkey && isHotkey(hotkey, event)) {
+      event.preventDefault();
+      toggleQuote(editor, editor.tracking.onShortcutAction);
+    }
+  };
+};
+
+var withQuote = function withQuote(editor) {
+  var insertFragment = editor.insertFragment;
+
+  editor.insertFragment = function (fragment) {
+    var startingNode = fragment.length && fragment[0];
+    var startsWithBlockquote = slate.Element.isElement(startingNode) && startingNode.type === Contentful.BLOCKS.QUOTE;
+    var containerEntry = plateCore.getAbove(editor, {
+      match: {
+        type: Contentful.TEXT_CONTAINERS
+      }
+    });
+    var containerIsNotEmpty = containerEntry && slate.Node.string(containerEntry[0]) !== '';
+
+    if (startsWithBlockquote && containerIsNotEmpty) {
+      var selection = editor.selection;
+
+      var isContentSelected = function isContentSelected(selection) {
+        return !!selection && slate.Point.compare(selection.anchor, selection.focus) !== 0;
+      }; // if something is selected (highlighted) we replace the selection
+
+
+      if (isContentSelected(selection)) {
+        slate.Transforms["delete"](editor, {
+          at: selection
+        });
+      } // get the cursor entry again, it may be different after deletion
+
+
+      var _containerEntry = plateCore.getAbove(editor, {
+        match: {
+          type: Contentful.TEXT_CONTAINERS
+        }
+      });
+
+      var _containerIsNotEmpty = _containerEntry && slate.Node.string(_containerEntry[0]) !== '';
+
+      if (_containerIsNotEmpty) {
+        slate.Transforms.insertNodes(editor, fragment);
+        return;
+      }
+    }
+
+    insertFragment(fragment);
+  };
+
+  return editor;
+};
+
+function createQuotePlugin() {
+  var _transform;
+
+  return {
+    key: Contentful.BLOCKS.QUOTE,
+    type: Contentful.BLOCKS.QUOTE,
+    isElement: true,
+    component: Quote,
+    options: {
+      hotkey: 'mod+shift+1'
+    },
+    handlers: {
+      onKeyDown: onKeyDownToggleQuote
+    },
+    deserializeHtml: {
+      rules: [{
+        validNodeName: 'BLOCKQUOTE'
+      }]
+    },
+    resetNode: [{
+      // toggle off blockquote on backspace when it's empty
+      hotkey: 'backspace',
+      types: [Contentful.BLOCKS.QUOTE],
+      predicate: shouldResetQuoteOnBackspace,
+      onReset: toggleQuote
+    }],
+    normalizer: [{
+      validChildren: Contentful.CONTAINERS[Contentful.BLOCKS.QUOTE],
+      transform: (_transform = {}, _transform[Contentful.BLOCKS.QUOTE] = transformUnwrap, _transform["default"] = transformLift, _transform)
+    }],
+    withOverrides: withQuote
+  };
+}
 
 function ToolbarQuoteButton(props) {
   var editor = useContentfulEditor();
 
   function handleOnClick() {
     if (!editor) return;
-    toggleQuote(editor);
-    Slate.ReactEditor.focus(editor);
+    toggleQuote(editor, editor.tracking.onToolbarAction);
+    focus(editor);
   }
 
   if (!editor) return null;
@@ -4595,87 +5424,192 @@ var createSelectOnBackspacePlugin = function createSelectOnBackspacePlugin() {
   return plateSelect.createSelectOnBackspacePlugin({
     options: {
       query: {
-        allow: [Contentful.BLOCKS.EMBEDDED_ASSET, Contentful.BLOCKS.EMBEDDED_ENTRY, Contentful.BLOCKS.HR, Contentful.INLINES.EMBEDDED_ENTRY]
+        // `createTextPlugin` is taking care of block elements
+        allow: [Contentful.INLINES.EMBEDDED_ENTRY]
       }
     }
   });
 };
 
-function hasTables(nodes) {
-  return nodes.some(function (_ref) {
-    var type = _ref.type;
-    return type === Contentful.BLOCKS.TABLE;
-  });
-}
+function getCaretTopPoint() {
+  var sel = document.getSelection();
+  if (!sel) return;
+  var r = sel.getRangeAt(0);
+  var rect;
+  var r2; // supposed to be textNode in most cases
+  // but div[contenteditable] when empty
+
+  var node = r.startContainer;
+  var offset = r.startOffset;
+
+  if (offset > 0) {
+    // new range, don't influence DOM state
+    r2 = document.createRange();
+    r2.setStart(node, offset - 1);
+    r2.setEnd(node, offset); // https://developer.mozilla.org/en-US/docs/Web/API/range.getBoundingClientRect
+    // IE9, Safari?(but look good in Safari 8)
+
+    rect = r2.getBoundingClientRect();
+    return {
+      left: rect.right,
+      top: rect.top
+    }; // @ts-expect-error
+  } else if (offset < node.length) {
+    r2 = document.createRange(); // similar but select next on letter
+
+    r2.setStart(node, offset);
+    r2.setEnd(node, offset + 1);
+    rect = r2.getBoundingClientRect();
+    return {
+      left: rect.left,
+      top: rect.top
+    };
+  } else {
+    // textNode has length
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
+    // @ts-expect-error
+    rect = node.getBoundingClientRect(); // @ts-expect-error
 
-var isTableHeaderCell = function isTableHeaderCell(_ref2) {
-  var type = _ref2.type;
-  return type === Contentful.BLOCKS.TABLE_HEADER_CELL;
-};
+    var styles = getComputedStyle(node);
+    var lineHeight = parseInt(styles.lineHeight);
+    var fontSize = parseInt(styles.fontSize); // roughly half the whitespace... but not exactly
 
-function hasHeadersOutsideFirstRow(nodes) {
-  return nodes.filter(function (_ref3) {
-    var type = _ref3.type;
-    return type === Contentful.BLOCKS.TABLE;
-  }).flatMap(function (_ref4) {
-    var children = _ref4.children;
-    return children.slice(1);
-  }).some(function (_ref5) {
-    var children = _ref5.children;
-    return children.some(isTableHeaderCell);
-  });
+    var delta = (lineHeight - fontSize) / 2;
+    return {
+      left: rect.left,
+      top: rect.top + delta
+    };
+  }
+}
+function closePanel(editorId) {
+  document.dispatchEvent(new CustomEvent('close-rte-palette-commands', {
+    detail: {
+      editorId: editorId
+    }
+  }));
+}
+function openPanel(editorId) {
+  document.dispatchEvent(new CustomEvent('open-rte-palette-commands', {
+    detail: {
+      editorId: editorId
+    }
+  }));
 }
 
-function addTableTrackingEvents(editor, _ref6) {
-  var onViewportAction = _ref6.onViewportAction;
-  var insertData = editor.insertData;
-
-  editor.insertData = function (data) {
-    var html = data.getData('text/html');
+// import debounce from 'lodash/debounce';
+var SLASH_COMMANDS_PLUGIN_KEY = 'SlashCommands'; // TODO: Explore a solution using marks and ReactDOM.createPortal to activate the commands panel
 
-    if (html) {
-      var markupBefore = editor.children;
-      insertData(data);
-      var markupAfter = editor.children;
-      setTimeout(function () {
-        if (hasTables(markupBefore)) return;
+function createSlashCommandsPlugin() {
+  return {
+    key: SLASH_COMMANDS_PLUGIN_KEY,
+    type: SLASH_COMMANDS_PLUGIN_KEY,
+    handlers: {
+      onClick: function onClick(editor) {
+        return function () {
+          closePanel(editor.id);
+        };
+      },
+      onKeyDown: function onKeyDown(editor) {
+        return function (event) {
+          closePanel(editor.id);
 
-        if (hasTables(markupAfter)) {
-          onViewportAction('paste', {
-            tablePasted: true,
-            hasHeadersOutsideFirstRow: hasHeadersOutsideFirstRow(markupAfter)
-          });
-        }
-      }, 1);
-    } else {
-      insertData(data);
+          if (event.key === '/') {
+            openPanel(editor.id);
+          }
+        };
+      }
     }
   };
 }
 
-function useTracking(_ref) {
-  var onAction = _ref.onAction;
-  var trackingMemo = React.useMemo(function () {
-    return {
-      onViewportAction: function onViewportAction(actionName, data) {
-        if (data === void 0) {
-          data = {};
-        }
+var style$2 = {
+  container: function container(_ref) {
+    var top = _ref.top,
+        left = _ref.left;
+    return emotion.css({
+      position: 'fixed',
+      top: top - 14,
+      left: left + 10,
+      zIndex: 1,
+      boxShadow: '0 5px 15px rgba(0, 0, 0, 0.15)',
+      borderRadius: '8px',
+      userSelect: 'none'
+    });
+  }
+};
+function SlashCommandsPalette(_ref2) {
+  var editorId = _ref2.editorId;
+
+  var _React$useState = React.useState(null),
+      position = _React$useState[0],
+      setPosition = _React$useState[1];
+
+  var _React$useState2 = React.useState(false),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1]; // The user is not annoyed every time they type `/`
+
+
+  var MAX_TRIES = 3;
+
+  var _React$useState3 = React.useState(0),
+      currentTries = _React$useState3[0],
+      setCurrentTries = _React$useState3[1];
+
+  React.useEffect(function () {
+    function handler(event) {
+      if (editorId !== event.detail.editorId) return;
+      var topLeft = getCaretTopPoint();
+      if (!topLeft) return;
+      setPosition(topLeft);
+      setIsOpen(true);
+      setCurrentTries(function (curr) {
+        return curr + 1;
+      });
+    }
+
+    document.addEventListener('open-rte-palette-commands', handler);
+    return function () {
+      document.removeEventListener('open-rte-palette-commands', handler);
+    };
+  }, [editorId]);
+  React.useEffect(function () {
+    function handler(event) {
+      if (editorId !== event.detail.editorId) return;
+      closePanel();
+    }
+
+    document.addEventListener('close-rte-palette-commands', handler);
+    return function () {
+      return document.removeEventListener('close-rte-palette-commands', handler);
+    };
+  }, [editorId]);
+  React.useEffect(function () {
+    if (!isOpen) return;
+
+    function handler() {
+      closePanel();
+    }
+
+    window.addEventListener('resize', handler);
+    window.addEventListener('scroll', handler, true);
+    return function () {
+      window.removeEventListener('resize', handler);
+      window.removeEventListener('scroll', handler, true);
+    };
+  }, [isOpen]);
+
+  function closePanel() {
+    setIsOpen(false);
+    setPosition(null);
+  }
 
-        return onAction(actionName, _extends({
-          origin: 'viewport-interaction'
-        }, data));
-      }
-    };
-  }, [] // eslint-disable-line
-  );
-  return trackingMemo;
+  if (!isOpen || !position || currentTries > MAX_TRIES) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style$2.container(position),
+    "data-test-id": "rte-slash-commands"
+  }, /*#__PURE__*/React.createElement(f36Components.Card, null, /*#__PURE__*/React.createElement(f36Components.Text, null, "Slash commands are temporarily unavailable.")));
 }
 
-var _constate$2 = /*#__PURE__*/constate(useTracking),
-    TrackingProvider = _constate$2[0],
-    useTrackingContext = _constate$2[1];
-
 var addRow = function addRow(editor, getNextRowPath) {
   if (plateCore.someNode(editor, {
     match: {
@@ -4901,6 +5835,9 @@ var isNotEmpty = function isNotEmpty(editor, _ref4) {
   var path = _ref4[1];
   return Array.from(slate.Node.children(editor, path)).length !== 0;
 };
+var isTable = function isTable(node) {
+  return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.TABLE;
+};
 
 var styles$i = {
   topRight: /*#__PURE__*/emotion.css({
@@ -4921,9 +5858,6 @@ var TableActions = function TableActions() {
   var editor = useContentfulEditor();
   var isDisabled = Slate.useReadOnly();
 
-  var _useTrackingContext = useTrackingContext(),
-      onViewportAction = _useTrackingContext.onViewportAction;
-
   var _React$useState = React__default.useState(false),
       isOpen = _React$useState[0],
       setOpen = _React$useState[1];
@@ -4934,11 +5868,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]);
@@ -4977,11 +5907,11 @@ var TableActions = function TableActions() {
       }); // Tracking
 
       var actionName = type + "Table" + (element === 'Table' ? '' : element);
-      onViewportAction(actionName, {
+      editor.tracking.onViewportAction(actionName, {
         tableSize: tableSize
       });
     };
-  }, [editor, isHeaderEnabled, close, onViewportAction]);
+  }, [editor, isHeaderEnabled, close]);
 
   if (isDisabled) {
     return null;
@@ -5023,89 +5953,465 @@ var TableActions = function TableActions() {
 };
 
 var _templateObject$7;
-var style$2 = /*#__PURE__*/emotion.css(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  min-width: 48px;\n  position: relative;\n  vertical-align: top;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray400);
+var style$3 = /*#__PURE__*/emotion.css(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  min-width: 48px;\n  position: relative;\n  vertical-align: top;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray400);
 var Cell = function Cell(props) {
   var isSelected = Slate.useSelected();
   return /*#__PURE__*/React.createElement("td", Object.assign({}, props.attributes, props.element.data, {
-    className: style$2
+    className: style$3
   }), isSelected && /*#__PURE__*/React.createElement(TableActions, null), props.children);
 };
 
 var _templateObject$8;
-var style$3 = /*#__PURE__*/emotion.css(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  font-weight: ", ";\n  text-align: left;\n  min-width: 48px;\n  position: relative;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray200, tokens.gray400, tokens.fontWeightMedium);
+var style$4 = /*#__PURE__*/emotion.css(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-clip: padding-box;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-collapse: collapse;\n  padding: 10px 12px;\n  font-weight: ", ";\n  text-align: left;\n  min-width: 48px;\n  position: relative;\n\n  div:last-child {\n    margin-bottom: 0;\n  }\n"])), tokens.gray200, tokens.gray400, tokens.fontWeightNormal);
 var HeaderCell = function HeaderCell(props) {
   var isSelected = Slate.useSelected();
   return /*#__PURE__*/React.createElement("th", Object.assign({}, props.attributes, props.element.data, {
-    className: style$3
+    className: style$4
   }), isSelected && /*#__PURE__*/React.createElement(TableActions, null), props.children);
 };
 
 var _templateObject$9;
-var style$4 = /*#__PURE__*/emotion.css(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n\n  &:hover td {\n    background-color: transparent !important;\n  }\n"])), tokens.gray400);
+var style$5 = /*#__PURE__*/emotion.css(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-collapse: collapse;\n\n  &:hover td {\n    background-color: transparent !important;\n  }\n"])), tokens.gray400);
 var Row = function Row(props) {
   return /*#__PURE__*/React.createElement("tr", Object.assign({}, props.attributes, {
-    className: style$4
+    className: style$5
   }), props.children);
 };
 
-var _templateObject$a;
-var style$5 = /*#__PURE__*/emotion.css(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 1.5em;\n  border-collapse: collapse;\n  border-radius: 5px;\n  border-style: hidden;\n  box-shadow: 0 0 0 1px ", ";\n  width: 100%;\n  table-layout: fixed;\n  overflow: hidden;\n"])), tokens.gray400);
-var Table = function Table(props) {
-  return /*#__PURE__*/React.createElement("table", Object.assign({}, props.attributes, {
-    className: style$5
-  }), /*#__PURE__*/React.createElement("tbody", null, props.children));
-};
+var _templateObject$a;
+var style$6 = /*#__PURE__*/emotion.css(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 1.5em;\n  border-collapse: collapse;\n  border-radius: 5px;\n  border-style: hidden;\n  box-shadow: 0 0 0 1px ", ";\n  width: 100%;\n  table-layout: fixed;\n  overflow: hidden;\n"])), tokens.gray400);
+var Table = function Table(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-block-type": Contentful.BLOCKS.TABLE
+  }, /*#__PURE__*/React.createElement("table", Object.assign({
+    className: style$6
+  }, props.attributes), /*#__PURE__*/React.createElement("tbody", null, props.children)));
+};
+
+/**
+ * Removes table wrappers when pasting a single table cell
+ *
+ * In Plate/Slate, copying the content of a table cell wraps
+ * it in a <table><tr><td>{content}</td></tr></table> even
+ * when copying partial cell content.
+ *
+ * That's really annoying as there is no way to remove the table
+ * wrappers in that case.
+ */
+
+var trimUnnecessaryTableWrapper = function trimUnnecessaryTableWrapper(node) {
+  var _node$children, _row$children;
+
+  if (!slate.Element.isElement(node)) {
+    return [node];
+  } // must be a table with a single row
+
+
+  if (node.type !== Contentful.BLOCKS.TABLE || ((_node$children = node.children) == null ? void 0 : _node$children.length) !== 1) {
+    return [node];
+  }
+
+  var row = node.children[0]; // the row must contain a single cell
+
+  if ((row == null ? void 0 : (_row$children = row.children) == null ? void 0 : _row$children.length) !== 1) {
+    return [node];
+  }
+
+  var cell = row.children[0];
+  return cell.children;
+};
+
+var insertTableFragment = function insertTableFragment(editor) {
+  var insertFragment = editor.insertFragment;
+  return function (fragments) {
+    var _editor$selection;
+
+    if (!editor.selection) {
+      return;
+    }
+
+    fragments = fragments.flatMap(trimUnnecessaryTableWrapper); // We need to make sure we have a new, empty and clean paragraph in order to paste tables as-is due to how Slate behaves
+    // More info: https://github.com/ianstormtaylor/slate/pull/4489 and https://github.com/ianstormtaylor/slate/issues/4542
+
+    var isInsertingTable = fragments.some(function (fragment) {
+      return isTable(fragment);
+    });
+    var isTableFirstFragment = fragments.findIndex(function (fragment) {
+      return isTable(fragment);
+    }) === 0;
+    var currentLineHasText = plateCore.getText(editor, (_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.path) !== '';
+
+    if (isInsertingTable && isTableFirstFragment && currentLineHasText) {
+      insertEmptyParagraph(editor);
+    }
+
+    return insertFragment(fragments);
+  };
+};
+
+var onKeyDownTable = function onKeyDownTable(editor, plugin) {
+  var defaultHandler = plateTable.onKeyDownTable(editor, plugin);
+  return function (event) {
+    // This fixes `Cannot resolve a Slate point from DOM point: [object HTMLDivElement]` when typing while the cursor is before table
+    var windowSelection = window.getSelection();
+
+    if (windowSelection) {
+      var _windowSelection$anch, _windowSelection$anch2;
+
+      // @ts-expect-error
+      var blockType = (_windowSelection$anch = windowSelection.anchorNode.attributes) == null ? void 0 : (_windowSelection$anch2 = _windowSelection$anch['data-block-type']) == null ? void 0 : _windowSelection$anch2.value; // this attribute comes from `plugins/Table/components/Table.tsx`
+
+      var isBeforeTable = blockType === Contentful.BLOCKS.TABLE;
+
+      if (isBeforeTable) {
+        if (event.key === 'Enter') {
+          var above = plateCore.getAbove(editor, {
+            match: {
+              type: Contentful.BLOCKS.TABLE
+            }
+          });
+          if (!above) return;
+          var tablePath = above[1];
+          insertEmptyParagraph(editor, {
+            at: tablePath,
+            select: true
+          });
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+    } // Pressing Tab on the last cell creates a new row
+    // Otherwise, jumping between cells is handled in the defaultKeyDownTable
+
+
+    if (event.key === 'Tab' && !event.shiftKey) {
+      event.preventDefault();
+      var res = plateTable.getTableCellEntry(editor, {});
+
+      if (res) {
+        var tableElement = res.tableElement,
+            tableRow = res.tableRow,
+            tableCell = res.tableCell;
+        var isLastCell = plateCore.isLastChild(tableRow, tableCell[1]);
+        var isLastRow = plateCore.isLastChild(tableElement, tableRow[1]);
+
+        if (isLastRow && isLastCell) {
+          addRowBelow(editor); // skip default handler
+
+          return;
+        }
+      }
+    }
+
+    defaultHandler(event);
+  };
+};
+
+var _extends2, _extends4, _inlines;
+var inlines = /*#__PURE__*/Object.values(Contentful.INLINES).map(function (type) {
+  return {
+    type: type
+  };
+});
+var schema = {
+  document: {
+    nodes: [{
+      types: /*#__PURE__*/Contentful.TOP_LEVEL_BLOCKS.map(function (type) {
+        return {
+          type: type
+        };
+      })
+    }]
+  },
+  blocks: /*#__PURE__*/_extends((_extends2 = {}, _extends2[Contentful.BLOCKS.PARAGRAPH] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_1] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_2] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_3] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_4] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_5] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_6] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2), /*#__PURE__*/Contentful.VOID_BLOCKS.reduce(function (blocks, nodeType) {
+    var _extends3;
+
+    return _extends({}, blocks, (_extends3 = {}, _extends3[nodeType] = {
+      isVoid: true
+    }, _extends3));
+  }, {}), (_extends4 = {}, _extends4[Contentful.BLOCKS.QUOTE] = {
+    nodes: [{
+      match: [/*#__PURE__*/Contentful.CONTAINERS[Contentful.BLOCKS.QUOTE].map(function (type) {
+        return {
+          type: type
+        };
+      })],
+      min: 1
+    }],
+    normalize: function normalize(editor, error) {
+      if (error.code === 'child_type_invalid') {
+        return editor.unwrapBlockByKey(error.node.key, Contentful.BLOCKS.QUOTE);
+      }
+    }
+  }, _extends4)),
+  inlines: (_inlines = {}, _inlines[Contentful.INLINES.HYPERLINK] = {
+    nodes: [{
+      match: [{
+        object: 'text'
+      }]
+    }]
+  }, _inlines[Contentful.INLINES.ENTRY_HYPERLINK] = {
+    nodes: [{
+      match: [{
+        object: 'text'
+      }]
+    }]
+  }, _inlines[Contentful.INLINES.ASSET_HYPERLINK] = {
+    nodes: [{
+      match: [{
+        object: 'text'
+      }]
+    }]
+  }, _inlines[Contentful.INLINES.EMBEDDED_ENTRY] = {
+    isVoid: true
+  }, _inlines)
+};
+
+function getCharacterCount(editor) {
+  var document = contentfulSlateJSAdapter.toContentfulDocument({
+    document: editor.children,
+    schema: schema
+  });
+  return richTextPlainTextRenderer.documentToPlainTextString(document).length;
+}
+
+var actionOrigin = {
+  TOOLBAR: 'toolbar-icon',
+  SHORTCUT: 'shortcut',
+  VIEWPORT: 'viewport-interaction',
+  COMMAND_PALETTE: 'command-palette'
+};
+function getPastingSource(data) {
+  var textHtml = data.getData('text/html');
+  var doc = new DOMParser().parseFromString(textHtml, 'text/html');
+
+  if (doc.querySelector('[id*="docs-internal-guid"]')) {
+    return 'Google Docs';
+  }
+
+  if (doc.querySelector('google-sheets-html-origin') || doc.querySelector('[data-sheets-value]')) {
+    return 'Google Spreadsheets';
+  }
+
+  if (doc.querySelector('meta[content*="Microsoft Excel"]')) {
+    return 'Microsoft Excel';
+  }
+
+  if (doc.querySelector('meta[content*="Microsoft Word"]')) {
+    return 'Microsoft Word';
+  } // TODO: MS Word Online doesn't give us specific tags, we might need to have a closer look at its tracking result since we are using generic values to identify it
+
+
+  if (doc.querySelector('[style*="Arial_MSFontService"]') && (doc.querySelector('.TextRun') || doc.querySelector('.OutlineElement'))) {
+    return 'Microsoft Word Online';
+  }
+
+  if (doc.querySelector('meta[content="Cocoa HTML Writer"]')) {
+    return 'Apple Notes';
+  }
+
+  if (doc.querySelector('[style*="Slack-Lato, Slack-Fractions"]')) {
+    return 'Slack';
+  }
+
+  return 'Unknown';
+}
+var createTrackingPlugin = function createTrackingPlugin(onAction) {
+  var trackingActions = {
+    onViewportAction: function onViewportAction(actionName, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
+      return onAction(actionName, _extends({
+        origin: actionOrigin.VIEWPORT
+      }, data));
+    },
+    onShortcutAction: function onShortcutAction(actionName, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
+      return onAction(actionName, _extends({
+        origin: actionOrigin.SHORTCUT
+      }, data));
+    },
+    onToolbarAction: function onToolbarAction(actionName, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
+      return onAction(actionName, _extends({
+        origin: actionOrigin.TOOLBAR
+      }, data));
+    },
+    onCommandPaletteAction: function onCommandPaletteAction(actionName, data) {
+      if (data === void 0) {
+        data = {};
+      }
+
+      return onAction(actionName, _extends({
+        origin: actionOrigin.COMMAND_PALETTE
+      }, data));
+    }
+  };
+  return {
+    key: 'TrackingPlugin',
+    withOverrides: function withOverrides(editor) {
+      var insertData = editor.insertData;
+      editor.tracking = trackingActions;
+
+      editor.insertData = function (data) {
+        var isCopyAndPaste = data.types.length !== 0;
+
+        if (isCopyAndPaste) {
+          var _window$getSelection;
+
+          var characterCountSelection = (_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString().length;
+          var characterCountBefore = getCharacterCount(editor);
+          setTimeout(function () {
+            var characterCountAfter = getCharacterCount(editor);
+            trackingActions.onShortcutAction('paste', {
+              characterCountAfter: characterCountAfter,
+              characterCountBefore: characterCountBefore,
+              characterCountSelection: characterCountSelection,
+              source: getPastingSource(data)
+            });
+          });
+        }
+
+        insertData(data);
+      };
+
+      return editor;
+    }
+  };
+};
+
+function hasTables(nodes) {
+  return nodes.some(function (_ref) {
+    var type = _ref.type;
+    return type === Contentful.BLOCKS.TABLE;
+  });
+}
+
+var isTableHeaderCell = function isTableHeaderCell(_ref2) {
+  var type = _ref2.type;
+  return type === Contentful.BLOCKS.TABLE_HEADER_CELL;
+};
+
+function hasHeadersOutsideFirstRow(nodes) {
+  return nodes.filter(function (_ref3) {
+    var type = _ref3.type;
+    return type === Contentful.BLOCKS.TABLE;
+  }).flatMap(function (_ref4) {
+    var children = _ref4.children;
+    return children.slice(1);
+  }).some(function (_ref5) {
+    var children = _ref5.children;
+    return children.some(isTableHeaderCell);
+  });
+}
+
+function addTableTrackingEvents(editor) {
+  var insertData = editor.insertData;
+
+  editor.insertData = function (data) {
+    var html = data.getData('text/html');
+
+    if (html) {
+      var markupBefore = editor.children;
+      insertData(data);
+      var markupAfter = editor.children;
+      setTimeout(function () {
+        if (hasTables(markupBefore)) return;
+
+        if (hasTables(markupAfter)) {
+          editor.tracking.onViewportAction('paste', {
+            tablePasted: true,
+            source: getPastingSource(data),
+            hasHeadersOutsideFirstRow: hasHeadersOutsideFirstRow(markupAfter)
+          });
+        }
+      }, 1);
+    } else {
+      insertData(data);
+    }
+  };
+}
+var withInvalidCellChildrenTracking = function withInvalidCellChildrenTracking(transformer) {
+  return function (editor, childEntry) {
+    var node = childEntry[0];
 
-var createTableOnKeyDown = function createTableOnKeyDown(editor, plugin) {
-  var defaultHandler = plateTable.onKeyDownTable(editor, plugin);
-  return function (event) {
-    if (event.key === 'Backspace' && currentSelectionStartsTableCell(editor) || event.key === 'Delete' && currentSelectionPrecedesTableCell(editor)) {
-      // The default behavior here would be to delete the preceding or forthcoming
-      // leaf node, in this case a cell or header cell. But we don't want to do that,
-      // because it would leave us with a non-standard number of table cells.
-      event.preventDefault();
-      event.stopPropagation();
-      return;
+    if (slate.Element.isElement(node)) {
+      var _editor$tracking;
+
+      (_editor$tracking = editor.tracking) == null ? void 0 : _editor$tracking.onViewportAction('invalidTablePaste', {
+        nodeType: node.type
+      });
     }
 
-    defaultHandler(event);
+    return transformer(editor, childEntry);
   };
 };
 
-var createTablePlugin = function createTablePlugin(tracking) {
+var createTablePlugin = function createTablePlugin() {
   var _overrideByKey;
 
   return plateTable.createTablePlugin({
     type: Contentful.BLOCKS.TABLE,
     handlers: {
-      onKeyDown: createTableOnKeyDown
+      onKeyDown: onKeyDownTable
     },
-    withOverrides: function withOverrides(editor) {
-      addTableTrackingEvents(editor, tracking);
-      var insertFragment = editor.insertFragment;
-
-      editor.insertFragment = function (fragments) {
-        // We need to make sure we have a new, empty and clean paragraph in order to paste tables as-is due to how Slate behaves
-        // More info: https://github.com/ianstormtaylor/slate/pull/4489 and https://github.com/ianstormtaylor/slate/issues/4542
-        var fragmentHasTable = fragments.some(function (fragment) {
-          return fragment.type === Contentful.BLOCKS.TABLE;
-        });
-
-        if (fragmentHasTable) {
-          var emptyParagraph = {
-            type: Contentful.BLOCKS.PARAGRAPH,
-            children: [{
-              text: ''
-            }],
-            data: {},
-            isVoid: false
-          };
-          slate.Transforms.insertNodes(editor, emptyParagraph);
-        }
-
-        insertFragment(fragments);
-      };
-
+    withOverrides: function withOverrides(editor, plugin) {
+      // injects important fixes from plate's original table plugin
+      plateTable.withTable(editor, plugin);
+      addTableTrackingEvents(editor);
+      editor.insertFragment = insertTableFragment(editor);
       return editor;
     },
     overrideByKey: (_overrideByKey = {}, _overrideByKey[plateTable.ELEMENT_TABLE] = {
@@ -5166,14 +6472,14 @@ var createTablePlugin = function createTablePlugin(tracking) {
       component: HeaderCell,
       normalizer: [{
         validChildren: Contentful.CONTAINERS[Contentful.BLOCKS.TABLE_HEADER_CELL],
-        transform: transformParagraphs
+        transform: withInvalidCellChildrenTracking(transformParagraphs)
       }]
     }, _overrideByKey[plateTable.ELEMENT_TD] = {
       type: Contentful.BLOCKS.TABLE_CELL,
       component: Cell,
       normalizer: [{
         validChildren: Contentful.CONTAINERS[Contentful.BLOCKS.TABLE_CELL],
-        transform: transformParagraphs
+        transform: withInvalidCellChildrenTracking(transformParagraphs)
       }]
     }, _overrideByKey)
   });
@@ -5181,10 +6487,6 @@ var createTablePlugin = function createTablePlugin(tracking) {
 
 function ToolbarTableButton(props) {
   var editor = useContentfulEditor();
-
-  var _useTrackingContext = useTrackingContext(),
-      onViewportAction = _useTrackingContext.onViewportAction;
-
   var isActive = editor && isTableActive(editor);
 
   function handleClick() {
@@ -5205,9 +6507,9 @@ function ToolbarTableButton(props) {
               return _context.abrupt("return");
 
             case 2:
-              onViewportAction('insertTable');
+              editor.tracking.onToolbarAction('insertTable');
               insertTableAndFocusFirstCell(editor);
-              Slate.ReactEditor.focus(editor);
+              focus(editor);
 
             case 5:
             case "end":
@@ -5233,81 +6535,172 @@ function ToolbarTableButton(props) {
 function createTextPlugin() {
   return {
     key: 'TextPlugin',
+    handlers: {
+      // Triple selection in a non-Firefox browser undesirably selects
+      // the start of the next block. Editor.unhangRange helps removing
+      // the extra block at the end.
+      onMouseUp: function onMouseUp(editor) {
+        return function () {
+          if (!editor.selection) {
+            return;
+          }
+
+          slate.Transforms.setSelection(editor, slate.Editor.unhangRange(editor, editor.selection));
+        };
+      }
+    },
     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);
-          }
-        }),
-            nodes = _Editor$nodes[0];
 
-        if (nodes) {
-          var paragraphOrHeading = nodes[0],
-              path = nodes[1];
-          var isTextEmpty = plateCore.isAncestorEmpty(editor, paragraphOrHeading); // We ignore paragraphs/headings that are children of ul, ol, blockquote, tables, etc
+      var deleteForward = editor.deleteForward,
+          deleteBackward = editor.deleteBackward;
 
-          var isRootLevel = path.length === 1;
+      editor.deleteBackward = function (unit) {
+        deleteEmptyParagraph(unit, editor, deleteBackward);
+      };
 
-          if (isTextEmpty && isRootLevel) {
-            slate.Transforms.removeNodes(editor, {
-              at: path
-            });
-          } else {
-            deleteForward(unit);
-          }
-        } else {
-          deleteForward(unit);
-        }
+      editor.deleteForward = function (unit) {
+        deleteEmptyParagraph(unit, editor, deleteForward);
       };
 
+      fixPasteAsPlainText(editor);
       return editor;
     }
   };
 }
 
-var createTrailingParagraphPlugin = function createTrailingParagraphPlugin() {
-  return plateTrailingBlock.createTrailingBlockPlugin({
-    options: {
-      type: Contentful.BLOCKS.PARAGRAPH,
-      level: 0
+function deleteEmptyParagraph(unit, editor, deleteFunction) {
+  var entry = plateCore.getAbove(editor, {
+    match: {
+      type: Contentful.TEXT_CONTAINERS
     }
   });
-};
 
+  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;
+    var hasSiblings = editor.children.length > 1; // prevent editor from losing focus
+
+    if (isTextEmpty && isRootLevel && hasSiblings) {
+      slate.Transforms.removeNodes(editor, {
+        at: path
+      });
+      var prevNode = slate.Editor.before(editor, editor.selection, {
+        unit: unit
+      });
+
+      if (prevNode) {
+        var _Editor$nodes = slate.Editor.nodes(editor, {
+          match: function match(node) {
+            return plateCore.queryNode([node, prevNode.path], {
+              allow: [Contentful.BLOCKS.EMBEDDED_ASSET, Contentful.BLOCKS.EMBEDDED_ENTRY, Contentful.BLOCKS.HR]
+            });
+          },
+          at: prevNode
+        }),
+            prevCell = _Editor$nodes[0];
+
+        if (prevCell) {
+          slate.Transforms.select(editor, prevNode);
+        }
+      }
+    } else {
+      deleteFunction(unit);
+    }
+  } else {
+    deleteFunction(unit);
+  }
+}
 /**
- * Re-creates a void node with valid children.
+ * To be compatible with the old behavior we need to treat each 2 consecutive
+ * line breaks as a new paragraph when pasting as plain text (also known as
+ * paste and match style in macOS)
  */
 
-var transformVoid = function transformVoid(editor, _ref) {
-  var node = _ref[0],
-      path = _ref[1];
 
-  var validVoid = _extends({}, node, {
-    children: [{
-      text: ''
-    }]
-  }); // A workaround because Slate doesn't allow adjusting void nodes children
+function fixPasteAsPlainText(editor) {
+  editor.insertTextData = function (data) {
+    var text = data.getData('text/plain');
 
+    if (!text) {
+      return false;
+    }
 
-  slate.Transforms.removeNodes(editor, {
-    at: path
-  });
-  slate.Transforms.insertNodes(editor, [validVoid], {
-    at: path
+    var lines = text.split(/\n{2}/);
+    var split = false;
+
+    for (var _iterator = _createForOfIteratorHelperLoose(lines), _step; !(_step = _iterator()).done;) {
+      var line = _step.value;
+
+      // empty lines
+      if (/^(\r\n?|\n)$/.test(line)) {
+        continue;
+      }
+
+      if (split) {
+        slate.Transforms.splitNodes(editor, {
+          always: true
+        });
+      }
+
+      editor.insertText(line);
+      split = true;
+    }
+
+    return true;
+  };
+}
+
+var createTrailingParagraphPlugin = function createTrailingParagraphPlugin() {
+  return plateTrailingBlock.createTrailingBlockPlugin({
+    options: {
+      type: Contentful.BLOCKS.PARAGRAPH,
+      level: 0
+    }
   });
 };
 
 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,49 +6710,35 @@ 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;
         }
       }
-    }],
-    normalizer: [{
-      match: {
-        isVoid: true
-      },
-      validNode: function validNode(editor, _ref3) {
-        var path = _ref3[1];
-        var children = Array.from(slate.Node.children(editor, path));
-
-        if (children.length !== 1) {
-          return false;
-        }
-
-        var _children$ = children[0],
-            textNode = _children$[0];
-        return slate.Text.isText(textNode) && textNode.text === '';
-      },
-      transform: transformVoid
     }]
   };
 };
 
-var getPlugins = function getPlugins(sdk, tracking) {
+var getPlugins = function getPlugins(sdk, onAction) {
   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
+  plateCore.createDeserializeHtmlPlugin(), plateCore.createDeserializeAstPlugin(), plateSerializerDocx.createDeserializeDocxPlugin(), // Tracking - This should come first so all plugins below will have access to `editor.tracking`
+  createTrackingPlugin(onAction), // Global / Global shortcuts
+  createDragAndDropPlugin(), createSlashCommandsPlugin(), // Block Elements
+  createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
   createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
   createMarksPlugin(), // Other
   createTrailingParagraphPlugin(), createTextPlugin(), createVoidsPlugin(), createSelectOnBackspacePlugin(), // Pasting content from other sources
   createPasteHTMLPlugin(), // These plugins drive their configurations from the list of plugins
   // above. They MUST come last.
-  createSoftBreakPlugin(), createExitBreakPlugin(), createNormalizerPlugin()];
+  createSoftBreakPlugin(), createExitBreakPlugin(), createResetNodePlugin(), createNormalizerPlugin()];
 };
 var disableCorePlugins = {
   // Temporarily until the upstream issue is fixed.
@@ -5371,6 +6750,117 @@ var disableCorePlugins = {
   eventEditor: true
 };
 
+var isTextElement = function isTextElement(node) {
+  return 'text' in node;
+};
+/**
+ * Ensures all nodes have a child leaf text element. This should be handled by
+ * Slate but its behavior has proven to be buggy and unpredictable.
+ */
+
+
+function sanitizeIncomingSlateDoc(nodes) {
+  if (nodes === void 0) {
+    nodes = [];
+  }
+
+  return nodes.map(function (node) {
+    var _node$children;
+
+    if (isTextElement(node)) {
+      return node;
+    }
+
+    if (((_node$children = node.children) == null ? void 0 : _node$children.length) === 0) {
+      return _extends({}, node, {
+        children: [{
+          text: '',
+          data: {}
+        }]
+      });
+    }
+
+    return _extends({}, node, {
+      children: sanitizeIncomingSlateDoc(node.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;
+};
+/*
+ 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 Contentful rich text document to the corresponding slate editor
+ * value
+ */
+
+var documentToEditorValue = function documentToEditorValue(doc) {
+  var slateDoc = 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
+  });
+  return sanitizeIncomingSlateDoc(slateDoc);
+};
+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({
@@ -5417,7 +6907,8 @@ var styles$j = {
     }
   }),
   disabled: /*#__PURE__*/emotion.css({
-    background: tokens.gray100
+    background: tokens.gray100,
+    cursor: 'not-allowed'
   })
 };
 
@@ -5462,45 +6953,23 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
     return setEmbedDropdownOpen(!isEmbedDropdownOpen);
   };
 
-  var _useState2 = React.useState(false),
-      canAccessAssets = _useState2[0],
-      setCanAccessAssets = _useState2[1];
-
-  React__default.useEffect(function () {
-    sdk.access.can('read', 'Asset').then(setCanAccessAssets);
-  }, [sdk]);
   var inlineEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, Contentful.INLINES.EMBEDDED_ENTRY);
-  var blockEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
-  var blockAssetEmbedEnabled = canAccessAssets && isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
-  var numEnabledEmbeds = [inlineEntryEmbedEnabled, blockEntryEmbedEnabled, blockAssetEmbedEnabled].filter(Boolean).length;
-  var shouldDisplayDropdown = numEnabledEmbeds > 1 || isDisabled; // Avoids UI glitching when switching back and forth between
-  // different layouts
+  var blockEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks; // Removed access check following https://contentful.atlassian.net/browse/DANTE-486
+  // TODO: refine permissions check in order to account for tags in rules and then readd access.can('read', 'Asset')
 
-  React__default.useEffect(function () {
-    if (!shouldDisplayDropdown) {
-      setEmbedDropdownOpen(false);
-    }
-  }, [shouldDisplayDropdown]);
+  var blockAssetEmbedEnabled = isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
   var actions = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, blockEntryEmbedEnabled && /*#__PURE__*/React__default.createElement(EmbeddedEntityBlockToolbarIcon, {
     isDisabled: !!isDisabled,
     nodeType: Contentful.BLOCKS.EMBEDDED_ENTRY,
-    onClose: onCloseEntityDropdown,
-    isButton: !shouldDisplayDropdown
+    onClose: onCloseEntityDropdown
   }), inlineEntryEmbedEnabled && /*#__PURE__*/React__default.createElement(ToolbarEmbeddedEntityInlineButton, {
     isDisabled: !!isDisabled || isLinkActive(editor),
-    onClose: onCloseEntityDropdown,
-    isButton: !shouldDisplayDropdown
+    onClose: onCloseEntityDropdown
   }), blockAssetEmbedEnabled && /*#__PURE__*/React__default.createElement(EmbeddedEntityBlockToolbarIcon, {
     isDisabled: !!isDisabled,
     nodeType: Contentful.BLOCKS.EMBEDDED_ASSET,
-    onClose: onCloseEntityDropdown,
-    isButton: !shouldDisplayDropdown
+    onClose: onCloseEntityDropdown
   }));
-
-  if (!shouldDisplayDropdown) {
-    return actions;
-  }
-
   return /*#__PURE__*/React__default.createElement(EmbeddedEntityDropdownButton, {
     isDisabled: isDisabled,
     onClose: onCloseEntityDropdown,
@@ -5576,10 +7045,10 @@ var Toolbar = function Toolbar(_ref) {
     isDisabled: isDisabled
   })), validationInfo.isAnyBlockFormattingEnabled && /*#__PURE__*/React__default.createElement("span", {
     className: styles$k.divider
-  }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
-    isDisabled: isDisabled || !canInsertBlocks
   }), /*#__PURE__*/React__default.createElement(ToolbarListButton, {
     isDisabled: isDisabled || !canInsertBlocks
+  }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
+    isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.HR) && /*#__PURE__*/React__default.createElement(ToolbarHrButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.TABLE) && /*#__PURE__*/React__default.createElement(ToolbarTableButton, {
@@ -5622,50 +7091,133 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
   }, children);
 };
 
+/**
+ * Returns whether a given operation is relevant enough to trigger a save.
+ */
+
+var isRelevantOperation = function isRelevantOperation(op) {
+  if (op.type === 'set_selection') {
+    return false;
+  }
+
+  return true;
+};
+
+var useOnValueChanged = function useOnValueChanged(_ref) {
+  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({
+        document: document,
+        schema: schema
+      }));
+    }, 500);
+  }, [handler]);
+  return React.useCallback(function (value) {
+    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);
+    }
+  }, [editorId, onChange, skip, onSkip]);
+};
+
 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 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 _useState = React.useState(true),
+      isFirstRender = _useState[0],
+      setIsFirstRender = _useState[1];
+
+  var _useState2 = React.useState(false),
+      pendingExternalUpdate = _useState2[0],
+      setPendingExternalUpdate = _useState2[1];
+
+  var onValueChanged = useOnValueChanged({
+    editorId: id,
+    handler: props.onChange,
+    skip: pendingExternalUpdate || isFirstRender,
+    onSkip: function onSkip() {
+      return setPendingExternalUpdate(false);
+    }
   });
-  var doc = sanitizeIncomingSlateDoc(docFromAdapter);
+  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();
 
-  var _useState = React.useState(doc),
-      value = _useState[0],
-      setValue = _useState[1];
+    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);
-  var plugins = React__default.useMemo(function () {
-    return getPlugins(props.sdk, tracking);
-  }, [props.sdk, tracking]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  React.useEffect(function () {
+    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, {
+    value: id
+  }, /*#__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,
+    id: id,
     plugins: plugins,
     disableCorePlugins: disableCorePlugins,
     editableProps: {
       className: classNames,
       readOnly: props.isDisabled
     },
-    onChange: function onChange(slateDoc) {
-      setValue(slateDoc);
-      var contentfulDoc = contentfulSlatejsAdapter.toContentfulDocument({
-        document: slateDoc,
-        schema: schema
-      });
-      props.onChange == null ? void 0 : props.onChange(contentfulDoc);
-    }
+    onChange: onValueChanged
   }, !props.isToolbarHidden && /*#__PURE__*/React__default.createElement(StickyToolbarWrapper, {
     isDisabled: props.isDisabled
   }, /*#__PURE__*/React__default.createElement(Toolbar, {
     isDisabled: props.isDisabled
-  }))));
+  })), /*#__PURE__*/React__default.createElement(SlashCommandsPalette, {
+    editorId: id
+  })))));
 };
 
 var RichTextEditor = function RichTextEditor(props) {
@@ -5677,12 +7229,9 @@ 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(SdkProvider, {
-    sdk: sdk
-  }, /*#__PURE__*/React__default.createElement(TrackingProvider, {
-    onAction: onAction || noop
   }, /*#__PURE__*/React__default.createElement(fieldEditorShared.FieldConnector, {
     throttle: 0,
     field: sdk.field,
@@ -5692,19 +7241,16 @@ var RichTextEditor = function RichTextEditor(props) {
   }, function (_ref) {
     var lastRemoteValue = _ref.lastRemoteValue,
         disabled = _ref.disabled,
-        setValue = _ref.setValue,
-        externalReset = _ref.externalReset;
-    return /*#__PURE__*/React__default.createElement(ContentfulEditorProvider, {
-      sdk: sdk
-    }, /*#__PURE__*/React__default.createElement(ConnectedRichTextEditor, Object.assign({}, otherProps, {
-      key: "rich-text-editor-" + externalReset,
+        setValue = _ref.setValue;
+    return /*#__PURE__*/React__default.createElement(ConnectedRichTextEditor, Object.assign({}, otherProps, {
+      key: "rich-text-editor-" + id,
       value: lastRemoteValue,
       sdk: sdk,
-      onAction: onAction || noop,
+      onAction: onAction,
       isDisabled: disabled,
       onChange: setValue
-    })));
-  }))));
+    }));
+  }));
 };
 
 var LINK_TYPES$1 = {