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

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

@@ -25,6 +25,7 @@ var get = _interopDefault(require('lodash/get'));
 var plateList = require('@udecode/plate-list');
 var fieldEditorShared = require('@contentful/field-editor-shared');
 var moment = _interopDefault(require('moment'));
+var mimetype = _interopDefault(require('@contentful/mimetype'));
 var plateTable = require('@udecode/plate-table');
 var plateHtmlSerializer = require('@udecode/plate-html-serializer');
 var plateParagraph = require('@udecode/plate-paragraph');
@@ -127,6 +128,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__*/emotion.css({
@@ -511,9 +550,25 @@ function getContentfulEditorId(sdk) {
 }
 
 function useContentfulEditorHook(_ref) {
+  var _editor$selection;
+
   var sdk = _ref.sdk;
   var editorId = getContentfulEditorId(sdk);
   var editor = plateCore.useStoreEditorRef(editorId);
+
+  var _React$useState = React.useState((_editor$selection = editor == null ? void 0 : editor.selection) != null ? _editor$selection : null),
+      selection = _React$useState[0],
+      setSelection = _React$useState[1];
+
+  React.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;
 }
 
@@ -555,7 +610,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, Contentful.BLOCKS.HR)) {
@@ -584,7 +640,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, Contentful.BLOCKS.HR)
   });
@@ -782,19 +839,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);
+      }
 
-    plateCommon.toggleNodeType(editor, {
-      activeType: type,
-      inactiveType: type
-    });
-    Slate.ReactEditor.focus(editor);
+      plateCommon.toggleNodeType(editor, {
+        activeType: type,
+        inactiveType: type
+      });
+      Slate.ReactEditor.focus(editor);
+    };
   }
 
   if (!editor) return null;
