@atlaskit/editor-plugin-toolbar 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 1.1.0
+
+### Minor Changes
+
+- [`50976babce55d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/50976babce55d) -
+  Add new 'onClick' to dropdown menu, hook up new toolbar api to regsiter components on selection
+  change, add new safeRegistry method to replace existing objects
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.1
+
+### Patch Changes
+
+- [`cb63aae8c8554`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cb63aae8c8554) -
+  Add a check to ensure selection toolbar renders when all doc is selected
+
 ## 1.0.0
 
 ### Patch Changes

package/dist/cjs/toolbarPlugin.js

@@ -32,7 +32,12 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
     name: 'toolbar',
     actions: {
       registerComponents: function registerComponents(toolbarComponents) {
-        registry.register(toolbarComponents);
+        var replaceItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        if (replaceItems) {
+          registry.safeRegister(toolbarComponents);
+        } else {
+          registry.register(toolbarComponents);
+        }
       },
       getComponents: function getComponents() {
         return registry.components;

package/dist/cjs/types/index.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/SelectionToolbar/index.js

@@ -24,7 +24,7 @@ var isToolbarComponent = function isToolbarComponent(component) {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
 var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref) {
-  var _api$toolbar, _api$toolbar$getCompo;
+  var _api$toolbar;
   var api = _ref.api,
     editorView = _ref.editorView,
     mountPoint = _ref.mountPoint,
@@ -36,19 +36,20 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
       };
     }),
     shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
-  var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || (_api$toolbar = _api$toolbar.actions) === null || _api$toolbar === void 0 || (_api$toolbar$getCompo = _api$toolbar.getComponents) === null || _api$toolbar$getCompo === void 0 ? void 0 : _api$toolbar$getCompo.call(_api$toolbar);
+  var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.getComponents();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return isToolbarComponent(component);
   });
   var currentUserIntent = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userIntent.currentUserIntent');
   var connectivityStateMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
+  var toolbarDocking = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
   var isOffline = connectivityStateMode === 'offline';
   // TODO: ED-28735 - figure out a better way to control this - needed to re-render on selection change
   // @ts-expect-error
   var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.TextSelection;
+  var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.AllSelection && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
   var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
-  var toolbarDocking = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
   var onPositionCalculated = (0, _react.useCallback)(function (position) {
     var toolbarTitle = _consts.SELECTION_TOOLBAR_LABEL;
 
@@ -64,7 +65,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
   if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && toolbarDocking === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
   }
-  if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) || (0, _coreUtils.isSSR)()) {
+  if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) || (0, _coreUtils.isSSR)()) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {

package/dist/es2019/toolbarPlugin.js

@@ -23,8 +23,12 @@ export const toolbarPlugin = ({
   return {
     name: 'toolbar',
     actions: {
-      registerComponents: toolbarComponents => {
-        registry.register(toolbarComponents);
+      registerComponents: (toolbarComponents, replaceItems = false) => {
+        if (replaceItems) {
+          registry.safeRegister(toolbarComponents);
+        } else {
+          registry.register(toolbarComponents);
+        }
       },
       getComponents: () => {
         return registry.components;

package/dist/es2019/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/SelectionToolbar/index.js

@@ -5,7 +5,7 @@ import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor
 import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
@@ -21,7 +21,7 @@ export const SelectionToolbar = ({
   mountPoint,
   disableSelectionToolbarWhenPinned
 }) => {
-  var _api$toolbar, _api$toolbar$actions, _api$toolbar$actions$;
+  var _api$toolbar;
   const {
     shouldShowToolbar
   } = useSharedPluginStateWithSelector(api, ['toolbar'], state => {
@@ -30,17 +30,18 @@ export const SelectionToolbar = ({
       shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar
     };
   });
-  const components = api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : (_api$toolbar$actions = _api$toolbar.actions) === null || _api$toolbar$actions === void 0 ? void 0 : (_api$toolbar$actions$ = _api$toolbar$actions.getComponents) === null || _api$toolbar$actions$ === void 0 ? void 0 : _api$toolbar$actions$.call(_api$toolbar$actions);
+  const components = api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.getComponents();
   const toolbar = components === null || components === void 0 ? void 0 : components.find(component => isToolbarComponent(component));
   const currentUserIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
   const connectivityStateMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  const toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
   const isOffline = connectivityStateMode === 'offline';
   // TODO: ED-28735 - figure out a better way to control this - needed to re-render on selection change
   // @ts-expect-error
   const selection = useSharedPluginStateSelector(api, 'selection.selection');
   const isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
+  const isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection && expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
   const isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
-  const toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
   const onPositionCalculated = useCallback(position => {
     const toolbarTitle = SELECTION_TOOLBAR_LABEL;
 
@@ -56,7 +57,7 @@ export const SelectionToolbar = ({
   if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && toolbarDocking === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
   }
-  if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
+  if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
     return null;
   }
   return /*#__PURE__*/React.createElement(Popup, {

package/dist/esm/toolbarPlugin.js

@@ -25,7 +25,12 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
     name: 'toolbar',
     actions: {
       registerComponents: function registerComponents(toolbarComponents) {
-        registry.register(toolbarComponents);
+        var replaceItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        if (replaceItems) {
+          registry.safeRegister(toolbarComponents);
+        } else {
+          registry.register(toolbarComponents);
+        }
       },
       getComponents: function getComponents() {
         return registry.components;

package/dist/esm/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/SelectionToolbar/index.js

@@ -5,7 +5,7 @@ import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor
 import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
@@ -16,7 +16,7 @@ var isToolbarComponent = function isToolbarComponent(component) {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
 export var SelectionToolbar = function SelectionToolbar(_ref) {
-  var _api$toolbar, _api$toolbar$getCompo;
+  var _api$toolbar;
   var api = _ref.api,
     editorView = _ref.editorView,
     mountPoint = _ref.mountPoint,
@@ -28,19 +28,20 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
       };
     }),
     shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
-  var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || (_api$toolbar = _api$toolbar.actions) === null || _api$toolbar === void 0 || (_api$toolbar$getCompo = _api$toolbar.getComponents) === null || _api$toolbar$getCompo === void 0 ? void 0 : _api$toolbar$getCompo.call(_api$toolbar);
+  var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.getComponents();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return isToolbarComponent(component);
   });
   var currentUserIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
   var connectivityStateMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  var toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
   var isOffline = connectivityStateMode === 'offline';
   // TODO: ED-28735 - figure out a better way to control this - needed to re-render on selection change
   // @ts-expect-error
   var selection = useSharedPluginStateSelector(api, 'selection.selection');
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
+  var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection && expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
   var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
-  var toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
   var onPositionCalculated = useCallback(function (position) {
     var toolbarTitle = SELECTION_TOOLBAR_LABEL;
 
@@ -56,7 +57,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
   if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && toolbarDocking === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
   }
-  if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
+  if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
     return null;
   }
   return /*#__PURE__*/React.createElement(Popup, {

package/dist/types/toolbarPluginType.d.ts

@@ -5,11 +5,11 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
-import type { ToolbarPluginOptions } from './types';
+import type { RegisterComponentsAction, ToolbarPluginOptions } from './types';
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
     actions: {
         getComponents: () => Array<RegisterComponent>;
-        registerComponents: (toolbarComponents: Array<RegisterComponent>) => void;
+        registerComponents: RegisterComponentsAction;
     };
     dependencies: [
         OptionalPlugin<UserIntentPlugin>,

package/dist/types/types/index.d.ts

@@ -1,4 +1,6 @@
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 export type ToolbarPluginOptions = {
     disableSelectionToolbar?: boolean;
     disableSelectionToolbarWhenPinned?: boolean;
 };
+export type RegisterComponentsAction = (toolbarComponents: Array<RegisterComponent>, replaceItems?: boolean) => void;

package/dist/types/ui/SelectionToolbar/index.d.ts

@@ -4,9 +4,9 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ToolbarPlugin } from '../../toolbarPluginType';
 type SelectionToolbarProps = {
     api?: ExtractInjectionAPI<ToolbarPlugin>;
+    disableSelectionToolbarWhenPinned: boolean;
     editorView: EditorView;
     mountPoint: HTMLElement | undefined;
-    disableSelectionToolbarWhenPinned: boolean;
 };
 export declare const SelectionToolbar: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element | null;
 export {};

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

@@ -5,11 +5,11 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
-import type { ToolbarPluginOptions } from './types';
+import type { RegisterComponentsAction, ToolbarPluginOptions } from './types';
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
     actions: {
         getComponents: () => Array<RegisterComponent>;
-        registerComponents: (toolbarComponents: Array<RegisterComponent>) => void;
+        registerComponents: RegisterComponentsAction;
     };
     dependencies: [
         OptionalPlugin<UserIntentPlugin>,

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

@@ -1,4 +1,6 @@
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 export type ToolbarPluginOptions = {
     disableSelectionToolbar?: boolean;
     disableSelectionToolbarWhenPinned?: boolean;
 };
+export type RegisterComponentsAction = (toolbarComponents: Array<RegisterComponent>, replaceItems?: boolean) => void;

package/dist/types-ts4.5/ui/SelectionToolbar/index.d.ts

@@ -4,9 +4,9 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ToolbarPlugin } from '../../toolbarPluginType';
 type SelectionToolbarProps = {
     api?: ExtractInjectionAPI<ToolbarPlugin>;
+    disableSelectionToolbarWhenPinned: boolean;
     editorView: EditorView;
     mountPoint: HTMLElement | undefined;
-    disableSelectionToolbarWhenPinned: boolean;
 };
 export declare const SelectionToolbar: ({ api, editorView, mountPoint, disableSelectionToolbarWhenPinned, }: SelectionToolbarProps) => React.JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,15 +34,15 @@
 		"@atlaskit/editor-plugin-user-intent": "^2.0.0",
 		"@atlaskit/editor-plugin-user-preferences": "^2.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-toolbar": "^0.6.0",
+		"@atlaskit/editor-toolbar": "^0.7.0",
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^12.0.0",
+		"@atlaskit/tmp-editor-statsig": "^12.2.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^108.0.0",
+		"@atlaskit/editor-common": "^108.1.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {