@atlaskit/editor-plugin-block-controls 3.4.0 → 3.5.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.5.1
+
+### Patch Changes
+
+- [#128258](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128258)
+  [`99b0f3de4fdf4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/99b0f3de4fdf4) -
+  Update logic for remapping decorations for nodes to fix issues where anchorName is no longer valid
+
+## 3.5.0
+
+### Minor Changes
+
+- [#128788](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128788)
+  [`83a4d1ba203b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/83a4d1ba203b0) -
+  [ux] update icons
+
 ## 3.4.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -36,7 +36,7 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     }, element, key);
     return element;
   }, {
-    side: -1,
+    side: -2,
     type: TYPE_QUICK_INSERT
   });
 };

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

@@ -187,7 +187,7 @@ var getDecorationAtPos = function getDecorationAtPos(decorations, pos, to) {
   return nodeDecAtActivePos;
 };
 var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _latestActiveNode11, _latestActiveNode12, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+  var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -202,14 +202,20 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     isShiftDown = currentState.isShiftDown,
     lastDragCancelled = currentState.lastDragCancelled;
   var isActiveNodeDeleted = false;
+  var _getTrMetadata = (0, _transactions.getTrMetadata)(tr),
+    from = _getTrMetadata.from,
+    to = _getTrMetadata.to,
+    numReplaceSteps = _getTrMetadata.numReplaceSteps,
+    isAllText = _getTrMetadata.isAllText,
+    isReplacedWithSameSize = _getTrMetadata.isReplacedWithSameSize;
 
   // When steps exist, remap existing decorations, activeNode and multi select positions
   if (tr.docChanged) {
     decorations = decorations.map(tr.mapping, tr.doc);
     if (activeNode) {
-      var mappedPos = tr.mapping.mapResult(activeNode.pos);
-      isActiveNodeDeleted = mappedPos.deleted;
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+        var mappedPos = tr.mapping.mapResult(activeNode.pos);
+        isActiveNodeDeleted = mappedPos.deleted;
         activeNode = {
           pos: mappedPos.pos,
           anchorName: activeNode.anchorName,
@@ -217,13 +223,15 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
         };
       } else {
         var _mappedRootPos$pos, _mappedRootPos;
+        var _mappedPos = tr.mapping.mapResult(activeNode.pos, -1);
+        isActiveNodeDeleted = _mappedPos.deletedAfter;
         // for editor controls, remap the rootPos as well
         var mappedRootPos;
         if (activeNode.rootPos !== undefined) {
-          mappedRootPos = tr.mapping.mapResult(activeNode.rootPos);
+          mappedRootPos = tr.mapping.mapResult(activeNode.rootPos, -1);
         }
         activeNode = {
-          pos: mappedPos.pos,
+          pos: _mappedPos.pos,
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType,
           rootPos: (_mappedRootPos$pos = (_mappedRootPos = mappedRootPos) === null || _mappedRootPos === void 0 ? void 0 : _mappedRootPos.pos) !== null && _mappedRootPos$pos !== void 0 ? _mappedRootPos$pos : activeNode.rootPos,
@@ -244,16 +252,11 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   if (multiSelectDnD && flags.isMultiSelectEnabled) {
     multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || tr.selection.empty ? undefined : multiSelectDnD;
   }
-  var _getTrMetadata = (0, _transactions.getTrMetadata)(tr),
-    from = _getTrMetadata.from,
-    to = _getTrMetadata.to,
-    numReplaceSteps = _getTrMetadata.numReplaceSteps,
-    isAllText = _getTrMetadata.isAllText;
   var maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
   var latestActiveNode;
   if ((0, _platformFeatureFlags.fg)('platform_editor_remove_drag_handle_fix')) {
     latestActiveNode = meta === null || meta === void 0 ? void 0 : meta.activeNode;
-    if (!latestActiveNode && !isActiveNodeDeleted) {
+    if (!latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
       latestActiveNode = activeNode;
     }
   } else {
@@ -271,8 +274,8 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     decorations = decorations.remove(oldNodeDecs);
     var newNodeDecs = (0, _decorationsAnchor.nodeDecorations)(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
     decorations = decorations.add(newState.doc, newNodeDecs);
-    if (latestActiveNode && !isActiveNodeDeleted) {
-      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+      if (latestActiveNode && !isActiveNodeDeleted) {
         // Find the newly minted node decs that touch the active node
         var findNewNodeDecs = (0, _decorationsAnchor.findNodeDecs)(decorations, latestActiveNode.pos - 1, to);
 
@@ -290,7 +293,10 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
           latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
           latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
         }
-      } else {
+      }
+    } else {
+      // active node may have been deleted or replaced with another of the same size, if replaced go ahead and remap the active node
+      if (latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
         var _nodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.pos, to);
         var rootNodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.rootPos, to);
         if (_nodeDecAtActivePos || rootNodeDecAtActivePos) {
@@ -326,7 +332,7 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
   var shouldRemoveHandle = false;
   if ((0, _platformFeatureFlags.fg)('platform_editor_remove_drag_handle_fix')) {
     // If the active node is missing, we need to remove the handle
-    shouldRemoveHandle = latestActiveNode ? isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) : true;
+    shouldRemoveHandle = latestActiveNode ? isResizerResizing || isActiveNodeDeleted && !isReplacedWithSameSize || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) : true;
   } else {
     // Remove handle dec when explicitly hidden, a node is resizing, activeNode pos was deleted, or DnD moved a node
     shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
@@ -336,21 +342,22 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
     var oldHandle = (0, _decorationsDragHandle.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);
     if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-      var oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations);
+      var _activeNode7, _activeNode8;
+      var oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.rootPos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
     }
   } else if (api) {
     var _latestActiveNode5;
     if (shouldRecreateHandle) {
-      var _activeNode7, _activeNode8, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
-      var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.pos);
+      var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
+      var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
       decorations = decorations.remove(_oldHandle);
       var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions);
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-      var _activeNode9, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
-      var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
+      var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
+      var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
       var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType);
       decorations = decorations.add(newState.doc, [quickInsertButton]);
@@ -380,7 +387,15 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
       decorations = decorations.add(newState.doc, [(0, _decorationsDragHandle.emptyParagraphNodeDecorations)()]);
     }
   }
