@atlaskit/editor-plugin-block-controls 2.4.1 → 2.6.0

package/dist/cjs/ui/drag-handle.js

@@ -10,7 +10,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
-var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
@@ -69,14 +68,14 @@ var selectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
-var DragHandleInternal = function DragHandleInternal(_ref) {
+var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var _api$core2, _api$analytics2, _api$core4, _api$core6;
   var view = _ref.view,
     api = _ref.api,
+    formatMessage = _ref.formatMessage,
     getPos = _ref.getPos,
     anchorName = _ref.anchorName,
     nodeType = _ref.nodeType,
-    formatMessage = _ref.intl.formatMessage,
     handleOptions = _ref.handleOptions,
     _ref$isTopLevelNode = _ref.isTopLevelNode,
     isTopLevelNode = _ref$isTopLevelNode === void 0 ? true : _ref$isTopLevelNode;
@@ -377,7 +376,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     keymap: _keymaps.dragToMoveDown
   }];
   var isParentNodeOfTypeLayout;
-  if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+  if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && (0, _experiments.editorExperiment)('nested-dnd', true) && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
     isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve((0, _utils.getNestedNodePosition)(view.state)).node().type.name === 'layoutColumn';
     if (isParentNodeOfTypeLayout) {
       helpDescriptors = [].concat((0, _toConsumableArray2.default)(helpDescriptors), [{
@@ -424,5 +423,4 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
       });
     }
   }, renderButton()) : renderButton();
-};
-var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleInternal);
+};

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

@@ -62,15 +62,28 @@ var nestedDropZoneStyle = (0, _react2.css)({
   width: 'unset'
 });
 var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
+var fullHeightStyle = (0, _react2.css)({
+  top: '4px',
+  bottom: '4px',
+  height: 'unset',
+  zIndex: 10
+});
+
+// This z index is used in container like layout
+var fullHeightStyleAdjustZIndexStyle = (0, _react2.css)({
+  zIndex: 0
+});
 var HoverZone = function HoverZone(_ref) {
   var onDragEnter = _ref.onDragEnter,
     onDragLeave = _ref.onDragLeave,
     onDrop = _ref.onDrop,
     node = _ref.node,
+    parent = _ref.parent,
     editorWidth = _ref.editorWidth,
     anchorHeightsCache = _ref.anchorHeightsCache,
     position = _ref.position,
-    isNestedDropTarget = _ref.isNestedDropTarget;
+    isNestedDropTarget = _ref.isNestedDropTarget,
+    dropTargetStyle = _ref.dropTargetStyle;
   var ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (ref.current) {
@@ -97,14 +110,23 @@ var HoverZone = function HoverZone(_ref) {
       maxWidth: "".concat(editorWidth || 0, "px")
     });
   }, [anchorHeightsCache, editorWidth, node, position]);
+  var isFullHeight = (0, _react.useMemo)(function () {
+    return dropTargetStyle === 'fullHeight';
+  }, [dropTargetStyle]);
+  var isFullHeightInLayout = (0, _react.useMemo)(function () {
+    return isFullHeight && (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'layoutColumn';
+  }, [isFullHeight, parent === null || parent === void 0 ? void 0 : parent.type.name]);
   return (0, _react2.jsx)("div", {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: "drop-target-hover-zone-".concat(position)
+    className: "drop-target-hover-zone-".concat(position),
+    "data-testid": "drop-target-zone-".concat(position)
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
-    css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle, hoverZoneUpperStyle]
+    css: [dropZoneStyles, isNestedDropTarget && nestedDropZoneStyle,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    hoverZoneUpperStyle, isFullHeight && fullHeightStyle, isFullHeightInLayout && fullHeightStyleAdjustZIndexStyle]
   });
 };
 var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(_ref2) {
@@ -115,7 +137,8 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(_ref2) {
     nextNode = _ref2.nextNode,
     parentNode = _ref2.parentNode,
     formatMessage = _ref2.formatMessage,
-    anchorHeightsCache = _ref2.anchorHeightsCache;
+    anchorHeightsCache = _ref2.anchorHeightsCache,
+    dropTargetStyle = _ref2.dropTargetStyle;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDraggedOver = _useState2[0],
@@ -137,10 +160,11 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(_ref2) {
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveNode(start, pos, undefined, formatMessage));
     }
   };
+  var isFullHeight = dropTargetStyle === 'fullHeight';
   var dynamicStyle = (_dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%'
   }, (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH, isNestedDropTarget ? '100%' : "".concat((widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH, "px")), (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN, isNestedDropTarget ? (0, _consts.getNestedNodeLeftPaddingMargin)(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0'), (0, _defineProperty2.default)(_dynamicStyle, EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX, (0, _experiments.editorExperiment)('nested-dnd', true) ? _constants.layers.navigation() : _constants.layers.card()), _dynamicStyle);
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(HoverZone, {
+  return (0, _react2.jsx)(_react.Fragment, null, !isFullHeight && (0, _react2.jsx)(HoverZone, {
     onDragEnter: function onDragEnter() {
       return setIsDraggedOver(true);
     },
@@ -176,9 +200,11 @@ var DropTargetV2 = exports.DropTargetV2 = function DropTargetV2(_ref2) {
     },
     onDrop: onDrop,
     node: nextNode,
+    parent: parentNode,
     editorWidth: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
     anchorHeightsCache: anchorHeightsCache,
     position: "lower",
-    isNestedDropTarget: isNestedDropTarget
+    isNestedDropTarget: isNestedDropTarget,
+    dropTargetStyle: dropTargetStyle
   }));
 };

package/dist/cjs/ui/drop-target.js

@@ -120,6 +120,8 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref3) {
       return;
     }
 
+    // This should be moved to platform/packages/editor/editor-plugin-block-controls/src/utils/validation.ts
+    // Since we are moved to drop-target-v2
     // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
     if ((0, _experiments.editorExperiment)('nest-media-and-codeblock-in-quote', false)) {
       var _api$blockControls;

package/dist/cjs/ui/global-styles.js

@@ -128,18 +128,12 @@ var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":firs
 var withInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, withInlineNodeStyleWithChromeFixSelectors, {
   transform: 'scale(0)'
 }));
-var globalStyles = (0, _experiments.editorExperiment)('nested-dnd', true) ? (0, _react.css)({
+var globalStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"])': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
   }
-}) : (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror-widget:first-child + *': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-    marginTop: '0 !important'
-  }
 });
 var withDividerInPanelStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles

package/dist/cjs/utils/transactions.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isStepText = exports.isStepDelete = exports.getTrMetadata = void 0;
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+/**
+ * Checks if step adds inline char
+ * @param s
+ * @returns True if step adds inline char
+ */
+var isStepText = exports.isStepText = function isStepText(s) {
+  var content = s.slice.content.firstChild;
+  return s.from === s.to && s.slice.content.childCount === 1 && !!content && !!content.text;
+};
+
+/**
+ * Checks if step is an inline delete/backspace (replace range from -> from + 1 with empty content)
+ * @param s
+ * @returns True if delete/backspace
+ */
+var isStepDelete = exports.isStepDelete = function isStepDelete(s) {
+  var content = s.slice.content;
+  return s.to === s.from + 1 && content.size === 0;
+};
+
+/**
+ * Get metadata from the transaction.
+ * @param tr
+ * @returns Min 'from', max 'to' (from + slice size). If no steps, returns pos range of entire doc.
+ * Number of ReplaceStep and ReplaceAroundStep steps 'numReplaceSteps'.
+ * 'isAllText' if all steps are represent adding inline text or a backspace/delete or no-op
+ */
+var getTrMetadata = exports.getTrMetadata = function getTrMetadata(tr) {
+  var from;
+  var to;
+  var numReplaceSteps = 0;
+  var isAllText = true;
+  tr.steps.forEach(function (s) {
+    if (s instanceof _transform.ReplaceStep || s instanceof _transform.ReplaceAroundStep) {
+      if (s instanceof _transform.ReplaceAroundStep || s instanceof _transform.ReplaceStep && !isStepText(s) && !isStepDelete(s)) {
+        isAllText = false;
+      }
+      var $to = s.from + s.slice.size;
+      from = from === undefined || from > s.from ? s.from : from;
+      to = to === undefined || to < $to ? $to : to;
+      numReplaceSteps++;
+    }
+  });
+  if (from === undefined) {
+    from = 0;
+  }
+  if (to === undefined || to > tr.doc.nodeSize - 2) {
+    to = tr.doc.nodeSize - 2;
+  }
+  return {
+    from: from,
+    to: to,
+    numReplaceSteps: numReplaceSteps,
+    isAllText: isAllText
+  };
+};

package/dist/cjs/utils/validation.js

@@ -8,6 +8,7 @@ exports.canMoveNodeToIndex = canMoveNodeToIndex;
 exports.transformSliceExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isExpand = exports.isDoc = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var isInsideTable = exports.isInsideTable = function isInsideTable(nodeType) {
   var _nodeType$schema$node = nodeType.schema.nodes,
     tableCell = _nodeType$schema$node.tableCell,
@@ -70,6 +71,22 @@ var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNes
 });
 function canMoveNodeToIndex(destParent, indexIntoParent, srcNode) {
   var srcNodeType = srcNode.type;
+  var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
+  var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
+
+  // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
+  if ((0, _experiments.editorExperiment)('nest-media-and-codeblock-in-quote', false)) {
+    if (parentNodeType === 'blockquote' && (activeNodeType === 'mediaGroup' || activeNodeType === 'mediaSingle' || activeNodeType === 'codeBlock')) {
+      return false;
+    }
+  }
+
+  // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
+  if ((0, _experiments.editorExperiment)('nested-expand-in-expand', false)) {
+    if (parentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
+      return false;
+    }
+  }
   if (isInsideTable(destParent.type) && isExpand(srcNodeType)) {
     if (memoizedTransformExpandToNestedExpand(srcNode)) {
       srcNodeType = srcNodeType.schema.nodes.nestedExpand;

package/dist/es2019/commands/move-node.js

@@ -65,7 +65,7 @@ const getCurrentNodePos = (state, isParentNodeOfTypeLayout) => {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node
     currentNodePos = selection.$from.before(1);
-    if (selection.$from.depth > 0 && fg('platform_editor_element_dnd_nested_a11y')) {
+    if (selection.$from.depth > 0 && editorExperiment('nested-dnd', true) && fg('platform_editor_element_dnd_nested_a11y')) {
       currentNodePos = getNestedNodePosition(state);
     }
   }
@@ -74,7 +74,8 @@ const getCurrentNodePos = (state, isParentNodeOfTypeLayout) => {
 export const moveNodeViaShortcut = (api, direction, formatMessage) => {
   return state => {
     let isParentNodeOfTypeLayout;
-    if (fg('platform_editor_element_dnd_nested_a11y')) {
+    const shouldEnableNestedDndA11y = editorExperiment('nested-dnd', true) && fg('platform_editor_element_dnd_nested_a11y');
+    if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
     const currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
@@ -83,7 +84,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
       const $pos = state.doc.resolve(currentNodePos);
       let moveToPos = -1;
       const nodeIndex = $pos.index();
-      if (direction === DIRECTION.LEFT && fg('platform_editor_element_dnd_nested_a11y')) {
+      if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
         if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
           return false;
         }
@@ -93,13 +94,13 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
         const grandParent = $pos.node($pos.depth - 1);
         const previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
         moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
-      } else if (direction === DIRECTION.RIGHT && fg('platform_editor_element_dnd_nested_a11y')) {
+      } else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
         if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
           return false;
         }
         moveToPos = $pos.after($pos.depth) + 1;
       } else if (direction === DIRECTION.UP) {
-        const nodeBefore = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.node($pos.depth) : $pos.nodeBefore;
+        const nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
         if (nodeBefore) {
           moveToPos = currentNodePos - nodeBefore.nodeSize;
         }
@@ -115,7 +116,7 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
       const nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
 
       // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
-      const shouldMoveNode = fg('platform_editor_element_dnd_nested_a11y') ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
+      const shouldMoveNode = shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
       if (shouldMoveNode) {
         var _api$core;
         api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({

package/dist/es2019/commands/show-drag-handle.js

@@ -1,5 +1,6 @@
 import { isInTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { key } from '../pm-plugins/main';
 import { getNestedNodePosition } from '../utils';
 export const showDragHandleAtSelection = (api, shouldFocusParentNode) => (state, _, view) => {
@@ -7,7 +8,7 @@ export const showDragHandleAtSelection = (api, shouldFocusParentNode) => (state,
     $from
   } = state.selection;
   let shouldFocusParentNode;
-  if ($from.depth > 1 && fg('platform_editor_element_dnd_nested_a11y')) {
+  if ($from.depth > 1 && editorExperiment('nested-dnd', true) && fg('platform_editor_element_dnd_nested_a11y')) {
     var _activeNode$handleOpt, _view$domAtPos;
     const {
       activeNode

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

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
 import ReactDOM from 'react-dom';
-import { RawIntlProvider } from 'react-intl-next';
 import uuid from 'uuid';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
@@ -18,6 +17,9 @@ const IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'l
 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);
@@ -66,6 +68,48 @@ const shouldDescend = node => {
   }
   return true;
 };
+
+/**
+ * Find drop target decorations in the pos range between from and to
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+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, anchorHeightsCache) => {
   return Decoration.widget(pos, (_, getPos) => {
     const element = document.createElement('div');
@@ -93,13 +137,16 @@ export const createDropTargetDecoration = (pos, props, side, anchorHeightsCache)
     }
     return element;
   }, {
-    type: 'drop-target-decoration',
+    type: TYPE_DROP_TARGET_DEC,
     side
   });
 };
-export const dropTargetDecorations = (newState, api, formatMessage, activeNode, anchorHeightsCache) => {
-  const decs = [];
+export const dropTargetDecorations = (newState, api, formatMessage, activeNode, anchorHeightsCache, from, to) => {
   unmountDecorations('data-blocks-drop-target-container');
+  const decs = [];
+  const POS_END_OF_DOC = newState.doc.nodeSize - 2;
+  const docFrom = from === undefined || from < 0 ? 0 : from;
+  const docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
   let prevNode;
   const activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   const activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
@@ -117,7 +164,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
     popNodeStack(depth);
     prevNodeStack.push(node);
   };
-  newState.doc.descendants((node, pos, parent, index) => {
+  newState.doc.nodesBetween(docFrom, docTo, (node, pos, parent, index) => {
     let depth = 0;
     // drop target deco at the end position
     let endPos;
@@ -155,19 +202,27 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
       }
     }
     const previousNode = fg('platform_editor_drag_and_drop_target_v2') ? popNodeStack(depth) : prevNode; // created scoped variable
+
+    // only table and layout need to render full height drop target
+    const isInSupportedContainer = fg('platform_editor_drag_and_drop_target_v2') && ['tableCell', 'tableHeader', 'layoutColumn'].includes((parent === null || parent === void 0 ? void 0 : parent.type.name) || '');
+
+    // container with only an empty paragrah
+    const shouldShowFullHeight = isInSupportedContainer && (parent === null || parent === void 0 ? void 0 : parent.lastChild) === node && (parent === null || parent === void 0 ? void 0 : parent.childCount) === 1 && isEmptyParagraph(node) && fg('platform_editor_drag_and_drop_target_v2');
     decs.push(createDropTargetDecoration(pos, {
       api,
       prevNode: previousNode,
       nextNode: node,
       parentNode: parent || undefined,
-      formatMessage
+      formatMessage,
+      dropTargetStyle: shouldShowFullHeight ? 'fullHeight' : 'default'
     }, -1, anchorHeightsCache));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api,
         prevNode: fg('platform_editor_drag_and_drop_target_v2') ? node : undefined,
         parentNode: parent || undefined,
-        formatMessage
+        formatMessage,
+        dropTargetStyle: isInSupportedContainer ? 'fullHeight' : 'default'
       }, -1, anchorHeightsCache));
     }
     if (fg('platform_editor_drag_and_drop_target_v2')) {
@@ -177,12 +232,14 @@ export const dropTargetDecorations = (newState, api, formatMessage, activeNode,
     }
     return depth < getNestedDepth() && shouldDescend(node);
   });
-  decs.push(createDropTargetDecoration(newState.doc.nodeSize - 2, {
-    api,
-    formatMessage,
-    prevNode: newState.doc.lastChild || undefined,
-    parentNode: newState.doc
-  }, undefined, anchorHeightsCache));
+  if (docTo === POS_END_OF_DOC) {
+    decs.push(createDropTargetDecoration(POS_END_OF_DOC, {
+      api,
+      formatMessage,
+      prevNode: newState.doc.lastChild || undefined,
+      parentNode: newState.doc
+    }, undefined, anchorHeightsCache));
+  }
   return decs;
 };
 export const emptyParagraphNodeDecorations = () => {
@@ -192,7 +249,7 @@ export const emptyParagraphNodeDecorations = () => {
     style,
     ['data-drag-handler-anchor-name']: anchorName
   }, {
-    type: 'node-decoration'
+    type: TYPE_NODE_DEC
   });
 };
 class ObjHash {
@@ -214,18 +271,16 @@ const shouldIgnoreNode = node => {
   }
   return IGNORE_NODES.includes(node.type.name);
 };
-export const nodeDecorations = newState => {
+export const nodeDecorations = (newState, from, to) => {
   const decs = [];
-  newState.doc.descendants((node, pos, _parent, index) => {
+  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 = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
-    if (editorExperiment('dnd-input-performance-optimisation', true, {
-      exposure: true
-    }) || editorExperiment('nested-dnd', true)) {
-      const handleId = ObjHash.getForNode(node);
-      anchorName = `--node-anchor-${node.type.name}-${handleId}`;
-    }
+    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
@@ -247,7 +302,7 @@ export const nodeDecorations = newState => {
       ['data-drag-handler-node-type']: node.type.name,
       ['data-drag-handler-anchor-depth']: `${depth}`
     }, {
-      type: 'node-decoration',
+      type: TYPE_NODE_DEC,
       anchorName,
       nodeType: node.type.name
     }));
@@ -255,7 +310,8 @@ export const nodeDecorations = newState => {
   });
   return decs;
 };
-export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, handleOptions) => {
+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');
@@ -269,7 +325,7 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
       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 not long working.
+       * However, the tooltip for nested drag handle is no long working.
        */
       if (!isTopLevelNode) {
         // This will also hide the tooltip.
@@ -281,26 +337,25 @@ export const dragHandleDecoration = (api, getIntl, pos, anchorName, nodeType, ha
         });
       }
     }
-    unmountDecorations('data-blocks-drag-handle-container');
 
     // 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(RawIntlProvider, {
-      value: getIntl()
-    }, /*#__PURE__*/createElement(DragHandle, {
+    ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
       view,
       api,
+      formatMessage,
       getPos,
       anchorName,
       nodeType,
       handleOptions,
       isTopLevelNode
-    })), element);
+    }), element);
     return element;
   }, {
     side: -1,
-    id: 'drag-handle',
+    type: TYPE_HANDLE_DEC,
+    testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
     destroy: () => {
       if (editorExperiment('nested-dnd', true)) {
         unbind && unbind();

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

@@ -1,6 +1,7 @@
 import { bindKeymapWithCommand, dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNodeViaShortcut } from '../commands/move-node';
 import { showDragHandleAtSelection } from '../commands/show-drag-handle';
 import { DIRECTION } from '../consts';
@@ -14,8 +15,10 @@ function keymapList(api, formatMessage) {
     }, keymapList);
     bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP, formatMessage), keymapList);
     bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage), keymapList);
-    fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveLeft.common, moveNodeViaShortcut(api, DIRECTION.LEFT, formatMessage), keymapList);
-    fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveRight.common, moveNodeViaShortcut(api, DIRECTION.RIGHT, formatMessage), keymapList);
+    if (editorExperiment('nested-dnd', true) && fg('platform_editor_element_dnd_nested_a11y')) {
+      bindKeymapWithCommand(dragToMoveLeft.common, moveNodeViaShortcut(api, DIRECTION.LEFT, formatMessage), keymapList);
+      bindKeymapWithCommand(dragToMoveRight.common, moveNodeViaShortcut(api, DIRECTION.RIGHT, formatMessage), keymapList);
+    }
   }
   return keymapList;
 }