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

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

@@ -4,7 +4,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';
@@ -14,7 +14,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 var key = new PluginKey('blockControls');
@@ -87,12 +88,346 @@ var initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false
 };
+export var newApply = function 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;
+  var isTitleEnterImprovementEnabled = flags.isTitleEnterImprovementEnabled;
+  var activeNode = currentState.activeNode,
+    decorations = currentState.decorations,
+    editorHeight = currentState.editorHeight,
+    editorWidthLeft = currentState.editorWidthLeft,
+    editorWidthRight = currentState.editorWidthRight,
+    isDragging = currentState.isDragging,
+    isMenuOpen = currentState.isMenuOpen,
+    isPMDragging = currentState.isPMDragging,
+    isResizerResizing = currentState.isResizerResizing;
+  var isActiveNodeDeleted = false;
+
+  // Remap existing decorations and activeNode when steps exist
+  if (tr.docChanged) {
+    decorations = decorations.map(tr.mapping, tr.doc);
+    if (activeNode) {
+      var mappedPos = tr.mapping.mapResult(activeNode.pos);
+      isActiveNodeDeleted = mappedPos.deleted;
+      activeNode = {
+        pos: mappedPos.pos,
+        anchorName: activeNode.anchorName,
+        nodeType: activeNode.nodeType
+      };
+    }
+  }
+  var meta = tr.getMeta(key);
+  var resizerMeta = tr.getMeta('is-resizer-resizing');
+  isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
+  var _getTrMetadata = getTrMetadata(tr),
+    from = _getTrMetadata.from,
+    to = _getTrMetadata.to,
+    numReplaceSteps = _getTrMetadata.numReplaceSteps,
+    isAllText = _getTrMetadata.isAllText;
+  var maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
+  var latestActiveNode = (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : activeNode;
+
+  // Re-create node decorations
+  var isDecSetEmpty = decorations === DecorationSet.empty;
+  var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged;
+  var shouldRedrawNodeDecs = !isResizerResizing && isNodeDecsMissing;
+  var isActiveNodeModified = false;
+  if (api && shouldRedrawNodeDecs) {
+    var oldNodeDecs = findNodeDecs(decorations, from, to);
+    decorations = decorations.remove(oldNodeDecs);
+    var 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
+      var findNewNodeDecs = findNodeDecs(decorations, latestActiveNode.pos - 1, to);
+
+      // Find the specific dec that the active node corresponds to
+      var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
+        return (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos;
+      });
+
+      // If multiple decorations at the active node pos, we want the last one
+      var 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
+  var 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
+  var 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 || (_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
+  var handleNeedsRedraw = shouldRedrawNodeDecs && !isAnchorSupported();
+
+  // Create/recreate handle dec when the active node is missing/changes, or the editor viewport has changed (non-anchor pos workaround)
+  var 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
+  var 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;
+    var 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;
+    var _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);
+    var 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
+  var 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) {
+    var 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()) {
+      var decs = dropTargetDecorations(newState, api, formatMessage, latestActiveNode, anchorHeightsCache);
+      decorations = decorations.add(newState.doc, decs);
+    }
+  }
+  var isEmptyDoc = isEmptyDocument(newState.doc);
+  if (isEmptyDoc) {
+    var hasNodeDecoration = !!findNodeDecs(decorations).length;
+    if (!hasNodeDecoration) {
+      decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
+    }
+  }
+  var 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: 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 var oldApply = function 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;
+  var isNestedEnabled = flags.isNestedEnabled,
+    isTitleEnterImprovementEnabled = flags.isTitleEnterImprovementEnabled;
+  var activeNode = currentState.activeNode,
+    decorations = currentState.decorations,
+    isMenuOpen = currentState.isMenuOpen,
+    editorHeight = currentState.editorHeight,
+    editorWidthLeft = currentState.editorWidthLeft,
+    editorWidthRight = currentState.editorWidthRight,
+    isResizerResizing = currentState.isResizerResizing,
+    isDragging = currentState.isDragging,
+    isPMDragging = currentState.isPMDragging;
+
+  // Remap existing decorations when steps exist
+  if (tr.docChanged) {
+    decorations = decorations.map(tr.mapping, tr.doc);
+  }
+  var meta = tr.getMeta(key);
+  var isPerformanceFix = isNestedEnabled || editorExperiment('dnd-input-performance-optimisation', true, {
+    exposure: true
+  });
+  var activeNodeWithNewNodeType = null;
+
+  // If tables or media are being resized, we want to hide the drag handle
+  var resizerMeta = tr.getMeta('is-resizer-resizing');
+  isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
+  var canIgnoreTr = function canIgnoreTr() {
+    return !tr.steps.every(function (e) {
+      return e instanceof AnalyticsStep;
+    });
+  };
+  var maybeNodeCountChanged = isNestedEnabled ? !isTextInput(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
+  var 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) {
+    var oldHandle = decorations.find(undefined, undefined, function (spec) {
+      return spec.type === 'drag-handle';
+    });
+    decorations = decorations.remove(oldHandle);
+  }
+  var decsLength = isNestedEnabled ? decorations.find(undefined, undefined, function (spec) {
+    return spec.type === 'node-decoration';
+  }).length : decorations.find().filter(function (_ref5) {
+    var spec = _ref5.spec;
+    return spec.type !== 'drag-handle';
+  }).length;
+  var isDecsMissing = false;
+  var 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;
+    var dropTargetLen = decorations.find(undefined, undefined, function (spec) {
+      return 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
+  var 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.
+  var maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === 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);
+  var 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) {
+    var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
+      return spec.type !== 'drop-target-decoration';
+    });
+    decorations = decorations.remove(oldNodeDecs);
+    var newNodeDecs = nodeDecorations(newState);
+    decorations = decorations.add(newState.doc, _toConsumableArray(newNodeDecs));
+    if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
+      var mappedPosisiton = tr.mapping.map(activeNode.pos);
+      var 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;
+      }
+      var _newActiveNode = tr.doc.nodeAt(mappedPosisiton);
+      var draghandleDec;
+      if (isPerformanceFix) {
+        var _meta$activeNode$pos, _meta$activeNode3, _ref6, _meta$activeNode$anch, _meta$activeNode4, _decAtPos$spec, _ref7, _meta$activeNode$node, _meta$activeNode5, _decAtPos$spec2, _meta$activeNode6;
+        if (_newActiveNode && (_newActiveNode === null || _newActiveNode === void 0 ? void 0 : _newActiveNode.type.name) !== activeNode.nodeType) {
+          var _oldHandle2 = decorations.find(undefined, undefined, function (spec) {
+            return spec.type === 'drag-handle';
+          });
+          decorations = decorations.remove(_oldHandle2);
+        }
+        var decAtPos = newNodeDecs.find(function (dec) {
+          return dec.from === mappedPosisiton;
+        });
+        draghandleDec = dragHandleDecoration(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === 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, (_ref6 = (_meta$activeNode$anch = meta === null || meta === 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 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === 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 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
+      } else {
+        var nodeType = activeNode.nodeType;
+        var 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: nodeType,
+            anchorName: 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)) {
+    var _oldHandle3 = decorations.find(undefined, undefined, function (spec) {
+      return spec.type === 'drag-handle';
+    });
+    decorations = decorations.remove(_oldHandle3);
+    var 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) {
+    var _oldHandle4 = decorations.find(undefined, undefined, function (spec) {
+      return spec.type === 'drag-handle';
+    });
+    decorations = decorations.remove(_oldHandle4);
+    var _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
+    var dropTargetDecs = decorations.find(undefined, undefined, function (spec) {
+      return spec.type === 'drop-target-decoration';
+    });
+    decorations = decorations.remove(dropTargetDecs);
+  }
+
+  // Map active node position when the document changes
+  var mappedActiveNodePos = tr.docChanged && activeNode ? !isPerformanceFix && activeNodeWithNewNodeType || {
+    pos: tr.mapping.map(activeNode.pos),
+    anchorName: activeNode.anchorName,
+    nodeType: activeNode.nodeType
+  } : activeNode;
+  var 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;
+      var _decs2 = 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, _decs2);
+    }
+  }
+  var 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) {
+    var hasNodeDecoration = !!decorations.find(undefined, undefined, function (spec) {
+      return spec.type === 'node-decoration';
+    }).length;
+    if (!hasNodeDecoration) {
+      decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
+    }
+  }
+  var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && decorations.find(undefined, undefined, function (spec) {
+    return 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: 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 var createPlugin = function createPlugin(api, getIntl) {
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isNestedEnabled = editorExperiment('nested-dnd', true, {
     exposure: true
   });
+  var isOptimisedApply = isNestedEnabled && editorExperiment('optimised-apply-dnd', true, {
+    exposure: true
+  });
+  var isTitleEnterImprovementEnabled = fg('confluence_frontend_page_title_enter_improvements');
+  var flags = {
+    isNestedEnabled: isNestedEnabled,
+    isOptimisedApply: isOptimisedApply,
+    isTitleEnterImprovementEnabled: isTitleEnterImprovementEnabled
+  };
   if (fg('platform_editor_element_dnd_nested_fix_patch_2')) {
     // TODO: Remove this once FG is used in code
   }
@@ -107,195 +442,10 @@ export var createPlugin = function createPlugin(api, getIntl) {
         return initialState;
       },
       apply: function apply(tr, currentState, oldState, newState) {
-        var _meta$activeNode, _meta$activeNode$hand, _activeNodeWithNewNod, _meta$activeNode7, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
-        var activeNode = currentState.activeNode,
-          decorations = currentState.decorations,
-          isMenuOpen = currentState.isMenuOpen,
-          editorHeight = currentState.editorHeight,
-          editorWidthLeft = currentState.editorWidthLeft,
-          editorWidthRight = currentState.editorWidthRight,
-          isResizerResizing = currentState.isResizerResizing,
-          isDragging = currentState.isDragging,
-          isPMDragging = currentState.isPMDragging;
-
-        // Remap existing decorations when steps exist
-        if (tr.docChanged) {
-          decorations = decorations.map(tr.mapping, tr.doc);
-        }
-        var meta = tr.getMeta(key);
-        var isPerformanceFix = isNestedEnabled || editorExperiment('dnd-input-performance-optimisation', true, {
-          exposure: true
-        });
-        var activeNodeWithNewNodeType = null;
-
-        // If tables or media are being resized, we want to hide the drag handle
-        var resizerMeta = tr.getMeta('is-resizer-resizing');
-        isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
-        var canIgnoreTr = function canIgnoreTr() {
-          return !tr.steps.every(function (e) {
-            return e instanceof AnalyticsStep;
-          });
-        };
-        var maybeNodeCountChanged = isNestedEnabled ? !isTextInput(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
-        var 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) {
-          var oldHandle = decorations.find(undefined, undefined, function (spec) {
-            return spec.id === 'drag-handle';
-          });
-          decorations = decorations.remove(oldHandle);
-        }
-        var decsLength = isNestedEnabled ? decorations.find(undefined, undefined, function (spec) {
-          return spec.type === 'node-decoration';
-        }).length : decorations.find().filter(function (_ref5) {
-          var spec = _ref5.spec;
-          return spec.id !== 'drag-handle';
-        }).length;
-        var isDecsMissing = false;
-        var 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;
-          var dropTargetLen = decorations.find(undefined, undefined, function (spec) {
-            return 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
-        var 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.
-        var maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === 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);
-        var 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) {
-          var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
-            return spec.type !== 'drop-target-decoration';
-          });
-          decorations = decorations.remove(oldNodeDecs);
-          var newNodeDecs = nodeDecorations(newState);
-          decorations = decorations.add(newState.doc, _toConsumableArray(newNodeDecs));
-          if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
-            var mappedPosisiton = tr.mapping.map(activeNode.pos);
-            var 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;
-            }
-            var _newActiveNode = tr.doc.nodeAt(mappedPosisiton);
-            var draghandleDec;
-            if (isPerformanceFix) {
-              var _meta$activeNode$pos, _meta$activeNode2, _ref6, _meta$activeNode$anch, _meta$activeNode3, _decAtPos$spec, _ref7, _meta$activeNode$node, _meta$activeNode4, _decAtPos$spec2, _meta$activeNode5;
-              if (_newActiveNode && (_newActiveNode === null || _newActiveNode === void 0 ? void 0 : _newActiveNode.type.name) !== activeNode.nodeType) {
-                var _oldHandle = decorations.find(undefined, undefined, function (spec) {
-                  return spec.id === 'drag-handle';
-                });
-                decorations = decorations.remove(_oldHandle);
-              }
-              var decAtPos = newNodeDecs.find(function (dec) {
-                return dec.from === mappedPosisiton;
-              });
-              draghandleDec = dragHandleDecoration(api, getIntl, (_meta$activeNode$pos = meta === null || meta === 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, (_ref6 = (_meta$activeNode$anch = meta === null || meta === 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 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === 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 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.handleOptions);
-            } else {
-              var nodeType = activeNode.nodeType;
-              var 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: nodeType,
-                  anchorName: 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)) {
-          var _oldHandle2 = decorations.find(undefined, undefined, function (spec) {
-            return spec.id === 'drag-handle';
-          });
-          decorations = decorations.remove(_oldHandle2);
-          var decs = dragHandleDecoration(api, getIntl, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
-          decorations = decorations.add(newState.doc, [decs]);
+        if (isOptimisedApply) {
+          return newApply(api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache);
         }
-
-        // 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) {
-          var _oldHandle3 = decorations.find(undefined, undefined, function (spec) {
-            return spec.id === 'drag-handle';
-          });
-          decorations = decorations.remove(_oldHandle3);
-          var _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
-          var dropTargetDecs = decorations.find(undefined, undefined, function (spec) {
-            return spec.type === 'drop-target-decoration';
-          });
-          decorations = decorations.remove(dropTargetDecs);
-        }
-
-        // Map active node position when the document changes
-        var mappedActiveNodePos = tr.docChanged && activeNode ? !isPerformanceFix && activeNodeWithNewNodeType || {
-          pos: tr.mapping.map(activeNode.pos),
-          anchorName: activeNode.anchorName,
-          nodeType: activeNode.nodeType
-        } : activeNode;
-        var 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;
-            var _decs2 = 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, _decs2);
-          }
-        }
-        var 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) {
-          var hasNodeDecoration = !!decorations.find(undefined, undefined, function (spec) {
-            return spec.type === 'node-decoration';
-          }).length;
-          if (!hasNodeDecoration) {
-            decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
-          }
-        }
-        var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && decorations.find(undefined, undefined, function (spec) {
-          return 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: 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: {
@@ -394,13 +544,8 @@ export var createPlugin = function createPlugin(api, getIntl) {
       var dom = editorView.dom;
       var 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
       var resizeObserverWidth = new ResizeObserver(rafSchedule(function (entries) {
-        var editorContentArea = entries[0].target;
-        var editorWidthRight = editorContentArea.getBoundingClientRect().right;
-        var editorWidthLeft = editorContentArea.getBoundingClientRect().left;
-
-        // Update the plugin state when the height changes
         var pluginState = key.getState(editorView.state);
         if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
           var isResizerResizing = !!dom.querySelector('.is-resizing');
@@ -409,17 +554,18 @@ export var createPlugin = function 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: editorWidthLeft,
-                editorWidthRight: editorWidthRight
-              });
-            }
+            var _editorContentArea = entries[0].target;
+            var editorWidthRight = _editorContentArea.getBoundingClientRect().right;
+            var editorWidthLeft = _editorContentArea.getBoundingClientRect().left;
+            transaction.setMeta(key, {
+              editorWidthLeft: editorWidthLeft,
+              editorWidthRight: editorWidthRight
+            });
           }
           editorView.dispatch(transaction);
         }
       }));
-      if (editorContentArea && fg('platform_editor_elements_drag_and_drop_ed_23394')) {
+      if (editorContentArea) {
         resizeObserverWidth.observe(editorContentArea);
       }
 
@@ -427,7 +573,7 @@ export var createPlugin = function createPlugin(api, getIntl) {
       var pragmaticCleanup = destroyFn(api);
       return {
         destroy: function destroy() {
-          if (editorContentArea && fg('platform_editor_elements_drag_and_drop_ed_23394')) {
+          if (editorContentArea) {
             resizeObserverWidth.unobserve(editorContentArea);
           }
           pragmaticCleanup();