@atlaskit/editor-plugin-table 17.3.4 → 17.3.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 17.3.6
+
+### Patch Changes
+
+- [`d3b00bd311c9d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d3b00bd311c9d) -
+  Improves an edge case where users may face unexpected cursor jumps collaboratively
+- Updated dependencies
+
+## 17.3.5
+
+### Patch Changes
+
+- [`7f6ca0d7b6afc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f6ca0d7b6afc) -
+  Updated the table drag menu to fire a track analytic event when the menu is opened
+- Updated dependencies
+
 ## 17.3.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/table.js

@@ -17,9 +17,11 @@ var _react = _interopRequireDefault(require("react"));
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _model = require("@atlaskit/editor-prosemirror/model");
+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");
@@ -146,8 +148,16 @@ 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 (this.view.state.selection.visible) {
-          selectionBookmark = this.view.state.selection.getBookmark();
+        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();
+          }
         }
         if (this.dom) {
           this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(this.node.attrs.localId));
@@ -172,11 +182,33 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
           // - 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)) {
-              var tr = _this2.view.state.tr.setSelection(resolvedSelection);
-              tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
-              _this2.view.dispatch(tr);
+            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);
+              }
             }
           }
         });

package/dist/cjs/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSourceWithAnalyticsViaShortcut = exports.moveSourceWithAnalytics = exports.cloneSourceWithAnalytics = exports.clearDropTargetWithAnalytics = void 0;
+exports.toggleDragMenuWithAnalytics = exports.moveSourceWithAnalyticsViaShortcut = exports.moveSourceWithAnalytics = exports.cloneSourceWithAnalytics = exports.clearDropTargetWithAnalytics = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
@@ -14,6 +14,7 @@ var _analytics2 = require("../utils/analytics");
 var _dragMenu = require("../utils/drag-menu");
 var _selection = require("../utils/selection");
 var _commands = require("./commands");
+var _pluginFactory = require("./plugin-factory");
 var clearDropTargetWithAnalytics = exports.clearDropTargetWithAnalytics = function clearDropTargetWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, sourceType, sourceIndexes, status, tr) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref) {
@@ -151,4 +152,51 @@ var cloneSourceWithAnalytics = exports.cloneSourceWithAnalytics = function clone
       return true;
     });
   };
+};
+var toggleDragMenuWithAnalytics = exports.toggleDragMenuWithAnalytics = function toggleDragMenuWithAnalytics(editorAnalyticsAPI) {
+  return function (isDragMenuOpen, direction, index) {
+    var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
+      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+        previousOpenState = _getPluginState.isDragMenuOpen,
+        previousDragMenuDirection = _getPluginState.dragMenuDirection,
+        previousDragMenuIndex = _getPluginState.dragMenuIndex;
+      if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
+        return undefined;
+      }
+      var updatedMenuOpenState;
+      if (isDragMenuOpen !== undefined) {
+        updatedMenuOpenState = isDragMenuOpen;
+      } else {
+        // menu open but menu direction changed, means user clicked on drag handle of different row/column
+        // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
+        // 2 scenarios above , menu should remain open.
+        if (previousOpenState === true && previousDragMenuDirection !== direction || previousOpenState === true && previousDragMenuDirection === direction && previousDragMenuIndex !== index) {
+          updatedMenuOpenState = true;
+        } else {
+          updatedMenuOpenState = !previousOpenState;
+        }
+      }
+      if (updatedMenuOpenState) {
+        var _ref4;
+        // We only want to fire analytics when the menu is opened
+        return {
+          action: _analytics.TABLE_ACTION.DRAG_MENU_OPENED,
+          actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            inputMethod: trigger === 'keyboard' ? _analytics.INPUT_METHOD.KEYBOARD : _analytics.INPUT_METHOD.MOUSE,
+            direction: (_ref4 = direction !== null && direction !== void 0 ? direction : previousDragMenuDirection) !== null && _ref4 !== void 0 ? _ref4 : 'column'
+          }
+        };
+      }
+      return undefined;
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        (0, _commands.toggleDragMenu)(isDragMenuOpen, direction, index, trigger)(state, dispatch);
+      }
+      return true;
+    });
+  };
 };

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -12,7 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../pm-plugins/commands");
-var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
+var _commandsWithAnalytics = require("../../../pm-plugins/drag-and-drop/commands-with-analytics");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
 var _selection = require("../../../pm-plugins/utils/selection");
 var _types = require("../../../types");
@@ -31,7 +31,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join;
+  var _colWidths$map$join, _api$analytics2;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -124,13 +124,14 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     }
   }, [editorView, tableActive]);
   var toggleDragMenuHandler = (0, _react.useCallback)(function (trigger, event) {
+    var _api$analytics;
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    (0, _commands2.toggleDragMenu)(undefined, 'column', colIndex, trigger)(state, dispatch);
-  }, [editorView, colIndex]);
+    (0, _commandsWithAnalytics.toggleDragMenuWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
+  }, [editorView, colIndex, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
   var colIndexes = (0, _react.useMemo)(function () {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js

@@ -14,7 +14,7 @@ var _utils = require("@atlaskit/editor-tables/utils");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../../pm-plugins/commands");
-var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
+var _commandsWithAnalytics = require("../../../pm-plugins/drag-and-drop/commands-with-analytics");
 var _pluginFactory = require("../../../pm-plugins/plugin-factory");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
 var _selection = require("../../../pm-plugins/utils/selection");
@@ -36,7 +36,7 @@ var getSelectedRows = function getSelectedRows(selection) {
   return [];
 };
 var DragControls = exports.DragControls = function DragControls(_ref) {
-  var _tableNode$attrs$loca, _tableNode$attrs;
+  var _tableNode$attrs$loca, _tableNode$attrs, _api$analytics2;
   var tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
     tableWidth = _ref.tableWidth,
@@ -89,11 +89,12 @@ var DragControls = exports.DragControls = function DragControls(_ref) {
     });
   }, [editorView]);
   var toggleDragMenuHandler = (0, _react.useCallback)(function (trigger, event) {
+    var _api$analytics;
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    (0, _commands2.toggleDragMenu)(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, trigger)(editorView.state, editorView.dispatch);
-  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
+    (0, _commandsWithAnalytics.toggleDragMenuWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, trigger)(editorView.state, editorView.dispatch);
+  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   var handleMouseOut = (0, _react.useCallback)(function () {
     if (tableActive) {

package/dist/es2019/nodeviews/table.js

@@ -3,9 +3,11 @@ import React from 'react';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+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';
@@ -118,8 +120,18 @@ 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 (this.view.state.selection.visible) {
-        selectionBookmark = this.view.state.selection.getBookmark();
+      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();
+        }
       }
       if (this.dom) {
         this.dom.setAttribute('data-ssr-placeholder', `table-nodeview-${this.node.attrs.localId}`);
@@ -144,11 +156,33 @@ export default class TableView extends ReactNodeView {
         // - The bookmarked selection is different from the current selection.
         if (selectionBookmark && mutationsIgnored) {
           const resolvedSelection = selectionBookmark.resolve(this.view.state.tr.doc);
-          // Don't set the selection if it's the same as the current selection.
-          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);
+          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);
+            }
           }
         }
       });

package/dist/es2019/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -5,7 +5,8 @@ import { findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tab
 import { getSelectedTableInfo, withEditorAnalyticsAPI } from '../utils/analytics';
 import { canMove, getTargetIndex } from '../utils/drag-menu';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../utils/selection';
-import { clearDropTarget, cloneSource, moveSource } from './commands';
+import { clearDropTarget, cloneSource, moveSource, toggleDragMenu } from './commands';
+import { getPluginState } from './plugin-factory';
 export const clearDropTargetWithAnalytics = editorAnalyticsAPI => (inputMethod, sourceType, sourceIndexes, status, tr) => {
   return withEditorAnalyticsAPI(({
     selection
@@ -139,4 +140,49 @@ export const cloneSourceWithAnalytics = editorAnalyticsAPI => (inputMethod, sour
     }
     return true;
   });
+};
+export const toggleDragMenuWithAnalytics = editorAnalyticsAPI => (isDragMenuOpen, direction, index, trigger = 'mouse') => {
+  return withEditorAnalyticsAPI(state => {
+    const {
+      isDragMenuOpen: previousOpenState,
+      dragMenuDirection: previousDragMenuDirection,
+      dragMenuIndex: previousDragMenuIndex
+    } = getPluginState(state);
+    if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
+      return undefined;
+    }
+    let updatedMenuOpenState;
+    if (isDragMenuOpen !== undefined) {
+      updatedMenuOpenState = isDragMenuOpen;
+    } else {
+      // menu open but menu direction changed, means user clicked on drag handle of different row/column
+      // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
+      // 2 scenarios above , menu should remain open.
+      if (previousOpenState === true && previousDragMenuDirection !== direction || previousOpenState === true && previousDragMenuDirection === direction && previousDragMenuIndex !== index) {
+        updatedMenuOpenState = true;
+      } else {
+        updatedMenuOpenState = !previousOpenState;
+      }
+    }
+    if (updatedMenuOpenState) {
+      var _ref;
+      // We only want to fire analytics when the menu is opened
+      return {
+        action: TABLE_ACTION.DRAG_MENU_OPENED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          inputMethod: trigger === 'keyboard' ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE,
+          direction: (_ref = direction !== null && direction !== void 0 ? direction : previousDragMenuDirection) !== null && _ref !== void 0 ? _ref : 'column'
+        }
+      };
+    }
+    return undefined;
+  })(editorAnalyticsAPI)((state, dispatch) => {
+    if (dispatch) {
+      toggleDragMenu(isDragMenuOpen, direction, index, trigger)(state, dispatch);
+    }
+    return true;
+  });
 };

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -7,7 +7,7 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
-import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedColumnIndexes } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -39,7 +39,7 @@ export const ColumnControls = ({
   getScrollOffset,
   api
 }) => {
-  var _colWidths$map$join;
+  var _colWidths$map$join, _api$analytics2;
   const columnControlsRef = useRef(null);
   const {
     selection
@@ -123,6 +123,7 @@ export const ColumnControls = ({
     }
   }, [editorView, tableActive]);
   const toggleDragMenuHandler = useCallback((trigger, event) => {
+    var _api$analytics;
     const {
       state,
       dispatch
@@ -130,8 +131,8 @@ export const ColumnControls = ({
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    toggleDragMenu(undefined, 'column', colIndex, trigger)(state, dispatch);
-  }, [editorView, colIndex]);
+    toggleDragMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
+  }, [editorView, colIndex, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
   const colIndexes = useMemo(() => {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -7,7 +7,7 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
-import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedRowIndexes } from '../../../pm-plugins/utils/selection';
@@ -42,7 +42,7 @@ export const DragControls = ({
   api,
   selection
 }) => {
-  var _tableNode$attrs$loca, _tableNode$attrs;
+  var _tableNode$attrs$loca, _tableNode$attrs, _api$analytics2;
   const [isDragging, setIsDragging] = useState(false);
   const rowHeights = getRowHeights(tableRef);
   const rowsParams = getRowsParams(rowHeights);
@@ -78,11 +78,12 @@ export const DragControls = ({
     });
   }, [editorView]);
   const toggleDragMenuHandler = useCallback((trigger, event) => {
+    var _api$analytics;
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, trigger)(editorView.state, editorView.dispatch);
-  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
+    toggleDragMenuWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, trigger)(editorView.state, editorView.dispatch);
+  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
   const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   const handleMouseOut = useCallback(() => {
     if (tableActive) {

package/dist/esm/nodeviews/table.js

@@ -13,9 +13,11 @@ import React from 'react';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+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';
@@ -139,8 +141,16 @@ 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 (this.view.state.selection.visible) {
-          selectionBookmark = this.view.state.selection.getBookmark();
+        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();
+          }
         }
         if (this.dom) {
           this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(this.node.attrs.localId));
@@ -165,11 +175,33 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           // - 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)) {
-              var tr = _this2.view.state.tr.setSelection(resolvedSelection);
-              tr.setMeta('source', 'TableNodeView:_handleTableRef:selection-resync');
-              _this2.view.dispatch(tr);
+            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);
+              }
             }
           }
         });

package/dist/esm/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -6,7 +6,8 @@ import { findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tab
 import { getSelectedTableInfo, withEditorAnalyticsAPI } from '../utils/analytics';
 import { canMove, getTargetIndex } from '../utils/drag-menu';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../utils/selection';
-import { clearDropTarget, cloneSource, moveSource } from './commands';
+import { clearDropTarget, cloneSource, moveSource, toggleDragMenu } from './commands';
+import { getPluginState } from './plugin-factory';
 export var clearDropTargetWithAnalytics = function clearDropTargetWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, sourceType, sourceIndexes, status, tr) {
     return withEditorAnalyticsAPI(function (_ref) {
@@ -144,4 +145,51 @@ export var cloneSourceWithAnalytics = function cloneSourceWithAnalytics(editorAn
       return true;
     });
   };
+};
+export var toggleDragMenuWithAnalytics = function toggleDragMenuWithAnalytics(editorAnalyticsAPI) {
+  return function (isDragMenuOpen, direction, index) {
+    var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';
+    return withEditorAnalyticsAPI(function (state) {
+      var _getPluginState = getPluginState(state),
+        previousOpenState = _getPluginState.isDragMenuOpen,
+        previousDragMenuDirection = _getPluginState.dragMenuDirection,
+        previousDragMenuIndex = _getPluginState.dragMenuIndex;
+      if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
+        return undefined;
+      }
+      var updatedMenuOpenState;
+      if (isDragMenuOpen !== undefined) {
+        updatedMenuOpenState = isDragMenuOpen;
+      } else {
+        // menu open but menu direction changed, means user clicked on drag handle of different row/column
+        // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
+        // 2 scenarios above , menu should remain open.
+        if (previousOpenState === true && previousDragMenuDirection !== direction || previousOpenState === true && previousDragMenuDirection === direction && previousDragMenuIndex !== index) {
+          updatedMenuOpenState = true;
+        } else {
+          updatedMenuOpenState = !previousOpenState;
+        }
+      }
+      if (updatedMenuOpenState) {
+        var _ref4;
+        // We only want to fire analytics when the menu is opened
+        return {
+          action: TABLE_ACTION.DRAG_MENU_OPENED,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            inputMethod: trigger === 'keyboard' ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE,
+            direction: (_ref4 = direction !== null && direction !== void 0 ? direction : previousDragMenuDirection) !== null && _ref4 !== void 0 ? _ref4 : 'column'
+          }
+        };
+      }
+      return undefined;
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        toggleDragMenu(isDragMenuOpen, direction, index, trigger)(state, dispatch);
+      }
+      return true;
+    });
+  };
 };

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -7,7 +7,7 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
-import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedColumnIndexes } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -23,7 +23,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 export var ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join;
+  var _colWidths$map$join, _api$analytics2;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -116,13 +116,14 @@ export var ColumnControls = function ColumnControls(_ref) {
     }
   }, [editorView, tableActive]);
   var toggleDragMenuHandler = useCallback(function (trigger, event) {
+    var _api$analytics;
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    toggleDragMenu(undefined, 'column', colIndex, trigger)(state, dispatch);
-  }, [editorView, colIndex]);
+    toggleDragMenuWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'column', colIndex, trigger)(state, dispatch);
+  }, [editorView, colIndex, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
   var colIndexes = useMemo(function () {
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -8,7 +8,7 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
-import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { toggleDragMenuWithAnalytics } from '../../../pm-plugins/drag-and-drop/commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedRowIndexes } from '../../../pm-plugins/utils/selection';
@@ -27,7 +27,7 @@ var getSelectedRows = function getSelectedRows(selection) {
   return [];
 };
 export var DragControls = function DragControls(_ref) {
-  var _tableNode$attrs$loca, _tableNode$attrs;
+  var _tableNode$attrs$loca, _tableNode$attrs, _api$analytics2;
   var tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
     tableWidth = _ref.tableWidth,
@@ -80,11 +80,12 @@ export var DragControls = function DragControls(_ref) {
     });
   }, [editorView]);
   var toggleDragMenuHandler = useCallback(function (trigger, event) {
+    var _api$analytics;
     if (event !== null && event !== void 0 && event.shiftKey) {
       return;
     }
-    toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, trigger)(editorView.state, editorView.dispatch);
-  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
+    toggleDragMenuWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, trigger)(editorView.state, editorView.dispatch);
+  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   var handleMouseOut = useCallback(function () {
     if (tableActive) {

package/dist/types/pm-plugins/commands/toggle.d.ts

@@ -4,7 +4,7 @@ import type { Command } from '@atlaskit/editor-common/types';
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-export declare const getNextLayout: (currentLayout: TableLayout) => "default" | "full-width" | "wide";
+export declare const getNextLayout: (currentLayout: TableLayout) => "wide" | "full-width" | "default";
 export declare const toggleHeaderRow: Command;
 export declare const toggleHeaderColumn: Command;
 export declare const toggleNumberColumn: Command;

package/dist/types/pm-plugins/drag-and-drop/commands-with-analytics.d.ts

@@ -4,8 +4,10 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { DraggableData, DraggableType } from '../../types';
+import type { DraggableData, DraggableType, TableDirection } from '../../types';
+import type { TriggerType } from './types';
 export declare const clearDropTargetWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP, sourceType: DraggableType, sourceIndexes: number[] | undefined, status: TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void, getIntl?: () => IntlShape) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalyticsViaShortcut: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void, getIntl?: () => IntlShape) => (sourceType: DraggableType, direction: DraggableData["direction"]) => Command;
 export declare const cloneSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, targetDirection: "start" | "end", tr?: Transaction) => Command;
+export declare const toggleDragMenuWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number, trigger?: TriggerType) => Command;

package/dist/types/ui/FloatingContextualButton/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const tableFloatingCellButtonStyles: () => import("@emotion/react").SerializedStyles;
-export declare const tableFloatingCellButtonSelectedStyles: () => import("@emotion/react").SerializedStyles;
+export declare const tableFloatingCellButtonStyles: () => import("@emotion/utils").SerializedStyles;
+export declare const tableFloatingCellButtonSelectedStyles: () => import("@emotion/utils").SerializedStyles;

package/dist/types/ui/FloatingContextualMenu/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const tablePopupStyles: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;
+export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/utils").SerializedStyles;
+export declare const tablePopupStyles: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/utils").SerializedStyles;

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

@@ -1,8 +1,6 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { TablePlugin } from '../../../tablePluginType';
-import type { CellHoverMeta } from '../../../types';
+import type { CellHoverMeta, PluginInjectionAPI } from '../../../types';
 interface ColumnControlsProps {
     colWidths?: (number | undefined)[];
     editorView: EditorView;
@@ -21,6 +19,6 @@ interface ColumnControlsProps {
     tableRef: HTMLTableElement;
 }
 export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, stickyTop, localId, isInDanger, rowHeights, colWidths, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, api, }: ColumnControlsProps & {
-    api?: ExtractInjectionAPI<TablePlugin>;
+    api?: PluginInjectionAPI;
 }) => React.JSX.Element;
 export {};

