@atlaskit/editor-plugin-selection-toolbar 3.4.0 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 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
+
+- [#139189](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139189)
+  [`33e0a9b6291ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/33e0a9b6291ae) -
+  [ux] When table is selected via drag handle, we show Table floating controls toolbar. If the table
+  selected via other means, we show the Text Formatting toolbar.
+- Updated dependencies
+
 ## 3.4.0
 
 ### Minor 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, {
@@ -217,6 +228,14 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
           // do not show the toolbar.
           return;
         }
+        if (isCellSelection && isEditorControlsEnabled && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5')) {
+          var _api$blockControls;
+          var isSelectedViaDragHandle = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.isSelectedViaDragHandle;
+          if (isSelectedViaDragHandle) {
+            return;
+          }
+        }
+
         // Resolve the selectionToolbarHandlers to a list of SelectionToolbarGroups
         // and filter out any handlers which returned undefined
         var resolved = __selectionToolbarHandlers.map(function (selectionToolbarHandler) {
@@ -301,6 +320,12 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
         });
       }
     },
+    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/cjs/ui/PrimaryToolbarComponent.js

@@ -13,10 +13,12 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _overflowToolbarConfig = require("./overflow-toolbar-config");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -47,6 +49,18 @@ function PrimaryToolbarComponent(_ref) {
     var item = _ref2.item;
     item === null || item === void 0 || (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
   }, []);
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+        action: _analytics.ACTION.RENDERED,
+        actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.DOCKED_PRIMARY_TOOLBAR,
+        eventType: _analytics.EVENT_TYPE.UI
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement(_uiMenu.DropdownMenu, {
     isOpen: isOpen,
     onOpenChange: function onOpenChange(attrs) {

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, {
@@ -213,6 +224,14 @@ export const selectionToolbarPlugin = ({
           // do not show the toolbar.
           return;
         }
+        if (isCellSelection && isEditorControlsEnabled && fg('platform_editor_controls_patch_5')) {
+          var _api$blockControls, _api$blockControls$sh;
+          const isSelectedViaDragHandle = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.isSelectedViaDragHandle;
+          if (isSelectedViaDragHandle) {
+            return;
+          }
+        }
+
         // Resolve the selectionToolbarHandlers to a list of SelectionToolbarGroups
         // and filter out any handlers which returned undefined
         const resolved = __selectionToolbarHandlers.map(selectionToolbarHandler => selectionToolbarHandler(state, intl, providerFactory)).filter(resolved => resolved !== undefined);
@@ -293,6 +312,10 @@ export const selectionToolbarPlugin = ({
         };
       }
     },
+    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/es2019/ui/PrimaryToolbarComponent.js

@@ -2,12 +2,14 @@
 import "./PrimaryToolbarComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 import messages from '@atlaskit/editor-common/messages';
 import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
 const DROPDOWN_WIDTH = 240;
 const buttonStyles = null;
@@ -33,6 +35,18 @@ export function PrimaryToolbarComponent({
     var _item$onClick;
     item === null || item === void 0 ? void 0 : (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item);
   }, []);
+  useEffect(() => {
+    if (fg('platform_editor_controls_patch_4')) {
+      var _api$analytics;
+      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
+        action: ACTION.RENDERED,
+        actionSubject: ACTION_SUBJECT.TOOLBAR,
+        actionSubjectId: ACTION_SUBJECT_ID.DOCKED_PRIMARY_TOOLBAR,
+        eventType: EVENT_TYPE.UI
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     isOpen: isOpen,
     onOpenChange: attrs => setIsOpen(attrs.isOpen),

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, {
@@ -210,6 +221,14 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
           // do not show the toolbar.
           return;
         }
+        if (isCellSelection && isEditorControlsEnabled && fg('platform_editor_controls_patch_5')) {
+          var _api$blockControls;
+          var isSelectedViaDragHandle = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.isSelectedViaDragHandle;
+          if (isSelectedViaDragHandle) {
+            return;
+          }
+        }
+
         // Resolve the selectionToolbarHandlers to a list of SelectionToolbarGroups
         // and filter out any handlers which returned undefined
         var resolved = __selectionToolbarHandlers.map(function (selectionToolbarHandler) {
@@ -294,6 +313,12 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
         });
       }
     },
+    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/esm/ui/PrimaryToolbarComponent.js

@@ -3,12 +3,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./PrimaryToolbarComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 import messages from '@atlaskit/editor-common/messages';
 import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
 var DROPDOWN_WIDTH = 240;
 var buttonStyles = null;
@@ -37,6 +39,18 @@ export function PrimaryToolbarComponent(_ref) {
     var item = _ref2.item;
     item === null || item === void 0 || (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
   }, []);
+  useEffect(function () {
+    if (fg('platform_editor_controls_patch_4')) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
+        action: ACTION.RENDERED,
+        actionSubject: ACTION_SUBJECT.TOOLBAR,
+        actionSubjectId: ACTION_SUBJECT_ID.DOCKED_PRIMARY_TOOLBAR,
+        eventType: EVENT_TYPE.UI
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     isOpen: isOpen,
     onOpenChange: function onOpenChange(attrs) {

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

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin, UserPreferencesProvider } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ToolbarDocking } from './types';
@@ -17,11 +18,13 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
     dependencies: [
         OptionalPlugin<EditorViewModePlugin>,
         OptionalPlugin<PrimaryToolbarPlugin>,
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<BlockControlsPlugin>
     ];
     actions?: {
         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

@@ -1,5 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin, UserPreferencesProvider } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ToolbarDocking } from './types';
@@ -17,11 +18,13 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
     dependencies: [
         OptionalPlugin<EditorViewModePlugin>,
         OptionalPlugin<PrimaryToolbarPlugin>,
-        OptionalPlugin<AnalyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<BlockControlsPlugin>
     ];
     actions?: {
         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.0",
+	"version": "3.5.0",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,17 +34,18 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^103.4.0",
+		"@atlaskit/editor-common": "^103.8.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.10.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.5.0",
-		"@atlaskit/icon-lab": "^4.6.0",
+		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/icon-lab": "^4.8.0",
 		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.6.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.9.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
@@ -94,11 +95,17 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_user_preferences_provider_update": {
+			"type": "boolean"
+		},
 		"platform_editor_controls_patch_2": {
 			"type": "boolean"
 		},
 		"platform_editor_controls_patch_4": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_5": {
+			"type": "boolean"
 		}
 	}
 }