@atlaskit/editor-plugin-floating-toolbar 3.3.3 → 3.3.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 3.3.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.3.3
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -10,6 +10,7 @@ exports.floatingToolbarPlugin = void 0;
 exports.floatingToolbarPluginFactory = floatingToolbarPluginFactory;
 exports.pluginKey = exports.getRelevantConfig = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -20,6 +21,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
 var _forceFocus = _interopRequireWildcard(require("./pm-plugins/force-focus"));
@@ -30,6 +32,7 @@ var _utils2 = require("./pm-plugins/utils");
 var _ConfirmationModal = require("./ui/ConfirmationModal");
 var _ExpandButton = require("./ui/ExpandButton");
 var _ToolbarLoader = require("./ui/ToolbarLoader");
+var _utils3 = require("./ui/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -275,6 +278,32 @@ function ContentComponent(_ref5) {
       return toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp];
     });
   }
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
+    var _items2;
+    // Consolidate floating toolbar items
+    var toolbarItemsArray = Array.isArray(items) ? items : (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2(node);
+    var overflowDropdownItems = toolbarItemsArray.filter(function (item) {
+      return item.type === 'overflow-dropdown';
+    });
+    if (overflowDropdownItems.length > 1) {
+      var consolidatedOverflowDropdown = (0, _utils3.consolidateOverflowDropdownItems)(overflowDropdownItems);
+      var otherItems = toolbarItemsArray.filter(function (item) {
+        return item.type !== 'overflow-dropdown';
+      });
+      if (otherItems.length > 0) {
+        // remove the last separators
+        while (((_otherItems$at = otherItems.at(-1)) === null || _otherItems$at === void 0 ? void 0 : _otherItems$at.type) === 'separator') {
+          var _otherItems$at;
+          otherItems.pop();
+        }
+      }
+      items = [].concat((0, _toConsumableArray2.default)(otherItems), [{
+        type: 'separator',
+        fullHeight: true,
+        supportsViewMode: true
+      }, consolidatedOverflowDropdown]);
+    }
+  }
   var customPositionCalculation;
   var toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.copyButton) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.hoverDecoration);
   var viewModeToolbarEntry = (0, _experiments.unstable_editorExperimentParam)('live_pages_graceful_edit', 'toolbar-entry', {

package/dist/cjs/ui/Toolbar.js

@@ -206,11 +206,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           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
+          onClick: item.onClick
         });
       case 'dropdown':
         var DropdownIcon = item.icon;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.consolidateOverflowDropdownItems = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+// if there are more than 1 item with type `overflow-dropdown`, we should only show one and combine the options
+var consolidateOverflowDropdownItems = exports.consolidateOverflowDropdownItems = function consolidateOverflowDropdownItems(overflowDropdowns) {
+  if (overflowDropdowns.length <= 1) {
+    return overflowDropdowns[0];
+  }
+  var combinedItems = overflowDropdowns.reduce(function (acc, item) {
+    if (item.options) {
+      acc.push.apply(acc, (0, _toConsumableArray2.default)(item.options));
+    }
+    return acc;
+  }, []);
+
+  // To filter out items that have a rank property, sort them by rank in descending order (highest rank first)
+  var rankedItems = combinedItems.filter(function (item) {
+    return 'rank' in item && typeof item.rank === 'number';
+  }).sort(function (a, b) {
+    return (b.rank || 0) - (a.rank || 0);
+  });
+  var unrankedItems = combinedItems.filter(function (item) {
+    return !('rank' in item && typeof item.rank === 'number');
+  });
+  var sortedItems = [].concat((0, _toConsumableArray2.default)(rankedItems), (0, _toConsumableArray2.default)(unrankedItems));
+  var largestDropdownWidth = overflowDropdowns.reduce(function (acc, item) {
+    if (item.dropdownWidth && item.dropdownWidth > acc) {
+      return item.dropdownWidth;
+    }
+    return acc;
+  }, 0);
+  return {
+    type: 'overflow-dropdown',
+    dropdownWidth: largestDropdownWidth,
+    options: sortedItems
+  };
+};

package/dist/es2019/floatingToolbarPlugin.js

@@ -8,6 +8,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
 import { copyNode } from './pm-plugins/commands';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
@@ -18,6 +19,7 @@ import { findNode } from './pm-plugins/utils';
 import { ConfirmationModal } from './ui/ConfirmationModal';
 import { ExpandButton } from './ui/ExpandButton';
 import { ToolbarLoader } from './ui/ToolbarLoader';
