@atlaskit/editor-plugin-table 10.8.3 → 10.9.2

package/dist/es2019/ui/ContentComponent.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import FloatingContextualButton from './FloatingContextualButton';
+import FloatingContextualMenu from './FloatingContextualMenu';
+import FloatingDeleteButton from './FloatingDeleteButton';
+import FloatingDragMenu from './FloatingDragMenu';
+// Ignored via go/ees005
+// eslint-disable-next-line import/no-named-as-default
+import FloatingInsertButton from './FloatingInsertButton';
+import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './global-styles';
+import { FullWidthDisplay } from './TableFullWidthLabel';
+const useSharedTablePluginStateSelector = (api, key) => {
+  const value = useSharedPluginStateSelector(api, `table.${key}`);
+  return value;
+};
+const ContentComponentInternal = ({
+  api,
+  editorView,
+  dispatchAnalyticsEvent,
+  options,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  defaultGetEditorContainerWidth,
+  defaultGetEditorFeatureFlags
+}) => {
+  var _api$analytics, _api$accessibilityUti;
+  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  const ariaNotifyPlugin = api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
+  const resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
+  const resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
+  const isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
+  const isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
+  const widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
+  const tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
+  const targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
+  const isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
+  const tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
+  const pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
+  const insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
+  const insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
+  const isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+  const isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
+  const isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
+  const tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
+  const isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
+  const {
+    allowControls
+  } = pluginConfig;
+  const stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
+  const dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
+  const dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
+  const isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+    isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
+    editorView: editorView,
+    tableNode: tableNode,
+    mountPoint: popupsMountPoint,
+    targetCellPosition: targetCellPosition,
+    scrollableElement: popupsScrollableElement,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    isContextualMenuOpen: isContextualMenuOpen,
+    stickyHeader: stickyHeader,
+    tableWrapper: tableWrapperTarget,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+  }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
+    tableNode: tableNode,
+    tableRef: tableRef,
+    insertColumnButtonIndex: insertColumnButtonIndex,
+    insertRowButtonIndex: insertRowButtonIndex,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isDragAndDropEnabled: isDragAndDropEnabled,
+    isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+    editorView: editorView,
+    mountPoint: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    hasStickyHeaders: stickyHeader && stickyHeader.sticky,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    getEditorContainerWidth: defaultGetEditorContainerWidth,
+    getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+    isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
+    api: api,
+    isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
+  }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
+    editorView: editorView,
+    mountPoint: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    targetCellPosition: targetCellPosition,
+    isOpen: Boolean(isContextualMenuOpen) && !isResizing,
+    pluginConfig: pluginConfig,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    getEditorContainerWidth: defaultGetEditorContainerWidth,
+    getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+    api: api
+  }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
+    editorView: editorView,
+    mountPoint: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    tableRef: tableRef,
+    tableNode: tableNode,
+    targetCellPosition: targetCellPosition,
+    direction: dragMenuDirection,
+    index: dragMenuIndex,
+    isOpen: !!isDragMenuOpen && !isResizing,
+    getEditorContainerWidth: defaultGetEditorContainerWidth,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    stickyHeaders: stickyHeader,
+    pluginConfig: pluginConfig,
+    isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+    getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+    ariaNotifyPlugin: ariaNotifyPlugin,
+    api: api,
+    isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
+  }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
+    editorView: editorView,
+    selection: editorView.state.selection,
+    tableRef: tableRef,
+    mountPoint: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    stickyHeaders: stickyHeader,
+    isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    api: api
+  }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
+    target: resizingTableRef,
+    content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
+    alignX: 'center',
+    alignY: 'bottom',
+    stick: true,
+    forcePlacement: true,
+    zIndex: akEditorFloatingPanelZIndex,
+    offset: [0, 10]
+  }));
+};
+export const ContentComponent = ({
+  api,
+  editorView,
+  dispatchAnalyticsEvent,
+  options,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  defaultGetEditorContainerWidth,
+  defaultGetEditorFeatureFlags
+}) => {
+  var _api$featureFlags;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    component: ACTION_SUBJECT.TABLES_PLUGIN,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    fallbackComponent: null
+  }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+    featureFlags: api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
+    isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
+    api: api
+  }), /*#__PURE__*/React.createElement(ContentComponentInternal, {
+    api: api,
+    editorView: editorView,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    options: options,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
+    defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
+  }));
+};

package/dist/es2019/ui/toolbar.js

@@ -463,6 +463,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       onFocus: hoverTable(isInDanger, isSelected),
       onBlur: clearHoverSelection()
     });