@@ -818,9 +878,7 @@ function ToolbarHeadingButton(props) {
     return nodeTypesByEnablement[nodeType] && /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, {
       key: nodeType,
       isActive: selected === nodeType,
-      onClick: function onClick() {
-        return handleOnSelectItem(nodeType);
-      },
+      onMouseDown: handleOnSelectItem(nodeType),
       testId: "dropdown-option-" + nodeType,
       isDisabled: props.isDisabled
     }, /*#__PURE__*/React.createElement("span", {
@@ -969,7 +1027,8 @@ function withQuoteEvents(editor) {
 function ToolbarQuoteButton(props) {
   var editor = useContentfulEditor();
 
-  function handleOnClick() {
+  function handleOnClick(event) {
+    event.preventDefault();
     if (!editor) return;
     createBlockQuote(editor);
     Slate.ReactEditor.focus(editor);
@@ -981,7 +1040,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, Contentful.BLOCKS.QUOTE)
@@ -1013,16 +1073,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);
+      }
 
-    plateList.toggleList(editor, {
-      type: type
-    });
-    Slate.ReactEditor.focus(editor);
+      plateList.toggleList(editor, {
+        type: type
+      });
+      Slate.ReactEditor.focus(editor);
+    };
   }
 
   if (!editor) return null;
@@ -1032,9 +1095,8 @@ function ToolbarListButton(props) {
     tooltipPlace: "bottom",
     label: "UL",
     testId: "ul-toolbar-button",
-    onClick: function onClick() {
-      return handleClick(Contentful.BLOCKS.UL_LIST);
-    },
+    // @ts-expect-error
+    onMouseDown: handleClick(Contentful.BLOCKS.UL_LIST),
     isActive: isBlockSelected(editor, Contentful.BLOCKS.UL_LIST),
     disabled: props.isDisabled
   }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.OL_LIST) && /*#__PURE__*/React.createElement(forma36ReactComponents.EditorToolbarButton, {
@@ -1043,9 +1105,8 @@ function ToolbarListButton(props) {
     tooltipPlace: "bottom",
     label: "OL",
     testId: "ol-toolbar-button",
-    onClick: function onClick() {
-      return handleClick(Contentful.BLOCKS.OL_LIST);
-    },
+    // @ts-expect-error
+    onMouseDown: handleClick(Contentful.BLOCKS.OL_LIST),
     isActive: isBlockSelected(editor, Contentful.BLOCKS.OL_LIST),
     disabled: props.isDisabled
   }));
@@ -1079,7 +1140,8 @@ var _withBoldOptions;
 function ToolbarBoldButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick() {
+  function handleClick(event) {
+    event.preventDefault();
     if (!(editor != null && editor.selection)) return;
     plateCommon.toggleMark(editor, Contentful.MARKS.BOLD);
     Slate.ReactEditor.focus(editor);
@@ -1092,7 +1154,8 @@ function ToolbarBoldButton(props) {
     tooltipPlace: "bottom",
     label: "Bold",
     testId: "bold-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: plateCommon.isMarkActive(editor, Contentful.MARKS.BOLD),
     disabled: props.isDisabled
   });
@@ -1140,7 +1203,8 @@ var _withCodeOptions;
 function ToolbarCodeButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick() {
+  function handleClick(event) {
+    event.preventDefault();
     if (!(editor != null && editor.selection)) return;
     plateCommon.toggleMark(editor, Contentful.MARKS.CODE);
     Slate.ReactEditor.focus(editor);
@@ -1153,7 +1217,8 @@ function ToolbarCodeButton(props) {
     tooltipPlace: "bottom",
     label: "Code",
     testId: "code-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: plateCommon.isMarkActive(editor, Contentful.MARKS.CODE),
     disabled: props.isDisabled
   });
@@ -1194,7 +1259,8 @@ var _withItalicOptions;
 function ToolbarItalicButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick() {
+  function handleClick(event) {
+    event.preventDefault();
     if (!(editor != null && editor.selection)) return;
     plateCommon.toggleMark(editor, Contentful.MARKS.ITALIC);
     Slate.ReactEditor.focus(editor);
@@ -1207,7 +1273,8 @@ function ToolbarItalicButton(props) {
     tooltipPlace: "bottom",
     label: "Italic",
     testId: "italic-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: plateCommon.isMarkActive(editor, Contentful.MARKS.ITALIC),
     disabled: props.isDisabled
   });
@@ -1247,7 +1314,8 @@ var _withUnderlineOptions;
 function ToolbarUnderlineButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick() {
+  function handleClick(event) {
+    event.preventDefault();
     if (!(editor != null && editor.selection)) return;
     plateCommon.toggleMark(editor, Contentful.MARKS.UNDERLINE);
     Slate.ReactEditor.focus(editor);
@@ -1260,7 +1328,8 @@ function ToolbarUnderlineButton(props) {
     tooltipPlace: "bottom",
     label: "Underline",
     testId: "underline-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: plateCommon.isMarkActive(editor, Contentful.MARKS.UNDERLINE),
     disabled: props.isDisabled
   });
@@ -2285,26 +2354,97 @@ function EntryAssetTooltip(_ref) {
   })));
 }
 
+var styles$a = {
+  scheduleIcon: /*#__PURE__*/emotion.css({
+    marginRight: tokens.spacing2Xs
+  })
+};
+function EntityStatusIcon(_ref) {
+  var entity = _ref.entity,
+      entityType = _ref.entityType;
+
+  var _useEntities = fieldEditorReference.useEntities(),
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+
+  return /*#__PURE__*/React.createElement(fieldEditorReference.ScheduledIconWithTooltip, {
+    getEntityScheduledActions: loadEntityScheduledActions,
+    entityType: entityType,
+    entityId: entity.sys.id
+  }, /*#__PURE__*/React.createElement(forma36ReactComponents.Icon, {
+    className: styles$a.scheduleIcon,
+    icon: "Clock",
+    size: "small",
+    color: "muted",
+    testId: "schedule-icon"
+  }));
+}
+
+var styles$b = {
+  entryCard: /*#__PURE__*/emotion.css({
+    cursor: 'pointer'
+  })
+};
+
+function EntryThumbnail(_ref) {
+  var file = _ref.file;
+  if (!fieldEditorShared.isValidImage(file)) return null;
+  return /*#__PURE__*/React.createElement(fieldEditorReference.AssetThumbnail, {
+    file: file
+  });
+}
+
+function EntryDropdownMenu(_ref2) {
+  var onEdit = _ref2.onEdit,
+      onRemove = _ref2.onRemove,
+      isDisabled = _ref2.isDisabled;
+  return /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownList, null, /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, {
+    isTitle: true
+  }, "Actions"), /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, {
+    onClick: onEdit,
+    testId: "card-action-edit"
+  }, "Edit"), /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, {
+    onClick: onRemove,
+    isDisabled: isDisabled,
+    testId: "card-action-remove"
+  }, "Remove"));
+}
+
 function FetchingWrappedEntryCard(props) {
   var _useEntities = fieldEditorReference.useEntities(),
       getOrLoadEntry = _useEntities.getOrLoadEntry,
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
       entries = _useEntities.entries;
 
-  React.useEffect(function () {
-    getOrLoadEntry(props.entryId);
-  }, [props.entryId]); // eslint-disable-line
+  var _React$useState = React.useState(null),
+      file = _React$useState[0],
+      setFile = _React$useState[1];
 
   var entry = entries[props.entryId];
+  var contentType = React.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"];
   React.useEffect(function () {
     if (!entry) return;
-    props.onEntityFetchComplete && props.onEntityFetchComplete();
-  }, [entry]); // eslint-disable-line
+    fieldEditorShared.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]);
+  React.useEffect(function () {
+    getOrLoadEntry(props.entryId);
+  }, [props.entryId]); // eslint-disable-line
 