-  var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
+  var newActiveNode;
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    var _latestActiveNode11, _latestActiveNode12;
+    // remove isEmptyDoc check and let decorations render and determine their own visibility
+    newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
+  } else {
+    var _latestActiveNode13, _latestActiveNode14;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorationsDragHandle.findHandleDec)(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
+  }
   var isMenuOpenNew = isMenuOpen;
   if (_consts.BLOCK_MENU_ENABLED && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     if (meta !== null && meta !== void 0 && meta.closeMenu) {

package/dist/cjs/pm-plugins/utils/transactions.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isStepText = exports.isStepDelete = exports.getTrMetadata = void 0;
 var _transform = require("@atlaskit/editor-prosemirror/transform");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 /**
  * Checks if step adds inline char
  * @param s
@@ -25,6 +26,20 @@ var isStepDelete = exports.isStepDelete = function isStepDelete(s) {
   return s.to === s.from + 1 && content.size === 0;
 };
 
+/**
+ * Check if content being replaced is replaced with another of the same size
+ * This can occur on empty docs and 'backspace' is pressed, the paragraph node is re-drawn
+ * @param s
+ * @returns True if content being replaced is replaced with another of the same size
+ */
+var isStepContentReplacedWithAnotherOfSameSize = function isStepContentReplacedWithAnotherOfSameSize(s) {
+  if (s instanceof _transform.ReplaceAroundStep) {
+    var replacedContentSize = s.to - s.from;
+    return s.slice.content.size === replacedContentSize;
+  }
+  return false;
+};
+
 /**
  * Get metadata from the transaction.
  * @param tr
@@ -37,11 +52,15 @@ var getTrMetadata = exports.getTrMetadata = function getTrMetadata(tr) {
   var to;
   var numReplaceSteps = 0;
   var isAllText = true;
+  var isReplacedWithSameSize = false;
   tr.steps.forEach(function (s) {
     if (s instanceof _transform.ReplaceStep || s instanceof _transform.ReplaceAroundStep) {
       if (s instanceof _transform.ReplaceAroundStep || s instanceof _transform.ReplaceStep && !isStepText(s) && !isStepDelete(s)) {
         isAllText = false;
       }
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        isReplacedWithSameSize = isStepContentReplacedWithAnotherOfSameSize(s);
+      }
       var mappedTo = tr.mapping.map(s.to);
       var $to = s.from + s.slice.size;
       $to = $to > mappedTo ? $to : mappedTo;
@@ -60,6 +79,7 @@ var getTrMetadata = exports.getTrMetadata = function getTrMetadata(tr) {
     from: from,
     to: to,
     numReplaceSteps: numReplaceSteps,
-    isAllText: isAllText
+    isAllText: isAllText,
+    isReplacedWithSameSize: isReplacedWithSameSize
   };
 };

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

@@ -20,6 +20,7 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
+var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/utility/drag-handle-vertical"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
@@ -661,9 +662,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDragStart: handleIconDragStart
-      }, (0, _react2.jsx)(_dragHandler.default, {
+      }, (0, _react2.jsx)(_dragHandleVertical.default, {
+        spacing: "spacious",
         label: "",
-        size: "medium"
+        LEGACY_fallbackIcon: _dragHandler.default,
+        LEGACY_size: "medium"
       })))
     );
   };

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -25,7 +25,7 @@ export const quickInsertButtonDecoration = (api, formatMessage, rootPos, anchorN
     }), element, key);
     return element;
   }, {
-    side: -1,
+    side: -2,
     type: TYPE_QUICK_INSERT
   });
 };

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

@@ -181,7 +181,7 @@ const getDecorationAtPos = (decorations, pos, to) => {
   return nodeDecAtActivePos;
 };
 export const newApply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
-  var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _latestActiveNode11, _latestActiveNode12, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+  var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   let {
     activeNode,
     decorations,
@@ -200,14 +200,21 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     lastDragCancelled
   } = currentState;
   let isActiveNodeDeleted = false;
+  const {
+    from,
+    to,
+    numReplaceSteps,
+    isAllText,
+    isReplacedWithSameSize
+  } = getTrMetadata(tr);
 
   // When steps exist, remap existing decorations, activeNode and multi select positions
   if (tr.docChanged) {
     decorations = decorations.map(tr.mapping, tr.doc);
     if (activeNode) {
-      const mappedPos = tr.mapping.mapResult(activeNode.pos);
-      isActiveNodeDeleted = mappedPos.deleted;
       if (editorExperiment('platform_editor_controls', 'control')) {
+        const mappedPos = tr.mapping.mapResult(activeNode.pos);
+        isActiveNodeDeleted = mappedPos.deleted;
         activeNode = {
           pos: mappedPos.pos,
           anchorName: activeNode.anchorName,
@@ -215,10 +222,12 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
         };
       } else {
         var _mappedRootPos$pos, _mappedRootPos;
+        const mappedPos = tr.mapping.mapResult(activeNode.pos, -1);
+        isActiveNodeDeleted = mappedPos.deletedAfter;
         // for editor controls, remap the rootPos as well
         let mappedRootPos;
         if (activeNode.rootPos !== undefined) {
-          mappedRootPos = tr.mapping.mapResult(activeNode.rootPos);
+          mappedRootPos = tr.mapping.mapResult(activeNode.rootPos, -1);
         }
         activeNode = {
           pos: mappedPos.pos,
@@ -242,17 +251,11 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   if (multiSelectDnD && flags.isMultiSelectEnabled) {
     multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || tr.selection.empty ? undefined : multiSelectDnD;
   }
-  const {
-    from,
-    to,
-    numReplaceSteps,
-    isAllText
-  } = getTrMetadata(tr);
   const maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
   let latestActiveNode;
   if (fg('platform_editor_remove_drag_handle_fix')) {
     latestActiveNode = meta === null || meta === void 0 ? void 0 : meta.activeNode;
-    if (!latestActiveNode && !isActiveNodeDeleted) {
+    if (!latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
       latestActiveNode = activeNode;
     }
   } else {
@@ -270,8 +273,8 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     decorations = decorations.remove(oldNodeDecs);
     const newNodeDecs = nodeDecorations(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
     decorations = decorations.add(newState.doc, newNodeDecs);
-    if (latestActiveNode && !isActiveNodeDeleted) {
-      if (editorExperiment('platform_editor_controls', 'control')) {
+    if (editorExperiment('platform_editor_controls', 'control')) {
+      if (latestActiveNode && !isActiveNodeDeleted) {
         // Find the newly minted node decs that touch the active node
         const findNewNodeDecs = findNodeDecs(decorations, latestActiveNode.pos - 1, to);
 
@@ -287,7 +290,10 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
           latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
           latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
         }
-      } else {
+      }
+    } else {
+      // active node may have been deleted or replaced with another of the same size, if replaced go ahead and remap the active node
+      if (latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
         const nodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.pos, to);
         const rootNodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.rootPos, to);
         if (nodeDecAtActivePos || rootNodeDecAtActivePos) {
@@ -323,7 +329,7 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
   let shouldRemoveHandle = false;
   if (fg('platform_editor_remove_drag_handle_fix')) {
     // If the active node is missing, we need to remove the handle
-    shouldRemoveHandle = latestActiveNode ? isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) : true;
+    shouldRemoveHandle = latestActiveNode ? isResizerResizing || isActiveNodeDeleted && !isReplacedWithSameSize || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) : true;
   } else {
     // Remove handle dec when explicitly hidden, a node is resizing, activeNode pos was deleted, or DnD moved a node
     shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
@@ -333,21 +339,22 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
     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);
     if (editorExperiment('platform_editor_controls', 'variant1')) {
-      const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations);
+      var _activeNode7, _activeNode8;
+      const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.rootPos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
     }
   } else if (api) {
     var _latestActiveNode5;
     if (shouldRecreateHandle) {
-      var _activeNode7, _activeNode8, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
-      const oldHandle = findHandleDec(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.pos);
+      var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
+      const oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
       decorations = decorations.remove(oldHandle);
       const handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions);
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
-      var _activeNode9, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
-      const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
+      var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
+      const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
       const quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType);
       decorations = decorations.add(newState.doc, [quickInsertButton]);
@@ -377,7 +384,15 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
       decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
     }
   }
-  const newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
+  let newActiveNode;
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    var _latestActiveNode11, _latestActiveNode12;
+    // remove isEmptyDoc check and let decorations render and determine their own visibility
+    newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
+  } else {
+    var _latestActiveNode13, _latestActiveNode14;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
+  }
   let isMenuOpenNew = isMenuOpen;
   if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
     if (meta !== null && meta !== void 0 && meta.closeMenu) {

package/dist/es2019/pm-plugins/utils/transactions.js

@@ -1,4 +1,5 @@
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 /**
  * Checks if step adds inline char
  * @param s
@@ -19,6 +20,20 @@ export const isStepDelete = s => {
   return s.to === s.from + 1 && content.size === 0;
 };
 
+/**
+ * Check if content being replaced is replaced with another of the same size
+ * This can occur on empty docs and 'backspace' is pressed, the paragraph node is re-drawn
+ * @param s
+ * @returns True if content being replaced is replaced with another of the same size
+ */
+const isStepContentReplacedWithAnotherOfSameSize = s => {
+  if (s instanceof ReplaceAroundStep) {
+    const replacedContentSize = s.to - s.from;
+    return s.slice.content.size === replacedContentSize;
+  }
+  return false;
+};
+
 /**
  * Get metadata from the transaction.
  * @param tr
@@ -31,11 +46,15 @@ export const getTrMetadata = tr => {
   let to;
   let numReplaceSteps = 0;
   let isAllText = true;
+  let isReplacedWithSameSize = false;
   tr.steps.forEach(s => {
     if (s instanceof ReplaceStep || s instanceof ReplaceAroundStep) {
       if (s instanceof ReplaceAroundStep || s instanceof ReplaceStep && !isStepText(s) && !isStepDelete(s)) {
         isAllText = false;
       }
+      if (editorExperiment('platform_editor_controls', 'variant1')) {
+        isReplacedWithSameSize = isStepContentReplacedWithAnotherOfSameSize(s);
+      }
       const mappedTo = tr.mapping.map(s.to);
       let $to = s.from + s.slice.size;
       $to = $to > mappedTo ? $to : mappedTo;
@@ -54,6 +73,7 @@ export const getTrMetadata = tr => {
     from,
     to,
     numReplaceSteps,
-    isAllText
+    isAllText,
+    isReplacedWithSameSize
   };
 };

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

@@ -17,6 +17,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+import DragHandleVerticalIcon from '@atlaskit/icon/utility/drag-handle-vertical';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
@@ -646,9 +647,11 @@ export const DragHandle = ({
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     ,
     onDragStart: handleIconDragStart
-  }, jsx(DragHandlerIcon, {
+  }, jsx(DragHandleVerticalIcon, {
+    spacing: "spacious",
     label: "",
-    size: "medium"
+    LEGACY_fallbackIcon: DragHandlerIcon,
+    LEGACY_size: "medium"
   })));
   return !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873') ? jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -29,7 +29,7 @@ export var quickInsertButtonDecoration = function quickInsertButtonDecoration(ap
     }, element, key);
     return element;
   }, {
-    side: -1,
+    side: -2,
     type: TYPE_QUICK_INSERT
   });
 };

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

@@ -180,7 +180,7 @@ var getDecorationAtPos = function getDecorationAtPos(decorations, pos, to) {
   return nodeDecAtActivePos;
 };
 export var newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
-  var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _latestActiveNode11, _latestActiveNode12, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+  var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -195,14 +195,20 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     isShiftDown = currentState.isShiftDown,
     lastDragCancelled = currentState.lastDragCancelled;
   var isActiveNodeDeleted = false;
+  var _getTrMetadata = getTrMetadata(tr),
+    from = _getTrMetadata.from,
+    to = _getTrMetadata.to,
+    numReplaceSteps = _getTrMetadata.numReplaceSteps,
+    isAllText = _getTrMetadata.isAllText,
+    isReplacedWithSameSize = _getTrMetadata.isReplacedWithSameSize;
 
   // When steps exist, remap existing decorations, activeNode and multi select positions
   if (tr.docChanged) {
     decorations = decorations.map(tr.mapping, tr.doc);
     if (activeNode) {
-      var mappedPos = tr.mapping.mapResult(activeNode.pos);
-      isActiveNodeDeleted = mappedPos.deleted;
       if (editorExperiment('platform_editor_controls', 'control')) {
+        var mappedPos = tr.mapping.mapResult(activeNode.pos);
+        isActiveNodeDeleted = mappedPos.deleted;
         activeNode = {
           pos: mappedPos.pos,
           anchorName: activeNode.anchorName,
@@ -210,13 +216,15 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
         };
       } else {
         var _mappedRootPos$pos, _mappedRootPos;
+        var _mappedPos = tr.mapping.mapResult(activeNode.pos, -1);
+        isActiveNodeDeleted = _mappedPos.deletedAfter;
         // for editor controls, remap the rootPos as well
         var mappedRootPos;
         if (activeNode.rootPos !== undefined) {
-          mappedRootPos = tr.mapping.mapResult(activeNode.rootPos);
+          mappedRootPos = tr.mapping.mapResult(activeNode.rootPos, -1);
         }
         activeNode = {
-          pos: mappedPos.pos,
+          pos: _mappedPos.pos,
           anchorName: activeNode.anchorName,
           nodeType: activeNode.nodeType,
           rootPos: (_mappedRootPos$pos = (_mappedRootPos = mappedRootPos) === null || _mappedRootPos === void 0 ? void 0 : _mappedRootPos.pos) !== null && _mappedRootPos$pos !== void 0 ? _mappedRootPos$pos : activeNode.rootPos,
@@ -237,16 +245,11 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
   if (multiSelectDnD && flags.isMultiSelectEnabled) {
     multiSelectDnD = (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || tr.selection.empty ? undefined : multiSelectDnD;
   }
-  var _getTrMetadata = getTrMetadata(tr),
-    from = _getTrMetadata.from,
-    to = _getTrMetadata.to,
-    numReplaceSteps = _getTrMetadata.numReplaceSteps,
-    isAllText = _getTrMetadata.isAllText;
   var maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
   var latestActiveNode;
   if (fg('platform_editor_remove_drag_handle_fix')) {
     latestActiveNode = meta === null || meta === void 0 ? void 0 : meta.activeNode;
-    if (!latestActiveNode && !isActiveNodeDeleted) {
+    if (!latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
       latestActiveNode = activeNode;
     }
   } else {
@@ -264,8 +267,8 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     decorations = decorations.remove(oldNodeDecs);
     var newNodeDecs = nodeDecorations(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
     decorations = decorations.add(newState.doc, newNodeDecs);
-    if (latestActiveNode && !isActiveNodeDeleted) {
-      if (editorExperiment('platform_editor_controls', 'control')) {
+    if (editorExperiment('platform_editor_controls', 'control')) {
+      if (latestActiveNode && !isActiveNodeDeleted) {
         // Find the newly minted node decs that touch the active node
         var findNewNodeDecs = findNodeDecs(decorations, latestActiveNode.pos - 1, to);
 
@@ -283,7 +286,10 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
           latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
           latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
         }
-      } else {
+      }
+    } else {
+      // active node may have been deleted or replaced with another of the same size, if replaced go ahead and remap the active node
+      if (latestActiveNode && (!isActiveNodeDeleted || isReplacedWithSameSize)) {
         var _nodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.pos, to);
         var rootNodeDecAtActivePos = getDecorationAtPos(decorations, latestActiveNode.rootPos, to);
         if (_nodeDecAtActivePos || rootNodeDecAtActivePos) {
@@ -319,7 +325,7 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
   var shouldRemoveHandle = false;
   if (fg('platform_editor_remove_drag_handle_fix')) {
     // If the active node is missing, we need to remove the handle
-    shouldRemoveHandle = latestActiveNode ? isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) : true;
+    shouldRemoveHandle = latestActiveNode ? isResizerResizing || isActiveNodeDeleted && !isReplacedWithSameSize || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved) : true;
   } else {
     // Remove handle dec when explicitly hidden, a node is resizing, activeNode pos was deleted, or DnD moved a node
     shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
@@ -329,21 +335,22 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
     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);
     if (editorExperiment('platform_editor_controls', 'variant1')) {
-      var oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations);
+      var _activeNode7, _activeNode8;
+      var oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.rootPos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.rootPos);
       decorations = decorations.remove(oldQuickInsertButton);
     }
   } else if (api) {
     var _latestActiveNode5;
     if (shouldRecreateHandle) {
-      var _activeNode7, _activeNode8, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
-      var _oldHandle = findHandleDec(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.pos);
+      var _activeNode9, _activeNode10, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
+      var _oldHandle = findHandleDec(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.pos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.pos);
       decorations = decorations.remove(_oldHandle);
       var handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions);
       decorations = decorations.add(newState.doc, [handleDec]);
     }
     if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
-      var _activeNode9, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
-      var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
+      var _activeNode11, _activeNode12, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
+      var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.rootPos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.rootPos);
       decorations = decorations.remove(_oldQuickInsertButton);
       var quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType);
       decorations = decorations.add(newState.doc, [quickInsertButton]);
@@ -373,7 +380,15 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
       decorations = decorations.add(newState.doc, [emptyParagraphNodeDecorations()]);
     }
   }
-  var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
+  var newActiveNode;
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    var _latestActiveNode11, _latestActiveNode12;
+    // remove isEmptyDoc check and let decorations render and determine their own visibility
+    newActiveNode = !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length === 0 ? null : latestActiveNode;
+  } else {
+    var _latestActiveNode13, _latestActiveNode14;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
+  }
   var isMenuOpenNew = isMenuOpen;
   if (BLOCK_MENU_ENABLED && editorExperiment('platform_editor_controls', 'variant1')) {
     if (meta !== null && meta !== void 0 && meta.closeMenu) {

package/dist/esm/pm-plugins/utils/transactions.js

@@ -1,4 +1,5 @@
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 /**
  * Checks if step adds inline char
  * @param s
@@ -19,6 +20,20 @@ export var isStepDelete = function isStepDelete(s) {
   return s.to === s.from + 1 && content.size === 0;
 };
 
+/**
+ * Check if content being replaced is replaced with another of the same size
+ * This can occur on empty docs and 'backspace' is pressed, the paragraph node is re-drawn
+ * @param s
+ * @returns True if content being replaced is replaced with another of the same size
+ */
+var isStepContentReplacedWithAnotherOfSameSize = function isStepContentReplacedWithAnotherOfSameSize(s) {
+  if (s instanceof ReplaceAroundStep) {
+    var replacedContentSize = s.to - s.from;
+    return s.slice.content.size === replacedContentSize;
+  }
+  return false;
+};
+
 /**
  * Get metadata from the transaction.
  * @param tr
@@ -31,11 +46,15 @@ export var getTrMetadata = function getTrMetadata(tr) {
   var to;
   var numReplaceSteps = 0;
   var isAllText = true;
+  var isReplacedWithSameSize = false;
   tr.steps.forEach(function (s) {
     if (s instanceof ReplaceStep || s instanceof ReplaceAroundStep) {
       if (s instanceof ReplaceAroundStep || s instanceof ReplaceStep && !isStepText(s) && !isStepDelete(s)) {
         isAllText = false;
       }
+      if (editorExperiment('platform_editor_controls', 'variant1')) {
+        isReplacedWithSameSize = isStepContentReplacedWithAnotherOfSameSize(s);
+      }
       var mappedTo = tr.mapping.map(s.to);
       var $to = s.from + s.slice.size;
       $to = $to > mappedTo ? $to : mappedTo;
@@ -54,6 +73,7 @@ export var getTrMetadata = function getTrMetadata(tr) {
     from: from,
     to: to,
     numReplaceSteps: numReplaceSteps,
-    isAllText: isAllText
+    isAllText: isAllText,
+    isReplacedWithSameSize: isReplacedWithSameSize
   };
 };

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

@@ -22,6 +22,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+import DragHandleVerticalIcon from '@atlaskit/icon/utility/drag-handle-vertical';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
@@ -658,9 +659,11 @@ export var DragHandle = function DragHandle(_ref) {
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
         onDragStart: handleIconDragStart
-      }, jsx(DragHandlerIcon, {
+      }, jsx(DragHandleVerticalIcon, {
+        spacing: "spacious",
         label: "",
-        size: "medium"
+        LEGACY_fallbackIcon: DragHandlerIcon,
+        LEGACY_size: "medium"
       })))
     );
   };

package/dist/types/pm-plugins/utils/transactions.d.ts

@@ -5,6 +5,7 @@ interface TransactionMetadata {
     to: number;
     numReplaceSteps: number;
     isAllText: boolean;
+    isReplacedWithSameSize: boolean;
 }
 /**
  * Checks if step adds inline char

package/dist/types-ts4.5/pm-plugins/utils/transactions.d.ts

@@ -5,6 +5,7 @@ interface TransactionMetadata {
     to: number;
     numReplaceSteps: number;
     isAllText: boolean;
+    isReplacedWithSameSize: boolean;
 }
 /**
  * Checks if step adds inline char

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.4.0",
+	"version": "3.5.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.11.0",
+		"@atlaskit/editor-common": "^102.12.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",