@atlaskit/editor-plugin-selection-toolbar 2.1.2 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 2.2.0
+
+### Minor Changes
+
+- [#130044](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130044)
+  [`cad348d512cdf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cad348d512cdf) -
+  [ux] ED-26802 contextual formatting configuration
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.1.3
+
+### Patch Changes
+
+- [#126837](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126837)
+  [`3f513ff6dac97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f513ff6dac97) -
+  [ux] Displays Text Formatting toolbar on CellSelection.
+- Updated dependencies
+
 ## 2.1.2
 
 ### Patch Changes

package/dist/cjs/selectionToolbarPlugin.js

@@ -19,12 +19,20 @@ var _overflowToolbarConfig = require("./ui/overflow-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; }
+var getInitialToolbarDocking = function getInitialToolbarDocking(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';
+  }
+  return 'top';
+};
 var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
   var __selectionToolbarHandlers = [];
   var primaryToolbarComponent;
-  var userPreferencesProvider = config.userPreferencesProvider;
+  var userPreferencesProvider = config.userPreferencesProvider,
+    contextualFormattingEnabled = config.contextualFormattingEnabled;
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
@@ -85,14 +93,10 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
             key: _pluginKey.selectionToolbarPluginKey,
             state: {
               init: function init() {
-                var toolbarDocking = 'top';
-                if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-                  toolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || 'none';
-                }
                 return {
                   selectionStable: false,
                   hide: false,
-                  toolbarDocking: toolbarDocking
+                  toolbarDocking: getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
                 };
               },
               apply: function apply(tr, pluginState) {
@@ -154,10 +158,12 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
           selectionStable = _ref3.selectionStable,
           hide = _ref3.hide,
           toolbarDocking = _ref3.toolbarDocking;
+        var isCellSelection = ('$anchorCell' in state.selection);
         if (state.selection.empty || !selectionStable || hide || state.selection instanceof _state.NodeSelection ||
         // $anchorCell is only available in CellSelection, this check is to
         // avoid importing CellSelection from @atlaskit/editor-tables
-        '$anchorCell' in state.selection) {
+        isCellSelection && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
+        ) {
           // If there is no active selection, or the selection is not stable, or the selection is a node selection,
           // do not show the toolbar.
           return;
@@ -219,15 +225,20 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
             }
           }
         }
-        if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        if (items.length > 0 && contextualFormattingEnabled && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
           items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
             api: api,
             toolbarDocking: toolbarDocking
           })));
         }
-        var calcToolbarPosition = config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
+        var onPositionCalculated;
         var toolbarTitle = 'Selection toolbar';
-        var onPositionCalculated = calcToolbarPosition(toolbarTitle);
+        if (isCellSelection && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+          onPositionCalculated = (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle);
+        } else {
+          var calcToolbarPosition = config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
+          onPositionCalculated = calcToolbarPosition(toolbarTitle);
+        }
         var nodeType = getSelectionNodeTypes(state);
         return {
           title: 'Selection toolbar',

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getOverflowPrimaryToolbarConfig = exports.getOverflowFloatingToolbarConfig = void 0;
 var _react = require("@emotion/react");
+var _dockToolbarTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/dock-toolbar-top"));
+var _minus = _interopRequireDefault(require("@atlaskit/icon/core/minus"));
 var _checkMark = _interopRequireDefault(require("@atlaskit/icon/utility/check-mark"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right"));
 var _menu = require("@atlaskit/menu");
-var _ContextualToolbarIcon = require("./icons/ContextualToolbarIcon");
-var _FixedToolbarIcon = require("./icons/FixedToolbarIcon");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -56,8 +56,8 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
       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, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
     },
-    icon: (0, _react.jsx)(_ContextualToolbarIcon.ContextualToolbarIcon, {
-      label: "Contextual toolbar"
+    icon: (0, _minus.default)({
+      label: 'Contextual toolbar'
     }),
     selected: !isDockedToTop,
     elemAfter: !isDockedToTop ? (0, _react.jsx)(_checkMark.default, {
@@ -69,8 +69,8 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
       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, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
     },
-    icon: (0, _react.jsx)(_FixedToolbarIcon.FixedToolbarIcon, {
-      label: "Fixed toolbar"
+    icon: (0, _dockToolbarTop.default)({
+      label: 'Fixed toolbar'
     }),
     selected: isDockedToTop,
     elemAfter: isDockedToTop ? (0, _react.jsx)(_checkMark.default, {
@@ -104,8 +104,8 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
         var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
         return (_api$selectionToolbar7 = api === null || api === void 0 || (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 || (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
       },
-      elemBefore: (0, _react.jsx)(_ContextualToolbarIcon.ContextualToolbarIcon, {
-        label: "Contextual toolbar"
+      elemBefore: (0, _minus.default)({
+        label: 'Contextual toolbar'
       })
     }, {
       content: 'Fixed at top',
@@ -117,8 +117,8 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
         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;
       },
       isActive: true,
-      elemBefore: (0, _react.jsx)(_FixedToolbarIcon.FixedToolbarIcon, {
-        label: "Fixed toolbar"
+      elemBefore: (0, _dockToolbarTop.default)({
+        label: 'Fixed toolbar'
       }),
       elemAfter: (0, _react.jsx)(_checkMark.default, {
         label: ""

package/dist/es2019/selectionToolbarPlugin.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
+import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
 import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+const getInitialToolbarDocking = (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';
+  }
+  return 'top';
+};
 export const selectionToolbarPlugin = ({
   api,
   config
@@ -15,7 +22,8 @@ export const selectionToolbarPlugin = ({
   const __selectionToolbarHandlers = [];
   let primaryToolbarComponent;
   const {
-    userPreferencesProvider
+    userPreferencesProvider,
+    contextualFormattingEnabled
   } = config;
   if (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true
@@ -76,14 +84,10 @@ export const selectionToolbarPlugin = ({
             key: selectionToolbarPluginKey,
             state: {
               init() {
-                let toolbarDocking = 'top';
-                if (editorExperiment('platform_editor_controls', 'variant1')) {
-                  toolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || 'none';
-                }
                 return {
                   selectionStable: false,
                   hide: false,
-                  toolbarDocking
+                  toolbarDocking: getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
                 };
               },
               apply(tr, pluginState) {
@@ -149,10 +153,12 @@ export const selectionToolbarPlugin = ({
           hide,
           toolbarDocking
         } = selectionToolbarPluginKey.getState(state);
+        const isCellSelection = ('$anchorCell' in state.selection);
         if (state.selection.empty || !selectionStable || hide || state.selection instanceof NodeSelection ||
         // $anchorCell is only available in CellSelection, this check is to
         // avoid importing CellSelection from @atlaskit/editor-tables
-        '$anchorCell' in state.selection) {
+        isCellSelection && editorExperiment('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
+        ) {
           // If there is no active selection, or the selection is not stable, or the selection is a node selection,
           // do not show the toolbar.
           return;
@@ -210,15 +216,20 @@ export const selectionToolbarPlugin = ({
             }
           }
         }
-        if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
+        if (items.length > 0 && contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
           items.push(...getOverflowFloatingToolbarConfig({
             api,
             toolbarDocking
           }));
         }
-        const calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+        let onPositionCalculated;
         const toolbarTitle = 'Selection toolbar';
-        const onPositionCalculated = calcToolbarPosition(toolbarTitle);
+        if (isCellSelection && editorExperiment('platform_editor_controls', 'variant1')) {
+          onPositionCalculated = calculateToolbarPositionOnCellSelection(toolbarTitle);
+        } else {
+          const calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+          onPositionCalculated = calcToolbarPosition(toolbarTitle);
+        }
         const nodeType = getSelectionNodeTypes(state);
         return {
           title: 'Selection toolbar',

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

@@ -5,11 +5,11 @@
  */
 import { jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
+import DockToolbarTopIcon from '@atlaskit/icon-lab/core/dock-toolbar-top';
+import MinusIcon from '@atlaskit/icon/core/minus';
 import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
 import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right';
 import { HeadingItem } from '@atlaskit/menu';
-import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
-import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
 // New editor controls
 export const getOverflowFloatingToolbarConfig = ({
   api,
@@ -49,8 +49,8 @@ export const getOverflowFloatingToolbarConfig = ({
       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, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
     },
-    icon: jsx(ContextualToolbarIcon, {
-      label: "Contextual toolbar"
+    icon: MinusIcon({
+      label: 'Contextual toolbar'
     }),
     selected: !isDockedToTop,
     elemAfter: !isDockedToTop ? jsx(CheckMarkIcon, {
@@ -62,8 +62,8 @@ export const getOverflowFloatingToolbarConfig = ({
       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, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
     },
-    icon: jsx(FixedToolbarIcon, {
-      label: "Fixed toolbar"
+    icon: DockToolbarTopIcon({
+      label: 'Fixed toolbar'
     }),
     selected: isDockedToTop,
     elemAfter: isDockedToTop ? jsx(CheckMarkIcon, {
@@ -97,8 +97,8 @@ export const getOverflowPrimaryToolbarConfig = ({
       var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
       return (_api$selectionToolbar7 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 ? void 0 : (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
     },
-    elemBefore: jsx(ContextualToolbarIcon, {
-      label: "Contextual toolbar"
+    elemBefore: MinusIcon({
+      label: 'Contextual toolbar'
     })
   }, {
     content: 'Fixed at top',
@@ -110,8 +110,8 @@ export const getOverflowPrimaryToolbarConfig = ({
       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;
     },
     isActive: true,
-    elemBefore: jsx(FixedToolbarIcon, {
-      label: "Fixed toolbar"
+    elemBefore: DockToolbarTopIcon({
+      label: 'Fixed toolbar'
     }),
     elemAfter: jsx(CheckMarkIcon, {
       label: ""

package/dist/esm/selectionToolbarPlugin.js

@@ -5,19 +5,27 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
+import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
 import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+var getInitialToolbarDocking = function getInitialToolbarDocking(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';
+  }
+  return 'top';
+};
 export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
   var __selectionToolbarHandlers = [];
   var primaryToolbarComponent;
-  var userPreferencesProvider = config.userPreferencesProvider;
+  var userPreferencesProvider = config.userPreferencesProvider,
+    contextualFormattingEnabled = config.contextualFormattingEnabled;
   if (editorExperiment('platform_editor_controls', 'variant1', {
     exposure: true
   })) {
@@ -78,14 +86,10 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
             key: selectionToolbarPluginKey,
             state: {
               init: function init() {
-                var toolbarDocking = 'top';
-                if (editorExperiment('platform_editor_controls', 'variant1')) {
-                  toolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || 'none';
-                }
                 return {
                   selectionStable: false,
                   hide: false,
-                  toolbarDocking: toolbarDocking
+                  toolbarDocking: getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
                 };
               },
               apply: function apply(tr, pluginState) {
@@ -147,10 +151,12 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
           selectionStable = _ref3.selectionStable,
           hide = _ref3.hide,
           toolbarDocking = _ref3.toolbarDocking;
+        var isCellSelection = ('$anchorCell' in state.selection);
         if (state.selection.empty || !selectionStable || hide || state.selection instanceof NodeSelection ||
         // $anchorCell is only available in CellSelection, this check is to
         // avoid importing CellSelection from @atlaskit/editor-tables
-        '$anchorCell' in state.selection) {
+        isCellSelection && editorExperiment('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
+        ) {
           // If there is no active selection, or the selection is not stable, or the selection is a node selection,
           // do not show the toolbar.
           return;
@@ -212,15 +218,20 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
             }
           }
         }
-        if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
+        if (items.length > 0 && contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
           items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
             api: api,
             toolbarDocking: toolbarDocking
           })));
         }
-        var calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+        var onPositionCalculated;
         var toolbarTitle = 'Selection toolbar';
-        var onPositionCalculated = calcToolbarPosition(toolbarTitle);
+        if (isCellSelection && editorExperiment('platform_editor_controls', 'variant1')) {
+          onPositionCalculated = calculateToolbarPositionOnCellSelection(toolbarTitle);
+        } else {
+          var calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+          onPositionCalculated = calcToolbarPosition(toolbarTitle);
+        }
         var nodeType = getSelectionNodeTypes(state);
         return {
           title: 'Selection toolbar',

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

@@ -5,11 +5,11 @@
  */
 import { jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
+import DockToolbarTopIcon from '@atlaskit/icon-lab/core/dock-toolbar-top';
+import MinusIcon from '@atlaskit/icon/core/minus';
 import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
 import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right';
 import { HeadingItem } from '@atlaskit/menu';
-import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
-import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
 // New editor controls
 export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
   var api = _ref.api,
@@ -48,8 +48,8 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
       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, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
     },
-    icon: jsx(ContextualToolbarIcon, {
-      label: "Contextual toolbar"
+    icon: MinusIcon({
+      label: 'Contextual toolbar'
     }),
     selected: !isDockedToTop,
     elemAfter: !isDockedToTop ? jsx(CheckMarkIcon, {
@@ -61,8 +61,8 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
       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, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
     },
-    icon: jsx(FixedToolbarIcon, {
-      label: "Fixed toolbar"
+    icon: DockToolbarTopIcon({
+      label: 'Fixed toolbar'
     }),
     selected: isDockedToTop,
     elemAfter: isDockedToTop ? jsx(CheckMarkIcon, {
@@ -96,8 +96,8 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
         var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
         return (_api$selectionToolbar7 = api === null || api === void 0 || (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 || (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
       },
-      elemBefore: jsx(ContextualToolbarIcon, {
-        label: "Contextual toolbar"
+      elemBefore: MinusIcon({
+        label: 'Contextual toolbar'
       })
     }, {
       content: 'Fixed at top',
@@ -109,8 +109,8 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
         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;
       },
       isActive: true,
-      elemBefore: jsx(FixedToolbarIcon, {
-        label: "Fixed toolbar"
+      elemBefore: DockToolbarTopIcon({
+        label: 'Fixed toolbar'
       }),
       elemAfter: jsx(CheckMarkIcon, {
         label: ""

package/dist/types/selectionToolbarPluginType.d.ts

@@ -12,6 +12,7 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
          */
         preferenceToolbarAboveSelection?: boolean;
         userPreferencesProvider?: UserPreferencesProvider;
+        contextualFormattingEnabled?: boolean;
     };
     dependencies: [OptionalPlugin<EditorViewModePlugin>, OptionalPlugin<PrimaryToolbarPlugin>];
     actions?: {

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

@@ -12,6 +12,7 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
          */
         preferenceToolbarAboveSelection?: boolean;
         userPreferencesProvider?: UserPreferencesProvider;
+        contextualFormattingEnabled?: boolean;
     };
     dependencies: [
         OptionalPlugin<EditorViewModePlugin>,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "2.1.2",
+	"version": "2.2.0",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,11 +33,12 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^102.10.0",
+		"@atlaskit/editor-common": "^102.12.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-primary-toolbar": "^3.0.0",
+		"@atlaskit/editor-plugin-primary-toolbar": "^3.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon-lab": "^4.2.0",
 		"@atlaskit/menu": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/tmp-editor-statsig": "^4.1.0",

package/dist/cjs/ui/icons/ContextualToolbarIcon.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ContextualToolbarIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var ContextualToolbarIcon = exports.ContextualToolbarIcon = function ContextualToolbarIcon(props) {
-  var primaryColor = props.primaryColor,
-    label = props.label;
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    style: {
-      color: primaryColor,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      fill: "var(--ds-background-neutral-subtle, #00000000)"
-    },
-    "aria-label": label || undefined,
-    role: label ? 'img' : 'presentation'
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M14 8.75H2V7.25H14V8.75Z",
-    fill: "currentColor"
-  }));
-};

package/dist/cjs/ui/icons/FixedToolbarIcon.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FixedToolbarIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var FixedToolbarIcon = exports.FixedToolbarIcon = function FixedToolbarIcon(props) {
-  var primaryColor = props.primaryColor,
-    label = props.label;
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    style: {
-      color: primaryColor,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      fill: "var(--ds-background-neutral-subtle, #00000000)"
-    },
-    "aria-label": label || undefined,
-    role: label ? 'img' : 'presentation'
-  }, /*#__PURE__*/_react.default.createElement("rect", {
-    x: "0.75",
-    y: "1.00586",
-    width: "14.5",
-    height: "13.9879",
-    rx: "2.25",
-    stroke: "currentColor",
-    "stroke-width": "1.5"
-  }), /*#__PURE__*/_react.default.createElement("rect", {
-    x: "4",
-    y: "3.75586",
-    width: "8",
-    height: "1.5",
-    fill: "currentColor"
-  }));
-};

package/dist/es2019/ui/icons/ContextualToolbarIcon.js

@@ -1,24 +0,0 @@
-import React from 'react';
-export const ContextualToolbarIcon = props => {
-  const {
-    primaryColor,
-    label
-  } = props;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    style: {
-      color: primaryColor,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      fill: "var(--ds-background-neutral-subtle, #00000000)"
-    },
-    "aria-label": label || undefined,
-    role: label ? 'img' : 'presentation'
-  }, /*#__PURE__*/React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M14 8.75H2V7.25H14V8.75Z",
-    fill: "currentColor"
-  }));
-};

package/dist/es2019/ui/icons/FixedToolbarIcon.js

@@ -1,33 +0,0 @@
-import React from 'react';
-export const FixedToolbarIcon = props => {
-  const {
-    primaryColor,
-    label
-  } = props;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    style: {
-      color: primaryColor,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      fill: "var(--ds-background-neutral-subtle, #00000000)"
-    },
-    "aria-label": label || undefined,
-    role: label ? 'img' : 'presentation'
-  }, /*#__PURE__*/React.createElement("rect", {
-    x: "0.75",
-    y: "1.00586",
-    width: "14.5",
-    height: "13.9879",
-    rx: "2.25",
-    stroke: "currentColor",
-    "stroke-width": "1.5"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "4",
-    y: "3.75586",
-    width: "8",
-    height: "1.5",
-    fill: "currentColor"
-  }));
-};

package/dist/esm/ui/icons/ContextualToolbarIcon.js

@@ -1,22 +0,0 @@
-import React from 'react';
-export var ContextualToolbarIcon = function ContextualToolbarIcon(props) {
-  var primaryColor = props.primaryColor,
-    label = props.label;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    style: {
-      color: primaryColor,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      fill: "var(--ds-background-neutral-subtle, #00000000)"
-    },
-    "aria-label": label || undefined,
-    role: label ? 'img' : 'presentation'
-  }, /*#__PURE__*/React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M14 8.75H2V7.25H14V8.75Z",
-    fill: "currentColor"
-  }));
-};

package/dist/esm/ui/icons/FixedToolbarIcon.js

@@ -1,31 +0,0 @@
-import React from 'react';
-export var FixedToolbarIcon = function FixedToolbarIcon(props) {
-  var primaryColor = props.primaryColor,
-    label = props.label;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    style: {
-      color: primaryColor,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      fill: "var(--ds-background-neutral-subtle, #00000000)"
-    },
-    "aria-label": label || undefined,
-    role: label ? 'img' : 'presentation'
-  }, /*#__PURE__*/React.createElement("rect", {
-    x: "0.75",
-    y: "1.00586",
-    width: "14.5",
-    height: "13.9879",
-    rx: "2.25",
-    stroke: "currentColor",
-    "stroke-width": "1.5"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "4",
-    y: "3.75586",
-    width: "8",
-    height: "1.5",
-    fill: "currentColor"
-  }));
-};

package/dist/types/ui/icons/ContextualToolbarIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { SVGProps } from '@atlaskit/icon/types';
-export declare const ContextualToolbarIcon: (props: SVGProps) => React.JSX.Element;

package/dist/types/ui/icons/FixedToolbarIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { SVGProps } from '@atlaskit/icon/types';
-export declare const FixedToolbarIcon: (props: SVGProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/icons/ContextualToolbarIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { SVGProps } from '@atlaskit/icon/types';
-export declare const ContextualToolbarIcon: (props: SVGProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/icons/FixedToolbarIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { SVGProps } from '@atlaskit/icon/types';
-export declare const FixedToolbarIcon: (props: SVGProps) => React.JSX.Element;