-  if (entry === 'failed') {
-    return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
-      entityType: "Entry",
+  function renderDropdown() {
+    if (!props.onEdit || !props.onRemove) return undefined;
+    return /*#__PURE__*/React.createElement(EntryDropdownMenu, {
       isDisabled: props.isDisabled,
+      onEdit: props.onEdit,
       onRemove: props.onRemove
     });
   }
@@ -2316,49 +2456,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__*/React.createElement(fieldEditorReference.MissingEntityCard, {
+      entityType: "Entry",
+      isDisabled: props.isDisabled,
+      onRemove: props.onRemove
+    });
+  }
+
+  var entryStatus = entry ? fieldEditorShared.entityHelpers.getEntryStatus(entry.sys) : undefined;
+
+  if (entryStatus === 'deleted') {
+    return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
+      entityType: "Entry",
+      isDisabled: props.isDisabled,
+      onRemove: props.onRemove
+    });
+  }
+
+  var title = fieldEditorShared.entityHelpers.getEntryTitle({
+    entry: entry,
+    contentType: contentType,
+    localeCode: props.locale,
+    defaultLocaleCode: defaultLocaleCode,
+    defaultTitle: 'Untitled'
   });
-  return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedEntryCard, {
+  var description = fieldEditorShared.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__*/React.createElement(forma36ReactComponents.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__*/React.createElement(EntryThumbnail, {
+      file: file
+    }) : null,
+    statusIcon: /*#__PURE__*/React.createElement(EntityStatusIcon, {
+      entityType: "Entry",
+      entity: entry
+    }),
+    dropdownListElements: renderDropdown()
   });
 }
 
