@contentful/field-editor-rich-text 2.0.0-next.0 → 2.0.0-next.1

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

@@ -1,7 +1,7 @@
-import React__default, { Component, createElement, useMemo, useState, useEffect, Fragment, useCallback } from 'react';
+import React__default, { createElement, useMemo, useState, useEffect, Fragment, useCallback } from 'react';
 import noop from 'lodash-es/noop';
 import { toContentfulDocument, toSlatejsDocument } from '@contentful/contentful-slatejs-adapter';
-import { TOP_LEVEL_BLOCKS, BLOCKS, CONTAINERS, VOID_BLOCKS, INLINES, LIST_ITEM_BLOCKS, MARKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
+import { TOP_LEVEL_BLOCKS, BLOCKS, CONTAINERS, VOID_BLOCKS, INLINES, TABLE_BLOCKS, LIST_ITEM_BLOCKS, MARKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
 import { getScheduleTooltipContent, useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, EntityProvider } from '@contentful/field-editor-reference';
 import { css, cx } from 'emotion';
 import tokens from '@contentful/f36-tokens';
@@ -9,18 +9,19 @@ import deepEquals from 'fast-deep-equal';
 import { Button, Tooltip, Menu, EntryCard, MenuItem, AssetCard, Text as Text$1, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, IconButton, Flex, Icon, InlineEntryCard } from '@contentful/f36-components';
 import { useSelected, useFocused, ReactEditor, useReadOnly } from 'slate-react';
 import { HorizontalRuleIcon, ChevronDownIcon, QuoteIcon, ListBulletedIcon, ListNumberedIcon, FormatBoldIcon, CodeIcon, FormatItalicIcon, FormatUnderlinedIcon, ClockIcon, LinkIcon, TableIcon, PlusIcon, AssetIcon, EmbeddedEntryBlockIcon, EmbeddedEntryInlineIcon } from '@contentful/f36-icons';
-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 { Editor, Transforms, Element, Text, Node as Node$1, Path, Range } from 'slate';
+import { getPlatePluginOptions, usePlateEditorRef, getRenderElement, getPlatePluginTypes, getRenderLeaf, getPlatePluginType, Plate, createReactPlugin, createHistoryPlugin } from '@udecode/plate-core';
+import { getText, getElementDeserializer, getLeafDeserializer, setNodes, insertNodes, toggleNodeType, findNode, getToggleMarkOnKeyDown, isMarkActive, toggleMark, getAbove, getChildren, someNode, getToggleElementOnKeyDown, getNodes } from '@udecode/plate-common';
 import constate from 'constate';
 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, createListPlugin as createListPlugin$1, toggleList } from '@udecode/plate-list';
+import { ELEMENT_LI, ELEMENT_UL, ELEMENT_OL, ELEMENT_LIC, toggleList, createListPlugin as createListPlugin$1, withList } from '@udecode/plate-list';
+import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';
 import { entityHelpers, isValidImage, shortenStorageUnit, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 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 { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';
+import { createDeserializeAstPlugin } from '@udecode/plate-ast-serializer';
 import { createDeserializeHTMLPlugin } from '@udecode/plate-html-serializer';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 import { createExitBreakPlugin } from '@udecode/plate-break';
@@ -323,57 +324,40 @@ var styles$1 = {
     zIndex: /*#__PURE__*/Number(tokens.zIndexTooltip)
   })
 };
-var ToolbarButton = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(ToolbarButton, _Component);
-
-  function ToolbarButton() {
-    var _this;
-
-    _this = _Component.apply(this, arguments) || this;
+function ToolbarButton(props) {
+  var title = props.title,
+      testId = props.testId,
+      isActive = props.isActive,
+      children = props.children,
+      className = props.className,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled;
 
-    _this.handleClick = function (event) {
-      event.preventDefault();
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    props.onClick();
+  };
 
-      _this.props.onClick(event);
-    };
+  var button = /*#__PURE__*/React__default.createElement(Button, {
+    className: cx(styles$1.button, className),
+    isDisabled: isDisabled,
+    startIcon: children,
+    onClick: handleClick,
+    testId: testId,
+    variant: isActive ? 'secondary' : 'transparent',
+    size: "small"
+  });
 
-    return _this;
+  if (title) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      className: styles$1.tooltip,
+      placement: "bottom",
+      content: title
+    }, button);
   }
 
