@contentful/field-editor-rich-text 2.0.4 → 2.1.0

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

@@ -16,16 +16,16 @@ var noop = _interopDefault(require('lodash/noop'));
 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 constate = _interopDefault(require('constate'));
+var isHotkey = _interopDefault(require('is-hotkey'));
+var tokens = _interopDefault(require('@contentful/f36-tokens'));
 var find = _interopDefault(require('lodash/find'));
 var flow = _interopDefault(require('lodash/flow'));
 var get = _interopDefault(require('lodash/get'));
 var f36Icons = require('@contentful/f36-icons');
-var tokens = _interopDefault(require('@contentful/f36-tokens'));
 var plateList = require('@udecode/plate-list');
 var castArray = _interopDefault(require('lodash/castArray'));
 var plateBasicMarks = require('@udecode/plate-basic-marks');
@@ -341,65 +341,6 @@ var createResetNodePlugin = function createResetNodePlugin() {
   });
 };
 
-function createDragAndDropPlugin() {
-  var DRAGGABLE_TYPES = [Contentful.BLOCKS.EMBEDDED_ENTRY, Contentful.BLOCKS.EMBEDDED_ASSET, Contentful.BLOCKS.HR, Contentful.INLINES.EMBEDDED_ENTRY];
-  /**
-   * HTML node names where dropping should be allowed
-   * Usually for elements where `Transforms.removeNodes` is needed
-   * TODO: looking up for html nodes is not the best solution and it won't scale but it works fine for our current cases/elements
-   */
-
-  var ON_DROP_ALLOWED_TYPES = {
-    TABLE: [Contentful.INLINES.EMBEDDED_ENTRY]
-  };
-  return {
-    key: 'DragAndDropPlugin',
-    handlers: {
-      // If true, the next handlers will be skipped.
-      onDrop: function onDrop(editor) {
-        return function (event) {
-          var _Array$from = Array.from(plateCore.getNodes(editor, {
-            match: function match(node) {
-              return DRAGGABLE_TYPES.includes(node == null ? void 0 : node.type);
-            }
-          })),
-              draggingBlock = _Array$from[0];
-
-          if (!draggingBlock) return false;
-          var draggingNode = draggingBlock[0];
-          if (!event.nativeEvent.target) return false; // TODO: looking up for html nodes is not the best solution and it won't scale, we need to find a way to know the dropping target slate element
-
-          var dropDisallowed = getParents(event.nativeEvent.target).some(function (node) {
-            var _ON_DROP_ALLOWED_TYPE;
-
-            return ON_DROP_ALLOWED_TYPES[node.nodeName] ? !((_ON_DROP_ALLOWED_TYPE = ON_DROP_ALLOWED_TYPES[node.nodeName]) != null && _ON_DROP_ALLOWED_TYPE.includes(draggingNode.type)) : false;
-          });
-
-          if (!dropDisallowed) {
-            // Move the drop event to a new undo batch mitigating the bug where undo not only moves it back,
-            // but also undoes a previous action: https://github.com/ianstormtaylor/slate/issues/4694
-            editor.history.undos.push([]);
-          }
-
-          return dropDisallowed;
-        };
-      }
-    }
-  };
-}
-
-function getParents(el) {
-  var parents = [];
-  parents.push(el);
-
-  while (el.parentNode) {
-    parents.unshift(el.parentNode);
-    el = el.parentNode;
-  }
-
-  return parents;
-}
-
 var IS_SAFARI = typeof navigator !== 'undefined' && /*#__PURE__*/ /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
 var IS_CHROME = /*#__PURE__*/ /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9.]+)(:?\s|$)/.test(navigator.userAgent);
 
@@ -604,16 +545,18 @@ function toggleElement(editor, options, editorOptions) {
   });
 }
 