+var styles$c = {
+  assetCard: /*#__PURE__*/emotion.css({
+    cursor: 'pointer'
+  }),
+  cardDropdown: /*#__PURE__*/emotion.css({
+    width: '300px'
+  }),
+  truncated: /*#__PURE__*/emotion.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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownList, null, /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, {
+    isTitle: true
+  }, "Actions"), onEdit && /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, {
+    onClick: onEdit,
+    testId: "card-action-edit"
+  }, "Edit"), entityFile && /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, {
+    onClick: downloadAsset,
+    testId: "card-action-download"
+  }, "Download"), onRemove && /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, {
+    onClick: onRemove,
+    isDisabled: isDisabled,
+    testId: "card-action-remove"
+  }, "Remove")), /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownList, {
+    border: "top"
+  }, /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, {
+    isTitle: true
+  }, "File info"), fileName && /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, null, /*#__PURE__*/React.createElement("div", {
+    className: styles$c.truncated
+  }, fileName)), mimeType && /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, null, /*#__PURE__*/React.createElement("div", null, mimeType)), fileSize && /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, null, fieldEditorShared.shortenStorageUnit(fileSize, 'B')), image && /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownListItem, null, image.width + " \xD7 " + image.height)));
+}
+
 function FetchingWrappedAssetCard(props) {
   var _useEntities = fieldEditorReference.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;
   React.useEffect(function () {
     getOrLoadAsset(props.assetId);
   }, [props.assetId]); // eslint-disable-line
 
-  var asset = assets[props.assetId];
-  React.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__*/React.createElement(fieldEditorReference.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) {
@@ -2371,20 +2611,49 @@ function FetchingWrappedAssetCard(props) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedAssetCard, {
+  if (asset === 'failed') {
+    return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
+      entityType: "Asset",
+      isDisabled: props.isDisabled,
+      onRemove: props.onRemove
+    });
+  }
+
+  var status = asset ? fieldEditorShared.entityHelpers.getEntryStatus(asset.sys) : undefined;
+
+  if (status === 'deleted') {
+    return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
+      entityType: "Asset",
+      asSquare: true,
+      isDisabled: props.isDisabled,
+      onRemove: props.onRemove
+    });
+  }
+
+  var entityTitle = fieldEditorShared.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__*/React.createElement(forma36ReactComponents.AssetCard, {
+    title: entityTitle,
+    selected: props.isSelected,
+    size: "default",
+    src: getAssetSrc(),
+    type: getFileType(),
+    status: status,
+    statusIcon: /*#__PURE__*/React.createElement(EntityStatusIcon, {
+      entityType: "Asset",
+      entity: asset
+    }),
+    className: styles$c.assetCard,
+    dropdownListElements: entityFile && /*#__PURE__*/React.createElement(AssetDropdownMenu, {
+      onEdit: props.onEdit,
+      onRemove: props.onRemove,
+      isDisabled: props.isDisabled,
+      entityFile: entityFile
+    })
   });
 }
 
@@ -2428,7 +2697,7 @@ function getLinkedContentTypeIdsForNodeType(field, nodeType) {
 }
 
 var _templateObject$3, _SYS_LINK_TYPES, _LINK_TYPE_SELECTION_;
-var styles$a = {
+var styles$d = {
   removeSelectionLabel: /*#__PURE__*/emotion.css(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    margin-left: ", ";\n  "])), tokens.spacingS)
 };
 var SYS_LINK_TYPES = (_SYS_LINK_TYPES = {}, _SYS_LINK_TYPES[Contentful.INLINES.ENTRY_HYPERLINK] = 'Entry', _SYS_LINK_TYPES[Contentful.INLINES.ASSET_HYPERLINK] = 'Asset', _SYS_LINK_TYPES);
@@ -2616,7 +2885,7 @@ function HyperlinkModal(props) {
     htmlFor: ""
   }, "Link target", ' '), linkEntity && linkEntity.sys.linkType === SYS_LINK_TYPES[linkType] ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(forma36ReactComponents.TextLink, {
     onClick: resetLinkEntity,
-    className: styles$a.removeSelectionLabel
+    className: styles$d.removeSelectionLabel
   }, "Remove selection"), /*#__PURE__*/React.createElement("div", null, linkType === Contentful.INLINES.ENTRY_HYPERLINK && /*#__PURE__*/React.createElement(FetchingWrappedEntryCard, {
     sdk: props.sdk,
     locale: props.sdk.field.locale,
@@ -2731,7 +3000,7 @@ function _addOrEditLink() {
 }
 
 var _withHyperlinkOptions;
-var styles$b = {
+var styles$e = {
   hyperlinkWrapper: /*#__PURE__*/emotion.css({
     display: 'inline',
     position: 'static',
@@ -2815,7 +3084,7 @@ function createHyperlinkPlugin(sdk) {
                   sys: {
                     id: element.getAttribute('data-link-id'),
                     linkType: element.getAttribute('data-link-type'),
-                    link: 'Link'
+                    type: 'Link'
                   }
                 }
               }
@@ -2832,7 +3101,7 @@ function createHyperlinkPlugin(sdk) {
                   sys: {
                     id: element.getAttribute('data-link-id'),
                     linkType: element.getAttribute('data-link-type'),
-                    link: 'Link'
+                    type: 'Link'
                   }
                 }
               }
@@ -2910,14 +3179,14 @@ function UrlHyperlink(props) {
 
   return /*#__PURE__*/React.createElement(forma36ReactComponents.Tooltip, {
     content: uri,
-    targetWrapperClassName: styles$b.hyperlinkWrapper,
+    targetWrapperClassName: styles$e.hyperlinkWrapper,
     place: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/React.createElement(forma36ReactComponents.TextLink, {
     href: uri,
     rel: "noopener noreferrer",
     onClick: handleClick,
-    className: styles$b.hyperlink
+    className: styles$e.hyperlink
   }, props.children));
 }
 
@@ -2966,14 +3235,14 @@ function EntityHyperlink(props) {
       type: target.sys.linkType,
       sdk: sdk
     }),
-    targetWrapperClassName: styles$b.hyperlinkWrapper,
+    targetWrapperClassName: styles$e.hyperlinkWrapper,
     place: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/React.createElement(forma36ReactComponents.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));
@@ -3027,7 +3296,8 @@ function ToolbarHyperlinkButton(props) {
     tooltipPlace: "bottom",
     label: "Hyperlink",
     testId: "hyperlink-toolbar-button",
-    onClick: handleClick,
+    // @ts-expect-error
+    onMouseDown: handleClick,
     isActive: isActive,
     disabled: props.isDisabled
   });
@@ -3245,7 +3515,7 @@ var setHeader = function setHeader(editor, enable) {
   });
 };
 
-var styles$c = {
+var styles$f = {
   topRight: /*#__PURE__*/emotion.css({
     position: 'absolute',
     top: tokens.spacingXs,
@@ -3323,7 +3593,7 @@ var TableActions = function TableActions() {
     };
   }, [editor, isHeaderEnabled, close, onViewportAction]);
   return /*#__PURE__*/React__default.createElement(forma36ReactComponents.Dropdown, {
-    className: styles$c.topRight,
+    className: styles$f.topRight,
     position: "left",
     isOpen: isOpen,
     onClose: close,
@@ -3363,27 +3633,27 @@ var TableActions = function TableActions() {
 };
 
 var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$1, _styles$1, _withTableOptions;
-var styles$d = (_styles$1 = {}, _styles$1[Contentful.BLOCKS.TABLE] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE_ROW] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE_HEADER_CELL] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE_CELL] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE_ROW] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE_HEADER_CELL] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.TABLE_CELL] = /*#__PURE__*/emotion.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__*/React.createElement("table", Object.assign({}, props.attributes, {
-    className: styles$d[Contentful.BLOCKS.TABLE]
+    className: styles$g[Contentful.BLOCKS.TABLE]
   }), /*#__PURE__*/React.createElement("tbody", null, props.children));
 };
 var TR = function TR(props) {
   return /*#__PURE__*/React.createElement("tr", Object.assign({}, props.attributes, {
-    className: styles$d[Contentful.BLOCKS.TABLE_ROW]
+    className: styles$g[Contentful.BLOCKS.TABLE_ROW]
   }), props.children);
 };
 var TH = function TH(props) {
   var isSelected = Slate.useSelected();
   return /*#__PURE__*/React.createElement("th", Object.assign({}, props.attributes, props.element.data, {
-    className: styles$d[Contentful.BLOCKS.TABLE_HEADER_CELL]
+    className: styles$g[Contentful.BLOCKS.TABLE_HEADER_CELL]
   }), isSelected && /*#__PURE__*/React.createElement(TableActions, null), props.children);
 };
 var TD = function TD(props) {
   var isSelected = Slate.useSelected();
   return /*#__PURE__*/React.createElement("td", Object.assign({}, props.attributes, props.element.data, {
-    className: styles$d[Contentful.BLOCKS.TABLE_CELL]
+    className: styles$g[Contentful.BLOCKS.TABLE_CELL]
   }), isSelected && /*#__PURE__*/React.createElement(TableActions, null), props.children);
 };
 var withTableOptions = (_withTableOptions = {}, _withTableOptions[plateTable.ELEMENT_TABLE] = {
@@ -3416,7 +3686,8 @@ function addTableTrackingEvents(editor, _ref) {
 
         if (hasTables(markupAfter)) {
           onViewportAction('paste', {
-            tablePasted: true
+            tablePasted: true,
+            hasHeadersOutsideFirstRow: hasHeadersOutsideFirstRow(markupAfter)
           });
         }
       }, 1);
@@ -3424,6 +3695,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 = [Contentful.BLOCKS.TABLE_CELL, Contentful.BLOCKS.TABLE_HEADER_CELL];
+
+    if (slate.Element.isElement(node) && cellTypes.includes(node.type)) {
+      for (var _iterator = _createForOfIteratorHelperLoose(slate.Node.children(editor, path)), _step; !(_step = _iterator()).done;) {
+        var _step$value = _step.value,
+            child = _step$value[0],
+            childPath = _step$value[1];
+
+        if (slate.Text.isText(child)) {
+          var paragraph = {
+            type: Contentful.BLOCKS.PARAGRAPH,
+            data: {},
+            children: []
+          };
+          slate.Transforms.wrapNodes(editor, paragraph, {
+            at: childPath
+          });
+        }
+      }
+    }
+
+    normalizeNode(entry);
+  };
+}
+
 function hasTables(nodes) {
   return nodes.some(function (_ref2) {
     var type = _ref2.type;
@@ -3431,16 +3736,62 @@ function hasTables(nodes) {
   });
 }
 
+var isTableHeaderCell = function isTableHeaderCell(_ref3) {
+  var type = _ref3.type;
+  return type === Contentful.BLOCKS.TABLE_HEADER_CELL;
+};
+
+function hasHeadersOutsideFirstRow(nodes) {
+  return nodes.filter(function (_ref4) {
+    var type = _ref4.type;
+    return type === Contentful.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 plateTable.getTableOnKeyDown()(editor);
   };
 }
 
 var createTablePlugin = function createTablePlugin(tracking) {
   return _extends({}, plateTable.createTablePlugin(), {
-    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 === Contentful.BLOCKS.TABLE;
+        });
+
+        if (fragmentHasTable) {
+          var emptyParagraph = {
+            type: Contentful.BLOCKS.PARAGRAPH,
+            children: [{
+              text: ''
+            }],
+            data: {},
+            isVoid: false
+          };
+          slate.Transforms.insertNodes(editor, emptyParagraph);
+        }
+
+        insertFragment(fragments);
+      };
+
+      return editor;
+    }
   });
 };
 function ToolbarTableButton(props) {
@@ -3492,7 +3843,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
@@ -3522,7 +3874,7 @@ function EmbeddedEntityDropdownButton(_ref) {
   }, /*#__PURE__*/React.createElement(forma36ReactComponents.DropdownList, null, children));
 }
 