+    const shouldGroupWithoutSeparators = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6');
     return {
       title: toolbarTitle,
       getDomRef,
@@ -473,12 +474,15 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       },
       zIndex: akEditorFloatingPanelZIndex + 1,
       // Place the context menu slightly above the others
-      items: [menu, separator(menu.hidden), ...alignmentMenu, separator(alignmentMenu.length === 0), ...cellItems, ...columnSettingsItems, ...colorPicker, ...(editorExperiment('platform_editor_controls', 'control') ? [{
+      items: [menu, ...(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []), ...alignmentMenu, ...(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []), ...cellItems, ...columnSettingsItems, ...colorPicker, ...(editorExperiment('platform_editor_controls', 'control') ? [{
         type: 'extensions-placeholder',
         separator: 'end'
       }, copyButton, {
         type: 'separator'
-      }, deleteButton] : [{
+      }, deleteButton] : [shouldGroupWithoutSeparators && {
+        type: 'separator',
+        fullHeight: true
+      }, {
         type: 'overflow-dropdown',
         dropdownWidth: 220,
         options: [{
@@ -594,7 +598,7 @@ const getColumnSettingItems = (editorState, editorView, {
       disabled: !wouldChange
     });
   }
-  if (items.length !== 0) {
+  if (items.length !== 0 && (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6'))) {
     items.push({
       type: 'separator'
     });

package/dist/esm/nodeviews/table.js

@@ -136,12 +136,10 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       var _this2 = this;
       var oldIgnoreMutation;
       var selectionBookmark;
-      var parentOffset = 0;
       var mutationsIgnored = false;
 
       // Only proceed if we have both a node and table, and the table isn't already inside the node
       if (node && this.table && !node.contains(this.table)) {
-        var _this$view$state$sele;
         // Store the current ignoreMutation handler so we can restore it later
         oldIgnoreMutation = this.ignoreMutation;
 
@@ -149,7 +147,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         // - Ignores all DOM mutations except selection changes
         // - Tracks when mutations have been ignored via mutationsIgnored flag
         this.ignoreMutation = function (m) {
-          var isSelectionMutation = m.target instanceof Selection;
+          var isSelectionMutation = m.type === 'selection';
           if (!isSelectionMutation) {
             mutationsIgnored = true;
           }
@@ -162,15 +160,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           selectionBookmark = this.view.state.selection.getBookmark();
         }
 
-        // Store the current cursor position within the parent node
-        // Used to determine if we need to restore selection later
-        if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
-          var _this$view$state$sele2, _this$view$state$sele3;
-          parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 || (_this$view$state$sele3 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele3 === void 0 ? void 0 : _this$view$state$sele3.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
-        }
-
         // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-        if (this.renderedDOM) {
+        if (this.dom && this.renderedDOM) {
           this.dom.removeChild(this.renderedDOM);
         }
         // Move the table from the ProseMirror table structure into the React rendered table node.
@@ -184,9 +175,13 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           // Restore the selection only if:
           // - We have a selection bookmark
           // - Mutations were ignored during the table move
-          // - The cursor wasn't at the start of the node
-          if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
-            _this2.view.dispatch(_this2.view.state.tr.setSelection(selectionBookmark.resolve(_this2.view.state.tr.doc)));
+          // - The bookmarked selection is different from the current selection.
+          if (selectionBookmark && mutationsIgnored) {
+            var resolvedSelection = selectionBookmark.resolve(_this2.view.state.tr.doc);
+            // Don't set the selection if it's the same as the current selection.
+            if (!resolvedSelection.eq(_this2.view.state.selection)) {
+              _this2.view.dispatch(_this2.view.state.tr.setSelection(resolvedSelection));
+            }
           }
         });
       }

package/dist/esm/tablePlugin.js

@@ -31,7 +31,6 @@ import { createPlugin as createDragAndDropPlugin } from './pm-plugins/drag-and-d
 import { pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop/plugin-key';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
-import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createStickyHeadersPlugin } from './pm-plugins/sticky-headers/plugin';
@@ -48,6 +47,7 @@ import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKe
 import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
 import { createTableWithWidth } from './pm-plugins/utils/create';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
+import { ContentComponent } from './ui/ContentComponent';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
@@ -94,13 +94,19 @@ var tablePlugin = function tablePlugin(_ref) {
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
     // to most up to date values - passing to createPluginState will not re-initialise the state
     getSharedState: function getSharedState(editorState) {
+      var _tablePluginState$tab, _tableWidthResizingPl;
       if (!editorState) {
         return undefined;
       }
-      var tablePluginState = getPluginState(editorState);
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      var tablePluginState = pluginKey.getState(editorState);
       var tableResizingPluginState = getFlexiResizingPlugin(editorState);
       var tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
-      return {
+      var stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
+      var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
+      var dragAndDropState = dragAndDropPluginKey.getState(editorState);
+      var sharedStateInternal = {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
         wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
         isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
@@ -117,8 +123,25 @@ var tablePlugin = function tablePlugin(_ref) {
         // IMPORTANT: Need to continue to pass tableNode to control re-renders
         // TableComponent listens for node attribute changes to update colgroups
         tableNode: tablePluginState.tableNode,
-        widthToWidest: tablePluginState.widthToWidest
+        widthToWidest: tablePluginState.widthToWidest,
+        resizingTableLocalId: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableLocalId,
+        tableRef: (_tablePluginState$tab = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tableRef) !== null && _tablePluginState$tab !== void 0 ? _tablePluginState$tab : undefined,
+        resizingTableRef: (_tableWidthResizingPl = tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableRef) !== null && _tableWidthResizingPl !== void 0 ? _tableWidthResizingPl : undefined,
+        tablePos: tablePluginState.tablePos,
+        targetCellPosition: tablePluginState.targetCellPosition,
+        isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
+        pluginConfig: tablePluginState.pluginConfig,
+        insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
+        insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
+        isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
+        tableWrapperTarget: tablePluginState.tableWrapperTarget,
+        isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
+        stickyHeader: stickyHeader,
+        dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
+        dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
+        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
       };
+      return sharedStateInternal;
     },
     actions: {
       insertTable: function insertTable(analyticsPayload) {
@@ -419,6 +442,19 @@ var tablePlugin = function tablePlugin(_ref) {
         popupsBoundariesElement = _ref20.popupsBoundariesElement,
         popupsScrollableElement = _ref20.popupsScrollableElement,
         dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
+      if (editorExperiment('platform_editor_usesharedpluginstateselector', true)) {
+        return /*#__PURE__*/React.createElement(ContentComponent, {
+          api: api,
+          editorView: editorView,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          options: options,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement,
+          defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
+          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
+        });
+      }
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,

package/dist/esm/ui/ContentComponent.js

@@ -0,0 +1,172 @@
+import React from 'react';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import FloatingContextualButton from './FloatingContextualButton';
+import FloatingContextualMenu from './FloatingContextualMenu';
+import FloatingDeleteButton from './FloatingDeleteButton';
+import FloatingDragMenu from './FloatingDragMenu';
+// Ignored via go/ees005
+// eslint-disable-next-line import/no-named-as-default
+import FloatingInsertButton from './FloatingInsertButton';
+import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './global-styles';
+import { FullWidthDisplay } from './TableFullWidthLabel';
+var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
+  var value = useSharedPluginStateSelector(api, "table.".concat(key));
+  return value;
+};
+var ContentComponentInternal = function ContentComponentInternal(_ref) {
+  var _api$analytics, _api$accessibilityUti;
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    options = _ref.options,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    defaultGetEditorContainerWidth = _ref.defaultGetEditorContainerWidth,
+    defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
+  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
+  var resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
+  var resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
+  var isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
+  var isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
+  var widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
+  var tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
+  var targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
+  var isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
+  var tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
+  var pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
+  var insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
+  var insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
+  var isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+  var isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
+  var isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
+  var tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
+  var isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
+  var allowControls = pluginConfig.allowControls;
+  var stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
+  var dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
+  var dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
+  var isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+    isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
+    editorView: editorView,
+    tableNode: tableNode,
+    mountPoint: popupsMountPoint,
+    targetCellPosition: targetCellPosition,
+    scrollableElement: popupsScrollableElement,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    isContextualMenuOpen: isContextualMenuOpen,
+    stickyHeader: stickyHeader,
+    tableWrapper: tableWrapperTarget,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+  }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
+    tableNode: tableNode,
+    tableRef: tableRef,
+    insertColumnButtonIndex: insertColumnButtonIndex,
+    insertRowButtonIndex: insertRowButtonIndex,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isDragAndDropEnabled: isDragAndDropEnabled,
+    isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+    editorView: editorView,
+    mountPoint: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    hasStickyHeaders: stickyHeader && stickyHeader.sticky,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    getEditorContainerWidth: defaultGetEditorContainerWidth,
+    getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+    isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
+    api: api,
+    isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
+  }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
+    editorView: editorView,
+    mountPoint: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    targetCellPosition: targetCellPosition,
+    isOpen: Boolean(isContextualMenuOpen) && !isResizing,
+    pluginConfig: pluginConfig,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    getEditorContainerWidth: defaultGetEditorContainerWidth,
+    getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
+    isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+    api: api
+  }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
+    editorView: editorView,
+    mountPoint: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    tableRef: tableRef,
+    tableNode: tableNode,
+    targetCellPosition: targetCellPosition,
+    direction: dragMenuDirection,
+    index: dragMenuIndex,
+    isOpen: !!isDragMenuOpen && !isResizing,
+    getEditorContainerWidth: defaultGetEditorContainerWidth,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    stickyHeaders: stickyHeader,
+    pluginConfig: pluginConfig,
+    isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+    getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+    ariaNotifyPlugin: ariaNotifyPlugin,
+    api: api,
+    isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
+  }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
+    editorView: editorView,
+    selection: editorView.state.selection,
+    tableRef: tableRef,
+    mountPoint: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    stickyHeaders: stickyHeader,
+    isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    api: api
+  }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
+    target: resizingTableRef,
+    content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
+    alignX: 'center',
+    alignY: 'bottom',
+    stick: true,
+    forcePlacement: true,
+    zIndex: akEditorFloatingPanelZIndex,
+    offset: [0, 10]
+  }));
+};
+export var ContentComponent = function ContentComponent(_ref2) {
+  var _api$featureFlags;
+  var api = _ref2.api,
+    editorView = _ref2.editorView,
+    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+    options = _ref2.options,
+    popupsMountPoint = _ref2.popupsMountPoint,
+    popupsBoundariesElement = _ref2.popupsBoundariesElement,
+    popupsScrollableElement = _ref2.popupsScrollableElement,
+    defaultGetEditorContainerWidth = _ref2.defaultGetEditorContainerWidth,
+    defaultGetEditorFeatureFlags = _ref2.defaultGetEditorFeatureFlags;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    component: ACTION_SUBJECT.TABLES_PLUGIN,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    fallbackComponent: null
+  }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+    featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
+    isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
+    api: api
+  }), /*#__PURE__*/React.createElement(ContentComponentInternal, {
+    api: api,
+    editorView: editorView,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    options: options,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
+    defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
+  }));
+};

package/dist/esm/ui/toolbar.js

@@ -486,6 +486,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
             onBlur: clearHoverSelection()
           };
         };
+        var shouldGroupWithoutSeparators = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6');
         return {
           title: toolbarTitle,
           getDomRef: getDomRef,
@@ -496,12 +497,15 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           },
           zIndex: akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(alignmentMenu), [separator(alignmentMenu.length === 0)], _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), _toConsumableArray(colorPicker), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
