@atlaskit/editor-plugin-selection-toolbar 3.4.1 → 3.5.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 3.5.1
+
+### Patch Changes
+
+- [#141455](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141455)
+  [`8a8bd624345b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a8bd624345b5) -
+  [ED-27542] Clean up platform_editor_controls_patch_2 used for floating toolbar scroll left/right
+  buttons
+- Updated dependencies
+
+## 3.5.0
+
+### Minor Changes
+
+- [#141267](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141267)
+  [`105e8bc4d7bd5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/105e8bc4d7bd5) -
+  ED-27501 apply user preference across tabs without a refresh
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.4.1
 
 ### Patch Changes

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleToolbar = exports.setToolbarDocking = void 0;
+exports.updateToolbarDocking = exports.toggleToolbar = exports.setToolbarDocking = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -18,12 +18,22 @@ var toggleToolbar = exports.toggleToolbar = function toggleToolbar(_ref) {
     return tr;
   };
 };
-var setToolbarDocking = exports.setToolbarDocking = function setToolbarDocking(_ref3) {
-  var toolbarDocking = _ref3.toolbarDocking,
-    userPreferencesProvider = _ref3.userPreferencesProvider,
-    editorAnalyticsApi = _ref3.editorAnalyticsApi;
+var updateToolbarDocking = exports.updateToolbarDocking = function updateToolbarDocking(_ref3) {
+  var toolbarDocking = _ref3.toolbarDocking;
   return function (_ref4) {
     var tr = _ref4.tr;
+    tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
+      toolbarDocking: toolbarDocking
+    });
+    return tr;
+  };
+};
+var setToolbarDocking = exports.setToolbarDocking = function setToolbarDocking(_ref5) {
+  var toolbarDocking = _ref5.toolbarDocking,
+    userPreferencesProvider = _ref5.userPreferencesProvider,
+    editorAnalyticsApi = _ref5.editorAnalyticsApi;
+  return function (_ref6) {
+    var tr = _ref6.tr;
     // We currently ignore any update failures, need to confirm this is the desired behaviour
     userPreferencesProvider === null || userPreferencesProvider === void 0 || userPreferencesProvider.updatePreference('toolbarDockingInitialPosition', toolbarDocking);
     tr.setMeta(_pluginKey.selectionToolbarPluginKey, {

package/dist/cjs/selectionToolbarPlugin.js

@@ -18,10 +18,11 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _overflowToolbarConfig = require("./ui/overflow-toolbar-config");
+var _PageVisibilityWatcher = require("./ui/PageVisibilityWatcher");
 var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
 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) { (0, _defineProperty2.default)(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; }
-var getInitialToolbarDocking = function getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
+var getToolbarDocking = function getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
   if (contextualFormattingEnabled && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     var _userPreferencesProvi;
     return (_userPreferencesProvi = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) !== null && _userPreferencesProvi !== void 0 ? _userPreferencesProvi : 'none';
@@ -79,6 +80,16 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
           userPreferencesProvider: userPreferencesProvider,
           editorAnalyticsApi: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
         }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
+      },
+      refreshToolbarDocking: function refreshToolbarDocking() {
+        if (userPreferencesProvider) {
+          var _api$core$actions$exe4;
+          var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+          return (_api$core$actions$exe4 = api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.updateToolbarDocking)({
+            toolbarDocking: userToolbarDockingPref
+          }))) !== null && _api$core$actions$exe4 !== void 0 ? _api$core$actions$exe4 : false;
+        }
+        return false;
       }
     },
     getSharedState: function getSharedState(editorState) {
@@ -101,7 +112,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
                 return {
                   selectionStable: false,
                   hide: false,
-                  toolbarDocking: getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
+                  toolbarDocking: getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
                 };
               },
               apply: function apply(tr, pluginState) {
@@ -117,7 +128,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
                   var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
                   if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
                     previousToolbarDocking = toolbarDockingPreference;
-                    var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+                    var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
                     if (pluginState.toolbarDocking !== userToolbarDockingPref) {
                       return _objectSpread(_objectSpread({}, pluginState), {}, {
                         toolbarDocking: userToolbarDockingPref
@@ -165,7 +176,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
                 if (toolbarDockingPreference !== undefined) {
                   var _api$analytics2;
                   isPreferenceInitialized = true;
-                  var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+                  var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
                   var tr = newState.tr;
                   if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
                     tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
@@ -302,13 +313,19 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
           title: 'Selection toolbar',
           nodeType: nodeType,
           items: items
-        }, isEditorControlsEnabled && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') && {
+        }, isEditorControlsEnabled && {
           scrollable: true
         }), {}, {
           onPositionCalculated: onPositionCalculated
         });
       }
     },
+    contentComponent: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_user_preferences_provider_update') ? function () {
+      return /*#__PURE__*/_react.default.createElement(_PageVisibilityWatcher.PageVisibilityWatcher, {
+        api: api,
+        userPreferencesProvider: userPreferencesProvider
+      });
+    } : undefined,
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
       exposure: true
     }) ? primaryToolbarComponent : undefined

package/dist/cjs/ui/PageVisibilityWatcher.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageVisibilityWatcher = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var PageVisibilityWatcher = exports.PageVisibilityWatcher = function PageVisibilityWatcher(_ref) {
+  var api = _ref.api,
+    userPreferencesProvider = _ref.userPreferencesProvider;
+  (0, _react.useEffect)(function () {
+    if (!userPreferencesProvider || !api) {
+      return;
+    }
+    return (0, _bindEventListener.bind)(document, {
+      type: 'visibilitychange',
+      listener: function () {
+        var _listener = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+          var _api$selectionToolbar, _api$selectionToolbar2;
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!(document.visibilityState === 'visible')) {
+                  _context.next = 10;
+                  break;
+                }
+                _context.prev = 1;
+                _context.next = 4;
+                return userPreferencesProvider.loadPreferences();
+              case 4:
+                _context.next = 9;
+                break;
+              case 6:
+                _context.prev = 6;
+                _context.t0 = _context["catch"](1);
+                (0, _monitoring.logException)(_context.t0, {
+                  location: 'editor-plugin-selection-toolbar/PageVisibilityWatcher'
+                });
+              case 9:
+                api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.actions) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar2 = _api$selectionToolbar.refreshToolbarDocking) === null || _api$selectionToolbar2 === void 0 || _api$selectionToolbar2.call(_api$selectionToolbar);
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee, null, [[1, 6]]);
+        }));
+        function listener() {
+          return _listener.apply(this, arguments);
+        }
+        return listener;
+      }()
+    });
+  }, [api, userPreferencesProvider]);
+  return null;
+};

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

@@ -12,6 +12,16 @@ export const toggleToolbar = ({
   });
   return tr;
 };
+export const updateToolbarDocking = ({
+  toolbarDocking
+}) => ({
+  tr
+}) => {
+  tr.setMeta(selectionToolbarPluginKey, {
+    toolbarDocking
+  });
+  return tr;
+};
 export const setToolbarDocking = ({
   toolbarDocking,
   userPreferencesProvider,

package/dist/es2019/selectionToolbarPlugin.js

@@ -6,11 +6,12 @@ import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellS
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
+import { setToolbarDocking, toggleToolbar, updateToolbarDocking } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
 import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
+import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
-const getInitialToolbarDocking = (contextualFormattingEnabled, userPreferencesProvider) => {
+const getToolbarDocking = (contextualFormattingEnabled, userPreferencesProvider) => {
   if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
     var _userPreferencesProvi;
     return (_userPreferencesProvi = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) !== null && _userPreferencesProvi !== void 0 ? _userPreferencesProvi : 'none';
@@ -70,6 +71,16 @@ export const selectionToolbarPlugin = ({
           userPreferencesProvider,
           editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
         }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
+      },
+      refreshToolbarDocking: () => {
+        if (userPreferencesProvider) {
+          var _api$core$actions$exe4;
+          const userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+          return (_api$core$actions$exe4 = api === null || api === void 0 ? void 0 : api.core.actions.execute(updateToolbarDocking({
+            toolbarDocking: userToolbarDockingPref
+          }))) !== null && _api$core$actions$exe4 !== void 0 ? _api$core$actions$exe4 : false;
+        }
+        return false;
       }
     },
     getSharedState(editorState) {
@@ -92,7 +103,7 @@ export const selectionToolbarPlugin = ({
                 return {
                   selectionStable: false,
                   hide: false,
-                  toolbarDocking: getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
+                  toolbarDocking: getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
                 };
               },
               apply(tr, pluginState) {
@@ -111,7 +122,7 @@ export const selectionToolbarPlugin = ({
                   const toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
                   if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
                     previousToolbarDocking = toolbarDockingPreference;
-                    const userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+                    const userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
                     if (pluginState.toolbarDocking !== userToolbarDockingPref) {
                       return {
                         ...pluginState,
@@ -160,7 +171,7 @@ export const selectionToolbarPlugin = ({
                 if (toolbarDockingPreference !== undefined) {
                   var _api$analytics2;
                   isPreferenceInitialized = true;
-                  const userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+                  const userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
                   const tr = newState.tr;
                   if (!fg('platform_editor_controls_patch_4')) {
                     tr.setMeta(selectionToolbarPluginKey, {
@@ -294,13 +305,17 @@ export const selectionToolbarPlugin = ({
           title: 'Selection toolbar',
           nodeType: nodeType,
           items: items,
-          ...(isEditorControlsEnabled && fg('platform_editor_controls_patch_2') && {
+          ...(isEditorControlsEnabled && {
             scrollable: true
           }),
           onPositionCalculated
         };
       }
     },
+    contentComponent: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_user_preferences_provider_update') ? () => /*#__PURE__*/React.createElement(PageVisibilityWatcher, {
+      api: api,
+      userPreferencesProvider: userPreferencesProvider
+    }) : undefined,
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
       exposure: true
     }) ? primaryToolbarComponent : undefined

package/dist/es2019/ui/PageVisibilityWatcher.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { bind } from 'bind-event-listener';
+import { logException } from '@atlaskit/editor-common/monitoring';
+export const PageVisibilityWatcher = ({
+  api,
+  userPreferencesProvider
+}) => {
+  useEffect(() => {
+    if (!userPreferencesProvider || !api) {
+      return;
+    }
+    return bind(document, {
+      type: 'visibilitychange',
+      listener: async () => {
+        if (document.visibilityState === 'visible') {
+          var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+          try {
+            await userPreferencesProvider.loadPreferences();
+          } catch (error) {
+            logException(error, {
+              location: 'editor-plugin-selection-toolbar/PageVisibilityWatcher'
+            });
+          }
+          api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.refreshToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2);
+        }
+      }
+    });
+  }, [api, userPreferencesProvider]);
+  return null;
+};

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

@@ -12,12 +12,22 @@ export var toggleToolbar = function toggleToolbar(_ref) {
     return tr;
   };
 };
-export var setToolbarDocking = function setToolbarDocking(_ref3) {
-  var toolbarDocking = _ref3.toolbarDocking,
-    userPreferencesProvider = _ref3.userPreferencesProvider,
-    editorAnalyticsApi = _ref3.editorAnalyticsApi;
+export var updateToolbarDocking = function updateToolbarDocking(_ref3) {
+  var toolbarDocking = _ref3.toolbarDocking;
   return function (_ref4) {
     var tr = _ref4.tr;
+    tr.setMeta(selectionToolbarPluginKey, {
+      toolbarDocking: toolbarDocking
+    });
+    return tr;
+  };
+};
+export var setToolbarDocking = function setToolbarDocking(_ref5) {
+  var toolbarDocking = _ref5.toolbarDocking,
+    userPreferencesProvider = _ref5.userPreferencesProvider,
+    editorAnalyticsApi = _ref5.editorAnalyticsApi;
+  return function (_ref6) {
+    var tr = _ref6.tr;
     // We currently ignore any update failures, need to confirm this is the desired behaviour
     userPreferencesProvider === null || userPreferencesProvider === void 0 || userPreferencesProvider.updatePreference('toolbarDockingInitialPosition', toolbarDocking);
     tr.setMeta(selectionToolbarPluginKey, {

package/dist/esm/selectionToolbarPlugin.js

@@ -10,11 +10,12 @@ import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellS
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
+import { setToolbarDocking as _setToolbarDocking, toggleToolbar, updateToolbarDocking } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
 import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
+import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
-var getInitialToolbarDocking = function getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
+var getToolbarDocking = function getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
   if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
     var _userPreferencesProvi;
     return (_userPreferencesProvi = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) !== null && _userPreferencesProvi !== void 0 ? _userPreferencesProvi : 'none';
@@ -72,6 +73,16 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
           userPreferencesProvider: userPreferencesProvider,
           editorAnalyticsApi: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
         }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
+      },
+      refreshToolbarDocking: function refreshToolbarDocking() {
+        if (userPreferencesProvider) {
+          var _api$core$actions$exe4;
+          var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+          return (_api$core$actions$exe4 = api === null || api === void 0 ? void 0 : api.core.actions.execute(updateToolbarDocking({
+            toolbarDocking: userToolbarDockingPref
+          }))) !== null && _api$core$actions$exe4 !== void 0 ? _api$core$actions$exe4 : false;
+        }
+        return false;
       }
     },
     getSharedState: function getSharedState(editorState) {
@@ -94,7 +105,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
                 return {
                   selectionStable: false,
                   hide: false,
-                  toolbarDocking: getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
+                  toolbarDocking: getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
                 };
               },
               apply: function apply(tr, pluginState) {
@@ -110,7 +121,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
                   var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
                   if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
                     previousToolbarDocking = toolbarDockingPreference;
-                    var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+                    var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
                     if (pluginState.toolbarDocking !== userToolbarDockingPref) {
                       return _objectSpread(_objectSpread({}, pluginState), {}, {
                         toolbarDocking: userToolbarDockingPref
@@ -158,7 +169,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
                 if (toolbarDockingPreference !== undefined) {
                   var _api$analytics2;
                   isPreferenceInitialized = true;
-                  var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+                  var userToolbarDockingPref = getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
                   var tr = newState.tr;
                   if (!fg('platform_editor_controls_patch_4')) {
                     tr.setMeta(selectionToolbarPluginKey, {
@@ -295,13 +306,19 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
           title: 'Selection toolbar',
           nodeType: nodeType,
           items: items
-        }, isEditorControlsEnabled && fg('platform_editor_controls_patch_2') && {
+        }, isEditorControlsEnabled && {
           scrollable: true
         }), {}, {
           onPositionCalculated: onPositionCalculated
         });
       }
     },
+    contentComponent: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_user_preferences_provider_update') ? function () {
+      return /*#__PURE__*/React.createElement(PageVisibilityWatcher, {
+        api: api,
+        userPreferencesProvider: userPreferencesProvider
+      });
+    } : undefined,
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
       exposure: true
     }) ? primaryToolbarComponent : undefined

package/dist/esm/ui/PageVisibilityWatcher.js

@@ -0,0 +1,53 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useEffect } from 'react';
+import { bind } from 'bind-event-listener';
+import { logException } from '@atlaskit/editor-common/monitoring';
+export var PageVisibilityWatcher = function PageVisibilityWatcher(_ref) {
+  var api = _ref.api,
+    userPreferencesProvider = _ref.userPreferencesProvider;
+  useEffect(function () {
+    if (!userPreferencesProvider || !api) {
+      return;
+    }
+    return bind(document, {
+      type: 'visibilitychange',
+      listener: function () {
+        var _listener = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          var _api$selectionToolbar, _api$selectionToolbar2;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!(document.visibilityState === 'visible')) {
+                  _context.next = 10;
+                  break;
+                }
+                _context.prev = 1;
+                _context.next = 4;
+                return userPreferencesProvider.loadPreferences();
+              case 4:
+                _context.next = 9;
+                break;
+              case 6:
+                _context.prev = 6;
+                _context.t0 = _context["catch"](1);
+                logException(_context.t0, {
+                  location: 'editor-plugin-selection-toolbar/PageVisibilityWatcher'
+                });
+              case 9:
+                api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.actions) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar2 = _api$selectionToolbar.refreshToolbarDocking) === null || _api$selectionToolbar2 === void 0 || _api$selectionToolbar2.call(_api$selectionToolbar);
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee, null, [[1, 6]]);
+        }));
+        function listener() {
+          return _listener.apply(this, arguments);
+        }
+        return listener;
+      }()
+    });
+  }, [api, userPreferencesProvider]);
+  return null;
+};

package/dist/types/pm-plugins/commands.d.ts

@@ -4,6 +4,9 @@ import type { ToolbarDocking } from '../types';
 export declare const toggleToolbar: ({ hide }: {
     hide: boolean;
 }) => EditorCommand;
+export declare const updateToolbarDocking: ({ toolbarDocking }: {
+    toolbarDocking: ToolbarDocking;
+}) => EditorCommand;
 export declare const setToolbarDocking: ({ toolbarDocking, userPreferencesProvider, editorAnalyticsApi, }: {
     toolbarDocking: ToolbarDocking;
     userPreferencesProvider?: UserPreferencesProvider | undefined;

package/dist/types/selectionToolbarPluginType.d.ts

@@ -25,5 +25,6 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
         suppressToolbar?: () => boolean;
         unsuppressToolbar?: () => boolean;
         setToolbarDocking?: (toolbarDocking: ToolbarDocking) => boolean;
+        refreshToolbarDocking?: () => boolean;
     };
 }>;

package/dist/types/ui/PageVisibilityWatcher.d.ts

@@ -0,0 +1,6 @@
+import { ExtractInjectionAPI, UserPreferencesProvider } from '@atlaskit/editor-common/types';
+import { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+export declare const PageVisibilityWatcher: ({ api, userPreferencesProvider, }: {
+    api: ExtractInjectionAPI<SelectionToolbarPlugin> | undefined;
+    userPreferencesProvider?: UserPreferencesProvider | undefined;
+}) => null;

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

@@ -4,6 +4,9 @@ import type { ToolbarDocking } from '../types';
 export declare const toggleToolbar: ({ hide }: {
     hide: boolean;
 }) => EditorCommand;
+export declare const updateToolbarDocking: ({ toolbarDocking }: {
+    toolbarDocking: ToolbarDocking;
+}) => EditorCommand;
 export declare const setToolbarDocking: ({ toolbarDocking, userPreferencesProvider, editorAnalyticsApi, }: {
     toolbarDocking: ToolbarDocking;
     userPreferencesProvider?: UserPreferencesProvider | undefined;

package/dist/types-ts4.5/selectionToolbarPluginType.d.ts

@@ -25,5 +25,6 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
         suppressToolbar?: () => boolean;
         unsuppressToolbar?: () => boolean;
         setToolbarDocking?: (toolbarDocking: ToolbarDocking) => boolean;
+        refreshToolbarDocking?: () => boolean;
     };
 }>;

package/dist/types-ts4.5/ui/PageVisibilityWatcher.d.ts

@@ -0,0 +1,6 @@
+import { ExtractInjectionAPI, UserPreferencesProvider } from '@atlaskit/editor-common/types';
+import { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+export declare const PageVisibilityWatcher: ({ api, userPreferencesProvider, }: {
+    api: ExtractInjectionAPI<SelectionToolbarPlugin> | undefined;
+    userPreferencesProvider?: UserPreferencesProvider | undefined;
+}) => null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "3.4.1",
+	"version": "3.5.1",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,18 +34,18 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^103.7.0",
+		"@atlaskit/editor-common": "^103.12.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.10.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.11.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/icon": "^25.6.0",
-		"@atlaskit/icon-lab": "^4.8.0",
+		"@atlaskit/icon-lab": "^4.9.0",
 		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.8.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.12.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
@@ -95,6 +95,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_user_preferences_provider_update": {
+			"type": "boolean"
+		},
 		"platform_editor_controls_patch_2": {
 			"type": "boolean"
 		},