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

package/dist/field-editor-rich-text.esm.js

@@ -1,10 +1,10 @@
-import React__default, { createContext, useContext, useMemo, createElement, useEffect, useState, memo, Fragment, useCallback } from 'react';
-import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
-import { entityHelpers, shortenStorageUnit, isValidImage, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
+import React__default, { createContext, useContext, useMemo, useState, useEffect, memo, createElement, Fragment, useCallback } from 'react';
+import { useEntities, MissingEntityCard, WrappedAssetCard, WrappedEntryCard, ScheduledIconWithTooltip, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
+import { entityHelpers, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import { BLOCKS, INLINES, TEXT_CONTAINERS, HEADINGS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
 import { usePlateEditorRef, usePlateEditorState, getNodes, toggleNodeType, getText, getAbove, setNodes, isAncestorEmpty, match, getLastChildPath, wrapNodes, getPluginType, unwrapNodes, isCollapsed, isRangeAcrossBlocks, ELEMENT_DEFAULT, findNode, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, deleteFragment, isMarkActive, toggleMark, someHtmlElement, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, queryNode, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateSelectors, getPlateActions, Plate } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
-import deepEquals from 'fast-deep-equal';
+import areEqual from 'fast-deep-equal';
 import noop from 'lodash-es/noop';
 import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
 import { createSoftBreakPlugin as createSoftBreakPlugin$1, createExitBreakPlugin as createExitBreakPlugin$1 } from '@udecode/plate-break';
@@ -13,13 +13,12 @@ import isHotkey from 'is-hotkey';
 import { Text, Element, Editor, Transforms, Range, Path, Node, Point } from 'slate';
 import { ReactEditor, useSelected, useReadOnly, useFocused } from 'slate-react';
 import constate from 'constate';
-import { AssetCard, Menu, Text as Text$1, Notification, EntryCard, MenuItem, Flex, Icon, InlineEntryCard, Button, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, Card, IconButton } from '@contentful/f36-components';
-import mimetype from '@contentful/mimetype';
-import get from 'lodash-es/get';
-import { ClockIcon, AssetIcon, EmbeddedEntryBlockIcon, EmbeddedEntryInlineIcon, ChevronDownIcon, HorizontalRuleIcon, LinkIcon, ListBulletedIcon, ListNumberedIcon, FormatBoldIcon, CodeIcon, FormatItalicIcon, FormatUnderlinedIcon, QuoteIcon, TableIcon, PlusIcon } from '@contentful/f36-icons';
-import tokens from '@contentful/f36-tokens';
+import { AssetCard, EntryCard, Menu, Flex, Icon, InlineEntryCard, MenuItem, Text as Text$1, Button, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, Card, IconButton } from '@contentful/f36-components';
 import find from 'lodash-es/find';
 import flow from 'lodash-es/flow';
+import get from 'lodash-es/get';
+import { AssetIcon, EmbeddedEntryBlockIcon, ClockIcon, EmbeddedEntryInlineIcon, ChevronDownIcon, HorizontalRuleIcon, LinkIcon, ListBulletedIcon, ListNumberedIcon, FormatBoldIcon, CodeIcon, FormatItalicIcon, FormatUnderlinedIcon, QuoteIcon, TableIcon, PlusIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
 import { getListTypes, ELEMENT_LIC, getListItemEntry, isListNested, moveListItemUp, ELEMENT_LI, unwrapList as unwrapList$1, removeFirstListItem, removeListItem, deleteForwardList, deleteFragmentList, normalizeList, createListPlugin as createListPlugin$1, ELEMENT_UL, ELEMENT_OL } from '@udecode/plate-list';
 import castArray from 'lodash-es/castArray';
 import { createBoldPlugin as createBoldPlugin$1, createCodePlugin as createCodePlugin$1, createItalicPlugin as createItalicPlugin$1, createUnderlinePlugin as createUnderlinePlugin$1 } from '@udecode/plate-basic-marks';
@@ -394,17 +393,8 @@ 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 IS_CHROME = /*#__PURE__*/ /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9.]+)(:?\s|$)/.test(navigator.userAgent);
 
 var LINK_TYPES = [INLINES.HYPERLINK, INLINES.ENTRY_HYPERLINK, INLINES.ASSET_HYPERLINK];
 function isBlockSelected(editor, type) {
@@ -632,181 +622,56 @@ var _constate = /*#__PURE__*/constate(useSdk),
     SdkProvider = _constate[0],
     useSdkContext = _constate[1];
 
-var styles = {
-  scheduleIcon: /*#__PURE__*/css({
-    marginRight: tokens.spacing2Xs
-  })
-};
-function EntityStatusIcon(_ref) {
-  var entity = _ref.entity,
-      entityType = _ref.entityType;
+function useFetchedEntity(_ref) {
+  var type = _ref.type,
+      id = _ref.id,
+      onEntityFetchComplete = _ref.onEntityFetchComplete;
 
   var _useEntities = useEntities(),
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+      entries = _useEntities.entries,
+      assets = _useEntities.assets,
+      getOrLoadEntry = _useEntities.getOrLoadEntry,
+      getOrLoadAsset = _useEntities.getOrLoadAsset;
 
-  return /*#__PURE__*/createElement(ScheduledIconWithTooltip, {
-    getEntityScheduledActions: loadEntityScheduledActions,
-    entityType: entityType,
-    entityId: entity.sys.id
-  }, /*#__PURE__*/createElement(ClockIcon, {
-    className: styles.scheduleIcon,
-    size: "small",
-    color: "muted",
-    testId: "schedule-icon"
-  }));
-}
+  var store = type === 'Entry' ? entries : assets;
 
-var styles$1 = {
-  assetCard: /*#__PURE__*/css({
-    cursor: 'pointer'
-  }),
-  cardDropdown: /*#__PURE__*/css({
-    width: '300px'
-  }),
-  truncated: /*#__PURE__*/css({
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis'
-  })
-};
+  var _useState = useState(store[id]),
+      entity = _useState[0],
+      setEntity = _useState[1]; // Deep compare the entity value to keep re-rendering to minimal
 
-function downloadAsset(url, fileName) {
-  // This method won't work if we have CORS disabled(asset not on the contentful server)
-  fetch(url, {
-    method: 'GET',
-    headers: {}
-  }).then(function (response) {
-    response.arrayBuffer().then(function (buffer) {
-      var url = window.URL.createObjectURL(new Blob([buffer]));
-      var link = document.createElement('a');
-      link.href = url;
-      link.setAttribute('download', fileName); //or any other extension
-
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    });
-  })["catch"](function (err) {
-    Notification.error('Failed to download asset');
-    console.log(err);
-  });
-}
-
-function renderAssetInfo(props) {
-  var entityFile = props.entityFile;
-  var fileName = get(entityFile, 'fileName');
-  var mimeType = get(entityFile, 'contentType');
-  var fileSize = get(entityFile, 'details.size');
-  var image = get(entityFile, 'details.image');
-  return [/*#__PURE__*/createElement(Menu.SectionTitle, {
-    key: "file-section"
-  }, "File info"), fileName && /*#__PURE__*/createElement(Menu.Item, {
-    key: "file-name"
-  }, /*#__PURE__*/createElement(Text$1, {
-    isTruncated: true
-  }, fileName)), mimeType && /*#__PURE__*/createElement(Menu.Item, {
-    key: "file-type"
-  }, /*#__PURE__*/createElement(Text$1, {
-    isTruncated: true
-  }, mimeType)), fileSize && /*#__PURE__*/createElement(Menu.Item, {
-    key: "file-size"
-  }, shortenStorageUnit(fileSize, 'B')), image && /*#__PURE__*/createElement(Menu.Item, {
-    key: "file-dimentions"
-  }, image.width + " \xD7 " + image.height)].filter(function (item) {
-    return item;
-  });
-}
-function renderActions(props) {
-  var entityFile = props.entityFile,
-      isDisabled = props.isDisabled,
-      onEdit = props.onEdit,
-      onRemove = props.onRemove;
-  return [/*#__PURE__*/createElement(Menu.SectionTitle, {
-    key: "section-title"
-  }, "Actions"), onEdit ? /*#__PURE__*/createElement(Menu.Item, {
-    key: "edit",
-    onClick: onEdit,
-    testId: "card-action-edit"
-  }, "Edit") : null, entityFile ? /*#__PURE__*/createElement(Menu.Item, {
-    key: "download",
-    onClick: function onClick() {
-      if (typeof entityFile.url === 'string') {
-        downloadAsset(entityFile.url, get(entityFile, 'fileName'));
-      }
-    },
-    testId: "card-action-download"
-  }, "Download") : null, onRemove ? /*#__PURE__*/createElement(Menu.Item, {
-    key: "remove",
-    disabled: isDisabled,
-    onClick: onRemove,
-    testId: "card-action-remove"
-  }, "Remove") : null].filter(function (item) {
-    return item;
-  });
-}
-function FetchingWrappedAssetCard(props) {
-  var _asset$fields;
-
-  var _useEntities = useEntities(),
-      getOrLoadAsset = _useEntities.getOrLoadAsset,
-      assets = _useEntities.assets;
 
-  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;
   useEffect(function () {
-    getOrLoadAsset(props.assetId);
-  }, [props.assetId]); // eslint-disable-line
+    var newValue = store[id];
 
-  useEffect(function () {
-    if (!asset) {
-      return;
+    if (!areEqual(entity, newValue)) {
+      setEntity(newValue);
     }
+  }, [store, entity, id]); // Fetch the entity if needed
 
-    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
-  }, [asset, onEntityFetchComplete]);
-
-  function getAssetSrc() {
-    if (!(entityFile != null && entityFile.url)) return '';
-    return entityFile.url + "?h=300";
-  }
-
-  function getFileType() {
-    var groupToIconMap = {
-      image: 'image',
-      video: 'video',
-      audio: 'audio',
-      richtext: 'richtext',
-      presentation: 'presentation',
-      spreadsheet: 'spreadsheet',
-      pdfdocument: 'pdf',
-      archive: 'archive',
-      plaintext: 'plaintext',
-      code: 'code',
-      markup: 'markup'
-    };
-    var archive = groupToIconMap['archive'];
-
-    if (!entityFile) {
-      return archive;
+  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
+  }, [type, id]);
+  useEffect(function () {
+    if (entity) {
+      onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
     }
+  }, [onEntityFetchComplete, entity]);
+  return entity;
+}
 
-    var groupName = mimetype.getGroupLabel({
-      type: entityFile.contentType,
-      fallbackFileName: entityFile.fileName
-    });
-    return groupToIconMap[groupName] || archive;
-  }
-
-  if (asset === undefined) {
+var InternalAssetCard = /*#__PURE__*/memo(function (props) {
+  if (props.asset === undefined) {
     return /*#__PURE__*/createElement(AssetCard, {
-      size: "small",
+      size: "default",
       isLoading: true
     });
   }
 
-  if (asset === 'failed') {
+  if (props.asset === 'failed') {
     return /*#__PURE__*/createElement(MissingEntityCard, {
       entityType: "Asset",
       isDisabled: props.isDisabled,
@@ -814,138 +679,51 @@ function FetchingWrappedAssetCard(props) {
     });
   }
 
-  var status = asset ? entityHelpers.getEntryStatus(asset.sys) : undefined;
-
-  if (status === 'deleted') {
-    return /*#__PURE__*/createElement(MissingEntityCard, {
-      entityType: "Asset",
-      asSquare: true,
-      isDisabled: props.isDisabled,
-      onRemove: props.onRemove
-    });
-  }
-
-  var entityTitle = entityHelpers.getAssetTitle({
-    asset: asset,
-    localeCode: props.locale,
-    defaultLocaleCode: defaultLocaleCode,
-    defaultTitle: 'Untitled'
-  });
-  return /*#__PURE__*/createElement(AssetCard, {
-    title: entityTitle,
-    isSelected: props.isSelected,
+  return /*#__PURE__*/createElement(WrappedAssetCard, {
+    getEntityScheduledActions: props.loadEntityScheduledActions,
     size: "small",
-    src: getAssetSrc(),
-    type: getFileType(),
-    status: status,
-    icon: /*#__PURE__*/createElement(EntityStatusIcon, {
-      entityType: "Asset",
-      entity: asset
-    }),
-    className: styles$1.assetCard,
-    actions: [renderActions({
-      entityFile: entityFile,
-      isDisabled: props.isDisabled,
-      onEdit: props.onEdit,
-      onRemove: props.onRemove
-    }), entityFile ? renderAssetInfo({
-      entityFile: entityFile
-    }) : null].filter(function (item) {
-      return item;
-    })
+    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 styles$2 = {
-  entryCard: /*#__PURE__*/css({
-    cursor: 'pointer'
-  })
-};
+  var _useEntities = useEntities(),
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
 
-function EntryThumbnail(_ref) {
-  var file = _ref.file;
-  if (!isValidImage(file)) return null;
-  return /*#__PURE__*/createElement(AssetThumbnail, {
-    file: file
+  var asset = useFetchedEntity({
+    type: 'Asset',
+    id: assetId,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  return /*#__PURE__*/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 FetchingWrappedEntryCard(props) {
-  var _useEntities = useEntities(),
-      getOrLoadEntry = _useEntities.getOrLoadEntry,
-      entries = _useEntities.entries,
-      getOrLoadAsset = _useEntities.getOrLoadAsset;
-
-  var _React$useState = useState(null),
-      file = _React$useState[0],
-      setFile = _React$useState[1];
-
-  var entry = entries[props.entryId];
-  var contentType = useMemo(function () {
-    if (!entry || entry === 'failed') {
-      return undefined;
-    }
-
-    return props.sdk.space.getCachedContentTypes().find(function (contentType) {
-      return contentType.sys.id === entry.sys.contentType.sys.id;
-    });
-  }, [props.sdk, entry]);
-  var defaultLocaleCode = props.sdk.locales["default"];
-  var onEntityFetchComplete = props.onEntityFetchComplete;
-  useEffect(function () {
-    if (!entry || entry === 'failed') return;
-    var subscribed = true;
-    entityHelpers.getEntryImage({
-      entry: entry,
-      contentType: contentType,
-      localeCode: props.locale,
-      defaultLocaleCode: defaultLocaleCode
-    }, 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]);
-  useEffect(function () {
-    getOrLoadEntry(props.entryId);
-  }, [props.entryId]); // eslint-disable-line
-
-  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__*/createElement(MenuItem, {
-      key: "edit",
-      testId: "card-action-edit",
-      onClick: function onClick() {
-        props.onEdit && props.onEdit();
-      }
-    }, "Edit") : null, props.onRemove ? /*#__PURE__*/createElement(MenuItem, {
-      key: "delete",
-      disabled: props.isDisabled,
-      testId: "card-action-remove",
-      onClick: function onClick() {
-        props.onRemove && props.onRemove();
-      }
-    }, "Remove") : null].filter(function (item) {
-      return item;
-    });
-  }
+var InternalEntryCard = /*#__PURE__*/memo(function (props) {
+  var entry = props.entry,
+      sdk = props.sdk,
+      loadEntityScheduledActions = props.loadEntityScheduledActions;
 
   if (entry === undefined) {
     return /*#__PURE__*/createElement(EntryCard, {
-      size: "default",
       isLoading: true
     });
   }
@@ -958,50 +736,50 @@ function FetchingWrappedEntryCard(props) {
     });
   }
 
-  var entryStatus = entry ? entityHelpers.getEntryStatus(entry.sys) : undefined;
-
-  if (entryStatus === 'deleted') {
-    return /*#__PURE__*/createElement(MissingEntityCard, {
-      entityType: "Entry",
-      isDisabled: props.isDisabled,
-      onRemove: props.onRemove
-    });
-  }
-
-  var title = entityHelpers.getEntryTitle({
-    entry: entry,
-    contentType: contentType,
-    localeCode: props.locale,
-    defaultLocaleCode: defaultLocaleCode,
-    defaultTitle: 'Untitled'
+  var contentType = sdk.space.getCachedContentTypes().find(function (contentType) {
+    return contentType.sys.id === entry.sys.contentType.sys.id;
   });
-  var description = entityHelpers.getEntityDescription({
-    entity: entry,
-    contentType: contentType,
+  return /*#__PURE__*/createElement(WrappedEntryCard, {
+    size: "default",
+    getAsset: props.sdk.space.getAsset,
+    getEntityScheduledActions: loadEntityScheduledActions,
+    isSelected: props.isSelected,
+    isDisabled: props.isDisabled,
     localeCode: props.locale,
-    defaultLocaleCode: defaultLocaleCode
+    defaultLocaleCode: props.sdk.locales["default"],
+    contentType: contentType,
+    entry: entry,
+    onEdit: props.onEdit,
+    onRemove: props.isDisabled ? undefined : props.onRemove,
+    isClickable: false
   });
-  return /*#__PURE__*/createElement(EntryCard, {
-    contentType: contentType == null ? void 0 : contentType.name,
-    title: title,
-    description: description,
-    size: "default",
+}, areEqual);
+InternalEntryCard.displayName = 'ReferenceCard';
+var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
+  var entryId = props.entryId,
+      onEntityFetchComplete = props.onEntityFetchComplete;
+
+  var _useEntities = useEntities(),
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+
+  var entry = useFetchedEntity({
+    type: 'Entry',
+    id: entryId,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  return /*#__PURE__*/createElement(InternalEntryCard, {
+    entry: entry,
+    sdk: props.sdk,
+    locale: props.locale,
+    isDisabled: props.isDisabled,
     isSelected: props.isSelected,
-    status: entryStatus,
-    className: styles$2.entryCard,
-    thumbnailElement: file ? /*#__PURE__*/createElement(EntryThumbnail, {
-      file: file
-    }) : undefined,
-    icon: /*#__PURE__*/createElement(EntityStatusIcon, {
-      entityType: "Entry",
-      entity: entry
-    }),
-    withDragHandle: false,
-    actions: renderDropdown()
+    onEdit: props.onEdit,
+    onRemove: props.onRemove,
+    loadEntityScheduledActions: loadEntityScheduledActions
   });
-}
+};
 
-var styles$3 = {
+var styles = {
   root: /*#__PURE__*/css({
     marginBottom: '1.25rem !important',
     display: 'block'
@@ -1026,34 +804,31 @@ function LinkedEntityBlock(props) {
   var _element$data$target$ = element.data.target.sys,
       entityId = _element$data$target$.id,
       entityType = _element$data$target$.linkType;
-
-  var handleEditClick = function handleEditClick() {
+  var handleEditClick = React__default.useCallback(function () {
     var openEntity = entityType === 'Asset' ? sdk.navigator.openAsset : sdk.navigator.openEntry;
     return openEntity(entityId, {
       slideIn: true
     });
-  };
-
-  var handleRemoveClick = function handleRemoveClick() {
+  }, [sdk, entityId, entityType]);
+  var handleRemoveClick = React__default.useCallback(function () {
     if (!editor) return;
     var pathToElement = ReactEditor.findPath(editor, element);
     Transforms.removeNodes(editor, {
       at: pathToElement
     });
-  };
-
+  }, [editor, element]);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
-    className: styles$3.root,
+    className: styles.root,
     "data-entity-type": entityType,
     "data-entity-id": entityId,
     // COMPAT: This makes copy & paste work for Firefox
-    contentEditable: !HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
-    draggable: !HAS_BEFORE_INPUT_SUPPORT ? true : undefined
+    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: HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
-    draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined,
-    className: styles$3.container
+    contentEditable: IS_CHROME ? false : undefined,
+    draggable: IS_CHROME ? true : undefined,
+    className: styles.container
   }, entityType === 'Entry' && /*#__PURE__*/React__default.createElement(FetchingWrappedEntryCard, {
     sdk: sdk,
     entryId: entityId,
@@ -1172,9 +947,11 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 
 
     var IteratorPrototype = {};
-    define(IteratorPrototype, iteratorSymbol, function () {
+
+    IteratorPrototype[iteratorSymbol] = function () {
       return this;
-    });
+    };
+
     var getProto = Object.getPrototypeOf;
     var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
 
@@ -1185,9 +962,8 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-    GeneratorFunction.prototype = GeneratorFunctionPrototype;
-    define(Gp, "constructor", GeneratorFunctionPrototype);
-    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
+    GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
+    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.
 
@@ -1292,9 +1068,11 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     defineIteratorMethods(AsyncIterator.prototype);
-    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+
+    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.
@@ -1471,12 +1249,13 @@ 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.
 
-    define(Gp, iteratorSymbol, function () {
+    Gp[iteratorSymbol] = function () {
       return this;
-    });
-    define(Gp, "toString", function () {
+    };
+
+    Gp.toString = function () {
       return "[object Generator]";
-    });
+    };
 
     function pushTryEntry(locs) {
       var entry = {
@@ -1788,19 +1567,14 @@ 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, in modern engines
-    // we can explicitly access globalThis. In older engines we can escape
+    // 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.
-    if (typeof globalThis === "object") {
-      globalThis.regeneratorRuntime = runtime;
-    } else {
-      Function("r", "regeneratorRuntime = r")(runtime);
-    }
+    Function("r", "regeneratorRuntime = r")(runtime);
   }
 });
 
@@ -2001,7 +1775,7 @@ function insertBlock(editor, nodeType, entity) {
   focus(editor);
 }
 
-var styles$4 = {
+var styles$1 = {
   icon: /*#__PURE__*/css({
     marginRight: '10px'
   })
@@ -2049,7 +1823,7 @@ function EmbeddedEntityBlockToolbarIcon(_ref) {
     flexDirection: "row"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     as: type === 'Asset' ? AssetIcon : EmbeddedEntryBlockIcon,
-    className: "rich-text__embedded-entry-list-icon " + styles$4.icon,
+    className: "rich-text__embedded-entry-list-icon " + styles$1.icon,
     variant: "secondary"
   }), /*#__PURE__*/React__default.createElement("span", null, type)));
 }
@@ -2148,7 +1922,7 @@ var createEmbeddedAssetBlockPlugin = /*#__PURE__*/createEmbeddedEntityPlugin(BLO
 
 var getEntryTitle = entityHelpers.getEntryTitle,
     getEntryStatus = entityHelpers.getEntryStatus;
-var styles$5 = {
+var styles$2 = {
   scheduledIcon: /*#__PURE__*/css({
     verticalAlign: 'text-bottom',
     marginRight: tokens.spacing2Xs
@@ -2219,7 +1993,7 @@ function FetchingWrappedInlineEntryCard(props) {
       actions: [/*#__PURE__*/React__default.createElement(MenuItem, {
         key: "remove",
         onClick: props.onRemove,
-        testId: "card-action-remove"
+        testId: "delete"
       }, "Remove")]
     });
   }
@@ -2236,14 +2010,14 @@ function FetchingWrappedInlineEntryCard(props) {
       key: "remove",
       onClick: props.onRemove,
       disabled: props.isDisabled,
-      testId: "card-action-remove"
+      testId: "delete"
     }, "Remove")]
   }, /*#__PURE__*/React__default.createElement(ScheduledIconWithTooltip, {
     getEntityScheduledActions: loadEntityScheduledActions,
     entityType: "Entry",
     entityId: entry.sys.id
   }, /*#__PURE__*/React__default.createElement(ClockIcon, {
-    className: styles$5.scheduledIcon,
+    className: styles$2.scheduledIcon,
     variant: "muted",
     testId: "scheduled-icon"
   })), /*#__PURE__*/React__default.createElement(Text$1, null, title));
@@ -2267,7 +2041,7 @@ function createInlineEntryNode(id) {
   };
 }
 
-var styles$6 = {
+var styles$3 = {
   icon: /*#__PURE__*/css({
     marginRight: '10px'
   }),
@@ -2303,15 +2077,15 @@ function EmbeddedEntityInline(props) {
   }
 
   return /*#__PURE__*/createElement("span", Object.assign({}, props.attributes, {
-    className: styles$6.root,
+    className: styles$3.root,
     "data-embedded-entity-inline-id": entryId,
     // COMPAT: This makes copy & paste work for Firefox
-    contentEditable: !HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
-    draggable: !HAS_BEFORE_INPUT_SUPPORT ? true : undefined
+    contentEditable: IS_CHROME ? undefined : false,
+    draggable: IS_CHROME ? true : undefined
   }), /*#__PURE__*/createElement("span", {
     // 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
+    contentEditable: IS_CHROME ? false : undefined,
+    draggable: IS_CHROME ? true : undefined
   }, /*#__PURE__*/createElement(FetchingWrappedInlineEntryCard, {
     sdk: sdk,
     entryId: entryId,
@@ -2433,7 +2207,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
     flexDirection: "row"
   }, /*#__PURE__*/createElement(EmbeddedEntryInlineIcon, {
     variant: "secondary",
-    className: "rich-text__embedded-entry-list-icon " + styles$6.icon
+    className: "rich-text__embedded-entry-list-icon " + styles$3.icon
   }), /*#__PURE__*/createElement("span", null, "Inline entry")));
 }
 function createEmbeddedEntityInlinePlugin(sdk) {
@@ -2509,7 +2283,7 @@ var isMarkEnabled = function isMarkEnabled(field, mark) {
 };
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
-var styles$7 = {
+var styles$4 = {
   dropdown: (_dropdown = {
     root: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-weight: ", ";\n    "])), tokens.fontWeightDemiBold)
   }, _dropdown[BLOCKS.PARAGRAPH] = /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: ", ";\n    "])), tokens.fontSizeL), _dropdown[BLOCKS.HEADING_1] = /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.625rem;\n    "]))), _dropdown[BLOCKS.HEADING_2] = /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.4375rem;\n    "]))), _dropdown[BLOCKS.HEADING_3] = /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.25rem;\n    "]))), _dropdown[BLOCKS.HEADING_4] = /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.125rem;\n    "]))), _dropdown[BLOCKS.HEADING_5] = /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1rem;\n    "]))), _dropdown[BLOCKS.HEADING_6] = /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 0.875rem;\n    "]))), _dropdown)
@@ -2604,7 +2378,7 @@ function ToolbarHeadingButton(props) {
       testId: "dropdown-option-" + nodeType,
       disabled: props.isDisabled
     }, /*#__PURE__*/createElement("span", {
-      className: cx(styles$7.dropdown.root, styles$7.dropdown[nodeType])
+      className: cx(styles$4.dropdown.root, styles$4.dropdown[nodeType])
     }, LABELS[nodeType]));
   }).filter(Boolean)));
 }
@@ -2674,7 +2448,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$8 = {
+var styles$5 = {
   dropdown: (_dropdown$1 = {
     root: /*#__PURE__*/css(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-weight: ", ";\n    "])), tokens.fontWeightDemiBold)
   }, _dropdown$1[BLOCKS.PARAGRAPH] = /*#__PURE__*/css(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: ", ";\n    "])), tokens.fontSizeL), _dropdown$1[BLOCKS.HEADING_1] = /*#__PURE__*/css(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.625rem;\n    "]))), _dropdown$1[BLOCKS.HEADING_2] = /*#__PURE__*/css(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.4375rem;\n    "]))), _dropdown$1[BLOCKS.HEADING_3] = /*#__PURE__*/css(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.25rem;\n    "]))), _dropdown$1[BLOCKS.HEADING_4] = /*#__PURE__*/css(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1.125rem;\n    "]))), _dropdown$1[BLOCKS.HEADING_5] = /*#__PURE__*/css(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 1rem;\n    "]))), _dropdown$1[BLOCKS.HEADING_6] = /*#__PURE__*/css(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n      font-size: 0.875rem;\n    "]))), _dropdown$1),
@@ -2686,7 +2460,7 @@ var styles$8 = {
 function createHeading(Tag, block) {
   return function Heading(props) {
     return /*#__PURE__*/createElement(Tag, Object.assign({}, props.attributes, {
-      className: cx(styles$8.headings.root, styles$8.headings[block])
+      className: cx(styles$5.headings.root, styles$5.headings[block])
     }), props.children);
   };
 }
@@ -2782,7 +2556,7 @@ var createHeadingPlugin = function createHeadingPlugin() {
   };
 };
 
-var styles$9 = {
+var styles$6 = {
   button: /*#__PURE__*/css({
     height: '30px',
     width: '30px',
@@ -2808,7 +2582,7 @@ function ToolbarButton(props) {
   };
 
   var button = /*#__PURE__*/React__default.createElement(Button, {
-    className: cx(styles$9.button, className),
+    className: cx(styles$6.button, className),
     isDisabled: isDisabled,
     startIcon: children,
     onClick: handleClick,
@@ -2819,7 +2593,7 @@ function ToolbarButton(props) {
 
   if (title) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
-      className: styles$9.tooltip,
+      className: styles$6.tooltip,
       placement: "bottom",
       content: title
     }, button);
@@ -2829,7 +2603,7 @@ function ToolbarButton(props) {
 }
 
 var _templateObject$2, _templateObject2$2, _templateObject3$2;
-var styles$a = {
+var styles$7 = {
   container: /*#__PURE__*/css(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    margin: 0 0 ", ";\n  "])), tokens.spacingL),
   hr: /*#__PURE__*/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__*/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)
@@ -2887,14 +2661,14 @@ function Hr(props) {
   var isSelected = useSelected();
   var isFocused = useFocused();
   return /*#__PURE__*/createElement("div", Object.assign({}, props.attributes, {
-    className: styles$a.container,
+    className: styles$7.container,
     "data-void-element": BLOCKS.HR
   }), /*#__PURE__*/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__*/createElement("hr", {
-    className: cx(styles$a.hr, isSelected && isFocused ? styles$a.hrSelected : undefined)
+    className: cx(styles$7.hr, isSelected && isFocused ? styles$7.hrSelected : undefined)
   })), props.children);
 }
 var createHrPlugin = function createHrPlugin() {
@@ -2921,7 +2695,7 @@ var createHrPlugin = function createHrPlugin() {
 };
 
 var _templateObject$3, _SYS_LINK_TYPES, _LINK_TYPE_SELECTION_;
-var styles$b = {
+var styles$8 = {
   removeSelectionLabel: /*#__PURE__*/css(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    margin-left: ", ";\n  "])), tokens.spacingS)
 };
 var SYS_LINK_TYPES = (_SYS_LINK_TYPES = {}, _SYS_LINK_TYPES[INLINES.ENTRY_HYPERLINK] = 'Entry', _SYS_LINK_TYPES[INLINES.ASSET_HYPERLINK] = 'Asset', _SYS_LINK_TYPES);
@@ -3104,7 +2878,7 @@ function HyperlinkModal(props) {
   }, "Link target", ' '), linkEntity && linkEntity.sys.linkType === SYS_LINK_TYPES[linkType] ? /*#__PURE__*/createElement(Fragment, null, !props.readonly && /*#__PURE__*/createElement(TextLink, {
     testId: "entity-selection-link",
     onClick: resetLinkEntity,
-    className: styles$b.removeSelectionLabel
+    className: styles$8.removeSelectionLabel
   }, "Remove selection"), /*#__PURE__*/createElement("div", null, linkType === INLINES.ENTRY_HYPERLINK && /*#__PURE__*/createElement(FetchingWrappedEntryCard, {
     sdk: props.sdk,
     locale: props.sdk.field.locale,
@@ -3445,7 +3219,7 @@ function useEntityInfo(props) {
   return getEntityInfo(status.data);
 }
 
-var styles$c = {
+var styles$9 = {
   hyperlinkWrapper: /*#__PURE__*/css({
     display: 'inline',
     position: 'static',
@@ -3490,13 +3264,13 @@ function EntityHyperlink(props) {
 
   return /*#__PURE__*/createElement(Tooltip, {
     content: tooltipContent,
-    targetWrapperClassName: styles$c.hyperlinkWrapper,
+    targetWrapperClassName: styles$9.hyperlinkWrapper,
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/createElement(TextLink, {
     as: "a",
     onClick: handleClick,
-    className: styles$c.hyperlink,
+    className: styles$9.hyperlink,
     "data-link-type": target.sys.linkType,
     "data-link-id": target.sys.id
   }, props.children));
@@ -3520,7 +3294,7 @@ function UrlHyperlink(props) {
 
   return /*#__PURE__*/createElement(Tooltip, {
     content: uri,
-    targetWrapperClassName: styles$c.hyperlinkWrapper,
+    targetWrapperClassName: styles$9.hyperlinkWrapper,
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/createElement(TextLink, {
@@ -3528,7 +3302,7 @@ function UrlHyperlink(props) {
     href: uri,
     rel: "noopener noreferrer",
     onClick: handleClick,
-    className: styles$c.hyperlink
+    className: styles$9.hyperlink
   }, props.children));
 }
 
@@ -3654,12 +3428,12 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
 
 var _templateObject$4, _templateObject2$3, _templateObject3$3, _styles;
 var baseStyle = /*#__PURE__*/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[BLOCKS.UL_LIST] = /*#__PURE__*/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[BLOCKS.OL_LIST] = /*#__PURE__*/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$a = (_styles = {}, _styles[BLOCKS.UL_LIST] = /*#__PURE__*/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[BLOCKS.OL_LIST] = /*#__PURE__*/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__*/createElement(Tag, Object.assign({}, props.attributes, {
-      className: cx(baseStyle, styles$d[block])
+      className: cx(baseStyle, styles$a[block])
     }), props.children);
   };
 }
@@ -4640,14 +4414,14 @@ var ToolbarBoldButton = /*#__PURE__*/createMarkToolbarButton({
   mark: MARKS.BOLD,
   icon: /*#__PURE__*/createElement(FormatBoldIcon, null)
 });
-var styles$e = {
+var styles$b = {
   bold: /*#__PURE__*/css({
     fontWeight: 600
   })
 };
 function Bold(props) {
   return /*#__PURE__*/createElement("strong", Object.assign({}, props.attributes, {
-    className: styles$e.bold
+    className: styles$b.bold
   }), props.children);
 }
 
@@ -4687,7 +4461,7 @@ var ToolbarCodeButton = /*#__PURE__*/createMarkToolbarButton({
   mark: MARKS.CODE,
   icon: /*#__PURE__*/createElement(CodeIcon, null)
 });
-var styles$f = {
+var styles$c = {
   code: /*#__PURE__*/css({
     fontFamily: 'monospace',
     fontSize: '.9em'
@@ -4695,7 +4469,7 @@ var styles$f = {
 };
 function Code(props) {
   return /*#__PURE__*/createElement("code", Object.assign({}, props.attributes, {
-    className: styles$f.code
+    className: styles$c.code
   }), props.children);
 }
 var createCodePlugin = function createCodePlugin() {
@@ -4725,14 +4499,14 @@ var ToolbarItalicButton = /*#__PURE__*/createMarkToolbarButton({
   mark: MARKS.ITALIC,
   icon: /*#__PURE__*/createElement(FormatItalicIcon, null)
 });
-var styles$g = {
+var styles$d = {
   italic: /*#__PURE__*/css({
     fontStyle: 'italic'
   })
 };
 function Italic(props) {
   return /*#__PURE__*/createElement("em", Object.assign({}, props.attributes, {
-    className: styles$g.italic
+    className: styles$d.italic
   }), props.children);
 }
 var createItalicPlugin = function createItalicPlugin() {
@@ -5008,10 +4782,10 @@ var createNormalizerPlugin = function createNormalizerPlugin() {
 };
 
 var _templateObject$6, _styles$1;
-var styles$h = (_styles$1 = {}, _styles$1[BLOCKS.PARAGRAPH] = /*#__PURE__*/css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    margin-bottom: 1.5em;\n  "])), tokens.lineHeightDefault), _styles$1);
+var styles$e = (_styles$1 = {}, _styles$1[BLOCKS.PARAGRAPH] = /*#__PURE__*/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__*/createElement("div", Object.assign({}, props.attributes, {
-    className: styles$h[BLOCKS.PARAGRAPH]
+    className: styles$e[BLOCKS.PARAGRAPH]
   }), props.children);
 }
 
@@ -5832,7 +5606,7 @@ var isTable = function isTable(node) {
   return Element.isElement(node) && node.type === BLOCKS.TABLE;
 };
 
-var styles$i = {
+var styles$f = {
   topRight: /*#__PURE__*/css({
     position: 'absolute',
     top: '6px',
@@ -5921,7 +5695,7 @@ var TableActions = function TableActions() {
     size: "small",
     variant: "transparent",
     tabIndex: -1,
-    className: styles$i.topRight,
+    className: styles$f.topRight,
     icon: /*#__PURE__*/React__default.createElement(ChevronDownIcon, null),
     "aria-label": "Open table menu",
     testId: "cf-table-actions-button"
@@ -6855,7 +6629,7 @@ var normalizeEditorValue = function normalizeEditorValue(value, options) {
 };
 
 var STYLE_EDITOR_BORDER = "1px solid " + tokens.gray400;
-var styles$j = {
+var styles$g = {
   root: /*#__PURE__*/css({
     position: 'relative'
   }),
@@ -6971,7 +6745,7 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
   }, actions);
 };
 
-var styles$k = {
+var styles$h = {
   toolbar: /*#__PURE__*/css({
     border: "1px solid " + tokens.gray400,
     backgroundColor: tokens.gray100,
@@ -7016,14 +6790,14 @@ var Toolbar = function Toolbar(_ref) {
   var shouldDisableTables = isDisabled || !canInsertBlocks || isListSelected || isBlockquoteSelected;
   return /*#__PURE__*/React__default.createElement(Flex, {
     testId: "toolbar",
-    className: styles$k.toolbar,
+    className: styles$h.toolbar,
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$k.formattingOptionsWrapper
+    className: styles$h.formattingOptionsWrapper
   }, /*#__PURE__*/React__default.createElement(ToolbarHeadingButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), validationInfo.isAnyMarkEnabled && /*#__PURE__*/React__default.createElement("span", {
-    className: styles$k.divider
+    className: styles$h.divider
   }), isMarkEnabled(sdk.field, MARKS.BOLD) && /*#__PURE__*/React__default.createElement(ToolbarBoldButton, {
     isDisabled: isDisabled
   }), isMarkEnabled(sdk.field, MARKS.ITALIC) && /*#__PURE__*/React__default.createElement(ToolbarItalicButton, {
@@ -7033,11 +6807,11 @@ var Toolbar = function Toolbar(_ref) {
   }), isMarkEnabled(sdk.field, 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$k.divider
+    className: styles$h.divider
   }), /*#__PURE__*/React__default.createElement(ToolbarHyperlinkButton, {
     isDisabled: isDisabled
   })), validationInfo.isAnyBlockFormattingEnabled && /*#__PURE__*/React__default.createElement("span", {
-    className: styles$k.divider
+    className: styles$h.divider
   }), /*#__PURE__*/React__default.createElement(ToolbarListButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
@@ -7047,7 +6821,7 @@ var Toolbar = function Toolbar(_ref) {
   }), isNodeTypeEnabled(sdk.field, BLOCKS.TABLE) && /*#__PURE__*/React__default.createElement(ToolbarTableButton, {
     isDisabled: shouldDisableTables
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$k.embedActionsWrapper
+    className: styles$h.embedActionsWrapper
   }, /*#__PURE__*/React__default.createElement(EmbedEntityWidget, {
     isDisabled: isDisabled,
     canInsertBlocks: canInsertBlocks
@@ -7072,7 +6846,7 @@ function getValidationInfo(field) {
 }
 
 var _templateObject$b;
-var styles$l = {
+var styles$i = {
   nativeSticky: /*#__PURE__*/css(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: -webkit-sticky;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n  "])))
 };
 
@@ -7080,7 +6854,7 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
   var isDisabled = _ref.isDisabled,
       children = _ref.children;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: isDisabled ? '' : styles$l.nativeSticky
+    className: isDisabled ? '' : styles$i.nativeSticky
   }, children);
 };
 
@@ -7175,9 +6949,9 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
     setPendingExternalUpdate(true);
     setEditorContent(editor, documentToEditorValue(props.value));
   }, [props.value, id]);
-  var classNames = cx(styles$j.editor, props.minHeight !== undefined ? css({
+  var classNames = cx(styles$g.editor, props.minHeight !== undefined ? css({
     minHeight: props.minHeight
-  }) : undefined, props.isDisabled ? styles$j.disabled : styles$j.enabled, props.isToolbarHidden && styles$j.hiddenToolbar);
+  }) : undefined, props.isDisabled ? styles$g.disabled : styles$g.enabled, props.isToolbarHidden && styles$g.hiddenToolbar);
   useEffect(function () {
     if (!isFirstRender) {
       return;
@@ -7193,7 +6967,7 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
   }, /*#__PURE__*/React__default.createElement(ContentfulEditorIdProvider, {
     value: id
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$j.root,
+    className: styles$g.root,
     "data-test-id": "rich-text-editor"
   }, /*#__PURE__*/React__default.createElement(Plate, {
     id: id,
@@ -7220,7 +6994,7 @@ var RichTextEditor = function RichTextEditor(props) {
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var isEmptyValue = useCallback(function (value) {
-    return !value || deepEquals(value, EMPTY_DOCUMENT);
+    return !value || areEqual(value, EMPTY_DOCUMENT);
   }, []);
   var id = getContentfulEditorId(props.sdk);
   return /*#__PURE__*/React__default.createElement(EntityProvider, {
@@ -7230,7 +7004,7 @@ var RichTextEditor = function RichTextEditor(props) {
     field: sdk.field,
     isInitiallyDisabled: isInitiallyDisabled,
     isEmptyValue: isEmptyValue,
-    isEqualValues: deepEquals
+    isEqualValues: areEqual
   }, function (_ref) {
     var lastRemoteValue = _ref.lastRemoteValue,
         disabled = _ref.disabled,