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

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

@@ -24,10 +24,11 @@ var find = _interopDefault(require('lodash/find'));
 var flow = _interopDefault(require('lodash/flow'));
 var get = _interopDefault(require('lodash/get'));
 var plateList = require('@udecode/plate-list');
+var richTextPlainTextRenderer = require('@contentful/rich-text-plain-text-renderer');
 var fieldEditorShared = require('@contentful/field-editor-shared');
 var mimetype = _interopDefault(require('@contentful/mimetype'));
 var plateTable = require('@udecode/plate-table');
-var richTextPlainTextRenderer = require('@contentful/rich-text-plain-text-renderer');
+var plateAstSerializer = require('@udecode/plate-ast-serializer');
 var plateHtmlSerializer = require('@udecode/plate-html-serializer');
 var plateParagraph = require('@udecode/plate-paragraph');
 var plateBreak = require('@udecode/plate-break');
@@ -330,57 +331,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(f36Components.Button, {
+    className: emotion.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(f36Components.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(f36Components.Button, {
-      className: emotion.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(f36Components.Tooltip, {
-        className: styles$1.tooltip,
-        placement: "bottom",
-        content: title
-      }, button);
-    }
-
-    return button;
-  };
-
-  return ToolbarButton;
-}(React.Component);
+  return button;
+}
 
 var LINK_TYPES = [Contentful.INLINES.HYPERLINK, Contentful.INLINES.ENTRY_HYPERLINK, Contentful.INLINES.ASSET_HYPERLINK];
 var LIST_TYPES = [Contentful.BLOCKS.OL_LIST, Contentful.BLOCKS.UL_LIST];
@@ -582,6 +566,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) === plateCommon.getText(editor, (_editor$selection2 = editor.selection) == null ? void 0 : _editor$selection2.focus.path).length;
+};
+function currentSelectionStartsTableCell(editor) {
+  var _editor$selection3;
+
+  var _getNodeEntryFromSele2 = getNodeEntryFromSelection(editor, [Contentful.BLOCKS.TABLE_CELL, Contentful.BLOCKS.TABLE_HEADER_CELL]),
+      tableCellNode = _getNodeEntryFromSele2[0],
+      path = _getNodeEntryFromSele2[1];
+
+  return !!tableCellNode && (!plateCommon.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 = slate.Node.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 (slate.Path.isCommon(path, editor.selection.focus.path)) {
+      continue;
+    }
+
+    return node;
+  }
+}
+function currentSelectionPrecedesTableCell(editor) {
+  var nextNode = getNextNode(editor);
+  return !!nextNode && Contentful.TABLE_BLOCKS.includes(nextNode.type) && isAtEndOfTextSelection(editor);
+}
 
 function deserializeLeaf(type, rules) {
   return function (editor) {
@@ -616,7 +651,7 @@ function getContentfulEditorId(sdk) {
 function useContentfulEditorHook(_ref) {
   var sdk = _ref.sdk;
   var editorId = getContentfulEditorId(sdk);
-  var editor = plateCore.useStoreEditorRef(editorId);
+  var editor = plateCore.usePlateEditorRef(editorId);
   return editor;
 }
 
@@ -658,8 +693,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, Contentful.BLOCKS.HR)) {
@@ -1075,8 +1109,7 @@ function withQuoteEvents(editor) {
 function ToolbarQuoteButton(props) {
   var editor = useContentfulEditor();
 
-  function handleOnClick(event) {
-    event.preventDefault();
+  function handleOnClick() {
     if (!editor) return;
     createBlockQuote(editor);
     Slate.ReactEditor.focus(editor);
@@ -1111,14 +1144,97 @@ var withQuoteOptions = (_withQuoteOptions = {}, _withQuoteOptions[Contentful.BLO
   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 = contentfulSlatejsAdapter.toContentfulDocument({
+    document: nodes,
+    schema: schema
+  });
+  return richTextPlainTextRenderer.documentToPlainTextString(contentfulNode);
+};
+
+var getListInsertFragment = function getListInsertFragment(editor) {
+  var insertFragment = editor.insertFragment;
+  var li = plateCore.getPlatePluginOptions(editor, plateList.ELEMENT_LI);
+  var ul = plateCore.getPlatePluginOptions(editor, plateList.ELEMENT_UL);
+  var ol = plateCore.getPlatePluginOptions(editor, plateList.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 = slate.Path.parent(entry[1]);
+
+    while (slate.Node.get(root, ancestor).type !== type) {
+      ancestor = slate.Path.parent(ancestor);
+    }
+
+    return [slate.Node.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(slate.Node.texts(listRoot));
+    var commonAncestorEntry = textEntries.reduce(function (commonAncestor, textEntry) {
+      return slate.Path.isAncestor(commonAncestor[1], textEntry[1]) ? commonAncestor : slate.Node.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 = plateCommon.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 slate.Transforms.insertNodes(editor, [{
+        text: text
+      }], {
+        at: editor.selection || slate.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)) {
@@ -1171,18 +1287,34 @@ var withListOptions = (_withListOptions = {}, _withListOptions[plateList.ELEMENT
   type: Contentful.BLOCKS.OL_LIST,
   component: OL
 }, _withListOptions);
+
+var withCustomList = function withCustomList(options) {
+  var withDefaultOverrides = plateList.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 plateList.createListPlugin({
+  var options = {
     validLiChildrenTypes: Contentful.LIST_ITEM_BLOCKS
-  });
+  };
+  var plugin = plateList.createListPlugin(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;
     plateCommon.toggleMark(editor, Contentful.MARKS.BOLD);
     Slate.ReactEditor.focus(editor);
@@ -1240,8 +1372,7 @@ var _withCodeOptions;
 function ToolbarCodeButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick(event) {
-    event.preventDefault();
+  function handleClick() {
     if (!(editor != null && editor.selection)) return;
     plateCommon.toggleMark(editor, Contentful.MARKS.CODE);
     Slate.ReactEditor.focus(editor);
@@ -1292,8 +1423,7 @@ var _withItalicOptions;
 function ToolbarItalicButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick(event) {
-    event.preventDefault();
+  function handleClick() {
     if (!(editor != null && editor.selection)) return;
     plateCommon.toggleMark(editor, Contentful.MARKS.ITALIC);
     Slate.ReactEditor.focus(editor);
@@ -1343,8 +1473,7 @@ var _withUnderlineOptions;
 function ToolbarUnderlineButton(props) {
   var editor = useContentfulEditor();
 
-  function handleClick(event) {
-    event.preventDefault();
+  function handleClick() {
     if (!(editor != null && editor.selection)) return;
     plateCommon.toggleMark(editor, Contentful.MARKS.UNDERLINE);
     Slate.ReactEditor.focus(editor);
@@ -3180,33 +3309,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();
           }
@@ -3703,7 +3830,19 @@ function createWithTableEvents(tracking) {
   return function withTableEvents(editor) {
     addTableTrackingEvents(editor, tracking);
     addTableNormalization(editor);
-    return plateTable.getTableOnKeyDown()(editor);
+    var handleKeyDownFromPlateUdecode = plateTable.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);
+    };
   };
 }
 
@@ -3747,31 +3886,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);
               Slate.ReactEditor.focus(editor);
 
-            case 6:
+            case 5:
             case "end":
               return _context.stop();
           }
@@ -3815,6 +3952,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__*/emotion.css({
     marginBottom: '1.25rem'
@@ -3850,9 +3997,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,
@@ -4259,7 +4411,7 @@ function FetchingWrappedInlineEntryCard(props) {
       key: "edit",
       onClick: props.onEdit
     }, "Edit"), /*#__PURE__*/React__default.createElement(f36Components.MenuItem, {
-      key: "edit",
+      key: "remove",
       onClick: props.onRemove,
       disabled: props.isDisabled,
       testId: "card-action-remove"
@@ -4325,9 +4477,14 @@ function EmbeddedEntityInline(props) {
 
   return /*#__PURE__*/React.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__*/React.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__*/React.createElement(FetchingWrappedInlineEntryCard, {
     sdk: sdk,
     entryId: entryId,
@@ -4449,6 +4606,7 @@ function createEmbeddedEntityInlinePlugin(sdk) {
     renderElement: plateCore.getRenderElement(Contentful.INLINES.EMBEDDED_ENTRY),
     pluginKeys: Contentful.INLINES.EMBEDDED_ENTRY,
     inlineTypes: plateCore.getPlatePluginTypes(Contentful.INLINES.EMBEDDED_ENTRY),
+    voidTypes: plateCore.getPlatePluginTypes(Contentful.INLINES.EMBEDDED_ENTRY),
     onKeyDown: getWithEmbeddedEntryInlineEvents(sdk),
     deserialize: function deserialize(editor) {
       var options = plateCore.getPlatePluginOptions(editor, Contentful.INLINES.EMBEDDED_ENTRY);
@@ -4501,6 +4659,7 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
   var isDisabled = _ref.isDisabled,
       canInsertBlocks = _ref.canInsertBlocks;
   var sdk = useSdkContext();
+  var editor = useContentfulEditor();
 
   var _useState = React.useState(false),
       isEmbedDropdownOpen = _useState[0],
@@ -4539,7 +4698,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, {
@@ -4846,6 +5005,8 @@ var createPastePlugin = function createPastePlugin() {
   };
 };
 
+var _excluded = ["element"];
+
 var _templateObject$6, _styles$2, _withParagraphOptions;
 var styles$m = (_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) {
@@ -4853,15 +5014,71 @@ function Paragraph(props) {
     className: styles$m[Contentful.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 = [plateParagraph.ELEMENT_PARAGRAPH, Contentful.BLOCKS.PARAGRAPH];
+  var deserializer = deserializeElement(Contentful.BLOCKS.PARAGRAPH, [{
+    nodeNames: ['P', 'DIV']
+  }]);
   return {
     renderElement: plateCore.getRenderElement(elementKeys),
     pluginKeys: elementKeys,
     onKeyDown: plateCommon.getToggleElementOnKeyDown(Contentful.BLOCKS.PARAGRAPH),
-    deserialize: deserializeElement(Contentful.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 (slate.Element.isElement(node) && node.type === Contentful.BLOCKS.PARAGRAPH) {
+          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.Element.isElement(child) && !editor.isInline(child)) {
+              slate.Transforms.unwrapNodes(editor, {
+                at: childPath
+              });
+              return;
+            }
+          }
+        } // Fall back to the original `normalizeNode` to enforce other constraints.
+
+
+        normalizeNode(entry);
+      };
+
+      return editor;
+    }
   };
 }
 var withParagraphOptions = (_withParagraphOptions = {}, _withParagraphOptions[plateParagraph.ELEMENT_PARAGRAPH] = {
@@ -4905,6 +5122,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 plateBreak.createExitBreakPlugin(optionsExitBreakPlugin);
@@ -5010,19 +5236,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[Contentful.BLOCKS.TABLE] = slate.Transforms.removeNodes, _DND_BLOCKED_ELEMENTS[Contentful.BLOCKS.QUOTE] = slate.Transforms.liftNodes, _DND_BLOCKED_ELEMENTS);
+  var DRAGGABLE_TYPES = [Contentful.BLOCKS.EMBEDDED_ENTRY, Contentful.BLOCKS.EMBEDDED_ASSET, Contentful.INLINES.EMBEDDED_ENTRY];
+  /**
+   * HTML node names where dropping should be allowed
+   * Usually for elements where `Transforms.removeNodes` is needed
+   * TODO: looking up for html nodes is not the best solution and it won't scale but it works fine for our current cases/elements
+   */
+
+  var ON_DROP_ALLOWED_TYPES = {
+    TABLE: [Contentful.INLINES.EMBEDDED_ENTRY]
+  };
+  return {
+    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 (slate.Node.isNode(node) && nodeType === blockedElementType) {
+            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];
+              var childType = child.type;
+              if (!Contentful.CONTAINERS[blockedElementType]) return;
+
+              if (!Contentful.CONTAINERS[blockedElementType].includes(childType)) {
+                var callback = DND_BLOCKED_ELEMENTS[blockedElementType];
+                callback(editor, {
+                  at: childPath,
+                  match: function match(matchNode) {
+                    return slate.Node.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(plateCommon.getNodes(editor, {
+          match: function match(node) {
+            return slate.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
   plateCore.createReactPlugin(), plateCore.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([plateHtmlSerializer.createDeserializeHTMLPlugin({
     plugins: plugins
+  }), plateAstSerializer.createDeserializeAstPlugin({
+    plugins: plugins
   })]);
 };
 
@@ -5079,7 +5394,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 = React.useCallback(function (value) {
     return !value || deepEquals(value, Contentful.EMPTY_DOCUMENT);