-  var _proto = ToolbarButton.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        title = _this$props.title,
-        testId = _this$props.testId,
-        isActive = _this$props.isActive,
-        children = _this$props.children,
-        className = _this$props.className,
-        _this$props$isDisable = _this$props.isDisabled,
-        isDisabled = _this$props$isDisable === void 0 ? false : _this$props$isDisable;
-    var button = /*#__PURE__*/React__default.createElement(Button, {
-      className: cx(styles$1.button, className),
-      isDisabled: isDisabled,
-      startIcon: children,
-      onClick: this.handleClick,
-      testId: testId,
-      variant: isActive ? 'secondary' : 'transparent',
-      size: "small"
-    });
-
-    if (title) {
-      return /*#__PURE__*/React__default.createElement(Tooltip, {
-        className: styles$1.tooltip,
-        placement: "bottom",
-        content: title
-      }, button);
-    }
-
-    return button;
-  };
-
-  return ToolbarButton;
-}(Component);
+  return button;
+}
 
 var LINK_TYPES = [INLINES.HYPERLINK, INLINES.ENTRY_HYPERLINK, INLINES.ASSET_HYPERLINK];
 var LIST_TYPES = [BLOCKS.OL_LIST, BLOCKS.UL_LIST];
@@ -575,6 +559,57 @@ function unwrapFromRoot(editor) {
     at: ancestorPath
   });
 }
