@atlaskit/editor-plugin-table/dist/cjs/ui/toolbar.js

Table plugin for the @atlaskit/editor

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getClosestSelectionRect = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = require("@emotion/react");
var _customSteps = require("@atlaskit/custom-steps");
var _analytics = require("@atlaskit/editor-common/analytics");
var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
var _nesting = require("@atlaskit/editor-common/nesting");
var _nodeWidth = require("@atlaskit/editor-common/node-width");
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _uiColor = require("@atlaskit/editor-common/ui-color");
var _utils = require("@atlaskit/editor-common/utils");
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
var _tableMap = require("@atlaskit/editor-tables/table-map");
var _utils3 = require("@atlaskit/editor-tables/utils");
var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-image-center"));
var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-image-left"));
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
var _customizePreferences = _interopRequireDefault(require("@atlaskit/icon/core/migration/customize--preferences"));
var _deleteEditorRemove = _interopRequireDefault(require("@atlaskit/icon/core/migration/delete--editor-remove"));
var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
var _alignImageCenter2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-center"));
var _alignImageLeft2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-left"));
var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
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 _commands = require("../pm-plugins/commands");
var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
var _pluginFactory = require("../pm-plugins/drag-and-drop/plugin-factory");
var _pluginFactory2 = require("../pm-plugins/plugin-factory");
var _pluginKey = require("../pm-plugins/table-resizing/plugin-key");
var _misc = require("../pm-plugins/table-resizing/utils/misc");
var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
var _tableWidth = require("../pm-plugins/table-width");
var _merge = require("../pm-plugins/transforms/merge");
var _alignment = require("../pm-plugins/utils/alignment");
var _nodes = require("../pm-plugins/utils/nodes");
var _selection = require("../pm-plugins/utils/selection");
var _table = require("../pm-plugins/utils/table");
var _types = require("../types");
var _FloatingAlignmentButtons = require("./FloatingAlignmentButtons/FloatingAlignmentButtons");
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 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; } /**
 * @jsxRuntime classic
 * @jsx jsx
 */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
  var formatMessage = _ref.formatMessage;
  var isTableScalingWithFixedColumnWidthsOptionShown = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
  var areTableColumnWidthsFixed = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
  var optionItem = 'item-checkbox';
  var options = [{
    id: 'editor.table.lockColumnWidths',
    title: formatMessage(_messages.tableMessages.lockColumnWidths),
    onClick: (0, _commandsWithAnalytics.toggleFixedColumnWidthsOptionAnalytics)(editorAnalyticsAPI, _analytics.INPUT_METHOD.FLOATING_TB),
    selected: areTableColumnWidthsFixed,
    hidden: !isTableScalingWithFixedColumnWidthsOptionShown,
    domItemOptions: {
      type: optionItem
    }
  }, {
    id: 'editor.table.headerRow',
    title: formatMessage(_messages.tableMessages.headerRow),
    onClick: (0, _commandsWithAnalytics.toggleHeaderRowWithAnalytics)(editorAnalyticsAPI),
    selected: state.isHeaderRowEnabled,
    hidden: !config.allowHeaderRow,
    domItemOptions: {
      type: optionItem
    }
  }, {
    id: 'editor.table.headerColumn',
    title: formatMessage(_messages.tableMessages.headerColumn),
    onClick: (0, _commandsWithAnalytics.toggleHeaderColumnWithAnalytics)(editorAnalyticsAPI),
    selected: state.isHeaderColumnEnabled,
    hidden: !config.allowHeaderColumn,
    domItemOptions: {
      type: optionItem
    }
  }, {
    id: 'editor.table.numberedColumn',
    title: formatMessage(_messages.tableMessages.numberedColumn),
    onClick: (0, _commandsWithAnalytics.toggleNumberColumnWithAnalytics)(editorAnalyticsAPI),
    selected: state.isNumberColumnEnabled,
    hidden: !config.allowNumberColumn,
    domItemOptions: {
      type: optionItem
    }
  }, {
    id: 'editor.table.collapseTable',
    title: formatMessage(_messages.tableMessages.collapseTable),
    onClick: (0, _commandsWithAnalytics.wrapTableInExpandWithAnalytics)(editorAnalyticsAPI),
    selected: !!state.isTableCollapsed,
    disabled: !state.canCollapseTable,
    hidden: !config.allowCollapse,
    domItemOptions: {
      type: optionItem
    }
  }];
  var tableOptionsDropdownWidth = isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined;
  if (state.isDragAndDropEnabled) {
    return {
      id: 'editor.table.tableOptions',
      type: 'dropdown',
      testId: 'table_options',
      icon: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? undefined : _customizePreferences.default,
      iconBefore: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? _customizePreferences.default : undefined,
      title: formatMessage(_messages.tableMessages.tableOptions),
      hidden: options.every(function (option) {
        return option.hidden;
      }),
      options: options,
      dropdownWidth: tableOptionsDropdownWidth
    };
  } else {
    return {
      id: 'editor.table.tableOptions',
      type: 'dropdown',
      testId: 'table_options',
      title: formatMessage(_messages.tableMessages.tableOptions),
      hidden: options.every(function (option) {
        return option.hidden;
      }),
      options: options,
      dropdownWidth: tableOptionsDropdownWidth
    };
  }
};