-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
-    }));
-  };
+/**
+ * Trim leading slash character if found. Bails otherwise.
+ *
+ * @example
+ * trimLeadingSlash("/my query") // --> "my query"
+ */
+function trimLeadingSlash(text) {
+  if (!text.startsWith('/')) {
+    return text;
+  }
+
+  return text.slice(1);
 }
 
 function useSdk(_ref) {
@@ -629,255 +572,128 @@ var _constate = /*#__PURE__*/constate(useSdk),
     SdkProvider = _constate[0],
     useSdkContext = _constate[1];
 
-function useFetchedEntity(_ref) {
-  var type = _ref.type,
-      id = _ref.id,
-      onEntityFetchComplete = _ref.onEntityFetchComplete;
+var useCommandList = function useCommandList(commandItems, container) {
+  var _React$useState = React.useState(function () {
+    // select the first item on initial render
+    if ('group' in commandItems[0]) {
+      return commandItems[0].commands[0].id;
+    }
 
-  var _useEntities = fieldEditorReference.useEntities(),
-      entries = _useEntities.entries,
-      assets = _useEntities.assets,
-      getOrLoadEntry = _useEntities.getOrLoadEntry,
-      getOrLoadAsset = _useEntities.getOrLoadAsset;
+    return commandItems[0].id;
+  }),
+      selectedItem = _React$useState[0],
+      setSelectedItem = _React$useState[1];
 
-  var store = type === 'Entry' ? entries : assets;
+  React.useEffect(function () {
+    if (!(container != null && container.current)) {
+      return;
+    }
 
-  var _useState = React.useState(store[id]),
-      entity = _useState[0],
-      setEntity = _useState[1]; // Deep compare the entity value to keep re-rendering to minimal
+    var buttons = Array.from(container.current.querySelectorAll('button'));
+    var currBtn = buttons.find(function (btn) {
+      return btn.id === selectedItem;
+    });
+    var currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
+    var shouldSelectFirstBtn = !currBtn && buttons.length;
+
+    if (shouldSelectFirstBtn) {
+      setSelectedItem(buttons[0].id);
+      buttons[0].scrollIntoView({
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
 
+    function handleKeyDown(event) {
+      if (isHotkey('up', event)) {
+        event.preventDefault();
 
-  React.useEffect(function () {
-    var newValue = store[id];
+        if (currIndex === 0) {
+          return;
+        }
 
-    if (!areEqual(entity, newValue)) {
-      setEntity(newValue);
-    }
-  }, [store, entity, id]); // Fetch the entity if needed
+        setSelectedItem(buttons[currIndex - 1].id);
+        buttons[currIndex - 1].scrollIntoView({
+          block: 'nearest',
+          inline: 'start'
+        });
+      } else if (isHotkey('down', event)) {
+        event.preventDefault();
+
+        if (currIndex === buttons.length - 1) {
+          return;
+        }
+
+        setSelectedItem(buttons[currIndex + 1].id);
+        buttons[currIndex + 1].scrollIntoView({
+          block: 'nearest',
+          inline: 'start'
+        });
+      } else if (isHotkey('enter', event)) {
+        event.preventDefault();
+
+        if (currBtn) {
+          setSelectedItem('');
+          currBtn.click();
+        }
+      } //TODO: handle shift+enter, which must be detected using separate events
 
-  React.useEffect(function () {
-    (type === 'Entry' ? getOrLoadEntry : getOrLoadAsset)(id); // "getOrLoadEntry" and "getOrLoadAsset" instances change with every
-    // entity store update causing page lag on initial load
-    // TODO: consider rewriting useEntities() hook to avoid that happening in
-    // first place.
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: explain this disable
-  }, [type, id]);
-  React.useEffect(function () {
-    if (entity) {
-      onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
     }
-  }, [onEntityFetchComplete, entity]);
-  return entity;
-}
 
-var InternalAssetCard = /*#__PURE__*/React.memo(function (props) {
-  if (props.asset === undefined) {
-    return /*#__PURE__*/React.createElement(f36Components.AssetCard, {
-      size: "default",
-      isLoading: true
-    });
-  }
+    if (commandItems.length) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
 
-  if (props.asset === 'failed') {
-    return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
-      entityType: "Asset",
-      isDisabled: props.isDisabled,
-      onRemove: props.onRemove
-    });
-  }
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [commandItems, container, selectedItem]);
+  return {
+    selectedItem: selectedItem
+  };
+};
 
-  return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedAssetCard, {
-    getEntityScheduledActions: props.loadEntityScheduledActions,
-    size: "small",
-    isSelected: props.isSelected,
-    isDisabled: props.isDisabled,
-    localeCode: props.locale,
-    defaultLocaleCode: props.sdk.locales["default"],
-    asset: props.asset,
-    onEdit: props.onEdit,
-    onRemove: props.isDisabled ? undefined : props.onRemove,
-    isClickable: false
-  });
-}, areEqual);
-InternalAssetCard.displayName = 'InternalAssetCard';
-function FetchingWrappedAssetCard(props) {
-  var onEntityFetchComplete = props.onEntityFetchComplete,
-      assetId = props.assetId;
+var COMMAND_PROMPT = 'command-prompt';
 
-  var _useEntities = fieldEditorReference.useEntities(),
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+function createInlineEntryNode(id) {
+  return {
+    type: Contentful.INLINES.EMBEDDED_ENTRY,
+    children: [{
+      text: ''
+    }],
+    data: {
+      target: {
+        sys: {
+          id: id,
+          type: 'Link',
+          linkType: 'Entry'
+        }
+      }
+    }
+  };
+}
 
-  var asset = useFetchedEntity({
-    type: 'Asset',
-    id: assetId,
-    onEntityFetchComplete: onEntityFetchComplete
-  });
-  return /*#__PURE__*/React.createElement(InternalAssetCard, {
-    asset: asset,
-    sdk: props.sdk,
-    isDisabled: props.isDisabled,
-    isSelected: props.isSelected,
-    loadEntityScheduledActions: loadEntityScheduledActions,
-    locale: props.locale,
-    onEdit: props.onEdit,
-    onRemove: props.onRemove
-  });
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
 
-var InternalEntryCard = /*#__PURE__*/React.memo(function (props) {
-  var entry = props.entry,
-      sdk = props.sdk,
-      loadEntityScheduledActions = props.loadEntityScheduledActions;
+var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
+  /**
+   * Copyright (c) 2014-present, Facebook, Inc.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  var runtime = function (exports) {
 
-  if (entry === undefined) {
-    return /*#__PURE__*/React.createElement(f36Components.EntryCard, {
-      isLoading: true
-    });
-  }
+    var Op = Object.prototype;
+    var hasOwn = Op.hasOwnProperty;
+    var undefined$1; // More compressible than void 0.
 
-  if (entry === 'failed') {
-    return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
-      entityType: "Entry",
-      isDisabled: props.isDisabled,
-      onRemove: props.onRemove
-    });
-  }
-
-  var contentType = sdk.space.getCachedContentTypes().find(function (contentType) {
-    return contentType.sys.id === entry.sys.contentType.sys.id;
-  });
-  return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedEntryCard, {
-    size: "default",
-    getAsset: props.sdk.space.getAsset,
-    getEntityScheduledActions: loadEntityScheduledActions,
-    isSelected: props.isSelected,
-    isDisabled: props.isDisabled,
-    localeCode: props.locale,
-    defaultLocaleCode: props.sdk.locales["default"],
-    contentType: contentType,
-    entry: entry,
-    onEdit: props.onEdit,
-    onRemove: props.isDisabled ? undefined : props.onRemove,
-    isClickable: false
-  });
-}, areEqual);
-InternalEntryCard.displayName = 'ReferenceCard';
-var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
-  var entryId = props.entryId,
-      onEntityFetchComplete = props.onEntityFetchComplete;
-
-  var _useEntities = fieldEditorReference.useEntities(),
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
-
-  var entry = useFetchedEntity({
-    type: 'Entry',
-    id: entryId,
-    onEntityFetchComplete: onEntityFetchComplete
-  });
-  return /*#__PURE__*/React.createElement(InternalEntryCard, {
-    entry: entry,
-    sdk: props.sdk,
-    locale: props.locale,
-    isDisabled: props.isDisabled,
-    isSelected: props.isSelected,
-    onEdit: props.onEdit,
-    onRemove: props.onRemove,
-    loadEntityScheduledActions: loadEntityScheduledActions
-  });
-};
-
-var styles = {
-  root: /*#__PURE__*/emotion.css({
-    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,
-      onEntityFetchComplete = props.onEntityFetchComplete;
-  var isSelected = Slate.useSelected();
-  var editor = useContentfulEditor();
-  var sdk = useSdkContext();
-  var isDisabled = Slate.useReadOnly();
-  var _element$data$target$ = element.data.target.sys,
-      entityId = _element$data$target$.id,
-      entityType = _element$data$target$.linkType;
-  var handleEditClick = React__default.useCallback(function () {
-    var openEntity = entityType === 'Asset' ? sdk.navigator.openAsset : sdk.navigator.openEntry;
-    return openEntity(entityId, {
-      slideIn: true
-    });
-  }, [sdk, entityId, entityType]);
-  var handleRemoveClick = React__default.useCallback(function () {
-    if (!editor) return;
-    var pathToElement = Slate.ReactEditor.findPath(editor, element);
-    slate.Transforms.removeNodes(editor, {
-      at: pathToElement
-    });
-  }, [editor, element]);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
-    className: styles.root,
-    "data-entity-type": entityType,
-    "data-entity-id": entityId,
-    // COMPAT: This makes copy & paste work for Firefox
-    contentEditable: IS_CHROME ? undefined : false,
-    draggable: IS_CHROME ? true : undefined
-  }), /*#__PURE__*/React__default.createElement("div", {
-    // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
-    contentEditable: IS_CHROME ? false : undefined,
-    draggable: IS_CHROME ? true : undefined,
-    className: styles.container
-  }, entityType === 'Entry' && /*#__PURE__*/React__default.createElement(FetchingWrappedEntryCard, {
-    sdk: sdk,
-    entryId: entityId,
-    locale: sdk.field.locale,
-    isDisabled: isDisabled,
-    isSelected: isSelected,
-    onRemove: handleRemoveClick,
-    onEdit: handleEditClick,
-    onEntityFetchComplete: onEntityFetchComplete
-  }), entityType === 'Asset' && /*#__PURE__*/React__default.createElement(FetchingWrappedAssetCard, {
-    sdk: sdk,
-    assetId: entityId,
-    locale: sdk.field.locale,
-    isDisabled: isDisabled,
-    isSelected: isSelected,
-    onRemove: handleRemoveClick,
-    onEdit: handleEditClick,
-    onEntityFetchComplete: onEntityFetchComplete
-  })), children);
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
-  /**
-   * Copyright (c) 2014-present, Facebook, Inc.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  var runtime = function (exports) {
-
-    var Op = Object.prototype;
-    var hasOwn = Op.hasOwnProperty;
-    var undefined$1; // More compressible than void 0.
-
-    var $Symbol = typeof Symbol === "function" ? Symbol : {};
-    var iteratorSymbol = $Symbol.iterator || "@@iterator";
-    var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
-    var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+    var $Symbol = typeof Symbol === "function" ? Symbol : {};
+    var iteratorSymbol = $Symbol.iterator || "@@iterator";
+    var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
+    var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
 
     function define(obj, key, value) {
       Object.defineProperty(obj, key, {
@@ -1549,41 +1365,916 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
           nextLoc: nextLoc
         };
 
-        if (this.method === "next") {
-          // Deliberately forget the last sent value so that we don't
-          // accidentally pass it on to the delegate.
-          this.arg = undefined$1;
-        }
+        if (this.method === "next") {
+          // Deliberately forget the last sent value so that we don't
+          // accidentally pass it on to the delegate.
+          this.arg = undefined$1;
+        }
+
+        return ContinueSentinel;
+      }
+    }; // Regardless of whether this script is executing as a CommonJS module
+    // or not, return the runtime object so that we can declare the variable
+    // regeneratorRuntime in the outer scope, which allows this module to be
+    // injected easily by `bin/regenerator --include-runtime script.js`.
+
+    return exports;
+  }( // If this script is executing as a CommonJS module, use module.exports
+  // as the regeneratorRuntime namespace. Otherwise create a new empty
+  // object. Either way, the resulting object will be used to initialize
+  // the regeneratorRuntime variable at the top of this file.
+   module.exports );
+
+  try {
+    regeneratorRuntime = runtime;
+  } 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
+    // 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);
+  }
+});
+
+function fetchAssets(_x, _x2) {
+  return _fetchAssets.apply(this, arguments);
+}
+
+function _fetchAssets() {
+  _fetchAssets = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(sdk, query) {
+    var assets;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return sdk.space.getAssets({
+              query: query
+            });
+
+          case 2:
+            assets = _context.sent;
+            return _context.abrupt("return", assets.items.map(function (asset) {
+              var displayTitle = fieldEditorShared.entityHelpers.getAssetTitle({
+                asset: asset,
+                localeCode: sdk.field.locale,
+                defaultLocaleCode: sdk.locales["default"],
+                defaultTitle: 'Untitled'
+              });
+              return {
+                contentTypeName: 'Asset',
+                displayTitle: displayTitle,
+                id: asset.sys.id,
+                entity: asset,
+                thumbnail: asset.fields.file && asset.fields.file[sdk.field.locale] && asset.fields.file[sdk.field.locale].url + "?h=30"
+              };
+            }));
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _fetchAssets.apply(this, arguments);
+}
+
+function fetchEntries(_x, _x2, _x3) {
+  return _fetchEntries.apply(this, arguments);
+}
+
+function _fetchEntries() {
+  _fetchEntries = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(sdk, contentType, query) {
+    var entries;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return sdk.space.getEntries({
+              content_type: contentType.sys.id,
+              query: query
+            });
+
+          case 2:
+            entries = _context.sent;
+            return _context.abrupt("return", entries.items.map(function (entry) {
+              var description = fieldEditorShared.entityHelpers.getEntityDescription({
+                contentType: contentType,
+                // @ts-expect-error inconsistent in typing between app-sdk & field-editors-shared
+                entity: entry,
+                localeCode: sdk.field.locale,
+                defaultLocaleCode: sdk.locales["default"]
+              });
+              var displayTitle = fieldEditorShared.entityHelpers.getEntryTitle({
+                // @ts-expect-error inconsistent in typing between app-sdk & field-editors-shared
+                entry: entry,
+                contentType: contentType,
+                localeCode: sdk.field.locale,
+                defaultLocaleCode: sdk.locales["default"],
+                defaultTitle: 'Untitled'
+              });
+              return {
+                contentTypeName: contentType.name,
+                displayTitle: displayTitle,
+                id: entry.sys.contentType.sys.id,
+                description: description,
+                entry: entry
+              };
+            }));
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _fetchEntries.apply(this, arguments);
+}
+
+var createNode = function createNode(nodeType, entity) {
+  return {
+    type: nodeType,
+    data: {
+      target: {
+        sys: {
+          id: entity.sys.id,
+          type: 'Link',
+          linkType: entity.sys.type
+        }
+      }
+    },
+    children: [{
+      text: ''
+    }],
+    isVoid: true
+  };
+};
+
+function insertBlock(editor, nodeType, entity) {
+  if (!(editor != null && editor.selection)) return;
+  var linkedEntityBlock = createNode(nodeType, entity);
+  var hasText = editor.selection && !!plateCore.getText(editor, editor.selection.focus.path);
+
+  if (hasText) {
+    slate.Transforms.insertNodes(editor, linkedEntityBlock);
+  } else {
+    slate.Transforms.setNodes(editor, linkedEntityBlock);
+  }
+
+  focus(editor);
+}
+
+var removeCommand = function removeCommand(editor) {
+  var _getAbove = plateCore.getAbove(editor),
+      path = _getAbove[1];
+
+  var range = slate.Editor.range(editor, path);
+  slate.Transforms.select(editor, range.focus.path);
+  plateCore.removeMark(editor, {
+    key: COMMAND_PROMPT,
+    at: range
+  });
+  slate.Transforms["delete"](editor);
+};
+
+var removeQuery = function removeQuery(editor) {
+  var _getAbove2 = plateCore.getAbove(editor),
+      path = _getAbove2[1];
+
+  var range = slate.Editor.range(editor, path);
+
+  if (range.focus.offset - range.anchor.offset > 1) {
+    slate.Transforms["delete"](editor, {
+      at: range.focus,
+      distance: range.focus.offset - 1,
+      reverse: true
+    });
+  }
+};
+
+var useCommands = function useCommands(sdk, query, editor) {
+  var contentTypes = sdk.space.getCachedContentTypes();
+
+  var _useState = React.useState(function () {
+    var contentTypeCommands = contentTypes.map(function (contentType) {
+      return {
+        group: contentType.name,
+        commands: [{
+          id: contentType.sys.id,
+          label: "Embed " + contentType.name,
+          callback: function callback() {
+            fetchEntries(sdk, contentType, query).then(function (entries) {
+              removeQuery(editor);
+
+              if (!entries.length) {
+                setCommands([{
+                  id: 'no-results',
+                  label: 'No results'
+                }]);
+              } else {
+                setCommands(entries.map(function (entry) {
+                  return {
+                    id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
+                    label: entry.displayTitle,
+                    callback: function callback() {
+                      removeCommand(editor);
+
+                      if (editor.selection) {
+                        var selection = editor.selection;
+                        editor.insertSoftBreak();
+                        insertBlock(editor, Contentful.BLOCKS.EMBEDDED_ENTRY, entry.entry);
+                        slate.Transforms.select(editor, selection);
+                      }
+                    }
+                  };
+                }));
+              }
+            });
+          }
+        }, {
+          id: contentType.sys.id + "-inline",
+          label: "Embed " + contentType.name + " - Inline",
+          callback: function callback() {
+            fetchEntries(sdk, contentType, query).then(function (entries) {
+              removeQuery(editor);
+
+              if (!entries.length) {
+                setCommands([{
+                  id: 'no-results',
+                  label: 'No results'
+                }]);
+              } else {
+                setCommands(entries.map(function (entry) {
+                  return {
+                    id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
+                    label: entry.displayTitle,
+                    callback: function callback() {
+                      var inlineNode = createInlineEntryNode(entry.id);
+                      removeCommand(editor);
+                      slate.Transforms.insertNodes(editor, inlineNode);
+                      editor.insertText('');
+                    }
+                  };
+                }));
+              }
+            });
+          }
+        }]
+      };
+    });
+    var assetCommand = {
+      group: 'Assets',
+      commands: [{
+        id: 'embed-asset',
+        label: 'Embed Asset',
+        callback: function callback() {
+          fetchAssets(sdk, query).then(function (assets) {
+            removeQuery(editor);
+
+            if (!assets.length) {
+              setCommands([{
+                id: 'no-results',
+                label: 'No results'
+              }]);
+            } else {
+              setCommands(assets.map(function (asset) {
+                return {
+                  id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
+                  label: asset.displayTitle,
+                  thumbnail: asset.thumbnail,
+                  callback: function callback() {
+                    removeCommand(editor);
+
+                    if (editor.selection) {
+                      var selection = editor.selection;
+                      editor.insertSoftBreak();
+                      insertBlock(editor, Contentful.BLOCKS.EMBEDDED_ASSET, asset.entity);
+                      slate.Transforms.select(editor, selection);
+                    }
+                  }
+                };
+              }));
+            }
+          });
+        }
+      }]
+    };
+    return [].concat(contentTypeCommands, [assetCommand]);
+  }),
+      commands = _useState[0],
+      setCommands = _useState[1];
+  /* filter both commands and groups of commands with the user typed query */
+
+
+  return query ? commands.reduce(function (list, nextItem) {
+    if ('group' in nextItem) {
+      var subcommands = nextItem.commands.filter(function (command) {
+        return command.label.toLowerCase().includes(query.toLowerCase());
+      });
+
+      if (subcommands.length > 0) {
+        list.push(nextItem);
+      }
+    } else {
+      if (nextItem.label.toLowerCase().includes(query.toLowerCase())) {
+        list.push(nextItem);
+      }
+    }
+
+    return list;
+  }, []) : commands;
+};
+
+var styles = {
+  container: /*#__PURE__*/emotion.css({
+    position: 'absolute',
+    zIndex: tokens.zIndexNotification,
+    fontWeight: tokens.fontWeightNormal,
+    fontStyle: 'normal',
+    fontFamily: tokens.fontStackPrimary,
+    'ul, ol, dl': {
+      listStyle: 'none',
+      marginLeft: 0
+    }
+  }),
+  menuContent: /*#__PURE__*/emotion.css({
+    width: '400px',
+    maxHeight: '300px'
+  }),
+  menuList: /*#__PURE__*/emotion.css({
+    overflow: 'auto',
+    maxHeight: '200px'
+  }),
+  menuItem: /*#__PURE__*/emotion.css({
+    display: 'block',
+    width: '100%',
+    background: 'none',
+    border: 0,
+    margin: 0,
+    outline: 'none',
+    fontSize: tokens.fontSizeM,
+    lineHeight: tokens.lineHeightM,
+    fontWeight: tokens.fontWeightNormal,
+    position: 'relative',
+    textAlign: 'left',
+    padding: tokens.spacingXs + " " + tokens.spacingM,
+    wordBreak: 'break-word',
+    whiteSpace: 'break-spaces',
+    cursor: 'pointer',
+    hyphens: 'auto',
+    minWidth: '150px',
+    textDecoration: 'none',
+    color: tokens.gray800,
+    '&:hover': {
+      backgroundColor: tokens.gray100
+    },
+    '&:disabled': {
+      opacity: 0.5,
+      cursor: 'auto'
+    }
+  }),
+  menuItemSelected: /*#__PURE__*/emotion.css({
+    boxShadow: "inset " + tokens.glowPrimary,
+    borderRadius: tokens.borderRadiusMedium
+  }),
+  menuDivider: /*#__PURE__*/emotion.css({
+    border: 'none',
+    width: '100%',
+    height: '1px',
+    background: tokens.gray300,
+    margin: tokens.spacingXs + " 0"
+  }),
+  menuHeader: /*#__PURE__*/emotion.css({
+    position: 'sticky',
+    zIndex: tokens.zIndexDefault,
+    top: 0,
+    backgroundColor: tokens.gray100,
+    padding: tokens.spacingM
+  }),
+  menuFooter: /*#__PURE__*/emotion.css({
+    position: 'sticky',
+    bottom: 0,
+    backgroundColor: tokens.gray100,
+    padding: tokens.spacingM
+  }),
+  footerList: /*#__PURE__*/emotion.css({
+    listStyle: 'none',
+    color: tokens.gray600,
+    fontSize: tokens.fontSizeM
+  }),
+  thumbnail: /*#__PURE__*/emotion.css({
+    width: '30px',
+    height: '30px',
+    objectFit: 'cover'
+  })
+};
+
+var Group = function Group(_ref) {
+  var commandGroup = _ref.commandGroup,
+      selectedItem = _ref.selectedItem;
+  return /*#__PURE__*/React.createElement("section", {
+    key: commandGroup.group
+  }, /*#__PURE__*/React.createElement(f36Components.SectionHeading, {
+    as: "h3",
+    marginBottom: "spacingS",
+    marginTop: "spacingS",
+    marginLeft: "spacingM",
+    marginRight: "spacingM"
+  }, commandGroup.group), commandGroup.commands.map(function (command) {
+    var _cx;
+
+    return /*#__PURE__*/React.createElement("button", {
+      key: command.id,
+      id: command.id,
+      className: emotion.cx(styles.menuItem, (_cx = {}, _cx[styles.menuItemSelected] = command.id === selectedItem, _cx)),
+      onClick: command.callback
+    }, command.label);
+  }), /*#__PURE__*/React.createElement("hr", {
+    className: styles.menuDivider,
+    "aria-orientation": "horizontal"
+  }));
+};
+
+var Asset = function Asset(_ref2) {
+  var _cx2;
+
+  var command = _ref2.command,
+      selectedItem = _ref2.selectedItem;
+  return /*#__PURE__*/React.createElement("button", {
+    key: command.id,
+    id: command.id,
+    className: emotion.cx(styles.menuItem, (_cx2 = {}, _cx2[styles.menuItemSelected] = command.id === selectedItem, _cx2)),
+    onClick: command.callback
+  }, /*#__PURE__*/React.createElement(f36Components.Flex, {
+    alignItems: "center",
+    gap: "spacingS"
+  }, command.thumbnail && /*#__PURE__*/React.createElement("img", {
+    width: "30",
+    height: "30",
+    src: command.thumbnail,
+    alt: "",
+    className: styles.thumbnail
+  }), /*#__PURE__*/React.createElement("span", null, command.label)));
+};
+
+var Item = function Item(_ref3) {
+  var command = _ref3.command;
+  return /*#__PURE__*/React.createElement("button", {
+    key: command.id,
+    id: command.id,
+    className: styles.menuItem
+  }, command.label);
+};
+
+var CommandListItems = function CommandListItems(_ref4) {
+  var commandItems = _ref4.commandItems,
+      selectedItem = _ref4.selectedItem;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, commandItems.map(function (command) {
+    return 'group' in command ? /*#__PURE__*/React.createElement(Group, {
+      commandGroup: command,
+      selectedItem: selectedItem
+    }) : command.callback ? /*#__PURE__*/React.createElement(Asset, {
+      command: command,
+      selectedItem: selectedItem
+    }) : /*#__PURE__*/React.createElement(Item, {
+      command: command
+    });
+  }));
+};
+
+var CommandList = function CommandList(_ref5) {
+  var query = _ref5.query,
+      editor = _ref5.editor;
+  var sdk = useSdkContext();
+  var container = React.useRef(null);
+  var commandItems = useCommands(sdk, query, editor);
+
+  var _useCommandList = useCommandList(commandItems, container),
+      selectedItem = _useCommandList.selectedItem;
+
+  if (commandItems.length === 0) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    tabIndex: -1,
+    ref: container,
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "alert"
+  }, /*#__PURE__*/React.createElement(f36Components.ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/React.createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/React.createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/React.createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(f36Components.Popover, {
+    isOpen: true,
+    usePortal: false,
+    autoFocus: false
+  }, /*#__PURE__*/React.createElement(f36Components.Popover.Trigger, null, /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement(f36Components.Popover.Content, {
+    className: styles.menuContent
+  }, /*#__PURE__*/React.createElement("header", {
+    className: styles.menuHeader
+  }, /*#__PURE__*/React.createElement(f36Components.SectionHeading, {
+    marginBottom: "none"
+  }, "Richtext commands")), /*#__PURE__*/React.createElement("div", {
+    className: styles.menuList
+  }, /*#__PURE__*/React.createElement(CommandListItems, {
+    commandItems: commandItems,
+    selectedItem: selectedItem
+  })), /*#__PURE__*/React.createElement("footer", {
+    className: styles.menuFooter
+  }, /*#__PURE__*/React.createElement(f36Components.Stack, {
+    as: "ul",
+    margin: "none",
+    padding: "none",
+    spacing: "spacingS",
+    className: styles.footerList
+  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("kbd", null, "\u2191"), /*#__PURE__*/React.createElement("kbd", null, "\u2193"), " to navigate"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("kbd", null, "\u21B5"), " to confirm"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("kbd", null, "esc"), " to close")))))));
+};
+
+var CommandPrompt = function CommandPrompt(props) {
+  var query = React.useMemo(function () {
+    return trimLeadingSlash(props.text.text);
+  }, [props.text.text]);
+  var editor = props.editor;
+  var canInsertBlocks = !isNodeTypeSelected(editor, Contentful.BLOCKS.TABLE);
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props.attributes), props.children, canInsertBlocks && /*#__PURE__*/React.createElement(CommandList, {
+    query: query,
+    editor: editor
+  }));
+};
+
+var createOnKeyDown = function createOnKeyDown() {
+  return function (editor) {
+    return function (event) {
+      if (isHotkey('/', event)) {
+        var _setMarks;
+
+        plateCore.setMarks(editor, (_setMarks = {}, _setMarks[COMMAND_PROMPT] = true, _setMarks));
+      }
+
+      var isActive = plateCore.isMarkActive(editor, COMMAND_PROMPT);
+
+      if (isActive) {
+        if (isHotkey('enter', event)) {
+          event.preventDefault();
+        } else if (isHotkey('backspace', event)) {
+          var _getAbove = plateCore.getAbove(editor),
+              path = _getAbove[1];
+
+          var range = slate.Editor.range(editor, path); // if it is the last character in the command string
+
+          if (range.focus.offset - range.anchor.offset === 1) {
+            plateCore.removeMark(editor, {
+              key: COMMAND_PROMPT,
+              at: range
+            });
+          }
+        } else if (isHotkey('escape', event)) {
+          var _getAbove2 = plateCore.getAbove(editor),
+              _path = _getAbove2[1];
+
+          var _range = slate.Editor.range(editor, _path);
+
+          plateCore.removeMark(editor, {
+            key: COMMAND_PROMPT,
+            at: _range
+          });
+        }
+      }
+    };
+  };
+};
+
+/**
+ * A command palette plugin (aka slash commands)
+ *
+ * How does it work?
+ * * When the user presses the slash key, the editor will show a command palette
+ * * When the user presses a key, the command palette will show the command suggestions
+ * * When the user presses enter, the command palette will execute the command
+ * * When the user presses escape, the command palette will hide
+ * * When the user presses a letter, number, or space, the command palette will show the command suggestions
+ * * When the user presses backspace, the command palette will remove the last character from the command string
+ */
+
+var createCommandPalettePlugin = function createCommandPalettePlugin() {
+  return {
+    key: COMMAND_PROMPT,
+    type: COMMAND_PROMPT,
+    isLeaf: true,
+    component: CommandPrompt,
+    handlers: {
+      onKeyDown: createOnKeyDown()
+    }
+  };
+};
+
+function createDragAndDropPlugin() {
+  var DRAGGABLE_TYPES = [Contentful.BLOCKS.EMBEDDED_ENTRY, Contentful.BLOCKS.EMBEDDED_ASSET, Contentful.BLOCKS.HR, Contentful.INLINES.EMBEDDED_ENTRY];
+  /**
+   * HTML node names where dropping should be allowed
+   * Usually for elements where `Transforms.removeNodes` is needed
+   * TODO: looking up for html nodes is not the best solution and it won't scale but it works fine for our current cases/elements
+   */
+
+  var ON_DROP_ALLOWED_TYPES = {
+    TABLE: [Contentful.INLINES.EMBEDDED_ENTRY]
+  };
+  return {
+    key: 'DragAndDropPlugin',
+    handlers: {
+      // If true, the next handlers will be skipped.
+      onDrop: function onDrop(editor) {
+        return function (event) {
+          var _Array$from = Array.from(plateCore.getNodes(editor, {
+            match: function match(node) {
+              return DRAGGABLE_TYPES.includes(node == null ? void 0 : node.type);
+            }
+          })),
+              draggingBlock = _Array$from[0];
+
+          if (!draggingBlock) return false;
+          var draggingNode = draggingBlock[0];
+          if (!event.nativeEvent.target) return false; // TODO: looking up for html nodes is not the best solution and it won't scale, we need to find a way to know the dropping target slate element
+
+          var dropDisallowed = getParents(event.nativeEvent.target).some(function (node) {
+            var _ON_DROP_ALLOWED_TYPE;
+
+            return ON_DROP_ALLOWED_TYPES[node.nodeName] ? !((_ON_DROP_ALLOWED_TYPE = ON_DROP_ALLOWED_TYPES[node.nodeName]) != null && _ON_DROP_ALLOWED_TYPE.includes(draggingNode.type)) : false;
+          });
+
+          if (!dropDisallowed) {
+            // Move the drop event to a new undo batch mitigating the bug where undo not only moves it back,
+            // but also undoes a previous action: https://github.com/ianstormtaylor/slate/issues/4694
+            editor.history.undos.push([]);
+          }
+
+          return dropDisallowed;
+        };
+      }
+    }
+  };
+}
+
+function getParents(el) {
+  var parents = [];
+  parents.push(el);
+
+  while (el.parentNode) {
+    parents.unshift(el.parentNode);
+    el = el.parentNode;
+  }
+
+  return parents;
+}
+
+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 useFetchedEntity(_ref) {
+  var type = _ref.type,
+      id = _ref.id,
+      onEntityFetchComplete = _ref.onEntityFetchComplete;
+
+  var _useEntities = fieldEditorReference.useEntities(),
+      entries = _useEntities.entries,
+      assets = _useEntities.assets,
+      getOrLoadEntry = _useEntities.getOrLoadEntry,
+      getOrLoadAsset = _useEntities.getOrLoadAsset;
+
+  var store = type === 'Entry' ? entries : assets;
+
+  var _useState = React.useState(store[id]),
+      entity = _useState[0],
+      setEntity = _useState[1]; // Deep compare the entity value to keep re-rendering to minimal
+
+
+  React.useEffect(function () {
+    var newValue = store[id];
+
+    if (!areEqual(entity, newValue)) {
+      setEntity(newValue);
+    }
+  }, [store, entity, id]); // Fetch the entity if needed
+
+  React.useEffect(function () {
+    (type === 'Entry' ? getOrLoadEntry : getOrLoadAsset)(id); // "getOrLoadEntry" and "getOrLoadAsset" instances change with every
+    // entity store update causing page lag on initial load
+    // TODO: consider rewriting useEntities() hook to avoid that happening in
+    // first place.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: explain this disable
+  }, [type, id]);
+  React.useEffect(function () {
+    if (entity) {
+      onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+    }
+  }, [onEntityFetchComplete, entity]);
+  return entity;
+}
+
+var InternalAssetCard = /*#__PURE__*/React.memo(function (props) {
+  if (props.asset === undefined) {
+    return /*#__PURE__*/React.createElement(f36Components.AssetCard, {
+      size: "default",
+      isLoading: true
+    });
+  }
+
+  if (props.asset === 'failed') {
+    return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
+      entityType: "Asset",
+      isDisabled: props.isDisabled,
+      onRemove: props.onRemove
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedAssetCard, {
+    getEntityScheduledActions: props.loadEntityScheduledActions,
+    size: "small",
+    isSelected: props.isSelected,
+    isDisabled: props.isDisabled,
+    localeCode: props.locale,
+    defaultLocaleCode: props.sdk.locales["default"],
+    asset: props.asset,
+    onEdit: props.onEdit,
+    onRemove: props.isDisabled ? undefined : props.onRemove,
+    isClickable: false
+  });
+}, areEqual);
+InternalAssetCard.displayName = 'InternalAssetCard';
+function FetchingWrappedAssetCard(props) {
+  var onEntityFetchComplete = props.onEntityFetchComplete,
+      assetId = props.assetId;
+
+  var _useEntities = fieldEditorReference.useEntities(),
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+
+  var asset = useFetchedEntity({
+    type: 'Asset',
+    id: assetId,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  return /*#__PURE__*/React.createElement(InternalAssetCard, {
+    asset: asset,
+    sdk: props.sdk,
+    isDisabled: props.isDisabled,
+    isSelected: props.isSelected,
+    loadEntityScheduledActions: loadEntityScheduledActions,
+    locale: props.locale,
+    onEdit: props.onEdit,
+    onRemove: props.onRemove
+  });
+}
+
+var InternalEntryCard = /*#__PURE__*/React.memo(function (props) {
+  var entry = props.entry,
+      sdk = props.sdk,
+      loadEntityScheduledActions = props.loadEntityScheduledActions;
+
+  if (entry === undefined) {
+    return /*#__PURE__*/React.createElement(f36Components.EntryCard, {
+      isLoading: true
+    });
+  }
+
+  if (entry === 'failed') {
+    return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
+      entityType: "Entry",
+      isDisabled: props.isDisabled,
+      onRemove: props.onRemove
+    });
+  }
+
+  var contentType = sdk.space.getCachedContentTypes().find(function (contentType) {
+    return contentType.sys.id === entry.sys.contentType.sys.id;
+  });
+  return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedEntryCard, {
+    size: "default",
+    getAsset: props.sdk.space.getAsset,
+    getEntityScheduledActions: loadEntityScheduledActions,
+    isSelected: props.isSelected,
+    isDisabled: props.isDisabled,
+    localeCode: props.locale,
+    defaultLocaleCode: props.sdk.locales["default"],
+    contentType: contentType,
+    entry: entry,
+    onEdit: props.onEdit,
+    onRemove: props.isDisabled ? undefined : props.onRemove,
+    isClickable: false
+  });
+}, areEqual);
+InternalEntryCard.displayName = 'ReferenceCard';
+var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
+  var entryId = props.entryId,
+      onEntityFetchComplete = props.onEntityFetchComplete;
 
