@atlaskit/editor-plugin-block-controls 8.2.1 → 8.3.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 8.3.1
+
+### Patch Changes
+
+- [`9d67968b1ac03`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d67968b1ac03) -
+  [ux] Fixed issue with browser selection sync logic for preserved selection plugin
+- Updated dependencies
+
+## 8.3.0
+
+### Minor Changes
+
+- [`617747c789f4e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/617747c789f4e) -
+  Use correct editorExperiment instead of expVal for evaluating platform_synced_block
+
 ## 8.2.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -46,7 +46,7 @@ var shouldCollapseMargin = function shouldCollapseMargin(prevNode, nextNode) {
   return true;
 };
 var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
-  var isSyncBlockOffsetPatchEnabled = (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2');
+  var isSyncBlockOffsetPatchEnabled = (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2');
   if (!prevNode && nextNode) {
     // first node - adjust for bodied containers
     var _offset = 0;
@@ -256,7 +256,7 @@ var dropTargetDecorations = exports.dropTargetDecorations = function dropTargetD
         return false; //not valid pos, so nested not valid either
       }
     }
-    var parentTypesWithEndDropTarget = (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2') ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
+    var parentTypesWithEndDropTarget = (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2') ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
     if (parent.lastChild === node && !(0, _utils.isEmptyParagraph)(node) && parentTypesWithEndDropTarget.includes(parent.type.name)) {
       endPos = pos + node.nodeSize;
     }

package/dist/cjs/pm-plugins/selection-preservation/pm-plugin.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.createSelectionPreservationPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _bindEventListener = require("bind-event-listener");
+var _browserApis = require("@atlaskit/browser-apis");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _styles = require("@atlaskit/editor-common/styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _main = require("../main");
 var _selection = require("../utils/selection");
 var _editorCommands = require("./editor-commands");
@@ -109,7 +111,14 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
       },
       view: function view(initialView) {
         var view = initialView;
-        var unbindDocumentMouseDown = (0, _bindEventListener.bind)(document, {
+        var doc = (0, _browserApis.getDocument)();
+        if (!doc) {
+          return {
+            update: function update() {},
+            destroy: function destroy() {}
+          };
+        }
+        var unbindDocumentMouseDown = (0, _bindEventListener.bind)(doc, {
           type: 'mousedown',
           listener: function listener(e) {
             if (!(e.target instanceof HTMLElement)) {
@@ -150,14 +159,42 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
         });
         return {
           update: function update(updateView, prevState) {
-            var _selectionPreservatio, _selectionPreservatio2, _key$getState, _key$getState2;
             view = updateView;
-            var prevPreservedSelection = (_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(prevState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-            var currPreservedSelection = (_selectionPreservatio2 = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection;
-            var prevActiveNode = (_key$getState = _main.key.getState(prevState)) === null || _key$getState === void 0 ? void 0 : _key$getState.activeNode;
-            var currActiveNode = (_key$getState2 = _main.key.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode;
-            if (currPreservedSelection && view.hasFocus() && (!(0, _utils.compareSelections)(prevPreservedSelection, currPreservedSelection) || prevActiveNode !== currActiveNode)) {
-              (0, _utils.syncDOMSelection)(view.state.selection);
+
+            // [FEATURE FLAG: platform_editor_selection_sync_fix]
+            // When enabled, syncs DOM selection even when editor doesn't have focus.
+            // This prevents ghost highlighting after moving nodes when block menu is open.
+            // To clean up: remove the if-else block and keep only the flag-on behavior.
+            if ((0, _platformFeatureFlags.fg)('platform_editor_selection_sync_fix')) {
+              var _selectionPreservatio, _selectionPreservatio2, _key$getState, _key$getState2;
+              var prevPreservedSelection = (_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(prevState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
+              var currPreservedSelection = (_selectionPreservatio2 = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection;
+              var prevActiveNode = (_key$getState = _main.key.getState(prevState)) === null || _key$getState === void 0 ? void 0 : _key$getState.activeNode;
+              var currActiveNode = (_key$getState2 = _main.key.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode;
+
+              // Sync DOM selection when the preserved selection or active node changes
+              // AND the document has changed (e.g., nodes moved)
+              // This prevents stealing focus during menu navigation while still fixing ghost highlighting
+              var hasPreservedSelection = !!currPreservedSelection;
+              var preservedSelectionChanged = !(0, _utils.compareSelections)(prevPreservedSelection, currPreservedSelection);
+              var activeNodeChanged = prevActiveNode !== currActiveNode;
+              var docChanged = prevState.doc !== view.state.doc;
+              var shouldSyncDOMSelection = hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) && docChanged;
+              if (shouldSyncDOMSelection) {
+                (0, _utils.syncDOMSelection)(view.state.selection, view);
+              }
+            } else {
+              var _selectionPreservatio3, _selectionPreservatio4, _key$getState3, _key$getState4;
+              // OLD BEHAVIOR (to be removed when flag is cleaned up)
+              // Only synced when editor had focus, causing ghost highlighting issues
+              var _prevPreservedSelection = (_selectionPreservatio3 = _pluginKey.selectionPreservationPluginKey.getState(prevState)) === null || _selectionPreservatio3 === void 0 ? void 0 : _selectionPreservatio3.preservedSelection;
+              var _currPreservedSelection = (_selectionPreservatio4 = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio4 === void 0 ? void 0 : _selectionPreservatio4.preservedSelection;
+              var _prevActiveNode = (_key$getState3 = _main.key.getState(prevState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode;
+              var _currActiveNode = (_key$getState4 = _main.key.getState(view.state)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeNode;
+              if (_currPreservedSelection && view.hasFocus() && (!(0, _utils.compareSelections)(_prevPreservedSelection, _currPreservedSelection) || _prevActiveNode !== _currActiveNode)) {
+                // Old syncDOMSelection signature (to be removed)
+                (0, _utils.syncDOMSelection)(view.state.selection);
+              }
             }
           },
           destroy: function destroy() {

package/dist/cjs/pm-plugins/selection-preservation/utils.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.syncDOMSelection = exports.hasUserSelectionChange = exports.getSelectionPreservationMeta = exports.compareSelections = void 0;
+var _browserApis = require("@atlaskit/browser-apis");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginKey = require("./plugin-key");
 /**
  * Detects if any of the transactions include user-driven selection changes.
@@ -32,23 +34,61 @@ var compareSelections = exports.compareSelections = function compareSelections(a
 };
 
 /**
- * Triggers a DOM selection sync by resetting the current native selection range
- * only if it is out of sync with the provided ProseMirror selection state.
+ * Forces the browser's native selection to match ProseMirror's selection state.
  *
- * This is a necessary workaround to ensure the browser's native selection state
- * stays in sync with the preserved selection, particularly after transactions
- * that shift document content.
+ * This is necessary when the editor doesn't have focus (e.g., when block menu is open)
+ * but we still need to update the visual selection after moving nodes. Without this,
+ * the browser's native selection remains at the old position, causing ghost highlighting.
  *
- * @param selection The current ProseMirror selection state to compare against.
+ * @param selection The current ProseMirror selection state to sync to DOM.
+ * @param view The EditorView instance used to convert ProseMirror positions to DOM positions (when feature flag is enabled).
  */
-var syncDOMSelection = exports.syncDOMSelection = function syncDOMSelection(selection) {
-  var domSelection = window.getSelection();
-  var domRange = domSelection && domSelection.rangeCount === 1 && domSelection.getRangeAt(0).cloneRange();
-  var isOutOfSync = domRange && (selection.from !== domRange.startOffset || selection.to !== domRange.endOffset);
-  if (isOutOfSync) {
-    // Force the DOM selection to refresh, setting it to the same range
-    // This will trigger ProseMirror to re-apply its selection logic based on the current state
-    domSelection.removeAllRanges();
-    domSelection.addRange(domRange);
+var syncDOMSelection = exports.syncDOMSelection = function syncDOMSelection(selection, view) {
+  // [FEATURE FLAG: platform_editor_selection_sync_fix]
+  // When enabled, uses improved DOM selection syncing with EditorView.
+  // To clean up: remove the if-else block, remove the optional view parameter,
+  // make view required, and keep only the flag-on behavior.
+  if (view && (0, _platformFeatureFlags.fg)('platform_editor_selection_sync_fix')) {
+    try {
+      var domSelection = window.getSelection();
+      if (!domSelection) {
+        return;
+      }
+      var doc = (0, _browserApis.getDocument)();
+      if (!doc) {
+        return;
+      }
+
+      // Convert ProseMirror selection to DOM selection using view.domAtPos
+      var anchor = view.domAtPos(selection.anchor);
+      var head = view.domAtPos(selection.head);
+      if (!anchor || !head) {
+        return;
+      }
+
+      // Create a new DOM range from the ProseMirror selection
+      var range = doc.createRange();
+      range.setStart(anchor.node, anchor.offset);
+      range.setEnd(head.node, head.offset);
+
+      // Update the DOM selection to match ProseMirror's selection
+      domSelection.removeAllRanges();
+      domSelection.addRange(range);
+    } catch (_unused) {
+      // Silently fail if DOM selection sync fails
+      // This can happen if positions are invalid or DOM hasn't updated yet
+    }
+  } else {
+    // OLD BEHAVIOR (to be removed when flag is cleaned up)
+    // Only checked if selection was out of sync using incorrect offset comparison
+    var _domSelection = window.getSelection();
+    var domRange = _domSelection && _domSelection.rangeCount === 1 && _domSelection.getRangeAt(0).cloneRange();
+    var isOutOfSync = domRange && (selection.from !== domRange.startOffset || selection.to !== domRange.endOffset);
+    if (isOutOfSync && _domSelection && domRange) {
+      // Force the DOM selection to refresh, setting it to the same range
+      // This will trigger ProseMirror to re-apply its selection logic based on the current state
+      _domSelection.removeAllRanges();
+      _domSelection.addRange(domRange);
+    }
   }
 };

package/dist/es2019/pm-plugins/decorations-drop-target.js

@@ -37,7 +37,7 @@ const shouldCollapseMargin = (prevNode, nextNode) => {
   return true;
 };
 const getGapAndOffset = (prevNode, nextNode, parentNode) => {
-  const isSyncBlockOffsetPatchEnabled = expValEquals('platform_synced_block', 'isEnabled', true) && fg('platform_synced_block_patch_2');
+  const isSyncBlockOffsetPatchEnabled = editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2');
   if (!prevNode && nextNode) {
     // first node - adjust for bodied containers
     let offset = 0;
@@ -245,7 +245,7 @@ export const dropTargetDecorations = (newState, api, formatMessage, nodeViewPort
         return false; //not valid pos, so nested not valid either
       }
     }
-    const parentTypesWithEndDropTarget = expValEquals('platform_synced_block', 'isEnabled', true) && fg('platform_synced_block_patch_2') ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
+    const parentTypesWithEndDropTarget = editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
     if (parent.lastChild === node && !isEmptyParagraph(node) && parentTypesWithEndDropTarget.includes(parent.type.name)) {
       endPos = pos + node.nodeSize;
     }

package/dist/es2019/pm-plugins/selection-preservation/pm-plugin.js

@@ -1,6 +1,8 @@
 import { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { key } from '../main';
 import { createPreservedSelection, mapPreservedSelection } from '../utils/selection';
 import { stopPreservingSelection } from './editor-commands';
@@ -101,7 +103,14 @@ export const createSelectionPreservationPlugin = api => () => {
     },
     view(initialView) {
       let view = initialView;
-      const unbindDocumentMouseDown = bind(document, {
+      const doc = getDocument();
+      if (!doc) {
+        return {
+          update() {},
+          destroy() {}
+        };
+      }
+      const unbindDocumentMouseDown = bind(doc, {
         type: 'mousedown',
         listener: e => {
           if (!(e.target instanceof HTMLElement)) {
@@ -143,14 +152,42 @@ export const createSelectionPreservationPlugin = api => () => {
       });
       return {
         update(updateView, prevState) {
-          var _selectionPreservatio, _selectionPreservatio2, _key$getState, _key$getState2;
           view = updateView;
-          const prevPreservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(prevState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-          const currPreservedSelection = (_selectionPreservatio2 = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection;
-          const prevActiveNode = (_key$getState = key.getState(prevState)) === null || _key$getState === void 0 ? void 0 : _key$getState.activeNode;
-          const currActiveNode = (_key$getState2 = key.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode;
-          if (currPreservedSelection && view.hasFocus() && (!compareSelections(prevPreservedSelection, currPreservedSelection) || prevActiveNode !== currActiveNode)) {
-            syncDOMSelection(view.state.selection);
+
+          // [FEATURE FLAG: platform_editor_selection_sync_fix]
+          // When enabled, syncs DOM selection even when editor doesn't have focus.
+          // This prevents ghost highlighting after moving nodes when block menu is open.
+          // To clean up: remove the if-else block and keep only the flag-on behavior.
+          if (fg('platform_editor_selection_sync_fix')) {
+            var _selectionPreservatio, _selectionPreservatio2, _key$getState, _key$getState2;
+            const prevPreservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(prevState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
+            const currPreservedSelection = (_selectionPreservatio2 = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection;
+            const prevActiveNode = (_key$getState = key.getState(prevState)) === null || _key$getState === void 0 ? void 0 : _key$getState.activeNode;
+            const currActiveNode = (_key$getState2 = key.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode;
+
+            // Sync DOM selection when the preserved selection or active node changes
+            // AND the document has changed (e.g., nodes moved)
+            // This prevents stealing focus during menu navigation while still fixing ghost highlighting
+            const hasPreservedSelection = !!currPreservedSelection;
+            const preservedSelectionChanged = !compareSelections(prevPreservedSelection, currPreservedSelection);
+            const activeNodeChanged = prevActiveNode !== currActiveNode;
+            const docChanged = prevState.doc !== view.state.doc;
+            const shouldSyncDOMSelection = hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) && docChanged;
+            if (shouldSyncDOMSelection) {
+              syncDOMSelection(view.state.selection, view);
+            }
+          } else {
+            var _selectionPreservatio3, _selectionPreservatio4, _key$getState3, _key$getState4;
+            // OLD BEHAVIOR (to be removed when flag is cleaned up)
+            // Only synced when editor had focus, causing ghost highlighting issues
+            const prevPreservedSelection = (_selectionPreservatio3 = selectionPreservationPluginKey.getState(prevState)) === null || _selectionPreservatio3 === void 0 ? void 0 : _selectionPreservatio3.preservedSelection;
+            const currPreservedSelection = (_selectionPreservatio4 = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio4 === void 0 ? void 0 : _selectionPreservatio4.preservedSelection;
+            const prevActiveNode = (_key$getState3 = key.getState(prevState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode;
+            const currActiveNode = (_key$getState4 = key.getState(view.state)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeNode;
+            if (currPreservedSelection && view.hasFocus() && (!compareSelections(prevPreservedSelection, currPreservedSelection) || prevActiveNode !== currActiveNode)) {
+              // Old syncDOMSelection signature (to be removed)
+              syncDOMSelection(view.state.selection);
+            }
           }
         },
         destroy() {

package/dist/es2019/pm-plugins/selection-preservation/utils.js

@@ -1,3 +1,5 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { selectionPreservationPluginKey } from './plugin-key';
 /**
  * Detects if any of the transactions include user-driven selection changes.
@@ -24,23 +26,61 @@ export const compareSelections = (a, b) => {
 };
 
 /**
- * Triggers a DOM selection sync by resetting the current native selection range
- * only if it is out of sync with the provided ProseMirror selection state.
+ * Forces the browser's native selection to match ProseMirror's selection state.
  *
- * This is a necessary workaround to ensure the browser's native selection state
- * stays in sync with the preserved selection, particularly after transactions
- * that shift document content.
+ * This is necessary when the editor doesn't have focus (e.g., when block menu is open)
+ * but we still need to update the visual selection after moving nodes. Without this,
+ * the browser's native selection remains at the old position, causing ghost highlighting.
  *
- * @param selection The current ProseMirror selection state to compare against.
+ * @param selection The current ProseMirror selection state to sync to DOM.
+ * @param view The EditorView instance used to convert ProseMirror positions to DOM positions (when feature flag is enabled).
  */
-export const syncDOMSelection = selection => {
-  const domSelection = window.getSelection();
-  const domRange = domSelection && domSelection.rangeCount === 1 && domSelection.getRangeAt(0).cloneRange();
-  const isOutOfSync = domRange && (selection.from !== domRange.startOffset || selection.to !== domRange.endOffset);
-  if (isOutOfSync) {
-    // Force the DOM selection to refresh, setting it to the same range
-    // This will trigger ProseMirror to re-apply its selection logic based on the current state
-    domSelection.removeAllRanges();
-    domSelection.addRange(domRange);
+export const syncDOMSelection = (selection, view) => {
+  // [FEATURE FLAG: platform_editor_selection_sync_fix]
+  // When enabled, uses improved DOM selection syncing with EditorView.
+  // To clean up: remove the if-else block, remove the optional view parameter,
+  // make view required, and keep only the flag-on behavior.
+  if (view && fg('platform_editor_selection_sync_fix')) {
+    try {
+      const domSelection = window.getSelection();
+      if (!domSelection) {
+        return;
+      }
+      const doc = getDocument();
+      if (!doc) {
+        return;
+      }
+
+      // Convert ProseMirror selection to DOM selection using view.domAtPos
+      const anchor = view.domAtPos(selection.anchor);
+      const head = view.domAtPos(selection.head);
+      if (!anchor || !head) {
+        return;
+      }
+
+      // Create a new DOM range from the ProseMirror selection
+      const range = doc.createRange();
+      range.setStart(anchor.node, anchor.offset);
+      range.setEnd(head.node, head.offset);
+
+      // Update the DOM selection to match ProseMirror's selection
+      domSelection.removeAllRanges();
+      domSelection.addRange(range);
+    } catch {
+      // Silently fail if DOM selection sync fails
+      // This can happen if positions are invalid or DOM hasn't updated yet
+    }
+  } else {
+    // OLD BEHAVIOR (to be removed when flag is cleaned up)
+    // Only checked if selection was out of sync using incorrect offset comparison
+    const domSelection = window.getSelection();
+    const domRange = domSelection && domSelection.rangeCount === 1 && domSelection.getRangeAt(0).cloneRange();
+    const isOutOfSync = domRange && (selection.from !== domRange.startOffset || selection.to !== domRange.endOffset);
+    if (isOutOfSync && domSelection && domRange) {
+      // Force the DOM selection to refresh, setting it to the same range
+      // This will trigger ProseMirror to re-apply its selection logic based on the current state
+      domSelection.removeAllRanges();
+      domSelection.addRange(domRange);
+    }
   }
 };

package/dist/esm/pm-plugins/decorations-drop-target.js

@@ -40,7 +40,7 @@ var shouldCollapseMargin = function shouldCollapseMargin(prevNode, nextNode) {
   return true;
 };
 var getGapAndOffset = function getGapAndOffset(prevNode, nextNode, parentNode) {
-  var isSyncBlockOffsetPatchEnabled = expValEquals('platform_synced_block', 'isEnabled', true) && fg('platform_synced_block_patch_2');
+  var isSyncBlockOffsetPatchEnabled = editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2');
   if (!prevNode && nextNode) {
     // first node - adjust for bodied containers
     var _offset = 0;
@@ -250,7 +250,7 @@ export var dropTargetDecorations = function dropTargetDecorations(newState, api,
         return false; //not valid pos, so nested not valid either
       }
     }
-    var parentTypesWithEndDropTarget = expValEquals('platform_synced_block', 'isEnabled', true) && fg('platform_synced_block_patch_2') ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
+    var parentTypesWithEndDropTarget = editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') ? PARENT_WITH_END_DROP_TARGET_NEXT : PARENT_WITH_END_DROP_TARGET;
     if (parent.lastChild === node && !isEmptyParagraph(node) && parentTypesWithEndDropTarget.includes(parent.type.name)) {
       endPos = pos + node.nodeSize;
     }

package/dist/esm/pm-plugins/selection-preservation/pm-plugin.js

@@ -2,8 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DRAG_HANDLE_SELECTOR } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { key } from '../main';
 import { createPreservedSelection, mapPreservedSelection } from '../utils/selection';
 import { stopPreservingSelection } from './editor-commands';
@@ -103,7 +105,14 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
       },
       view: function view(initialView) {
         var view = initialView;
-        var unbindDocumentMouseDown = bind(document, {
+        var doc = getDocument();
+        if (!doc) {
+          return {
+            update: function update() {},
+            destroy: function destroy() {}
+          };
+        }
+        var unbindDocumentMouseDown = bind(doc, {
           type: 'mousedown',
           listener: function listener(e) {
             if (!(e.target instanceof HTMLElement)) {
@@ -144,14 +153,42 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
         });
         return {
           update: function update(updateView, prevState) {
-            var _selectionPreservatio, _selectionPreservatio2, _key$getState, _key$getState2;
             view = updateView;
-            var prevPreservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(prevState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
-            var currPreservedSelection = (_selectionPreservatio2 = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection;
-            var prevActiveNode = (_key$getState = key.getState(prevState)) === null || _key$getState === void 0 ? void 0 : _key$getState.activeNode;
-            var currActiveNode = (_key$getState2 = key.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode;
-            if (currPreservedSelection && view.hasFocus() && (!compareSelections(prevPreservedSelection, currPreservedSelection) || prevActiveNode !== currActiveNode)) {
-              syncDOMSelection(view.state.selection);
+
+            // [FEATURE FLAG: platform_editor_selection_sync_fix]
+            // When enabled, syncs DOM selection even when editor doesn't have focus.
+            // This prevents ghost highlighting after moving nodes when block menu is open.
+            // To clean up: remove the if-else block and keep only the flag-on behavior.
+            if (fg('platform_editor_selection_sync_fix')) {
+              var _selectionPreservatio, _selectionPreservatio2, _key$getState, _key$getState2;
+              var prevPreservedSelection = (_selectionPreservatio = selectionPreservationPluginKey.getState(prevState)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection;
+              var currPreservedSelection = (_selectionPreservatio2 = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio2 === void 0 ? void 0 : _selectionPreservatio2.preservedSelection;
+              var prevActiveNode = (_key$getState = key.getState(prevState)) === null || _key$getState === void 0 ? void 0 : _key$getState.activeNode;
+              var currActiveNode = (_key$getState2 = key.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.activeNode;
+
+              // Sync DOM selection when the preserved selection or active node changes
+              // AND the document has changed (e.g., nodes moved)
+              // This prevents stealing focus during menu navigation while still fixing ghost highlighting
+              var hasPreservedSelection = !!currPreservedSelection;
+              var preservedSelectionChanged = !compareSelections(prevPreservedSelection, currPreservedSelection);
+              var activeNodeChanged = prevActiveNode !== currActiveNode;
+              var docChanged = prevState.doc !== view.state.doc;
+              var shouldSyncDOMSelection = hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) && docChanged;
+              if (shouldSyncDOMSelection) {
+                syncDOMSelection(view.state.selection, view);
+              }
+            } else {
+              var _selectionPreservatio3, _selectionPreservatio4, _key$getState3, _key$getState4;
+              // OLD BEHAVIOR (to be removed when flag is cleaned up)
+              // Only synced when editor had focus, causing ghost highlighting issues
+              var _prevPreservedSelection = (_selectionPreservatio3 = selectionPreservationPluginKey.getState(prevState)) === null || _selectionPreservatio3 === void 0 ? void 0 : _selectionPreservatio3.preservedSelection;
+              var _currPreservedSelection = (_selectionPreservatio4 = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio4 === void 0 ? void 0 : _selectionPreservatio4.preservedSelection;
+              var _prevActiveNode = (_key$getState3 = key.getState(prevState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode;
+              var _currActiveNode = (_key$getState4 = key.getState(view.state)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeNode;
+              if (_currPreservedSelection && view.hasFocus() && (!compareSelections(_prevPreservedSelection, _currPreservedSelection) || _prevActiveNode !== _currActiveNode)) {
+                // Old syncDOMSelection signature (to be removed)
+                syncDOMSelection(view.state.selection);
+              }
             }
           },
           destroy: function destroy() {

package/dist/esm/pm-plugins/selection-preservation/utils.js

@@ -1,3 +1,5 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { selectionPreservationPluginKey } from './plugin-key';
 /**
  * Detects if any of the transactions include user-driven selection changes.
@@ -26,23 +28,61 @@ export var compareSelections = function compareSelections(a, b) {
 };
 
 /**
- * Triggers a DOM selection sync by resetting the current native selection range
- * only if it is out of sync with the provided ProseMirror selection state.
+ * Forces the browser's native selection to match ProseMirror's selection state.
  *
- * This is a necessary workaround to ensure the browser's native selection state
- * stays in sync with the preserved selection, particularly after transactions
- * that shift document content.
+ * This is necessary when the editor doesn't have focus (e.g., when block menu is open)
+ * but we still need to update the visual selection after moving nodes. Without this,
+ * the browser's native selection remains at the old position, causing ghost highlighting.
  *
- * @param selection The current ProseMirror selection state to compare against.
+ * @param selection The current ProseMirror selection state to sync to DOM.
+ * @param view The EditorView instance used to convert ProseMirror positions to DOM positions (when feature flag is enabled).
  */
-export var syncDOMSelection = function syncDOMSelection(selection) {
-  var domSelection = window.getSelection();
-  var domRange = domSelection && domSelection.rangeCount === 1 && domSelection.getRangeAt(0).cloneRange();
-  var isOutOfSync = domRange && (selection.from !== domRange.startOffset || selection.to !== domRange.endOffset);
-  if (isOutOfSync) {
-    // Force the DOM selection to refresh, setting it to the same range
-    // This will trigger ProseMirror to re-apply its selection logic based on the current state
-    domSelection.removeAllRanges();
-    domSelection.addRange(domRange);
+export var syncDOMSelection = function syncDOMSelection(selection, view) {
+  // [FEATURE FLAG: platform_editor_selection_sync_fix]
+  // When enabled, uses improved DOM selection syncing with EditorView.
+  // To clean up: remove the if-else block, remove the optional view parameter,
+  // make view required, and keep only the flag-on behavior.
+  if (view && fg('platform_editor_selection_sync_fix')) {
+    try {
+      var domSelection = window.getSelection();
+      if (!domSelection) {
+        return;
+      }
+      var doc = getDocument();
+      if (!doc) {
+        return;
+      }
+
+      // Convert ProseMirror selection to DOM selection using view.domAtPos
+      var anchor = view.domAtPos(selection.anchor);
+      var head = view.domAtPos(selection.head);
+      if (!anchor || !head) {
+        return;
+      }
+
+      // Create a new DOM range from the ProseMirror selection
+      var range = doc.createRange();
+      range.setStart(anchor.node, anchor.offset);
+      range.setEnd(head.node, head.offset);
+
+      // Update the DOM selection to match ProseMirror's selection
+      domSelection.removeAllRanges();
+      domSelection.addRange(range);
+    } catch (_unused) {
+      // Silently fail if DOM selection sync fails
+      // This can happen if positions are invalid or DOM hasn't updated yet
+    }
+  } else {
+    // OLD BEHAVIOR (to be removed when flag is cleaned up)
+    // Only checked if selection was out of sync using incorrect offset comparison
+    var _domSelection = window.getSelection();
+    var domRange = _domSelection && _domSelection.rangeCount === 1 && _domSelection.getRangeAt(0).cloneRange();
+    var isOutOfSync = domRange && (selection.from !== domRange.startOffset || selection.to !== domRange.endOffset);
+    if (isOutOfSync && _domSelection && domRange) {
+      // Force the DOM selection to refresh, setting it to the same range
+      // This will trigger ProseMirror to re-apply its selection logic based on the current state
+      _domSelection.removeAllRanges();
+      _domSelection.addRange(domRange);
+    }
   }
 };

package/dist/types/pm-plugins/selection-preservation/utils.d.ts

@@ -1,4 +1,5 @@
 import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SelectionPreservationMeta } from './types';
 /**
  * Detects if any of the transactions include user-driven selection changes.
@@ -17,13 +18,13 @@ export declare const getSelectionPreservationMeta: (tr: Transaction | ReadonlyTr
  */
 export declare const compareSelections: (a?: Selection, b?: Selection) => boolean;
 /**
- * Triggers a DOM selection sync by resetting the current native selection range
- * only if it is out of sync with the provided ProseMirror selection state.
+ * Forces the browser's native selection to match ProseMirror's selection state.
  *
- * This is a necessary workaround to ensure the browser's native selection state
- * stays in sync with the preserved selection, particularly after transactions
- * that shift document content.
+ * This is necessary when the editor doesn't have focus (e.g., when block menu is open)
+ * but we still need to update the visual selection after moving nodes. Without this,
+ * the browser's native selection remains at the old position, causing ghost highlighting.
  *
- * @param selection The current ProseMirror selection state to compare against.
+ * @param selection The current ProseMirror selection state to sync to DOM.
+ * @param view The EditorView instance used to convert ProseMirror positions to DOM positions (when feature flag is enabled).
  */
-export declare const syncDOMSelection: (selection: Selection) => void;
+export declare const syncDOMSelection: (selection: Selection, view?: EditorView) => void;

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

@@ -1,4 +1,5 @@
 import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SelectionPreservationMeta } from './types';
 /**
  * Detects if any of the transactions include user-driven selection changes.
@@ -17,13 +18,13 @@ export declare const getSelectionPreservationMeta: (tr: Transaction | ReadonlyTr
  */
 export declare const compareSelections: (a?: Selection, b?: Selection) => boolean;
 /**
- * Triggers a DOM selection sync by resetting the current native selection range
- * only if it is out of sync with the provided ProseMirror selection state.
+ * Forces the browser's native selection to match ProseMirror's selection state.
  *
- * This is a necessary workaround to ensure the browser's native selection state
- * stays in sync with the preserved selection, particularly after transactions
- * that shift document content.
+ * This is necessary when the editor doesn't have focus (e.g., when block menu is open)
+ * but we still need to update the visual selection after moving nodes. Without this,
+ * the browser's native selection remains at the old position, causing ghost highlighting.
  *
- * @param selection The current ProseMirror selection state to compare against.
+ * @param selection The current ProseMirror selection state to sync to DOM.
+ * @param view The EditorView instance used to convert ProseMirror positions to DOM positions (when feature flag is enabled).
  */
-export declare const syncDOMSelection: (selection: Selection) => void;
+export declare const syncDOMSelection: (selection: Selection, view?: EditorView) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "8.2.1",
+	"version": "8.3.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^23.0.0",
+		"@atlaskit/tmp-editor-statsig": "^23.2.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
@@ -148,6 +148,9 @@
 		},
 		"platform_synced_block_patch_2": {
 			"type": "boolean"
+		},
+		"platform_editor_selection_sync_fix": {
+			"type": "boolean"
 		}
 	}
 }