@atlaskit/editor-plugin-block-controls 11.2.0 → 11.2.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 11.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.2.1
+
+### Patch Changes
+
+- [`4642f37c59f0f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4642f37c59f0f) -
+  Fix Remix button not appearing when hovering over tables in live page view mode. When the
+  `platform_editor_native_anchor_with_dnd` experiment is disabled, table rows only have
+  `data-node-anchor` (not `data-drag-handler-anchor-name`), so hover detection and anchor resolution
+  now fall back to `data-node-anchor`. Also fixes right-edge positioning for wide/max breakout
+  tables using `getBoundingClientRect`.
+- Updated dependencies
+
 ## 11.2.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -99,6 +99,19 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
   }
   var rootElement = target === null || target === void 0 ? void 0 : target.closest(isNativeAnchorSupported ? getDefaultNodeSelector() : "[data-drag-handler-anchor-name]");
 
+  // Fallback for table nodes in view mode: the table-anchor-names plugin sets data-node-anchor on
+  // the first <tr> element.
+  // - When platform_editor_native_anchor_with_dnd is disabled, the primary closest() uses
+  //   [data-drag-handler-anchor-name] and misses table rows. Try data-node-anchor via closest().
+  // - For wide/max breakout tables, hovering in the left/right margin area of the full-viewport-
+  //   width breakout wrapper (ak-editor-breakout-mark) sets event.target to the wrapper div, which
+  //   has no anchor attribute. Use querySelector to find the [data-node-anchor] descendant inside.
+  // Both cases apply only in view mode with right-side remix controls.
+  if (!rootElement && isViewMode && rightSideControlsEnabled) {
+    var _ref3, _target$closest;
+    rootElement = (_ref3 = (_target$closest = target === null || target === void 0 ? void 0 : target.closest("[".concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]"))) !== null && _target$closest !== void 0 ? _target$closest : target instanceof HTMLElement ? target.querySelector("[".concat(_domAttrName.NODE_ANCHOR_ATTR_NAME, "]")) : null) !== null && _ref3 !== void 0 ? _ref3 : null;
+  }
+
   // When hovering over the right-edge button (rendered in a portal outside the block), resolve the
   // block from the container's anchor so activeNode stays set and the button remains visible.
   if (!rootElement && rightSideControlsEnabled && (0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg')) {
@@ -111,7 +124,7 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     }
   }
   if (rootElement) {
-    var _rootElement$parentEl;
+    var _rootElement$parentEl, _rootElement$getAttri2;
     // We want to exlude handles from showing for empty paragraph and heading nodes
     if (isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
@@ -184,6 +197,11 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       anchorName = rootElement.getAttribute((0, _domAttrName.getAnchorAttrName)());
+      // Fallback for table nodes that only have data-node-anchor (not data-drag-handler-anchor-name).
+      if (!anchorName) {
+        var _rootElement$getAttri;
+        anchorName = (_rootElement$getAttri = rootElement.getAttribute(_domAttrName.NODE_ANCHOR_ATTR_NAME)) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : anchorName;
+      }
     }
 
     // No need to update handle position if its already there
@@ -231,13 +249,16 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       if (targetPos !== rootPos) {
         var rootDOM = view.nodeDOM(rootPos);
         if (rootDOM instanceof HTMLElement) {
-          var _rootDOM$getAttribute;
-          rootAnchorName = (_rootDOM$getAttribute = rootDOM.getAttribute((0, _domAttrName.getAnchorAttrName)())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
-          rootNodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootDOM) : rootDOM.getAttribute('data-drag-handler-node-type');
+          var _ref4, _rootDOM$getAttribute, _rootDOM$getAttribute2;
+          rootAnchorName = (_ref4 = (_rootDOM$getAttribute = rootDOM.getAttribute((0, _domAttrName.getAnchorAttrName)())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : rootDOM.getAttribute(_domAttrName.NODE_ANCHOR_ATTR_NAME)) !== null && _ref4 !== void 0 ? _ref4 : undefined;
+          rootNodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootDOM) : // Fallback: breakout mark wrappers have no data-drag-handler-node-type;
+          // use data-prosemirror-node-name instead.
+          (_rootDOM$getAttribute2 = rootDOM.getAttribute('data-drag-handler-node-type')) !== null && _rootDOM$getAttribute2 !== void 0 ? _rootDOM$getAttribute2 : (0, _domAttrName.getTypeNameFromDom)(rootDOM);
         }
       }
     }
-    var nodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
+    var nodeType = isNativeAnchorSupported ? (0, _domAttrName.getTypeNameFromDom)(rootElement) : // Fallback for table nodes: tr has data-prosemirror-node-name but not data-drag-handler-node-type.
+    (_rootElement$getAttri2 = rootElement.getAttribute('data-drag-handler-node-type')) !== null && _rootElement$getAttri2 !== void 0 ? _rootElement$getAttri2 : (0, _domAttrName.getTypeNameFromDom)(rootElement);
     if (nodeType) {
       // platform_editor_controls note: enables quick insert
       if (toolbarFlagsEnabled) {

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.key = exports.getDecorations = exports.getBlockControlsMeta = exports.createPlugin = exports.apply = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _browserApis = require("@atlaskit/browser-apis");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _nodeAnchor = require("@atlaskit/editor-common/node-anchor");
@@ -56,7 +57,8 @@ var isHTMLElement = function isHTMLElement(element) {
   return element instanceof HTMLElement;
 };
 var destroyFn = function destroyFn(api, editorView) {
-  var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var _getDocument$querySel, _getDocument;
+  var scrollable = (_getDocument$querySel = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector('.fabric-editor-popup-scroll-parent')) !== null && _getDocument$querySel !== void 0 ? _getDocument$querySel : null;
   var cleanupFn = [];
   if (scrollable) {
     cleanupFn.push((0, _element.autoScrollForElements)({
@@ -275,10 +277,11 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   var meta = tr.getMeta(key);
   var hasDocumentSizeBreachedThreshold = api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.limitedModePluginKey.getState(newState)) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.documentSizeBreachesThreshold;
   if (hasDocumentSizeBreachedThreshold) {
+    var _getDocument$querySel2, _getDocument2;
     /**
      * INFO: This if statement is a duplicate of the logic in destroy(). When the threshold is breached and we enter limited mode, we want to trigger the cleanup logic in destroy().
      */
-    var editorContentArea = document.querySelector('.fabric-editor-popup-scroll-parent');
+    var editorContentArea = (_getDocument$querySel2 = (_getDocument2 = (0, _browserApis.getDocument)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.querySelector('.fabric-editor-popup-scroll-parent')) !== null && _getDocument$querySel2 !== void 0 ? _getDocument$querySel2 : null;
     if (editorContentArea && resizeObserverWidth) {
       resizeObserverWidth.unobserve(editorContentArea);
     }
@@ -441,6 +444,16 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     // Remove handle dec when editor is blurred
     shouldRemoveHandle = shouldRemoveHandle || (meta === null || meta === void 0 ? void 0 : meta.editorBlurred);
   }
+
+  // In view mode with right-side controls, remove any lingering drag handle decorations
+  // (they may carry over from edit mode). Only remove drag handles specifically, not
+  // the remix button decorations (those are managed separately via showInViewMode).
+  if (isViewMode && rightSideControlsEnabled) {
+    var allHandleDecs = (0, _decorationsDragHandle.findHandleDec)(decorations, 0, newState.doc.content.size);
+    if (allHandleDecs.length > 0) {
+      decorations = decorations.remove(allHandleDecs);
+    }
+  }
   if (shouldRemoveHandle) {
     var _activeNode5, _activeNode6;
     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);
@@ -808,7 +821,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
     },
     props: {
       decorations: function decorations(state) {
-        var _api$limitedMode2, _api$editorDisabled, _key$getState2;
+        var _api$limitedMode2, _api$editorDisabled, _key$getState2, _api$editorViewMode3;
         if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2 = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2 !== void 0 && _api$limitedMode2.enabled) {
           return;
         }
@@ -821,7 +834,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
             return;
           }
         }
-        return (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
+        var decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
+        // In view mode with right-side controls, remove any lingering drag-handle decorations
+        // (created in edit mode) that may not have been cleaned up on mode switch.
+        if (decorationSet && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
+          var handleDecs = (0, _decorationsDragHandle.findHandleDec)(decorationSet, 0, state.doc.content.size);
+          if (handleDecs.length > 0) {
+            decorationSet = decorationSet.remove(handleDecs);
+          }
+        }
+        return decorationSet;
       },
       handleDOMEvents: {
         drop: function drop(view, event) {

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -91,6 +91,19 @@ export const handleMouseOver = (view, event, api) => {
   }
   let rootElement = target === null || target === void 0 ? void 0 : target.closest(isNativeAnchorSupported ? getDefaultNodeSelector() : `[data-drag-handler-anchor-name]`);
 
+  // Fallback for table nodes in view mode: the table-anchor-names plugin sets data-node-anchor on
+  // the first <tr> element.
+  // - When platform_editor_native_anchor_with_dnd is disabled, the primary closest() uses
+  //   [data-drag-handler-anchor-name] and misses table rows. Try data-node-anchor via closest().
+  // - For wide/max breakout tables, hovering in the left/right margin area of the full-viewport-
+  //   width breakout wrapper (ak-editor-breakout-mark) sets event.target to the wrapper div, which
+  //   has no anchor attribute. Use querySelector to find the [data-node-anchor] descendant inside.
+  // Both cases apply only in view mode with right-side remix controls.
+  if (!rootElement && isViewMode && rightSideControlsEnabled) {
+    var _ref, _target$closest;
+    rootElement = (_ref = (_target$closest = target === null || target === void 0 ? void 0 : target.closest(`[${NODE_ANCHOR_ATTR_NAME}]`)) !== null && _target$closest !== void 0 ? _target$closest : target instanceof HTMLElement ? target.querySelector(`[${NODE_ANCHOR_ATTR_NAME}]`) : null) !== null && _ref !== void 0 ? _ref : null;
+  }
+
   // When hovering over the right-edge button (rendered in a portal outside the block), resolve the
   // block from the container's anchor so activeNode stays set and the button remains visible.
   if (!rootElement && rightSideControlsEnabled && fg('confluence_remix_button_right_side_block_fg')) {
@@ -103,7 +116,7 @@ export const handleMouseOver = (view, event, api) => {
     }
   }
   if (rootElement) {
-    var _rootElement$parentEl;
+    var _rootElement$parentEl, _rootElement$getAttri2;
     // We want to exlude handles from showing for empty paragraph and heading nodes
     if (isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
@@ -176,6 +189,11 @@ export const handleMouseOver = (view, event, api) => {
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       anchorName = rootElement.getAttribute(getAnchorAttrName());
+      // Fallback for table nodes that only have data-node-anchor (not data-drag-handler-anchor-name).
+      if (!anchorName) {
+        var _rootElement$getAttri;
+        anchorName = (_rootElement$getAttri = rootElement.getAttribute(NODE_ANCHOR_ATTR_NAME)) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : anchorName;
+      }
     }
 
     // No need to update handle position if its already there
@@ -223,13 +241,16 @@ export const handleMouseOver = (view, event, api) => {
       if (targetPos !== rootPos) {
         const rootDOM = view.nodeDOM(rootPos);
         if (rootDOM instanceof HTMLElement) {
-          var _rootDOM$getAttribute;
-          rootAnchorName = (_rootDOM$getAttribute = rootDOM.getAttribute(getAnchorAttrName())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
-          rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootDOM) : rootDOM.getAttribute('data-drag-handler-node-type');
+          var _ref2, _rootDOM$getAttribute, _rootDOM$getAttribute2;
+          rootAnchorName = (_ref2 = (_rootDOM$getAttribute = rootDOM.getAttribute(getAnchorAttrName())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : rootDOM.getAttribute(NODE_ANCHOR_ATTR_NAME)) !== null && _ref2 !== void 0 ? _ref2 : undefined;
+          rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootDOM) : // Fallback: breakout mark wrappers have no data-drag-handler-node-type;
+          // use data-prosemirror-node-name instead.
+          (_rootDOM$getAttribute2 = rootDOM.getAttribute('data-drag-handler-node-type')) !== null && _rootDOM$getAttribute2 !== void 0 ? _rootDOM$getAttribute2 : getTypeNameFromDom(rootDOM);
         }
       }
     }
-    const nodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
+    const nodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : // Fallback for table nodes: tr has data-prosemirror-node-name but not data-drag-handler-node-type.
+    (_rootElement$getAttri2 = rootElement.getAttribute('data-drag-handler-node-type')) !== null && _rootElement$getAttri2 !== void 0 ? _rootElement$getAttri2 : getTypeNameFromDom(rootElement);
     if (nodeType) {
       // platform_editor_controls note: enables quick insert
       if (toolbarFlagsEnabled) {

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

@@ -1,4 +1,5 @@
 import rafSchedule from 'raf-schd';
+import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
@@ -44,7 +45,8 @@ const isHTMLElement = element => {
   return element instanceof HTMLElement;
 };
 const destroyFn = (api, editorView) => {
-  const scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var _getDocument$querySel, _getDocument;
+  const scrollable = (_getDocument$querySel = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector('.fabric-editor-popup-scroll-parent')) !== null && _getDocument$querySel !== void 0 ? _getDocument$querySel : null;
   const cleanupFn = [];
   if (scrollable) {
     cleanupFn.push(autoScrollForElements({
@@ -266,10 +268,11 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   const meta = tr.getMeta(key);
   const hasDocumentSizeBreachedThreshold = api === null || api === void 0 ? void 0 : (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : (_api$limitedMode$shar = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode$shar === void 0 ? void 0 : (_api$limitedMode$shar2 = _api$limitedMode$shar.limitedModePluginKey.getState(newState)) === null || _api$limitedMode$shar2 === void 0 ? void 0 : _api$limitedMode$shar2.documentSizeBreachesThreshold;
   if (hasDocumentSizeBreachedThreshold) {
+    var _getDocument$querySel2, _getDocument2;
     /**
      * INFO: This if statement is a duplicate of the logic in destroy(). When the threshold is breached and we enter limited mode, we want to trigger the cleanup logic in destroy().
      */
-    const editorContentArea = document.querySelector('.fabric-editor-popup-scroll-parent');
+    const editorContentArea = (_getDocument$querySel2 = (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.querySelector('.fabric-editor-popup-scroll-parent')) !== null && _getDocument$querySel2 !== void 0 ? _getDocument$querySel2 : null;
     if (editorContentArea && resizeObserverWidth) {
       resizeObserverWidth.unobserve(editorContentArea);
     }
@@ -430,6 +433,16 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     // Remove handle dec when editor is blurred
     shouldRemoveHandle = shouldRemoveHandle || (meta === null || meta === void 0 ? void 0 : meta.editorBlurred);
   }
+
+  // In view mode with right-side controls, remove any lingering drag handle decorations
+  // (they may carry over from edit mode). Only remove drag handles specifically, not
+  // the remix button decorations (those are managed separately via showInViewMode).
+  if (isViewMode && rightSideControlsEnabled) {
+    const allHandleDecs = findHandleDec(decorations, 0, newState.doc.content.size);
+    if (allHandleDecs.length > 0) {
+      decorations = decorations.remove(allHandleDecs);
+    }
+  }
   if (shouldRemoveHandle) {
     var _activeNode5, _activeNode6;
     const oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
@@ -705,7 +718,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
     },
     props: {
       decorations: state => {
-        var _api$limitedMode2, _api$limitedMode2$sha, _api$editorDisabled, _api$editorDisabled$s, _key$getState2;
+        var _api$limitedMode2, _api$limitedMode2$sha, _api$editorDisabled, _api$editorDisabled$s, _key$getState2, _api$editorViewMode3, _api$editorViewMode3$;
         if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2$sha = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2$sha !== void 0 && _api$limitedMode2$sha.enabled) {
           return;
         }
@@ -718,7 +731,16 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
             return;
           }
         }
-        return (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
+        let decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
+        // In view mode with right-side controls, remove any lingering drag-handle decorations
+        // (created in edit mode) that may not have been cleaned up on mode switch.
+        if (decorationSet && rightSideControlsEnabled && (api === null || api === void 0 ? void 0 : (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 ? void 0 : (_api$editorViewMode3$ = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3$ === void 0 ? void 0 : _api$editorViewMode3$.mode) === 'view') {
+          const handleDecs = findHandleDec(decorationSet, 0, state.doc.content.size);
+          if (handleDecs.length > 0) {
+            decorationSet = decorationSet.remove(handleDecs);
+          }
+        }
+        return decorationSet;
       },
       handleDOMEvents: {
         drop(view, event) {

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -92,6 +92,19 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
   }
   var rootElement = target === null || target === void 0 ? void 0 : target.closest(isNativeAnchorSupported ? getDefaultNodeSelector() : "[data-drag-handler-anchor-name]");
 
+  // Fallback for table nodes in view mode: the table-anchor-names plugin sets data-node-anchor on
+  // the first <tr> element.
+  // - When platform_editor_native_anchor_with_dnd is disabled, the primary closest() uses
+  //   [data-drag-handler-anchor-name] and misses table rows. Try data-node-anchor via closest().
+  // - For wide/max breakout tables, hovering in the left/right margin area of the full-viewport-
+  //   width breakout wrapper (ak-editor-breakout-mark) sets event.target to the wrapper div, which
+  //   has no anchor attribute. Use querySelector to find the [data-node-anchor] descendant inside.
+  // Both cases apply only in view mode with right-side remix controls.
+  if (!rootElement && isViewMode && rightSideControlsEnabled) {
+    var _ref3, _target$closest;
+    rootElement = (_ref3 = (_target$closest = target === null || target === void 0 ? void 0 : target.closest("[".concat(NODE_ANCHOR_ATTR_NAME, "]"))) !== null && _target$closest !== void 0 ? _target$closest : target instanceof HTMLElement ? target.querySelector("[".concat(NODE_ANCHOR_ATTR_NAME, "]")) : null) !== null && _ref3 !== void 0 ? _ref3 : null;
+  }
+
   // When hovering over the right-edge button (rendered in a portal outside the block), resolve the
   // block from the container's anchor so activeNode stays set and the button remains visible.
   if (!rootElement && rightSideControlsEnabled && fg('confluence_remix_button_right_side_block_fg')) {
@@ -104,7 +117,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     }
   }
   if (rootElement) {
-    var _rootElement$parentEl;
+    var _rootElement$parentEl, _rootElement$getAttri2;
     // We want to exlude handles from showing for empty paragraph and heading nodes
     if (isEmptyNestedParagraphOrHeading(rootElement)) {
       return false;
@@ -177,6 +190,11 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       anchorName = rootElement.getAttribute(getAnchorAttrName());
+      // Fallback for table nodes that only have data-node-anchor (not data-drag-handler-anchor-name).
+      if (!anchorName) {
+        var _rootElement$getAttri;
+        anchorName = (_rootElement$getAttri = rootElement.getAttribute(NODE_ANCHOR_ATTR_NAME)) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : anchorName;
+      }
     }
 
     // No need to update handle position if its already there
@@ -224,13 +242,16 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       if (targetPos !== rootPos) {
         var rootDOM = view.nodeDOM(rootPos);
         if (rootDOM instanceof HTMLElement) {
-          var _rootDOM$getAttribute;
-          rootAnchorName = (_rootDOM$getAttribute = rootDOM.getAttribute(getAnchorAttrName())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : undefined;
-          rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootDOM) : rootDOM.getAttribute('data-drag-handler-node-type');
+          var _ref4, _rootDOM$getAttribute, _rootDOM$getAttribute2;
+          rootAnchorName = (_ref4 = (_rootDOM$getAttribute = rootDOM.getAttribute(getAnchorAttrName())) !== null && _rootDOM$getAttribute !== void 0 ? _rootDOM$getAttribute : rootDOM.getAttribute(NODE_ANCHOR_ATTR_NAME)) !== null && _ref4 !== void 0 ? _ref4 : undefined;
+          rootNodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootDOM) : // Fallback: breakout mark wrappers have no data-drag-handler-node-type;
+          // use data-prosemirror-node-name instead.
+          (_rootDOM$getAttribute2 = rootDOM.getAttribute('data-drag-handler-node-type')) !== null && _rootDOM$getAttribute2 !== void 0 ? _rootDOM$getAttribute2 : getTypeNameFromDom(rootDOM);
         }
       }
     }
-    var nodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : rootElement.getAttribute('data-drag-handler-node-type');
+    var nodeType = isNativeAnchorSupported ? getTypeNameFromDom(rootElement) : // Fallback for table nodes: tr has data-prosemirror-node-name but not data-drag-handler-node-type.
+    (_rootElement$getAttri2 = rootElement.getAttribute('data-drag-handler-node-type')) !== null && _rootElement$getAttri2 !== void 0 ? _rootElement$getAttri2 : getTypeNameFromDom(rootElement);
     if (nodeType) {
       // platform_editor_controls note: enables quick insert
       if (toolbarFlagsEnabled) {

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

@@ -5,6 +5,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import rafSchedule from 'raf-schd';
+import { getDocument } from '@atlaskit/browser-apis';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
@@ -49,7 +50,8 @@ var isHTMLElement = function isHTMLElement(element) {
   return element instanceof HTMLElement;
 };
 var destroyFn = function destroyFn(api, editorView) {
-  var scrollable = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var _getDocument$querySel, _getDocument;
+  var scrollable = (_getDocument$querySel = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.querySelector('.fabric-editor-popup-scroll-parent')) !== null && _getDocument$querySel !== void 0 ? _getDocument$querySel : null;
   var cleanupFn = [];
   if (scrollable) {
     cleanupFn.push(autoScrollForElements({
@@ -268,10 +270,11 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   var meta = tr.getMeta(key);
   var hasDocumentSizeBreachedThreshold = api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.limitedModePluginKey.getState(newState)) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.documentSizeBreachesThreshold;
   if (hasDocumentSizeBreachedThreshold) {
+    var _getDocument$querySel2, _getDocument2;
     /**
      * INFO: This if statement is a duplicate of the logic in destroy(). When the threshold is breached and we enter limited mode, we want to trigger the cleanup logic in destroy().
      */
-    var editorContentArea = document.querySelector('.fabric-editor-popup-scroll-parent');
+    var editorContentArea = (_getDocument$querySel2 = (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.querySelector('.fabric-editor-popup-scroll-parent')) !== null && _getDocument$querySel2 !== void 0 ? _getDocument$querySel2 : null;
     if (editorContentArea && resizeObserverWidth) {
       resizeObserverWidth.unobserve(editorContentArea);
     }
@@ -434,6 +437,16 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     // Remove handle dec when editor is blurred
     shouldRemoveHandle = shouldRemoveHandle || (meta === null || meta === void 0 ? void 0 : meta.editorBlurred);
   }
+
+  // In view mode with right-side controls, remove any lingering drag handle decorations
+  // (they may carry over from edit mode). Only remove drag handles specifically, not
+  // the remix button decorations (those are managed separately via showInViewMode).
+  if (isViewMode && rightSideControlsEnabled) {
+    var allHandleDecs = findHandleDec(decorations, 0, newState.doc.content.size);
+    if (allHandleDecs.length > 0) {
+      decorations = decorations.remove(allHandleDecs);
+    }
+  }
   if (shouldRemoveHandle) {
     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);
@@ -802,7 +815,7 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
     },
     props: {
       decorations: function decorations(state) {
-        var _api$limitedMode2, _api$editorDisabled, _key$getState2;
+        var _api$limitedMode2, _api$editorDisabled, _key$getState2, _api$editorViewMode3;
         if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2 = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2 !== void 0 && _api$limitedMode2.enabled) {
           return;
         }
@@ -815,7 +828,16 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
             return;
           }
         }
-        return (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
+        var decorationSet = (_key$getState2 = key.getState(state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.decorations;
+        // In view mode with right-side controls, remove any lingering drag-handle decorations
+        // (created in edit mode) that may not have been cleaned up on mode switch.
+        if (decorationSet && rightSideControlsEnabled && (api === null || api === void 0 || (_api$editorViewMode3 = api.editorViewMode) === null || _api$editorViewMode3 === void 0 || (_api$editorViewMode3 = _api$editorViewMode3.sharedState.currentState()) === null || _api$editorViewMode3 === void 0 ? void 0 : _api$editorViewMode3.mode) === 'view') {
+          var handleDecs = findHandleDec(decorationSet, 0, state.doc.content.size);
+          if (handleDecs.length > 0) {
+            decorationSet = decorationSet.remove(handleDecs);
+          }
+        }
+        return decorationSet;
       },
       handleDOMEvents: {
         drop: function drop(view, event) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "11.2.0",
+	"version": "11.2.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,15 +30,15 @@
 	"dependencies": {
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/editor-plugin-accessibility-utils": "^10.0.0",
+		"@atlaskit/editor-plugin-accessibility-utils": "^10.1.0",
 		"@atlaskit/editor-plugin-analytics": "^10.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^10.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^12.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^9.0.0",
 		"@atlaskit/editor-plugin-interaction": "^19.0.0",
-		"@atlaskit/editor-plugin-limited-mode": "^7.0.0",
+		"@atlaskit/editor-plugin-limited-mode": "^7.1.0",
 		"@atlaskit/editor-plugin-metrics": "^11.0.0",
-		"@atlaskit/editor-plugin-quick-insert": "^10.0.0",
+		"@atlaskit/editor-plugin-quick-insert": "^10.1.0",
 		"@atlaskit/editor-plugin-selection": "^10.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^7.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^10.0.0",
@@ -47,8 +47,8 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^34.2.0",
-		"@atlaskit/icon-lab": "^6.5.0",
+		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/icon-lab": "^6.6.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/theme": "^23.1.0",
-		"@atlaskit/tmp-editor-statsig": "^64.1.0",
+		"@atlaskit/tmp-editor-statsig": "^66.0.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.6.0",
+		"@atlaskit/editor-common": "^114.7.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"