@atlaskit/editor-plugin-block-controls 13.1.3 → 13.1.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 13.1.4
+
+### Patch Changes
+
+- [`283c55290e6cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/283c55290e6cc) -
+  Preserve visual selection after applying text color or highlight
+- Updated dependencies
+
 ## 13.1.3
 
 ### Patch Changes

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

@@ -10,6 +10,7 @@ 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 _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../main");
 var _selection = require("../utils/selection");
 var _editorCommands = require("./editor-commands");
@@ -53,19 +54,37 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
       key: _pluginKey.selectionPreservationPluginKey,
       state: {
         init: function init() {
-          return {
-            preservedSelection: undefined
-          };
+          if ((0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+            return {
+              preservedSelection: undefined,
+              syncDomSelectionForDoc: undefined
+            };
+          } else {
+            return {
+              preservedSelection: undefined
+            };
+          }
         },
         apply: function apply(tr, pluginState) {
           var meta = (0, _utils.getSelectionPreservationMeta)(tr);
           var newState = _objectSpread({}, pluginState);
           if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'startPreserving') {
             newState.preservedSelection = (0, _selection.createPreservedSelection)(tr.doc.resolve(tr.selection.from), tr.doc.resolve(tr.selection.to));
+            if ((0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+              newState.syncDomSelectionForDoc = undefined;
+            }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'stopPreserving') {
             newState.preservedSelection = undefined;
-          } else if (newState.preservedSelection && tr.docChanged) {
-            newState.preservedSelection = (0, _selection.mapPreservedSelection)(newState.preservedSelection, tr);
+            if ((0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+              newState.syncDomSelectionForDoc = undefined;
+            }
+          } else if (tr.docChanged) {
+            if (newState.preservedSelection) {
+              newState.preservedSelection = (0, _selection.mapPreservedSelection)(newState.preservedSelection, tr);
+            }
+            if ((0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+              newState.syncDomSelectionForDoc = (0, _utils.hasFormatSelectionSyncMeta)(tr) ? tr.doc : undefined;
+            }
           }
           if (!(0, _utils.compareSelections)(newState.preservedSelection, pluginState.preservedSelection)) {
             if (newState.preservedSelection) {
@@ -111,6 +130,7 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
       view: function view(initialView) {
         var view = initialView;
         var doc = (0, _browserApis.getDocument)();
+        var pendingFormatSelectionSyncFrame;
         if (!doc) {
           return {
             update: function update() {},
@@ -158,10 +178,11 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
         });
         return {
           update: function update(updateView, prevState) {
-            var _selectionPreservatio, _selectionPreservatio2, _key$getState, _key$getState2;
+            var _selectionPreservatio, _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 currPluginState = _pluginKey.selectionPreservationPluginKey.getState(view.state);
+            var currPreservedSelection = currPluginState === null || currPluginState === void 0 ? void 0 : currPluginState.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;
 
@@ -172,12 +193,33 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
             var preservedSelectionChanged = !(0, _utils.compareSelections)(prevPreservedSelection, currPreservedSelection);
             var activeNodeChanged = prevActiveNode !== currActiveNode;
             var docChanged = prevState.doc !== view.state.doc;
-            var shouldSyncDOMSelection = hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) && docChanged;
+            var hasFormatSyncRequestForCurrentDoc = (currPluginState === null || currPluginState === void 0 ? void 0 : currPluginState.syncDomSelectionForDoc) === view.state.doc;
+            var shouldSyncDOMSelection = (hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) || (0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true) && hasFormatSyncRequestForCurrentDoc) && docChanged;
             if (shouldSyncDOMSelection) {
-              (0, _utils.syncDOMSelection)(view.state.selection, view);
+              var syncSelection = view.state.selection;
+              if ((0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+                if (hasFormatSyncRequestForCurrentDoc) {
+                  if (pendingFormatSelectionSyncFrame !== undefined) {
+                    cancelAnimationFrame(pendingFormatSelectionSyncFrame);
+                  }
+                  pendingFormatSelectionSyncFrame = requestAnimationFrame(function () {
+                    pendingFormatSelectionSyncFrame = undefined;
+                    (0, _utils.syncDOMSelection)(syncSelection, view, {
+                      focusEditor: true
+                    });
+                  });
+                } else {
+                  (0, _utils.syncDOMSelection)(syncSelection, view);
+                }
+              } else {
+                (0, _utils.syncDOMSelection)(syncSelection, view);
+              }
             }
           },
           destroy: function destroy() {
+            if (pendingFormatSelectionSyncFrame !== undefined) {
+              cancelAnimationFrame(pendingFormatSelectionSyncFrame);
+            }
             unbindDocumentMouseDown();
           }
         };

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.syncDOMSelection = exports.hasUserSelectionChange = exports.getSelectionPreservationMeta = exports.compareSelections = void 0;
+exports.syncDOMSelection = exports.hasUserSelectionChange = exports.hasFormatSelectionSyncMeta = exports.getSelectionPreservationMeta = exports.compareSelections = void 0;
 var _browserApis = require("@atlaskit/browser-apis");
+var _selection = require("@atlaskit/editor-common/selection");
 var _pluginKey = require("./plugin-key");
 /**
  * Detects if any of the transactions include user-driven selection changes.
@@ -20,6 +21,9 @@ var hasUserSelectionChange = exports.hasUserSelectionChange = function hasUserSe
 var getSelectionPreservationMeta = exports.getSelectionPreservationMeta = function getSelectionPreservationMeta(tr) {
   return tr.getMeta(_pluginKey.selectionPreservationPluginKey);
 };
+var hasFormatSelectionSyncMeta = exports.hasFormatSelectionSyncMeta = function hasFormatSelectionSyncMeta(tr) {
+  return tr.getMeta(_selection.FORMAT_SELECTION_SYNC_META) === true;
+};
 
 /**
  * Compares two selections for equality based on their from and to positions.
@@ -42,8 +46,13 @@ var compareSelections = exports.compareSelections = function compareSelections(a
  * @param selection The current ProseMirror selection state to sync to DOM.
  * @param view The EditorView instance used to convert ProseMirror positions to DOM positions.
  */
-var syncDOMSelection = exports.syncDOMSelection = function syncDOMSelection(selection, view) {
+var syncDOMSelection = exports.syncDOMSelection = function syncDOMSelection(selection, view, options) {
   try {
+    if (options !== null && options !== void 0 && options.focusEditor && !view.hasFocus()) {
+      // The native browser selection is only painted while the editor owns focus.
+      // Formatting toolbar interactions can move focus away before we restore the range.
+      view.focus();
+    }
     var domSelection = window.getSelection();
     if (!domSelection) {
       return;

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

@@ -2,11 +2,12 @@ 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { key } from '../main';
 import { createPreservedSelection, mapPreservedSelection } from '../utils/selection';
 import { stopPreservingSelection } from './editor-commands';
 import { selectionPreservationPluginKey } from './plugin-key';
-import { compareSelections, getSelectionPreservationMeta, hasUserSelectionChange, syncDOMSelection } from './utils';
+import { compareSelections, getSelectionPreservationMeta, hasFormatSelectionSyncMeta, hasUserSelectionChange, syncDOMSelection } from './utils';
 
 /**
  * Selection Preservation Plugin
@@ -43,9 +44,16 @@ export const createSelectionPreservationPlugin = api => () => {
     key: selectionPreservationPluginKey,
     state: {
       init() {
-        return {
-          preservedSelection: undefined
-        };
+        if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+          return {
+            preservedSelection: undefined,
+            syncDomSelectionForDoc: undefined
+          };
+        } else {
+          return {
+            preservedSelection: undefined
+          };
+        }
       },
       apply(tr, pluginState) {
         const meta = getSelectionPreservationMeta(tr);
@@ -54,10 +62,21 @@ export const createSelectionPreservationPlugin = api => () => {
         };
         if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'startPreserving') {
           newState.preservedSelection = createPreservedSelection(tr.doc.resolve(tr.selection.from), tr.doc.resolve(tr.selection.to));
+          if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+            newState.syncDomSelectionForDoc = undefined;
+          }
         } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'stopPreserving') {
           newState.preservedSelection = undefined;
-        } else if (newState.preservedSelection && tr.docChanged) {
-          newState.preservedSelection = mapPreservedSelection(newState.preservedSelection, tr);
+          if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+            newState.syncDomSelectionForDoc = undefined;
+          }
+        } else if (tr.docChanged) {
+          if (newState.preservedSelection) {
+            newState.preservedSelection = mapPreservedSelection(newState.preservedSelection, tr);
+          }
+          if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+            newState.syncDomSelectionForDoc = hasFormatSelectionSyncMeta(tr) ? tr.doc : undefined;
+          }
         }
         if (!compareSelections(newState.preservedSelection, pluginState.preservedSelection)) {
           if (newState.preservedSelection) {
@@ -103,6 +122,7 @@ export const createSelectionPreservationPlugin = api => () => {
     view(initialView) {
       let view = initialView;
       const doc = getDocument();
+      let pendingFormatSelectionSyncFrame;
       if (!doc) {
         return {
           update() {},
@@ -151,10 +171,11 @@ export const createSelectionPreservationPlugin = api => () => {
       });
       return {
         update(updateView, prevState) {
-          var _selectionPreservatio, _selectionPreservatio2, _key$getState, _key$getState2;
+          var _selectionPreservatio, _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 currPluginState = selectionPreservationPluginKey.getState(view.state);
+          const currPreservedSelection = currPluginState === null || currPluginState === void 0 ? void 0 : currPluginState.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;
 
@@ -165,12 +186,33 @@ export const createSelectionPreservationPlugin = api => () => {
           const preservedSelectionChanged = !compareSelections(prevPreservedSelection, currPreservedSelection);
           const activeNodeChanged = prevActiveNode !== currActiveNode;
           const docChanged = prevState.doc !== view.state.doc;
-          const shouldSyncDOMSelection = hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) && docChanged;
+          const hasFormatSyncRequestForCurrentDoc = (currPluginState === null || currPluginState === void 0 ? void 0 : currPluginState.syncDomSelectionForDoc) === view.state.doc;
+          const shouldSyncDOMSelection = (hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) || expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true) && hasFormatSyncRequestForCurrentDoc) && docChanged;
           if (shouldSyncDOMSelection) {
-            syncDOMSelection(view.state.selection, view);
+            const syncSelection = view.state.selection;
+            if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+              if (hasFormatSyncRequestForCurrentDoc) {
+                if (pendingFormatSelectionSyncFrame !== undefined) {
+                  cancelAnimationFrame(pendingFormatSelectionSyncFrame);
+                }
+                pendingFormatSelectionSyncFrame = requestAnimationFrame(() => {
+                  pendingFormatSelectionSyncFrame = undefined;
+                  syncDOMSelection(syncSelection, view, {
+                    focusEditor: true
+                  });
+                });
+              } else {
+                syncDOMSelection(syncSelection, view);
+              }
+            } else {
+              syncDOMSelection(syncSelection, view);
+            }
           }
         },
         destroy() {
+          if (pendingFormatSelectionSyncFrame !== undefined) {
+            cancelAnimationFrame(pendingFormatSelectionSyncFrame);
+          }
           unbindDocumentMouseDown();
         }
       };

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

@@ -1,4 +1,5 @@
 import { getDocument } from '@atlaskit/browser-apis';
+import { FORMAT_SELECTION_SYNC_META } from '@atlaskit/editor-common/selection';
 import { selectionPreservationPluginKey } from './plugin-key';
 /**
  * Detects if any of the transactions include user-driven selection changes.
@@ -12,6 +13,7 @@ export const hasUserSelectionChange = transactions => {
 export const getSelectionPreservationMeta = tr => {
   return tr.getMeta(selectionPreservationPluginKey);
 };
+export const hasFormatSelectionSyncMeta = tr => tr.getMeta(FORMAT_SELECTION_SYNC_META) === true;
 
 /**
  * Compares two selections for equality based on their from and to positions.
@@ -34,8 +36,13 @@ export const compareSelections = (a, b) => {
  * @param selection The current ProseMirror selection state to sync to DOM.
  * @param view The EditorView instance used to convert ProseMirror positions to DOM positions.
  */
-export const syncDOMSelection = (selection, view) => {
+export const syncDOMSelection = (selection, view, options) => {
   try {
+    if (options !== null && options !== void 0 && options.focusEditor && !view.hasFocus()) {
+      // The native browser selection is only painted while the editor owns focus.
+      // Formatting toolbar interactions can move focus away before we restore the range.
+      view.focus();
+    }
     const domSelection = window.getSelection();
     if (!domSelection) {
       return;

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

@@ -5,11 +5,12 @@ 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { key } from '../main';
 import { createPreservedSelection, mapPreservedSelection } from '../utils/selection';
 import { stopPreservingSelection } from './editor-commands';
 import { selectionPreservationPluginKey } from './plugin-key';
-import { compareSelections, getSelectionPreservationMeta, hasUserSelectionChange, syncDOMSelection } from './utils';
+import { compareSelections, getSelectionPreservationMeta, hasFormatSelectionSyncMeta, hasUserSelectionChange, syncDOMSelection } from './utils';
 
 /**
  * Selection Preservation Plugin
@@ -47,19 +48,37 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
       key: selectionPreservationPluginKey,
       state: {
         init: function init() {
-          return {
-            preservedSelection: undefined
-          };
+          if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+            return {
+              preservedSelection: undefined,
+              syncDomSelectionForDoc: undefined
+            };
+          } else {
+            return {
+              preservedSelection: undefined
+            };
+          }
         },
         apply: function apply(tr, pluginState) {
           var meta = getSelectionPreservationMeta(tr);
           var newState = _objectSpread({}, pluginState);
           if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'startPreserving') {
             newState.preservedSelection = createPreservedSelection(tr.doc.resolve(tr.selection.from), tr.doc.resolve(tr.selection.to));
+            if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+              newState.syncDomSelectionForDoc = undefined;
+            }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === 'stopPreserving') {
             newState.preservedSelection = undefined;
-          } else if (newState.preservedSelection && tr.docChanged) {
-            newState.preservedSelection = mapPreservedSelection(newState.preservedSelection, tr);
+            if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+              newState.syncDomSelectionForDoc = undefined;
+            }
+          } else if (tr.docChanged) {
+            if (newState.preservedSelection) {
+              newState.preservedSelection = mapPreservedSelection(newState.preservedSelection, tr);
+            }
+            if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+              newState.syncDomSelectionForDoc = hasFormatSelectionSyncMeta(tr) ? tr.doc : undefined;
+            }
           }
           if (!compareSelections(newState.preservedSelection, pluginState.preservedSelection)) {
             if (newState.preservedSelection) {
@@ -105,6 +124,7 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
       view: function view(initialView) {
         var view = initialView;
         var doc = getDocument();
+        var pendingFormatSelectionSyncFrame;
         if (!doc) {
           return {
             update: function update() {},
@@ -152,10 +172,11 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
         });
         return {
           update: function update(updateView, prevState) {
-            var _selectionPreservatio, _selectionPreservatio2, _key$getState, _key$getState2;
+            var _selectionPreservatio, _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 currPluginState = selectionPreservationPluginKey.getState(view.state);
+            var currPreservedSelection = currPluginState === null || currPluginState === void 0 ? void 0 : currPluginState.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;
 
@@ -166,12 +187,33 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
             var preservedSelectionChanged = !compareSelections(prevPreservedSelection, currPreservedSelection);
             var activeNodeChanged = prevActiveNode !== currActiveNode;
             var docChanged = prevState.doc !== view.state.doc;
-            var shouldSyncDOMSelection = hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) && docChanged;
+            var hasFormatSyncRequestForCurrentDoc = (currPluginState === null || currPluginState === void 0 ? void 0 : currPluginState.syncDomSelectionForDoc) === view.state.doc;
+            var shouldSyncDOMSelection = (hasPreservedSelection && (preservedSelectionChanged || activeNodeChanged) || expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true) && hasFormatSyncRequestForCurrentDoc) && docChanged;
             if (shouldSyncDOMSelection) {
-              syncDOMSelection(view.state.selection, view);
+              var syncSelection = view.state.selection;
+              if (expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+                if (hasFormatSyncRequestForCurrentDoc) {
+                  if (pendingFormatSelectionSyncFrame !== undefined) {
+                    cancelAnimationFrame(pendingFormatSelectionSyncFrame);
+                  }
+                  pendingFormatSelectionSyncFrame = requestAnimationFrame(function () {
+                    pendingFormatSelectionSyncFrame = undefined;
+                    syncDOMSelection(syncSelection, view, {
+                      focusEditor: true
+                    });
+                  });
+                } else {
+                  syncDOMSelection(syncSelection, view);
+                }
+              } else {
+                syncDOMSelection(syncSelection, view);
+              }
             }
           },
           destroy: function destroy() {
+            if (pendingFormatSelectionSyncFrame !== undefined) {
+              cancelAnimationFrame(pendingFormatSelectionSyncFrame);
+            }
             unbindDocumentMouseDown();
           }
         };

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

@@ -1,4 +1,5 @@
 import { getDocument } from '@atlaskit/browser-apis';
+import { FORMAT_SELECTION_SYNC_META } from '@atlaskit/editor-common/selection';
 import { selectionPreservationPluginKey } from './plugin-key';
 /**
  * Detects if any of the transactions include user-driven selection changes.
@@ -14,6 +15,9 @@ export var hasUserSelectionChange = function hasUserSelectionChange(transactions
 export var getSelectionPreservationMeta = function getSelectionPreservationMeta(tr) {
   return tr.getMeta(selectionPreservationPluginKey);
 };
+export var hasFormatSelectionSyncMeta = function hasFormatSelectionSyncMeta(tr) {
+  return tr.getMeta(FORMAT_SELECTION_SYNC_META) === true;
+};
 
 /**
  * Compares two selections for equality based on their from and to positions.
@@ -36,8 +40,13 @@ export var compareSelections = function compareSelections(a, b) {
  * @param selection The current ProseMirror selection state to sync to DOM.
  * @param view The EditorView instance used to convert ProseMirror positions to DOM positions.
  */
-export var syncDOMSelection = function syncDOMSelection(selection, view) {
+export var syncDOMSelection = function syncDOMSelection(selection, view, options) {
   try {
+    if (options !== null && options !== void 0 && options.focusEditor && !view.hasFocus()) {
+      // The native browser selection is only painted while the editor owns focus.
+      // Formatting toolbar interactions can move focus away before we restore the range.
+      view.focus();
+    }
     var domSelection = window.getSelection();
     if (!domSelection) {
       return;

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

@@ -1,6 +1,8 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 export type SelectionPreservationPluginState = {
     preservedSelection?: Selection;
+    syncDomSelectionForDoc?: PMNode;
 };
 export type SelectionPreservationMeta = {
     type: 'startPreserving' | 'stopPreserving';

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

@@ -9,6 +9,7 @@ import type { SelectionPreservationMeta } from './types';
  */
 export declare const hasUserSelectionChange: (transactions: readonly Transaction[]) => boolean;
 export declare const getSelectionPreservationMeta: (tr: Transaction | ReadonlyTransaction) => SelectionPreservationMeta | undefined;
+export declare const hasFormatSelectionSyncMeta: (tr: Transaction | ReadonlyTransaction) => boolean;
 /**
  * Compares two selections for equality based on their from and to positions.
  *
@@ -27,4 +28,6 @@ export declare const compareSelections: (a?: Selection, b?: Selection) => boolea
  * @param selection The current ProseMirror selection state to sync to DOM.
  * @param view The EditorView instance used to convert ProseMirror positions to DOM positions.
  */
-export declare const syncDOMSelection: (selection: Selection, view: EditorView) => void;
+export declare const syncDOMSelection: (selection: Selection, view: EditorView, options?: {
+    focusEditor?: boolean;
+}) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "13.1.3",
+	"version": "13.1.4",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -20,8 +20,8 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/browser-apis": "^1.0.0",
-		"@atlaskit/button": "^24.1.0",
+		"@atlaskit/browser-apis": "^1.1.0",
+		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^12.0.0",
 		"@atlaskit/editor-plugin-analytics": "^12.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^12.0.0",
@@ -39,18 +39,18 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
 		"@atlaskit/editor-tables": "^3.0.0",
-		"@atlaskit/icon": "^36.0.0",
-		"@atlaskit/icon-lab": "^7.1.0",
-		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/icon": "^36.1.0",
+		"@atlaskit/icon-lab": "^7.2.0",
+		"@atlaskit/link": "^4.1.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
-		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.0.0",
-		"@atlaskit/primitives": "^20.0.0",
-		"@atlaskit/theme": "^26.0.0",
-		"@atlaskit/tmp-editor-statsig": "^114.0.0",
-		"@atlaskit/tokens": "^15.0.0",
-		"@atlaskit/tooltip": "^23.0.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.1.0",
+		"@atlaskit/primitives": "^20.2.0",
+		"@atlaskit/theme": "^26.1.0",
+		"@atlaskit/tmp-editor-statsig": "^114.6.0",
+		"@atlaskit/tokens": "^15.2.0",
+		"@atlaskit/tooltip": "^23.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -59,7 +59,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.13.0",
+		"@atlaskit/editor-common": "^116.17.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"