@atlaskit/editor-plugin-block-controls 7.13.3 → 7.14.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.14.1
+
+### Patch Changes
+
+- [`9391799e9bdf4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9391799e9bdf4) -
+  Clean up platform_editor_elements_dnd_select_node_on_drag
+- Updated dependencies
+
+## 7.14.0
+
+### Minor Changes
+
+- [`5f21c5a85f65a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f21c5a85f65a) -
+  ED-29714 fix some alignment issues
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.13.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -12,6 +12,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
@@ -32,6 +33,50 @@ var findHandleDec = exports.findHandleDec = function findHandleDec(decorations,
     return spec.type === _decorationsCommon.TYPE_HANDLE_DEC;
   });
 };
+/**
+ * Fix for widget positioning to ensure it is not placed into a previous mark's DOM structure.
+ * A ProseMirror widget can appear in the wrong DOM position, specifically being added
+ * to a previous mark instead of its intended location, which leads to various rendering issues.
+ * For example, when nodeBefore has an alignment mark but the current node doesn't, ProseMirror may
+ * incorrectly render the widget inside the previous node's alignment mark wrapper instead.
+ */
+var fixWidgetSide = function fixWidgetSide($pos) {
+  var defaultSide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+  var alignmentMark = $pos.doc.type.schema.marks.alignment;
+  var indentationMark = $pos.doc.type.schema.marks.indentation;
+
+  // Only apply fix for alignment and indent marks
+  if (!alignmentMark && !indentationMark) {
+    return defaultSide;
+  }
+  if ($pos.nodeBefore && $pos.nodeAfter) {
+    var _$pos$nodeBefore, _$pos$nodeAfter;
+    var beforeMarks = ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.marks.filter(function (mark) {
+      return mark.type === alignmentMark || mark.type === indentationMark;
+    })) || [];
+    var afterMarks = ((_$pos$nodeAfter = $pos.nodeAfter) === null || _$pos$nodeAfter === void 0 ? void 0 : _$pos$nodeAfter.marks.filter(function (mark) {
+      return mark.type === alignmentMark || mark.type === indentationMark;
+    })) || [];
+    if (beforeMarks.length === 0) {
+      return defaultSide;
+    } else if (afterMarks.length === 0) {
+      return 0;
+    }
+
+    // Check if previous node has marks that current node doesn't have
+    var hasMissingMark = beforeMarks.some(function (mark) {
+      return !afterMarks.some(function (nextMark) {
+        return nextMark.eq(mark);
+      });
+    });
+
+    // if we have missing mark, we set side to 0 to render widget outside previous mark DOM
+    if (hasMissingMark) {
+      return 0;
+    }
+  }
+  return defaultSide;
+};
 var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(_ref) {
   var api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -50,8 +95,10 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
   var unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = (0, _uuid.default)();
+  var $pos = editorState.doc.resolve(pos);
+  var side = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_native_anchor_patch_1') ? fixWidgetSide($pos) : -1;
   var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
-    side: -1,
+    side: side,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
@@ -68,7 +115,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       }
     }
   } : {
-    side: -1,
+    side: side,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
@@ -91,13 +138,14 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       try {
         return getPosUnsafe();
       } catch (e) {
+        // Ignore errors from getPosUnsafe
         return undefined;
       }
     };
     var newPos = getPos();
     if (typeof newPos === 'number') {
-      var $pos = view.state.doc.resolve(newPos);
-      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      var _$pos = view.state.doc.resolve(newPos);
+      isTopLevelNode = (_$pos === null || _$pos === void 0 ? void 0 : _$pos.parent.type.name) === 'doc';
     }
     /*
      * We disable mouseover event to fix flickering issue on hover

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

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getActiveBlockMarks = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 /**
  * Returns list of block marks on schema that widgets are allowed to render inside
  * Currently
@@ -21,9 +23,36 @@ exports.getActiveBlockMarks = void 0;
 var getActiveBlockMarks = exports.getActiveBlockMarks = function getActiveBlockMarks(state, pos) {
   var alignment = state.schema.marks.alignment;
   var resolvedPos = state.doc.resolve(pos);
+
   // find all active marks at the position
   var marks = resolvedPos.marks();
-  return marks.filter(function (mark) {
+  var supportedMarks = marks.filter(function (mark) {
     return mark.type === alignment;
   });
+
+  /**
+   * Fix for widget positioning at alignment mark boundaries.
+   * When the previous node has alignment but the next node doesn't, we need to prevent
+   * the widget from inheriting alignment marks. This ensures the widget is positioned
+   * correctly at the boundary rather than being absorbed into the alignment wrapper.
+   */
+  if (supportedMarks.length > 0 && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_native_anchor_patch_1')) {
+    var _resolvedPos$nodeAfte;
+    var nextNodeMarks = ((_resolvedPos$nodeAfte = resolvedPos.nodeAfter) === null || _resolvedPos$nodeAfte === void 0 ? void 0 : _resolvedPos$nodeAfte.marks.filter(function (mark) {
+      return mark.type === alignment;
+    })) || [];
+
+    // Compare alignment values to ensure they are the same
+    var alignmentValuesMatch = supportedMarks.length === nextNodeMarks.length && supportedMarks.some(function (mark) {
+      return nextNodeMarks.some(function (nextMark) {
+        return nextMark.eq(mark);
+      });
+    });
+
+    // previous node has alignment but next node does not have alignment or alignment values differ
+    if (nextNodeMarks.length === 0 || !alignmentValuesMatch) {
+      return [];
+    }
+  }
+  return supportedMarks;
 };

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