-        return ContinueSentinel;
-      }
-    }; // Regardless of whether this script is executing as a CommonJS module
-    // or not, return the runtime object so that we can declare the variable
-    // regeneratorRuntime in the outer scope, which allows this module to be
-    // injected easily by `bin/regenerator --include-runtime script.js`.
+  var _useEntities = fieldEditorReference.useEntities(),
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
 
-    return exports;
-  }( // If this script is executing as a CommonJS module, use module.exports
-  // as the regeneratorRuntime namespace. Otherwise create a new empty
-  // object. Either way, the resulting object will be used to initialize
-  // the regeneratorRuntime variable at the top of this file.
-   module.exports );
+  var entry = useFetchedEntity({
+    type: 'Entry',
+    id: entryId,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  return /*#__PURE__*/React.createElement(InternalEntryCard, {
+    entry: entry,
+    sdk: props.sdk,
+    locale: props.locale,
+    isDisabled: props.isDisabled,
+    isSelected: props.isSelected,
+    onEdit: props.onEdit,
+    onRemove: props.onRemove,
+    loadEntityScheduledActions: loadEntityScheduledActions
+  });
+};
 
-  try {
-    regeneratorRuntime = runtime;
-  } 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
-    // 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);
-  }
-});
+var styles$1 = {
+  root: /*#__PURE__*/emotion.css({
+    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,
+      onEntityFetchComplete = props.onEntityFetchComplete;
+  var isSelected = Slate.useSelected();
+  var editor = useContentfulEditor();
+  var sdk = useSdkContext();
+  var isDisabled = Slate.useReadOnly();
+  var _element$data$target$ = element.data.target.sys,
+      entityId = _element$data$target$.id,
+      entityType = _element$data$target$.linkType;
+  var handleEditClick = React__default.useCallback(function () {
+    var openEntity = entityType === 'Asset' ? sdk.navigator.openAsset : sdk.navigator.openEntry;
+    return openEntity(entityId, {
+      slideIn: true
+    });
+  }, [sdk, entityId, entityType]);
+  var handleRemoveClick = React__default.useCallback(function () {
+    if (!editor) return;
+    var pathToElement = Slate.ReactEditor.findPath(editor, element);
+    slate.Transforms.removeNodes(editor, {
+      at: pathToElement
+    });
+  }, [editor, element]);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: styles$1.root,
+    "data-entity-type": entityType,
+    "data-entity-id": entityId,
+    // COMPAT: This makes copy & paste work for Firefox
+    contentEditable: IS_CHROME ? undefined : false,
+    draggable: IS_CHROME ? true : undefined
+  }), /*#__PURE__*/React__default.createElement("div", {
+    // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
+    contentEditable: IS_CHROME ? false : undefined,
+    draggable: IS_CHROME ? true : undefined,
+    className: styles$1.container
+  }, entityType === 'Entry' && /*#__PURE__*/React__default.createElement(FetchingWrappedEntryCard, {
+    sdk: sdk,
+    entryId: entityId,
+    locale: sdk.field.locale,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onRemove: handleRemoveClick,
+    onEdit: handleEditClick,
+    onEntityFetchComplete: onEntityFetchComplete
+  }), entityType === 'Asset' && /*#__PURE__*/React__default.createElement(FetchingWrappedAssetCard, {
+    sdk: sdk,
+    assetId: entityId,
+    locale: sdk.field.locale,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onRemove: handleRemoveClick,
+    onEdit: handleEditClick,
+    onEntityFetchComplete: onEntityFetchComplete
+  })), children);
+}
 
 /* eslint-disable you-dont-need-lodash-underscore/find */
 /**
@@ -1695,7 +2386,7 @@ function _selectEntityAndInsert() {
 
           case 12:
             slate.Transforms.select(editor, selection);
-            insertBlock(editor, nodeType, entity);
+            insertBlock$1(editor, nodeType, entity);
             ensureFollowingParagraph(editor);
             logAction('insert', {
               nodeType: nodeType
@@ -1748,7 +2439,7 @@ function ensureFollowingParagraph(editor) {
   moveToTheNextChar(editor);
 }
 
-var createNode = function createNode(nodeType, entity) {
+var createNode$1 = function createNode(nodeType, entity) {
   return {
     type: nodeType,
     data: {
@@ -1768,9 +2459,9 @@ var createNode = function createNode(nodeType, entity) {
 }; // TODO: DRY up copied code from HR
 
 
-function insertBlock(editor, nodeType, entity) {
+function insertBlock$1(editor, nodeType, entity) {
   if (!(editor != null && editor.selection)) return;
-  var linkedEntityBlock = createNode(nodeType, entity);
+  var linkedEntityBlock = createNode$1(nodeType, entity);
   var hasText = editor.selection && !!plateCore.getText(editor, editor.selection.focus.path);
 
   if (hasText) {
@@ -1782,7 +2473,7 @@ function insertBlock(editor, nodeType, entity) {
   focus(editor);
 }
 
-var styles$1 = {
+var styles$2 = {
   icon: /*#__PURE__*/emotion.css({
     marginRight: '10px'
   })
