@atlaskit/editor-plugin-floating-toolbar 8.2.0 → 8.2.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 8.2.2
+
+### Patch Changes
+
+- [`94b21013815ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/94b21013815ad) -
+  [ux] ensure confirmation is required when removing a table with an associated chart (fixes bug
+  when platform_editor_controls is set to variant1)
+- Updated dependencies
+
+## 8.2.1
+
+### Patch Changes
+
+- [`5292689cffab1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5292689cffab1) -
+  fix/ignore minor eslint issues ahead of bug fix for confirming the removal of tables
+- Updated dependencies
+
 ## 8.2.0
 
 ### Minor Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -209,8 +209,26 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
     }
   };
 };
+
+/**
+ * React component that renders the floating toolbar UI for the editor.
+ *
+ * This component manages the display of floating toolbars based on the current editor state,
+ * selection, and configuration. It handles visibility conditions, positioning, toolbar items
+ * consolidation, and confirmation dialogs.
+ *
+ * @param props - Component properties
+ * @param props.pluginInjectionApi - Plugin injection API for accessing other plugin states
+ * @param props.editorView - ProseMirror EditorView instance
+ * @param props.popupsMountPoint - DOM element where popups should be mounted
+ * @param props.popupsBoundariesElement - Element that defines popup boundaries
+ * @param props.popupsScrollableElement - Scrollable container element for popups
+ * @param props.providerFactory - Factory for creating various providers
+ * @param props.dispatchAnalyticsEvent - Function to dispatch analytics events
+ * @returns JSX element representing the floating toolbar or null if not visible
+ */
 function ContentComponent(_ref5) {
-  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
+  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d, _confirmButtonItem, _confirmButtonItem2, _confirmButtonItem3;
   var pluginInjectionApi = _ref5.pluginInjectionApi,
     editorView = _ref5.editorView,
     popupsMountPoint = _ref5.popupsMountPoint,
@@ -371,14 +389,33 @@ function ContentComponent(_ref5) {
   };
 
   // Confirm dialog
-  var _ref7 = floatingToolbarData || {},
-    confirmDialogForItem = _ref7.confirmDialogForItem;
-  var confirmButtonItem = confirmDialogForItem ?
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  toolbarItems[confirmDialogForItem] : undefined;
+  var confirmButtonItem;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_fix_confirm_table_removal')) {
+    var _ref7 = floatingToolbarData || {},
+      confirmDialogForItem = _ref7.confirmDialogForItem,
+      confirmDialogForItemOption = _ref7.confirmDialogForItemOption;
+    var matchingItem = confirmDialogForItem ? toolbarItems === null || toolbarItems === void 0 ? void 0 : toolbarItems[confirmDialogForItem] : undefined;
+    if ((matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.type) === 'button') {
+      confirmButtonItem = matchingItem;
+    }
+    if ((matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.type) === 'overflow-dropdown' && confirmDialogForItemOption !== undefined) {
+      var matchingItemOption = matchingItem.options[confirmDialogForItemOption];
+
+      // OverflowDropdownOption is the only member of the union that does not have a 'type' property
+      if (!('type' in matchingItemOption)) {
+        confirmButtonItem = matchingItemOption;
+      }
+    }
+  } else {
+    var _ref8 = floatingToolbarData || {},
+      _confirmDialogForItem = _ref8.confirmDialogForItem;
+    confirmButtonItem = _confirmDialogForItem ?
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    toolbarItems[_confirmDialogForItem] : undefined;
+  }
   var scrollable = config.scrollable;
-  var confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
+  var confirmDialogOptions = typeof ((_confirmButtonItem = confirmButtonItem) === null || _confirmButtonItem === void 0 ? void 0 : _confirmButtonItem.confirmDialog) === 'function' ? (_confirmButtonItem2 = confirmButtonItem) === null || _confirmButtonItem2 === void 0 ? void 0 : _confirmButtonItem2.confirmDialog() : (_confirmButtonItem3 = confirmButtonItem) === null || _confirmButtonItem3 === void 0 ? void 0 : _confirmButtonItem3.confirmDialog;
   return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
     component: _analytics.ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
     componentId: (0, _camelCase.default)(title),
@@ -489,6 +526,20 @@ function sanitizeFloatingToolbarConfig(config) {
   }
   return config;
 }
+
+/**
+ * Creates a floating toolbar plugin for the ProseMirror editor.
+ *
+ * This factory function creates a SafePlugin that manages floating toolbars in the editor.
+ * It processes an array of floating toolbar handlers and determines which toolbar configuration
+ * should be active based on the current editor state and selection.
+ *
+ * @param options - Configuration object for the floating toolbar plugin
+ * @param options.floatingToolbarHandlers - Array of handlers that return toolbar configurations
+ * @param options.getIntl - Function that returns the IntlShape instance for internationalization
+ * @param options.providerFactory - Factory for creating various providers used by the editor
+ * @returns A SafePlugin instance that manages floating toolbar state and behavior
+ */
 function floatingToolbarPluginFactory(options) {
   var floatingToolbarHandlers = options.floatingToolbarHandlers,
     providerFactory = options.providerFactory,

package/dist/cjs/pm-plugins/toolbar-data/commands.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.showConfirmDialog = exports.hideConfirmDialog = void 0;
 var _pluginFactory = require("./plugin-factory");
-var showConfirmDialog = exports.showConfirmDialog = function showConfirmDialog(buttonIndex) {
+var showConfirmDialog = exports.showConfirmDialog = function showConfirmDialog(buttonIndex, optionIndex) {
   return (0, _pluginFactory.createCommand)({
     type: 'SHOW_CONFIRM_DIALOG',
     data: {
-      buttonIndex: buttonIndex
+      buttonIndex: buttonIndex,
+      optionIndex: optionIndex
     }
   }, function (tr) {
     return tr.setMeta('addToHistory', false);

package/dist/cjs/pm-plugins/toolbar-data/reducer.js

@@ -12,7 +12,8 @@ var reducer = exports.reducer = function reducer(pluginState, action) {
   switch (action.type) {
     case 'SHOW_CONFIRM_DIALOG':
       return _objectSpread(_objectSpread({}, pluginState), {}, {
-        confirmDialogForItem: action.data.buttonIndex
+        confirmDialogForItem: action.data.buttonIndex,
+        confirmDialogForItemOption: action.data.optionIndex
       });
     case 'HIDE_CONFIRM_DIALOG':
       return _objectSpread(_objectSpread({}, pluginState), {}, {

package/dist/cjs/ui/Toolbar.js

@@ -26,6 +26,7 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _forceFocus = require("../pm-plugins/force-focus");
@@ -39,10 +40,13 @@ var _ScrollButtons = require("./ScrollButtons");
 var _Select = _interopRequireDefault(require("./Select"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */ /**
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+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) { (0, _defineProperty2.default)(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; } /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */ /**
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line jsdoc/require-jsdoc
 function groupItems(items, areAnyNewToolbarFlagsEnabled) {
   var groupItems = items.reduce(function (accumulator, item, i) {
     var finalOutput = accumulator.finalOutput,
@@ -199,6 +203,25 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           return item.render(editorView, idx, dispatchAnalyticsEvent);
         }
       case 'overflow-dropdown':
+        var options;
+        if ((0, _platformFeatureFlags.fg)('platform_editor_fix_confirm_table_removal')) {
+          // if an option has a confirmDialog, we need to replace its onClick handler
+          // to set the state to show the confirm dialog
+
+          // crudely done here to avoid greater coupling with DropdownMenuItem from `floating-toolbar`
+          // which would need knowledge of indexes, showConfirmDialog etc.
+          options = item.options.map(function (option, optionIndex) {
+            if (!('type' in option) && option.confirmDialog) {
+              var onClick = option.confirmDialog ? (0, _commands.showConfirmDialog)(idx, optionIndex) : option.onClick;
+              return _objectSpread(_objectSpread({}, option), {}, {
+                onClick: onClick
+              });
+            }
+            return option;
+          });
+        } else {
+          options = item.options;
+        }
         return (0, _react2.jsx)(_Dropdown.default, {
           alignX: areAnyNewToolbarFlagsEnabled ? 'right' : undefined,
           key: idx,
@@ -208,7 +231,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
             spacing: "spacious"
           }),
           dispatchCommand: dispatchCommand,
-          options: item.options,
+          options: options,
           disabled: item.disabled,
           tooltip: item.tooltip,
           hideExpandIcon: true,

package/dist/es2019/floatingToolbarPlugin.js

@@ -195,6 +195,24 @@ export const floatingToolbarPlugin = ({
     }
   };
 };
+
+/**
+ * React component that renders the floating toolbar UI for the editor.
+ *
+ * This component manages the display of floating toolbars based on the current editor state,
+ * selection, and configuration. It handles visibility conditions, positioning, toolbar items
+ * consolidation, and confirmation dialogs.
+ *
+ * @param props - Component properties
+ * @param props.pluginInjectionApi - Plugin injection API for accessing other plugin states
+ * @param props.editorView - ProseMirror EditorView instance
+ * @param props.popupsMountPoint - DOM element where popups should be mounted
+ * @param props.popupsBoundariesElement - Element that defines popup boundaries
+ * @param props.popupsScrollableElement - Scrollable container element for popups
+ * @param props.providerFactory - Factory for creating various providers
+ * @param props.dispatchAnalyticsEvent - Function to dispatch analytics events
+ * @returns JSX element representing the floating toolbar or null if not visible
+ */
 export function ContentComponent({
   pluginInjectionApi,
   editorView,
@@ -204,7 +222,7 @@ export function ContentComponent({
   providerFactory,
   dispatchAnalyticsEvent
 }) {
-  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
+  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d, _confirmButtonItem, _confirmButtonItem2, _confirmButtonItem3;
   const {
     floatingToolbarState,
     editorDisabledState,
@@ -355,15 +373,35 @@ export function ContentComponent({
   const dispatchCommand = fn => fn && fn(editorView.state, editorView.dispatch, editorView);
 
   // Confirm dialog
-  const {
-    confirmDialogForItem
-  } = floatingToolbarData || {};
-  const confirmButtonItem = confirmDialogForItem ?
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  toolbarItems[confirmDialogForItem] : undefined;
+  let confirmButtonItem;
+  if (fg('platform_editor_fix_confirm_table_removal')) {
+    const {
+      confirmDialogForItem,
+      confirmDialogForItemOption
+    } = floatingToolbarData || {};
+    const matchingItem = confirmDialogForItem ? toolbarItems === null || toolbarItems === void 0 ? void 0 : toolbarItems[confirmDialogForItem] : undefined;
+    if ((matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.type) === 'button') {
+      confirmButtonItem = matchingItem;
+    }
+    if ((matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.type) === 'overflow-dropdown' && confirmDialogForItemOption !== undefined) {
+      const matchingItemOption = matchingItem.options[confirmDialogForItemOption];
+
+      // OverflowDropdownOption is the only member of the union that does not have a 'type' property
+      if (!('type' in matchingItemOption)) {
+        confirmButtonItem = matchingItemOption;
+      }
+    }
+  } else {
+    const {
+      confirmDialogForItem
+    } = floatingToolbarData || {};
+    confirmButtonItem = confirmDialogForItem ?
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    toolbarItems[confirmDialogForItem] : undefined;
+  }
   const scrollable = config.scrollable;
-  const confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
+  const confirmDialogOptions = typeof ((_confirmButtonItem = confirmButtonItem) === null || _confirmButtonItem === void 0 ? void 0 : _confirmButtonItem.confirmDialog) === 'function' ? (_confirmButtonItem2 = confirmButtonItem) === null || _confirmButtonItem2 === void 0 ? void 0 : _confirmButtonItem2.confirmDialog() : (_confirmButtonItem3 = confirmButtonItem) === null || _confirmButtonItem3 === void 0 ? void 0 : _confirmButtonItem3.confirmDialog;
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
     componentId: camelCase(title),
@@ -472,6 +510,20 @@ function sanitizeFloatingToolbarConfig(config) {
   }
   return config;
 }
+
+/**
+ * Creates a floating toolbar plugin for the ProseMirror editor.
+ *
+ * This factory function creates a SafePlugin that manages floating toolbars in the editor.
+ * It processes an array of floating toolbar handlers and determines which toolbar configuration
+ * should be active based on the current editor state and selection.
+ *
+ * @param options - Configuration object for the floating toolbar plugin
+ * @param options.floatingToolbarHandlers - Array of handlers that return toolbar configurations
+ * @param options.getIntl - Function that returns the IntlShape instance for internationalization
+ * @param options.providerFactory - Factory for creating various providers used by the editor
+ * @returns A SafePlugin instance that manages floating toolbar state and behavior
+ */
 export function floatingToolbarPluginFactory(options) {
   const {
     floatingToolbarHandlers,

package/dist/es2019/pm-plugins/toolbar-data/commands.js

@@ -1,8 +1,9 @@
 import { createCommand } from './plugin-factory';
-export const showConfirmDialog = buttonIndex => createCommand({
+export const showConfirmDialog = (buttonIndex, optionIndex) => createCommand({
   type: 'SHOW_CONFIRM_DIALOG',
   data: {
-    buttonIndex
+    buttonIndex,
+    optionIndex
   }
 }, tr => tr.setMeta('addToHistory', false));
 export const hideConfirmDialog = () => createCommand({

package/dist/es2019/pm-plugins/toolbar-data/reducer.js

@@ -3,7 +3,8 @@ export const reducer = (pluginState, action) => {
     case 'SHOW_CONFIRM_DIALOG':
       return {
         ...pluginState,
-        confirmDialogForItem: action.data.buttonIndex
+        confirmDialogForItem: action.data.buttonIndex,
+        confirmDialogForItemOption: action.data.optionIndex
       };
     case 'HIDE_CONFIRM_DIALOG':
       return {

package/dist/es2019/ui/Toolbar.js

@@ -19,6 +19,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 ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
@@ -30,6 +31,7 @@ import { Input } from './Input';
 import { ScrollButton } from './ScrollButton';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
+// eslint-disable-next-line jsdoc/require-jsdoc
 export function groupItems(items, areAnyNewToolbarFlagsEnabled) {
   const groupItems = items.reduce((accumulator, item, i) => {
     const {
@@ -177,6 +179,26 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           return item.render(editorView, idx, dispatchAnalyticsEvent);
         }
       case 'overflow-dropdown':
+        let options;
+        if (fg('platform_editor_fix_confirm_table_removal')) {
+          // if an option has a confirmDialog, we need to replace its onClick handler
+          // to set the state to show the confirm dialog
+
+          // crudely done here to avoid greater coupling with DropdownMenuItem from `floating-toolbar`
+          // which would need knowledge of indexes, showConfirmDialog etc.
+          options = item.options.map((option, optionIndex) => {
+            if (!('type' in option) && option.confirmDialog) {
+              const onClick = option.confirmDialog ? showConfirmDialog(idx, optionIndex) : option.onClick;
+              return {
+                ...option,
+                onClick
+              };
+            }
+            return option;
+          });
+        } else {
+          options = item.options;
+        }
         return jsx(Dropdown, {
           alignX: areAnyNewToolbarFlagsEnabled ? 'right' : undefined,
           key: idx,
@@ -186,7 +208,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
             spacing: "spacious"
           }),
           dispatchCommand: dispatchCommand,
-          options: item.options,
+          options: options,
           disabled: item.disabled,
           tooltip: item.tooltip,
           hideExpandIcon: true,

package/dist/esm/floatingToolbarPlugin.js

@@ -200,8 +200,26 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
     }
   };
 };
+
+/**
+ * React component that renders the floating toolbar UI for the editor.
+ *
+ * This component manages the display of floating toolbars based on the current editor state,
+ * selection, and configuration. It handles visibility conditions, positioning, toolbar items
+ * consolidation, and confirmation dialogs.
+ *
+ * @param props - Component properties
+ * @param props.pluginInjectionApi - Plugin injection API for accessing other plugin states
+ * @param props.editorView - ProseMirror EditorView instance
+ * @param props.popupsMountPoint - DOM element where popups should be mounted
+ * @param props.popupsBoundariesElement - Element that defines popup boundaries
+ * @param props.popupsScrollableElement - Scrollable container element for popups
+ * @param props.providerFactory - Factory for creating various providers
+ * @param props.dispatchAnalyticsEvent - Function to dispatch analytics events
+ * @returns JSX element representing the floating toolbar or null if not visible
+ */
 export function ContentComponent(_ref5) {
-  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
+  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d, _confirmButtonItem, _confirmButtonItem2, _confirmButtonItem3;
   var pluginInjectionApi = _ref5.pluginInjectionApi,
     editorView = _ref5.editorView,
     popupsMountPoint = _ref5.popupsMountPoint,
@@ -362,14 +380,33 @@ export function ContentComponent(_ref5) {
   };
 
   // Confirm dialog
-  var _ref7 = floatingToolbarData || {},
-    confirmDialogForItem = _ref7.confirmDialogForItem;
-  var confirmButtonItem = confirmDialogForItem ?
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  toolbarItems[confirmDialogForItem] : undefined;
+  var confirmButtonItem;
+  if (fg('platform_editor_fix_confirm_table_removal')) {
+    var _ref7 = floatingToolbarData || {},
+      confirmDialogForItem = _ref7.confirmDialogForItem,
+      confirmDialogForItemOption = _ref7.confirmDialogForItemOption;
+    var matchingItem = confirmDialogForItem ? toolbarItems === null || toolbarItems === void 0 ? void 0 : toolbarItems[confirmDialogForItem] : undefined;
+    if ((matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.type) === 'button') {
+      confirmButtonItem = matchingItem;
+    }
+    if ((matchingItem === null || matchingItem === void 0 ? void 0 : matchingItem.type) === 'overflow-dropdown' && confirmDialogForItemOption !== undefined) {
+      var matchingItemOption = matchingItem.options[confirmDialogForItemOption];
+
+      // OverflowDropdownOption is the only member of the union that does not have a 'type' property
+      if (!('type' in matchingItemOption)) {
+        confirmButtonItem = matchingItemOption;
+      }
+    }
+  } else {
+    var _ref8 = floatingToolbarData || {},
+      _confirmDialogForItem = _ref8.confirmDialogForItem;
+    confirmButtonItem = _confirmDialogForItem ?
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    toolbarItems[_confirmDialogForItem] : undefined;
+  }
   var scrollable = config.scrollable;
-  var confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
+  var confirmDialogOptions = typeof ((_confirmButtonItem = confirmButtonItem) === null || _confirmButtonItem === void 0 ? void 0 : _confirmButtonItem.confirmDialog) === 'function' ? (_confirmButtonItem2 = confirmButtonItem) === null || _confirmButtonItem2 === void 0 ? void 0 : _confirmButtonItem2.confirmDialog() : (_confirmButtonItem3 = confirmButtonItem) === null || _confirmButtonItem3 === void 0 ? void 0 : _confirmButtonItem3.confirmDialog;
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
     componentId: camelCase(title),
@@ -480,6 +517,20 @@ function sanitizeFloatingToolbarConfig(config) {
   }
   return config;
 }
+
+/**
+ * Creates a floating toolbar plugin for the ProseMirror editor.
+ *
+ * This factory function creates a SafePlugin that manages floating toolbars in the editor.
+ * It processes an array of floating toolbar handlers and determines which toolbar configuration
+ * should be active based on the current editor state and selection.
+ *
+ * @param options - Configuration object for the floating toolbar plugin
+ * @param options.floatingToolbarHandlers - Array of handlers that return toolbar configurations
+ * @param options.getIntl - Function that returns the IntlShape instance for internationalization
+ * @param options.providerFactory - Factory for creating various providers used by the editor
+ * @returns A SafePlugin instance that manages floating toolbar state and behavior
+ */
 export function floatingToolbarPluginFactory(options) {
   var floatingToolbarHandlers = options.floatingToolbarHandlers,
     providerFactory = options.providerFactory,

package/dist/esm/pm-plugins/toolbar-data/commands.js

@@ -1,9 +1,10 @@
 import { createCommand } from './plugin-factory';
-export var showConfirmDialog = function showConfirmDialog(buttonIndex) {
+export var showConfirmDialog = function showConfirmDialog(buttonIndex, optionIndex) {
   return createCommand({
     type: 'SHOW_CONFIRM_DIALOG',
     data: {
-      buttonIndex: buttonIndex
+      buttonIndex: buttonIndex,
+      optionIndex: optionIndex
     }
   }, function (tr) {
     return tr.setMeta('addToHistory', false);

package/dist/esm/pm-plugins/toolbar-data/reducer.js

@@ -5,7 +5,8 @@ export var reducer = function reducer(pluginState, action) {
   switch (action.type) {
     case 'SHOW_CONFIRM_DIALOG':
       return _objectSpread(_objectSpread({}, pluginState), {}, {
-        confirmDialogForItem: action.data.buttonIndex
+        confirmDialogForItem: action.data.buttonIndex,
+        confirmDialogForItemOption: action.data.optionIndex
       });
     case 'HIDE_CONFIRM_DIALOG':
       return _objectSpread(_objectSpread({}, pluginState), {}, {

package/dist/esm/ui/Toolbar.js

@@ -7,6 +7,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+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; }
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /**
  * @jsxRuntime classic
@@ -26,6 +28,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 ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
@@ -37,6 +40,7 @@ import { Input } from './Input';
 import { ScrollButton } from './ScrollButton';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
+// eslint-disable-next-line jsdoc/require-jsdoc
 export function groupItems(items, areAnyNewToolbarFlagsEnabled) {
   var groupItems = items.reduce(function (accumulator, item, i) {
     var finalOutput = accumulator.finalOutput,
@@ -193,6 +197,25 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           return item.render(editorView, idx, dispatchAnalyticsEvent);
         }
       case 'overflow-dropdown':
+        var options;
+        if (fg('platform_editor_fix_confirm_table_removal')) {
+          // if an option has a confirmDialog, we need to replace its onClick handler
+          // to set the state to show the confirm dialog
+
+          // crudely done here to avoid greater coupling with DropdownMenuItem from `floating-toolbar`
+          // which would need knowledge of indexes, showConfirmDialog etc.
+          options = item.options.map(function (option, optionIndex) {
+            if (!('type' in option) && option.confirmDialog) {
+              var onClick = option.confirmDialog ? showConfirmDialog(idx, optionIndex) : option.onClick;
+              return _objectSpread(_objectSpread({}, option), {}, {
+                onClick: onClick
+              });
+            }
+            return option;
+          });
+        } else {
+          options = item.options;
+        }
         return jsx(Dropdown, {
           alignX: areAnyNewToolbarFlagsEnabled ? 'right' : undefined,
           key: idx,
@@ -202,7 +225,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
             spacing: "spacious"
           }),
           dispatchCommand: dispatchCommand,
-          options: item.options,
+          options: options,
           disabled: item.disabled,
           tooltip: item.tooltip,
           hideExpandIcon: true,

package/dist/types/floatingToolbarPlugin.d.ts

@@ -9,6 +9,23 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ConfigWithNodeInfo, FloatingToolbarPlugin, FloatingToolbarPluginState } from './floatingToolbarPluginType';
 export declare const getRelevantConfig: (selection: Selection, configs: Array<FloatingToolbarConfig>) => ConfigWithNodeInfo | undefined;
 export declare const floatingToolbarPlugin: FloatingToolbarPlugin;
+/**
+ * React component that renders the floating toolbar UI for the editor.
+ *
+ * This component manages the display of floating toolbars based on the current editor state,
+ * selection, and configuration. It handles visibility conditions, positioning, toolbar items
+ * consolidation, and confirmation dialogs.
+ *
+ * @param props - Component properties
+ * @param props.pluginInjectionApi - Plugin injection API for accessing other plugin states
+ * @param props.editorView - ProseMirror EditorView instance
+ * @param props.popupsMountPoint - DOM element where popups should be mounted
+ * @param props.popupsBoundariesElement - Element that defines popup boundaries
+ * @param props.popupsScrollableElement - Scrollable container element for popups
+ * @param props.providerFactory - Factory for creating various providers
+ * @param props.dispatchAnalyticsEvent - Function to dispatch analytics events
+ * @returns JSX element representing the floating toolbar or null if not visible
+ */
 export declare function ContentComponent({ pluginInjectionApi, editorView, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, providerFactory, dispatchAnalyticsEvent, }: Pick<UiComponentFactoryParams, 'editorView' | 'popupsMountPoint' | 'popupsBoundariesElement' | 'providerFactory' | 'dispatchAnalyticsEvent' | 'popupsScrollableElement'> & {
     pluginInjectionApi: ExtractInjectionAPI<FloatingToolbarPlugin> | undefined;
 } & {
@@ -20,6 +37,19 @@ export declare function ContentComponent({ pluginInjectionApi, editorView, popup
  *
  */
 export declare const pluginKey: PluginKey<FloatingToolbarPluginState>;
+/**
+ * Creates a floating toolbar plugin for the ProseMirror editor.
+ *
+ * This factory function creates a SafePlugin that manages floating toolbars in the editor.
+ * It processes an array of floating toolbar handlers and determines which toolbar configuration
+ * should be active based on the current editor state and selection.
+ *
+ * @param options - Configuration object for the floating toolbar plugin
+ * @param options.floatingToolbarHandlers - Array of handlers that return toolbar configurations
+ * @param options.getIntl - Function that returns the IntlShape instance for internationalization
+ * @param options.providerFactory - Factory for creating various providers used by the editor
+ * @returns A SafePlugin instance that manages floating toolbar state and behavior
+ */
 export declare function floatingToolbarPluginFactory(options: {
     floatingToolbarHandlers: Array<FloatingToolbarHandler>;
     getIntl: () => IntlShape;

package/dist/types/floatingToolbarPluginType.d.ts

@@ -24,6 +24,7 @@ export type FloatingToolbarPluginState = {
 };
 export type FloatingToolbarPluginData = {
     confirmDialogForItem?: number;
+    confirmDialogForItemOption?: number;
 };
 export type ForceFocusSelector = (selector: string | null) => (tr: Transaction) => Transaction;
 /**

package/dist/types/pm-plugins/toolbar-data/commands.d.ts

@@ -1,3 +1,3 @@
 import type { Command } from '@atlaskit/editor-common/types';
-export declare const showConfirmDialog: (buttonIndex: number) => Command;
+export declare const showConfirmDialog: (buttonIndex: number, optionIndex?: number) => Command;
 export declare const hideConfirmDialog: () => Command;

package/dist/types/pm-plugins/toolbar-data/types.d.ts

@@ -1,6 +1,7 @@
 export type FloatingToolbarPluginAction = {
     data: {
         buttonIndex: number;
+        optionIndex?: number;
     };
     type: 'SHOW_CONFIRM_DIALOG';
 } | {

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

@@ -9,6 +9,23 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ConfigWithNodeInfo, FloatingToolbarPlugin, FloatingToolbarPluginState } from './floatingToolbarPluginType';
 export declare const getRelevantConfig: (selection: Selection, configs: Array<FloatingToolbarConfig>) => ConfigWithNodeInfo | undefined;
 export declare const floatingToolbarPlugin: FloatingToolbarPlugin;
+/**
+ * React component that renders the floating toolbar UI for the editor.
+ *
+ * This component manages the display of floating toolbars based on the current editor state,
+ * selection, and configuration. It handles visibility conditions, positioning, toolbar items
+ * consolidation, and confirmation dialogs.
+ *
+ * @param props - Component properties
+ * @param props.pluginInjectionApi - Plugin injection API for accessing other plugin states
+ * @param props.editorView - ProseMirror EditorView instance
+ * @param props.popupsMountPoint - DOM element where popups should be mounted
+ * @param props.popupsBoundariesElement - Element that defines popup boundaries
+ * @param props.popupsScrollableElement - Scrollable container element for popups
+ * @param props.providerFactory - Factory for creating various providers
+ * @param props.dispatchAnalyticsEvent - Function to dispatch analytics events
+ * @returns JSX element representing the floating toolbar or null if not visible
+ */
 export declare function ContentComponent({ pluginInjectionApi, editorView, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, providerFactory, dispatchAnalyticsEvent, }: Pick<UiComponentFactoryParams, 'editorView' | 'popupsMountPoint' | 'popupsBoundariesElement' | 'providerFactory' | 'dispatchAnalyticsEvent' | 'popupsScrollableElement'> & {
     pluginInjectionApi: ExtractInjectionAPI<FloatingToolbarPlugin> | undefined;
 } & {
@@ -20,6 +37,19 @@ export declare function ContentComponent({ pluginInjectionApi, editorView, popup
  *
  */
 export declare const pluginKey: PluginKey<FloatingToolbarPluginState>;
+/**
+ * Creates a floating toolbar plugin for the ProseMirror editor.
+ *
+ * This factory function creates a SafePlugin that manages floating toolbars in the editor.
+ * It processes an array of floating toolbar handlers and determines which toolbar configuration
+ * should be active based on the current editor state and selection.
+ *
+ * @param options - Configuration object for the floating toolbar plugin
+ * @param options.floatingToolbarHandlers - Array of handlers that return toolbar configurations
+ * @param options.getIntl - Function that returns the IntlShape instance for internationalization
+ * @param options.providerFactory - Factory for creating various providers used by the editor
+ * @returns A SafePlugin instance that manages floating toolbar state and behavior
+ */
 export declare function floatingToolbarPluginFactory(options: {
     floatingToolbarHandlers: Array<FloatingToolbarHandler>;
     getIntl: () => IntlShape;

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

@@ -24,6 +24,7 @@ export type FloatingToolbarPluginState = {
 };
 export type FloatingToolbarPluginData = {
     confirmDialogForItem?: number;
+    confirmDialogForItemOption?: number;
 };
 export type ForceFocusSelector = (selector: string | null) => (tr: Transaction) => Transaction;
 /**

package/dist/types-ts4.5/pm-plugins/toolbar-data/commands.d.ts

@@ -1,3 +1,3 @@
 import type { Command } from '@atlaskit/editor-common/types';
-export declare const showConfirmDialog: (buttonIndex: number) => Command;
+export declare const showConfirmDialog: (buttonIndex: number, optionIndex?: number) => Command;
 export declare const hideConfirmDialog: () => Command;

package/dist/types-ts4.5/pm-plugins/toolbar-data/types.d.ts

@@ -1,6 +1,7 @@
 export type FloatingToolbarPluginAction = {
     data: {
         buttonIndex: number;
+        optionIndex?: number;
     };
     type: 'SHOW_CONFIRM_DIALOG';
 } | {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "8.2.0",
+	"version": "8.2.2",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,14 +38,14 @@
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/emoji": "^69.5.0",
-		"@atlaskit/icon": "^28.3.0",
+		"@atlaskit/icon": "^28.4.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/modal-dialog": "^14.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.1.0",
+		"@atlaskit/tmp-editor-statsig": "^13.2.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -121,6 +121,9 @@
 		},
 		"platform_editor_block_menu_hide_floating_toolbar": {
 			"type": "boolean"
+		},
+		"platform_editor_fix_confirm_table_removal": {
+			"type": "boolean"
 		}
 	}
 }