@atlaskit/editor-plugin-table 7.6.10 → 7.6.12

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 7.6.12
+
+### Patch Changes
+
+- [#88299](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88299) [`5a05e6793651`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5a05e6793651) - [ux] fix clickable zone issue
+- [#88007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88007) [`966ef2d91a91`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/966ef2d91a91) - Disable table resizing in live view mode
+- Updated dependencies
+
+## 7.6.11
+
+### Patch Changes
+
+- [#80728](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80728) [`aac7ad9bb32d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aac7ad9bb32d) - [ux] The table's floating toolbar dropdown menu a11y annnouncement.
+
 ## 7.6.10
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -36,6 +36,9 @@
         {
             "path": "../../editor-plugin-content-insertion/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../editor-plugin-editor-viewmode/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../editor-plugin-guideline/afm-cc/tsconfig.json"
         },

package/dist/cjs/nodeviews/TableContainer.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -117,6 +118,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
 
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = isTableScalingEnabled ? containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
@@ -159,7 +162,10 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     },
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, tableResizerProps, /*#__PURE__*/_react.default.createElement(InnerContainer, {
+  }, (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? /*#__PURE__*/_react.default.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children) : /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, tableResizerProps, /*#__PURE__*/_react.default.createElement(InnerContainer, {
     className: className,
     node: node
   }, children))));

package/dist/cjs/pm-plugins/main.js

@@ -224,7 +224,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         // @see https://github.com/ProseMirror/prosemirror-view/commit/33fe4a8b01584f6b4103c279033dcd33e8047b95
         if (_utils.browser.chrome && event.target) {
           var targetClassList = event.target.classList;
-          if (targetClassList.contains(_types.TableCssClassName.CONTROLS_BUTTON) || targetClassList.contains(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON)) {
+          if (targetClassList.contains(_types.TableCssClassName.CONTROLS_BUTTON) || targetClassList.contains(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON) || targetClassList.contains(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE)) {
             return true;
           }
         }

package/dist/cjs/toolbar.js

@@ -22,6 +22,7 @@ var _utils3 = require("@atlaskit/editor-tables/utils");
 var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _commandsWithAnalytics = require("./commands-with-analytics");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
@@ -38,31 +39,44 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
+  var optionItem = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
   var options = [{
     id: 'editor.table.headerRow',
     title: formatMessage(_messages.tableMessages.headerRow),
     onClick: (0, _commandsWithAnalytics.toggleHeaderRowWithAnalytics)(editorAnalyticsAPI),
     selected: state.isHeaderRowEnabled,
-    hidden: !config.allowHeaderRow
+    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
+    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
+    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
+    hidden: !config.allowCollapse,
+    domItemOptions: {
+      type: optionItem
+    }
   }];
   if (state.isDragAndDropEnabled) {
     return {

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

@@ -169,6 +169,15 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       alignSelf: isColumn ? 'none' : 'center',
       zIndex: isColumn ? '-1' : 'auto'
     },
+    onMouseUp: function onMouseUp(e) {
+      // should toggle menu if current drag menu open.
+      // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
+      // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
+      editorView.focus();
+      if (isDragMenuOpen) {
+        toggleDragMenu && toggleDragMenu('mouse', e);
+      }
+    },
     onClick: onClick
   }), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -102,6 +103,9 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   const tableWidth = getTableContainerWidth(node);
+  const {
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
 
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
@@ -145,7 +149,10 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
+  }, (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? /*#__PURE__*/React.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children) : /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
     node: node
   }, children))));

package/dist/es2019/pm-plugins/main.js

@@ -217,7 +217,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         // @see https://github.com/ProseMirror/prosemirror-view/commit/33fe4a8b01584f6b4103c279033dcd33e8047b95
         if (browser.chrome && event.target) {
           const targetClassList = event.target.classList;
-          if (targetClassList.contains(ClassName.CONTROLS_BUTTON) || targetClassList.contains(ClassName.CONTEXTUAL_MENU_BUTTON)) {
+          if (targetClassList.contains(ClassName.CONTROLS_BUTTON) || targetClassList.contains(ClassName.CONTEXTUAL_MENU_BUTTON) || targetClassList.contains(ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE)) {
             return true;
           }
         }

package/dist/es2019/toolbar.js

@@ -14,6 +14,7 @@ import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType,
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -27,31 +28,44 @@ import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexe
 export const getToolbarMenuConfig = (config, state, {
   formatMessage
 }, editorAnalyticsAPI) => {
+  const optionItem = getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
   const options = [{
     id: 'editor.table.headerRow',
     title: formatMessage(messages.headerRow),
     onClick: toggleHeaderRowWithAnalytics(editorAnalyticsAPI),
     selected: state.isHeaderRowEnabled,
-    hidden: !config.allowHeaderRow
+    hidden: !config.allowHeaderRow,
+    domItemOptions: {
+      type: optionItem
+    }
   }, {
     id: 'editor.table.headerColumn',
     title: formatMessage(messages.headerColumn),
     onClick: toggleHeaderColumnWithAnalytics(editorAnalyticsAPI),
     selected: state.isHeaderColumnEnabled,
-    hidden: !config.allowHeaderColumn
+    hidden: !config.allowHeaderColumn,
+    domItemOptions: {
+      type: optionItem
+    }
   }, {
     id: 'editor.table.numberedColumn',
     title: formatMessage(messages.numberedColumn),
     onClick: toggleNumberColumnWithAnalytics(editorAnalyticsAPI),
     selected: state.isNumberColumnEnabled,
-    hidden: !config.allowNumberColumn
+    hidden: !config.allowNumberColumn,
+    domItemOptions: {
+      type: optionItem
+    }
   }, {
     id: 'editor.table.collapseTable',
     title: formatMessage(messages.collapseTable),
     onClick: wrapTableInExpandWithAnalytics(editorAnalyticsAPI),
     selected: !!state.isTableCollapsed,
     disabled: !state.canCollapseTable,
-    hidden: !config.allowCollapse
+    hidden: !config.allowCollapse,
+    domItemOptions: {
+      type: optionItem
+    }
   }];
   if (state.isDragAndDropEnabled) {
     return {

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

@@ -161,6 +161,15 @@ const DragHandleComponent = ({
       alignSelf: isColumn ? 'none' : 'center',
       zIndex: isColumn ? '-1' : 'auto'
     },
+    onMouseUp: e => {
+      // should toggle menu if current drag menu open.
+      // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
+      // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
+      editorView.focus();
+      if (isDragMenuOpen) {
+        toggleDragMenu && toggleDragMenu('mouse', e);
+      }
+    },
     onClick: onClick
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",

package/dist/esm/nodeviews/TableContainer.js

@@ -4,6 +4,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -107,6 +108,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   var tableWidth = getTableContainerWidth(node);
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
 
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
@@ -149,7 +152,10 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
+  }, (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? /*#__PURE__*/React.createElement(InnerContainer, {
+    className: className,
+    node: node
+  }, children) : /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
     node: node
   }, children))));

package/dist/esm/pm-plugins/main.js

@@ -217,7 +217,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         // @see https://github.com/ProseMirror/prosemirror-view/commit/33fe4a8b01584f6b4103c279033dcd33e8047b95
         if (browser.chrome && event.target) {
           var targetClassList = event.target.classList;
-          if (targetClassList.contains(ClassName.CONTROLS_BUTTON) || targetClassList.contains(ClassName.CONTEXTUAL_MENU_BUTTON)) {
+          if (targetClassList.contains(ClassName.CONTROLS_BUTTON) || targetClassList.contains(ClassName.CONTEXTUAL_MENU_BUTTON) || targetClassList.contains(ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE)) {
             return true;
           }
         }

package/dist/esm/toolbar.js

@@ -15,6 +15,7 @@ import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType,
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -27,31 +28,44 @@ import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
+  var optionItem = getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
   var options = [{
     id: 'editor.table.headerRow',
     title: formatMessage(messages.headerRow),
     onClick: toggleHeaderRowWithAnalytics(editorAnalyticsAPI),
     selected: state.isHeaderRowEnabled,
-    hidden: !config.allowHeaderRow
+    hidden: !config.allowHeaderRow,
+    domItemOptions: {
+      type: optionItem
+    }
   }, {
     id: 'editor.table.headerColumn',
     title: formatMessage(messages.headerColumn),
     onClick: toggleHeaderColumnWithAnalytics(editorAnalyticsAPI),
     selected: state.isHeaderColumnEnabled,
-    hidden: !config.allowHeaderColumn
+    hidden: !config.allowHeaderColumn,
+    domItemOptions: {
+      type: optionItem
+    }
   }, {
     id: 'editor.table.numberedColumn',
     title: formatMessage(messages.numberedColumn),
     onClick: toggleNumberColumnWithAnalytics(editorAnalyticsAPI),
     selected: state.isNumberColumnEnabled,
-    hidden: !config.allowNumberColumn
+    hidden: !config.allowNumberColumn,
+    domItemOptions: {
+      type: optionItem
+    }
   }, {
     id: 'editor.table.collapseTable',
     title: formatMessage(messages.collapseTable),
     onClick: wrapTableInExpandWithAnalytics(editorAnalyticsAPI),
     selected: !!state.isTableCollapsed,
     disabled: !state.canCollapseTable,
-    hidden: !config.allowCollapse
+    hidden: !config.allowCollapse,
+    domItemOptions: {
+      type: optionItem
+    }
   }];
   if (state.isDragAndDropEnabled) {
     return {

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

@@ -159,6 +159,15 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
       alignSelf: isColumn ? 'none' : 'center',
       zIndex: isColumn ? '-1' : 'auto'
     },
+    onMouseUp: function onMouseUp(e) {
+      // should toggle menu if current drag menu open.
+      // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
+      // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
+      editorView.focus();
+      if (isDragMenuOpen) {
+        toggleDragMenu && toggleDragMenu('mouse', e);
+      }
+    },
     onClick: onClick
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",

package/dist/types/plugin.d.ts

@@ -4,6 +4,7 @@ import type { Command, EditorCommand, GetEditorFeatureFlags, NextEditorPlugin, O
 import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
@@ -42,7 +43,8 @@ export type TablePlugin = NextEditorPlugin<'table', {
         WidthPlugin,
         GuidelinePlugin,
         SelectionPlugin,
-        OptionalPlugin<MediaPlugin>
+        OptionalPlugin<MediaPlugin>,
+        OptionalPlugin<EditorViewModePlugin>
     ];
 }>;
 /**

package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -87,7 +87,51 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
             dependencies: any;
             sharedState: any;
             actions: any;
-        }, any>>];
+        }, any>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"editorViewMode", {
+            sharedState: import("@atlaskit/editor-plugin-editor-viewmode").EditorViewModePluginState | null;
+            dependencies: [import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"collabEdit", {
+                pluginConfiguration: import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions;
+                dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                    pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                    sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+                }, import("@atlaskit/editor-common/types").FeatureFlags>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+                    pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+                    sharedState: {
+                        createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                        attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                        performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+                    };
+                    dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                        pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                        sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+                    }, import("@atlaskit/editor-common/types").FeatureFlags>>];
+                    actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
+                }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>];
+                sharedState: import("@atlaskit/editor-plugin-collab-edit").CollabEditPluginSharedState;
+                actions: {
+                    getAvatarColor: (str: string) => {
+                        index: number;
+                        color: import("@atlaskit/editor-common/collab").Color;
+                    };
+                    addInlineCommentMark: (props: {
+                        from: number;
+                        to: number;
+                        mark: import("prosemirror-model").Mark;
+                    }) => boolean;
+                };
+            }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];
+            pluginConfiguration?: {
+                mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
+            } | undefined;
+            commands: {
+                updateViewMode: (mode: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode) => import("@atlaskit/editor-common/types").EditorCommand;
+            };
+            actions: {
+                applyViewModeStepAt: (tr: import("prosemirror-state").Transaction) => boolean;
+            };
+        }, {
+            mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
+        } | undefined>>];
     }, import("../../../plugin").TablePluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
         dependencies: [];
         actions: {
@@ -145,6 +189,50 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
         dependencies: any;
         sharedState: any;
         actions: any;
-    }, any>>]> | undefined;
+    }, any>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"editorViewMode", {
+        sharedState: import("@atlaskit/editor-plugin-editor-viewmode").EditorViewModePluginState | null;
+        dependencies: [import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"collabEdit", {
+            pluginConfiguration: import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions;
+            dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+            }, import("@atlaskit/editor-common/types").FeatureFlags>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+                pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+                sharedState: {
+                    createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                    attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                    performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+                };
+                dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                    pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
+                    sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
+                }, import("@atlaskit/editor-common/types").FeatureFlags>>];
+                actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
+            }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>];
+            sharedState: import("@atlaskit/editor-plugin-collab-edit").CollabEditPluginSharedState;
+            actions: {
+                getAvatarColor: (str: string) => {
+                    index: number;
+                    color: import("@atlaskit/editor-common/collab").Color;
+                };
+                addInlineCommentMark: (props: {
+                    from: number;
+                    to: number;
+                    mark: import("prosemirror-model").Mark;
+                }) => boolean;
+            };
+        }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];
+        pluginConfiguration?: {
+            mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
+        } | undefined;
+        commands: {
+            updateViewMode: (mode: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode) => import("@atlaskit/editor-common/types").EditorCommand;
+        };
+        actions: {
+            applyViewModeStepAt: (tr: import("prosemirror-state").Transaction) => boolean;
+        };
+    }, {
+        mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
+    } | undefined>>]> | undefined;
 }) => JSX.Element;
 export default ColumnControls;