@@ -1830,7 +2521,7 @@ function EmbeddedEntityBlockToolbarIcon(_ref) {
     flexDirection: "row"
   }, /*#__PURE__*/React__default.createElement(f36Components.Icon, {
     as: type === 'Asset' ? f36Icons.AssetIcon : f36Icons.EmbeddedEntryBlockIcon,
-    className: "rich-text__embedded-entry-list-icon " + styles$1.icon,
+    className: "rich-text__embedded-entry-list-icon " + styles$2.icon,
     variant: "secondary"
   }), /*#__PURE__*/React__default.createElement("span", null, type)));
 }
@@ -1929,7 +2620,7 @@ var createEmbeddedAssetBlockPlugin = /*#__PURE__*/createEmbeddedEntityPlugin(Con
 
 var getEntryTitle = fieldEditorShared.entityHelpers.getEntryTitle,
     getEntryStatus = fieldEditorShared.entityHelpers.getEntryStatus;
-var styles$2 = {
+var styles$3 = {
   scheduledIcon: /*#__PURE__*/emotion.css({
     verticalAlign: 'text-bottom',
     marginRight: tokens.spacing2Xs
@@ -2024,13 +2715,13 @@ function FetchingWrappedInlineEntryCard(props) {
     entityType: "Entry",
     entityId: entry.sys.id
   }, /*#__PURE__*/React__default.createElement(f36Icons.ClockIcon, {
-    className: styles$2.scheduledIcon,
+    className: styles$3.scheduledIcon,
     variant: "muted",
     testId: "scheduled-icon"
   })), /*#__PURE__*/React__default.createElement(f36Components.Text, null, title));
 }
 
-function createInlineEntryNode(id) {
+function createInlineEntryNode$1(id) {
   return {
     type: Contentful.INLINES.EMBEDDED_ENTRY,
     children: [{
@@ -2048,7 +2739,7 @@ function createInlineEntryNode(id) {
   };
 }
 
-var styles$3 = {
+var styles$4 = {
   icon: /*#__PURE__*/emotion.css({
     marginRight: '10px'
   }),
@@ -2084,7 +2775,7 @@ function EmbeddedEntityInline(props) {
   }
 
   return /*#__PURE__*/React.createElement("span", Object.assign({}, props.attributes, {
-    className: styles$3.root,
+    className: styles$4.root,
     "data-embedded-entity-inline-id": entryId,
     // COMPAT: This makes copy & paste work for Firefox
     contentEditable: IS_CHROME ? undefined : false,
@@ -2140,7 +2831,7 @@ function _selectEntityAndInsert$1() {
             return _context2.abrupt("return");
 
           case 10:
-            inlineEntryNode = createInlineEntryNode(entry.sys.id);
+            inlineEntryNode = createInlineEntryNode$1(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.
@@ -2214,7 +2905,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
     flexDirection: "row"
   }, /*#__PURE__*/React.createElement(f36Icons.EmbeddedEntryInlineIcon, {
     variant: "secondary",
-    className: "rich-text__embedded-entry-list-icon " + styles$3.icon
+    className: "rich-text__embedded-entry-list-icon " + styles$4.icon
   }), /*#__PURE__*/React.createElement("span", null, "Inline entry")));
 }
 function createEmbeddedEntityInlinePlugin(sdk) {
@@ -2238,7 +2929,7 @@ function createEmbeddedEntityInlinePlugin(sdk) {
       }],
       withoutChildren: true,
       getNode: function getNode(el) {
-        return createInlineEntryNode(el.getAttribute(htmlAttributeName));
+        return createInlineEntryNode$1(el.getAttribute(htmlAttributeName));
       }
     }
   };
@@ -2290,7 +2981,7 @@ var isMarkEnabled = function isMarkEnabled(field, mark) {
 };
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
-var styles$4 = {
+var styles$5 = {
   dropdown: (_dropdown = {
     root: /*#__PURE__*/emotion.css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-weight: ", ";\n    "])), tokens.fontWeightDemiBold)
   }, _dropdown[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: ", ";\n    "])), tokens.fontSizeL), _dropdown[Contentful.BLOCKS.HEADING_1] = /*#__PURE__*/emotion.css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.625rem;\n    "]))), _dropdown[Contentful.BLOCKS.HEADING_2] = /*#__PURE__*/emotion.css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.4375rem;\n    "]))), _dropdown[Contentful.BLOCKS.HEADING_3] = /*#__PURE__*/emotion.css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.25rem;\n    "]))), _dropdown[Contentful.BLOCKS.HEADING_4] = /*#__PURE__*/emotion.css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.125rem;\n    "]))), _dropdown[Contentful.BLOCKS.HEADING_5] = /*#__PURE__*/emotion.css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1rem;\n    "]))), _dropdown[Contentful.BLOCKS.HEADING_6] = /*#__PURE__*/emotion.css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 0.875rem;\n    "]))), _dropdown)
