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

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

@@ -52,15 +52,28 @@ const nestedDropZoneStyle = css({
   width: 'unset'
 });
 const enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
+const fullHeightStyle = css({
+  top: '4px',
+  bottom: '4px',
+  height: 'unset',
+  zIndex: 10
+});
+
+// This z index is used in container like layout
+const fullHeightStyleAdjustZIndexStyle = css({
+  zIndex: 0
+});
 const HoverZone = ({
   onDragEnter,
   onDragLeave,
   onDrop,
   node,
+  parent,
   editorWidth,
   anchorHeightsCache,
   position,
-  isNestedDropTarget
+  isNestedDropTarget,
+  dropTargetStyle
 }) => {
   const ref = useRef(null);
   useEffect(() => {
@@ -88,14 +101,23 @@ const HoverZone = ({
       maxWidth: `${editorWidth || 0}px`
     });
   }, [anchorHeightsCache, editorWidth, node, position]);
+  const isFullHeight = useMemo(() => {
+    return dropTargetStyle === 'fullHeight';
+  }, [dropTargetStyle]);
+  const isFullHeightInLayout = useMemo(() => {
+    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 jsx("div", {
     ref: ref
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: `drop-target-hover-zone-${position}`
+    className: `drop-target-hover-zone-${position}`,
+    "data-testid": `drop-target-zone-${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]
   });
 };
 export const DropTargetV2 = ({
@@ -105,7 +127,8 @@ export const DropTargetV2 = ({
   nextNode,
   parentNode,
   formatMessage,
-  anchorHeightsCache
+  anchorHeightsCache,
+  dropTargetStyle
 }) => {
   const [isDraggedOver, setIsDraggedOver] = useState(false);
   const {
@@ -129,13 +152,14 @@ export const DropTargetV2 = ({
       api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveNode(start, pos, undefined, formatMessage));
     }
   };
+  const isFullHeight = dropTargetStyle === 'fullHeight';
   const dynamicStyle = {
     width: isNestedDropTarget ? 'unset' : '100%',
     [EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_WIDTH]: isNestedDropTarget ? '100%' : `${(widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || DEFAULT_DROP_INDICATOR_WIDTH}px`,
     [EDITOR_BLOCK_CONTROLS_DROP_TARGET_LEFT_MARGIN]: isNestedDropTarget ? getNestedNodeLeftPaddingMargin(parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name) : '0',
     [EDITOR_BLOCK_CONTROLS_DROP_TARGET_ZINDEX]: editorExperiment('nested-dnd', true) ? layers.navigation() : layers.card()
   };
-  return jsx(Fragment, null, jsx(HoverZone, {
+  return jsx(Fragment, null, !isFullHeight && jsx(HoverZone, {
     onDragEnter: () => setIsDraggedOver(true),
     onDragLeave: () => setIsDraggedOver(false),
     onDrop: onDrop,
@@ -163,9 +187,11 @@ export const DropTargetV2 = ({
     onDragLeave: () => setIsDraggedOver(false),
     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/es2019/ui/global-styles.js

@@ -125,18 +125,12 @@ const withInlineNodeStyleWithChromeFix = css({
     transform: 'scale(0)'
   }
 });
-const globalStyles = editorExperiment('nested-dnd', true) ? css({
+const globalStyles = 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'
   }
-}) : 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'
-  }
 });
 const withDividerInPanelStyleFix = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values

package/dist/es2019/utils/transactions.js

@@ -0,0 +1,57 @@
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+/**
+ * Checks if step adds inline char
+ * @param s
+ * @returns True if step adds inline char
+ */
+export const isStepText = s => {
+  const 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
+ */
+export const isStepDelete = s => {
+  const 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
+ */
+export const getTrMetadata = tr => {
+  let from;
+  let to;
+  let numReplaceSteps = 0;
+  let isAllText = true;
+  tr.steps.forEach(s => {
+    if (s instanceof ReplaceStep || s instanceof ReplaceAroundStep) {
+      if (s instanceof ReplaceAroundStep || s instanceof ReplaceStep && !isStepText(s) && !isStepDelete(s)) {
+        isAllText = false;
+      }
+      const $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,
+    to,
+    numReplaceSteps,
+    isAllText
+  };
+};

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

@@ -64,7 +64,7 @@ var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayo
     // 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);
     }
   }
@@ -73,7 +73,8 @@ var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayo
 export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
     var isParentNodeOfTypeLayout;
-    if (fg('platform_editor_element_dnd_nested_a11y')) {
+    var shouldEnableNestedDndA11y = editorExperiment('nested-dnd', true) && fg('platform_editor_element_dnd_nested_a11y');
+    if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
     var currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
@@ -82,7 +83,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
       var $pos = state.doc.resolve(currentNodePos);
       var moveToPos = -1;
       var 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;
         }
@@ -92,13 +93,13 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
         var grandParent = $pos.node($pos.depth - 1);
         var 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) {
-        var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.node($pos.depth) : $pos.nodeBefore;
+        var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
         if (nodeBefore) {
           moveToPos = currentNodePos - nodeBefore.nodeSize;
         }
@@ -114,7 +115,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
       var 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
-      var shouldMoveNode = fg('platform_editor_element_dnd_nested_a11y') ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
+      var shouldMoveNode = shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
       if (shouldMoveNode) {
         var _api$core;
         api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {

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

@@ -1,12 +1,13 @@
 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 var showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
   return function (state, _, view) {
     var $from = state.selection.$from;
     var 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;
       var _ref = key.getState(state) || {},
         activeNode = _ref.activeNode;

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

@@ -6,7 +6,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -22,6 +21,9 @@ var IGNORE_NODES = ['tableCell', 'tableHeader', 'tableRow', 'layoutColumn', 'lis
 var IGNORE_NODE_DESCENDANTS = ['listItem', 'taskList', 'decisionList', 'mediaSingle'];
 var PARENT_WITH_END_DROP_TARGET = ['tableCell', 'tableHeader', 'panel', 'layoutColumn', 'expand', 'nestedExpand', 'bodiedExtension'];
 var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
+export var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
+export var TYPE_HANDLE_DEC = 'drag-handle';
+export var TYPE_NODE_DEC = 'node-decoration';
 var getNestedDepth = function getNestedDepth() {
   return editorExperiment('nested-dnd', true) ? 100 : 0;
 };
@@ -72,6 +74,54 @@ var shouldDescend = function shouldDescend(node) {
   }
   return true;
 };
+
+/**
+ * Find drop target decorations in the pos range between from and to
+ * @param decorations
+ * @param from
+ * @param to
+ * @returns
+ */
+export var findDropTargetDecs = function findDropTargetDecs(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return spec.type === TYPE_DROP_TARGET_DEC;
+  });
+};
+export var findHandleDec = function findHandleDec(decorations, from, to) {
+  return decorations.find(from, to, function (spec) {
+    return 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 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 createDropTargetDecoration = function createDropTargetDecoration(pos, props, side, anchorHeightsCache) {
   return Decoration.widget(pos, function (_, getPos) {
     var element = document.createElement('div');
@@ -96,13 +146,16 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     }
     return element;
   }, {
-    type: 'drop-target-decoration',
+    type: TYPE_DROP_TARGET_DEC,
     side: side
   });
 };
-export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorHeightsCache) {
-  var decs = [];
+export var dropTargetDecorations = function dropTargetDecorations(newState, api, formatMessage, activeNode, anchorHeightsCache, from, to) {
   unmountDecorations('data-blocks-drop-target-container');
+  var decs = [];
+  var POS_END_OF_DOC = newState.doc.nodeSize - 2;
+  var docFrom = from === undefined || from < 0 ? 0 : from;
+  var docTo = to === undefined || to > POS_END_OF_DOC ? POS_END_OF_DOC : to;
   var prevNode;
   var activeNodePos = activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos;
   var activePMNode = typeof activeNodePos === 'number' && newState.doc.resolve(activeNodePos).nodeAfter;
@@ -120,7 +173,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     popNodeStack(depth);
     prevNodeStack.push(node);
   };
-  newState.doc.descendants(function (node, pos, parent, index) {
+  newState.doc.nodesBetween(docFrom, docTo, function (node, pos, parent, index) {
     var depth = 0;
     // drop target deco at the end position
     var endPos;
@@ -158,19 +211,27 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
       }
     }
     var 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
+    var 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
+    var 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: api,
       prevNode: previousNode,
       nextNode: node,
       parentNode: parent || undefined,
-      formatMessage: formatMessage
+      formatMessage: formatMessage,
+      dropTargetStyle: shouldShowFullHeight ? 'fullHeight' : 'default'
     }, -1, anchorHeightsCache));
     if (endPos !== undefined) {
       decs.push(createDropTargetDecoration(endPos, {
         api: api,
         prevNode: fg('platform_editor_drag_and_drop_target_v2') ? node : undefined,
         parentNode: parent || undefined,
-        formatMessage: formatMessage
+        formatMessage: formatMessage,
+        dropTargetStyle: isInSupportedContainer ? 'fullHeight' : 'default'
       }, -1, anchorHeightsCache));
     }
     if (fg('platform_editor_drag_and_drop_target_v2')) {
@@ -180,12 +241,14 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
     }
     return depth < getNestedDepth() && shouldDescend(node);
   });
-  decs.push(createDropTargetDecoration(newState.doc.nodeSize - 2, {
-    api: api,
-    formatMessage: 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: api,
+      formatMessage: formatMessage,
+      prevNode: newState.doc.lastChild || undefined,
+      parentNode: newState.doc
+    }, undefined, anchorHeightsCache));
+  }
   return decs;
 };
 export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
@@ -194,7 +257,7 @@ export var emptyParagraphNodeDecorations = function emptyParagraphNodeDecoration
   return Decoration.node(0, 2, _defineProperty({
     style: style
   }, 'data-drag-handler-anchor-name', anchorName), {
-    type: 'node-decoration'
+    type: TYPE_NODE_DEC
   });
 };
 var ObjHash = /*#__PURE__*/function () {
@@ -223,19 +286,17 @@ var shouldIgnoreNode = function shouldIgnoreNode(node) {
   }
   return IGNORE_NODES.includes(node.type.name);
 };
-export var nodeDecorations = function nodeDecorations(newState) {
+export var nodeDecorations = function nodeDecorations(newState, from, to) {
   var decs = [];
-  newState.doc.descendants(function (node, pos, _parent, index) {
+  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$node2;
     var depth = 0;
     var anchorName;
     var shouldDescend = !IGNORE_NODE_DESCENDANTS.includes(node.type.name);
-    if (editorExperiment('dnd-input-performance-optimisation', true, {
-      exposure: true
-    }) || editorExperiment('nested-dnd', true)) {
-      var handleId = ObjHash.getForNode(node);
-      anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
-    }
+    var handleId = ObjHash.getForNode(node);
+    anchorName = "--node-anchor-".concat(node.type.name, "-").concat(handleId);
     if (editorExperiment('nested-dnd', true)) {
       var _anchorName;
       // Doesn't descend into a node
@@ -254,7 +315,7 @@ export var nodeDecorations = function nodeDecorations(newState) {
     decs.push(Decoration.node(pos, pos + node.nodeSize, (_Decoration$node2 = {
       style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 ? 'margin-top: 0px;' : '', "; position: relative; z-index: 1;")
     }, _defineProperty(_Decoration$node2, 'data-drag-handler-anchor-name', anchorName), _defineProperty(_Decoration$node2, 'data-drag-handler-node-type', node.type.name), _defineProperty(_Decoration$node2, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node2), {
-      type: 'node-decoration',
+      type: TYPE_NODE_DEC,
       anchorName: anchorName,
       nodeType: node.type.name
     }));
@@ -262,7 +323,8 @@ export var nodeDecorations = function nodeDecorations(newState) {
   });
   return decs;
 };
-export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, pos, anchorName, nodeType, handleOptions) {
+export var dragHandleDecoration = function dragHandleDecoration(api, formatMessage, pos, anchorName, nodeType, handleOptions) {
+  unmountDecorations('data-blocks-drag-handle-container');
   var unbind;
   return Decoration.widget(pos, function (view, getPos) {
     var element = document.createElement('span');
@@ -276,7 +338,7 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
       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.
@@ -288,26 +350,25 @@ export var dragHandleDecoration = function dragHandleDecoration(api, getIntl, po
         });
       }
     }
-    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: view,
       api: api,
+      formatMessage: formatMessage,
       getPos: getPos,
       anchorName: anchorName,
       nodeType: nodeType,
       handleOptions: handleOptions,
       isTopLevelNode: isTopLevelNode
-    })), element);
+    }), element);
     return element;
   }, {
     side: -1,
-    id: 'drag-handle',
+    type: TYPE_HANDLE_DEC,
+    testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
     destroy: function destroy() {
       if (editorExperiment('nested-dnd', true)) {
         unbind && unbind();

package/dist/esm/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;
 }