+import { consolidateOverflowDropdownItems } from './ui/utils';
 
 // TODO: AFP-2532 - Fix automatic suppressions below
 export const getRelevantConfig = (selection, configs) => {
@@ -259,6 +261,28 @@ export function ContentComponent({
     const toolbarItemViewModeProp = 'supportsViewMode';
     items = iterableItems.filter(item => toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp]);
   }
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1')) {
+    var _items2;
+    // Consolidate floating toolbar items
+    const toolbarItemsArray = Array.isArray(items) ? items : (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2(node);
+    const overflowDropdownItems = toolbarItemsArray.filter(item => item.type === 'overflow-dropdown');
+    if (overflowDropdownItems.length > 1) {
+      const consolidatedOverflowDropdown = consolidateOverflowDropdownItems(overflowDropdownItems);
+      const otherItems = toolbarItemsArray.filter(item => item.type !== 'overflow-dropdown');
+      if (otherItems.length > 0) {
+        // remove the last separators
+        while (((_otherItems$at = otherItems.at(-1)) === null || _otherItems$at === void 0 ? void 0 : _otherItems$at.type) === 'separator') {
+          var _otherItems$at;
+          otherItems.pop();
+        }
+      }
+      items = [...otherItems, {
+        type: 'separator',
+        fullHeight: true,
+        supportsViewMode: true
+      }, consolidatedOverflowDropdown];
+    }
+  }
   let customPositionCalculation;
   const toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.copyButton) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.hoverDecoration);
   const viewModeToolbarEntry = unstable_editorExperimentParam('live_pages_graceful_edit', 'toolbar-entry', {

package/dist/es2019/ui/Toolbar.js

@@ -183,11 +183,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           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
+          onClick: item.onClick
         });
       case 'dropdown':
         const DropdownIcon = item.icon;

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

@@ -0,0 +1,28 @@
+// if there are more than 1 item with type `overflow-dropdown`, we should only show one and combine the options
+export const consolidateOverflowDropdownItems = overflowDropdowns => {
+  if (overflowDropdowns.length <= 1) {
+    return overflowDropdowns[0];
+  }
+  const combinedItems = overflowDropdowns.reduce((acc, item) => {
+    if (item.options) {
+      acc.push(...item.options);
+    }
+    return acc;
+  }, []);
+
+  // To filter out items that have a rank property, sort them by rank in descending order (highest rank first)
+  const rankedItems = combinedItems.filter(item => 'rank' in item && typeof item.rank === 'number').sort((a, b) => (b.rank || 0) - (a.rank || 0));
+  const unrankedItems = combinedItems.filter(item => !('rank' in item && typeof item.rank === 'number'));
+  const sortedItems = [...rankedItems, ...unrankedItems];
+  const largestDropdownWidth = overflowDropdowns.reduce((acc, item) => {
+    if (item.dropdownWidth && item.dropdownWidth > acc) {
+      return item.dropdownWidth;
+    }
+    return acc;
+  }, 0);
+  return {
+    type: 'overflow-dropdown',
+    dropdownWidth: largestDropdownWidth,
+    options: sortedItems
+  };
+};

package/dist/esm/floatingToolbarPlugin.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -11,6 +12,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
 import { copyNode as _copyNode } from './pm-plugins/commands';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
@@ -21,6 +23,7 @@ import { findNode } from './pm-plugins/utils';
 import { ConfirmationModal } from './ui/ConfirmationModal';
 import { ExpandButton } from './ui/ExpandButton';
 import { ToolbarLoader } from './ui/ToolbarLoader';
+import { consolidateOverflowDropdownItems } from './ui/utils';
 
 // TODO: AFP-2532 - Fix automatic suppressions below
 export var getRelevantConfig = function getRelevantConfig(selection, configs) {
@@ -263,6 +266,32 @@ export function ContentComponent(_ref5) {
       return toolbarItemViewModeProp in item && !!item[toolbarItemViewModeProp];
     });
   }
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1')) {
+    var _items2;
+    // Consolidate floating toolbar items
+    var toolbarItemsArray = Array.isArray(items) ? items : (_items2 = items) === null || _items2 === void 0 ? void 0 : _items2(node);
+    var overflowDropdownItems = toolbarItemsArray.filter(function (item) {
+      return item.type === 'overflow-dropdown';
+    });
+    if (overflowDropdownItems.length > 1) {
+      var consolidatedOverflowDropdown = consolidateOverflowDropdownItems(overflowDropdownItems);
+      var otherItems = toolbarItemsArray.filter(function (item) {
+        return item.type !== 'overflow-dropdown';
+      });
+      if (otherItems.length > 0) {
+        // remove the last separators
+        while (((_otherItems$at = otherItems.at(-1)) === null || _otherItems$at === void 0 ? void 0 : _otherItems$at.type) === 'separator') {
+          var _otherItems$at;
+          otherItems.pop();
+        }
+      }
+      items = [].concat(_toConsumableArray(otherItems), [{
+        type: 'separator',
+        fullHeight: true,
+        supportsViewMode: true
+      }, consolidatedOverflowDropdown]);
+    }
+  }
   var customPositionCalculation;
   var toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.copyButton) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.hoverDecoration);
   var viewModeToolbarEntry = unstable_editorExperimentParam('live_pages_graceful_edit', 'toolbar-entry', {

package/dist/esm/ui/Toolbar.js

@@ -199,11 +199,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           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
+          onClick: item.onClick
         });
       case 'dropdown':
         var DropdownIcon = item.icon;

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

