@atlaskit/editor-plugin-block-controls 2.9.0 → 2.10.1

package/dist/es2019/pm-plugins/{decorations.js → decorations-drop-target.js}

@@ -1,29 +1,23 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
-import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
-import uuid from 'uuid';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
-import { DragHandle } from '../ui/drag-handle';
 import { DropTarget } from '../ui/drop-target';
 import { DropTargetV2, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target-v2';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { canMoveNodeToIndex } from '../utils/validation';
+import { getNestedDepth, TYPE_DROP_TARGET_DEC, unmountDecorations } from './decorations-common';
 const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
-const IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 const PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
-export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
-export const TYPE_HANDLE_DEC = 'drag-handle';
-export const TYPE_NODE_DEC = 'node-decoration';
-const getNestedDepth = () => editorExperiment('nested-dnd', true) ? 100 : 0;
-export const getNodeAnchor = node => {
-  const handleId = ObjHash.getForNode(node);
-  return `--node-anchor-${node.type.name}-${handleId}`;
+const shouldDescend = node => {
+  if (fg('platform_editor_drag_and_drop_target_v2')) {
+    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
+  }
+  return true;
 };
 const getNodeMargins = node => {
   if (!node) {
@@ -68,12 +62,6 @@ const getGapAndOffset = (prevNode, nextNode, parentNode) => {
     offset
   };
 };
-const shouldDescend = node => {
-  if (fg('platform_editor_drag_and_drop_target_v2')) {
-    return !['mediaSingle', 'paragraph', 'heading'].includes(node.type.name);
-  }
-  return true;
-};
 
 /**
  * Find drop target decorations in the pos range between from and to
@@ -85,37 +73,6 @@ const shouldDescend = node => {
 export const findDropTargetDecs = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_DROP_TARGET_DEC);
 };
-export const findHandleDec = (decorations, from, to) => {
-  return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
-};
-
-/**
- * Find node decorations in the pos range between from and to (non-inclusive)
- * @param decorations
- * @param from
- * @param to
- * @returns
- */
-export const findNodeDecs = (decorations, from, to) => {
-  let newfrom = from;
-  let newTo = to;
-
-  // make it non-inclusive
-  if (newfrom !== undefined) {
-    newfrom++;
-  }
-
-  // make it non-inclusive
-  if (newTo !== undefined) {
-    newTo--;
-  }
-
-  // return empty array if range reversed
-  if (newfrom !== undefined && newTo !== undefined && newfrom > newTo) {
-    return new Array();
-  }
-  return decorations.find(newfrom, newTo, spec => spec.type === TYPE_NODE_DEC);
-};
 export const createDropTargetDecoration = (pos, props, side, anchorRectCache) => {
   return Decoration.widget(pos, (_, getPos) => {
     const element = document.createElement('div');
@@ -244,147 +201,4 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
     }, undefined, anchorRectCache));
   }
   return decs;
-};
-export const emptyParagraphNodeDecorations = () => {
-  const anchorName = `--node-anchor-paragraph-0`;
-  const style = `anchor-name: ${anchorName}; margin-top: 0px;`;
-  return Decoration.node(0, 2, {
-    style,
-    ['data-drag-handler-anchor-name']: anchorName
-  }, {
-    type: TYPE_NODE_DEC
-  });
-};
-class ObjHash {
-  static getForNode(node) {
-    if (this.caching.has(node)) {
-      return this.caching.get(node);
-    }
-    const uniqueId = uuid();
-    this.caching.set(node, uniqueId);
-    return uniqueId;
-  }
-}
-_defineProperty(ObjHash, "caching", new WeakMap());
-const shouldIgnoreNode = node => {
-  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
-    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
-      return true;
-    }
-  }
-  return IGNORE_NODES.includes(node.type.name);
-};
-export const shouldDescendIntoNode = node => {
-  // Optimisation to avoid drawing node decorations for empty table cells
-  if (['tableCell', 'tableHeader'].includes(node.type.name) && !editorExperiment('table-nested-dnd', true) && fg('platform_editor_element_dnd_nested_fix_patch_3')) {
-    var _node$firstChild;
-    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
-      return false;
-    }
-  }
-  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
-};
-export const nodeDecorations = (newState, from, to) => {
-  const decs = [];
-  const docFrom = from === undefined || from < 0 ? 0 : from;
-  const docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
-  newState.doc.nodesBetween(docFrom, docTo, (node, pos, _parent, index) => {
-    let depth = 0;
-    let anchorName;
-    const shouldDescend = shouldDescendIntoNode(node);
-    const handleId = ObjHash.getForNode(node);
-    anchorName = `--node-anchor-${node.type.name}-${handleId}`;
-    if (editorExperiment('nested-dnd', true)) {
-      var _anchorName;
-      // Doesn't descend into a node
-      if (node.isInline) {
-        return false;
-      }
-      if (shouldIgnoreNode(node)) {
-        return shouldDescend; //skip over, don't consider it a valid depth
-      }
-      depth = newState.doc.resolve(pos).depth;
-      anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : `--node-anchor-${node.type.name}-${pos}`;
-    } else {
-      var _anchorName2;
-      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : `--node-anchor-${node.type.name}-${index}`;
-    }
-    decs.push(Decoration.node(pos, pos + node.nodeSize, {
-      style: `anchor-name: ${anchorName}; ${pos === 0 ? 'margin-top: 0px;' : ''}; position: relative; z-index: 1;`,
-      ['data-drag-handler-anchor-name']: anchorName,
-      ['data-drag-handler-node-type']: node.type.name,
-      ['data-drag-handler-anchor-depth']: `${depth}`
-    }, {
-      type: TYPE_NODE_DEC,
-      anchorName,
-      nodeType: node.type.name
-    }));
-    return shouldDescend && depth < getNestedDepth();
-  });
-  return decs;
-};
-export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeType, handleOptions) => {
-  unmountDecorations('data-blocks-drag-handle-container');
-  let unbind;
-  return Decoration.widget(pos, (view, getPos) => {
-    const element = document.createElement('span');
-    // Need to set it to inline to avoid text being split when merging two paragraphs
-    // platform_editor_element_dnd_nested_fix_patch_2 -> inline decoration causes focus issues when refocusing Editor into first line
-    element.style.display = fg('platform_editor_element_dnd_nested_fix_patch_2') ? 'block' : 'inline';
-    element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
-    element.setAttribute('data-blocks-drag-handle-container', 'true');
-    let isTopLevelNode = true;
-    if (editorExperiment('nested-dnd', true)) {
-      const newPos = fg('platform_editor_element_dnd_nested_fix_patch_3') ? getPos() : pos;
-      if (typeof newPos === 'number') {
-        const $pos = view.state.doc.resolve(newPos);
-        isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
-      }
-      /*
-       * We disable mouseover event to fix flickering issue on hover
-       * However, the tooltip for nested drag handle is no long working.
-       */
-      if (newPos === undefined || !isTopLevelNode) {
-        // This will also hide the tooltip.
-        unbind = bind(element, {
-          type: 'mouseover',
-          listener: e => {
-            e.stopPropagation();
-          }
-        });
-      }
-    }
-
-    // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
-    // due to margins applied to other nodes eg. Headings
-    element.style.clear = 'unset';
-    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
-      view,
-      api,
-      formatMessage,
-      getPos,
-      anchorName,
-      nodeType,
-      handleOptions,
-      isTopLevelNode
-    }), element);
-    return element;
-  }, {
-    side: -1,
-    type: TYPE_HANDLE_DEC,
-    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
-    destroy: () => {
-      if (editorExperiment('nested-dnd', true)) {
-        unbind && unbind();
-      }
-    }
-  });
-};
-const unmountDecorations = selector => {
-  // Removing decorations manually instead of using native destroy function in prosemirror API
-  // as it was more responsive and causes less re-rendering
-  const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
-  decorationsToRemove.forEach(el => {
-    ReactDOM.unmountComponentAtNode(el);
-  });
 };

