@atlaskit/editor-plugin-selection-toolbar 3.6.9 → 3.6.11

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 3.6.11
+
+### Patch Changes
+
+- [#163573](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163573)
+  [`21e93839ec382`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21e93839ec382) -
+  Convert platform_editor_controls_toolbar_pinning fg to
+  platform_editor_controls_toolbar_pinning_exp experiment
+- Updated dependencies
+
+## 3.6.10
+
+### Patch Changes
+
+- [#162560](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/162560)
+  [`2f1b203a00ccf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f1b203a00ccf) -
+  [ux] Removes docking options from the overflow menu and converts them into pin/unpin button.
+- Updated dependencies
+
 ## 3.6.9
 
 ### Patch Changes

package/dist/cjs/selectionToolbarPlugin.js

@@ -19,6 +19,7 @@ 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 _pinToolbarConfig = require("./ui/pin-toolbar-config");
 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; }
@@ -39,22 +40,37 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
-    var _api$primaryToolbar;
-    primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
-      var popupsBoundariesElement = _ref2.popupsBoundariesElement,
-        popupsMountPoint = _ref2.popupsMountPoint,
-        popupsScrollableElement = _ref2.popupsScrollableElement;
-      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
-        api: api,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsMountPoint: popupsMountPoint,
-        popupsScrollableElement: popupsScrollableElement
+    if ((0, _experiments.editorExperiment)('platform_editor_controls_toolbar_pinning_exp', true)) {
+      var _api$primaryToolbar;
+      primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+        var disabled = _ref2.disabled;
+        return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponentNew, {
+          api: api,
+          disabled: disabled
+        });
+      };
+      api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+        name: 'pinToolbar',
+        component: primaryToolbarComponent
+      });
+    } else {
+      var _api$primaryToolbar2;
+      primaryToolbarComponent = function primaryToolbarComponent(_ref3) {
+        var popupsBoundariesElement = _ref3.popupsBoundariesElement,
+          popupsMountPoint = _ref3.popupsMountPoint,
+          popupsScrollableElement = _ref3.popupsScrollableElement;
+        return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
+          api: api,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsMountPoint: popupsMountPoint,
+          popupsScrollableElement: popupsScrollableElement
+        });
+      };
+      api === null || api === void 0 || (_api$primaryToolbar2 = api.primaryToolbar) === null || _api$primaryToolbar2 === void 0 || _api$primaryToolbar2.actions.registerComponent({
+        name: 'overflowMenu',
+        component: primaryToolbarComponent
       });
-    };
-    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-      name: 'overflowMenu',
-      component: primaryToolbarComponent
-    });
+    }
   }
   var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
   var isPreferenceInitialized = false;
@@ -220,10 +236,10 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
-        var _ref3 = _pluginKey.selectionToolbarPluginKey.getState(state),
-          selectionStable = _ref3.selectionStable,
-          hide = _ref3.hide,
-          toolbarDocking = _ref3.toolbarDocking;
+        var _ref4 = _pluginKey.selectionToolbarPluginKey.getState(state),
+          selectionStable = _ref4.selectionStable,
+          hide = _ref4.hide,
+          toolbarDocking = _ref4.toolbarDocking;
         var isCellSelection = ('$anchorCell' in state.selection);
         var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
         if (state.selection.empty || !selectionStable || hide || state.selection instanceof _state.NodeSelection ||
@@ -255,11 +271,11 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
         // they add to the selection toolbar.
         // ie. if you want to have your plugin's group appear first, set rank to -10 if there is currently another
         // plugin you expect to be run at the same time as with an rank of -9
-        resolved.sort(function (_ref4, _ref5) {
-          var _ref4$rank = _ref4.rank,
-            rankA = _ref4$rank === void 0 ? 0 : _ref4$rank;
+        resolved.sort(function (_ref5, _ref6) {
           var _ref5$rank = _ref5.rank,
-            rankB = _ref5$rank === void 0 ? 0 : _ref5$rank;
+            rankA = _ref5$rank === void 0 ? 0 : _ref5$rank;
+          var _ref6$rank = _ref6.rank,
+            rankB = _ref6$rank === void 0 ? 0 : _ref6$rank;
           if (rankA < rankB) {
             return 1;
           }
@@ -301,11 +317,19 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
           }
         }
         if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
-          items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
-            api: api,
-            toolbarDocking: toolbarDocking,
-            intl: intl
-          })));
+          if ((0, _experiments.editorExperiment)('platform_editor_controls_toolbar_pinning_exp', true)) {
+            items.push.apply(items, (0, _toConsumableArray2.default)((0, _pinToolbarConfig.getPinOptionToolbarConfig)({
+              api: api,
+              toolbarDocking: toolbarDocking,
+              intl: intl
+            })));
+          } else {
+            items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
+              api: api,
+              toolbarDocking: toolbarDocking,
+              intl: intl
+            })));
+          }
         }
         var onPositionCalculated;
         var toolbarTitle = 'Selection toolbar';

package/dist/cjs/ui/PrimaryToolbarComponent.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
+exports.PrimaryToolbarComponentNew = void 0;
 require("./PrimaryToolbarComponent.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -15,15 +16,21 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 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 _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _pin = _interopRequireDefault(require("@atlaskit/icon/core/pin"));
+var _pinFilled = _interopRequireDefault(require("@atlaskit/icon/core/pin-filled"));
 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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var DROPDOWN_WIDTH = 240;
 var buttonStyles = null;
+/**
+ * A component used to renderer a dropdown with
+ * toolbar docking options.
+ */
 function PrimaryToolbarComponent(_ref) {
   var api = _ref.api,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -90,4 +97,54 @@ function PrimaryToolbarComponent(_ref) {
   }, /*#__PURE__*/React.createElement(_showMoreHorizontal.default, {
     label: content
   })));
-}
+}
+
+/**
+ * A component used to renderer a pin/unpin
+ * button to the toolbar to the or make it in-line.
+ */
+var PrimaryToolbarComponentNew = exports.PrimaryToolbarComponentNew = function PrimaryToolbarComponentNew(_ref3) {
+  var _api$selectionToolbar;
+  var api = _ref3.api,
+    disabled = _ref3.disabled;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
+  var isOffline = mode === 'offline' || false;
+  var isDockedToTop = (api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
+  if (isDockedToTop) {
+    return /*#__PURE__*/React.createElement(_uiMenu.ToolbarButton, {
+      "aria-label": intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionPinedAtTop)
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+      ,
+
+      disabled: disabled || isOffline,
+      iconBefore: /*#__PURE__*/React.createElement(_pinFilled.default, {
+        label: "",
+        spacing: "spacious"
+      }),
+      onClick: function onClick() {
+        var _api$selectionToolbar2, _api$selectionToolbar3, _api$selectionToolbar4;
+        return (_api$selectionToolbar2 = api === null || api === void 0 || (_api$selectionToolbar3 = api.selectionToolbar.actions) === null || _api$selectionToolbar3 === void 0 || (_api$selectionToolbar4 = _api$selectionToolbar3.setToolbarDocking) === null || _api$selectionToolbar4 === void 0 ? void 0 : _api$selectionToolbar4.call(_api$selectionToolbar3, 'none')) !== null && _api$selectionToolbar2 !== void 0 ? _api$selectionToolbar2 : false;
+      },
+      title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionPinedAtTop),
+      className: (0, _runtime.ax)(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
+    });
+  }
+  return /*#__PURE__*/React.createElement(_uiMenu.ToolbarButton, {
+    "aria-label": intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionUnpined)
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+    ,
+
+    disabled: disabled || isOffline,
+    iconBefore: /*#__PURE__*/React.createElement(_pin.default, {
+      label: "",
+      spacing: "spacious"
+    }),
+    onClick: function onClick() {
+      var _api$selectionToolbar5, _api$selectionToolbar6, _api$selectionToolbar7;
+      return (_api$selectionToolbar5 = api === null || api === void 0 || (_api$selectionToolbar6 = api.selectionToolbar.actions) === null || _api$selectionToolbar6 === void 0 || (_api$selectionToolbar7 = _api$selectionToolbar6.setToolbarDocking) === null || _api$selectionToolbar7 === void 0 ? void 0 : _api$selectionToolbar7.call(_api$selectionToolbar6, 'top')) !== null && _api$selectionToolbar5 !== void 0 ? _api$selectionToolbar5 : false;
+    },
+    title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionUnpined),
+    className: (0, _runtime.ax)(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
+  });
+};

package/dist/cjs/ui/overflow-toolbar-config.js

@@ -15,8 +15,7 @@ var _minus = _interopRequireDefault(require("@atlaskit/icon/core/minus"));
 var _checkMark = _interopRequireDefault(require("@atlaskit/icon/utility/check-mark"));
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // New editor controls
 var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
   var api = _ref.api,
@@ -95,8 +94,8 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
         name: 'fixed'
       },
       onClick: function onClick() {
-        var _api$selectionToolbar10, _api$selectionToolbar11, _api$selectionToolbar12;
-        return (_api$selectionToolbar10 = api === null || api === void 0 || (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 || (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
+        var _api$selectionToolbar0, _api$selectionToolbar1, _api$selectionToolbar10;
+        return (_api$selectionToolbar0 = api === null || api === void 0 || (_api$selectionToolbar1 = api.selectionToolbar.actions) === null || _api$selectionToolbar1 === void 0 || (_api$selectionToolbar10 = _api$selectionToolbar1.setToolbarDocking) === null || _api$selectionToolbar10 === void 0 ? void 0 : _api$selectionToolbar10.call(_api$selectionToolbar1, 'top')) !== null && _api$selectionToolbar0 !== void 0 ? _api$selectionToolbar0 : false;
       },
       isActive: true,
       elemBefore: (0, _dockToolbarTop.default)({

package/dist/cjs/ui/pin-toolbar-config.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPinOptionToolbarConfig = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _pin = _interopRequireDefault(require("@atlaskit/icon/core/pin"));
+var _pinFilled = _interopRequireDefault(require("@atlaskit/icon/core/pin-filled"));
+var getPinOptionToolbarConfig = exports.getPinOptionToolbarConfig = function getPinOptionToolbarConfig(_ref) {
+  var _api$connectivity;
+  var api = _ref.api,
+    toolbarDocking = _ref.toolbarDocking,
+    intl = _ref.intl;
+  var isOffline = (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline';
+  var pinButton = {
+    disabled: isOffline,
+    id: 'editor.toolbar.unpined',
+    icon: function icon() {
+      return /*#__PURE__*/_react.default.createElement(_pin.default, {
+        label: ""
+      });
+    },
+    onClick: function onClick() {
+      var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+      return (_api$selectionToolbar = api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'top')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
+    },
+    title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionUnpined),
+    type: 'button'
+  };
+  var isDockedToTop = toolbarDocking === 'top';
+  if (isDockedToTop) {
+    pinButton = {
+      disabled: isOffline,
+      id: 'editor.toolbar.pinedToTop',
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_pinFilled.default, {
+          label: ""
+        });
+      },
+      onClick: function onClick() {
+        var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
+        return (_api$selectionToolbar4 = api === null || api === void 0 || (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 || (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'none')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
+      },
+      type: 'button',
+      title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionPinedAtTop)
+    };
+  }
+  return [{
+    type: 'separator',
+    fullHeight: true
+  }, pinButton];
+};

package/dist/es2019/selectionToolbarPlugin.js

@@ -10,7 +10,8 @@ import { setToolbarDocking, toggleToolbar, updateToolbarDocking, forceToolbarDoc
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
 import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
 import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
-import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+import { getPinOptionToolbarConfig } from './ui/pin-toolbar-config';
+import { PrimaryToolbarComponent, PrimaryToolbarComponentNew } from './ui/PrimaryToolbarComponent';
 const getToolbarDocking = (contextualFormattingEnabled, userPreferencesProvider) => {
   if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
     var _userPreferencesProvi;
@@ -31,21 +32,37 @@ export const selectionToolbarPlugin = ({
   if (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
-    var _api$primaryToolbar;
-    primaryToolbarComponent = ({
-      popupsBoundariesElement,
-      popupsMountPoint,
-      popupsScrollableElement
-    }) => /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-      api: api,
-      popupsBoundariesElement: popupsBoundariesElement,
-      popupsMountPoint: popupsMountPoint,
-      popupsScrollableElement: popupsScrollableElement
-    });
-    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
-      name: 'overflowMenu',
-      component: primaryToolbarComponent
-    });
+    if (editorExperiment('platform_editor_controls_toolbar_pinning_exp', true)) {
+      var _api$primaryToolbar;
+      primaryToolbarComponent = ({
+        disabled
+      }) => {
+        return /*#__PURE__*/React.createElement(PrimaryToolbarComponentNew, {
+          api: api,
+          disabled: disabled
+        });
+      };
+      api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+        name: 'pinToolbar',
+        component: primaryToolbarComponent
+      });
+    } else {
+      var _api$primaryToolbar2;
+      primaryToolbarComponent = ({
+        popupsBoundariesElement,
+        popupsMountPoint,
+        popupsScrollableElement
+      }) => /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+        api: api,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement
+      });
+      api === null || api === void 0 ? void 0 : (_api$primaryToolbar2 = api.primaryToolbar) === null || _api$primaryToolbar2 === void 0 ? void 0 : _api$primaryToolbar2.actions.registerComponent({
+        name: 'overflowMenu',
+        component: primaryToolbarComponent
+      });
+    }
   }
   let previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
   let isPreferenceInitialized = false;
@@ -293,11 +310,19 @@ export const selectionToolbarPlugin = ({
           }
         }
         if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
-          items.push(...getOverflowFloatingToolbarConfig({
-            api,
-            toolbarDocking,
-            intl
-          }));
+          if (editorExperiment('platform_editor_controls_toolbar_pinning_exp', true)) {
+            items.push(...getPinOptionToolbarConfig({
+              api,
+              toolbarDocking,
+              intl
+            }));
+          } else {
+            items.push(...getOverflowFloatingToolbarConfig({
+              api,
+              toolbarDocking,
+              intl
+            }));
+          }
         }
         let onPositionCalculated;
         const toolbarTitle = 'Selection toolbar';

package/dist/es2019/ui/PrimaryToolbarComponent.js

@@ -6,13 +6,20 @@ 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 messages, { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
 import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import PinIcon from '@atlaskit/icon/core/pin';
+import PinFilledIcon from '@atlaskit/icon/core/pin-filled';
 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;
+/**
+ * A component used to renderer a dropdown with
+ * toolbar docking options.
+ */
 export function PrimaryToolbarComponent({
   api,
   popupsBoundariesElement,
@@ -74,4 +81,55 @@ export function PrimaryToolbarComponent({
   }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
     label: content
   })));
-}
+}
+
+/**
+ * A component used to renderer a pin/unpin
+ * button to the toolbar to the or make it in-line.
+ */
+export const PrimaryToolbarComponentNew = ({
+  api,
+  disabled
+}) => {
+  var _api$selectionToolbar;
+  const intl = useIntl();
+  const mode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  const isOffline = mode === 'offline' || false;
+  const isDockedToTop = (api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
+  if (isDockedToTop) {
+    return /*#__PURE__*/React.createElement(ToolbarButton, {
+      "aria-label": intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop)
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+      ,
+
+      disabled: disabled || isOffline,
+      iconBefore: /*#__PURE__*/React.createElement(PinFilledIcon, {
+        label: "",
+        spacing: "spacious"
+      }),
+      onClick: () => {
+        var _api$selectionToolbar2, _api$selectionToolbar3, _api$selectionToolbar4;
+        return (_api$selectionToolbar2 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar3 = api.selectionToolbar.actions) === null || _api$selectionToolbar3 === void 0 ? void 0 : (_api$selectionToolbar4 = _api$selectionToolbar3.setToolbarDocking) === null || _api$selectionToolbar4 === void 0 ? void 0 : _api$selectionToolbar4.call(_api$selectionToolbar3, 'none')) !== null && _api$selectionToolbar2 !== void 0 ? _api$selectionToolbar2 : false;
+      },
+      title: intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop),
+      className: ax(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
+    });
+  }
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    "aria-label": intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpined)
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+    ,
+
+    disabled: disabled || isOffline,
+    iconBefore: /*#__PURE__*/React.createElement(PinIcon, {
+      label: "",
+      spacing: "spacious"
+    }),
+    onClick: () => {
+      var _api$selectionToolbar5, _api$selectionToolbar6, _api$selectionToolbar7;
+      return (_api$selectionToolbar5 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar6 = api.selectionToolbar.actions) === null || _api$selectionToolbar6 === void 0 ? void 0 : (_api$selectionToolbar7 = _api$selectionToolbar6.setToolbarDocking) === null || _api$selectionToolbar7 === void 0 ? void 0 : _api$selectionToolbar7.call(_api$selectionToolbar6, 'top')) !== null && _api$selectionToolbar5 !== void 0 ? _api$selectionToolbar5 : false;
+    },
+    title: intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpined),
+    className: ax(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
+  });
+};

package/dist/es2019/ui/overflow-toolbar-config.js

@@ -86,8 +86,8 @@ export const getOverflowPrimaryToolbarConfig = ({
       name: 'fixed'
     },
     onClick: () => {
-      var _api$selectionToolbar10, _api$selectionToolbar11, _api$selectionToolbar12;
-      return (_api$selectionToolbar10 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 ? void 0 : (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
+      var _api$selectionToolbar0, _api$selectionToolbar1, _api$selectionToolbar10;
+      return (_api$selectionToolbar0 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar1 = api.selectionToolbar.actions) === null || _api$selectionToolbar1 === void 0 ? void 0 : (_api$selectionToolbar10 = _api$selectionToolbar1.setToolbarDocking) === null || _api$selectionToolbar10 === void 0 ? void 0 : _api$selectionToolbar10.call(_api$selectionToolbar1, 'top')) !== null && _api$selectionToolbar0 !== void 0 ? _api$selectionToolbar0 : false;
     },
     isActive: true,
     elemBefore: DockToolbarTopIcon({

package/dist/es2019/ui/pin-toolbar-config.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
+import PinIcon from '@atlaskit/icon/core/pin';
+import PinFilledIcon from '@atlaskit/icon/core/pin-filled';
+export const getPinOptionToolbarConfig = ({
+  api,
+  toolbarDocking,
+  intl
+}) => {
+  var _api$connectivity, _api$connectivity$sha;
+  const isOffline = (api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState.currentState()) === null || _api$connectivity$sha === void 0 ? void 0 : _api$connectivity$sha.mode) === 'offline';
+  let pinButton = {
+    disabled: isOffline,
+    id: 'editor.toolbar.unpined',
+    icon: () => /*#__PURE__*/React.createElement(PinIcon, {
+      label: ""
+    }),
+    onClick: () => {
+      var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+      return (_api$selectionToolbar = api === null || api === void 0 ? void 0 : (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'top')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
+    },
+    title: intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpined),
+    type: 'button'
+  };
+  const isDockedToTop = toolbarDocking === 'top';
+  if (isDockedToTop) {
+    pinButton = {
+      disabled: isOffline,
+      id: 'editor.toolbar.pinedToTop',
+      icon: () => /*#__PURE__*/React.createElement(PinFilledIcon, {
+        label: ""
+      }),
+      onClick: () => {
+        var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
+        return (_api$selectionToolbar4 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 ? void 0 : (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'none')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
+      },
+      type: 'button',
+      title: intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop)
+    };
+  }
+  return [{
+    type: 'separator',
+    fullHeight: true
+  }, pinButton];
+};

package/dist/esm/selectionToolbarPlugin.js

@@ -14,7 +14,8 @@ import { setToolbarDocking as _setToolbarDocking, toggleToolbar, updateToolbarDo
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
 import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
 import { PageVisibilityWatcher } from './ui/PageVisibilityWatcher';
-import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+import { getPinOptionToolbarConfig } from './ui/pin-toolbar-config';
+import { PrimaryToolbarComponent, PrimaryToolbarComponentNew } from './ui/PrimaryToolbarComponent';
 var getToolbarDocking = function getToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
   if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
     var _userPreferencesProvi;
@@ -32,22 +33,37 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
   if (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
-    var _api$primaryToolbar;
-    primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
-      var popupsBoundariesElement = _ref2.popupsBoundariesElement,
-        popupsMountPoint = _ref2.popupsMountPoint,
-        popupsScrollableElement = _ref2.popupsScrollableElement;
-      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-        api: api,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsMountPoint: popupsMountPoint,
-        popupsScrollableElement: popupsScrollableElement
+    if (editorExperiment('platform_editor_controls_toolbar_pinning_exp', true)) {
+      var _api$primaryToolbar;
+      primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
+        var disabled = _ref2.disabled;
+        return /*#__PURE__*/React.createElement(PrimaryToolbarComponentNew, {
+          api: api,
+          disabled: disabled
+        });
+      };
+      api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+        name: 'pinToolbar',
+        component: primaryToolbarComponent
+      });
+    } else {
+      var _api$primaryToolbar2;
+      primaryToolbarComponent = function primaryToolbarComponent(_ref3) {
+        var popupsBoundariesElement = _ref3.popupsBoundariesElement,
+          popupsMountPoint = _ref3.popupsMountPoint,
+          popupsScrollableElement = _ref3.popupsScrollableElement;
+        return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+          api: api,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsMountPoint: popupsMountPoint,
+          popupsScrollableElement: popupsScrollableElement
+        });
+      };
+      api === null || api === void 0 || (_api$primaryToolbar2 = api.primaryToolbar) === null || _api$primaryToolbar2 === void 0 || _api$primaryToolbar2.actions.registerComponent({
+        name: 'overflowMenu',
+        component: primaryToolbarComponent
       });
-    };
-    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-      name: 'overflowMenu',
-      component: primaryToolbarComponent
-    });
+    }
   }
   var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
   var isPreferenceInitialized = false;
@@ -213,10 +229,10 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
-        var _ref3 = selectionToolbarPluginKey.getState(state),
-          selectionStable = _ref3.selectionStable,
-          hide = _ref3.hide,
-          toolbarDocking = _ref3.toolbarDocking;
+        var _ref4 = selectionToolbarPluginKey.getState(state),
+          selectionStable = _ref4.selectionStable,
+          hide = _ref4.hide,
+          toolbarDocking = _ref4.toolbarDocking;
         var isCellSelection = ('$anchorCell' in state.selection);
         var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
         if (state.selection.empty || !selectionStable || hide || state.selection instanceof NodeSelection ||
@@ -248,11 +264,11 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
         // they add to the selection toolbar.
         // ie. if you want to have your plugin's group appear first, set rank to -10 if there is currently another
         // plugin you expect to be run at the same time as with an rank of -9
-        resolved.sort(function (_ref4, _ref5) {
-          var _ref4$rank = _ref4.rank,
-            rankA = _ref4$rank === void 0 ? 0 : _ref4$rank;
+        resolved.sort(function (_ref5, _ref6) {
           var _ref5$rank = _ref5.rank,
-            rankB = _ref5$rank === void 0 ? 0 : _ref5$rank;
+            rankA = _ref5$rank === void 0 ? 0 : _ref5$rank;
+          var _ref6$rank = _ref6.rank,
+            rankB = _ref6$rank === void 0 ? 0 : _ref6$rank;
           if (rankA < rankB) {
             return 1;
           }
@@ -294,11 +310,19 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
           }
         }
         if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
-          items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
-            api: api,
-            toolbarDocking: toolbarDocking,
-            intl: intl
-          })));
+          if (editorExperiment('platform_editor_controls_toolbar_pinning_exp', true)) {
+            items.push.apply(items, _toConsumableArray(getPinOptionToolbarConfig({
+              api: api,
+              toolbarDocking: toolbarDocking,
+              intl: intl
+            })));
+          } else {
+            items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
+              api: api,
+              toolbarDocking: toolbarDocking,
+              intl: intl
+            })));
+          }
         }
         var onPositionCalculated;
         var toolbarTitle = 'Selection toolbar';

package/dist/esm/ui/PrimaryToolbarComponent.js

@@ -7,13 +7,20 @@ 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 messages, { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
 import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import PinIcon from '@atlaskit/icon/core/pin';
+import PinFilledIcon from '@atlaskit/icon/core/pin-filled';
 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;
+/**
+ * A component used to renderer a dropdown with
+ * toolbar docking options.
+ */
 export function PrimaryToolbarComponent(_ref) {
   var api = _ref.api,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -80,4 +87,54 @@ export function PrimaryToolbarComponent(_ref) {
   }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
     label: content
   })));
-}
+}
+
+/**
+ * A component used to renderer a pin/unpin
+ * button to the toolbar to the or make it in-line.
+ */
+export var PrimaryToolbarComponentNew = function PrimaryToolbarComponentNew(_ref3) {
+  var _api$selectionToolbar;
+  var api = _ref3.api,
+    disabled = _ref3.disabled;
+  var intl = useIntl();
+  var mode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  var isOffline = mode === 'offline' || false;
+  var isDockedToTop = (api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
+  if (isDockedToTop) {
+    return /*#__PURE__*/React.createElement(ToolbarButton, {
+      "aria-label": intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop)
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+      ,
+
+      disabled: disabled || isOffline,
+      iconBefore: /*#__PURE__*/React.createElement(PinFilledIcon, {
+        label: "",
+        spacing: "spacious"
+      }),
+      onClick: function onClick() {
+        var _api$selectionToolbar2, _api$selectionToolbar3, _api$selectionToolbar4;
+        return (_api$selectionToolbar2 = api === null || api === void 0 || (_api$selectionToolbar3 = api.selectionToolbar.actions) === null || _api$selectionToolbar3 === void 0 || (_api$selectionToolbar4 = _api$selectionToolbar3.setToolbarDocking) === null || _api$selectionToolbar4 === void 0 ? void 0 : _api$selectionToolbar4.call(_api$selectionToolbar3, 'none')) !== null && _api$selectionToolbar2 !== void 0 ? _api$selectionToolbar2 : false;
+      },
+      title: intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop),
+      className: ax(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
+    });
+  }
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    "aria-label": intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpined)
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
+    ,
+
+    disabled: disabled || isOffline,
+    iconBefore: /*#__PURE__*/React.createElement(PinIcon, {
+      label: "",
+      spacing: "spacious"
+    }),
+    onClick: function onClick() {
+      var _api$selectionToolbar5, _api$selectionToolbar6, _api$selectionToolbar7;
+      return (_api$selectionToolbar5 = api === null || api === void 0 || (_api$selectionToolbar6 = api.selectionToolbar.actions) === null || _api$selectionToolbar6 === void 0 || (_api$selectionToolbar7 = _api$selectionToolbar6.setToolbarDocking) === null || _api$selectionToolbar7 === void 0 ? void 0 : _api$selectionToolbar7.call(_api$selectionToolbar6, 'top')) !== null && _api$selectionToolbar5 !== void 0 ? _api$selectionToolbar5 : false;
+    },
+    title: intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpined),
+    className: ax(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
+  });
+};

package/dist/esm/ui/overflow-toolbar-config.js

@@ -85,8 +85,8 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
         name: 'fixed'
       },
       onClick: function onClick() {
-        var _api$selectionToolbar10, _api$selectionToolbar11, _api$selectionToolbar12;
-        return (_api$selectionToolbar10 = api === null || api === void 0 || (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 || (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
+        var _api$selectionToolbar0, _api$selectionToolbar1, _api$selectionToolbar10;
+        return (_api$selectionToolbar0 = api === null || api === void 0 || (_api$selectionToolbar1 = api.selectionToolbar.actions) === null || _api$selectionToolbar1 === void 0 || (_api$selectionToolbar10 = _api$selectionToolbar1.setToolbarDocking) === null || _api$selectionToolbar10 === void 0 ? void 0 : _api$selectionToolbar10.call(_api$selectionToolbar1, 'top')) !== null && _api$selectionToolbar0 !== void 0 ? _api$selectionToolbar0 : false;
       },
       isActive: true,
       elemBefore: DockToolbarTopIcon({

package/dist/esm/ui/pin-toolbar-config.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
+import PinIcon from '@atlaskit/icon/core/pin';
+import PinFilledIcon from '@atlaskit/icon/core/pin-filled';
+export var getPinOptionToolbarConfig = function getPinOptionToolbarConfig(_ref) {
+  var _api$connectivity;
+  var api = _ref.api,
+    toolbarDocking = _ref.toolbarDocking,
+    intl = _ref.intl;
+  var isOffline = (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline';
+  var pinButton = {
+    disabled: isOffline,
+    id: 'editor.toolbar.unpined',
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(PinIcon, {
+        label: ""
+      });
+    },
+    onClick: function onClick() {
+      var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+      return (_api$selectionToolbar = api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'top')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
+    },
+    title: intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpined),
+    type: 'button'
+  };
+  var isDockedToTop = toolbarDocking === 'top';
+  if (isDockedToTop) {
+    pinButton = {
+      disabled: isOffline,
+      id: 'editor.toolbar.pinedToTop',
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(PinFilledIcon, {
+          label: ""
+        });
+      },
+      onClick: function onClick() {
+        var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
+        return (_api$selectionToolbar4 = api === null || api === void 0 || (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 || (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'none')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
+      },
+      type: 'button',
+      title: intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop)
+    };
+  }
+  return [{
+    type: 'separator',
+    fullHeight: true
+  }, pinButton];
+};

package/dist/types/selectionToolbarPluginType.d.ts

@@ -1,6 +1,7 @@
 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 { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ToolbarDocking } from './types';
@@ -19,7 +20,8 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
         OptionalPlugin<EditorViewModePlugin>,
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<BlockControlsPlugin>
+        OptionalPlugin<BlockControlsPlugin>,
+        OptionalPlugin<ConnectivityPlugin>
     ];
     actions?: {
         suppressToolbar?: () => boolean;

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

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /// <reference types="react" />
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
@@ -7,5 +11,18 @@ type Props = {
     popupsMountPoint?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
 };
+type PrimaryToolbarComponentNewProps = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+    disabled?: boolean;
+};
+/**
+ * A component used to renderer a dropdown with
+ * toolbar docking options.
+ */
 export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): JSX.Element;
+/**
+ * A component used to renderer a pin/unpin
+ * button to the toolbar to the or make it in-line.
+ */
+export declare const PrimaryToolbarComponentNew: ({ api, disabled }: PrimaryToolbarComponentNewProps) => JSX.Element;
 export {};

package/dist/types/ui/pin-toolbar-config.d.ts

@@ -0,0 +1,11 @@
+import { type IntlShape } from 'react-intl-next';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+type PinToobarConfig = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+    toolbarDocking?: 'top' | 'none';
+    intl: IntlShape;
+};
+export declare const getPinOptionToolbarConfig: ({ api, toolbarDocking, intl, }: PinToobarConfig) => FloatingToolbarItem<Command>[];
+export {};

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

@@ -1,6 +1,7 @@
 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 { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ToolbarDocking } from './types';
@@ -19,7 +20,8 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
         OptionalPlugin<EditorViewModePlugin>,
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<BlockControlsPlugin>
+        OptionalPlugin<BlockControlsPlugin>,
+        OptionalPlugin<ConnectivityPlugin>
     ];
     actions?: {
         suppressToolbar?: () => boolean;

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

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
 type Props = {
@@ -7,5 +11,18 @@ type Props = {
     popupsMountPoint?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
 };
+type PrimaryToolbarComponentNewProps = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+    disabled?: boolean;
+};
+/**
+ * A component used to renderer a dropdown with
+ * toolbar docking options.
+ */
 export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): JSX.Element;
+/**
+ * A component used to renderer a pin/unpin
+ * button to the toolbar to the or make it in-line.
+ */
+export declare const PrimaryToolbarComponentNew: ({ api, disabled }: PrimaryToolbarComponentNewProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/pin-toolbar-config.d.ts

@@ -0,0 +1,11 @@
+import { type IntlShape } from 'react-intl-next';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+type PinToobarConfig = {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+    toolbarDocking?: 'top' | 'none';
+    intl: IntlShape;
+};
+export declare const getPinOptionToolbarConfig: ({ api, toolbarDocking, intl, }: PinToobarConfig) => FloatingToolbarItem<Command>[];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "3.6.9",
+	"version": "3.6.11",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,9 +34,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^106.0.0",
+		"@atlaskit/editor-common": "^106.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-block-controls": "^3.15.0",
+		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -44,7 +45,7 @@
 		"@atlaskit/icon-lab": "^4.17.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^5.4.0",
+		"@atlaskit/tmp-editor-statsig": "^5.7.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"