@atlaskit/editor-plugin-selection-toolbar 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 3.1.0
+
+### Minor Changes
+
+- [#135115](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135115)
+  [`599ab2e1d386c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/599ab2e1d386c) -
+  ED-27314 add user preferece analytics for toolbar docking
+
+### Patch Changes
+
+- [#135586](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135586)
+  [`3aeba66081612`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3aeba66081612) -
+  ED-26593 Add missing i18n for editor control
+- Updated dependencies
+
+## 3.0.1
+
+### Patch Changes
+
+- [#134885](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134885)
+  [`0d61709802162`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d61709802162) -
+  [ux] [ED-27312] Implement new scroll left/right buttons for scrollable floating toolbars
+
 ## 3.0.0
 
 ### Major Changes

package/dist/cjs/selectionToolbarPlugin.js

@@ -9,9 +9,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
 var _pluginKey = require("./pm-plugins/plugin-key");
@@ -54,6 +56,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
     });
   }
   var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
+  var isPreferenceInitialized = false;
   return {
     name: 'selectionToolbar',
     actions: {
@@ -108,7 +111,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
 
                 // if the toolbarDockingInitialPosition preference has changed
                 // update the toolbarDocking state
-                if (!previousToolbarDocking) {
+                if (!previousToolbarDocking && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2')) {
                   // we currently only check for the initial value
                   var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
                   if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
@@ -155,6 +158,30 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
                 }
               };
             },
+            appendTransaction: function appendTransaction(_transactions, _oldState, newState) {
+              if (!isPreferenceInitialized && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2')) {
+                var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
+                if (toolbarDockingPreference !== undefined) {
+                  var _api$analytics;
+                  isPreferenceInitialized = true;
+                  var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+                  var tr = newState.tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
+                    toolbarDocking: userToolbarDockingPref
+                  });
+                  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+                    action: _analytics.ACTION.INITIALISED,
+                    actionSubject: _analytics.ACTION_SUBJECT.USER_PREFERENCES,
+                    actionSubjectId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR_PREFERENCES,
+                    attributes: {
+                      toolbarDocking: userToolbarDockingPref
+                    },
+                    eventType: _analytics.EVENT_TYPE.OPERATIONAL
+                  })(tr);
+                  return tr;
+                }
+              }
+              return null;
+            },
             props: {
               handleDOMEvents: {
                 mousedown: function mousedown(view) {
@@ -176,10 +203,11 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
           hide = _ref3.hide,
           toolbarDocking = _ref3.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 ||
         // $anchorCell is only available in CellSelection, this check is to
         // avoid importing CellSelection from @atlaskit/editor-tables
-        isCellSelection && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
+        isCellSelection && !isEditorControlsEnabled // 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.
@@ -242,27 +270,31 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
             }
           }
         }
-        if (items.length > 0 && contextualFormattingEnabled && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
           items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
             api: api,
-            toolbarDocking: toolbarDocking
+            toolbarDocking: toolbarDocking,
+            intl: intl
           })));
         }
         var onPositionCalculated;
         var toolbarTitle = 'Selection toolbar';
-        if (isCellSelection && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        if (isCellSelection && isEditorControlsEnabled) {
           onPositionCalculated = (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle);
         } else {
           var calcToolbarPosition = config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
           onPositionCalculated = calcToolbarPosition(toolbarTitle);
         }
         var nodeType = getSelectionNodeTypes(state);
-        return {
+        return _objectSpread(_objectSpread({
           title: 'Selection toolbar',
           nodeType: nodeType,
-          items: items,
+          items: items
+        }, isEditorControlsEnabled && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') && {
+          scrollable: true
+        }), {}, {
           onPositionCalculated: onPositionCalculated
-        };
+        });
       }
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {

package/dist/cjs/ui/PrimaryToolbarComponent.js

@@ -12,7 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntlNext = require("react-intl-next");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _overflowToolbarConfig = require("./overflow-toolbar-config");
@@ -25,16 +27,18 @@ function PrimaryToolbarComponent(_ref) {
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsScrollableElement = _ref.popupsScrollableElement;
+  var intl = (0, _reactIntlNext.useIntl)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   var items = (0, _react.useMemo)(function () {
     return (0, _overflowToolbarConfig.getOverflowPrimaryToolbarConfig)({
-      api: api
+      api: api,
+      intl: intl
     });
-  }, [api]);
-  var content = 'Show more items';
+  }, [api, intl]);
+  var content = intl.formatMessage(_messages.default.viewMore);
   var onClick = (0, _react.useCallback)(function () {
     setIsOpen(!isOpen);
   }, [isOpen]);

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

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getOverflowPrimaryToolbarConfig = exports.getOverflowFloatingToolbarConfig = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _messages = require("@atlaskit/editor-common/messages");
 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"));
@@ -18,32 +19,33 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // New editor controls
 var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
   var api = _ref.api,
-    toolbarDocking = _ref.toolbarDocking;
+    toolbarDocking = _ref.toolbarDocking,
+    intl = _ref.intl;
   var isDockedToTop = toolbarDocking === 'top';
   var dropdownOptions = [{
     type: 'overflow-dropdown-heading',
-    title: 'Toolbar appears'
+    title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarAppears)
   }, {
-    title: 'In-line with text',
+    title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionInline),
     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, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
     },
     icon: (0, _minus.default)({
-      label: 'Contextual toolbar'
+      label: ''
     }),
     selected: !isDockedToTop,
     elemAfter: !isDockedToTop ? /*#__PURE__*/React.createElement(_checkMark.default, {
       label: ""
     }) : undefined
   }, {
-    title: 'Fixed at top',
+    title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionFixedAtTop),
     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, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
     },
     icon: (0, _dockToolbarTop.default)({
-      label: 'Fixed toolbar'
+      label: ''
     }),
     selected: isDockedToTop,
     elemAfter: isDockedToTop ? /*#__PURE__*/React.createElement(_checkMark.default, {
@@ -60,16 +62,17 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
   }];
 };
 var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {
-  var api = _ref2.api;
+  var api = _ref2.api,
+    intl = _ref2.intl;
   return [{
     items: [{
-      content: /*#__PURE__*/React.createElement(_menu.HeadingItem, null, "Toolbar appears"),
+      content: /*#__PURE__*/React.createElement(_menu.HeadingItem, null, intl.formatMessage(_messages.selectionToolbarMessages.toolbarAppears)),
       value: {
         name: ''
       },
       isDisabled: true
     }, {
-      content: 'In-line with text',
+      content: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionInline),
       value: {
         name: 'contextual'
       },
@@ -78,10 +81,10 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
         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, _minus.default)({
-        label: 'Contextual toolbar'
+        label: ''
       })
     }, {
-      content: 'Fixed at top',
+      content: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionFixedAtTop),
       value: {
         name: 'fixed'
       },
@@ -91,7 +94,7 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
       },
       isActive: true,
       elemBefore: (0, _dockToolbarTop.default)({
-        label: 'Fixed toolbar'
+        label: ''
       }),
       elemAfter: /*#__PURE__*/React.createElement(_checkMark.default, {
         label: ""

package/dist/es2019/selectionToolbarPlugin.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { bind } from 'bind-event-listener';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
@@ -45,6 +47,7 @@ export const selectionToolbarPlugin = ({
     });
   }
   let previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
+  let isPreferenceInitialized = false;
   return {
     name: 'selectionToolbar',
     actions: {
@@ -102,7 +105,7 @@ export const selectionToolbarPlugin = ({
 
                 // if the toolbarDockingInitialPosition preference has changed
                 // update the toolbarDocking state
-                if (!previousToolbarDocking) {
+                if (!previousToolbarDocking && !fg('platform_editor_controls_patch_2')) {
                   // we currently only check for the initial value
                   const toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
                   if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
@@ -150,6 +153,30 @@ export const selectionToolbarPlugin = ({
                 }
               };
             },
+            appendTransaction(_transactions, _oldState, newState) {
+              if (!isPreferenceInitialized && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2')) {
+                const toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
+                if (toolbarDockingPreference !== undefined) {
+                  var _api$analytics;
+                  isPreferenceInitialized = true;
+                  const userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+                  const tr = newState.tr.setMeta(selectionToolbarPluginKey, {
+                    toolbarDocking: userToolbarDockingPref
+                  });
+                  api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+                    action: ACTION.INITIALISED,
+                    actionSubject: ACTION_SUBJECT.USER_PREFERENCES,
+                    actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR_PREFERENCES,
+                    attributes: {
+                      toolbarDocking: userToolbarDockingPref
+                    },
+                    eventType: EVENT_TYPE.OPERATIONAL
+                  })(tr);
+                  return tr;
+                }
+              }
+              return null;
+            },
             props: {
               handleDOMEvents: {
                 mousedown: view => {
@@ -172,10 +199,11 @@ export const selectionToolbarPlugin = ({
           toolbarDocking
         } = selectionToolbarPluginKey.getState(state);
         const isCellSelection = ('$anchorCell' in state.selection);
+        const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
         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
-        isCellSelection && editorExperiment('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
+        isCellSelection && !isEditorControlsEnabled // 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.
@@ -234,15 +262,16 @@ export const selectionToolbarPlugin = ({
             }
           }
         }
-        if (items.length > 0 && contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
+        if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
           items.push(...getOverflowFloatingToolbarConfig({
             api,
-            toolbarDocking
+            toolbarDocking,
+            intl
           }));
         }
         let onPositionCalculated;
         const toolbarTitle = 'Selection toolbar';
-        if (isCellSelection && editorExperiment('platform_editor_controls', 'variant1')) {
+        if (isCellSelection && isEditorControlsEnabled) {
           onPositionCalculated = calculateToolbarPositionOnCellSelection(toolbarTitle);
         } else {
           const calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
@@ -253,6 +282,9 @@ export const selectionToolbarPlugin = ({
           title: 'Selection toolbar',
           nodeType: nodeType,
           items: items,
+          ...(isEditorControlsEnabled && fg('platform_editor_controls_patch_2') && {
+            scrollable: true
+          }),
           onPositionCalculated
         };
       }

package/dist/es2019/ui/PrimaryToolbarComponent.js

@@ -3,7 +3,9 @@ import "./PrimaryToolbarComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
+import messages from '@atlaskit/editor-common/messages';
 import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
@@ -15,11 +17,13 @@ export function PrimaryToolbarComponent({
   popupsMountPoint,
   popupsScrollableElement
 }) {
+  const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
   const items = useMemo(() => getOverflowPrimaryToolbarConfig({
-    api
-  }), [api]);
-  const content = 'Show more items';
+    api,
+    intl
+  }), [api, intl]);
+  const content = intl.formatMessage(messages.viewMore);
   const onClick = useCallback(() => {
     setIsOpen(!isOpen);
   }, [isOpen]);

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

@@ -1,6 +1,7 @@
 /* overflow-toolbar-config.tsx generated by @compiled/babel-plugin v0.36.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
 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';
@@ -8,33 +9,34 @@ import { HeadingItem } from '@atlaskit/menu';
 // New editor controls
 export const getOverflowFloatingToolbarConfig = ({
   api,
-  toolbarDocking
+  toolbarDocking,
+  intl
 }) => {
   const isDockedToTop = toolbarDocking === 'top';
   const dropdownOptions = [{
     type: 'overflow-dropdown-heading',
-    title: 'Toolbar appears'
+    title: intl.formatMessage(selectionToolbarMessages.toolbarAppears)
   }, {
-    title: 'In-line with text',
+    title: intl.formatMessage(selectionToolbarMessages.toolbarPositionInline),
     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, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
     },
     icon: MinusIcon({
-      label: 'Contextual toolbar'
+      label: ''
     }),
     selected: !isDockedToTop,
     elemAfter: !isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
       label: ""
     }) : undefined
   }, {
-    title: 'Fixed at top',
+    title: intl.formatMessage(selectionToolbarMessages.toolbarPositionFixedAtTop),
     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, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
     },
     icon: DockToolbarTopIcon({
-      label: 'Fixed toolbar'
+      label: ''
     }),
     selected: isDockedToTop,
     elemAfter: isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
@@ -51,16 +53,17 @@ export const getOverflowFloatingToolbarConfig = ({
   }];
 };
 export const getOverflowPrimaryToolbarConfig = ({
-  api
+  api,
+  intl
 }) => [{
   items: [{
-    content: /*#__PURE__*/React.createElement(HeadingItem, null, "Toolbar appears"),
+    content: /*#__PURE__*/React.createElement(HeadingItem, null, intl.formatMessage(selectionToolbarMessages.toolbarAppears)),
     value: {
       name: ''
     },
     isDisabled: true
   }, {
-    content: 'In-line with text',
+    content: intl.formatMessage(selectionToolbarMessages.toolbarPositionInline),
     value: {
       name: 'contextual'
     },
@@ -69,10 +72,10 @@ export const getOverflowPrimaryToolbarConfig = ({
       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: MinusIcon({
-      label: 'Contextual toolbar'
+      label: ''
     })
   }, {
-    content: 'Fixed at top',
+    content: intl.formatMessage(selectionToolbarMessages.toolbarPositionFixedAtTop),
     value: {
       name: 'fixed'
     },
@@ -82,7 +85,7 @@ export const getOverflowPrimaryToolbarConfig = ({
     },
     isActive: true,
     elemBefore: DockToolbarTopIcon({
-      label: 'Fixed toolbar'
+      label: ''
     }),
     elemAfter: /*#__PURE__*/React.createElement(CheckMarkIcon, {
       label: ""

package/dist/esm/selectionToolbarPlugin.js

@@ -4,9 +4,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 import React from 'react';
 import { bind } from 'bind-event-listener';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
 import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
@@ -47,6 +49,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
     });
   }
   var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
+  var isPreferenceInitialized = false;
   return {
     name: 'selectionToolbar',
     actions: {
@@ -101,7 +104,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
 
                 // if the toolbarDockingInitialPosition preference has changed
                 // update the toolbarDocking state
-                if (!previousToolbarDocking) {
+                if (!previousToolbarDocking && !fg('platform_editor_controls_patch_2')) {
                   // we currently only check for the initial value
                   var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
                   if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
@@ -148,6 +151,30 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
                 }
               };
             },
+            appendTransaction: function appendTransaction(_transactions, _oldState, newState) {
+              if (!isPreferenceInitialized && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2')) {
+                var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
+                if (toolbarDockingPreference !== undefined) {
+                  var _api$analytics;
+                  isPreferenceInitialized = true;
+                  var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
+                  var tr = newState.tr.setMeta(selectionToolbarPluginKey, {
+                    toolbarDocking: userToolbarDockingPref
+                  });
+                  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+                    action: ACTION.INITIALISED,
+                    actionSubject: ACTION_SUBJECT.USER_PREFERENCES,
+                    actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR_PREFERENCES,
+                    attributes: {
+                      toolbarDocking: userToolbarDockingPref
+                    },
+                    eventType: EVENT_TYPE.OPERATIONAL
+                  })(tr);
+                  return tr;
+                }
+              }
+              return null;
+            },
             props: {
               handleDOMEvents: {
                 mousedown: function mousedown(view) {
@@ -169,10 +196,11 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
           hide = _ref3.hide,
           toolbarDocking = _ref3.toolbarDocking;
         var isCellSelection = ('$anchorCell' in state.selection);
+        var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
         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
-        isCellSelection && editorExperiment('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
+        isCellSelection && !isEditorControlsEnabled // 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.
@@ -235,27 +263,31 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
             }
           }
         }
-        if (items.length > 0 && contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
+        if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
           items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
             api: api,
-            toolbarDocking: toolbarDocking
+            toolbarDocking: toolbarDocking,
+            intl: intl
           })));
         }
         var onPositionCalculated;
         var toolbarTitle = 'Selection toolbar';
-        if (isCellSelection && editorExperiment('platform_editor_controls', 'variant1')) {
+        if (isCellSelection && isEditorControlsEnabled) {
           onPositionCalculated = calculateToolbarPositionOnCellSelection(toolbarTitle);
         } else {
           var calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
           onPositionCalculated = calcToolbarPosition(toolbarTitle);
         }
         var nodeType = getSelectionNodeTypes(state);
-        return {
+        return _objectSpread(_objectSpread({
           title: 'Selection toolbar',
           nodeType: nodeType,
-          items: items,
+          items: items
+        }, isEditorControlsEnabled && fg('platform_editor_controls_patch_2') && {
+          scrollable: true
+        }), {}, {
           onPositionCalculated: onPositionCalculated
-        };
+        });
       }
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {

package/dist/esm/ui/PrimaryToolbarComponent.js

@@ -4,7 +4,9 @@ import "./PrimaryToolbarComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
+import messages from '@atlaskit/editor-common/messages';
 import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
@@ -15,16 +17,18 @@ export function PrimaryToolbarComponent(_ref) {
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsScrollableElement = _ref.popupsScrollableElement;
+  var intl = useIntl();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   var items = useMemo(function () {
     return getOverflowPrimaryToolbarConfig({
-      api: api
+      api: api,
+      intl: intl
     });
-  }, [api]);
-  var content = 'Show more items';
+  }, [api, intl]);
+  var content = intl.formatMessage(messages.viewMore);
   var onClick = useCallback(function () {
     setIsOpen(!isOpen);
   }, [isOpen]);

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

@@ -1,6 +1,7 @@
 /* overflow-toolbar-config.tsx generated by @compiled/babel-plugin v0.36.1 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
 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';
@@ -8,32 +9,33 @@ import { HeadingItem } from '@atlaskit/menu';
 // New editor controls
 export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
   var api = _ref.api,
-    toolbarDocking = _ref.toolbarDocking;
+    toolbarDocking = _ref.toolbarDocking,
+    intl = _ref.intl;
   var isDockedToTop = toolbarDocking === 'top';
   var dropdownOptions = [{
     type: 'overflow-dropdown-heading',
-    title: 'Toolbar appears'
+    title: intl.formatMessage(selectionToolbarMessages.toolbarAppears)
   }, {
-    title: 'In-line with text',
+    title: intl.formatMessage(selectionToolbarMessages.toolbarPositionInline),
     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, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
     },
     icon: MinusIcon({
-      label: 'Contextual toolbar'
+      label: ''
     }),
     selected: !isDockedToTop,
     elemAfter: !isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
       label: ""
     }) : undefined
   }, {
-    title: 'Fixed at top',
+    title: intl.formatMessage(selectionToolbarMessages.toolbarPositionFixedAtTop),
     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, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
     },
     icon: DockToolbarTopIcon({
-      label: 'Fixed toolbar'
+      label: ''
     }),
     selected: isDockedToTop,
     elemAfter: isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
@@ -50,16 +52,17 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
   }];
 };
 export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {
-  var api = _ref2.api;
+  var api = _ref2.api,
+    intl = _ref2.intl;
   return [{
     items: [{
-      content: /*#__PURE__*/React.createElement(HeadingItem, null, "Toolbar appears"),
+      content: /*#__PURE__*/React.createElement(HeadingItem, null, intl.formatMessage(selectionToolbarMessages.toolbarAppears)),
       value: {
         name: ''
       },
       isDisabled: true
     }, {
-      content: 'In-line with text',
+      content: intl.formatMessage(selectionToolbarMessages.toolbarPositionInline),
       value: {
         name: 'contextual'
       },
@@ -68,10 +71,10 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
         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: MinusIcon({
-        label: 'Contextual toolbar'
+        label: ''
       })
     }, {
-      content: 'Fixed at top',
+      content: intl.formatMessage(selectionToolbarMessages.toolbarPositionFixedAtTop),
       value: {
         name: 'fixed'
       },
@@ -81,7 +84,7 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
       },
       isActive: true,
       elemBefore: DockToolbarTopIcon({
-        label: 'Fixed toolbar'
+        label: ''
       }),
       elemAfter: /*#__PURE__*/React.createElement(CheckMarkIcon, {
         label: ""

package/dist/types/selectionToolbarPluginType.d.ts

@@ -1,4 +1,5 @@
 import type { NextEditorPlugin, OptionalPlugin, UserPreferencesProvider } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ToolbarDocking } from './types';
@@ -14,7 +15,11 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
         userPreferencesProvider?: UserPreferencesProvider;
         contextualFormattingEnabled?: boolean;
     };
-    dependencies: [OptionalPlugin<EditorViewModePlugin>, OptionalPlugin<PrimaryToolbarPlugin>];
+    dependencies: [
+        OptionalPlugin<EditorViewModePlugin>,
+        OptionalPlugin<PrimaryToolbarPlugin>,
+        OptionalPlugin<AnalyticsPlugin>
+    ];
     actions?: {
         suppressToolbar?: () => boolean;
         unsuppressToolbar?: () => boolean;

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

@@ -1,3 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import { IntlShape } from 'react-intl-next';
 import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
@@ -5,9 +11,10 @@ import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
 type OverflowToobarConfigOptions = {
     api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
     toolbarDocking?: 'top' | 'none';
+    intl: IntlShape;
 };
-export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
-export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
+export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, intl, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
+export declare const getOverflowPrimaryToolbarConfig: ({ api, intl, }: OverflowToobarConfigOptions) => {
     items: MenuItem[];
 }[];
 export {};

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

@@ -1,4 +1,5 @@
 import type { NextEditorPlugin, OptionalPlugin, UserPreferencesProvider } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ToolbarDocking } from './types';
@@ -16,7 +17,8 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
     };
     dependencies: [
         OptionalPlugin<EditorViewModePlugin>,
-        OptionalPlugin<PrimaryToolbarPlugin>
+        OptionalPlugin<PrimaryToolbarPlugin>,
+        OptionalPlugin<AnalyticsPlugin>
     ];
     actions?: {
         suppressToolbar?: () => boolean;

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

@@ -1,3 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import { IntlShape } from 'react-intl-next';
 import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
@@ -5,9 +11,10 @@ import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
 type OverflowToobarConfigOptions = {
     api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
     toolbarDocking?: 'top' | 'none';
+    intl: IntlShape;
 };
-export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
-export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
+export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, intl, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
+export declare const getOverflowPrimaryToolbarConfig: ({ api, intl, }: OverflowToobarConfigOptions) => {
     items: MenuItem[];
 }[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,22 +34,24 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^102.13.0",
+		"@atlaskit/editor-common": "^102.18.0",
+		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^25.2.0",
-		"@atlaskit/icon-lab": "^4.5.0",
-		"@atlaskit/menu": "^3.1.0",
+		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/icon-lab": "^4.6.0",
+		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.4.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
 		"@af/visual-regression": "^1.3.0",
@@ -90,5 +92,10 @@
 				"compiled"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_controls_patch_2": {
+			"type": "boolean"
+		}
 	}
 }