@@ -0,0 +1,35 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+// if there are more than 1 item with type `overflow-dropdown`, we should only show one and combine the options
+export var consolidateOverflowDropdownItems = function consolidateOverflowDropdownItems(overflowDropdowns) {
+  if (overflowDropdowns.length <= 1) {
+    return overflowDropdowns[0];
+  }
+  var combinedItems = overflowDropdowns.reduce(function (acc, item) {
+    if (item.options) {
+      acc.push.apply(acc, _toConsumableArray(item.options));
+    }
+    return acc;
+  }, []);
+
+  // To filter out items that have a rank property, sort them by rank in descending order (highest rank first)
+  var rankedItems = combinedItems.filter(function (item) {
+    return 'rank' in item && typeof item.rank === 'number';
+  }).sort(function (a, b) {
+    return (b.rank || 0) - (a.rank || 0);
+  });
+  var unrankedItems = combinedItems.filter(function (item) {
+    return !('rank' in item && typeof item.rank === 'number');
+  });
+  var sortedItems = [].concat(_toConsumableArray(rankedItems), _toConsumableArray(unrankedItems));
+  var largestDropdownWidth = overflowDropdowns.reduce(function (acc, item) {
+    if (item.dropdownWidth && item.dropdownWidth > acc) {
+      return item.dropdownWidth;
+    }
+    return acc;
+  }, 0);
+  return {
+    type: 'overflow-dropdown',
+    dropdownWidth: largestDropdownWidth,
+    options: sortedItems
+  };
+};

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

@@ -0,0 +1,2 @@
+import { Command, FloatingToolbarOverflowDropdown } from '@atlaskit/editor-common/types';
+export declare const consolidateOverflowDropdownItems: (overflowDropdowns: FloatingToolbarOverflowDropdown<Command>[]) => FloatingToolbarOverflowDropdown<Command>;

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

@@ -0,0 +1,2 @@
+import { Command, FloatingToolbarOverflowDropdown } from '@atlaskit/editor-common/types';
+export declare const consolidateOverflowDropdownItems: (overflowDropdowns: FloatingToolbarOverflowDropdown<Command>[]) => FloatingToolbarOverflowDropdown<Command>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "3.3.3",
+	"version": "3.3.4",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -26,29 +26,29 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-utils": "^19.19.0",
-		"@atlaskit/button": "^22.0.0",
+		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/checkbox": "^17.0.0",
-		"@atlaskit/editor-common": "^102.13.0",
+		"@atlaskit/editor-common": "^102.16.0",
 		"@atlaskit/editor-palette": "^2.1.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.5.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.8.0",
 		"@atlaskit/editor-plugin-context-panel": "^4.0.0",
 		"@atlaskit/editor-plugin-copy-button": "^2.0.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-emoji": "^3.2.0",
-		"@atlaskit/editor-plugin-extension": "^5.0.0",
+		"@atlaskit/editor-plugin-emoji": "^3.3.0",
+		"@atlaskit/editor-plugin-extension": "^5.1.0",
 		"@atlaskit/editor-plugin-table": "^10.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/emoji": "^69.0.0",
-		"@atlaskit/icon": "^25.2.0",
-		"@atlaskit/menu": "^3.1.0",
-		"@atlaskit/modal-dialog": "^14.0.0",
+		"@atlaskit/icon": "^25.4.0",
+		"@atlaskit/menu": "^3.2.0",
+		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.4.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -127,6 +127,9 @@
 		},
 		"platform_editor_fix_floating_toolbar_scrollbar": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_1": {
+			"type": "boolean"
 		}
 	}
 }