package/dist/types/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -1,12 +1,10 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { TablePlugin } from '../../../tablePluginType';
-import type { CellHoverMeta } from '../../../types';
+import type { CellHoverMeta, PluginInjectionAPI } from '../../../types';
 type DragControlsProps = {
-    api?: ExtractInjectionAPI<TablePlugin>;
+    api?: PluginInjectionAPI;
     editorView: EditorView;
     hoveredCell?: CellHoverMeta;
     hoverRows: (rows: number[], danger?: boolean) => void;

package/dist/types/ui/common-styles.d.ts

@@ -4,10 +4,10 @@ export declare const tableRowHeight = 44;
 export declare const baseTableStyles: (props: {
     featureFlags?: FeatureFlags;
     isDragAndDropEnabled?: boolean;
-}) => import("@emotion/react").SerializedStyles;
+}) => import("@emotion/utils").SerializedStyles;
 export declare const tableStyles: (props: {
     featureFlags?: FeatureFlags;
     isDragAndDropEnabled?: boolean;
-}) => import("@emotion/react").SerializedStyles;
-export declare const tableFullPageEditorStyles: import("@emotion/react").SerializedStyles;
-export declare const tableCommentEditorStyles: import("@emotion/react").SerializedStyles;
+}) => import("@emotion/utils").SerializedStyles;
+export declare const tableFullPageEditorStyles: import("@emotion/utils").SerializedStyles;
+export declare const tableCommentEditorStyles: import("@emotion/utils").SerializedStyles;

package/dist/types/ui/ui-styles.d.ts

@@ -1,20 +1,20 @@
-export declare const InsertMarker: (cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButton: (cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonHover: () => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonDanger: () => import("@emotion/react").SerializedStyles;
-export declare const dragInsertButtonWrapper: () => import("@emotion/react").SerializedStyles;
-export declare const dragCornerControlButton: () => import("@emotion/react").SerializedStyles;
-export declare const insertColumnButtonWrapper: () => import("@emotion/react").SerializedStyles;
-export declare const insertRowButtonWrapper: () => import("@emotion/react").SerializedStyles;
-export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
-export declare const DeleteButton: () => import("@emotion/react").SerializedStyles;
-export declare const OverflowShadow: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;
-export declare const OverflowShadowLessPadding: (tableOverflowShadowWidth: number) => import("@emotion/react").SerializedStyles;
-export declare const floatingColumnControls: () => import("@emotion/react").SerializedStyles;
-export declare const rowControlsWrapperDotStyle: () => import("@emotion/react").SerializedStyles;
-export declare const columnControlsDecoration: () => import("@emotion/react").SerializedStyles;
-export declare const hoveredDeleteButton: () => import("@emotion/react").SerializedStyles;
-export declare const hoveredCell: () => import("@emotion/react").SerializedStyles;
-export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: () => import("@emotion/react").SerializedStyles;
-export declare const insertLine: () => import("@emotion/react").SerializedStyles;
+export declare const InsertMarker: (cssString?: string) => import("@emotion/utils").SerializedStyles;
+export declare const HeaderButton: (cssString?: string) => import("@emotion/utils").SerializedStyles;
+export declare const HeaderButtonHover: () => import("@emotion/utils").SerializedStyles;
+export declare const HeaderButtonDanger: () => import("@emotion/utils").SerializedStyles;
+export declare const dragInsertButtonWrapper: () => import("@emotion/utils").SerializedStyles;
+export declare const dragCornerControlButton: () => import("@emotion/utils").SerializedStyles;
+export declare const insertColumnButtonWrapper: () => import("@emotion/utils").SerializedStyles;
+export declare const insertRowButtonWrapper: () => import("@emotion/utils").SerializedStyles;
+export declare const columnControlsLineMarker: () => import("@emotion/utils").SerializedStyles;
+export declare const DeleteButton: () => import("@emotion/utils").SerializedStyles;
+export declare const OverflowShadow: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/utils").SerializedStyles;
+export declare const OverflowShadowLessPadding: (tableOverflowShadowWidth: number) => import("@emotion/utils").SerializedStyles;
+export declare const floatingColumnControls: () => import("@emotion/utils").SerializedStyles;
+export declare const rowControlsWrapperDotStyle: () => import("@emotion/utils").SerializedStyles;
+export declare const columnControlsDecoration: () => import("@emotion/utils").SerializedStyles;
+export declare const hoveredDeleteButton: () => import("@emotion/utils").SerializedStyles;
+export declare const hoveredCell: () => import("@emotion/utils").SerializedStyles;
+export declare const hoveredWarningCell: import("@emotion/utils").SerializedStyles;
+export declare const resizeHandle: () => import("@emotion/utils").SerializedStyles;
+export declare const insertLine: () => import("@emotion/utils").SerializedStyles;

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

@@ -4,7 +4,7 @@ import type { Command } from '@atlaskit/editor-common/types';
  * Table layout toggle logic
  * default -> wide -> full-width -> default
  */
-export declare const getNextLayout: (currentLayout: TableLayout) => "default" | "full-width" | "wide";
+export declare const getNextLayout: (currentLayout: TableLayout) => "wide" | "full-width" | "default";
 export declare const toggleHeaderRow: Command;
 export declare const toggleHeaderColumn: Command;
 export declare const toggleNumberColumn: Command;

package/dist/types-ts4.5/pm-plugins/drag-and-drop/commands-with-analytics.d.ts

@@ -4,8 +4,10 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { DraggableData, DraggableType } from '../../types';
+import type { DraggableData, DraggableType, TableDirection } from '../../types';
+import type { TriggerType } from './types';
 export declare const clearDropTargetWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP, sourceType: DraggableType, sourceIndexes: number[] | undefined, status: TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void, getIntl?: () => IntlShape) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, tr?: Transaction) => Command;
 export declare const moveSourceWithAnalyticsViaShortcut: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void, getIntl?: () => IntlShape) => (sourceType: DraggableType, direction: DraggableData["direction"]) => Command;
 export declare const cloneSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT, sourceType: DraggableType, sourceIndexes: number[], targetIndex: number, targetDirection: "start" | "end", tr?: Transaction) => Command;
