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

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

@@ -3,7 +3,7 @@ import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { isTextInput } from '@atlaskit/editor-common/utils';
+import { isEmptyDocument, isTextInput } from '@atlaskit/editor-common/utils';
 import { NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -13,7 +13,8 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/ad
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { AnchorHeightsCache, isAnchorSupported } from '../utils/anchor-utils';
 import { isBlocksDragTargetDebug } from '../utils/drag-target-debug';
-import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, nodeDecorations } from './decorations';
+import { getTrMetadata } from '../utils/transactions';
+import { dragHandleDecoration, dropTargetDecorations, emptyParagraphNodeDecorations, findDropTargetDecs, findHandleDec, findNodeDecs, nodeDecorations } from './decorations';
 import { handleMouseOver } from './handle-mouse-over';
 import { boundKeydownHandler } from './keymap';
 export const key = new PluginKey('blockControls');
@@ -88,6 +89,313 @@ const initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
+export const newApply = (api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache) => {
+  var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
+  const {
+    isTitleEnterImprovementEnabled
+  } = flags;
+  let {
+    activeNode,
+    decorations,
+    editorHeight,
+    editorWidthLeft,
+    editorWidthRight,
+    isDragging,
+    isMenuOpen,
+    // NOT USED
+    isPMDragging,
+    // NOT USED
+    isResizerResizing
+  } = currentState;
+  let isActiveNodeDeleted = false;
+
+  // Remap existing decorations and activeNode when steps exist
+  if (tr.docChanged) {
+    decorations = decorations.map(tr.mapping, tr.doc);
+    if (activeNode) {
+      const mappedPos = tr.mapping.mapResult(activeNode.pos);
+      isActiveNodeDeleted = mappedPos.deleted;
+      activeNode = {
+        pos: mappedPos.pos,
+        anchorName: activeNode.anchorName,
+        nodeType: activeNode.nodeType
+      };
+    }
+  }
+  const meta = tr.getMeta(key);
+  const resizerMeta = tr.getMeta('is-resizer-resizing');
+  isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
+  const {
+    from,
+    to,
+    numReplaceSteps,
+    isAllText
+  } = getTrMetadata(tr);
+  const maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
+  const latestActiveNode = (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : activeNode;
+
+  // Re-create node decorations
+  const isDecSetEmpty = decorations === DecorationSet.empty;
+  const isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged;
+  const shouldRedrawNodeDecs = !isResizerResizing && isNodeDecsMissing;
+  let isActiveNodeModified = false;
+  if (api && shouldRedrawNodeDecs) {
+    const oldNodeDecs = findNodeDecs(decorations, from, to);
+    decorations = decorations.remove(oldNodeDecs);
+    const newNodeDecs = nodeDecorations(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
+    decorations = decorations.add(newState.doc, newNodeDecs);
+    if (latestActiveNode && !isActiveNodeDeleted) {
+      // Find the newly minted node decs that touch the active node
+      const findNewNodeDecs = findNodeDecs(decorations, latestActiveNode.pos - 1, to);
+
+      // Find the specific dec that the active node corresponds to
+      const nodeDecsAtActivePos = findNewNodeDecs.filter(dec => (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos);
+
+      // If multiple decorations at the active node pos, we want the last one
+      const nodeDecAtActivePos = nodeDecsAtActivePos.pop();
+
+      // Update the active node anchor-name and type for accurate positioning
+      if (nodeDecAtActivePos) {
+        isActiveNodeModified = true;
+        latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
+        latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
+      }
+    }
+  }
+
+  // Check if editor dimensions have changed
+  const editorSizeChanged = (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight;
+
+  // Check if there's a new active node, and it differs from the last
+  const activeNodeChanged = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== ((_activeNode = activeNode) === null || _activeNode === void 0 ? void 0 : _activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== ((_activeNode2 = activeNode) === null || _activeNode2 === void 0 ? void 0 : _activeNode2.anchorName) || (meta === null || meta === void 0 ? void 0 : (_meta$activeNode$hand = meta.activeNode.handleOptions) === null || _meta$activeNode$hand === void 0 ? void 0 : _meta$activeNode$hand.isFocused));
+
+  // Some browsers don't support anchor positioning, meaning we need to replace the handle when nodes change
+  const handleNeedsRedraw = shouldRedrawNodeDecs && !isAnchorSupported();
+
+  // Create/recreate handle dec when the active node is missing/changes, or the editor viewport has changed (non-anchor pos workaround)
+  const shouldRecreateHandle = latestActiveNode && (activeNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
+
+  // Remove handle dec when explicitly hidden, a node is resizing, activeNode pos was deleted, or DnD moved a node
+  const shouldRemoveHandle = latestActiveNode && ((meta === null || meta === void 0 ? void 0 : meta.hideDragHandle) && isTitleEnterImprovementEnabled || isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
+  if (shouldRemoveHandle) {
+    var _activeNode3, _activeNode4;
+    const oldHandle = findHandleDec(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
+    decorations = decorations.remove(oldHandle);
+  } else if (api && shouldRecreateHandle) {
+    var _activeNode5, _activeNode6;
+    const oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
+    decorations = decorations.remove(oldHandle);
+    const handleDec = dragHandleDecoration(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.handleOptions);
+    decorations = decorations.add(newState.doc, [handleDec]);
+  }
+
+  // Drop targets may be missing when the node count is being changed during a drag
+  const isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
+
+  // Remove drop target decorations when dragging stops or they need to be redrawn
+  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
+    const dropTargetDecs = findDropTargetDecs(decorations);
+    decorations = decorations.remove(dropTargetDecs);
+  }
+
+  // Add drop targets when dragging starts or some are missing
+  if (api) {
+    if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || isBlocksDragTargetDebug()) {
+      const decs = dropTargetDecorations(newState, api, formatMessage, latestActiveNode, anchorHeightsCache);
+      decorations = decorations.add(newState.doc, decs);
+    }
+  }
+  const isEmptyDoc = isEmptyDocument(newState.doc);
+  if (isEmptyDoc) {
+    const hasNodeDecoration = !!findNodeDecs(decorations).length;
+    if (!hasNodeDecoration) {
+      decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
+    }
+  }
+  const newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
+  return {
+    decorations,
+    activeNode: newActiveNode,
+    isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
+    isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
+    editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : editorHeight,
+    editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : editorWidthLeft,
+    editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : editorWidthRight,
+    isResizerResizing: isResizerResizing,
+    isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
+    isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
+  };
+};
+export const oldApply = (api, formatMessage, tr, currentState, oldState, newState, flags, anchorHeightsCache) => {
+  var _meta$activeNode2, _meta$activeNode$hand2, _activeNodeWithNewNod, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
+  const {
+    isNestedEnabled,
+    isTitleEnterImprovementEnabled
+  } = flags;
+  let {
+    activeNode,
+    decorations,
+    isMenuOpen,
+    editorHeight,
+    editorWidthLeft,
+    editorWidthRight,
+    isResizerResizing,
+    isDragging,
+    isPMDragging
+  } = currentState;
+
+  // Remap existing decorations when steps exist
+  if (tr.docChanged) {
+    decorations = decorations.map(tr.mapping, tr.doc);
+  }
+  const meta = tr.getMeta(key);
+  const isPerformanceFix = isNestedEnabled || editorExperiment('dnd-input-performance-optimisation', true, {
+    exposure: true
+  });
+  let activeNodeWithNewNodeType = null;
+
+  // If tables or media are being resized, we want to hide the drag handle
+  const resizerMeta = tr.getMeta('is-resizer-resizing');
+  isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
+  const canIgnoreTr = () => !tr.steps.every(e => e instanceof AnalyticsStep);
+  const maybeNodeCountChanged = isNestedEnabled ? !isTextInput(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
+  const shouldRemoveHandle = !tr.getMeta('isRemote');
+
+  // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
+  // Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
+  // Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
+  if (meta !== null && meta !== void 0 && meta.hideDragHandle && isTitleEnterImprovementEnabled || isResizerResizing || maybeNodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
+    const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
+    decorations = decorations.remove(oldHandle);
+  }
+  const decsLength = isNestedEnabled ? decorations.find(undefined, undefined, spec => spec.type === 'node-decoration').length : decorations.find().filter(({
+    spec
+  }) => spec.type !== 'drag-handle').length;
+  let isDecsMissing = false;
+  let isDropTargetsMissing = false;
+  if (isNestedEnabled) {
+    var _meta$isDragging3;
+    isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && maybeNodeCountChanged;
+    isDropTargetsMissing = ((_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
+  } else {
+    isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
+    const dropTargetLen = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration').length;
+    isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
+  }
+
+  // This is not targeted enough - it's trying to catch events like expand being set to breakout
+  const maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && !maybeNodeCountChanged;
+
+  // This addresses scenarios such as undoing table resizing,
+  // where a keyboard shortcut triggers a width change, and
+  // the node's actual width is then updated in a separate renderering cycle.
+  // The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
+  // (when the table node rerenders)
+  // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
+  const maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
+  const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || maybeNodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
+
+  // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
+  if (redrawDecorations && !isResizerResizing && api) {
+    const oldNodeDecs = decorations.find(undefined, undefined, spec => spec.type !== 'drop-target-decoration');
+    decorations = decorations.remove(oldNodeDecs);
+    const newNodeDecs = nodeDecorations(newState);
+    decorations = decorations.add(newState.doc, [...newNodeDecs]);
+    if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
+      let mappedPosisiton = tr.mapping.map(activeNode.pos);
+      const prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
+
+      // When a node type changed to be nested inside another node, the position of the active node is off by 1
+      // This is a workaround to fix the position of the active node when it is nested
+      if (tr.docChanged && !maybeNodeCountChanged && mappedPosisiton === prevMappedPos + 1) {
+        mappedPosisiton = prevMappedPos;
+      }
+      const newActiveNode = tr.doc.nodeAt(mappedPosisiton);
+      let draghandleDec;
+      if (isPerformanceFix) {
+        var _meta$activeNode$pos, _meta$activeNode3, _ref, _meta$activeNode$anch, _meta$activeNode4, _decAtPos$spec, _ref2, _meta$activeNode$node, _meta$activeNode5, _decAtPos$spec2, _meta$activeNode6;
+        if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType) {
+          const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
+          decorations = decorations.remove(oldHandle);
+        }
+        const decAtPos = newNodeDecs.find(dec => dec.from === mappedPosisiton);
+        draghandleDec = dragHandleDecoration(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 ? void 0 : (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref = (_meta$activeNode$anch = meta === null || meta === void 0 ? void 0 : (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 ? void 0 : (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref !== void 0 ? _ref : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref2 = (_meta$activeNode$node = meta === null || meta === void 0 ? void 0 : (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 ? void 0 : (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref2 !== void 0 ? _ref2 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 ? void 0 : (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
+      } else {
+        let nodeType = activeNode.nodeType;
+        let anchorName = activeNode.anchorName;
+        if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType) {
+          nodeType = newActiveNode.type.name;
+          anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
+          activeNodeWithNewNodeType = {
+            pos: prevMappedPos,
+            nodeType,
+            anchorName
+          };
+        }
+        draghandleDec = dragHandleDecoration(api, formatMessage, activeNode.pos, anchorName, nodeType);
+      }
+      decorations = decorations.add(newState.doc, [draghandleDec]);
+    }
+  }
+
+  // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
+  if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand2 = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand2 !== void 0 && _meta$activeNode$hand2.isFocused)) {
+    const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
+    decorations = decorations.remove(oldHandle);
+    const decs = dragHandleDecoration(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
+    decorations = decorations.add(newState.doc, [decs]);
+  }
+
+  // Remove previous drag handle widget and draw new drag handle widget when node type changes
+  if (!isPerformanceFix && activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
+    const oldHandle = decorations.find(undefined, undefined, spec => spec.type === 'drag-handle');
+    decorations = decorations.remove(oldHandle);
+    const decs = dragHandleDecoration(api, formatMessage, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
+    decorations = decorations.add(newState.doc, [decs]);
+  }
+  if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
+    // Remove drop target decoration when dragging stops
+    const dropTargetDecs = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration');
+    decorations = decorations.remove(dropTargetDecs);
+  }
+
+  // Map active node position when the document changes
+  const mappedActiveNodePos = tr.docChanged && activeNode ? !isPerformanceFix && activeNodeWithNewNodeType || {
+    pos: tr.mapping.map(activeNode.pos),
+    anchorName: activeNode.anchorName,
+    nodeType: activeNode.nodeType
+  } : activeNode;
+  const shouldCreateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
+  if (api) {
+    // Add drop targets when node is being dragged
+    // if the transaction is only for analytics and user is dragging, continue to draw drop targets
+    if (shouldCreateDropTargets || isBlocksDragTargetDebug()) {
+      var _meta$activeNode7;
+      const decs = dropTargetDecorations(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorHeightsCache);
+      decorations = decorations.add(newState.doc, decs);
+    }
+  }
+  const isEmptyDoc = isNestedEnabled ? newState.doc.childCount === 1 && newState.doc.nodeSize <= 4 && (newState.doc.firstChild === null || newState.doc.firstChild.nodeSize <= 2) : newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
+  if (isEmptyDoc) {
+    const hasNodeDecoration = !!decorations.find(undefined, undefined, spec => spec.type === 'node-decoration').length;
+    if (!hasNodeDecoration) {
+      decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
+    }
+  }
+  const newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && decorations.find(undefined, undefined, spec => spec.type === 'drag-handle').length === 0 ? null : (_meta$activeNode8 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode8 !== void 0 ? _meta$activeNode8 : mappedActiveNodePos;
+  return {
+    decorations,
+    activeNode: newActiveNode,
+    isDragging: (_meta$isDragging4 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging4 !== void 0 ? _meta$isDragging4 : isDragging,
+    isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
+    editorHeight: (_meta$editorHeight2 = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight2 !== void 0 ? _meta$editorHeight2 : currentState.editorHeight,
+    editorWidthLeft: (_meta$editorWidthLeft2 = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft2 !== void 0 ? _meta$editorWidthLeft2 : currentState.editorWidthLeft,
+    editorWidthRight: (_meta$editorWidthRigh2 = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh2 !== void 0 ? _meta$editorWidthRigh2 : currentState.editorWidthRight,
+    isResizerResizing: isResizerResizing,
+    isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
+    isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging
+  };
+};
 export const createPlugin = (api, getIntl) => {
   const {
     formatMessage
@@ -95,6 +403,15 @@ export const createPlugin = (api, getIntl) => {
   const isNestedEnabled = editorExperiment('nested-dnd', true, {
     exposure: true
   });
+  const isOptimisedApply = isNestedEnabled && editorExperiment('optimised-apply-dnd', true, {
+    exposure: true
+  });
+  const isTitleEnterImprovementEnabled = fg('confluence_frontend_page_title_enter_improvements');
+  const flags = {
+    isNestedEnabled,
+    isOptimisedApply,
+    isTitleEnterImprovementEnabled
+  };
   if (fg('platform_editor_element_dnd_nested_fix_patch_2')) {
     // TODO: Remove this once FG is used in code
   }
@@ -109,170 +426,10 @@ export const createPlugin = (api, getIntl) => {
         return initialState;
       },
       apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode$hand, _activeNodeWithNewNod, _meta$activeNode7, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
-        let {
-          activeNode,
-          decorations,
-          isMenuOpen,
-          editorHeight,
-          editorWidthLeft,
-          editorWidthRight,
-          isResizerResizing,
-          isDragging,
-          isPMDragging
-        } = currentState;
-
-        // Remap existing decorations when steps exist
-        if (tr.docChanged) {
-          decorations = decorations.map(tr.mapping, tr.doc);
-        }
-        const meta = tr.getMeta(key);
-        const isPerformanceFix = isNestedEnabled || editorExperiment('dnd-input-performance-optimisation', true, {
-          exposure: true
-        });
-        let activeNodeWithNewNodeType = null;
-
-        // If tables or media are being resized, we want to hide the drag handle
-        const resizerMeta = tr.getMeta('is-resizer-resizing');
-        isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
-        const canIgnoreTr = () => !tr.steps.every(e => e instanceof AnalyticsStep);
-        const maybeNodeCountChanged = isNestedEnabled ? !isTextInput(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
-        const shouldRemoveHandle = !tr.getMeta('isRemote');
-
-        // During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
-        // Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
-        // Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
-        if (meta !== null && meta !== void 0 && meta.hideDragHandle && fg('confluence_frontend_page_title_enter_improvements') || isResizerResizing || maybeNodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
-          const oldHandle = decorations.find(undefined, undefined, spec => spec.id === 'drag-handle');
-          decorations = decorations.remove(oldHandle);
-        }
-        const decsLength = isNestedEnabled ? decorations.find(undefined, undefined, spec => spec.type === 'node-decoration').length : decorations.find().filter(({
-          spec
-        }) => spec.id !== 'drag-handle').length;
-        let isDecsMissing = false;
-        let isDropTargetsMissing = false;
-        if (isNestedEnabled) {
-          var _meta$isDragging;
-          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && maybeNodeCountChanged;
-          isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
-        } else {
-          isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
-          const dropTargetLen = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration').length;
-          isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
+        if (isOptimisedApply) {
+          return newApply(api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache);
         }
-
-        // This is not targeted enough - it's trying to catch events like expand being set to breakout
-        const maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && !maybeNodeCountChanged;
-
-        // This addresses scenarios such as undoing table resizing,
-        // where a keyboard shortcut triggers a width change, and
-        // the node's actual width is then updated in a separate renderering cycle.
-        // The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
-        // (when the table node rerenders)
-        // The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
-        const maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
-        const redrawDecorations = decorations === DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || maybeNodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
-
-        // Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
-        if (redrawDecorations && !isResizerResizing && api) {
-          const oldNodeDecs = decorations.find(undefined, undefined, spec => spec.type !== 'drop-target-decoration');
-          decorations = decorations.remove(oldNodeDecs);
-          const newNodeDecs = nodeDecorations(newState);
-          decorations = decorations.add(newState.doc, [...newNodeDecs]);
-          if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
-            let mappedPosisiton = tr.mapping.map(activeNode.pos);
-            const prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
-
-            // When a node type changed to be nested inside another node, the position of the active node is off by 1
-            // This is a workaround to fix the position of the active node when it is nested
-            if (tr.docChanged && !maybeNodeCountChanged && mappedPosisiton === prevMappedPos + 1) {
-              mappedPosisiton = prevMappedPos;
-            }
-            const newActiveNode = tr.doc.nodeAt(mappedPosisiton);
-            let draghandleDec;
-            if (isPerformanceFix) {
-              var _meta$activeNode$pos, _meta$activeNode2, _ref, _meta$activeNode$anch, _meta$activeNode3, _decAtPos$spec, _ref2, _meta$activeNode$node, _meta$activeNode4, _decAtPos$spec2, _meta$activeNode5;
-              if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType) {
-                const oldHandle = decorations.find(undefined, undefined, spec => spec.id === 'drag-handle');
-                decorations = decorations.remove(oldHandle);
-              }
-              const decAtPos = newNodeDecs.find(dec => dec.from === mappedPosisiton);
-              draghandleDec = dragHandleDecoration(api, getIntl, (_meta$activeNode$pos = meta === null || meta === void 0 ? void 0 : (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref = (_meta$activeNode$anch = meta === null || meta === void 0 ? void 0 : (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 ? void 0 : (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref !== void 0 ? _ref : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref2 = (_meta$activeNode$node = meta === null || meta === void 0 ? void 0 : (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 ? void 0 : (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref2 !== void 0 ? _ref2 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 ? void 0 : (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.handleOptions);
-            } else {
-              let nodeType = activeNode.nodeType;
-              let anchorName = activeNode.anchorName;
-              if (newActiveNode && (newActiveNode === null || newActiveNode === void 0 ? void 0 : newActiveNode.type.name) !== activeNode.nodeType) {
-                nodeType = newActiveNode.type.name;
-                anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
-                activeNodeWithNewNodeType = {
-                  pos: prevMappedPos,
-                  nodeType,
-                  anchorName
-                };
-              }
-              draghandleDec = dragHandleDecoration(api, getIntl, activeNode.pos, anchorName, nodeType);
-            }
-            decorations = decorations.add(newState.doc, [draghandleDec]);
-          }
-        }
-
-        // Remove previous drag handle widget and draw new drag handle widget when activeNode changes
-        if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
-          const oldHandle = decorations.find(undefined, undefined, spec => spec.id === 'drag-handle');
-          decorations = decorations.remove(oldHandle);
-          const decs = dragHandleDecoration(api, getIntl, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
-          decorations = decorations.add(newState.doc, [decs]);
-        }
-
-        // Remove previous drag handle widget and draw new drag handle widget when node type changes
-        if (!isPerformanceFix && activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
-          const oldHandle = decorations.find(undefined, undefined, spec => spec.id === 'drag-handle');
-          decorations = decorations.remove(oldHandle);
-          const decs = dragHandleDecoration(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
-          decorations = decorations.add(newState.doc, [decs]);
-        }
-        if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
-          // Remove drop target decoration when dragging stops
-          const dropTargetDecs = decorations.find(undefined, undefined, spec => spec.type === 'drop-target-decoration');
-          decorations = decorations.remove(dropTargetDecs);
-        }
-
-        // Map active node position when the document changes
-        const mappedActiveNodePos = tr.docChanged && activeNode ? !isPerformanceFix && activeNodeWithNewNodeType || {
-          pos: tr.mapping.map(activeNode.pos),
-          anchorName: activeNode.anchorName,
-          nodeType: activeNode.nodeType
-        } : activeNode;
-        const shouldCreateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
-        if (api) {
-          // Add drop targets when node is being dragged
-          // if the transaction is only for analytics and user is dragging, continue to draw drop targets
-          if (shouldCreateDropTargets || isBlocksDragTargetDebug()) {
-            var _meta$activeNode6;
-            const decs = dropTargetDecorations(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode6 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode6 !== void 0 ? _meta$activeNode6 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorHeightsCache);
-            decorations = decorations.add(newState.doc, decs);
-          }
-        }
-        const isEmptyDoc = isNestedEnabled ? newState.doc.childCount === 1 && newState.doc.nodeSize <= 4 && (newState.doc.firstChild === null || newState.doc.firstChild.nodeSize <= 2) : newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
-        if (isEmptyDoc) {
-          const hasNodeDecoration = !!decorations.find(undefined, undefined, spec => spec.type === 'node-decoration').length;
-          if (!hasNodeDecoration) {
-            decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
-          }
-        }
-        const newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && decorations.find(undefined, undefined, spec => spec.id === 'drag-handle').length === 0 ? null : (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos;
-        return {
-          decorations,
-          activeNode: newActiveNode,
-          isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
-          isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
-          editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
-          editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : currentState.editorWidthLeft,
-          editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : currentState.editorWidthRight,
-          isResizerResizing: isResizerResizing,
-          isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
-          isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
-        };
+        return oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorHeightsCache);
       }
     },
     props: {
@@ -376,13 +533,8 @@ export const createPlugin = (api, getIntl) => {
       const dom = editorView.dom;
       const editorContentArea = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
 
-      // Use ResizeObserver to observe width changes
+      // Use ResizeObserver to observe resizer (scroll-parent typically grows when resizing) and editor width changes
       const resizeObserverWidth = new ResizeObserver(rafSchedule(entries => {
-        const editorContentArea = entries[0].target;
-        const editorWidthRight = editorContentArea.getBoundingClientRect().right;
-        const editorWidthLeft = editorContentArea.getBoundingClientRect().left;
-
-        // Update the plugin state when the height changes
         const pluginState = key.getState(editorView.state);
         if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
           const isResizerResizing = !!dom.querySelector('.is-resizing');
@@ -391,17 +543,18 @@ export const createPlugin = (api, getIntl) => {
             transaction.setMeta('is-resizer-resizing', isResizerResizing);
           }
           if (!isResizerResizing) {
-            if (fg('platform_editor_elements_drag_and_drop_ed_23394')) {
-              transaction.setMeta(key, {
-                editorWidthLeft,
-                editorWidthRight
-              });
-            }
+            const editorContentArea = entries[0].target;
+            const editorWidthRight = editorContentArea.getBoundingClientRect().right;
+            const editorWidthLeft = editorContentArea.getBoundingClientRect().left;
+            transaction.setMeta(key, {
+              editorWidthLeft,
+              editorWidthRight
+            });
           }
           editorView.dispatch(transaction);
         }
       }));
-      if (editorContentArea && fg('platform_editor_elements_drag_and_drop_ed_23394')) {
+      if (editorContentArea) {
         resizeObserverWidth.observe(editorContentArea);
       }
 
@@ -409,7 +562,7 @@ export const createPlugin = (api, getIntl) => {
       const pragmaticCleanup = destroyFn(api);
       return {
         destroy() {
-          if (editorContentArea && fg('platform_editor_elements_drag_and_drop_ed_23394')) {
+          if (editorContentArea) {
             resizeObserverWidth.unobserve(editorContentArea);
           }
           pragmaticCleanup();

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

@@ -6,7 +6,6 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
-import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
@@ -58,15 +57,13 @@ const selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #E9F2FF)",
   color: "var(--ds-icon-selected, #0C66E4)"
 });
-const DragHandleInternal = ({
+export const DragHandle = ({
   view,
   api,
+  formatMessage,
   getPos,
   anchorName,
   nodeType,
-  intl: {
-    formatMessage
-  },
   handleOptions,
   isTopLevelNode = true
 }) => {
@@ -360,7 +357,7 @@ const DragHandleInternal = ({
     keymap: dragToMoveDown
   }];
   let isParentNodeOfTypeLayout;
-  if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && fg('platform_editor_element_dnd_nested_a11y')) {
+  if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && editorExperiment('nested-dnd', true) && fg('platform_editor_element_dnd_nested_a11y')) {
     isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve(getNestedNodePosition(view.state)).node().type.name === 'layoutColumn';
     if (isParentNodeOfTypeLayout) {
       helpDescriptors = [...helpDescriptors, {
@@ -404,5 +401,4 @@ const DragHandleInternal = ({
       });
     }
   }, renderButton()) : renderButton();
-};
-export const DragHandle = injectIntl(DragHandleInternal);
+};