+          items: [menu].concat(_toConsumableArray(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []), _toConsumableArray(alignmentMenu), _toConsumableArray(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []), _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), _toConsumableArray(colorPicker), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, copyButton, {
             type: 'separator'
-          }, deleteButton] : [{
+          }, deleteButton] : [shouldGroupWithoutSeparators && {
+            type: 'separator',
+            fullHeight: true
+          }, {
             type: 'overflow-dropdown',
             dropdownWidth: 220,
             options: [{
@@ -631,7 +635,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
       disabled: !wouldChange
     });
   }
-  if (items.length !== 0) {
+  if (items.length !== 0 && (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6'))) {
     items.push({
       type: 'separator'
     });

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

@@ -8,6 +8,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { RowStickyState } from '../pm-plugins/sticky-headers/types';
 import type { TablePlugin } from '../tablePluginType';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -33,10 +34,16 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
         };
     };
 };
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'isDragAndDropEnabled' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
+    resizingTableRef?: HTMLTableElement;
+    resizingTableLocalId?: string;
+    stickyHeader?: RowStickyState;
+    dragMenuDirection?: TableDirection;
+    dragMenuIndex?: number;
+    isDragMenuOpen?: boolean;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
 export type AlignmentOptions = 'center' | 'align-start';

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { ExtractInjectionAPI, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TablePlugin, TablePluginOptions } from '../tablePluginType';
+export type ContentComponentProps = {
+    api: ExtractInjectionAPI<TablePlugin> | undefined;
+    editorView: EditorView;
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
+    options?: TablePluginOptions;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    defaultGetEditorContainerWidth: GetEditorContainerWidth;
+    defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
+};
+export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;

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

@@ -8,6 +8,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { RowStickyState } from '../pm-plugins/sticky-headers/types';
 import type { TablePlugin } from '../tablePluginType';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -33,10 +34,16 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
         };
     };
 };
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'isDragAndDropEnabled' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
+    resizingTableRef?: HTMLTableElement;
+    resizingTableLocalId?: string;
+    stickyHeader?: RowStickyState;
+    dragMenuDirection?: TableDirection;
+    dragMenuIndex?: number;
+    isDragMenuOpen?: boolean;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
 export type AlignmentOptions = 'center' | 'align-start';