@atlaskit/editor-plugin-table 18.1.1 → 18.1.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-table
 
+## 18.1.2
+
+### Patch Changes
+
+- [`0d04e250bdf4b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d04e250bdf4b) -
+  [ux] Making submenus for media (color/size) and table (background color) consistent with ADS and
+  fixing incorrect gate mocking in editor-plugin-ai-tests
+- Updated dependencies
+
 ## 18.1.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/table.js

@@ -21,7 +21,6 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _createPluginConfig = require("../pm-plugins/create-plugin-config");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _tableWidth = require("../pm-plugins/table-width");
@@ -148,16 +147,10 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
 
         // Store the current selection state if there is a visible selection
         // This lets us restore it after DOM changes
-        if ((0, _expValEquals.expValEquals)('platform_editor_fix_cursor_flickering', 'isEnabled', true)) {
-          var selection = this.view.state.selection;
-          var tablePos = this.getPos();
-          if (selection.empty && tablePos && _state.TextSelection.near(this.view.state.doc.resolve(tablePos)).from === selection.from) {
-            selectionBookmark = this.view.state.selection.getBookmark();
-          }
-        } else {
-          if (this.view.state.selection.visible) {
-            selectionBookmark = this.view.state.selection.getBookmark();
-          }
+        var selection = this.view.state.selection;
+        var tablePos = this.getPos();
+        if (selection.empty && tablePos && _state.TextSelection.near(this.view.state.doc.resolve(tablePos)).from === selection.from) {
+          selectionBookmark = this.view.state.selection.getBookmark();
         }
         if (this.dom) {
           this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(this.node.attrs.localId));
@@ -181,34 +174,27 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
           // - Mutations were ignored during the table move
           // - The bookmarked selection is different from the current selection.
           if (selectionBookmark && mutationsIgnored) {
+            var _TextSelection$findFr;
             var resolvedSelection = selectionBookmark.resolve(_this2.view.state.tr.doc);
-            if ((0, _expValEquals.expValEquals)('platform_editor_fix_cursor_flickering', 'isEnabled', true)) {
-              var _TextSelection$findFr;
-              /**
-               * This handles a very specific case only -> insertion by the user of a new
-               * table
-               * Since it's behind a RAF it's possible the user has clicked elsewhere or
-               * it affects collaborative users (which selection changes shouldn't ever)
-               *
-               * This ensures that the selectionBookmark *before* is inside the first
-               * position in the table and that after it is the text position directly
-               * before the table
-               * Ideally we want to remove this RAF entirely but that would require removing
-               * the DOM manipulation and is a more complex effort
-               */
-              if (!resolvedSelection.eq(_this2.view.state.selection) && resolvedSelection.empty && // Ensure that the *next* valid text position matches the first position
-              // in the table
-              (_TextSelection$findFr = _state.TextSelection.findFrom(_this2.view.state.doc.resolve(_this2.view.state.selection.from + 1), 1, true)) !== null && _TextSelection$findFr !== void 0 && _TextSelection$findFr.eq(resolvedSelection)) {
-                var tr = _this2.view.state.tr.setSelection(resolvedSelection);
-                tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
-                _this2.view.dispatch(tr);
-              }
-            } else {
-              if (!resolvedSelection.eq(_this2.view.state.selection)) {
-                var _tr = _this2.view.state.tr.setSelection(resolvedSelection);
-                _tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
-                _this2.view.dispatch(_tr);
-              }
+
+            /**
+             * This handles a very specific case only -> insertion by the user of a new
+             * table
+             * Since it's behind a RAF it's possible the user has clicked elsewhere or
+             * it affects collaborative users (which selection changes shouldn't ever)
+             *
+             * This ensures that the selectionBookmark *before* is inside the first
+             * position in the table and that after it is the text position directly
+             * before the table
+             * Ideally we want to remove this RAF entirely but that would require removing
+             * the DOM manipulation and is a more complex effort
+             */
+            if (!resolvedSelection.eq(_this2.view.state.selection) && resolvedSelection.empty && // Ensure that the *next* valid text position matches the first position
+            // in the table
+            (_TextSelection$findFr = _state.TextSelection.findFrom(_this2.view.state.doc.resolve(_this2.view.state.selection.from + 1), 1, true)) !== null && _TextSelection$findFr !== void 0 && _TextSelection$findFr.eq(resolvedSelection)) {
+              var tr = _this2.view.state.tr.setSelection(resolvedSelection);
+              tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
+              _this2.view.dispatch(tr);
             }
           }
         });

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -60,7 +60,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
+var arrowsList = new Set(!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['ArrowRight', 'ArrowLeft'] : ['ArrowRight']);
 var elementBeforeIconStyles = (0, _primitives.xcss)({
   marginRight: 'space.negative.075',
   display: 'flex'
@@ -587,13 +587,21 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           break;
         case 'background':
           {
-            // This is called twice.
-            // 1st time when user chooses the background color item.
-            // 2nd when color has been chosen from color palette.
-            // here we are handling the 1st call relying on the isSubmenuOpen state value
-            if (isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen) {
-              _this.setState({
-                isSubmenuOpen: true
+            if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+              // This is called twice.
+              // 1st time when user chooses the background color item.
+              // 2nd when color has been chosen from color palette.
+              // here we are handling the 1st call relying on the isSubmenuOpen state value
+              if (isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen) {
+                _this.setState({
+                  isSubmenuOpen: true
+                });
+              }
+            } else {
+              _this.setState(function (prevState) {
+                return {
+                  isSubmenuOpen: !prevState.isSubmenuOpen
+                };
               });
             }
             break;
@@ -628,6 +636,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
               // preventing default behavior for avoiding cursor jump to next/previous table column
               // when left/right arrow pressed.
               event.preventDefault();
+              if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+                _this.setState({
+                  isSubmenuOpen: true
+                });
+                return;
+              }
             }
             (0, _commands.toggleContextualMenu)()(state, dispatch);
             _this.setState({
@@ -657,11 +671,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         state = _this$props11$editorV.state,
         dispatch = _this$props11$editorV.dispatch,
         selectionRect = _this$props11.selectionRect;
-      if (item.value.name === 'background') {
-        if (!_this.state.isSubmenuOpen) {
-          _this.setState({
-            isSubmenuOpen: true
-          });
+      if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'background') {
+          if (!_this.state.isSubmenuOpen) {
+            _this.setState({
+              isSubmenuOpen: true
+            });
+          }
         }
       }
       if (item.value.name === 'delete_column') {
@@ -681,8 +697,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _this$props$editorVie = _this.props.editorView,
         state = _this$props$editorVie.state,
         dispatch = _this$props$editorVie.dispatch;
-      if (item.value.name === 'background') {
-        _this.closeSubmenu();
+      if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'background') {
+          _this.closeSubmenu();
+        }
       }
       if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
         (0, _commands.clearHoverSelection)()(state, dispatch);
@@ -698,11 +716,24 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     (0, _defineProperty2.default)(_this, "setColor", function (color) {
       var _this$props12 = _this.props,
         editorView = _this$props12.editorView,
-        editorAnalyticsAPI = _this$props12.editorAnalyticsAPI;
+        editorAnalyticsAPI = _this$props12.editorAnalyticsAPI,
+        isCellMenuOpenByKeyboard = _this$props12.isCellMenuOpenByKeyboard;
       var state = editorView.state,
-        dispatch = editorView.dispatch;
+        dispatch = editorView.dispatch,
+        dom = editorView.dom;
       (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
-      _this.toggleOpen();
+      if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        _this.toggleOpen();
+      } else {
+        (0, _commands.toggleContextualMenu)()(state, dispatch);
+        _this.setState({
+          isSubmenuOpen: false
+        });
+        if (isCellMenuOpenByKeyboard) {
+          (0, _commands.setFocusToCellMenu)(false)(state, dispatch);
+          dom.focus();
+        }
+      }
     });
     return _this;
   }
@@ -751,7 +782,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         api: api
       }, (0, _react2.jsx)("div", {
         "data-testid": "table-cell-contextual-menu",
-        onMouseLeave: this.closeSubmenu,
+        onMouseLeave: (0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? undefined : this.closeSubmenu,
         onBlur: (0, _expValEquals.expValEquals)('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.closeSubmenu : undefined,
         ref: this.dropdownMenuRef
       }, (0, _react2.jsx)(_uiMenu.DropdownMenu

package/dist/es2019/nodeviews/table.js

@@ -7,7 +7,6 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
@@ -120,18 +119,12 @@ export default class TableView extends ReactNodeView {
 
       // Store the current selection state if there is a visible selection
       // This lets us restore it after DOM changes
-      if (expValEquals('platform_editor_fix_cursor_flickering', 'isEnabled', true)) {
-        const {
-          selection
-        } = this.view.state;
-        const tablePos = this.getPos();
-        if (selection.empty && tablePos && TextSelection.near(this.view.state.doc.resolve(tablePos)).from === selection.from) {
-          selectionBookmark = this.view.state.selection.getBookmark();
-        }
-      } else {
-        if (this.view.state.selection.visible) {
-          selectionBookmark = this.view.state.selection.getBookmark();
-        }
+      const {
+        selection
+      } = this.view.state;
+      const tablePos = this.getPos();
+      if (selection.empty && tablePos && TextSelection.near(this.view.state.doc.resolve(tablePos)).from === selection.from) {
+        selectionBookmark = this.view.state.selection.getBookmark();
       }
       if (this.dom) {
         this.dom.setAttribute('data-ssr-placeholder', `table-nodeview-${this.node.attrs.localId}`);
@@ -155,34 +148,27 @@ export default class TableView extends ReactNodeView {
         // - Mutations were ignored during the table move
         // - The bookmarked selection is different from the current selection.
         if (selectionBookmark && mutationsIgnored) {
+          var _TextSelection$findFr;
           const resolvedSelection = selectionBookmark.resolve(this.view.state.tr.doc);
-          if (expValEquals('platform_editor_fix_cursor_flickering', 'isEnabled', true)) {
-            var _TextSelection$findFr;
-            /**
-             * This handles a very specific case only -> insertion by the user of a new
-             * table
-             * Since it's behind a RAF it's possible the user has clicked elsewhere or
-             * it affects collaborative users (which selection changes shouldn't ever)
-             *
-             * This ensures that the selectionBookmark *before* is inside the first
-             * position in the table and that after it is the text position directly
-             * before the table
-             * Ideally we want to remove this RAF entirely but that would require removing
-             * the DOM manipulation and is a more complex effort
-             */
-            if (!resolvedSelection.eq(this.view.state.selection) && resolvedSelection.empty && // Ensure that the *next* valid text position matches the first position
-            // in the table
-            (_TextSelection$findFr = TextSelection.findFrom(this.view.state.doc.resolve(this.view.state.selection.from + 1), 1, true)) !== null && _TextSelection$findFr !== void 0 && _TextSelection$findFr.eq(resolvedSelection)) {
-              const tr = this.view.state.tr.setSelection(resolvedSelection);
-              tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
-              this.view.dispatch(tr);
-            }
-          } else {
-            if (!resolvedSelection.eq(this.view.state.selection)) {
-              const tr = this.view.state.tr.setSelection(resolvedSelection);
-              tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
-              this.view.dispatch(tr);
-            }
+
+          /**
+           * This handles a very specific case only -> insertion by the user of a new
+           * table
+           * Since it's behind a RAF it's possible the user has clicked elsewhere or
+           * it affects collaborative users (which selection changes shouldn't ever)
+           *
+           * This ensures that the selectionBookmark *before* is inside the first
+           * position in the table and that after it is the text position directly
+           * before the table
+           * Ideally we want to remove this RAF entirely but that would require removing
+           * the DOM manipulation and is a more complex effort
+           */
+          if (!resolvedSelection.eq(this.view.state.selection) && resolvedSelection.empty && // Ensure that the *next* valid text position matches the first position
+          // in the table
+          (_TextSelection$findFr = TextSelection.findFrom(this.view.state.doc.resolve(this.view.state.selection.from + 1), 1, true)) !== null && _TextSelection$findFr !== void 0 && _TextSelection$findFr.eq(resolvedSelection)) {
+            const tr = this.view.state.tr.setSelection(resolvedSelection);
+            tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
+            this.view.dispatch(tr);
           }
         }
       });

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -44,7 +44,7 @@ import { getMergedCellsPositions } from '../../pm-plugins/utils/table';
 import { TableCssClassName as ClassName } from '../../types';
 import { colorPalletteColumns, contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 import { cellColourPreviewStyles } from './styles';
-const arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
+const arrowsList = new Set(!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['ArrowRight', 'ArrowLeft'] : ['ArrowRight']);
 const elementBeforeIconStyles = xcss({
   marginRight: 'space.negative.075',
   display: 'flex'
@@ -633,14 +633,20 @@ export class ContextualMenu extends Component {
           break;
         case 'background':
           {
-            // This is called twice.
-            // 1st time when user chooses the background color item.
-            // 2nd when color has been chosen from color palette.
-            // here we are handling the 1st call relying on the isSubmenuOpen state value
-            if (isCellMenuOpenByKeyboard && !this.state.isSubmenuOpen) {
-              this.setState({
-                isSubmenuOpen: true
-              });
+            if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+              // This is called twice.
+              // 1st time when user chooses the background color item.
+              // 2nd when color has been chosen from color palette.
+              // here we are handling the 1st call relying on the isSubmenuOpen state value
+              if (isCellMenuOpenByKeyboard && !this.state.isSubmenuOpen) {
+                this.setState({
+                  isSubmenuOpen: true
+                });
+              }
+            } else {
+              this.setState(prevState => ({
+                isSubmenuOpen: !prevState.isSubmenuOpen
+              }));
             }
             break;
           }
@@ -680,6 +686,12 @@ export class ContextualMenu extends Component {
               // preventing default behavior for avoiding cursor jump to next/previous table column
               // when left/right arrow pressed.
               event.preventDefault();
+              if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+                this.setState({
+                  isSubmenuOpen: true
+                });
+                return;
+              }
             }
             toggleContextualMenu()(state, dispatch);
             this.setState({
@@ -712,11 +724,13 @@ export class ContextualMenu extends Component {
         },
         selectionRect
       } = this.props;
-      if (item.value.name === 'background') {
-        if (!this.state.isSubmenuOpen) {
-          this.setState({
-            isSubmenuOpen: true
-          });
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'background') {
+          if (!this.state.isSubmenuOpen) {
+            this.setState({
+              isSubmenuOpen: true
+            });
+          }
         }
       }
       if (item.value.name === 'delete_column') {
@@ -738,8 +752,10 @@ export class ContextualMenu extends Component {
         state,
         dispatch
       } = this.props.editorView;
-      if (item.value.name === 'background') {
-        this.closeSubmenu();
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'background') {
+          this.closeSubmenu();
+        }
       }
       if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
         clearHoverSelection()(state, dispatch);
@@ -755,14 +771,27 @@ export class ContextualMenu extends Component {
     _defineProperty(this, "setColor", color => {
       const {
         editorView,
-        editorAnalyticsAPI
+        editorAnalyticsAPI,
+        isCellMenuOpenByKeyboard
       } = this.props;
       const {
         state,
-        dispatch
+        dispatch,
+        dom
       } = editorView;
       setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
-      this.toggleOpen();
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        this.toggleOpen();
+      } else {
+        toggleContextualMenu()(state, dispatch);
+        this.setState({
+          isSubmenuOpen: false
+        });
+        if (isCellMenuOpenByKeyboard) {
+          setFocusToCellMenu(false)(state, dispatch);
+          dom.focus();
+        }
+      }
     });
   }
   componentDidMount() {
@@ -809,7 +838,7 @@ export class ContextualMenu extends Component {
       api: api
     }, jsx("div", {
       "data-testid": "table-cell-contextual-menu",
-      onMouseLeave: this.closeSubmenu,
+      onMouseLeave: expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? undefined : this.closeSubmenu,
       onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.closeSubmenu : undefined,
       ref: this.dropdownMenuRef
     }, jsx(DropdownMenu

package/dist/esm/nodeviews/table.js

@@ -17,7 +17,6 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
@@ -141,16 +140,10 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 
         // Store the current selection state if there is a visible selection
         // This lets us restore it after DOM changes
-        if (expValEquals('platform_editor_fix_cursor_flickering', 'isEnabled', true)) {
-          var selection = this.view.state.selection;
-          var tablePos = this.getPos();
-          if (selection.empty && tablePos && TextSelection.near(this.view.state.doc.resolve(tablePos)).from === selection.from) {
-            selectionBookmark = this.view.state.selection.getBookmark();
-          }
-        } else {
-          if (this.view.state.selection.visible) {
-            selectionBookmark = this.view.state.selection.getBookmark();
-          }
+        var selection = this.view.state.selection;
+        var tablePos = this.getPos();
+        if (selection.empty && tablePos && TextSelection.near(this.view.state.doc.resolve(tablePos)).from === selection.from) {
+          selectionBookmark = this.view.state.selection.getBookmark();
         }
         if (this.dom) {
           this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(this.node.attrs.localId));
@@ -174,34 +167,27 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           // - Mutations were ignored during the table move
           // - The bookmarked selection is different from the current selection.
           if (selectionBookmark && mutationsIgnored) {
+            var _TextSelection$findFr;
             var resolvedSelection = selectionBookmark.resolve(_this2.view.state.tr.doc);
-            if (expValEquals('platform_editor_fix_cursor_flickering', 'isEnabled', true)) {
-              var _TextSelection$findFr;
-              /**
-               * This handles a very specific case only -> insertion by the user of a new
-               * table
-               * Since it's behind a RAF it's possible the user has clicked elsewhere or
-               * it affects collaborative users (which selection changes shouldn't ever)
-               *
-               * This ensures that the selectionBookmark *before* is inside the first
-               * position in the table and that after it is the text position directly
-               * before the table
-               * Ideally we want to remove this RAF entirely but that would require removing
-               * the DOM manipulation and is a more complex effort
-               */
-              if (!resolvedSelection.eq(_this2.view.state.selection) && resolvedSelection.empty && // Ensure that the *next* valid text position matches the first position
-              // in the table
-              (_TextSelection$findFr = TextSelection.findFrom(_this2.view.state.doc.resolve(_this2.view.state.selection.from + 1), 1, true)) !== null && _TextSelection$findFr !== void 0 && _TextSelection$findFr.eq(resolvedSelection)) {
-                var tr = _this2.view.state.tr.setSelection(resolvedSelection);
-                tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
-                _this2.view.dispatch(tr);
-              }
-            } else {
-              if (!resolvedSelection.eq(_this2.view.state.selection)) {
-                var _tr = _this2.view.state.tr.setSelection(resolvedSelection);
-                _tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
-                _this2.view.dispatch(_tr);
-              }
+
+            /**
+             * This handles a very specific case only -> insertion by the user of a new
+             * table
+             * Since it's behind a RAF it's possible the user has clicked elsewhere or
+             * it affects collaborative users (which selection changes shouldn't ever)
+             *
+             * This ensures that the selectionBookmark *before* is inside the first
+             * position in the table and that after it is the text position directly
+             * before the table
+             * Ideally we want to remove this RAF entirely but that would require removing
+             * the DOM manipulation and is a more complex effort
+             */
+            if (!resolvedSelection.eq(_this2.view.state.selection) && resolvedSelection.empty && // Ensure that the *next* valid text position matches the first position
+            // in the table
+            (_TextSelection$findFr = TextSelection.findFrom(_this2.view.state.doc.resolve(_this2.view.state.selection.from + 1), 1, true)) !== null && _TextSelection$findFr !== void 0 && _TextSelection$findFr.eq(resolvedSelection)) {
+              var tr = _this2.view.state.tr.setSelection(resolvedSelection);
+              tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
+              _this2.view.dispatch(tr);
             }
           }
         });

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -54,7 +54,7 @@ import { getMergedCellsPositions } from '../../pm-plugins/utils/table';
 import { TableCssClassName as ClassName } from '../../types';
 import { colorPalletteColumns, contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 import { cellColourPreviewStyles } from './styles';
-var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
+var arrowsList = new Set(!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['ArrowRight', 'ArrowLeft'] : ['ArrowRight']);
 var elementBeforeIconStyles = xcss({
   marginRight: 'space.negative.075',
   display: 'flex'
@@ -581,13 +581,21 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           break;
         case 'background':
           {
-            // This is called twice.
-            // 1st time when user chooses the background color item.
-            // 2nd when color has been chosen from color palette.
-            // here we are handling the 1st call relying on the isSubmenuOpen state value
-            if (isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen) {
-              _this.setState({
-                isSubmenuOpen: true
+            if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+              // This is called twice.
+              // 1st time when user chooses the background color item.
+              // 2nd when color has been chosen from color palette.
+              // here we are handling the 1st call relying on the isSubmenuOpen state value
+              if (isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen) {
+                _this.setState({
+                  isSubmenuOpen: true
+                });
+              }
+            } else {
+              _this.setState(function (prevState) {
+                return {
+                  isSubmenuOpen: !prevState.isSubmenuOpen
+                };
               });
             }
             break;
@@ -622,6 +630,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
               // preventing default behavior for avoiding cursor jump to next/previous table column
               // when left/right arrow pressed.
               event.preventDefault();
+              if (expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+                _this.setState({
+                  isSubmenuOpen: true
+                });
+                return;
+              }
             }
             toggleContextualMenu()(state, dispatch);
             _this.setState({
@@ -651,11 +665,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         state = _this$props11$editorV.state,
         dispatch = _this$props11$editorV.dispatch,
         selectionRect = _this$props11.selectionRect;
-      if (item.value.name === 'background') {
-        if (!_this.state.isSubmenuOpen) {
-          _this.setState({
-            isSubmenuOpen: true
-          });
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'background') {
+          if (!_this.state.isSubmenuOpen) {
+            _this.setState({
+              isSubmenuOpen: true
+            });
+          }
         }
       }
       if (item.value.name === 'delete_column') {
@@ -675,8 +691,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       var _this$props$editorVie = _this.props.editorView,
         state = _this$props$editorVie.state,
         dispatch = _this$props$editorVie.dispatch;
-      if (item.value.name === 'background') {
-        _this.closeSubmenu();
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        if (item.value.name === 'background') {
+          _this.closeSubmenu();
+        }
       }
       if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
         clearHoverSelection()(state, dispatch);
@@ -692,11 +710,24 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "setColor", function (color) {
       var _this$props12 = _this.props,
         editorView = _this$props12.editorView,
-        editorAnalyticsAPI = _this$props12.editorAnalyticsAPI;
+        editorAnalyticsAPI = _this$props12.editorAnalyticsAPI,
+        isCellMenuOpenByKeyboard = _this$props12.isCellMenuOpenByKeyboard;
       var state = editorView.state,
-        dispatch = editorView.dispatch;
+        dispatch = editorView.dispatch,
+        dom = editorView.dom;
       setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
-      _this.toggleOpen();
+      if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
+        _this.toggleOpen();
+      } else {
+        toggleContextualMenu()(state, dispatch);
+        _this.setState({
+          isSubmenuOpen: false
+        });
+        if (isCellMenuOpenByKeyboard) {
+          setFocusToCellMenu(false)(state, dispatch);
+          dom.focus();
+        }
+      }
     });
     return _this;
   }
@@ -745,7 +776,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         api: api
       }, jsx("div", {
         "data-testid": "table-cell-contextual-menu",
-        onMouseLeave: this.closeSubmenu,
+        onMouseLeave: expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? undefined : this.closeSubmenu,
         onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.closeSubmenu : undefined,
         ref: this.dropdownMenuRef
       }, jsx(DropdownMenu

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "18.1.1",
+	"version": "18.1.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^8.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^8.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^10.0.0",
-		"@atlaskit/editor-plugin-extension": "11.0.10",
+		"@atlaskit/editor-plugin-extension": "11.0.11",
 		"@atlaskit/editor-plugin-guideline": "^8.0.0",
 		"@atlaskit/editor-plugin-interaction": "^15.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^5.0.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^42.0.0",
+		"@atlaskit/tmp-editor-statsig": "^43.0.0",
 		"@atlaskit/toggle": "^15.2.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^21.0.0",