// Added these options for mobile. Mobile bridge translates this menu and
// relay it to the native mobile. Native mobile displays the menu
// with native widgets. It's enabled via a plugin config.
var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, editorView, initialSelectionRect, _ref2, getEditorContainerWidth, api, editorAnalyticsAPI) {
  var _pluginState$pluginCo, _pluginState$pluginCo2;
  var formatMessage = _ref2.formatMessage;
  var isTableScalingEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
  var shouldUseIncreasedScalingPercent = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
  var isCommentEditor = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
  var top = initialSelectionRect.top,
    bottom = initialSelectionRect.bottom,
    right = initialSelectionRect.right,
    left = initialSelectionRect.left;
  var numberOfColumns = right - left;
  var numberOfRows = bottom - top;
  var pluginState = (0, _pluginFactory2.getPluginState)(editorState);
  var options = [{
    id: 'editor.table.insertColumn',
    title: formatMessage(_messages.tableMessages.insertColumn),
    onClick: function onClick(state, dispatch, view) {
      var selectionRect = getClosestSelectionRect(state);
      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
      if (index) {
        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
      }
      return true;
    },
    selected: false,
    disabled: false,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    elemAfter: (0, _react.jsx)("div", {
      css: _shortcut.shortcutStyle
    }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
  }, {
    id: 'editor.table.insertRow',
    title: formatMessage(_messages.tableMessages.insertRow),
    onClick: function onClick(state, dispatch) {
      var selectionRect = getClosestSelectionRect(state);
      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
      if (index) {
        (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, {
          index: index,
          moveCursorToInsertedRow: true
        })(state, dispatch);
      }
      return true;
    },
    selected: false,
    disabled: false,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    elemAfter: (0, _react.jsx)("div", {
      css: _shortcut.shortcutStyle
    }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
  }, {
    id: 'editor.table.removeColumns',
    title: formatMessage(_messages.tableMessages.removeColumns, {
      0: numberOfColumns
    }),
    onClick: function onClick(state, dispatch, view) {
      var selectionRect = getClosestSelectionRect(state);
      if (selectionRect) {
        (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(_analytics.INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
      }
      return true;
    },
    onFocus: highlightColumnsHandler,
    onBlur: (0, _commands.clearHoverSelection)(),
    onMouseOver: highlightColumnsHandler,
    onMouseLeave: (0, _commands.clearHoverSelection)(),
    selected: false,
    disabled: false
  }, {
    id: 'editor.table.removeRows',
    title: formatMessage(_messages.tableMessages.removeRows, {
      0: numberOfRows
    }),
    onClick: function onClick(state, dispatch) {
      var selectionRect = getClosestSelectionRect(state);
      if (selectionRect) {
        (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, selectionRect, false)(state, dispatch);
      }
      return true;
    },
    onFocus: highlightRowsHandler,
    onBlur: (0, _commands.clearHoverSelection)(),
    onMouseOver: highlightRowsHandler,
    onMouseLeave: (0, _commands.clearHoverSelection)(),
    selected: false,
    disabled: false
  }];
  if (pluginState.pluginConfig.allowMergeCells) {
    options.push({
      id: 'editor.table.mergeCells',
      title: formatMessage(_messages.tableMessages.mergeCells),
      onClick: (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB),
      selected: false,
      disabled: !(0, _merge.canMergeCells)(editorState.tr)
    }, {
      id: 'editor.table.splitCell',
      title: formatMessage(_messages.tableMessages.splitCell),
      onClick: (0, _commandsWithAnalytics.splitCellWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB),
      selected: false,
      disabled: !(0, _utils3.splitCell)(editorState)
    });
  }
  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
    var _newResizeStateWithAn;
    var newResizeStateWithAnalytics = editorView ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
    var wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
    var distributeColumnWidths = function distributeColumnWidths(state, dispatch) {
      if (newResizeStateWithAnalytics) {
        (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI, api)(_analytics.INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
        return true;
      }
      return false;
    };
    options.push({
      id: 'editor.table.distributeColumns',
      title: formatMessage(_messages.tableMessages.distributeColumns),
      onClick: distributeColumnWidths,
      selected: false,
      disabled: !wouldChange
    });
  }
  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
    var hasMergedCellsInTable = (0, _table.getMergedCellsPositions)(editorState.tr).length > 0;
    var warning = hasMergedCellsInTable ? formatMessage(_messages.tableMessages.canNotSortTable) : undefined;
    options.push({
      id: 'editor.table.sortColumnAsc',
      title: formatMessage(_messages.tableMessages.sortColumnASC),
      onMouseOver: function onMouseOver(state, dispatch) {
        if ((0, _table.getMergedCellsPositions)(state.tr).length !== 0) {
          (0, _commands.hoverMergedCells)()(state, dispatch);
          return true;
        }
        return false;
      },
      onMouseOut: function onMouseOut(state, dispatch) {
        (0, _commands.clearHoverSelection)()(state, dispatch);
        return true;
      },
      onClick: function onClick(state, dispatch) {
        (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, _customSteps.TableSortOrder.ASC)(state, dispatch);
        return true;
      },
      selected: false,
      disabled: hasMergedCellsInTable,
      tooltip: warning
    });
    options.push({
      id: 'editor.table.sortColumnDesc',
      title: formatMessage(_messages.tableMessages.sortColumnDESC),
      onMouseOver: function onMouseOver(state, dispatch) {
        if ((0, _table.getMergedCellsPositions)(state.tr).length !== 0) {
          (0, _commands.hoverMergedCells)()(state, dispatch);
          return true;
        }
        return false;
      },
      onMouseOut: function onMouseOut(state, dispatch) {
        (0, _commands.clearHoverSelection)()(state, dispatch);
        return true;
      },
      onClick: function onClick(state, dispatch) {
        (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, _customSteps.TableSortOrder.DESC)(state, dispatch);
        return true;
      },
      selected: false,
      disabled: hasMergedCellsInTable,
      tooltip: warning
    });
  }
  options.push({
    id: 'editor.table.clearCells',
    title: formatMessage(_messages.tableMessages.clearCells, {
      0: Math.max(numberOfColumns, numberOfRows)
    }),
    onClick: function onClick(state, dispatch) {
      var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
        targetCellPosition = _getPluginState.targetCellPosition;
      (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, targetCellPosition)(state, dispatch);
      return true;
    },
    selected: false,
    disabled: false,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    elemAfter: (0, _react.jsx)("div", {
      css: _shortcut.shortcutStyle
    }, (0, _keymaps.tooltip)(_keymaps.backspace))
  });
  return {
    id: 'editor.table.cellOptions',
    testId: 'cell_options',
    type: 'dropdown',
    title: formatMessage(_messages.tableMessages.cellOptions),
    options: options,
    // Increased dropdown item width to prevent labels from being truncated
    dropdownWidth: 230,
    showSelected: false
  };
};
var getClosestSelectionRect = exports.getClosestSelectionRect = function getClosestSelectionRect(state) {
  var selection = state.selection;
  return (0, _utils3.isSelectionType)(selection, 'cell') ?
  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  (0, _utils3.getSelectionRect)(selection) : (0, _utils3.findCellRectClosestToPos)(selection.$from);
};
var getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(state) {
  var selection = state.selection;
  var tableObject = (0, _utils3.findTable)(state.selection);
  if (!tableObject) {
    return;
  }
  var map = _tableMap.TableMap.get(tableObject.node);
  var tableRect = new _tableMap.Rect(0, 0, map.width, map.height);

  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : tableRect;
};
var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options) {
  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
  var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
  return function (config) {
    return function (state, intl) {
      var tableObject = (0, _utils3.findTable)(state.selection);
      var pluginState = (0, _pluginFactory2.getPluginState)(state);
      var resizeState = _pluginKey.pluginKey.getState(state);
      var tableWidthState = _tableWidth.pluginKey.getState(state);
      var isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
      var nodeType = state.schema.nodes.table;
      var toolbarTitle = 'Table floating controls';
      var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
        var _api$editorViewMode;
        var isDragHandleMenuOpened = false;
        var isTableRowOrColumnDragged = false;
        if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
          var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
            _getDragDropPluginSta2 = _getDragDropPluginSta.isDragMenuOpen,
            isDragMenuOpen = _getDragDropPluginSta2 === void 0 ? false : _getDragDropPluginSta2,
            _getDragDropPluginSta3 = _getDragDropPluginSta.isDragging,
            isDragging = _getDragDropPluginSta3 === void 0 ? false : _getDragDropPluginSta3;
          isDragHandleMenuOpened = isDragMenuOpen;
          isTableRowOrColumnDragged = isDragging;
        }
        var isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
        var isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
        var isTableState = isTableRowOrColumnDragged || isTableOrColumnResizing || isTableMenuOpened;
        var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';

        // Note: when focus is in codeblocks, pluginState.editorHasFocus is false, so the codeblocks toolbar
        // won't be suppressed.
        var shouldSuppressAllToolbars = isTableState && pluginState.editorHasFocus && !isViewMode;
        if (shouldSuppressAllToolbars) {
          var userIntentEnabled = Boolean((api === null || api === void 0 ? void 0 : api.userIntent) && (0, _expValEquals.expValEquals)('platform_editor_lovability_user_intent', 'isEnabled', true));
          return {
            title: toolbarTitle,
            items: [],
            nodeType: nodeType,
            __suppressAllToolbars: userIntentEnabled ? undefined : true
          };
        }
      }

      // We don't want to show floating toolbar while resizing the table
      var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
      if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
        var _api$extension, _api$extension2;
        var isNested = pluginState.tablePos && (0, _nodes.isTableNested)(state, pluginState.tablePos);
        var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
        var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
        var editorView = getEditorView();
        var getDomRef = function getDomRef(editorView) {
          var element;
          var domAtPos = editorView.domAtPos.bind(editorView);
          var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
          if (parent) {
            var tableRef =
            // Ignored via go/ees005
            // eslint-disable-next-line @atlaskit/editor/no-as-casting
            parent.querySelector('table') || undefined;
            if (tableRef) {
              element = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
            }
          }
          return element;
        };
        var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
        var alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, areAnyNewToolbarFlagsEnabled, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
        var cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
        var columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
        var colorPicker = !areAnyNewToolbarFlagsEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];

        // Check if we need to show confirm dialog for delete button
        var confirmDialog;
        if ((0, _utils.isReferencedSource)(state, tableObject.node)) {
          var localSourceName = intl.formatMessage(_messages.tableMessages.unnamedSource);
          confirmDialog = function confirmDialog() {
            return {
              title: intl.formatMessage(_messages.tableMessages.deleteElementTitle),
              okButtonLabel: intl.formatMessage(_messages.tableMessages.confirmDeleteLinkedModalOKButton),
              message: intl.formatMessage(_messages.tableMessages.confirmDeleteLinkedModalMessage, {
                nodeName: (0, _utils.getNodeName)(state, tableObject.node) || localSourceName
              }),
              messagePrefix: intl.formatMessage(_messages.tableMessages.confirmDeleteLinkedModalMessagePrefix),
              isReferentialityDialog: true,
              getChildrenInfo: function getChildrenInfo() {
                return (0, _utils.getChildrenInfo)(state, tableObject.node);
              },
              checkboxLabel: intl.formatMessage(_messages.tableMessages.confirmModalCheckboxLabel),
              onConfirm: function onConfirm() {
                var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
                return clickWithCheckboxHandler(isChecked, tableObject.node);
              }
            };
          };
        }
        var deleteButton = {
          id: 'editor.table.delete',
          type: 'button',
          appearance: 'danger',
          icon: _deleteEditorRemove.default,
          onClick: (0, _commandsWithAnalytics.deleteTableWithAnalytics)(editorAnalyticsAPI),
          disabled: !!resizeState && !!resizeState.dragging,
          onMouseEnter: (0, _commands.hoverTable)(true),
          onFocus: (0, _commands.hoverTable)(true),
          onBlur: (0, _commands.clearHoverSelection)(),
          onMouseLeave: (0, _commands.clearHoverSelection)(),
          title: intl.formatMessage(_messages.default.remove),
          focusEditoronEnter: true,
          confirmDialog: confirmDialog
        };
        var copyButton = {
          type: 'copy-button',
          supportsViewMode: true,
          items: [{
            state: state,
            formatMessage: intl.formatMessage,
            nodeType: nodeType,
            onMouseEnter: (0, _commands.hoverTable)(false, true),
            onMouseLeave: (0, _commands.clearHoverSelection)(),
            onFocus: (0, _commands.hoverTable)(false, true),
            onBlur: (0, _commands.clearHoverSelection)()
          }]
        };
        var isNestedTable = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _nesting.isSelectionTableNestedInTable)(state);
        var hoverTableProps = function hoverTableProps(isInDanger, isSelected) {
          return {
            onMouseEnter: (0, _commands.hoverTable)(isInDanger, isSelected),
            onMouseLeave: (0, _commands.clearHoverSelection)(),
            onFocus: (0, _commands.hoverTable)(isInDanger, isSelected),
            onBlur: (0, _commands.clearHoverSelection)()
          };
        };

        // testId is required to show focus on trigger button on ESC key press
        // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
        var overflowDropdownTestId = 'table-overflow-dropdown-trigger';
        var extensionState = api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 || (_api$extension = _api$extension.sharedState) === null || _api$extension === void 0 ? void 0 : _api$extension.currentState();
        var extensionApi = api === null || api === void 0 || (_api$extension2 = api.extension) === null || _api$extension2 === void 0 ? void 0 : _api$extension2.actions.api();
        return {
          title: toolbarTitle,
          getDomRef: getDomRef,
          nodeType: nodeType,
          offset: [0, 18],
          absoluteOffset: {
            top: -6
          },
          zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
          // Place the context menu slightly above the others
          items: [menu].concat((0, _toConsumableArray2.default)(!areAnyNewToolbarFlagsEnabled ? [separator(menu.hidden)] : []), (0, _toConsumableArray2.default)(alignmentMenu), (0, _toConsumableArray2.default)(!areAnyNewToolbarFlagsEnabled ? [separator(alignmentMenu.length === 0)] : []), (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), (0, _toConsumableArray2.default)(colorPicker), (0, _toConsumableArray2.default)(!areAnyNewToolbarFlagsEnabled ? [{
            type: 'extensions-placeholder',
            separator: 'end'
          }, copyButton, {
            type: 'separator'
          }, deleteButton] : [areAnyNewToolbarFlagsEnabled && {
            type: 'separator',
            fullHeight: true
          }, {
            type: 'overflow-dropdown',
            testId: overflowDropdownTestId,
            dropdownWidth: 220,
            options: [{
              type: 'custom',
              fallback: [],
              render: function render(editorView, dropdownOptions) {
                if (!editorView) {
                  return null;
                }
                if (!extensionApi || !(extensionState !== null && extensionState !== void 0 && extensionState.extensionProvider)) {
                  return null;
                }
                return (0, _react.jsx)(_floatingToolbar.DropdownMenuExtensionItems, {
                  node: tableObject.node,
                  editorView: editorView,
                  extension: {
                    extensionProvider: extensionState !== null && extensionState !== void 0 && extensionState.extensionProvider ? Promise.resolve(extensionState.extensionProvider) : undefined,
                    extensionApi: extensionApi
                  },
                  dropdownOptions: dropdownOptions,
                  disabled: function disabled(key) {
                    return isNestedTable && ['referentiality:connections', 'chart:insert-chart'].includes(key);
                  },
                  areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
                });
              }
            }].concat((0, _toConsumableArray2.default)(extensionApi && extensionState !== null && extensionState !== void 0 && extensionState.extensionProvider && !areAnyNewToolbarFlagsEnabled ? [{
              type: 'separator'
            }] : []), [_objectSpread({
              title: intl.formatMessage(_messages.default.copyToClipboard),
              onClick: function onClick() {
                var _api$core, _api$floatingToolbar;
                api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute( // @ts-ignore
                api === null || api === void 0 || (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(nodeType, _analytics.INPUT_METHOD.FLOATING_TB));
                return true;
              },
              icon: (0, _react.jsx)(_copy.default, {
                label: intl.formatMessage(_messages.default.copyToClipboard)
              })
            }, hoverTableProps(false, true)), _objectSpread(_objectSpread({
              title: intl.formatMessage(_messages.default.delete),
              onClick: (0, _commandsWithAnalytics.deleteTableWithAnalytics)(editorAnalyticsAPI),
              icon: (0, _react.jsx)(_deleteEditorRemove.default, {
                label: intl.formatMessage(_messages.default.delete)
              })
            }, hoverTableProps(true)), {}, {
              confirmDialog: (0, _platformFeatureFlags.fg)('platform_editor_fix_confirm_table_removal') ? confirmDialog : undefined
            })])
          }])),
          scrollable: true
        };
      }
      return;
    };
  };
};
var separator = function separator(hidden) {
  return {
    type: 'separator',
    hidden: hidden
  };
};
var getCellItems = function getCellItems(state, view, _ref3, getEditorContainerWidth, api, editorAnalyticsAPI) {
  var formatMessage = _ref3.formatMessage;
  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
  var shouldUseIncreasedScalingPercent = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
  var isCommentEditor = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
  var initialSelectionRect = getClosestSelectionRect(state);
  if (initialSelectionRect) {
    var cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
      formatMessage: formatMessage
    }, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    return [cellOptions, separator(cellOptions.hidden)];
  }
  return [];
};
var getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, api, editorAnalyticsAPI) {
  var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
  var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
  return function (state, dispatch, editorView) {
    var selectionOrTableRect = getClosestSelectionOrTableRect(state);
    if (!editorView || !selectionOrTableRect) {
      return false;
    }
    var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
    if (newResizeStateWithAnalytics) {
      (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI, api)(_analytics.INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
      return true;
    }
    return false;
  };
};

// this create the button group for distribute column and also fixed column width
// fixed column button should be in this function call in the future
var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, api, editorAnalyticsAPI) {
  var _newResizeStateWithAn2, _pluginState$pluginCo3;
  var formatMessage = _ref4.formatMessage;
  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
  var isCommentEditor = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
  var pluginState = (0, _pluginFactory2.getPluginState)(editorState);
  var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
  if (!selectionOrTableRect || !editorView) {
    return [];
  }
  var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
  var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
  var items = [];
  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
    items.push({
      id: 'editor.table.distributeColumns',
      type: 'button',
      title: formatMessage(_messages.tableMessages.distributeColumns),
      icon: function icon() {
        return (0, _react.jsx)(_tableColumnsDistribute.default, {
          LEGACY_fallbackIcon: _layoutThreeEqual.default,
          spacing: 'spacious',
          label: ''
        });
      },
      onClick: function onClick(state, dispatch, view) {
        return getDistributeConfig(getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view);
      },
      disabled: !wouldChange
    });
  }
  if (items.length !== 0 && !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
    items.push({
      type: 'separator'
    });
  }
  return items;
};
var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI, getEditorView) {
  var _node$attrs;
  var formatMessage = _ref5.formatMessage;
  var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
    targetCellPosition = _getPluginState2.targetCellPosition,
    pluginConfig = _getPluginState2.pluginConfig;
  if (!pluginConfig.allowBackgroundColor) {
    return [];
  }
  var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
  var currentBackground = (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
  var defaultPalette = _uiColor.cellBackgroundColorPalette.find(function (item) {
    return item.value === currentBackground;
  }) || {
    // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
    label: 'Custom',
    value: currentBackground,
    border: _uiColor.DEFAULT_BORDER_COLOR
  };
  return [{
    id: 'editor.table.colorPicker',
    title: formatMessage(_messages.tableMessages.cellBackground),
    type: 'select',
    isAriaExpanded: true,
    selectType: 'color',
    defaultValue: defaultPalette,
    options: _uiColor.cellBackgroundColorPalette,
    returnEscToButton: true,
    // Ignored via go/ees005
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    onChange: function onChange(option) {
      return (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, option.value, getEditorView());
    }
  }, separator(menu.hidden)];
};
var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node, editorAnalyticsAPI) {
  return function (state, dispatch) {
    if (!node) {
      return false;
    }
    if (!isChecked) {
      return (0, _commandsWithAnalytics.deleteTableWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
    } else {
      (0, _commands.removeDescendantNodes)(node)(state, dispatch);
    }
    return true;
  };
};
var highlightRowsHandler = function highlightRowsHandler(state, dispatch) {
  var selectionRect = getClosestSelectionRect(state);
  if (selectionRect) {
    (0, _commands.hoverRows)((0, _selection.getSelectedRowIndexes)(selectionRect), true)(state, dispatch);
    return true;
  }
  return false;
};
var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch) {
  var selectionRect = getClosestSelectionRect(state);
  if (selectionRect) {
    (0, _commands.hoverColumns)((0, _selection.getSelectedColumnIndexes)(selectionRect), true)(state, dispatch);
    return true;
  }
  return false;
};
var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, areAnyNewToolbarFlagsEnabled, isFullWidthEditor, isCommentEditor) {
  var formatMessage = _ref6.formatMessage;
  var tableObject = (0, _utils3.findTable)(editorState.selection);
  if (!tableObject) {
    return [];
  }
  var alignmentIcons = [{
    id: 'editor.table.alignLeft',
    value: 'align-start',
    icon: function icon() {
      return (0, _react.jsx)(_alignImageLeft.default, {
        color: "currentColor",
        spacing: "spacious",
        label: "table-align-start-icon",
        LEGACY_fallbackIcon: _alignImageLeft2.default
      });
    }
  }, {
    id: 'editor.table.alignCenter',
    value: 'center',
    icon: function icon() {
      return (0, _react.jsx)(_alignImageCenter.default, {
        color: "currentColor",
        spacing: "spacious",
        label: "table-align-center-icon",
        LEGACY_fallbackIcon: _alignImageCenter2.default
      });
    }
  }];

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  var layoutToMessages = {
    center: _messages.tableMessages.alignTableCenter,
    'align-start': _messages.tableMessages.alignTableLeft
  };
  var alignmentButtons = alignmentIcons.map(function (alignmentIcon) {
    var id = alignmentIcon.id,
      value = alignmentIcon.value,
      icon = alignmentIcon.icon;
    var currentLayout = tableObject.node.attrs.layout;
    return _objectSpread({
      id: id,
      type: 'button',
      icon: icon,
      title: formatMessage(layoutToMessages[value]),
      selected: (0, _alignment.normaliseAlignment)(currentLayout) === value,
      onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI, isCommentEditor || false)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB, _analytics.CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED)
    }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) && {
      disabled: value !== 'center'
    });
  });
  var alignmentItemOptions = {
    render: function render(props) {
      return (0, _react.jsx)(_FloatingAlignmentButtons.FloatingAlignmentButtons, (0, _extends2.default)({
        alignmentButtons: alignmentButtons
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
      }, props, {
        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
      }));
    },
    width: 74,
    height: 32
  };
  var selectedAlignmentIcon = getSelectedAlignmentIcon(alignmentIcons, tableObject.node);
  var alignmentToolbarItem = [{
    id: 'table-layout',
    testId: 'table-layout-dropdown',
    type: 'dropdown',
    options: alignmentItemOptions,
    title: formatMessage(_messages.tableMessages.tableAlignmentOptions),
    icon: selectedAlignmentIcon === null || selectedAlignmentIcon === void 0 ? void 0 : selectedAlignmentIcon.icon
  }];
  return alignmentToolbarItem;
};
var getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmentIcons, selectedNode) {
  var selectedAlignment = selectedNode.attrs.layout;
  return alignmentIcons.find(function (icon) {
    return icon.value === (0, _alignment.normaliseAlignment)(selectedAlignment);
  });
};
var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
  var _getEditorContainerWi = getEditorContainerWidth(),
    lineLength = _getEditorContainerWi.lineLength;
  var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);

  // table may be scaled, use the scale percent to calculate the table width
  if (editorView) {
    var tableWrapperWidth = tableContainerWidth;
    var scalePercent = (0, _misc.getStaticTableScalingPercent)(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
    tableContainerWidth = tableContainerWidth * scalePercent;
  }

  // If fixed-width editor, we disable 'left-alignment' when table width is 760px.
  // tableContainerWidth +1 here because tableContainerWidth is 759 in fixed-width editor
  if (selectedNode && !isFullWidthEditor && lineLength && tableContainerWidth + 1 >= lineLength) {
    return true;
  }
  return false;
};