package/dist/es2019/pm-plugins/main.js

@@ -14,7 +14,9 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { AnchorRectCache, isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { getTrMetadata } from '../utils/transactions';
-import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, findDropTargetDecs, findHandleDec, findNodeDecs, nodeDecorations } from './decorations';
+import { findNodeDecs, nodeDecorations } from './decorations-anchor';
+import { dragHandleDecoration, emptyParagraphNodeDecorations, findHandleDec } from './decorations-drag-handle';
+import { dropTargetDecorations, findDropTargetDecs } from './decorations-drop-target';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 export const key = new PluginKey('blockControls');

package/dist/es2019/ui/drop-target-v2.js

@@ -12,7 +12,7 @@ import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indi
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { getNodeAnchor } from '../pm-plugins/decorations';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 import { shouldAllowInlineDropTarget } from '../utils/inline-drop-target';

package/dist/es2019/ui/inline-drop-target.js

@@ -11,19 +11,17 @@ import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { getNodeAnchor } from '../pm-plugins/decorations';
+import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { isAnchorSupported } from '../utils/anchor-utils';
+import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
 const dropTargetCommonStyle = css({
   position: 'absolute',
   display: 'block'
 });
-const hideDropTargetStyle = css({
-  display: 'none'
-});
 const hoverZoneCommonStyle = css({
   position: 'absolute',
-  // same value as block hover zone
-  zIndex: 110
+  // above the top and bottom drop zone as block hover zone
+  zIndex: 120
 });
 
 // gap between node boundary and drop indicator/drop zone
