@atlaskit/editor-plugin-toolbar 0.0.5 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 0.1.0
+
+### Minor Changes
+
+- [#196043](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/196043)
+  [`c6cb0ed855827`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c6cb0ed855827) -
+  Add new ShowMoreHorizontal Icon, add new ranks to support overflow menu, add pin as a menu item
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.0.6
+
+### Patch Changes
+
+- [#197019](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197019)
+  [`96717455eea97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96717455eea97) -
+  Add background colour to Toolbar component in editor-toolbar, add EditorToolbarProvider to the
+  selection Toolbar
+- Updated dependencies
+
 ## 0.0.5
 
 ### Patch Changes

package/dist/cjs/ui/OverflowMenu.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverflowMenu = 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 OverflowMenu = exports.OverflowMenu = function OverflowMenu(_ref) {
+  var children = _ref.children;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var tooltipContent = intl.formatMessage(_messages.toolbarMessages.selectionToolbarOverflowMenuTooltip);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: tooltipContent,
+    position: "top"
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+    label: tooltipContent,
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ShowMoreHorizontalIcon, {
+      label: ""
+    })
+  }, children));
+};

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectionToolbar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -42,6 +43,8 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     onPositionCalculated: function onPositionCalculated(position) {
       return (0, _utils.calculateToolbarPositionTrackHead)(_consts.TOOLBAR_LABEL)(editorView, position);
     }
+  }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
+    editorView: editorView
   }, /*#__PURE__*/_react.default.createElement(_editorToolbarModel.ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,
@@ -50,7 +53,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
       menuSection: _editorToolbar.ToolbarDropdownItemSection,
       group: _editorToolbar.ToolbarButtonGroup
     }
-  }));
+  })));
 };
 var getDomRefFromSelection = function getDomRefFromSelection(view
 // dispatchAnalyticsEvent?: DispatchAnalyticsEvent,

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

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getToolbarComponents = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _consts = require("./consts");
+var _OverflowMenu = require("./OverflowMenu");
 var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents() {
   return [{
     type: 'toolbar',
-    key: 'inline-text-toolbar',
+    key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
     component: function component(_ref) {
       var children = _ref.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.Toolbar, {
@@ -26,5 +28,33 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: 'inline-text-toolbar',
       rank: 200
     }]
+  }, {
+    type: _toolbar.OVERFLOW_SECTION.type,
+    key: _toolbar.OVERFLOW_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.OVERFLOW_SECTION.key]
+    }]
+  }, {
+    type: _toolbar.OVERFLOW_GROUP.type,
+    key: _toolbar.OVERFLOW_GROUP.key,
+    parents: [{
+      type: _toolbar.OVERFLOW_SECTION.type,
+      key: _toolbar.OVERFLOW_SECTION.key,
+      rank: _toolbar.OVERFLOW_SECTION_RANK[_toolbar.OVERFLOW_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.OVERFLOW_MENU.type,
+    key: _toolbar.OVERFLOW_MENU.key,
+    parents: [{
+      type: _toolbar.OVERFLOW_GROUP.type,
+      key: _toolbar.OVERFLOW_GROUP.key,
+      rank: _toolbar.OVERFLOW_GROUP_RANK[_toolbar.OVERFLOW_MENU.key]
+    }],
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
+    }
   }];
 };

package/dist/es2019/ui/OverflowMenu.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { ShowMoreHorizontalIcon, ToolbarDropdownMenu, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+export const OverflowMenu = ({
+  children
+}) => {
+  const intl = useIntl();
+  const tooltipContent = intl.formatMessage(toolbarMessages.selectionToolbarOverflowMenuTooltip);
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: tooltipContent,
+    position: "top"
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    label: tooltipContent,
+    iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
+      label: ""
+    })
+  }, children));
+};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
@@ -32,6 +33,8 @@ export const SelectionToolbar = ({
     offset: [0, 10],
     target: getDomRefFromSelection(editorView),
     onPositionCalculated: position => calculateToolbarPositionTrackHead(TOOLBAR_LABEL)(editorView, position)
+  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+    editorView: editorView
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,
@@ -40,7 +43,7 @@ export const SelectionToolbar = ({
       menuSection: ToolbarDropdownItemSection,
       group: ToolbarButtonGroup
     }
-  }));
+  })));
 };
 const getDomRefFromSelection = (view
 // dispatchAnalyticsEvent?: DispatchAnalyticsEvent,

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

@@ -1,10 +1,12 @@
 import React from 'react';
+import { OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
 import { Toolbar } from '@atlaskit/editor-toolbar';
 import { TOOLBAR_LABEL } from './consts';
+import { OverflowMenu } from './OverflowMenu';
 export const getToolbarComponents = () => {
   return [{
     type: 'toolbar',
-    key: 'inline-text-toolbar',
+    key: TOOLBARS.INLINE_TEXT_TOOLBAR,
     component: ({
       children
     }) => {
@@ -20,5 +22,34 @@ export const getToolbarComponents = () => {
       key: 'inline-text-toolbar',
       rank: 200
     }]
+  }, {
+    type: OVERFLOW_SECTION.type,
+    key: OVERFLOW_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[OVERFLOW_SECTION.key]
+    }]
+  }, {
+    type: OVERFLOW_GROUP.type,
+    key: OVERFLOW_GROUP.key,
+    parents: [{
+      type: OVERFLOW_SECTION.type,
+      key: OVERFLOW_SECTION.key,
+      rank: OVERFLOW_SECTION_RANK[OVERFLOW_GROUP.key]
+    }]
+  }, {
+    type: OVERFLOW_MENU.type,
+    key: OVERFLOW_MENU.key,
+    parents: [{
+      type: OVERFLOW_GROUP.type,
+      key: OVERFLOW_GROUP.key,
+      rank: OVERFLOW_GROUP_RANK[OVERFLOW_MENU.key]
+    }],
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
+    }
   }];
 };

package/dist/esm/ui/OverflowMenu.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { ShowMoreHorizontalIcon, ToolbarDropdownMenu, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+export var OverflowMenu = function OverflowMenu(_ref) {
+  var children = _ref.children;
+  var intl = useIntl();
+  var tooltipContent = intl.formatMessage(toolbarMessages.selectionToolbarOverflowMenuTooltip);
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: tooltipContent,
+    position: "top"
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    label: tooltipContent,
+    iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
+      label: ""
+    })
+  }, children));
+};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
@@ -35,6 +36,8 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
     onPositionCalculated: function onPositionCalculated(position) {
       return calculateToolbarPositionTrackHead(TOOLBAR_LABEL)(editorView, position);
     }
+  }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
+    editorView: editorView
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,
@@ -43,7 +46,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
       menuSection: ToolbarDropdownItemSection,
       group: ToolbarButtonGroup
     }
-  }));
+  })));
 };
 var getDomRefFromSelection = function getDomRefFromSelection(view
 // dispatchAnalyticsEvent?: DispatchAnalyticsEvent,

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

@@ -1,10 +1,12 @@
 import React from 'react';
+import { OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
 import { Toolbar } from '@atlaskit/editor-toolbar';
 import { TOOLBAR_LABEL } from './consts';
+import { OverflowMenu } from './OverflowMenu';
 export var getToolbarComponents = function getToolbarComponents() {
   return [{
     type: 'toolbar',
-    key: 'inline-text-toolbar',
+    key: TOOLBARS.INLINE_TEXT_TOOLBAR,
     component: function component(_ref) {
       var children = _ref.children;
       return /*#__PURE__*/React.createElement(Toolbar, {
@@ -19,5 +21,33 @@ export var getToolbarComponents = function getToolbarComponents() {
       key: 'inline-text-toolbar',
       rank: 200
     }]
+  }, {
+    type: OVERFLOW_SECTION.type,
+    key: OVERFLOW_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[OVERFLOW_SECTION.key]
+    }]
+  }, {
+    type: OVERFLOW_GROUP.type,
+    key: OVERFLOW_GROUP.key,
+    parents: [{
+      type: OVERFLOW_SECTION.type,
+      key: OVERFLOW_SECTION.key,
+      rank: OVERFLOW_SECTION_RANK[OVERFLOW_GROUP.key]
+    }]
+  }, {
+    type: OVERFLOW_MENU.type,
+    key: OVERFLOW_MENU.key,
+    parents: [{
+      type: OVERFLOW_GROUP.type,
+      key: OVERFLOW_GROUP.key,
+      rank: OVERFLOW_GROUP_RANK[OVERFLOW_MENU.key]
+    }],
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
+    }
   }];
 };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const OverflowMenu: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const OverflowMenu: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "0.0.5",
+	"version": "0.1.0",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,12 +34,13 @@
 		"@atlaskit/editor-plugin-selection": "^3.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-toolbar": "^0.0.9",
+		"@atlaskit/editor-toolbar": "^0.1.0",
 		"@atlaskit/editor-toolbar-model": "^0.0.4",
-		"@babel/runtime": "^7.0.0"
+		"@babel/runtime": "^7.0.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.17.0",
+		"@atlaskit/editor-common": "^107.19.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {