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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 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

@@ -12,6 +12,7 @@ var _bindEventListener = require("bind-event-listener");
 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");
@@ -176,10 +177,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,7 +244,7 @@ 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
@@ -250,19 +252,22 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
         }
         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/es2019/selectionToolbarPlugin.js

@@ -3,6 +3,7 @@ import { bind } from 'bind-event-listener';
 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';
@@ -172,10 +173,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,7 +236,7 @@ export const selectionToolbarPlugin = ({
             }
           }
         }
-        if (items.length > 0 && contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
+        if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
           items.push(...getOverflowFloatingToolbarConfig({
             api,
             toolbarDocking
@@ -242,7 +244,7 @@ export const selectionToolbarPlugin = ({
         }
         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 +255,9 @@ export const selectionToolbarPlugin = ({
           title: 'Selection toolbar',
           nodeType: nodeType,
           items: items,
+          ...(isEditorControlsEnabled && fg('platform_editor_controls_patch_2') && {
+            scrollable: true
+          }),
           onPositionCalculated
         };
       }

package/dist/esm/selectionToolbarPlugin.js

@@ -7,6 +7,7 @@ import { bind } from 'bind-event-listener';
 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';
@@ -169,10 +170,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,7 +237,7 @@ 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
@@ -243,19 +245,22 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
         }
         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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "3.0.0",
+	"version": "3.0.1",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,15 +34,15 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^102.13.0",
+		"@atlaskit/editor-common": "^102.16.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": "^25.4.0",
 		"@atlaskit/icon-lab": "^4.5.0",
-		"@atlaskit/menu": "^3.1.0",
+		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.4.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
@@ -90,5 +90,10 @@
 				"compiled"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_controls_patch_2": {
+			"type": "boolean"
+		}
 	}
 }