+export declare const toggleDragMenuWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number, trigger?: TriggerType) => Command;

package/dist/types-ts4.5/ui/FloatingContextualButton/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const tableFloatingCellButtonStyles: () => import("@emotion/react").SerializedStyles;
-export declare const tableFloatingCellButtonSelectedStyles: () => import("@emotion/react").SerializedStyles;
+export declare const tableFloatingCellButtonStyles: () => import("@emotion/utils").SerializedStyles;
+export declare const tableFloatingCellButtonSelectedStyles: () => import("@emotion/utils").SerializedStyles;

package/dist/types-ts4.5/ui/FloatingContextualMenu/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const tablePopupStyles: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;
+export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/utils").SerializedStyles;
+export declare const tablePopupStyles: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/utils").SerializedStyles;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { TablePlugin } from '../../../tablePluginType';
-import type { CellHoverMeta } from '../../../types';
+import type { CellHoverMeta, PluginInjectionAPI } from '../../../types';
 interface ColumnControlsProps {
     colWidths?: (number | undefined)[];
     editorView: EditorView;
@@ -21,6 +19,6 @@ interface ColumnControlsProps {
     tableRef: HTMLTableElement;
 }
 export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, stickyTop, localId, isInDanger, rowHeights, colWidths, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, api, }: ColumnControlsProps & {
-    api?: ExtractInjectionAPI<TablePlugin>;
+    api?: PluginInjectionAPI;
 }) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -1,12 +1,10 @@
 import React from 'react';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { TablePlugin } from '../../../tablePluginType';
-import type { CellHoverMeta } from '../../../types';
+import type { CellHoverMeta, PluginInjectionAPI } from '../../../types';
 type DragControlsProps = {
-    api?: ExtractInjectionAPI<TablePlugin>;
+    api?: PluginInjectionAPI;
     editorView: EditorView;
     hoveredCell?: CellHoverMeta;
     hoverRows: (rows: number[], danger?: boolean) => void;

package/dist/types-ts4.5/ui/common-styles.d.ts

@@ -4,10 +4,10 @@ export declare const tableRowHeight = 44;
 export declare const baseTableStyles: (props: {
     featureFlags?: FeatureFlags;
     isDragAndDropEnabled?: boolean;
-}) => import("@emotion/react").SerializedStyles;
+}) => import("@emotion/utils").SerializedStyles;
 export declare const tableStyles: (props: {
     featureFlags?: FeatureFlags;
     isDragAndDropEnabled?: boolean;
-}) => import("@emotion/react").SerializedStyles;
-export declare const tableFullPageEditorStyles: import("@emotion/react").SerializedStyles;
-export declare const tableCommentEditorStyles: import("@emotion/react").SerializedStyles;
+}) => import("@emotion/utils").SerializedStyles;
+export declare const tableFullPageEditorStyles: import("@emotion/utils").SerializedStyles;
+export declare const tableCommentEditorStyles: import("@emotion/utils").SerializedStyles;

package/dist/types-ts4.5/ui/ui-styles.d.ts

@@ -1,20 +1,20 @@
-export declare const InsertMarker: (cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButton: (cssString?: string) => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonHover: () => import("@emotion/react").SerializedStyles;
-export declare const HeaderButtonDanger: () => import("@emotion/react").SerializedStyles;
-export declare const dragInsertButtonWrapper: () => import("@emotion/react").SerializedStyles;
-export declare const dragCornerControlButton: () => import("@emotion/react").SerializedStyles;
-export declare const insertColumnButtonWrapper: () => import("@emotion/react").SerializedStyles;
-export declare const insertRowButtonWrapper: () => import("@emotion/react").SerializedStyles;
-export declare const columnControlsLineMarker: () => import("@emotion/react").SerializedStyles;
-export declare const DeleteButton: () => import("@emotion/react").SerializedStyles;
-export declare const OverflowShadow: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;
-export declare const OverflowShadowLessPadding: (tableOverflowShadowWidth: number) => import("@emotion/react").SerializedStyles;
-export declare const floatingColumnControls: () => import("@emotion/react").SerializedStyles;
-export declare const rowControlsWrapperDotStyle: () => import("@emotion/react").SerializedStyles;
-export declare const columnControlsDecoration: () => import("@emotion/react").SerializedStyles;
-export declare const hoveredDeleteButton: () => import("@emotion/react").SerializedStyles;
-export declare const hoveredCell: () => import("@emotion/react").SerializedStyles;
-export declare const hoveredWarningCell: import("@emotion/react").SerializedStyles;
-export declare const resizeHandle: () => import("@emotion/react").SerializedStyles;
-export declare const insertLine: () => import("@emotion/react").SerializedStyles;
+export declare const InsertMarker: (cssString?: string) => import("@emotion/utils").SerializedStyles;
+export declare const HeaderButton: (cssString?: string) => import("@emotion/utils").SerializedStyles;
+export declare const HeaderButtonHover: () => import("@emotion/utils").SerializedStyles;
+export declare const HeaderButtonDanger: () => import("@emotion/utils").SerializedStyles;
+export declare const dragInsertButtonWrapper: () => import("@emotion/utils").SerializedStyles;
+export declare const dragCornerControlButton: () => import("@emotion/utils").SerializedStyles;
+export declare const insertColumnButtonWrapper: () => import("@emotion/utils").SerializedStyles;
+export declare const insertRowButtonWrapper: () => import("@emotion/utils").SerializedStyles;
+export declare const columnControlsLineMarker: () => import("@emotion/utils").SerializedStyles;
+export declare const DeleteButton: () => import("@emotion/utils").SerializedStyles;
+export declare const OverflowShadow: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/utils").SerializedStyles;
+export declare const OverflowShadowLessPadding: (tableOverflowShadowWidth: number) => import("@emotion/utils").SerializedStyles;
+export declare const floatingColumnControls: () => import("@emotion/utils").SerializedStyles;
+export declare const rowControlsWrapperDotStyle: () => import("@emotion/utils").SerializedStyles;
+export declare const columnControlsDecoration: () => import("@emotion/utils").SerializedStyles;
+export declare const hoveredDeleteButton: () => import("@emotion/utils").SerializedStyles;
+export declare const hoveredCell: () => import("@emotion/utils").SerializedStyles;
+export declare const hoveredWarningCell: import("@emotion/utils").SerializedStyles;
+export declare const resizeHandle: () => import("@emotion/utils").SerializedStyles;
+export declare const insertLine: () => import("@emotion/utils").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "17.3.4",
+	"version": "17.3.6",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^7.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^7.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^9.0.0",
-		"@atlaskit/editor-plugin-extension": "10.0.8",
+		"@atlaskit/editor-plugin-extension": "10.0.9",
 		"@atlaskit/editor-plugin-guideline": "^7.0.0",
 		"@atlaskit/editor-plugin-interaction": "^14.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^4.0.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^19.0.0",
+		"@atlaskit/tmp-editor-statsig": "^20.1.0",
 		"@atlaskit/toggle": "^15.2.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",