+var isAtEndOfTextSelection = function isAtEndOfTextSelection(editor) {
+  var _editor$selection, _editor$selection2;
+
+  return ((_editor$selection = editor.selection) == null ? void 0 : _editor$selection.focus.offset) === getText(editor, (_editor$selection2 = editor.selection) == null ? void 0 : _editor$selection2.focus.path).length;
+};
+function currentSelectionStartsTableCell(editor) {
+  var _editor$selection3;
+
+  var _getNodeEntryFromSele2 = getNodeEntryFromSelection(editor, [BLOCKS.TABLE_CELL, BLOCKS.TABLE_HEADER_CELL]),
+      tableCellNode = _getNodeEntryFromSele2[0],
+      path = _getNodeEntryFromSele2[1];
+
+  return !!tableCellNode && (!getText(editor, path) || ((_editor$selection3 = editor.selection) == null ? void 0 : _editor$selection3.focus.offset) === 0);
+}
+/**
+ * This traversal strategy is unfortunately necessary because Slate doesn't
+ * expose something like Node.next(editor).
+ */
+
+function getNextNode(editor) {
+  if (!editor.selection) {
+    return null;
+  }
+
+  var descendants = Node$1.descendants(editor, {
+    from: editor.selection.focus.path
+  }); // eslint-disable-next-line no-constant-condition
+
+  while (true) {
+    var _descendants$next = descendants.next(),
+        done = _descendants$next.done,
+        value = _descendants$next.value;
+
+    if (done) {
+      return null;
+    }
+
+    var node = value[0],
+        path = value[1];
+
+    if (Path.isCommon(path, editor.selection.focus.path)) {
+      continue;
+    }
+
+    return node;
+  }
+}
+function currentSelectionPrecedesTableCell(editor) {
+  var nextNode = getNextNode(editor);
+  return !!nextNode && TABLE_BLOCKS.includes(nextNode.type) && isAtEndOfTextSelection(editor);
+}
 
 function deserializeLeaf(type, rules) {
   return function (editor) {
@@ -609,7 +644,7 @@ function getContentfulEditorId(sdk) {
 function useContentfulEditorHook(_ref) {
   var sdk = _ref.sdk;
   var editorId = getContentfulEditorId(sdk);
-  var editor = useStoreEditorRef(editorId);
+  var editor = usePlateEditorRef(editorId);
   return editor;
 }
 
@@ -651,8 +686,7 @@ function withHrEvents(editor) {
 function ToolbarHrButton(props) {
   var editor = useContentfulEditor();
 
-  function handleOnClick(event) {
-    event.preventDefault();
+  function handleOnClick() {
     if (!(editor != null && editor.selection)) return;
 
     if (shouldUnwrapBlockquote(editor, BLOCKS.HR)) {
@@ -1068,8 +1102,7 @@ function withQuoteEvents(editor) {
 function ToolbarQuoteButton(props) {
   var editor = useContentfulEditor();
 
-  function handleOnClick(event) {
-    event.preventDefault();
+  function handleOnClick() {
     if (!editor) return;
     createBlockQuote(editor);
     ReactEditor.focus(editor);
@@ -1104,14 +1137,97 @@ var withQuoteOptions = (_withQuoteOptions = {}, _withQuoteOptions[BLOCKS.QUOTE]
   component: Quote
 }, _withQuoteOptions);
 
+/**
+ * A copy of Plate's list plugin with a few adjustments
+ * to fix pasting text inside lists.
+ */
+
+var slateNodesToText = function slateNodesToText(nodes) {
+  var contentfulNode = toContentfulDocument({
+    document: nodes,
+    schema: schema
+  });
+  return documentToPlainTextString(contentfulNode);
+};
+
+var getListInsertFragment = function getListInsertFragment(editor) {
+  var insertFragment = editor.insertFragment;
+  var li = getPlatePluginOptions(editor, ELEMENT_LI);
+  var ul = getPlatePluginOptions(editor, ELEMENT_UL);
+  var ol = getPlatePluginOptions(editor, ELEMENT_OL);
+
+  var isListRoot = function isListRoot(node) {
+    return [ul.type, ol.type].includes(node.type);
+  };
+
+  var getFirstAncestorOfType = function getFirstAncestorOfType(root, entry, _ref) {
+    var type = _ref.type;
+    var ancestor = Path.parent(entry[1]);
+
+    while (Node$1.get(root, ancestor).type !== type) {
+      ancestor = Path.parent(ancestor);
+    }
+
+    return [Node$1.get(root, ancestor), ancestor];
+  };
+  /**
+   * Removes the "empty" leading lis. Empty in this context means lis only with other lis as children.
+   *
+   * @returns If argument is not a list root, returns it, otherwise returns ul[] or li[].
+   */
+
+
+  var trimList = function trimList(listRoot) {
+    if (!isListRoot(listRoot)) {
+      return [listRoot];
+    }
+
+    var textEntries = Array.from(Node$1.texts(listRoot));
+    var commonAncestorEntry = textEntries.reduce(function (commonAncestor, textEntry) {
+      return Path.isAncestor(commonAncestor[1], textEntry[1]) ? commonAncestor : Node$1.common(listRoot, textEntry[1], commonAncestor[1]);
+    }, // any list item would do, we grab the first one
+    getFirstAncestorOfType(listRoot, textEntries[0], li));
+    return isListRoot(commonAncestorEntry[0]) ? commonAncestorEntry[0].children : [commonAncestorEntry[0]];
+  };
+
+  return function (fragment) {
+    var liEntry = findNode(editor, {
+      match: {
+        type: li.type
+      },
+      mode: 'lowest'
+    });
+
+    if (liEntry) {
+      var liPath = liEntry[1]; // FIXME: this is a temporarily workaround and needs a follow-up to properly
+      // non-text elements
+
+      var nodes = fragment.flatMap(function (node) {
+        return trimList(node);
+      });
+      var text = slateNodesToText(nodes);
+      return Transforms.insertNodes(editor, [{
+        text: text
+      }], {
+        at: editor.selection || Path.next(liPath),
+        select: true
+      });
+    }
+
+    var filtered = isListRoot(fragment[0]) ? [{
+      text: ''
+    }].concat(fragment) : fragment;
+    return insertFragment(filtered);
+  };
+};
+
 var _templateObject$2, _templateObject2$2, _templateObject3$2, _styles, _withListOptions;
 function ToolbarListButton(props) {
   var sdk = useSdkContext();
   var editor = useContentfulEditor();
 
   function handleClick(type) {
-    return function (event) {
-      event.preventDefault();
+    return function () {
       if (!(editor != null && editor.selection)) return;
 
       if (shouldUnwrapBlockquote(editor, type)) {
@@ -1164,18 +1280,34 @@ var withListOptions = (_withListOptions = {}, _withListOptions[ELEMENT_LIC] = {
   type: BLOCKS.OL_LIST,
   component: OL
 }, _withListOptions);
+
+var withCustomList = function withCustomList(options) {
+  var withDefaultOverrides = withList(options);
+  return function (editor) {
+    var insertFragment = editor.insertFragment;
+    withDefaultOverrides(editor); // Reverts any overrides to insertFragment
+
+    editor.insertFragment = insertFragment; // Use our custom getListInsertFragment
+
+    editor.insertFragment = getListInsertFragment(editor);
+    return editor;
+  };
+};
+
 var createListPlugin = function createListPlugin() {
-  return createListPlugin$1({
+  var options = {
     validLiChildrenTypes: LIST_ITEM_BLOCKS
-  });
+  };
+  var plugin = createListPlugin$1(options);
+  plugin.withOverrides = withCustomList(options);
+  return plugin;
 };
 
 var _withBoldOptions;
 function ToolbarBoldButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick(event) {
-    event.preventDefault();
+  function handleClick() {
     if (!(editor != null && editor.selection)) return;
     toggleMark(editor, MARKS.BOLD);
     ReactEditor.focus(editor);
@@ -1233,8 +1365,7 @@ var _withCodeOptions;
 function ToolbarCodeButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick(event) {
-    event.preventDefault();
+  function handleClick() {
     if (!(editor != null && editor.selection)) return;
     toggleMark(editor, MARKS.CODE);
     ReactEditor.focus(editor);
@@ -1285,8 +1416,7 @@ var _withItalicOptions;
 function ToolbarItalicButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick(event) {
-    event.preventDefault();
+  function handleClick() {
     if (!(editor != null && editor.selection)) return;
     toggleMark(editor, MARKS.ITALIC);
     ReactEditor.focus(editor);
@@ -1336,8 +1466,7 @@ var _withUnderlineOptions;
 function ToolbarUnderlineButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick(event) {
-    event.preventDefault();
+  function handleClick() {
     if (!(editor != null && editor.selection)) return;
     toggleMark(editor, MARKS.UNDERLINE);
     ReactEditor.focus(editor);
@@ -3173,33 +3302,31 @@ function ToolbarHyperlinkButton(props) {
   var isActive = !!(editor && isLinkActive(editor));
   var sdk = useSdkContext();
 
-  function handleClick(_x3) {
+  function handleClick() {
     return _handleClick3.apply(this, arguments);
   }
 
   function _handleClick3() {
-    _handleClick3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(event) {
+    _handleClick3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
       return runtime_1.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              event.preventDefault();
-
               if (editor) {
-                _context3.next = 3;
+                _context3.next = 2;
                 break;
               }
 
               return _context3.abrupt("return");
 
-            case 3:
+            case 2:
               if (isActive) {
                 unwrapLink(editor);
               } else {
                 addOrEditLink(editor, sdk);
               }
 
-            case 4:
+            case 3:
             case "end":
               return _context3.stop();
           }
@@ -3696,7 +3823,19 @@ function createWithTableEvents(tracking) {
   return function withTableEvents(editor) {
     addTableTrackingEvents(editor, tracking);
     addTableNormalization(editor);
-    return getTableOnKeyDown()(editor);
+    var handleKeyDownFromPlateUdecode = getTableOnKeyDown()(editor);
+    return function handleKeyDown(event) {
+      if (event.key === 'Backspace' && currentSelectionStartsTableCell(editor) || event.key === 'Delete' && currentSelectionPrecedesTableCell(editor)) {
+        // The default behavior here would be to delete the preceding or forthcoming
+        // leaf node, in this case a cell or header cell. But we don't want to do that,
+        // because it would leave us with a non-standard number of table cells.
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      handleKeyDownFromPlateUdecode(event);
+    };
   };
 }
 
@@ -3740,31 +3879,29 @@ function ToolbarTableButton(props) {
 
   var isActive = editor && isTableActive(editor);
 
-  function handleClick(_x) {
+  function handleClick() {
     return _handleClick.apply(this, arguments);
   }
 
   function _handleClick() {
-    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(event) {
+    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              event.preventDefault();
-
               if (editor) {
-                _context.next = 3;
+                _context.next = 2;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 3:
+            case 2:
               onViewportAction('insertTable');
               insertTableAndFocusFirstCell(editor);
               ReactEditor.focus(editor);
 
-            case 6:
+            case 5:
             case "end":
               return _context.stop();
           }
@@ -3808,6 +3945,16 @@ function EmbeddedEntityDropdownButton(_ref) {
   }, children));
 }
 
+// "modern" Edge was released at 79.x
+var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent); // Native `beforeInput` events don't work well with react on Chrome 75
+// and older, Chrome 76+ can use `beforeInput` though.
+
+var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent); // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
+// Chrome Legacy doesn't support `beforeinput` correctly
+
+var HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
+typeof globalThis !== 'undefined' && globalThis.InputEvent && typeof globalThis.InputEvent.prototype.getTargetRanges === 'function'; // The `getTargetRanges` property isn't recognized.
+
 var styles$g = {
   root: /*#__PURE__*/css({
     marginBottom: '1.25rem'
@@ -3843,9 +3990,14 @@ function LinkedEntityBlock(props) {
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     className: styles$g.root,
     "data-entity-type": entityType,
-    "data-entity-id": entityId
+    "data-entity-id": entityId,
+    // COMPAT: This makes copy & paste work for Firefox
+    contentEditable: !HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
+    draggable: !HAS_BEFORE_INPUT_SUPPORT ? true : undefined
   }), /*#__PURE__*/React__default.createElement("div", {
-    contentEditable: false
+    // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
+    contentEditable: HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
+    draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined
   }, entityType === 'Entry' && /*#__PURE__*/React__default.createElement(FetchingWrappedEntryCard, {
     sdk: sdk,
     entryId: entityId,
@@ -4252,7 +4404,7 @@ function FetchingWrappedInlineEntryCard(props) {
       key: "edit",
       onClick: props.onEdit
     }, "Edit"), /*#__PURE__*/React__default.createElement(MenuItem, {
-      key: "edit",
+      key: "remove",
       onClick: props.onRemove,
       disabled: props.isDisabled,
       testId: "card-action-remove"
@@ -4318,9 +4470,14 @@ function EmbeddedEntityInline(props) {
 
   return /*#__PURE__*/createElement("span", Object.assign({}, props.attributes, {
     className: styles$j.root,
-    "data-embedded-entity-inline-id": entryId
+    "data-embedded-entity-inline-id": entryId,
+    // COMPAT: This makes copy & paste work for Firefox
+    contentEditable: !HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
+    draggable: !HAS_BEFORE_INPUT_SUPPORT ? true : undefined
   }), /*#__PURE__*/createElement("span", {
-    contentEditable: false
+    // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
+    contentEditable: HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
+    draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined
   }, /*#__PURE__*/createElement(FetchingWrappedInlineEntryCard, {
     sdk: sdk,
     entryId: entryId,
@@ -4442,6 +4599,7 @@ function createEmbeddedEntityInlinePlugin(sdk) {
     renderElement: getRenderElement(INLINES.EMBEDDED_ENTRY),
     pluginKeys: INLINES.EMBEDDED_ENTRY,
     inlineTypes: getPlatePluginTypes(INLINES.EMBEDDED_ENTRY),
+    voidTypes: getPlatePluginTypes(INLINES.EMBEDDED_ENTRY),
     onKeyDown: getWithEmbeddedEntryInlineEvents(sdk),
     deserialize: function deserialize(editor) {
       var options = getPlatePluginOptions(editor, INLINES.EMBEDDED_ENTRY);
@@ -4494,6 +4652,7 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
   var isDisabled = _ref.isDisabled,
       canInsertBlocks = _ref.canInsertBlocks;
   var sdk = useSdkContext();
+  var editor = useContentfulEditor();
 
   var _useState = useState(false),
       isEmbedDropdownOpen = _useState[0],
@@ -4532,7 +4691,7 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
     onClose: onCloseEntityDropdown,
     isButton: !shouldDisplayDropdown
   }), inlineEntryEmbedEnabled && /*#__PURE__*/React__default.createElement(ToolbarEmbeddedEntityInlineButton, {
-    isDisabled: !!isDisabled,
+    isDisabled: !!isDisabled || isLinkActive(editor),
     onClose: onCloseEntityDropdown,
     isButton: !shouldDisplayDropdown
   }), blockAssetEmbedEnabled && /*#__PURE__*/React__default.createElement(EmbeddedEntityBlockToolbarIcon, {
@@ -4839,6 +4998,8 @@ var createPastePlugin = function createPastePlugin() {
   };
 };
 
+var _excluded = ["element"];
+
 var _templateObject$6, _styles$2, _withParagraphOptions;
 var styles$m = (_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) {
@@ -4846,15 +5007,71 @@ function Paragraph(props) {
     className: styles$m[BLOCKS.PARAGRAPH]
   }), props.children);
 }
+
+function isEmbed(element) {
+  return element.hasAttribute('data-embedded-entity-inline-id') || element.hasAttribute('data-entity-type');
+}
+
+function isEmpty(element) {
+  return element.textContent === '';
+}
+
 function createParagraphPlugin() {
   var elementKeys = [ELEMENT_PARAGRAPH, BLOCKS.PARAGRAPH];
+  var deserializer = deserializeElement(BLOCKS.PARAGRAPH, [{
+    nodeNames: ['P', 'DIV']
+  }]);
   return {
     renderElement: getRenderElement(elementKeys),
     pluginKeys: elementKeys,
     onKeyDown: getToggleElementOnKeyDown(BLOCKS.PARAGRAPH),
-    deserialize: deserializeElement(BLOCKS.PARAGRAPH, [{
-      nodeNames: ['P']
-    }])
+    deserialize: function deserialize(editor) {
+      var _deserializer = deserializer(editor),
+          element = _deserializer.element,
+          rest = _objectWithoutPropertiesLoose(_deserializer, _excluded);
+
+      return _extends({}, rest, {
+        element: element == null ? void 0 : element.map(function (deserializeNode) {
+          return _extends({}, deserializeNode, {
+            deserialize: function deserialize(el) {
+              if (isEmpty(el) || isEmbed(el)) {
+                return;
+              }
+
+              return deserializeNode.deserialize(el);
+            }
+          });
+        })
+      });
+    },
+    withOverrides: function withOverrides(editor) {
+      var normalizeNode = editor.normalizeNode;
+
+      editor.normalizeNode = function (entry) {
+        var node = entry[0],
+            path = entry[1]; // If the element is a paragraph, ensure its children are valid.
+
+        if (Element.isElement(node) && node.type === BLOCKS.PARAGRAPH) {
+          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 (Element.isElement(child) && !editor.isInline(child)) {
+              Transforms.unwrapNodes(editor, {
+                at: childPath
+              });
+              return;
+            }
+          }
+        } // Fall back to the original `normalizeNode` to enforce other constraints.
+
+
+        normalizeNode(entry);
+      };
+
+      return editor;
+    }
   };
 }
 var withParagraphOptions = (_withParagraphOptions = {}, _withParagraphOptions[ELEMENT_PARAGRAPH] = {
@@ -4898,6 +5115,15 @@ function createInsertBeforeFirstVoidBlockPlugin() {
           return isFirstChild(path) && !!node.isVoid;
         }
       }
+    }, {
+      hotkey: 'enter',
+      query: {
+        filter: function filter(_ref2) {
+          var node = _ref2[0],
+              path = _ref2[1];
+          return !isFirstChild(path) && !!node.isVoid;
+        }
+      }
     }]
   };
   return createExitBreakPlugin(optionsExitBreakPlugin);
@@ -5003,19 +5229,108 @@ var createTrailingParagraphPlugin = function createTrailingParagraphPlugin() {
   });
 };
 
-var _excluded = ["sdk", "isInitiallyDisabled", "onAction"];
+function createDragAndDropPlugin() {
+  var _DND_BLOCKED_ELEMENTS;
+
+  // Elements that don't allow other elements to be dragged into them and which callback should be used
+  var DND_BLOCKED_ELEMENTS = (_DND_BLOCKED_ELEMENTS = {}, _DND_BLOCKED_ELEMENTS[BLOCKS.TABLE] = Transforms.removeNodes, _DND_BLOCKED_ELEMENTS[BLOCKS.QUOTE] = Transforms.liftNodes, _DND_BLOCKED_ELEMENTS);
+  var DRAGGABLE_TYPES = [BLOCKS.EMBEDDED_ENTRY, BLOCKS.EMBEDDED_ASSET, INLINES.EMBEDDED_ENTRY];
+  /**
+   * HTML node names where dropping should be allowed
+   * Usually for elements where `Transforms.removeNodes` is needed
+   * TODO: looking up for html nodes is not the best solution and it won't scale but it works fine for our current cases/elements
+   */
+
+  var ON_DROP_ALLOWED_TYPES = {
+    TABLE: [INLINES.EMBEDDED_ENTRY]
+  };
+  return {
+    withOverrides: function withOverrides(editor) {
+      var normalizeNode = editor.normalizeNode;
+
+      editor.normalizeNode = function (entry) {
+        var node = entry[0],
+            path = entry[1];
+        Object.keys(DND_BLOCKED_ELEMENTS).forEach(function (blockedElementType) {
+          var nodeType = node.type;
+
+          if (Node$1.isNode(node) && nodeType === blockedElementType) {
+            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];
+              var childType = child.type;
+              if (!CONTAINERS[blockedElementType]) return;
+
+              if (!CONTAINERS[blockedElementType].includes(childType)) {
+                var callback = DND_BLOCKED_ELEMENTS[blockedElementType];
+                callback(editor, {
+                  at: childPath,
+                  match: function match(matchNode) {
+                    return Node$1.isNode(matchNode) && DRAGGABLE_TYPES.includes(matchNode.type);
+                  }
+                });
+                return;
+              }
+            }
+          }
+        });
+        normalizeNode(entry);
+      };
+
+      return editor;
+    },
+    // If true, the next handlers will be skipped.
+    onDrop: function onDrop(editor) {
+      return function (event) {
+        var _Array$from = Array.from(getNodes(editor, {
+          match: function match(node) {
+            return Editor.isBlock(editor, node) && DRAGGABLE_TYPES.includes(node.type);
+          }
+        })),
+            draggingBlock = _Array$from[0];
+
+        if (!draggingBlock) return false;
+        var draggingNode = draggingBlock[0];
+        if (!event.nativeEvent.target) return false; // TODO: looking up for html nodes is not the best solution and it won't scale, we need to find a way to know the dropping target slate element
+
+        return getParents(event.nativeEvent.target).some(function (node) {
+          var _ON_DROP_ALLOWED_TYPE;
+
+          return ON_DROP_ALLOWED_TYPES[node.nodeName] ? !((_ON_DROP_ALLOWED_TYPE = ON_DROP_ALLOWED_TYPES[node.nodeName]) != null && _ON_DROP_ALLOWED_TYPE.includes(draggingNode.type)) : false;
+        });
+      };
+    }
+  };
+}
+
+function getParents(el) {
+  var parents = [];
+  parents.push(el);
+
+  while (el.parentNode) {
+    parents.unshift(el.parentNode);
+    el = el.parentNode;
+  }
+
+  return parents;
+}
+
+var _excluded$1 = ["sdk", "isInitiallyDisabled", "onAction"];
 
 var getPlugins = function getPlugins(sdk, tracking) {
   var plugins = [// Core
   createReactPlugin(), createHistoryPlugin(), // Behavior
   createPastePlugin(), // Global shortcuts
-  createNewLinePlugin(), createInsertBeforeFirstVoidBlockPlugin(), // Block Elements
+  createNewLinePlugin(), createInsertBeforeFirstVoidBlockPlugin(), createDragAndDropPlugin(), // Block Elements
   createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
   createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
   createBoldPlugin(), createCodePlugin(), createItalicPlugin(), createUnderlinePlugin(), // Other
   createTrailingParagraphPlugin()];
   return plugins.concat([createDeserializeHTMLPlugin({
     plugins: plugins
+  }), createDeserializeAstPlugin({
+    plugins: plugins
   })]);
 };
 
@@ -5072,7 +5387,7 @@ var RichTextEditor = function RichTextEditor(props) {
   var sdk = props.sdk,
       isInitiallyDisabled = props.isInitiallyDisabled,
       onAction = props.onAction,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
 
   var isEmptyValue = useCallback(function (value) {
     return !value || deepEquals(value, EMPTY_DOCUMENT);