@atlaskit/editor-plugin-floating-toolbar 1.16.3 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 1.18.0
+
+### Minor Changes
+
+- [#113466](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113466)
+  [`756bb7e35a24d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/756bb7e35a24d) -
+  Add new FloatingToolbarOverflowDropdown item to floating toolbar config to support new editor
+  controls, add config in selection-toolbar plugin to add new button to text selection
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.17.0
+
+### Minor Changes
+
+- [#105322](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105322)
+  [`8876083532adc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8876083532adc) -
+  Bumped editor-prosemirror version to 7.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.16.3
 
 ### Patch Changes

package/dist/cjs/ui/DropdownMenu.js

@@ -10,6 +10,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 var _menu = require("@atlaskit/menu");
 var _colors = require("@atlaskit/theme/colors");
@@ -36,6 +37,10 @@ var spacerStyles = (0, _react2.css)({
   flex: 1,
   padding: "var(--ds-space-100, 8px)"
 });
+var separatorStyles = (0, _react2.css)({
+  background: "var(--ds-border, #091E4224)",
+  height: '1px'
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var menuContainerStyles = (0, _react2.css)({
@@ -234,6 +239,51 @@ var Dropdown = /*#__PURE__*/(0, _react.memo)(function (props) {
     editorView = props.editorView,
     _props$showSelected = props.showSelected,
     showSelected = _props$showSelected === void 0 ? true : _props$showSelected;
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    return (0, _react2.jsx)("div", {
+      css: menuContainerStyles,
+      role: "menu"
+    }, items.filter(function (item) {
+      return !('hidden' in item) || !item.hidden;
+    }).map(function (item, idx) {
+      if (!('type' in item)) {
+        return (0, _react2.jsx)(DropdownMenuItem
+        // Ignored via go/ees005
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          key: idx,
+          item: item,
+          hide: hide,
+          dispatchCommand: dispatchCommand,
+          editorView: editorView,
+          showSelected: showSelected,
+          intl: intl
+        });
+      }
+      if (item.type === 'separator') {
+        // eslint-disable-next-line react/no-array-index-key
+        return (0, _react2.jsx)("div", {
+          key: idx,
+          css: separatorStyles
+        });
+      }
+      if (item.type === 'overflow-dropdown-heading') {
+        return (
+          // eslint-disable-next-line react/no-array-index-key, @atlaskit/ui-styling-standard/enforce-style-prop
+          (0, _react2.jsx)("div", {
+            key: idx,
+            style: {
+              padding: '10px'
+            }
+          }, (0, _react2.jsx)(_heading.default, {
+            size: "xxsmall"
+          }, item.title))
+        );
+      }
+    }));
+  }
+
+  // here to change based on dropdown type
   return (0, _react2.jsx)("div", {
     css: menuContainerStyles,
     role: "menu"

package/dist/cjs/ui/Toolbar.js

@@ -24,6 +24,7 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _commands = require("@atlaskit/editor-plugin-table/commands");
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _forceFocus = require("../pm-plugins/force-focus");
 var _commands2 = require("../pm-plugins/toolbar-data/commands");
@@ -194,6 +195,37 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         {
           return item.render(editorView, idx, dispatchAnalyticsEvent);
         }
+      case 'overflow-dropdown':
+        return (0, _react2.jsx)(_Dropdown.default, {
+          key: idx
+          // TODO: Find more appropriate copy
+          ,
+          title: 'Show more items',
+          icon: (0, _react2.jsx)(_showMoreHorizontal.default, {
+            label: 'Show more items',
+            spacing: "spacious"
+          }),
+          dispatchCommand: dispatchCommand,
+          options: item.options,
+          disabled: item.disabled,
+          tooltip: item.tooltip,
+          hideExpandIcon: true,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          dropdownWidth: item.dropdownWidth,
+          showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
+          alignDropdownWithToolbar: items.length === 1,
+          onToggle: item.onToggle,
+          footer: item.footer,
+          onMount: item.onMount,
+          onClick: item.onClick,
+          pulse: item.pulse
+        });
       case 'dropdown':
         var DropdownIcon = item.icon;
         var BeforeIcon = item.iconBefore;

package/dist/es2019/ui/DropdownMenu.js

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 
 import { injectIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/floating-toolbar';
+import Heading from '@atlaskit/heading';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { ButtonItem } from '@atlaskit/menu';
 import { B400 } from '@atlaskit/theme/colors';
@@ -26,6 +27,10 @@ const spacerStyles = css({
   flex: 1,
   padding: "var(--ds-space-100, 8px)"
 });
+const separatorStyles = css({
+  background: "var(--ds-border, #091E4224)",
+  height: '1px'
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const menuContainerStyles = css({
@@ -227,6 +232,49 @@ const Dropdown = /*#__PURE__*/memo(props => {
     editorView,
     showSelected = true
   } = props;
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    return jsx("div", {
+      css: menuContainerStyles,
+      role: "menu"
+    }, items.filter(item => !('hidden' in item) || !item.hidden).map((item, idx) => {
+      if (!('type' in item)) {
+        return jsx(DropdownMenuItem
+        // Ignored via go/ees005
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          key: idx,
+          item: item,
+          hide: hide,
+          dispatchCommand: dispatchCommand,
+          editorView: editorView,
+          showSelected: showSelected,
+          intl: intl
+        });
+      }
+      if (item.type === 'separator') {
+        // eslint-disable-next-line react/no-array-index-key
+        return jsx("div", {
+          key: idx,
+          css: separatorStyles
+        });
+      }
+      if (item.type === 'overflow-dropdown-heading') {
+        return (
+          // eslint-disable-next-line react/no-array-index-key, @atlaskit/ui-styling-standard/enforce-style-prop
+          jsx("div", {
+            key: idx,
+            style: {
+              padding: '10px'
+            }
+          }, jsx(Heading, {
+            size: "xxsmall"
+          }, item.title))
+        );
+      }
+    }));
+  }
+
+  // here to change based on dropdown type
   return jsx("div", {
     css: menuContainerStyles,
     role: "menu"

package/dist/es2019/ui/Toolbar.js

@@ -17,6 +17,7 @@ import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-col
 import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
@@ -167,6 +168,37 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         {
           return item.render(editorView, idx, dispatchAnalyticsEvent);
         }
+      case 'overflow-dropdown':
+        return jsx(Dropdown, {
+          key: idx
+          // TODO: Find more appropriate copy
+          ,
+          title: 'Show more items',
+          icon: jsx(ShowMoreHorizontalIcon, {
+            label: 'Show more items',
+            spacing: "spacious"
+          }),
+          dispatchCommand: dispatchCommand,
+          options: item.options,
+          disabled: item.disabled,
+          tooltip: item.tooltip,
+          hideExpandIcon: true,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          dropdownWidth: item.dropdownWidth,
+          showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && `${item.id}-dropdownList`,
+          alignDropdownWithToolbar: items.length === 1,
+          onToggle: item.onToggle,
+          footer: item.footer,
+          onMount: item.onMount,
+          onClick: item.onClick,
+          pulse: item.pulse
+        });
       case 'dropdown':
         const DropdownIcon = item.icon;
         const BeforeIcon = item.iconBefore;

package/dist/esm/ui/DropdownMenu.js

@@ -11,6 +11,7 @@ import { css, jsx } from '@emotion/react';
 
 import { injectIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/floating-toolbar';
+import Heading from '@atlaskit/heading';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { ButtonItem } from '@atlaskit/menu';
 import { B400 } from '@atlaskit/theme/colors';
@@ -27,6 +28,10 @@ var spacerStyles = css({
   flex: 1,
   padding: "var(--ds-space-100, 8px)"
 });
+var separatorStyles = css({
+  background: "var(--ds-border, #091E4224)",
+  height: '1px'
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var menuContainerStyles = css({
@@ -225,6 +230,51 @@ var Dropdown = /*#__PURE__*/memo(function (props) {
     editorView = props.editorView,
     _props$showSelected = props.showSelected,
     showSelected = _props$showSelected === void 0 ? true : _props$showSelected;
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    return jsx("div", {
+      css: menuContainerStyles,
+      role: "menu"
+    }, items.filter(function (item) {
+      return !('hidden' in item) || !item.hidden;
+    }).map(function (item, idx) {
+      if (!('type' in item)) {
+        return jsx(DropdownMenuItem
+        // Ignored via go/ees005
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          key: idx,
+          item: item,
+          hide: hide,
+          dispatchCommand: dispatchCommand,
+          editorView: editorView,
+          showSelected: showSelected,
+          intl: intl
+        });
+      }
+      if (item.type === 'separator') {
+        // eslint-disable-next-line react/no-array-index-key
+        return jsx("div", {
+          key: idx,
+          css: separatorStyles
+        });
+      }
+      if (item.type === 'overflow-dropdown-heading') {
+        return (
+          // eslint-disable-next-line react/no-array-index-key, @atlaskit/ui-styling-standard/enforce-style-prop
+          jsx("div", {
+            key: idx,
+            style: {
+              padding: '10px'
+            }
+          }, jsx(Heading, {
+            size: "xxsmall"
+          }, item.title))
+        );
+      }
+    }));
+  }
+
+  // here to change based on dropdown type
   return jsx("div", {
     css: menuContainerStyles,
     role: "menu"

package/dist/esm/ui/Toolbar.js

@@ -24,6 +24,7 @@ import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-col
 import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
@@ -187,6 +188,37 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         {
           return item.render(editorView, idx, dispatchAnalyticsEvent);
         }
+      case 'overflow-dropdown':
+        return jsx(Dropdown, {
+          key: idx
+          // TODO: Find more appropriate copy
+          ,
+          title: 'Show more items',
+          icon: jsx(ShowMoreHorizontalIcon, {
+            label: 'Show more items',
+            spacing: "spacious"
+          }),
+          dispatchCommand: dispatchCommand,
+          options: item.options,
+          disabled: item.disabled,
+          tooltip: item.tooltip,
+          hideExpandIcon: true,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          dropdownWidth: item.dropdownWidth,
+          showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
+          alignDropdownWithToolbar: items.length === 1,
+          onToggle: item.onToggle,
+          footer: item.footer,
+          onMount: item.onMount,
+          onClick: item.onClick,
+          pulse: item.pulse
+        });
       case 'dropdown':
         var DropdownIcon = item.icon;
         var BeforeIcon = item.iconBefore;

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

@@ -6,7 +6,7 @@
 import type { ReactElement } from 'react';
 import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
-import type { CommandDispatch, DropdownOptions, FloatingToolbarButtonSpotlightConfig } from '@atlaskit/editor-common/types';
+import type { CommandDispatch, DropdownOptions, FloatingToolbarOverflowDropdownOptions, FloatingToolbarButtonSpotlightConfig } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
@@ -14,7 +14,7 @@ export interface Props {
     icon?: ReactElement<any>;
     iconBefore?: ReactElement<any>;
     hideExpandIcon?: boolean;
-    options: DropdownOptions<Function>;
+    options: DropdownOptions<Function> | FloatingToolbarOverflowDropdownOptions<Function>;
     dispatchCommand: (command: Function) => void;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
-import type { DropdownOptionT } from '@atlaskit/editor-common/types';
+import type { DropdownOptionT, FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ButtonItemProps } from '@atlaskit/menu';
 export declare const menuItemDimensions: {
@@ -11,7 +11,7 @@ export declare const itemSpacing: number;
 export interface Props {
     hide: Function;
     dispatchCommand: Function;
-    items: Array<DropdownOptionT<Function>>;
+    items: Array<DropdownOptionT<Function>> | FloatingToolbarOverflowDropdownOptions<Function>;
     showSelected?: boolean;
     editorView?: EditorView;
 }

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

@@ -6,7 +6,7 @@
 import type { ReactElement } from 'react';
 import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
-import type { CommandDispatch, DropdownOptions, FloatingToolbarButtonSpotlightConfig } from '@atlaskit/editor-common/types';
+import type { CommandDispatch, DropdownOptions, FloatingToolbarOverflowDropdownOptions, FloatingToolbarButtonSpotlightConfig } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
@@ -14,7 +14,7 @@ export interface Props {
     icon?: ReactElement<any>;
     iconBefore?: ReactElement<any>;
     hideExpandIcon?: boolean;
-    options: DropdownOptions<Function>;
+    options: DropdownOptions<Function> | FloatingToolbarOverflowDropdownOptions<Function>;
     dispatchCommand: (command: Function) => void;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
-import type { DropdownOptionT } from '@atlaskit/editor-common/types';
+import type { DropdownOptionT, FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ButtonItemProps } from '@atlaskit/menu';
 export declare const menuItemDimensions: {
@@ -11,7 +11,7 @@ export declare const itemSpacing: number;
 export interface Props {
     hide: Function;
     dispatchCommand: Function;
-    items: Array<DropdownOptionT<Function>>;
+    items: Array<DropdownOptionT<Function>> | FloatingToolbarOverflowDropdownOptions<Function>;
     showSelected?: boolean;
     editorView?: EditorView;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "1.16.3",
+	"version": "1.18.0",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -26,27 +26,27 @@
 		"@atlaskit/adf-utils": "^19.18.0",
 		"@atlaskit/button": "^20.5.0",
 		"@atlaskit/checkbox": "^15.3.0",
-		"@atlaskit/editor-common": "^99.9.0",
+		"@atlaskit/editor-common": "^99.15.0",
 		"@atlaskit/editor-palette": "1.7.0",
-		"@atlaskit/editor-plugin-block-controls": "^2.22.0",
-		"@atlaskit/editor-plugin-context-panel": "^2.0.0",
-		"@atlaskit/editor-plugin-copy-button": "^1.4.0",
-		"@atlaskit/editor-plugin-decorations": "^1.4.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^1.4.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
-		"@atlaskit/editor-plugin-emoji": "^2.8.0",
-		"@atlaskit/editor-plugin-extension": "^3.1.0",
-		"@atlaskit/editor-plugin-table": "^9.3.0",
-		"@atlaskit/editor-prosemirror": "6.2.1",
-		"@atlaskit/emoji": "^67.13.0",
-		"@atlaskit/icon": "^23.7.0",
+		"@atlaskit/editor-plugin-block-controls": "^2.26.0",
+		"@atlaskit/editor-plugin-context-panel": "^2.1.0",
+		"@atlaskit/editor-plugin-copy-button": "^1.5.0",
+		"@atlaskit/editor-plugin-decorations": "^1.5.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^1.5.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^2.2.0",
+		"@atlaskit/editor-plugin-emoji": "^2.9.0",
+		"@atlaskit/editor-plugin-extension": "^3.5.0",
+		"@atlaskit/editor-plugin-table": "^9.5.0",
+		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/emoji": "^67.14.0",
+		"@atlaskit/icon": "^23.9.0",
 		"@atlaskit/menu": "^2.14.0",
 		"@atlaskit/modal-dialog": "^12.20.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",
-		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/select": "^18.10.0",
 		"@atlaskit/theme": "^15.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.43.0",
+		"@atlaskit/tmp-editor-statsig": "^2.46.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@atlaskit/tooltip": "^19.1.0",
 		"@babel/runtime": "^7.0.0",