-var styles$e = {
+var styles$h = {
   root: /*#__PURE__*/emotion.css({
     marginBottom: '1.25rem'
   })
@@ -3530,8 +3882,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 = Slate.useSelected();
   var editor = useContentfulEditor();
   var sdk = useSdkContext();
@@ -3556,7 +3907,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", {
@@ -3568,12 +3919,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,
@@ -3581,12 +3927,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);
 }
 
@@ -3726,7 +4067,7 @@ function insertBlock(editor, nodeType, entity) {
   Slate.ReactEditor.focus(editor);
 }
 
-var styles$f = {
+var styles$i = {
   icon: /*#__PURE__*/emotion.css({
     marginRight: '10px'
   })
@@ -3741,16 +4082,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();
           }
@@ -3758,7 +4100,7 @@ function EmbeddedEntityBlockToolbarIcon(_ref) {
       }, _callee);
     }));
 
-    return function handleClick() {
+    return function handleClick(_x) {
       return _ref2.apply(this, arguments);
     };
   }();
@@ -3769,21 +4111,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(forma36ReactComponents.DropdownListItem, {
     isDisabled: isDisabled,
     className: baseClass + "-list-item",
-    onClick: handleClick,
+    onMouseDown: handleClick,
     testId: "toolbar-toggle-" + nodeType
   }, /*#__PURE__*/React__default.createElement(forma36ReactComponents.Flex, {
     alignItems: "center",
     flexDirection: "row"
   }, /*#__PURE__*/React__default.createElement(forma36ReactComponents.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)));
 }