@@ -17,6 +17,7 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -38,7 +39,7 @@ var _pluginKey = require("../pm-plugins/selection-preservation/plugin-key");
 var _analytics2 = require("../pm-plugins/utils/analytics");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _getSelection = require("../pm-plugins/utils/getSelection");
-var _selection = require("../pm-plugins/utils/selection");
+var _selection2 = require("../pm-plugins/utils/selection");
 var _consts2 = require("./consts");
 var _dragPreview = require("./drag-preview");
 var _anchorName = require("./utils/anchor-name");
@@ -332,7 +333,7 @@ var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
   var selectUp = resolvedStartPos.pos < selection.from;
   var $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
   var $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
-  return $from.blockRange($to);
+  return (0, _selection.expandToBlockRange)($from, $to);
 };
 var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   var _api$core4;
@@ -427,7 +428,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      var range = getExpandedSelectionRange({
+      var expandedRange = getExpandedSelectionRange({
         doc: tr.doc,
         selection: selection,
         resolvedStartPos: resolvedStartPos,
@@ -435,11 +436,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
       });
 
       // Set selection to expanded selection range if it encompases the clicked drag handle
-      if (range && isPosWithinRange(startPos, range) && isMultiNodeRange(range)) {
-        var collapsed = (0, _getSelection.collapseToSelectionRange)(tr.doc.resolve(range.start), tr.doc.resolve(range.end));
+      if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
+        var collapsed = (0, _getSelection.collapseToSelectionRange)(expandedRange.$from, expandedRange.$to);
 
         // Then create a selection from the start of the first node to the end of the last node
-        tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, collapsed ? collapsed.$from.pos : range.start), Math.max(selection.to, collapsed ? collapsed.$to.pos : range.end)));
+        tr.setSelection(_state.TextSelection.create(tr.doc, Math.min(selection.from, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
       } else {
         // Select the clicked drag handle's node only
         tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
@@ -481,8 +482,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
         tr = (0, _getSelection.selectNode)(tr, startPos, nodeType, api);
       } else if (isTopLevelNode && $anchor.depth <= _consts2.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH && e.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
         var _api$blockControls3;
-        var alignAnchorHeadToSel = (0, _selection.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
-        var selectionWithExpandedHead = (0, _selection.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
+        var alignAnchorHeadToSel = (0, _selection2.alignAnchorHeadInDirectionOfPos)(tr.selection, startPos);
+        var selectionWithExpandedHead = (0, _selection2.expandSelectionHeadToNodeAtPos)(alignAnchorHeadToSel, startPos);
         tr.setSelection(selectionWithExpandedHead);
         api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.setMultiSelectPositions()({
           tr: tr
@@ -611,7 +612,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
               api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
                 tr: tr
               });
-            } else if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_select_node_on_drag')) {
+            } else {
               tr = (0, _getSelection.selectNode)(tr, handlePos, nodeType, api);
             }
             return tr;

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
@@ -22,6 +23,43 @@ export const emptyParagraphNodeDecorations = () => {
 export const findHandleDec = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
 };
+/**
+ * Fix for widget positioning to ensure it is not placed into a previous mark's DOM structure.
+ * A ProseMirror widget can appear in the wrong DOM position, specifically being added
+ * to a previous mark instead of its intended location, which leads to various rendering issues.
+ * For example, when nodeBefore has an alignment mark but the current node doesn't, ProseMirror may
+ * incorrectly render the widget inside the previous node's alignment mark wrapper instead.
+ */
+const fixWidgetSide = ($pos, defaultSide = -1) => {
+  const alignmentMark = $pos.doc.type.schema.marks.alignment;
+  const indentationMark = $pos.doc.type.schema.marks.indentation;
+
+  // Only apply fix for alignment and indent marks
+  if (!alignmentMark && !indentationMark) {
+    return defaultSide;
+  }
+  if ($pos.nodeBefore && $pos.nodeAfter) {
+    var _$pos$nodeBefore, _$pos$nodeAfter;
+    const beforeMarks = ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.marks.filter(mark => mark.type === alignmentMark || mark.type === indentationMark)) || [];
+    const afterMarks = ((_$pos$nodeAfter = $pos.nodeAfter) === null || _$pos$nodeAfter === void 0 ? void 0 : _$pos$nodeAfter.marks.filter(mark => mark.type === alignmentMark || mark.type === indentationMark)) || [];
+    if (beforeMarks.length === 0) {
+      return defaultSide;
+    } else if (afterMarks.length === 0) {
+      return 0;
+    }
+
+    // Check if previous node has marks that current node doesn't have
+    const hasMissingMark = beforeMarks.some(mark => {
+      return !afterMarks.some(nextMark => nextMark.eq(mark));
+    });
+
+    // if we have missing mark, we set side to 0 to render widget outside previous mark DOM
+    if (hasMissingMark) {
+      return 0;
+    }
+  }
+  return defaultSide;
+};
 export const dragHandleDecoration = ({
   api,
   formatMessage,
@@ -41,8 +79,10 @@ export const dragHandleDecoration = ({
   let unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const key = uuid();
+  const $pos = editorState.doc.resolve(pos);
+  const side = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_1') ? fixWidgetSide($pos) : -1;
   const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
-    side: -1,
+    side,
     type: TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
@@ -59,7 +99,7 @@ export const dragHandleDecoration = ({
       }
     }
   } : {
-    side: -1,
+    side,
     type: TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
@@ -82,6 +122,7 @@ export const dragHandleDecoration = ({
       try {
         return getPosUnsafe();
       } catch (e) {
+        // Ignore errors from getPosUnsafe
         return undefined;
       }
     };

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

@@ -1,3 +1,6 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+
 /**
  * Returns list of block marks on schema that widgets are allowed to render inside
  * Currently
@@ -17,7 +20,28 @@ export const getActiveBlockMarks = (state, pos) => {
     alignment
   } = state.schema.marks;
   const resolvedPos = state.doc.resolve(pos);
+
   // find all active marks at the position
   const marks = resolvedPos.marks();
-  return marks.filter(mark => mark.type === alignment);
+  const supportedMarks = marks.filter(mark => mark.type === alignment);
+
+  /**
+   * Fix for widget positioning at alignment mark boundaries.
+   * When the previous node has alignment but the next node doesn't, we need to prevent
+   * the widget from inheriting alignment marks. This ensures the widget is positioned
+   * correctly at the boundary rather than being absorbed into the alignment wrapper.
+   */
+  if (supportedMarks.length > 0 && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_1')) {
+    var _resolvedPos$nodeAfte;
+    const nextNodeMarks = ((_resolvedPos$nodeAfte = resolvedPos.nodeAfter) === null || _resolvedPos$nodeAfte === void 0 ? void 0 : _resolvedPos$nodeAfte.marks.filter(mark => mark.type === alignment)) || [];
+
+    // Compare alignment values to ensure they are the same
+    const alignmentValuesMatch = supportedMarks.length === nextNodeMarks.length && supportedMarks.some(mark => nextNodeMarks.some(nextMark => nextMark.eq(mark)));
+
+    // previous node has alignment but next node does not have alignment or alignment values differ
+    if (nextNodeMarks.length === 0 || !alignmentValuesMatch) {
+      return [];
+    }
+  }
+  return supportedMarks;
 };

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

@@ -14,6 +14,7 @@ import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-commo
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { DRAG_HANDLE_WIDTH, tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -328,7 +329,7 @@ const getExpandedSelectionRange = ({
   const selectUp = resolvedStartPos.pos < selection.from;
   const $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
   const $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
-  return $from.blockRange($to);
+  return expandToBlockRange($from, $to);
 };
 export const DragHandle = ({
   view,
@@ -405,7 +406,7 @@ export const DragHandle = ({
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      const range = getExpandedSelectionRange({
+      const expandedRange = getExpandedSelectionRange({
         doc: tr.doc,
         selection,
         resolvedStartPos,
@@ -413,11 +414,11 @@ export const DragHandle = ({
       });
 
       // Set selection to expanded selection range if it encompases the clicked drag handle
-      if (range && isPosWithinRange(startPos, range) && isMultiNodeRange(range)) {
-        const collapsed = collapseToSelectionRange(tr.doc.resolve(range.start), tr.doc.resolve(range.end));
+      if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
+        const collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
 
         // Then create a selection from the start of the first node to the end of the last node
-        tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, collapsed ? collapsed.$from.pos : range.start), Math.max(selection.to, collapsed ? collapsed.$to.pos : range.end)));
+        tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
       } else {
         // Select the clicked drag handle's node only
         tr = selectNode(tr, startPos, nodeType, api);
@@ -588,7 +589,7 @@ export const DragHandle = ({
               api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.setMultiSelectPositions()({
                 tr
               });
-            } else if (fg('platform_editor_elements_dnd_select_node_on_drag')) {
+            } else {
               tr = selectNode(tr, handlePos, nodeType, api);
             }
             return tr;

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

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
@@ -24,6 +25,50 @@ export var findHandleDec = function findHandleDec(decorations, from, to) {
     return spec.type === TYPE_HANDLE_DEC;
   });
 };
+/**
+ * Fix for widget positioning to ensure it is not placed into a previous mark's DOM structure.
+ * A ProseMirror widget can appear in the wrong DOM position, specifically being added
+ * to a previous mark instead of its intended location, which leads to various rendering issues.
+ * For example, when nodeBefore has an alignment mark but the current node doesn't, ProseMirror may
+ * incorrectly render the widget inside the previous node's alignment mark wrapper instead.
+ */
+var fixWidgetSide = function fixWidgetSide($pos) {
+  var defaultSide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+  var alignmentMark = $pos.doc.type.schema.marks.alignment;
+  var indentationMark = $pos.doc.type.schema.marks.indentation;
+
+  // Only apply fix for alignment and indent marks
+  if (!alignmentMark && !indentationMark) {
+    return defaultSide;
+  }
+  if ($pos.nodeBefore && $pos.nodeAfter) {
+    var _$pos$nodeBefore, _$pos$nodeAfter;
+    var beforeMarks = ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.marks.filter(function (mark) {
+      return mark.type === alignmentMark || mark.type === indentationMark;
+    })) || [];
+    var afterMarks = ((_$pos$nodeAfter = $pos.nodeAfter) === null || _$pos$nodeAfter === void 0 ? void 0 : _$pos$nodeAfter.marks.filter(function (mark) {
+      return mark.type === alignmentMark || mark.type === indentationMark;
+    })) || [];
+    if (beforeMarks.length === 0) {
+      return defaultSide;
+    } else if (afterMarks.length === 0) {
+      return 0;
+    }
+
+    // Check if previous node has marks that current node doesn't have
+    var hasMissingMark = beforeMarks.some(function (mark) {
+      return !afterMarks.some(function (nextMark) {
+        return nextMark.eq(mark);
+      });
+    });
+
+    // if we have missing mark, we set side to 0 to render widget outside previous mark DOM
+    if (hasMissingMark) {
+      return 0;
+    }
+  }
+  return defaultSide;
+};
 export var dragHandleDecoration = function dragHandleDecoration(_ref) {
   var api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -42,8 +87,10 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
   var unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = uuid();
+  var $pos = editorState.doc.resolve(pos);
+  var side = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_1') ? fixWidgetSide($pos) : -1;
   var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
-    side: -1,
+    side: side,
     type: TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
@@ -60,7 +107,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
       }
     }
   } : {
-    side: -1,
+    side: side,
     type: TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
@@ -83,13 +130,14 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
       try {
         return getPosUnsafe();
       } catch (e) {
+        // Ignore errors from getPosUnsafe
         return undefined;
       }
     };
     var newPos = getPos();
     if (typeof newPos === 'number') {
-      var $pos = view.state.doc.resolve(newPos);
-      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      var _$pos = view.state.doc.resolve(newPos);
+      isTopLevelNode = (_$pos === null || _$pos === void 0 ? void 0 : _$pos.parent.type.name) === 'doc';
     }
     /*
      * We disable mouseover event to fix flickering issue on hover

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

@@ -1,3 +1,6 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+
 /**
  * Returns list of block marks on schema that widgets are allowed to render inside
  * Currently
@@ -15,9 +18,36 @@
 export var getActiveBlockMarks = function getActiveBlockMarks(state, pos) {
   var alignment = state.schema.marks.alignment;
   var resolvedPos = state.doc.resolve(pos);
+
   // find all active marks at the position
   var marks = resolvedPos.marks();
-  return marks.filter(function (mark) {
+  var supportedMarks = marks.filter(function (mark) {
     return mark.type === alignment;
   });
+
+  /**
+   * Fix for widget positioning at alignment mark boundaries.
+   * When the previous node has alignment but the next node doesn't, we need to prevent
+   * the widget from inheriting alignment marks. This ensures the widget is positioned
+   * correctly at the boundary rather than being absorbed into the alignment wrapper.
+   */
+  if (supportedMarks.length > 0 && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_1')) {
+    var _resolvedPos$nodeAfte;
+    var nextNodeMarks = ((_resolvedPos$nodeAfte = resolvedPos.nodeAfter) === null || _resolvedPos$nodeAfte === void 0 ? void 0 : _resolvedPos$nodeAfte.marks.filter(function (mark) {
+      return mark.type === alignment;
+    })) || [];
+
+    // Compare alignment values to ensure they are the same
+    var alignmentValuesMatch = supportedMarks.length === nextNodeMarks.length && supportedMarks.some(function (mark) {
+      return nextNodeMarks.some(function (nextMark) {
+        return nextMark.eq(mark);
+      });
+    });
+
+    // previous node has alignment but next node does not have alignment or alignment values differ
+    if (nextNodeMarks.length === 0 || !alignmentValuesMatch) {
+      return [];
+    }
+  }
+  return supportedMarks;
 };

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

@@ -19,6 +19,7 @@ import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-commo
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { DRAG_HANDLE_WIDTH, tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -329,7 +330,7 @@ var getExpandedSelectionRange = function getExpandedSelectionRange(_ref) {
   var selectUp = resolvedStartPos.pos < selection.from;
   var $from = isShiftPressed && selectUp ? resolvedStartPos : selection.$from;
   var $to = isShiftPressed && !selectUp ? doc.resolve(resolvedStartPos.pos + 1) : selection.$to;
-  return $from.blockRange($to);
+  return expandToBlockRange($from, $to);
 };
 export var DragHandle = function DragHandle(_ref2) {
   var _api$core4;
@@ -424,7 +425,7 @@ export var DragHandle = function DragHandle(_ref2) {
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      var range = getExpandedSelectionRange({
+      var expandedRange = getExpandedSelectionRange({
         doc: tr.doc,
         selection: selection,
         resolvedStartPos: resolvedStartPos,
@@ -432,11 +433,11 @@ export var DragHandle = function DragHandle(_ref2) {
       });
 
       // Set selection to expanded selection range if it encompases the clicked drag handle
-      if (range && isPosWithinRange(startPos, range) && isMultiNodeRange(range)) {
-        var collapsed = collapseToSelectionRange(tr.doc.resolve(range.start), tr.doc.resolve(range.end));
+      if (expandedRange.range && isPosWithinRange(startPos, expandedRange.range) && isMultiNodeRange(expandedRange.range)) {
+        var collapsed = collapseToSelectionRange(expandedRange.$from, expandedRange.$to);
 
         // Then create a selection from the start of the first node to the end of the last node
-        tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, collapsed ? collapsed.$from.pos : range.start), Math.max(selection.to, collapsed ? collapsed.$to.pos : range.end)));
+        tr.setSelection(TextSelection.create(tr.doc, Math.min(selection.from, collapsed.$from.pos), Math.max(selection.to, collapsed.$to.pos)));
       } else {
         // Select the clicked drag handle's node only
         tr = selectNode(tr, startPos, nodeType, api);
@@ -608,7 +609,7 @@ export var DragHandle = function DragHandle(_ref2) {
               api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
                 tr: tr
               });
-            } else if (fg('platform_editor_elements_dnd_select_node_on_drag')) {
+            } else {
               tr = selectNode(tr, handlePos, nodeType, api);
             }
             return tr;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.13.3",
+	"version": "7.14.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.5.1",
+		"@atlaskit/adf-schema": "^51.5.0",
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/editor-plugin-accessibility-utils": "^6.0.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
@@ -43,10 +43,10 @@
 		"@atlaskit/editor-plugin-type-ahead": "^6.5.0",
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
-		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^29.0.0",
+		"@atlaskit/icon": "^29.1.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -54,8 +54,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^15.6.0",
-		"@atlaskit/tokens": "^8.4.0",
+		"@atlaskit/tmp-editor-statsig": "^15.12.0",
+		"@atlaskit/tokens": "^8.5.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -66,7 +66,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.41.0",
+		"@atlaskit/editor-common": "^110.44.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -119,9 +119,6 @@
 		"platform_editor_elements_dnd_shift_click_select": {
 			"type": "boolean"
 		},
-		"platform_editor_elements_dnd_select_node_on_drag": {
-			"type": "boolean"
-		},
 		"platform_editor_ease_of_use_metrics": {
 			"type": "boolean"
 		},
@@ -151,6 +148,9 @@
 		},
 		"platform_editor_toolbar_aifc_user_intent_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_native_anchor_patch_1": {
+			"type": "boolean"
 		}
 	}
 }