@contentful/field-editor-rich-text 0.23.0-next → 0.24.1-next

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

@@ -1,14 +1,14 @@
-import React__default, { createElement, useMemo, useState, useEffect, Fragment, useCallback } from 'react';
+import React__default, { useState, useEffect, createElement, useMemo, Fragment, useCallback } from 'react';
 import noop from 'lodash-es/noop';
 import { toSlatejsDocument, toContentfulDocument } from '@contentful/contentful-slatejs-adapter';
 import { TOP_LEVEL_BLOCKS, BLOCKS, CONTAINERS, VOID_BLOCKS, INLINES, MARKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
-import { useEntities, MissingEntityCard, WrappedEntryCard, WrappedAssetCard, EntityProvider, ScheduledIconWithTooltip } from '@contentful/field-editor-reference';
+import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, EntityProvider } from '@contentful/field-editor-reference';
 import { css, cx } from 'emotion';
 import tokens from '@contentful/forma-36-tokens';
 import deepEquals from 'fast-deep-equal';
-import { EditorToolbarButton, Dropdown, Button, DropdownList, DropdownListItem, Tag, Paragraph as Paragraph$1, EntryCard, AssetCard, Modal, Form, TextField, SelectField, Option, FormLabel, TextLink, Tooltip, IconButton, Flex, Icon, InlineEntryCard, EditorToolbar, EditorToolbarDivider } from '@contentful/forma-36-react-components';
+import { EditorToolbarButton, Dropdown, Button, DropdownList, DropdownListItem, Tag, Paragraph as Paragraph$1, Icon, EntryCard, AssetCard, Modal, Form, TextField, SelectField, Option, FormLabel, TextLink, Tooltip, IconButton, Flex, InlineEntryCard, EditorToolbar, EditorToolbarDivider } from '@contentful/forma-36-react-components';
 import { useSelected, useFocused, ReactEditor, useReadOnly } from 'slate-react';
-import { Editor, Transforms, Element, Text, Range, Path, Node } from 'slate';
+import { Editor, Transforms, Element, Text, Range, Path, Node as Node$1 } from 'slate';
 import { getPlatePluginOptions, useStoreEditorRef, getRenderElement, getPlatePluginTypes, getRenderLeaf, getPlatePluginType, Plate, createReactPlugin, createHistoryPlugin } from '@udecode/plate-core';
 import { getElementDeserializer, getLeafDeserializer, getText, setNodes, insertNodes, toggleNodeType, getToggleMarkOnKeyDown, isMarkActive, toggleMark, getAbove, getChildren, someNode, getToggleElementOnKeyDown } from '@udecode/plate-common';
 import constate from 'constate';
@@ -16,8 +16,9 @@ import find from 'lodash-es/find';
 import flow from 'lodash-es/flow';
 import get from 'lodash-es/get';
 import { ELEMENT_LIC, ELEMENT_LI, ELEMENT_UL, ELEMENT_OL, toggleList, createListPlugin } from '@udecode/plate-list';
