@atlaskit/editor-plugin-selection-toolbar 4.3.8 → 4.3.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-selection-toolbar
 
+## 4.3.9
+
+### Patch Changes
+
+- [`b27824f2875be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b27824f2875be) -
+  [ux] [ED-28821] Add pin button to full page primary toolbar
+- Updated dependencies
+
 ## 4.3.8
 
 ### Patch Changes

package/dist/cjs/selectionToolbarPlugin.js

@@ -47,7 +47,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
     contextualFormattingEnabled = config.contextualFormattingEnabled;
   if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
     var _api$toolbar;
-    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api, contextualFormattingEnabled));
   } else {
     if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
       exposure: true

package/dist/cjs/ui/PinButton.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PinButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var PinButton = exports.PinButton = function PinButton(_ref) {
+  var api = _ref.api;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var message = intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionPinedAtTop);
+  var onClick = function onClick() {
+    var _api$selectionToolbar, _api$selectionToolbar2;
+    if (!api) {
+      return;
+    }
+    (_api$selectionToolbar = api.selectionToolbar.actions) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar2 = _api$selectionToolbar.setToolbarDocking) === null || _api$selectionToolbar2 === void 0 || _api$selectionToolbar2.call(_api$selectionToolbar, 'none');
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: message
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.PinnedIcon, {
+      size: "small",
+      label: ""
+    }),
+    label: message,
+    onClick: onClick
+  }));
+};

package/dist/cjs/ui/toolbar-components.js

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.getToolbarComponents = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _PinButton = require("./PinButton");
 var _PinMenuItem = require("./PinMenuItem");
-var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
-  return [{
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api, contextualFormattingEnabled) {
+  var components = [{
     type: _toolbar.PIN_MENU_SECTION.type,
     key: _toolbar.PIN_MENU_SECTION.key,
     parents: [{
@@ -31,4 +32,32 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       });
     }
   }];
+
+  // Add pin button to primary toolbar when contextual formatting is enabled
+  if (contextualFormattingEnabled) {
+    var pinButtonComponents = [{
+      type: _toolbar.PIN_GROUP.type,
+      key: _toolbar.PIN_GROUP.key,
+      parents: [{
+        type: _toolbar.PIN_SECTION.type,
+        key: _toolbar.PIN_SECTION.key,
+        rank: _toolbar.PIN_SECTION_RANK[_toolbar.PIN_GROUP.key]
+      }]
+    }, {
+      type: _toolbar.PIN_BUTTON.type,
+      key: _toolbar.PIN_BUTTON.key,
+      parents: [{
+        type: _toolbar.PIN_GROUP.type,
+        key: _toolbar.PIN_GROUP.key,
+        rank: _toolbar.PIN_GROUP_RANK[_toolbar.PIN_BUTTON.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_PinButton.PinButton, {
+          api: api
+        });
+      }
+    }];
+    components.push.apply(components, pinButtonComponents);
+  }
+  return components;
 };

package/dist/es2019/selectionToolbarPlugin.js

@@ -39,7 +39,7 @@ export const selectionToolbarPlugin = ({
   } = config;
   if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
     var _api$toolbar;
-    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api, contextualFormattingEnabled));
   } else {
     if (editorExperiment('platform_editor_controls', 'variant1', {
       exposure: true

package/dist/es2019/ui/PinButton.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
+import { PinnedIcon, ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+export const PinButton = ({
+  api
+}) => {
+  const intl = useIntl();
+  const message = intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop);
+  const onClick = () => {
+    var _api$selectionToolbar, _api$selectionToolbar2;
+    if (!api) {
+      return;
+    }
+    (_api$selectionToolbar = api.selectionToolbar.actions) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.setToolbarDocking) === null || _api$selectionToolbar2 === void 0 ? void 0 : _api$selectionToolbar2.call(_api$selectionToolbar, 'none');
+  };
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: message
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(PinnedIcon, {
+      size: "small",
+      label: ""
+    }),
+    label: message,
+    onClick: onClick
+  }));
+};

package/dist/es2019/ui/toolbar-components.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { OVERFLOW_MENU, OVERFLOW_MENU_RANK, PIN_MENU_ITEM, PIN_MENU_SECTION, PIN_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { OVERFLOW_MENU, OVERFLOW_MENU_RANK, PIN_BUTTON, PIN_GROUP, PIN_MENU_ITEM, PIN_MENU_SECTION, PIN_MENU_SECTION_RANK, PIN_GROUP_RANK, PIN_SECTION, PIN_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { PinButton } from './PinButton';
 import { PinMenuItem } from './PinMenuItem';
-export const getToolbarComponents = api => {
-  return [{
+export const getToolbarComponents = (api, contextualFormattingEnabled) => {
+  const components = [{
     type: PIN_MENU_SECTION.type,
     key: PIN_MENU_SECTION.key,
     parents: [{
@@ -24,4 +25,32 @@ export const getToolbarComponents = api => {
       });
     }
   }];
+
+  // Add pin button to primary toolbar when contextual formatting is enabled
+  if (contextualFormattingEnabled) {
+    const pinButtonComponents = [{
+      type: PIN_GROUP.type,
+      key: PIN_GROUP.key,
+      parents: [{
+        type: PIN_SECTION.type,
+        key: PIN_SECTION.key,
+        rank: PIN_SECTION_RANK[PIN_GROUP.key]
+      }]
+    }, {
+      type: PIN_BUTTON.type,
+      key: PIN_BUTTON.key,
+      parents: [{
+        type: PIN_GROUP.type,
+        key: PIN_GROUP.key,
+        rank: PIN_GROUP_RANK[PIN_BUTTON.key]
+      }],
+      component: () => {
+        return /*#__PURE__*/React.createElement(PinButton, {
+          api: api
+        });
+      }
+    }];
+    components.push(...pinButtonComponents);
+  }
+  return components;
 };

package/dist/esm/selectionToolbarPlugin.js

@@ -40,7 +40,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
     contextualFormattingEnabled = config.contextualFormattingEnabled;
   if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
     var _api$toolbar;
-    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api, contextualFormattingEnabled));
   } else {
     if (editorExperiment('platform_editor_controls', 'variant1', {
       exposure: true

package/dist/esm/ui/PinButton.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
+import { PinnedIcon, ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+export var PinButton = function PinButton(_ref) {
+  var api = _ref.api;
+  var intl = useIntl();
+  var message = intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop);
+  var onClick = function onClick() {
+    var _api$selectionToolbar, _api$selectionToolbar2;
+    if (!api) {
+      return;
+    }
+    (_api$selectionToolbar = api.selectionToolbar.actions) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar2 = _api$selectionToolbar.setToolbarDocking) === null || _api$selectionToolbar2 === void 0 || _api$selectionToolbar2.call(_api$selectionToolbar, 'none');
+  };
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: message
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(PinnedIcon, {
+      size: "small",
+      label: ""
+    }),
+    label: message,
+    onClick: onClick
+  }));
+};

package/dist/esm/ui/toolbar-components.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { OVERFLOW_MENU, OVERFLOW_MENU_RANK, PIN_MENU_ITEM, PIN_MENU_SECTION, PIN_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { OVERFLOW_MENU, OVERFLOW_MENU_RANK, PIN_BUTTON, PIN_GROUP, PIN_MENU_ITEM, PIN_MENU_SECTION, PIN_MENU_SECTION_RANK, PIN_GROUP_RANK, PIN_SECTION, PIN_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { PinButton } from './PinButton';
 import { PinMenuItem } from './PinMenuItem';
-export var getToolbarComponents = function getToolbarComponents(api) {
-  return [{
+export var getToolbarComponents = function getToolbarComponents(api, contextualFormattingEnabled) {
+  var components = [{
     type: PIN_MENU_SECTION.type,
     key: PIN_MENU_SECTION.key,
     parents: [{
@@ -24,4 +25,32 @@ export var getToolbarComponents = function getToolbarComponents(api) {
       });
     }
   }];
+
+  // Add pin button to primary toolbar when contextual formatting is enabled
+  if (contextualFormattingEnabled) {
+    var pinButtonComponents = [{
+      type: PIN_GROUP.type,
+      key: PIN_GROUP.key,
+      parents: [{
+        type: PIN_SECTION.type,
+        key: PIN_SECTION.key,
+        rank: PIN_SECTION_RANK[PIN_GROUP.key]
+      }]
+    }, {
+      type: PIN_BUTTON.type,
+      key: PIN_BUTTON.key,
+      parents: [{
+        type: PIN_GROUP.type,
+        key: PIN_GROUP.key,
+        rank: PIN_GROUP_RANK[PIN_BUTTON.key]
+      }],
+      component: function component() {
+        return /*#__PURE__*/React.createElement(PinButton, {
+          api: api
+        });
+      }
+    }];
+    components.push.apply(components, pinButtonComponents);
+  }
+  return components;
 };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+export declare const PinButton: ({ api }: {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+}) => React.JSX.Element;

package/dist/types/ui/toolbar-components.d.ts

@@ -1,4 +1,4 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
-export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SelectionToolbarPlugin>) => RegisterComponent[];
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SelectionToolbarPlugin>, contextualFormattingEnabled?: boolean) => RegisterComponent[];

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
+export declare const PinButton: ({ api }: {
+    api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
+}) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
-export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SelectionToolbarPlugin>) => RegisterComponent[];
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<SelectionToolbarPlugin>, contextualFormattingEnabled?: boolean) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-toolbar",
-	"version": "4.3.8",
+	"version": "4.3.9",
 	"description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/editor-plugin-connectivity": "^3.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
-		"@atlaskit/editor-plugin-toolbar": "^0.3.0",
+		"@atlaskit/editor-plugin-toolbar": "^0.4.0",
 		"@atlaskit/editor-plugin-user-intent": "^1.1.0",
 		"@atlaskit/editor-plugin-user-preferences": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -48,13 +48,13 @@
 		"@atlaskit/icon-lab": "^5.6.0",
 		"@atlaskit/menu": "^8.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^11.3.0",
+		"@atlaskit/tmp-editor-statsig": "^11.5.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.27.0",
+		"@atlaskit/editor-common": "^107.28.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"