@@ -2385,7 +3076,7 @@ function ToolbarHeadingButton(props) {
       testId: "dropdown-option-" + nodeType,
       disabled: props.isDisabled
     }, /*#__PURE__*/React.createElement("span", {
-      className: emotion.cx(styles$4.dropdown.root, styles$4.dropdown[nodeType])
+      className: emotion.cx(styles$5.dropdown.root, styles$5.dropdown[nodeType])
     }, LABELS[nodeType]));
   }).filter(Boolean)));
 }
@@ -2455,7 +3146,7 @@ var transformLift = function transformLift(editor, _ref4) {
 };
 
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _dropdown$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _headings, _HeadingComponents;
-var styles$5 = {
+var styles$6 = {
   dropdown: (_dropdown$1 = {
     root: /*#__PURE__*/emotion.css(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-weight: ", ";\n    "])), tokens.fontWeightDemiBold)
   }, _dropdown$1[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.css(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: ", ";\n    "])), tokens.fontSizeL), _dropdown$1[Contentful.BLOCKS.HEADING_1] = /*#__PURE__*/emotion.css(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.625rem;\n    "]))), _dropdown$1[Contentful.BLOCKS.HEADING_2] = /*#__PURE__*/emotion.css(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.4375rem;\n    "]))), _dropdown$1[Contentful.BLOCKS.HEADING_3] = /*#__PURE__*/emotion.css(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.25rem;\n    "]))), _dropdown$1[Contentful.BLOCKS.HEADING_4] = /*#__PURE__*/emotion.css(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.125rem;\n    "]))), _dropdown$1[Contentful.BLOCKS.HEADING_5] = /*#__PURE__*/emotion.css(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1rem;\n    "]))), _dropdown$1[Contentful.BLOCKS.HEADING_6] = /*#__PURE__*/emotion.css(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 0.875rem;\n    "]))), _dropdown$1),
@@ -2467,7 +3158,7 @@ var styles$5 = {
 function createHeading(Tag, block) {
   return function Heading(props) {
     return /*#__PURE__*/React.createElement(Tag, Object.assign({}, props.attributes, {
-      className: emotion.cx(styles$5.headings.root, styles$5.headings[block])
+      className: emotion.cx(styles$6.headings.root, styles$6.headings[block])
     }), props.children);
   };
 }
@@ -2563,7 +3254,7 @@ var createHeadingPlugin = function createHeadingPlugin() {
   };
 };
 
-var styles$6 = {
+var styles$7 = {
   button: /*#__PURE__*/emotion.css({
     height: '30px',
     width: '30px',
@@ -2589,7 +3280,7 @@ function ToolbarButton(props) {
   };
 
   var button = /*#__PURE__*/React__default.createElement(f36Components.Button, {
-    className: emotion.cx(styles$6.button, className),
+    className: emotion.cx(styles$7.button, className),
     isDisabled: isDisabled,
     startIcon: children,
     onClick: handleClick,
@@ -2600,7 +3291,7 @@ function ToolbarButton(props) {
 
   if (title) {
     return /*#__PURE__*/React__default.createElement(f36Components.Tooltip, {
-      className: styles$6.tooltip,
+      className: styles$7.tooltip,
       placement: "bottom",
       content: title
     }, button);
@@ -2610,7 +3301,7 @@ function ToolbarButton(props) {
 }
 
 var _templateObject$2, _templateObject2$2, _templateObject3$2;
-var styles$7 = {
+var styles$8 = {
   container: /*#__PURE__*/emotion.css(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    margin: 0 0 ", ";\n  "])), tokens.spacingL),
   hr: /*#__PURE__*/emotion.css(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    margin: 0;\n    height: ", ";\n    background: transparent;\n    position: relative;\n    border: 0;\n    user-select: none;\n    &:hover {\n      cursor: pointer;\n    }\n    &::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 1px;\n      background: ", ";\n      top: 50%;\n    }\n  "])), tokens.spacingM, tokens.gray300),
   hrSelected: /*#__PURE__*/emotion.css(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    &::after {\n      background: ", ";\n      -webkit-box-shadow: 0px 0px 5px ", ";\n      box-shadow: 0px 0px 5px ", ";\n    }\n  "])), tokens.colorPrimary, tokens.colorPrimary, tokens.colorPrimary)
@@ -2668,14 +3359,14 @@ function Hr(props) {
   var isSelected = Slate.useSelected();
   var isFocused = Slate.useFocused();
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props.attributes, {
-    className: styles$7.container,
+    className: styles$8.container,
     "data-void-element": Contentful.BLOCKS.HR
   }), /*#__PURE__*/React.createElement("div", {
     draggable: true,
     // Moving `contentEditable` to this div makes it to be selectable when being the first void element, e.g pressing ctrl + a to select everything
     contentEditable: false
   }, /*#__PURE__*/React.createElement("hr", {
-    className: emotion.cx(styles$7.hr, isSelected && isFocused ? styles$7.hrSelected : undefined)
+    className: emotion.cx(styles$8.hr, isSelected && isFocused ? styles$8.hrSelected : undefined)
   })), props.children);
 }
 var createHrPlugin = function createHrPlugin() {
@@ -2702,7 +3393,7 @@ var createHrPlugin = function createHrPlugin() {
 };
 
 var _templateObject$3, _SYS_LINK_TYPES, _LINK_TYPE_SELECTION_;
-var styles$8 = {
+var styles$9 = {
   removeSelectionLabel: /*#__PURE__*/emotion.css(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    margin-left: ", ";\n  "])), tokens.spacingS)
 };
 var SYS_LINK_TYPES = (_SYS_LINK_TYPES = {}, _SYS_LINK_TYPES[Contentful.INLINES.ENTRY_HYPERLINK] = 'Entry', _SYS_LINK_TYPES[Contentful.INLINES.ASSET_HYPERLINK] = 'Asset', _SYS_LINK_TYPES);
@@ -2885,7 +3576,7 @@ function HyperlinkModal(props) {
   }, "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$8.removeSelectionLabel
+    className: styles$9.removeSelectionLabel
   }, "Remove selection"), /*#__PURE__*/React.createElement("div", null, linkType === Contentful.INLINES.ENTRY_HYPERLINK && /*#__PURE__*/React.createElement(FetchingWrappedEntryCard, {
     sdk: props.sdk,
     locale: props.sdk.field.locale,
@@ -3226,7 +3917,7 @@ function useEntityInfo(props) {
   return getEntityInfo(status.data);
 }
 
-var styles$9 = {
+var styles$a = {
   hyperlinkWrapper: /*#__PURE__*/emotion.css({
     display: 'inline',
     position: 'static',
@@ -3271,13 +3962,13 @@ function EntityHyperlink(props) {
 
   return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
     content: tooltipContent,
-    targetWrapperClassName: styles$9.hyperlinkWrapper,
+    targetWrapperClassName: styles$a.hyperlinkWrapper,
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/React.createElement(f36Components.TextLink, {
     as: "a",
     onClick: handleClick,
-    className: styles$9.hyperlink,
+    className: styles$a.hyperlink,
     "data-link-type": target.sys.linkType,
     "data-link-id": target.sys.id
   }, props.children));
@@ -3301,7 +3992,7 @@ function UrlHyperlink(props) {
 
   return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
     content: uri,
-    targetWrapperClassName: styles$9.hyperlinkWrapper,
+    targetWrapperClassName: styles$a.hyperlinkWrapper,
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/React.createElement(f36Components.TextLink, {
@@ -3309,7 +4000,7 @@ function UrlHyperlink(props) {
     href: uri,
     rel: "noopener noreferrer",
     onClick: handleClick,
-    className: styles$9.hyperlink
+    className: styles$a.hyperlink
   }, props.children));
 }
 
@@ -3435,12 +4126,12 @@ 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\n  div:first-child {\n    margin: 0;\n    line-height: ", ";\n  }\n"])), tokens.lineHeightDefault);
-var styles$a = (_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);
+var styles$b = (_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) {
   return function List(props) {
     return /*#__PURE__*/React.createElement(Tag, Object.assign({}, props.attributes, {
-      className: emotion.cx(baseStyle, styles$a[block])
+      className: emotion.cx(baseStyle, styles$b[block])
     }), props.children);
   };
 }
@@ -4421,14 +5112,14 @@ var ToolbarBoldButton = /*#__PURE__*/createMarkToolbarButton({
   mark: Contentful.MARKS.BOLD,
   icon: /*#__PURE__*/React.createElement(f36Icons.FormatBoldIcon, null)
 });
-var styles$b = {
+var styles$c = {
   bold: /*#__PURE__*/emotion.css({
     fontWeight: 600
   })
 };
 function Bold(props) {
   return /*#__PURE__*/React.createElement("strong", Object.assign({}, props.attributes, {
-    className: styles$b.bold
+    className: styles$c.bold
   }), props.children);
 }
 
@@ -4468,7 +5159,7 @@ var ToolbarCodeButton = /*#__PURE__*/createMarkToolbarButton({
   mark: Contentful.MARKS.CODE,
   icon: /*#__PURE__*/React.createElement(f36Icons.CodeIcon, null)
 });
-var styles$c = {
+var styles$d = {
   code: /*#__PURE__*/emotion.css({
     fontFamily: 'monospace',
     fontSize: '.9em'
@@ -4476,7 +5167,7 @@ var styles$c = {
 };
 function Code(props) {
   return /*#__PURE__*/React.createElement("code", Object.assign({}, props.attributes, {
-    className: styles$c.code
+    className: styles$d.code
   }), props.children);
 }
 var createCodePlugin = function createCodePlugin() {
@@ -4506,14 +5197,14 @@ var ToolbarItalicButton = /*#__PURE__*/createMarkToolbarButton({
   mark: Contentful.MARKS.ITALIC,
   icon: /*#__PURE__*/React.createElement(f36Icons.FormatItalicIcon, null)
 });
-var styles$d = {
+var styles$e = {
   italic: /*#__PURE__*/emotion.css({
     fontStyle: 'italic'
   })
 };
 function Italic(props) {
   return /*#__PURE__*/React.createElement("em", Object.assign({}, props.attributes, {
-    className: styles$d.italic
+    className: styles$e.italic
   }), props.children);
 }
 var createItalicPlugin = function createItalicPlugin() {
@@ -4789,10 +5480,10 @@ var createNormalizerPlugin = function createNormalizerPlugin() {
 };
 
 var _templateObject$6, _styles$1;
-var styles$e = (_styles$1 = {}, _styles$1[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    margin-bottom: 1.5em;\n  "])), tokens.lineHeightDefault), _styles$1);
+var styles$f = (_styles$1 = {}, _styles$1[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    margin-bottom: 1.5em;\n  "])), tokens.lineHeightDefault), _styles$1);
 function Paragraph(props) {
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props.attributes, {
-    className: styles$e[Contentful.BLOCKS.PARAGRAPH]
+    className: styles$f[Contentful.BLOCKS.PARAGRAPH]
   }), props.children);
 }
 
@@ -5205,185 +5896,6 @@ var createSelectOnBackspacePlugin = function createSelectOnBackspacePlugin() {
   });
 };
 
-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 styles = getComputedStyle(node);
-    var lineHeight = parseInt(styles.lineHeight);
-    var fontSize = parseInt(styles.fontSize); // roughly half the whitespace... but not exactly
-
-    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
-    }
-  }));
-}
-
-// 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
-
-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 (event.key === '/') {
-            openPanel(editor.id);
-          }
-        };
-      }
-    }
-  };
-}
-
-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);
-  }
-
-  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 addRow = function addRow(editor, getNextRowPath) {
   if (plateCore.someNode(editor, {
     match: {
@@ -5613,7 +6125,7 @@ var isTable = function isTable(node) {
   return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.TABLE;
 };
 
-var styles$f = {
+var styles$g = {
   topRight: /*#__PURE__*/emotion.css({
     position: 'absolute',
     top: '6px',
@@ -5702,7 +6214,7 @@ var TableActions = function TableActions() {
     size: "small",
     variant: "transparent",
     tabIndex: -1,
-    className: styles$f.topRight,
+    className: styles$g.topRight,
     icon: /*#__PURE__*/React__default.createElement(f36Icons.ChevronDownIcon, null),
     "aria-label": "Open table menu",
     testId: "cf-table-actions-button"
@@ -5727,38 +6239,38 @@ var TableActions = function TableActions() {
 };
 
 var _templateObject$7;
-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 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 Cell = function Cell(props) {
   var isSelected = Slate.useSelected();
   return /*#__PURE__*/React.createElement("td", Object.assign({}, props.attributes, props.element.data, {
-    className: style$3
+    className: style$2
   }), isSelected && /*#__PURE__*/React.createElement(TableActions, null), props.children);
 };
 
 var _templateObject$8;
-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 style$3 = /*#__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$4
+    className: style$3
   }), isSelected && /*#__PURE__*/React.createElement(TableActions, null), props.children);
 };
 
 var _templateObject$9;
-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 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 Row = function Row(props) {
   return /*#__PURE__*/React.createElement("tr", Object.assign({}, props.attributes, {
-    className: style$5
+    className: style$4
   }), 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 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("div", {
     "data-block-type": Contentful.BLOCKS.TABLE
   }, /*#__PURE__*/React.createElement("table", Object.assign({
-    className: style$6
+    className: style$5
   }, props.attributes), /*#__PURE__*/React.createElement("tbody", null, props.children)));
 };
 
@@ -6505,7 +7017,7 @@ var getPlugins = function getPlugins(sdk, onAction) {
   return [// AST must come after the HTML deserializer
   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
+  createDragAndDropPlugin(), createCommandPalettePlugin(), // Block Elements
   createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
   createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
   createMarksPlugin(), // Other
@@ -6636,7 +7148,7 @@ var normalizeEditorValue = function normalizeEditorValue(value, options) {
 };
 
 var STYLE_EDITOR_BORDER = "1px solid " + tokens.gray400;
-var styles$g = {
+var styles$h = {
   root: /*#__PURE__*/emotion.css({
     position: 'relative'
   }),
@@ -6753,7 +7265,7 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
   }, actions) : null;
 };
 
-var styles$h = {
+var styles$i = {
   toolbar: /*#__PURE__*/emotion.css({
     border: "1px solid " + tokens.gray400,
     backgroundColor: tokens.gray100,
@@ -6798,14 +7310,14 @@ var Toolbar = function Toolbar(_ref) {
   var shouldDisableTables = isDisabled || !canInsertBlocks || isListSelected || isBlockquoteSelected;
   return /*#__PURE__*/React__default.createElement(f36Components.Flex, {
     testId: "toolbar",
-    className: styles$h.toolbar,
+    className: styles$i.toolbar,
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$h.formattingOptionsWrapper
+    className: styles$i.formattingOptionsWrapper
   }, /*#__PURE__*/React__default.createElement(ToolbarHeadingButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), validationInfo.isAnyMarkEnabled && /*#__PURE__*/React__default.createElement("span", {
-    className: styles$h.divider
+    className: styles$i.divider
   }), isMarkEnabled(sdk.field, Contentful.MARKS.BOLD) && /*#__PURE__*/React__default.createElement(ToolbarBoldButton, {
     isDisabled: isDisabled
   }), isMarkEnabled(sdk.field, Contentful.MARKS.ITALIC) && /*#__PURE__*/React__default.createElement(ToolbarItalicButton, {
@@ -6815,11 +7327,11 @@ var Toolbar = function Toolbar(_ref) {
   }), isMarkEnabled(sdk.field, Contentful.MARKS.CODE) && /*#__PURE__*/React__default.createElement(ToolbarCodeButton, {
     isDisabled: isDisabled
   }), validationInfo.isAnyHyperlinkEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-    className: styles$h.divider
+    className: styles$i.divider
   }), /*#__PURE__*/React__default.createElement(ToolbarHyperlinkButton, {
     isDisabled: isDisabled
   })), validationInfo.isAnyBlockFormattingEnabled && /*#__PURE__*/React__default.createElement("span", {
-    className: styles$h.divider
+    className: styles$i.divider
   }), /*#__PURE__*/React__default.createElement(ToolbarListButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
@@ -6829,7 +7341,7 @@ var Toolbar = function Toolbar(_ref) {
   }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.TABLE) && /*#__PURE__*/React__default.createElement(ToolbarTableButton, {
     isDisabled: shouldDisableTables
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$h.embedActionsWrapper
+    className: styles$i.embedActionsWrapper
   }, /*#__PURE__*/React__default.createElement(EmbedEntityWidget, {
     isDisabled: isDisabled,
     canInsertBlocks: canInsertBlocks
@@ -6854,7 +7366,7 @@ function getValidationInfo(field) {
 }
 
 var _templateObject$b;
-var styles$i = {
+var styles$j = {
   nativeSticky: /*#__PURE__*/emotion.css(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: -webkit-sticky;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n  "])))
 };
 
@@ -6862,7 +7374,7 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
   var isDisabled = _ref.isDisabled,
       children = _ref.children;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: isDisabled ? '' : styles$i.nativeSticky
+    className: isDisabled ? '' : styles$j.nativeSticky
   }, children);
 };
 
@@ -6878,6 +7390,21 @@ var isRelevantOperation = function isRelevantOperation(op) {
   return true;
 };
 
+var removeInternalMarks = function removeInternalMarks(document) {
+  return _extends({}, document, {
+    content: document.content.map(function (node) {
+      if (node.nodeType === 'text') {
+        node.marks = node.marks.filter(function (mark) {
+          return mark.type !== COMMAND_PROMPT;
+        });
+        return node;
+      }
+
+      return removeInternalMarks(node);
+    })
+  });
+};
+
 var useOnValueChanged = function useOnValueChanged(_ref) {
   var editorId = _ref.editorId,
       handler = _ref.handler,
@@ -6885,10 +7412,12 @@ var useOnValueChanged = function useOnValueChanged(_ref) {
       onSkip = _ref.onSkip;
   var onChange = React.useMemo(function () {
     return debounce(function (document) {
-      handler == null ? void 0 : handler(contentfulSlateJSAdapter.toContentfulDocument({
+      var contentfulDocument = contentfulSlateJSAdapter.toContentfulDocument({
         document: document,
         schema: schema
-      }));
+      });
+      var cleanedDocument = removeInternalMarks(contentfulDocument);
+      handler == null ? void 0 : handler(cleanedDocument);
     }, 500);
   }, [handler]);
   return React.useCallback(function (value) {
@@ -6957,9 +7486,9 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
     setPendingExternalUpdate(true);
     setEditorContent(editor, documentToEditorValue(props.value));
   }, [props.value, id]);
-  var classNames = emotion.cx(styles$g.editor, props.minHeight !== undefined ? emotion.css({
+  var classNames = emotion.cx(styles$h.editor, props.minHeight !== undefined ? emotion.css({
     minHeight: props.minHeight
-  }) : undefined, props.isDisabled ? styles$g.disabled : styles$g.enabled, props.isToolbarHidden && styles$g.hiddenToolbar);
+  }) : undefined, props.isDisabled ? styles$h.disabled : styles$h.enabled, props.isToolbarHidden && styles$h.hiddenToolbar);
   React.useEffect(function () {
     if (!isFirstRender) {
       return;
@@ -6975,7 +7504,7 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
   }, /*#__PURE__*/React__default.createElement(ContentfulEditorIdProvider, {
     value: id
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$g.root,
+    className: styles$h.root,
     "data-test-id": "rich-text-editor"
   }, /*#__PURE__*/React__default.createElement(plateCore.Plate, {
     id: id,
@@ -6990,9 +7519,7 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
     isDisabled: props.isDisabled
   }, /*#__PURE__*/React__default.createElement(Toolbar, {
     isDisabled: props.isDisabled
-  })), /*#__PURE__*/React__default.createElement(SlashCommandsPalette, {
-    editorId: id
-  })))));
+  }))))));
 };
 
 var RichTextEditor = function RichTextEditor(props) {