-import { entityHelpers, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
+import { entityHelpers, isValidImage, shortenStorageUnit, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import moment from 'moment';
+import mimetype from '@contentful/mimetype';
 import { ELEMENT_TABLE, ELEMENT_TH, ELEMENT_TR, ELEMENT_TD, insertTable, getEmptyRowNode, getEmptyCellNode, deleteRow, deleteColumn, deleteTable, createTablePlugin as createTablePlugin$1, getTableOnKeyDown } from '@udecode/plate-table';
 import { createDeserializeHTMLPlugin } from '@udecode/plate-html-serializer';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
@@ -120,6 +121,44 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var STYLE_EDITOR_BORDER = "1px solid " + tokens.gray400;
 var styles = {
   root: /*#__PURE__*/css({
@@ -504,9 +543,25 @@ function getContentfulEditorId(sdk) {
 }
 
 function useContentfulEditorHook(_ref) {
+  var _editor$selection;
+
   var sdk = _ref.sdk;
   var editorId = getContentfulEditorId(sdk);
   var editor = useStoreEditorRef(editorId);
+
+  var _React$useState = useState((_editor$selection = editor == null ? void 0 : editor.selection) != null ? _editor$selection : null),
+      selection = _React$useState[0],
+      setSelection = _React$useState[1];
+
+  useEffect(function () {
+    if (!(editor != null && editor.selection)) return;
+    setSelection(editor.selection);
+  }, [editor == null ? void 0 : editor.selection]);
+
+  if (editor && !(editor != null && editor.selection) && selection) {
+    editor.selection = selection;
+  }
+
   return editor;
 }
 
@@ -548,7 +603,8 @@ function withHrEvents(editor) {
 function ToolbarHrButton(props) {
   var editor = useContentfulEditor();
 
-  function handleOnClick() {
+  function handleOnClick(event) {
+    event.preventDefault();
     if (!(editor != null && editor.selection)) return;
 
     if (shouldUnwrapBlockquote(editor, BLOCKS.HR)) {
@@ -577,7 +633,8 @@ function ToolbarHrButton(props) {
     tooltipPlace: "bottom",
     label: "HR",
     disabled: props.isDisabled,
-    onClick: handleOnClick,
+    // @ts-expect-error
+    onMouseDown: handleOnClick,
     testId: "hr-toolbar-button",
     isActive: isBlockSelected(editor, BLOCKS.HR)
   });
@@ -693,7 +750,7 @@ function withHeadingEvents(editor) {
 
       if (hasSelectionText(editor)) {
         var currentOffset = editor.selection.focus.offset;
-        var currentTextLength = Node.string(currentFragment).length;
+        var currentTextLength = Node$1.string(currentFragment).length;
         var cursorIsAtTheBeginning = currentOffset === 0;
         var cursorIsAtTheEnd = currentTextLength === currentOffset;
 
@@ -775,19 +832,22 @@ function ToolbarHeadingButton(props) {
       someHeadingsEnabled = _React$useMemo[1];
 
   function handleOnSelectItem(type) {
-    if (!(editor != null && editor.selection)) return;
-    setSelected(type);
-    setOpen(false);
+    return function (event) {
+      event.preventDefault();
+      if (!(editor != null && editor.selection)) return;
+      setSelected(type);
+      setOpen(false);
 
-    if (shouldUnwrapBlockquote(editor, type)) {
-      unwrapFromRoot(editor);
-    }
+      if (shouldUnwrapBlockquote(editor, type)) {
+        unwrapFromRoot(editor);
+      }
 
-    toggleNodeType(editor, {
-      activeType: type,
-      inactiveType: type
-    });
-    ReactEditor.focus(editor);
+      toggleNodeType(editor, {
+        activeType: type,
+        inactiveType: type
+      });
+      ReactEditor.focus(editor);
+    };
   }
 
   if (!editor) return null;
@@ -811,9 +871,7 @@ function ToolbarHeadingButton(props) {
     return nodeTypesByEnablement[nodeType] && /*#__PURE__*/createElement(DropdownListItem, {
       key: nodeType,
       isActive: selected === nodeType,
-      onClick: function onClick() {
-        return handleOnSelectItem(nodeType);
-      },
+      onMouseDown: handleOnSelectItem(nodeType),
       testId: "dropdown-option-" + nodeType,
       isDisabled: props.isDisabled
     }, /*#__PURE__*/createElement("span", {
@@ -919,7 +977,7 @@ function withQuoteEvents(editor) {
 
       if (hasSelectionText(editor)) {
         var currentOffset = editor.selection.focus.offset;
-        var currentTextLength = Node.string(currentFragment).length;
+        var currentTextLength = Node$1.string(currentFragment).length;
         var cursorIsAtTheBeginning = currentOffset === 0;
         var cursorIsAtTheEnd = currentTextLength === currentOffset;
 
@@ -962,7 +1020,8 @@ function withQuoteEvents(editor) {
 function ToolbarQuoteButton(props) {
   var editor = useContentfulEditor();
 
-  function handleOnClick() {
+  function handleOnClick(event) {
+    event.preventDefault();
     if (!editor) return;
     createBlockQuote(editor);
     ReactEditor.focus(editor);
@@ -974,7 +1033,8 @@ function ToolbarQuoteButton(props) {
     tooltip: "Blockquote",
     tooltipPlace: "bottom",
     label: "Blockquote",
-    onClick: handleOnClick,
+    // @ts-expect-error
+    onMouseDown: handleOnClick,
     testId: "quote-toolbar-button",
     disabled: props.isDisabled,
     isActive: isBlockSelected(editor, BLOCKS.QUOTE)
@@ -1006,16 +1066,19 @@ function ToolbarListButton(props) {
   var editor = useContentfulEditor();
 
   function handleClick(type) {
-    if (!(editor != null && editor.selection)) return;
+    return function (event) {
+      event.preventDefault();
+      if (!(editor != null && editor.selection)) return;
 
-    if (shouldUnwrapBlockquote(editor, type)) {
-      unwrapFromRoot(editor);
-    }
+      if (shouldUnwrapBlockquote(editor, type)) {
+        unwrapFromRoot(editor);
+      }
 
-    toggleList(editor, {
-      type: type
-    });
-    ReactEditor.focus(editor);
+      toggleList(editor, {
+        type: type
+      });
+      ReactEditor.focus(editor);
+    };
   }
 
   if (!editor) return null;
@@ -1025,9 +1088,8 @@ function ToolbarListButton(props) {
     tooltipPlace: "bottom",
     label: "UL",
     testId: "ul-toolbar-button",
-    onClick: function onClick() {
-      return handleClick(BLOCKS.UL_LIST);
-    },
+    // @ts-expect-error
+    onMouseDown: handleClick(BLOCKS.UL_LIST),
     isActive: isBlockSelected(editor, BLOCKS.UL_LIST),
     disabled: props.isDisabled
   }), isNodeTypeEnabled(sdk.field, BLOCKS.OL_LIST) && /*#__PURE__*/createElement(EditorToolbarButton, {
@@ -1036,9 +1098,8 @@ function ToolbarListButton(props) {
     tooltipPlace: "bottom",
     label: "OL",
     testId: "ol-toolbar-button",
-    onClick: function onClick() {
-      return handleClick(BLOCKS.OL_LIST);
-    },
+    // @ts-expect-error
+    onMouseDown: handleClick(BLOCKS.OL_LIST),
     isActive: isBlockSelected(editor, BLOCKS.OL_LIST),
     disabled: props.isDisabled
   }));
@@ -1072,7 +1133,8 @@ var _withBoldOptions;
 function ToolbarBoldButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick() {
+  function handleClick(event) {
+    event.preventDefault();
     if (!(editor != null && editor.selection)) return;
     toggleMark(editor, MARKS.BOLD);
     ReactEditor.focus(editor);
@@ -1085,7 +1147,8 @@ function ToolbarBoldButton(props) {
     tooltipPlace: "bottom",
     label: "Bold",
     testId: "bold-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: isMarkActive(editor, MARKS.BOLD),
     disabled: props.isDisabled
   });
@@ -1133,7 +1196,8 @@ var _withCodeOptions;
 function ToolbarCodeButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick() {
+  function handleClick(event) {
+    event.preventDefault();
     if (!(editor != null && editor.selection)) return;
     toggleMark(editor, MARKS.CODE);
     ReactEditor.focus(editor);
@@ -1146,7 +1210,8 @@ function ToolbarCodeButton(props) {
     tooltipPlace: "bottom",
     label: "Code",
     testId: "code-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: isMarkActive(editor, MARKS.CODE),
     disabled: props.isDisabled
   });
@@ -1187,7 +1252,8 @@ var _withItalicOptions;
 function ToolbarItalicButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick() {
+  function handleClick(event) {
+    event.preventDefault();
     if (!(editor != null && editor.selection)) return;
     toggleMark(editor, MARKS.ITALIC);
     ReactEditor.focus(editor);
@@ -1200,7 +1266,8 @@ function ToolbarItalicButton(props) {
     tooltipPlace: "bottom",
     label: "Italic",
     testId: "italic-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: isMarkActive(editor, MARKS.ITALIC),
     disabled: props.isDisabled
   });
@@ -1240,7 +1307,8 @@ var _withUnderlineOptions;
 function ToolbarUnderlineButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick() {
+  function handleClick(event) {
+    event.preventDefault();
     if (!(editor != null && editor.selection)) return;
     toggleMark(editor, MARKS.UNDERLINE);
     ReactEditor.focus(editor);
@@ -1253,7 +1321,8 @@ function ToolbarUnderlineButton(props) {
     tooltipPlace: "bottom",
     label: "Underline",
     testId: "underline-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: isMarkActive(editor, MARKS.UNDERLINE),
     disabled: props.isDisabled
   });
@@ -2278,26 +2347,97 @@ function EntryAssetTooltip(_ref) {
   })));
 }
 
+var styles$a = {
+  scheduleIcon: /*#__PURE__*/css({
+    marginRight: tokens.spacing2Xs
+  })
+};
+function EntityStatusIcon(_ref) {
+  var entity = _ref.entity,
+      entityType = _ref.entityType;
+
+  var _useEntities = useEntities(),
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+
+  return /*#__PURE__*/createElement(ScheduledIconWithTooltip, {
+    getEntityScheduledActions: loadEntityScheduledActions,
+    entityType: entityType,
+    entityId: entity.sys.id
+  }, /*#__PURE__*/createElement(Icon, {
+    className: styles$a.scheduleIcon,
+    icon: "Clock",
+    size: "small",
+    color: "muted",
+    testId: "schedule-icon"
+  }));
+}
+
+var styles$b = {
+  entryCard: /*#__PURE__*/css({
+    cursor: 'pointer'
+  })
+};
+
+function EntryThumbnail(_ref) {
+  var file = _ref.file;
+  if (!isValidImage(file)) return null;
+  return /*#__PURE__*/createElement(AssetThumbnail, {
+    file: file
+  });
+}
+
+function EntryDropdownMenu(_ref2) {
+  var onEdit = _ref2.onEdit,
+      onRemove = _ref2.onRemove,
+      isDisabled = _ref2.isDisabled;
+  return /*#__PURE__*/createElement(DropdownList, null, /*#__PURE__*/createElement(DropdownListItem, {
+    isTitle: true
+  }, "Actions"), /*#__PURE__*/createElement(DropdownListItem, {
+    onClick: onEdit,
+    testId: "card-action-edit"
+  }, "Edit"), /*#__PURE__*/createElement(DropdownListItem, {
+    onClick: onRemove,
+    isDisabled: isDisabled,
+    testId: "card-action-remove"
+  }, "Remove"));
+}
+
 function FetchingWrappedEntryCard(props) {
   var _useEntities = useEntities(),
       getOrLoadEntry = _useEntities.getOrLoadEntry,
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
       entries = _useEntities.entries;
 
-  useEffect(function () {
-    getOrLoadEntry(props.entryId);
-  }, [props.entryId]); // eslint-disable-line
+  var _React$useState = useState(null),
+      file = _React$useState[0],
+      setFile = _React$useState[1];
 
   var entry = entries[props.entryId];
+  var contentType = useMemo(function () {
+    return props.sdk.space.getCachedContentTypes().find(function (contentType) {
+      return contentType.sys.id === (entry == null ? void 0 : entry.sys.contentType.sys.id);
+    });
+  }, [props.sdk, entry]);
+  var defaultLocaleCode = props.sdk.locales["default"];
   useEffect(function () {
     if (!entry) return;
-    props.onEntityFetchComplete && props.onEntityFetchComplete();
-  }, [entry]); // eslint-disable-line
+    entityHelpers.getEntryImage({
+      entry: entry,
+      contentType: contentType,
+      localeCode: props.locale,
+      defaultLocaleCode: defaultLocaleCode
+    }, props.sdk.space.getAsset).then(setFile)["catch"](function () {
+      return setFile(null);
+    });
+  }, [entry, contentType, props.locale, defaultLocaleCode, props.sdk, file]);
+  useEffect(function () {
+    getOrLoadEntry(props.entryId);
+  }, [props.entryId]); // eslint-disable-line
 
-  if (entry === 'failed') {
-    return /*#__PURE__*/createElement(MissingEntityCard, {
-      entityType: "Entry",
+  function renderDropdown() {
+    if (!props.onEdit || !props.onRemove) return undefined;
+    return /*#__PURE__*/createElement(EntryDropdownMenu, {
       isDisabled: props.isDisabled,
+      onEdit: props.onEdit,
       onRemove: props.onRemove
     });
   }
@@ -2309,49 +2449,149 @@ function FetchingWrappedEntryCard(props) {
     });
   }
 
-  var contentType = props.sdk.space.getCachedContentTypes().find(function (contentType) {
-    return contentType.sys.id === entry.sys.contentType.sys.id;
+  if (entry === 'failed') {
+    return /*#__PURE__*/createElement(MissingEntityCard, {
+      entityType: "Entry",
+      isDisabled: props.isDisabled,
+      onRemove: props.onRemove
+    });
+  }
+
+  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'
   });
-  return /*#__PURE__*/createElement(WrappedEntryCard, {
+  var description = entityHelpers.getEntityDescription({
+    entity: entry,
     contentType: contentType,
-    defaultLocaleCode: props.sdk.locales["default"],
-    entry: entry,
-    entryUrl: props.getEntryUrl && props.getEntryUrl(entry.sys.id),
-    getAsset: props.sdk.space.getAsset,
-    getEntityScheduledActions: loadEntityScheduledActions,
-    isClickable: false,
-    isDisabled: props.isDisabled,
-    isSelected: props.isSelected,
     localeCode: props.locale,
-    onEdit: props.onEdit,
-    onRemove: props.onRemove,
+    defaultLocaleCode: defaultLocaleCode
+  });
+  return /*#__PURE__*/createElement(EntryCard, {
+    contentType: contentType == null ? void 0 : contentType.name,
+    title: title,
+    description: description,
     size: "default",
-    hasMoveOptions: false
+    selected: props.isSelected,
+    status: entryStatus,
+    className: styles$b.entryCard,
+    thumbnailElement: file ? /*#__PURE__*/createElement(EntryThumbnail, {
+      file: file
+    }) : null,
+    statusIcon: /*#__PURE__*/createElement(EntityStatusIcon, {
+      entityType: "Entry",
+      entity: entry
+    }),
+    dropdownListElements: renderDropdown()
   });
 }
 
+var styles$c = {
+  assetCard: /*#__PURE__*/css({
+    cursor: 'pointer'
+  }),
+  cardDropdown: /*#__PURE__*/css({
+    width: '300px'
+  }),
+  truncated: /*#__PURE__*/css({
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
+  })
+};
+
+function AssetDropdownMenu(_ref) {
+  var onEdit = _ref.onEdit,
+      onRemove = _ref.onRemove,
+      isDisabled = _ref.isDisabled,
+      entityFile = _ref.entityFile;
+  var fileName = entityFile.fileName,
+      mimeType = entityFile.contentType,
+      details = entityFile.details;
+  var fileSize = details.size,
+      image = details.image;
+
+  function downloadAsset() {
+    if (!entityFile) return;
+    window.open(entityFile.url, '_blank', 'noopener,noreferrer');
+  }
+
+  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(DropdownList, null, /*#__PURE__*/createElement(DropdownListItem, {
+    isTitle: true
+  }, "Actions"), onEdit && /*#__PURE__*/createElement(DropdownListItem, {
+    onClick: onEdit,
+    testId: "card-action-edit"
+  }, "Edit"), entityFile && /*#__PURE__*/createElement(DropdownListItem, {
+    onClick: downloadAsset,
+    testId: "card-action-download"
+  }, "Download"), onRemove && /*#__PURE__*/createElement(DropdownListItem, {
+    onClick: onRemove,
+    isDisabled: isDisabled,
+    testId: "card-action-remove"
+  }, "Remove")), /*#__PURE__*/createElement(DropdownList, {
+    border: "top"
+  }, /*#__PURE__*/createElement(DropdownListItem, {
+    isTitle: true
+  }, "File info"), fileName && /*#__PURE__*/createElement(DropdownListItem, null, /*#__PURE__*/createElement("div", {
+    className: styles$c.truncated
+  }, fileName)), mimeType && /*#__PURE__*/createElement(DropdownListItem, null, /*#__PURE__*/createElement("div", null, mimeType)), fileSize && /*#__PURE__*/createElement(DropdownListItem, null, shortenStorageUnit(fileSize, 'B')), image && /*#__PURE__*/createElement(DropdownListItem, null, image.width + " \xD7 " + image.height)));
+}
+
 function FetchingWrappedAssetCard(props) {
   var _useEntities = useEntities(),
       getOrLoadAsset = _useEntities.getOrLoadAsset,
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
       assets = _useEntities.assets;
 
+  var asset = assets[props.assetId];
+  var defaultLocaleCode = props.sdk.locales["default"];
+  var entityFile = asset != null && asset.fields.file ? asset.fields.file[props.locale] || asset.fields.file[defaultLocaleCode] : undefined;
   useEffect(function () {
     getOrLoadAsset(props.assetId);
   }, [props.assetId]); // eslint-disable-line
 
-  var asset = assets[props.assetId];
-  useEffect(function () {
-    if (!asset) return;
-    props.onEntityFetchComplete && props.onEntityFetchComplete();
-  }, [asset]); // eslint-disable-line
+  function getAssetSrc() {
+    if (!(entityFile != null && entityFile.url)) return '';
+    return entityFile.url + "?h=300";
+  }
 
-  if (asset === 'failed') {
-    return /*#__PURE__*/createElement(MissingEntityCard, {
-      entityType: "Asset",
-      isDisabled: props.isDisabled,
-      onRemove: props.onRemove
+  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;
+    }
+
+    var groupName = mimetype.getGroupLabel({
+      type: entityFile.contentType,
+      fallbackFileName: entityFile.fileName
     });
+    return groupToIconMap[groupName] || archive;
   }
 
   if (asset === undefined) {
@@ -2364,20 +2604,49 @@ function FetchingWrappedAssetCard(props) {
     });
   }
 
-  return /*#__PURE__*/createElement(WrappedAssetCard, {
+  if (asset === 'failed') {
+    return /*#__PURE__*/createElement(MissingEntityCard, {
+      entityType: "Asset",
+      isDisabled: props.isDisabled,
+      onRemove: props.onRemove
+    });
+  }
+
+  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,
-    defaultLocaleCode: props.sdk.locales["default"],
-    // @ts-expect-error
-    getAsset: props.sdk.space.getAsset,
-    getAssetUrl: props.getAssetUrl,
-    getEntityScheduledActions: loadEntityScheduledActions,
-    isClickable: false,
-    isDisabled: props.isDisabled,
-    isSelected: props.isSelected,
     localeCode: props.locale,
-    onEdit: props.onEdit,
-    onRemove: props.onRemove,
-    size: "default"
+    defaultLocaleCode: defaultLocaleCode,
+    defaultTitle: 'Untitled'
+  });
+  return /*#__PURE__*/createElement(AssetCard, {
+    title: entityTitle,
+    selected: props.isSelected,
+    size: "default",
+    src: getAssetSrc(),
+    type: getFileType(),
+    status: status,
+    statusIcon: /*#__PURE__*/createElement(EntityStatusIcon, {
+      entityType: "Asset",
+      entity: asset
+    }),
+    className: styles$c.assetCard,
+    dropdownListElements: entityFile && /*#__PURE__*/createElement(AssetDropdownMenu, {
+      onEdit: props.onEdit,
+      onRemove: props.onRemove,
+      isDisabled: props.isDisabled,
+      entityFile: entityFile
+    })
   });
 }
 
@@ -2421,7 +2690,7 @@ function getLinkedContentTypeIdsForNodeType(field, nodeType) {
 }
 
 var _templateObject$3, _SYS_LINK_TYPES, _LINK_TYPE_SELECTION_;
-var styles$a = {
+var styles$d = {
   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);
@@ -2609,7 +2878,7 @@ function HyperlinkModal(props) {
     htmlFor: ""
   }, "Link target", ' '), linkEntity && linkEntity.sys.linkType === SYS_LINK_TYPES[linkType] ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(TextLink, {
     onClick: resetLinkEntity,
-    className: styles$a.removeSelectionLabel
+    className: styles$d.removeSelectionLabel
   }, "Remove selection"), /*#__PURE__*/createElement("div", null, linkType === INLINES.ENTRY_HYPERLINK && /*#__PURE__*/createElement(FetchingWrappedEntryCard, {
     sdk: props.sdk,
     locale: props.sdk.field.locale,
@@ -2724,7 +2993,7 @@ function _addOrEditLink() {
 }
 
 var _withHyperlinkOptions;
-var styles$b = {
+var styles$e = {
   hyperlinkWrapper: /*#__PURE__*/css({
     display: 'inline',
     position: 'static',
@@ -2808,7 +3077,7 @@ function createHyperlinkPlugin(sdk) {
                   sys: {
                     id: element.getAttribute('data-link-id'),
                     linkType: element.getAttribute('data-link-type'),
-                    link: 'Link'
+                    type: 'Link'
                   }
                 }
               }
@@ -2825,7 +3094,7 @@ function createHyperlinkPlugin(sdk) {
                   sys: {
                     id: element.getAttribute('data-link-id'),
                     linkType: element.getAttribute('data-link-type'),
-                    link: 'Link'
+                    type: 'Link'
                   }
                 }
               }
@@ -2903,14 +3172,14 @@ function UrlHyperlink(props) {
 
   return /*#__PURE__*/createElement(Tooltip, {
     content: uri,
-    targetWrapperClassName: styles$b.hyperlinkWrapper,
+    targetWrapperClassName: styles$e.hyperlinkWrapper,
     place: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/createElement(TextLink, {
     href: uri,
     rel: "noopener noreferrer",
     onClick: handleClick,
-    className: styles$b.hyperlink
+    className: styles$e.hyperlink
   }, props.children));
 }
 
@@ -2959,14 +3228,14 @@ function EntityHyperlink(props) {
       type: target.sys.linkType,
       sdk: sdk
     }),
-    targetWrapperClassName: styles$b.hyperlinkWrapper,
+    targetWrapperClassName: styles$e.hyperlinkWrapper,
     place: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/createElement(TextLink, {
     href: "javascript:void(0)",
     rel: "noopener noreferrer",
     onClick: handleClick,
-    className: styles$b.hyperlink,
+    className: styles$e.hyperlink,
     "data-link-type": target.sys.linkType,
     "data-link-id": target.sys.id
   }, props.children));
@@ -3020,7 +3289,8 @@ function ToolbarHyperlinkButton(props) {
     tooltipPlace: "bottom",
     label: "Hyperlink",
     testId: "hyperlink-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: isActive,
     disabled: props.isDisabled
   });
@@ -3238,7 +3508,7 @@ var setHeader = function setHeader(editor, enable) {
   });
 };
 
-var styles$c = {
+var styles$f = {
   topRight: /*#__PURE__*/css({
     position: 'absolute',
     top: tokens.spacingXs,
@@ -3316,7 +3586,7 @@ var TableActions = function TableActions() {
     };
   }, [editor, isHeaderEnabled, close, onViewportAction]);
   return /*#__PURE__*/React__default.createElement(Dropdown, {
-    className: styles$c.topRight,
+    className: styles$f.topRight,
     position: "left",
     isOpen: isOpen,
     onClose: close,
@@ -3356,27 +3626,27 @@ var TableActions = function TableActions() {
 };
 
 var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$1, _styles$1, _withTableOptions;
-var styles$d = (_styles$1 = {}, _styles$1[BLOCKS.TABLE] = /*#__PURE__*/css(_templateObject$4 || (_templateObject$4 = /*#__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), _styles$1[BLOCKS.TABLE_ROW] = /*#__PURE__*/css(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    border: 1px solid ", ";\n    &:hover td {\n      background-color: transparent !important;\n    }\n  "])), tokens.gray400), _styles$1[BLOCKS.TABLE_HEADER_CELL] = /*#__PURE__*/css(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    border: 1px solid ", ";\n    padding: 10px 12px;\n    font-weight: ", ";\n    text-align: left;\n    min-width: 48px;\n    position: relative;\n    div:last-child {\n      margin-bottom: 0;\n    }\n  "])), tokens.gray200, tokens.gray400, tokens.fontWeightMedium), _styles$1[BLOCKS.TABLE_CELL] = /*#__PURE__*/css(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    border: 1px solid ", ";\n    padding: 10px 12px;\n    min-width: 48px;\n    position: relative;\n    div:last-child {\n      margin-bottom: 0;\n    }\n  "])), tokens.gray400), _styles$1);
+var styles$g = (_styles$1 = {}, _styles$1[BLOCKS.TABLE] = /*#__PURE__*/css(_templateObject$4 || (_templateObject$4 = /*#__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), _styles$1[BLOCKS.TABLE_ROW] = /*#__PURE__*/css(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    border: 1px solid ", ";\n    &:hover td {\n      background-color: transparent !important;\n    }\n  "])), tokens.gray400), _styles$1[BLOCKS.TABLE_HEADER_CELL] = /*#__PURE__*/css(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    border: 1px solid ", ";\n    padding: 10px 12px;\n    font-weight: ", ";\n    text-align: left;\n    min-width: 48px;\n    position: relative;\n    div:last-child {\n      margin-bottom: 0;\n    }\n  "])), tokens.gray200, tokens.gray400, tokens.fontWeightMedium), _styles$1[BLOCKS.TABLE_CELL] = /*#__PURE__*/css(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    border: 1px solid ", ";\n    padding: 10px 12px;\n    min-width: 48px;\n    position: relative;\n    div:last-child {\n      margin-bottom: 0;\n    }\n  "])), tokens.gray400), _styles$1);
 var Table = function Table(props) {
   return /*#__PURE__*/createElement("table", Object.assign({}, props.attributes, {
-    className: styles$d[BLOCKS.TABLE]
+    className: styles$g[BLOCKS.TABLE]
   }), /*#__PURE__*/createElement("tbody", null, props.children));
 };
 var TR = function TR(props) {
   return /*#__PURE__*/createElement("tr", Object.assign({}, props.attributes, {
-    className: styles$d[BLOCKS.TABLE_ROW]
+    className: styles$g[BLOCKS.TABLE_ROW]
   }), props.children);
 };
 var TH = function TH(props) {
   var isSelected = useSelected();
   return /*#__PURE__*/createElement("th", Object.assign({}, props.attributes, props.element.data, {
-    className: styles$d[BLOCKS.TABLE_HEADER_CELL]
+    className: styles$g[BLOCKS.TABLE_HEADER_CELL]
   }), isSelected && /*#__PURE__*/createElement(TableActions, null), props.children);
 };
 var TD = function TD(props) {
   var isSelected = useSelected();
   return /*#__PURE__*/createElement("td", Object.assign({}, props.attributes, props.element.data, {
-    className: styles$d[BLOCKS.TABLE_CELL]
+    className: styles$g[BLOCKS.TABLE_CELL]
   }), isSelected && /*#__PURE__*/createElement(TableActions, null), props.children);
 };
 var withTableOptions = (_withTableOptions = {}, _withTableOptions[ELEMENT_TABLE] = {
@@ -3409,7 +3679,8 @@ function addTableTrackingEvents(editor, _ref) {
 
         if (hasTables(markupAfter)) {
           onViewportAction('paste', {
-            tablePasted: true
+            tablePasted: true,
+            hasHeadersOutsideFirstRow: hasHeadersOutsideFirstRow(markupAfter)
           });
         }
       }, 1);
@@ -3417,6 +3688,40 @@ function addTableTrackingEvents(editor, _ref) {
   };
 }
 
+function addTableNormalization(editor) {
+  var normalizeNode = editor.normalizeNode;
+
+  editor.normalizeNode = function (entry) {
+    var node = entry[0],
+        path = entry[1]; // TODO: This should be enforced by sanitizeSlateDoc() but the internal
+    // editor value can be different.
+    // cf. https://github.com/ianstormtaylor/slate/issues/2206
+
+    var cellTypes = [BLOCKS.TABLE_CELL, BLOCKS.TABLE_HEADER_CELL];
+
+    if (Element.isElement(node) && cellTypes.includes(node.type)) {
+      for (var _iterator = _createForOfIteratorHelperLoose(Node$1.children(editor, path)), _step; !(_step = _iterator()).done;) {
+        var _step$value = _step.value,
+            child = _step$value[0],
+            childPath = _step$value[1];
+
+        if (Text.isText(child)) {
+          var paragraph = {
+            type: BLOCKS.PARAGRAPH,
+            data: {},
+            children: []
+          };
+          Transforms.wrapNodes(editor, paragraph, {
+            at: childPath
+          });
+        }
+      }
+    }
+
+    normalizeNode(entry);
+  };
+}
+
 function hasTables(nodes) {
   return nodes.some(function (_ref2) {
     var type = _ref2.type;
@@ -3424,16 +3729,62 @@ function hasTables(nodes) {
   });
 }
 
+var isTableHeaderCell = function isTableHeaderCell(_ref3) {
+  var type = _ref3.type;
+  return type === BLOCKS.TABLE_HEADER_CELL;
+};
+
+function hasHeadersOutsideFirstRow(nodes) {
+  return nodes.filter(function (_ref4) {
+    var type = _ref4.type;
+    return type === BLOCKS.TABLE;
+  }).flatMap(function (_ref5) {
+    var children = _ref5.children;
+    return children.slice(1);
+  }).some(function (_ref6) {
+    var children = _ref6.children;
+    return children.some(isTableHeaderCell);
+  });
+}
+
 function createWithTableEvents(tracking) {
   return function withTableEvents(editor) {
     addTableTrackingEvents(editor, tracking);
+    addTableNormalization(editor);
     return getTableOnKeyDown()(editor);
   };
 }
 
 var createTablePlugin = function createTablePlugin(tracking) {
   return _extends({}, createTablePlugin$1(), {
-    onKeyDown: createWithTableEvents(tracking)
+    onKeyDown: createWithTableEvents(tracking),
+    withOverrides: function withOverrides(editor) {
+      var insertFragment = editor.insertFragment;
+
+      editor.insertFragment = function (fragments) {
+        // We need to make sure we have a new, empty and clean paragraph in order to paste tables as-is due to how Slate behaves
+        // More info: https://github.com/ianstormtaylor/slate/pull/4489 and https://github.com/ianstormtaylor/slate/issues/4542
+        var fragmentHasTable = fragments.some(function (fragment) {
+          return fragment.type === BLOCKS.TABLE;
+        });
+
+        if (fragmentHasTable) {
+          var emptyParagraph = {
+            type: BLOCKS.PARAGRAPH,
+            children: [{
+              text: ''
+            }],
+            data: {},
+            isVoid: false
+          };
+          Transforms.insertNodes(editor, emptyParagraph);
+        }
+
+        insertFragment(fragments);
+      };
+
+      return editor;
+    }
   });
 };
 function ToolbarTableButton(props) {
@@ -3485,7 +3836,8 @@ function ToolbarTableButton(props) {
     tooltipPlace: "bottom",
     label: "Table",
     testId: "table-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     // TODO: active state looks off since the button will be disabled. Do we still need it?
     isActive: isActive,
     disabled: props.isDisabled
@@ -3515,7 +3867,7 @@ function EmbeddedEntityDropdownButton(_ref) {
   }, /*#__PURE__*/createElement(DropdownList, null, children));
 }
 
-var styles$e = {
+var styles$h = {
   root: /*#__PURE__*/css({
     marginBottom: '1.25rem'
   })
@@ -3523,8 +3875,7 @@ var styles$e = {
 function LinkedEntityBlock(props) {
   var attributes = props.attributes,
       children = props.children,
-      element = props.element,
-      onEntityFetchComplete = props.onEntityFetchComplete;
+      element = props.element;
   var isSelected = useSelected();
   var editor = useContentfulEditor();
   var sdk = useSdkContext();
@@ -3549,7 +3900,7 @@ function LinkedEntityBlock(props) {
   };
 
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
-    className: styles$e.root,
+    className: styles$h.root,
     "data-entity-type": entityType,
     "data-entity-id": entityId
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -3561,12 +3912,7 @@ function LinkedEntityBlock(props) {
     isDisabled: isDisabled,
     isSelected: isSelected,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick,
-    getEntryUrl: function getEntryUrl() {
-      var getEntryUrl = sdk.parameters.instance.getEntryUrl;
-      return typeof getEntryUrl === 'function' ? getEntryUrl(entityId) : '';
-    },
-    onEntityFetchComplete: onEntityFetchComplete
+    onEdit: handleEditClick
   }), entityType === 'Asset' && /*#__PURE__*/React__default.createElement(FetchingWrappedAssetCard, {
     sdk: sdk,
     assetId: entityId,
@@ -3574,12 +3920,7 @@ function LinkedEntityBlock(props) {
     isDisabled: isDisabled,
     isSelected: isSelected,
     onRemove: handleRemoveClick,
-    onEdit: handleEditClick,
-    getAssetUrl: function getAssetUrl() {
-      var getAssetUrl = sdk.parameters.instance.getAssetUrl;
-      return typeof getAssetUrl === 'function' ? getAssetUrl(entityId) : '';
-    },
-    onEntityFetchComplete: onEntityFetchComplete
+    onEdit: handleEditClick
   })), children);
 }
 
@@ -3719,7 +4060,7 @@ function insertBlock(editor, nodeType, entity) {
   ReactEditor.focus(editor);
 }
 
-var styles$f = {
+var styles$i = {
   icon: /*#__PURE__*/css({
     marginRight: '10px'
   })
@@ -3734,16 +4075,17 @@ function EmbeddedEntityBlockToolbarIcon(_ref) {
   var sdk = useSdkContext();
 
   var handleClick = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(event) {
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
+              event.preventDefault();
               onClose();
-              _context.next = 3;
+              _context.next = 4;
               return selectEntityAndInsert(nodeType, sdk, editor, logAction || noop);
 
-            case 3:
+            case 4:
             case "end":
               return _context.stop();
           }
@@ -3751,7 +4093,7 @@ function EmbeddedEntityBlockToolbarIcon(_ref) {
       }, _callee);
     }));
 
-    return function handleClick() {
+    return function handleClick(_x) {
       return _ref2.apply(this, arguments);
     };
   }();
@@ -3762,21 +4104,22 @@ function EmbeddedEntityBlockToolbarIcon(_ref) {
     disabled: isDisabled,
     className: baseClass + "-button",
     size: "small",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     icon: type === 'Asset' ? 'Asset' : 'EmbeddedEntryBlock',
     buttonType: "muted",
     testId: "toolbar-toggle-" + nodeType
   }, "Embed " + type.toLowerCase()) : /*#__PURE__*/React__default.createElement(DropdownListItem, {
     isDisabled: isDisabled,
     className: baseClass + "-list-item",
-    onClick: handleClick,
+    onMouseDown: handleClick,
     testId: "toolbar-toggle-" + nodeType
   }, /*#__PURE__*/React__default.createElement(Flex, {
     alignItems: "center",
     flexDirection: "row"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     icon: type === 'Asset' ? 'Asset' : 'EmbeddedEntryBlock',
-    className: "rich-text__embedded-entry-list-icon " + styles$f.icon,
+    className: "rich-text__embedded-entry-list-icon " + styles$i.icon,
     color: "secondary"
   }), /*#__PURE__*/React__default.createElement("span", null, type)));
 }
@@ -3819,6 +4162,7 @@ var createEmbeddedEntityPlugin = function createEmbeddedEntityPlugin(nodeType) {
               if (!isBlock) return;
               return {
                 type: nodeType,
+                isVoid: true,
                 data: {
                   target: {
                     sys: {
@@ -3901,7 +4245,7 @@ function getWithEmbeddedEntityEvents(nodeType, sdk) {
 
 var getEntryTitle = entityHelpers.getEntryTitle,
     getEntryStatus = entityHelpers.getEntryStatus;
-var styles$g = {
+var styles$j = {
   scheduledIcon: /*#__PURE__*/css({
     verticalAlign: 'text-bottom',
     marginRight: tokens.spacing2Xs
@@ -3979,7 +4323,7 @@ function FetchingWrappedInlineEntryCard(props) {
     entityType: "Entry",
     entityId: entry.sys.id
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    className: styles$g.scheduledIcon,
+    className: styles$j.scheduledIcon,
     icon: "Clock",
     color: "muted",
     testId: "scheduled-icon"
@@ -4005,7 +4349,7 @@ function createInlineEntryNode(id) {
 }
 
 var _withEmbeddedEntityIn;
-var styles$h = {
+var styles$k = {
   icon: /*#__PURE__*/css({
     marginRight: '10px'
   }),
@@ -4043,7 +4387,7 @@ function EmbeddedEntityInline(props) {
   }
 
   return /*#__PURE__*/createElement("span", Object.assign({}, props.attributes, {
-    className: styles$h.root,
+    className: styles$k.root,
     "data-embedded-entity-inline-id": entryId
   }), /*#__PURE__*/createElement("span", {
     contentEditable: false
@@ -4161,7 +4505,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
   }, /*#__PURE__*/createElement(Icon, {
     icon: "EmbeddedEntryInline",
     color: "secondary",
-    className: "rich-text__embedded-entry-list-icon " + styles$h.icon
+    className: "rich-text__embedded-entry-list-icon " + styles$k.icon
   }), /*#__PURE__*/createElement("span", null, "Inline entry")));
 }
 function createEmbeddedEntityInlinePlugin(sdk) {
@@ -4281,7 +4625,7 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
   }, actions);
 };
 
-var styles$i = {
+var styles$l = {
   embedActionsWrapper: /*#__PURE__*/css({
     display: ['-webkit-box', '-ms-flexbox', 'flex'],
     webkitAlignSelf: 'flex-start',
@@ -4311,7 +4655,7 @@ var Toolbar = function Toolbar(_ref) {
   return /*#__PURE__*/React__default.createElement(EditorToolbar, {
     testId: "toolbar"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$i.formattingOptionsWrapper
+    className: styles$l.formattingOptionsWrapper
   }, /*#__PURE__*/React__default.createElement(ToolbarHeadingButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), validationInfo.isAnyMarkEnabled && /*#__PURE__*/React__default.createElement(EditorToolbarDivider, null), isMarkEnabled(sdk.field, MARKS.BOLD) && /*#__PURE__*/React__default.createElement(ToolbarBoldButton, {
@@ -4333,7 +4677,7 @@ var Toolbar = function Toolbar(_ref) {
   }), isNodeTypeEnabled(sdk.field, BLOCKS.TABLE) && /*#__PURE__*/React__default.createElement(ToolbarTableButton, {
     isDisabled: isDisabled || !canInsertBlocks
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$i.embedActionsWrapper
+    className: styles$l.embedActionsWrapper
   }, /*#__PURE__*/React__default.createElement(EmbedEntityWidget, {
     isDisabled: isDisabled,
     canInsertBlocks: canInsertBlocks
@@ -4358,7 +4702,7 @@ function getValidationInfo(field) {
 }
 
 var _templateObject$5;
-var styles$j = {
+var styles$m = {
   nativeSticky: /*#__PURE__*/css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: -webkit-sticky;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n  "])))
 };
 
@@ -4366,15 +4710,158 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
   var isDisabled = _ref.isDisabled,
       children = _ref.children;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: isDisabled ? '' : styles$j.nativeSticky
+    className: isDisabled ? '' : styles$m.nativeSticky
   }, children);
 };
 
+var removeChildNodes = function removeChildNodes(node, predicate) {
+  return Array.from(node.childNodes).filter(predicate).forEach(function (table) {
+    return node.removeChild(table);
+  });
+};
+
+var removeChildNodesUsingPredicate = function removeChildNodesUsingPredicate(predicate) {
+  return function (nodeList) {
+    var nodes = Array.from(nodeList);
+
+    while (nodes.length > 0) {
+      var node = nodes.pop();
+      removeChildNodes(node, predicate);
+
+      for (var _i = 0, _Array$from = Array.from(node.childNodes); _i < _Array$from.length; _i++) {
+        var childNode = _Array$from[_i];
+        nodes.push(childNode);
+      }
+    }
+
+    return nodes;
+  };
+};
+
+var isComment = function isComment(node) {
+  return node.nodeType === Node.COMMENT_NODE;
+};
+
+var removeCommentChildren = /*#__PURE__*/removeChildNodesUsingPredicate(isComment);
+var removeComments = function removeComments(_ref) {
+  var doc = _ref[0],
+      editor = _ref[1];
+  removeCommentChildren(doc.childNodes);
+  return [doc, editor];
+};
+
+var TAG_NAME_TABLE = 'TABLE';
+var TAG_NAME_TABLE_CAPTION = 'CAPTION';
+var DISALLOWED_TABLE_CHILD_ELEMENTS = [TAG_NAME_TABLE, TAG_NAME_TABLE_CAPTION];
+
+var isHTMLElement = function isHTMLElement(node) {
+  return node.nodeType === Node.ELEMENT_NODE;
+};
+
+var isTableElement = function isTableElement(node) {
+  return isHTMLElement(node) && node.tagName === TAG_NAME_TABLE;
+};
+
+var isDisallowedTableChildElement = function isDisallowedTableChildElement(node) {
+  return isHTMLElement(node) && DISALLOWED_TABLE_CHILD_ELEMENTS.includes(node.tagName);
+};
+
+var removeDisallowedTableChildElements = /*#__PURE__*/removeChildNodesUsingPredicate(isDisallowedTableChildElement);
+
+var removeTableGrandchildren = function removeTableGrandchildren(nodeList) {
+  var nodes = Array.from(nodeList);
+
+  while (nodes.length > 0) {
+    var node = nodes.pop();
+
+    if (isTableElement(node)) {
+      removeDisallowedTableChildElements(node.childNodes);
+      continue;
+    }
+
+    for (var _i = 0, _Array$from = Array.from(node.childNodes); _i < _Array$from.length; _i++) {
+      var childNode = _Array$from[_i];
+      nodes.push(childNode);
+    }
+  }
+
+  return nodes;
+};
+
+var sanitizeTables = function sanitizeTables(_ref) {
+  var doc = _ref[0],
+      editor = _ref[1];
+
+  var _getNodeEntryFromSele = getNodeEntryFromSelection(editor, BLOCKS.TABLE),
+      node = _getNodeEntryFromSele[0];
+
+  var isTableInCurrentSelection = !!node;
+
+  if (isTableInCurrentSelection) {
+    removeDisallowedTableChildElements(doc.childNodes);
+  } else {
+    removeTableGrandchildren(doc.childNodes);
+  }
+
+  return [doc, editor];
+};
+
+
+
+var sanitizers = {
+  __proto__: null,
+  removeComments: removeComments,
+  sanitizeTables: sanitizeTables
+};
+
+var MIME_TYPE_HTML = 'text/html'; // TODO: Upgrade tslib so we can just flow(...sanitizers);
+
+var sanitizeDocument = /*#__PURE__*/flow.apply(undefined, /*#__PURE__*/Object.values(sanitizers));
+
+var sanitizeHtml = function sanitizeHtml(html, editor) {
+  var doc = new DOMParser().parseFromString(html, MIME_TYPE_HTML);
+
+  var _sanitizeDocument = sanitizeDocument([doc, editor]),
+      sanitizedDoc = _sanitizeDocument[0];
+
+  var sanitizedData = new XMLSerializer().serializeToString(sanitizedDoc);
+  return sanitizedData;
+};
+
+var htmlToDataTransfer = function htmlToDataTransfer(html) {
+  var data = new DataTransfer();
+  data.setData(MIME_TYPE_HTML, html);
+  return data;
+};
+
+function withPasteHandling(editor) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  return function (_event) {
+    var insertData = editor.insertData;
+
+    editor.insertData = function (data) {
+      var html = data.getData(MIME_TYPE_HTML);
+
+      if (html) {
+        var sanitized = sanitizeHtml(html, editor);
+        var newData = htmlToDataTransfer(sanitized);
+        insertData(newData);
+      }
+    };
+  };
+}
+
+var createPastePlugin = function createPastePlugin() {
+  return {
+    onKeyDown: withPasteHandling
+  };
+};
+
 var _templateObject$6, _styles$2, _withParagraphOptions;
-var styles$k = (_styles$2 = {}, _styles$2[BLOCKS.PARAGRAPH] = /*#__PURE__*/css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    margin-bottom: 1.5em;\n  "])), tokens.lineHeightDefault), _styles$2);
+var styles$n = (_styles$2 = {}, _styles$2[BLOCKS.PARAGRAPH] = /*#__PURE__*/css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    margin-bottom: 1.5em;\n  "])), tokens.lineHeightDefault), _styles$2);
 function Paragraph(props) {
   return /*#__PURE__*/createElement("div", Object.assign({}, props.attributes, {
-    className: styles$k[BLOCKS.PARAGRAPH]
+    className: styles$n[BLOCKS.PARAGRAPH]
   }), props.children);
 }
 function createParagraphPlugin() {
@@ -4390,9 +4877,8 @@ function createParagraphPlugin() {
           type: BLOCKS.PARAGRAPH,
           deserialize: function deserialize(element) {
             var isParagraphText = element.nodeName === 'P';
-            var isDivText = element.nodeName === 'DIV' && !element.getAttribute('data-entity-type');
             var isNotEmpty = element.textContent !== '';
-            var isText = (isDivText || isParagraphText) && isNotEmpty;
+            var isText = isParagraphText && isNotEmpty;
             if (!isText) return;
             return {
               type: BLOCKS.PARAGRAPH
@@ -4553,7 +5039,8 @@ var _excluded = ["sdk", "isInitiallyDisabled", "onAction"];
 
 var getPlugins = function getPlugins(sdk, tracking) {
   var plugins = [// Core
-  createReactPlugin(), createHistoryPlugin(), // Global shortcuts
+  createReactPlugin(), createHistoryPlugin(), // Behavior
+  createPastePlugin(), // Global shortcuts
   createNewLinePlugin(), createInsertBeforeFirstVoidBlockPlugin(), // Block Elements
   createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
   createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
@@ -4626,8 +5113,6 @@ var RichTextEditor = function RichTextEditor(props) {
     sdk: sdk
   }, /*#__PURE__*/React__default.createElement(SdkProvider, {
     sdk: sdk
-  }, /*#__PURE__*/React__default.createElement(ContentfulEditorProvider, {
-    sdk: sdk
   }, /*#__PURE__*/React__default.createElement(TrackingProvider, {
     onAction: onAction || noop
   }, /*#__PURE__*/React__default.createElement(FieldConnector, {
@@ -4641,15 +5126,17 @@ var RichTextEditor = function RichTextEditor(props) {
         disabled = _ref.disabled,
         setValue = _ref.setValue,
         externalReset = _ref.externalReset;
-    return /*#__PURE__*/React__default.createElement(ConnectedRichTextEditor, Object.assign({}, otherProps, {
+    return /*#__PURE__*/React__default.createElement(ContentfulEditorProvider, {
+      sdk: sdk
+    }, /*#__PURE__*/React__default.createElement(ConnectedRichTextEditor, Object.assign({}, otherProps, {
       key: "rich-text-editor-" + externalReset,
       value: lastRemoteValue,
       sdk: sdk,
       onAction: onAction || noop,
       isDisabled: disabled,
       onChange: setValue
-    }));
-  })))));
+    })));
+  }))));
 };
 
 var LINK_TYPES$1 = {