@@ -31,6 +29,60 @@ const GAP = 4;
 const HOVER_ZONE_WIDTH_OFFSET = 40;
 const HOVER_ZONE_HEIGHT_OFFSET = 10;
 const HOVER_ZONE_DEFAULT_WIDTH = 40;
+const getDropTargetPositionOverride = (node, editorWidth) => {
+  if (!node || !editorWidth) {
+    return {
+      left: 0,
+      right: 0
+    };
+  }
+  const getOffsets = nodeWidth => {
+    const offset = (editorWidth - nodeWidth) / 2;
+    return {
+      left: offset,
+      right: offset
+    };
+  };
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'table' && node.attrs.width) {
+    return getOffsets(node.attrs.width);
+  }
+
+  // media single 🤦
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'mediaSingle') {
+    let mediaNodeWidth = 0;
+    if (node.attrs.width) {
+      if (node.attrs.widthType === 'pixel') {
+        mediaNodeWidth = node.attrs.width;
+      } else if (editorWidth) {
+        mediaNodeWidth = node.attrs.width / 100 * editorWidth;
+      }
+    } else {
+      // use media width
+      const mediaNode = node.firstChild;
+      if (mediaNode && mediaNode.attrs.width) {
+        mediaNodeWidth = mediaNode.attrs.width;
+      }
+    }
+    if (mediaNodeWidth) {
+      if (node.attrs.layout === 'align-start') {
+        return {
+          left: 0,
+          right: editorWidth - mediaNodeWidth
+        };
+      } else if (node.attrs.layout === 'align-end') {
+        return {
+          left: editorWidth - mediaNodeWidth,
+          right: 0
+        };
+      }
+      return getOffsets(mediaNodeWidth);
+    }
+  }
+  return {
+    left: 0,
+    right: 0
+  };
+};
 export const InlineDropTarget = ({
   api,
   nextNode,
@@ -49,22 +101,25 @@ export const InlineDropTarget = ({
   const handleDragLeave = useCallback(() => {
     setIsDraggedOver(false);
   }, []);
+  const offsets = useMemo(() => {
+    return getDropTargetPositionOverride(nextNode, widthState === null || widthState === void 0 ? void 0 : widthState.lineLength);
+  }, [nextNode, widthState]);
   const dropTargetRectStyle = useMemo(() => {
     if (isAnchorSupported()) {
       return css({
         height: `calc(anchor-size(${anchorName} height))`,
         positionAnchor: anchorName,
-        left: position === 'left' ? `calc(anchor(left) - ${GAP}px)` : `calc(anchor(right) + ${GAP}px)`,
+        left: position === 'left' ? `calc(anchor(left) - ${GAP - offsets.left}px)` : `calc(anchor(right) + ${GAP - offsets.right}px)`,
         top: `calc(anchor(top))`
       });
     }
     const nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
     return css({
       height: `calc(${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.height) || 0}px)`,
-      left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP}px`,
+      left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - GAP + offsets.left}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offsets.right}px`,
       top: `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0}px`
     });
-  }, [anchorName, anchorRectCache, position]);
+  }, [anchorName, anchorRectCache, offsets.left, offsets.right, position]);
   const onDrop = useCallback(() => {
     var _api$blockControls;
     const {
@@ -84,8 +139,8 @@ export const InlineDropTarget = ({
   }, [api, getPos, position]);
   return jsx(Fragment, null, jsx("div", {
     "data-test-id": `block-ctrl-drop-target-${position}`,
-    css: [dropTargetCommonStyle, dropTargetRectStyle, !isDraggedOver && hideDropTargetStyle]
-  }, jsx(DropIndicator, {
+    css: [dropTargetCommonStyle, dropTargetRectStyle]
+  }, (isDraggedOver || isBlocksDragTargetDebug()) && jsx(DropIndicator, {
     edge: position
   })), jsx(InlineHoverZone, {
     position: position,
@@ -94,7 +149,8 @@ export const InlineDropTarget = ({
     anchorRectCache: anchorRectCache,
     onDragEnter: handleDragEnter,
     onDragLeave: handleDragLeave,
-    onDrop: onDrop
+    onDrop: onDrop,
+    offsets: offsets
   }));
 };
 export const InlineHoverZone = ({
@@ -102,6 +158,7 @@ export const InlineHoverZone = ({
   editorWidthState,
   anchorRectCache,
   position,
+  offsets,
   onDragEnter,
   onDragLeave,
   onDrop
@@ -122,27 +179,29 @@ export const InlineHoverZone = ({
     }
   }, [onDragEnter, onDragLeave, onDrop]);
   const inlineHoverZoneRectStyle = useMemo(() => {
+    const offset = offsets[position];
     if (isAnchorSupported()) {
       return css({
         positionAnchor: anchorName,
-        left: position === 'left' ? 'unset' : `calc(anchor(right) + ${GAP}px)`,
-        right: position === 'left' ? `calc(anchor(left) + ${GAP}px)` : 'unset',
+        left: position === 'left' ? 'unset' : `calc(anchor(right) + ${GAP - offset}px)`,
+        right: position === 'left' ? `calc(anchor(left) + ${GAP - offset}px)` : 'unset',
         top: `calc(anchor(top))`,
-        width: editorWith ? `calc((${editorWith}px - anchor-size(${anchorName} width))/2 - ${HOVER_ZONE_WIDTH_OFFSET}px)` : `${HOVER_ZONE_DEFAULT_WIDTH}px`,
+        width: editorWith ? `calc((${editorWith}px - anchor-size(${anchorName} width))/2 - ${HOVER_ZONE_WIDTH_OFFSET}px + ${offset}px)` : `${HOVER_ZONE_DEFAULT_WIDTH}px`,
         height: `calc(anchor-size(${anchorName} height))`
       });
     }
     const nodeRect = anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getRect(anchorName);
-    const width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET : HOVER_ZONE_DEFAULT_WIDTH;
+    const width = editorWith ? (editorWith - ((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.width) || 0)) / 2 - HOVER_ZONE_WIDTH_OFFSET + offset : HOVER_ZONE_DEFAULT_WIDTH;
     return css({
-      left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP}px`,
+      left: position === 'left' ? `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.left) || 0) - width - GAP + offset}px` : `${((nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.right) || 0) + GAP - offset}px`,
       top: `${(nodeRect === null || nodeRect === void 0 ? void 0 : nodeRect.top) || 0}px`,
       width: `${width}px`,
       height: `calc(${(anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0}px - ${HOVER_ZONE_HEIGHT_OFFSET}px)`
     });
-  }, [anchorName, anchorRectCache, editorWith, position]);
+  }, [anchorName, anchorRectCache, editorWith, offsets, position]);
   return jsx("div", {
     ref: ref,
+    "data-test-id": `drop-target-hover-zone-${position}`,
     css: [hoverZoneCommonStyle, inlineHoverZoneRectStyle]
   });
 };

package/dist/es2019/utils/check-media-layout.js

@@ -0,0 +1,8 @@
+export const isWrappedMedia = node => {
+  if ('mediaSingle' === (node === null || node === void 0 ? void 0 : node.type.name)) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return false;
+};

package/dist/es2019/utils/inline-drop-target.js

@@ -1,10 +1,14 @@
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
 import { isPreRelease1 } from './advanced-layouts-flags';
+import { isWrappedMedia } from './check-media-layout';
 export const shouldAllowInlineDropTarget = (isNested, node) => {
   if (!isPreRelease1() || isNested) {
     return false;
   }
+  if (isWrappedMedia(node)) {
+    return false;
+  }
   if ((node === null || node === void 0 ? void 0 : node.type.name) === 'layoutSection') {
     return node.childCount < MAX_LAYOUT_COLUMN_SUPPORTED;
   }

package/dist/esm/commands/move-to-layout.js

@@ -1,4 +1,5 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { MAX_LAYOUT_COLUMN_SUPPORTED } from '../consts';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 var createNewLayout = function createNewLayout(schema, layoutContents) {
@@ -68,13 +69,25 @@ export var moveToLayout = function moveToLayout(api) {
       if ($to.nodeAfter.type === layoutSection) {
         var existingLayoutNode = $to.nodeAfter;
         if (existingLayoutNode.childCount < MAX_LAYOUT_COLUMN_SUPPORTED) {
+          var newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[existingLayoutNode.childCount + 1];
+          if (newColumnWidth) {
+            existingLayoutNode.content.forEach(function (node, offset) {
+              if (node.type === layoutColumn) {
+                tr = tr.setNodeAttribute(to + offset + 1, 'width', newColumnWidth);
+              }
+            });
+          }
           var toPos = position === 'left' ? to + 1 : to + existingLayoutNode.nodeSize - 1;
           tr = tr.insert(toPos,
           // resolve again the source node after node updated (remove breakout marks)
-          layoutColumn.create(null, tr.doc.resolve(from).nodeAfter));
+          layoutColumn.create({
+            width: newColumnWidth
+          }, tr.doc.resolve(from).nodeAfter));
+          tr = tr.setSelection(new NodeSelection(tr.doc.resolve(toPos)));
           var mappedFrom = tr.mapping.map(from);
           var mappedFromEnd = mappedFrom + fromNode.nodeSize;
           tr = tr.delete(mappedFrom, mappedFromEnd);
+          tr = tr.scrollIntoView();
           return tr;
         }
         return tr;
@@ -91,6 +104,8 @@ export var moveToLayout = function moveToLayout(api) {
           var mappedTo = tr.mapping.map(to);
           tr = tr.delete(mappedTo, mappedTo + toNode.nodeSize);
           tr = tr.insert(mappedTo, newLayout); // insert the content at the new position
+          tr = tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo)));
+          tr = tr.scrollIntoView();
         }
         return tr;
       }

package/dist/esm/pm-plugins/decorations-anchor.js

@@ -0,0 +1,92 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getNestedDepth, getNodeAnchor, TYPE_NODE_DEC } from './decorations-common';
+var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'listItem', 'caption'];
+var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
+export var shouldDescendIntoNode = function shouldDescendIntoNode(node) {
+  // Optimisation to avoid drawing node decorations for empty table cells
+  if (['tableCell', 'tableHeader'].includes(node.type.name) && !editorExperiment('table-nested-dnd', true) && fg('platform_editor_element_dnd_nested_fix_patch_3')) {
+    var _node$firstChild;
+    if (node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type.name) === 'paragraph') {
+      return false;
+    }
+  }
+  return !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
+};
+var shouldIgnoreNode = function shouldIgnoreNode(node) {
+  // TODO use isWrappedMedia when clean up the featue flag
+  if ('mediaSingle' === node.type.name && fg('platform_editor_element_dnd_nested_fix_patch_1')) {
+    if (['wrap-right', 'wrap-left'].includes(node.attrs.layout)) {
+      return true;
+    }
+  }
+  return IGNORE_NODES.includes(node.type.name);
+};
+
+/**
+ * Find node decorations in the pos range between from and to (non-inclusive)
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export var findNodeDecs = function findNodeDecs(decorations, from, to) {
+  var newfrom = from;
+  var newTo = to;
+
+  // make it non-inclusive
+  if (newfrom !== undefined) {
+    newfrom++;
+  }
+
+  // make it non-inclusive
+  if (newTo !== undefined) {
+    newTo--;
+  }
+
+  // return empty array if range reversed
+  if (newfrom !== undefined && newTo !== undefined && newfrom > newTo) {
+    return new Array();
+  }
+  return decorations.find(newfrom, newTo, function (spec) {
+    return spec.type === TYPE_NODE_DEC;
+  });
+};
+export var nodeDecorations = function nodeDecorations(newState, from, to) {
+  var decs = [];
+  var docFrom = from === undefined || from < 0 ? 0 : from;
+  var docTo = to === undefined || to > newState.doc.nodeSize - 2 ? newState.doc.nodeSize - 2 : to;
+  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, _parent, index) {
+    var _Decoration$node;
+    var depth = 0;
+    var anchorName;
+    var shouldDescend = shouldDescendIntoNode(node);
+    anchorName = getNodeAnchor(node);
+    if (editorExperiment('nested-dnd', true)) {
+      var _anchorName;
+      // Doesn't descend into a node
+      if (node.isInline) {
+        return false;
+      }
+      if (shouldIgnoreNode(node)) {
+        return shouldDescend; //skip over, don't consider it a valid depth
+      }
+      depth = newState.doc.resolve(pos).depth;
+      anchorName = (_anchorName = anchorName) !== null && _anchorName !== void 0 ? _anchorName : "--node-anchor-".concat(node.type.name, "-").concat(pos);
+    } else {
+      var _anchorName2;
+      anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
+    }
+    decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
+      style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
+    }, _defineProperty(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node, 'data-drag-handler-node-type', node.type.name), _defineProperty(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
+      type: TYPE_NODE_DEC,
+      anchorName: anchorName,
+      nodeType: node.type.name
+    }));
+    return shouldDescend && depth < getNestedDepth();
+  });
+  return decs;
+};

package/dist/esm/pm-plugins/decorations-common.js

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import ReactDOM from 'react-dom';
+import uuid from 'uuid';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
+export var TYPE_HANDLE_DEC = 'drag-handle';
+export var TYPE_NODE_DEC = 'node-decoration';
+export var getNestedDepth = function getNestedDepth() {
+  return editorExperiment('nested-dnd', true) ? 100 : 0;
+};
+export var getNodeAnchor = function getNodeAnchor(node) {
+  var handleId = ObjHash.getForNode(node);
+  return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
+};
+var ObjHash = /*#__PURE__*/function () {
+  function ObjHash() {
+    _classCallCheck(this, ObjHash);
+  }
+  _createClass(ObjHash, null, [{
+    key: "getForNode",
+    value: function getForNode(node) {
+      if (this.caching.has(node)) {
+        return this.caching.get(node);
+      }
+      var uniqueId = uuid();
+      this.caching.set(node, uniqueId);
+      return uniqueId;
+    }
+  }]);
+  return ObjHash;
+}();
+_defineProperty(ObjHash, "caching", new WeakMap());
+export var unmountDecorations = function unmountDecorations(selector) {
+  // Removing decorations manually instead of using native destroy function in prosemirror API
+  // as it was more responsive and causes less re-rendering
+  var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
+  decorationsToRemove.forEach(function (el) {
+    ReactDOM.unmountComponentAtNode(el);
+  });
+};