@@ -3826,6 +4169,7 @@ var createEmbeddedEntityPlugin = function createEmbeddedEntityPlugin(nodeType) {
               if (!isBlock) return;
               return {
                 type: nodeType,
+                isVoid: true,
                 data: {
                   target: {
                     sys: {
@@ -3908,7 +4252,7 @@ function getWithEmbeddedEntityEvents(nodeType, sdk) {
 
 var getEntryTitle = fieldEditorShared.entityHelpers.getEntryTitle,
     getEntryStatus = fieldEditorShared.entityHelpers.getEntryStatus;
-var styles$g = {
+var styles$j = {
   scheduledIcon: /*#__PURE__*/emotion.css({
     verticalAlign: 'text-bottom',
     marginRight: tokens.spacing2Xs
@@ -3986,7 +4330,7 @@ function FetchingWrappedInlineEntryCard(props) {
     entityType: "Entry",
     entityId: entry.sys.id
   }, /*#__PURE__*/React__default.createElement(forma36ReactComponents.Icon, {
-    className: styles$g.scheduledIcon,
+    className: styles$j.scheduledIcon,
     icon: "Clock",
     color: "muted",
     testId: "scheduled-icon"
@@ -4012,7 +4356,7 @@ function createInlineEntryNode(id) {
 }
 
 var _withEmbeddedEntityIn;
-var styles$h = {
+var styles$k = {
   icon: /*#__PURE__*/emotion.css({
     marginRight: '10px'
   }),
@@ -4050,7 +4394,7 @@ function EmbeddedEntityInline(props) {
   }
 
   return /*#__PURE__*/React.createElement("span", Object.assign({}, props.attributes, {
-    className: styles$h.root,
+    className: styles$k.root,
     "data-embedded-entity-inline-id": entryId
   }), /*#__PURE__*/React.createElement("span", {
     contentEditable: false
@@ -4168,7 +4512,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
   }, /*#__PURE__*/React.createElement(forma36ReactComponents.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__*/React.createElement("span", null, "Inline entry")));
 }
 function createEmbeddedEntityInlinePlugin(sdk) {
@@ -4288,7 +4632,7 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
   }, actions);
 };
 
-var styles$i = {
+var styles$l = {
   embedActionsWrapper: /*#__PURE__*/emotion.css({
     display: ['-webkit-box', '-ms-flexbox', 'flex'],
     webkitAlignSelf: 'flex-start',
@@ -4318,7 +4662,7 @@ var Toolbar = function Toolbar(_ref) {
   return /*#__PURE__*/React__default.createElement(forma36ReactComponents.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(forma36ReactComponents.EditorToolbarDivider, null), isMarkEnabled(sdk.field, Contentful.MARKS.BOLD) && /*#__PURE__*/React__default.createElement(ToolbarBoldButton, {
@@ -4340,7 +4684,7 @@ var Toolbar = function Toolbar(_ref) {
   }), isNodeTypeEnabled(sdk.field, Contentful.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
@@ -4365,7 +4709,7 @@ function getValidationInfo(field) {
 }
 
 var _templateObject$5;
-var styles$j = {
+var styles$m = {
   nativeSticky: /*#__PURE__*/emotion.css(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: -webkit-sticky;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n  "])))
 };
 
@@ -4373,15 +4717,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, Contentful.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[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.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[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.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__*/React.createElement("div", Object.assign({}, props.attributes, {
-    className: styles$k[Contentful.BLOCKS.PARAGRAPH]
+    className: styles$n[Contentful.BLOCKS.PARAGRAPH]
   }), props.children);
 }
 function createParagraphPlugin() {
@@ -4397,9 +4884,8 @@ function createParagraphPlugin() {
           type: Contentful.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: Contentful.BLOCKS.PARAGRAPH
@@ -4560,7 +5046,8 @@ var _excluded = ["sdk", "isInitiallyDisabled", "onAction"];
 
 var getPlugins = function getPlugins(sdk, tracking) {
   var plugins = [// Core
-  plateCore.createReactPlugin(), plateCore.createHistoryPlugin(), // Global shortcuts
+  plateCore.createReactPlugin(), plateCore.createHistoryPlugin(), // Behavior
+  createPastePlugin(), // Global shortcuts
   createNewLinePlugin(), createInsertBeforeFirstVoidBlockPlugin(), // Block Elements
   createParagraphPlugin(), plateList.createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
   createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
@@ -4633,8 +5120,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(fieldEditorShared.FieldConnector, {
@@ -4648,15 +5133,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 = {