@atlaskit/editor-plugin-table 5.5.11 → 5.5.13

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 5.5.13
+
+### Patch Changes
+
+- [#60425](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60425) [`0caaaa7105f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0caaaa7105f9) - [ux] Fix drag menu position and anchor element
+
+## 5.5.12
+
+### Patch Changes
+
+- [#60612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60612) [`7edc766361a2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7edc766361a2) - Created an EditorCommad on table plugin to insert a table of custom size
+
 ## 5.5.11
 
 ### Patch Changes

package/dist/cjs/plugins/table/commands/insert.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addColumnAfter = void 0;
 exports.addColumnAt = addColumnAt;
-exports.insertRow = exports.insertColumn = exports.createTable = exports.addColumnBefore = void 0;
+exports.insertTableWithSize = exports.insertRow = exports.insertColumn = exports.createTable = exports.addColumnBefore = void 0;
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -154,4 +154,19 @@ var createTable = exports.createTable = function createTable() {
     return true;
   };
 };
-// #endregion
+// #endregion
+
+var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(editorAnalyticsAPI) {
+  return function (rowsCount, colsCount, inputMethod) {
+    return function (_ref) {
+      var tr = _ref.tr;
+      var tableNode = (0, _utils2.createTable)({
+        schema: tr.doc.type.schema,
+        rowsCount: rowsCount,
+        colsCount: colsCount
+      });
+      var newTr = (0, _utils.safeInsert)(tableNode)(tr).scrollIntoView();
+      return newTr;
+    };
+  };
+};

package/dist/cjs/plugins/table/index.js

@@ -18,6 +18,7 @@ var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _insert = require("./commands/insert");
 var _createPluginConfig = require("./create-plugin-config");
 var _plugin = require("./pm-plugins/analytics/plugin");
 var _pluginKey = require("./pm-plugins/analytics/plugin-key");
@@ -49,7 +50,7 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
  * from `@atlaskit/editor-core`.
  */
 var tablesPlugin = function tablesPlugin(_ref) {
-  var _api$analytics;
+  var _api$analytics, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -84,6 +85,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         };
       }
     },
+    commands: {
+      insertTableWithSize: (0, _insert.insertTableWithSize)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+    },
     nodes: function nodes() {
       var tableNode = options !== null && options !== void 0 && options.tableResizingEnabled ? _adfSchema.tableWithCustomWidth : _adfSchema.table;
       return [{

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

@@ -22,7 +22,8 @@ var _HandleIconComponent = require("./HandleIconComponent");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
-  var tableLocalId = _ref.tableLocalId,
+  var isDragMenuTarget = _ref.isDragMenuTarget,
+    tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     _ref$appearance = _ref.appearance,
@@ -114,7 +115,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, _canDrag]);
+  var showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, (0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_HANDLE_DISABLED, !_canDrag || hasMergedCells)),
     ref: dragHandleDivRef,
     style: {

package/dist/cjs/plugins/table/ui/FloatingDragMenu/index.js

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _consts = require("../consts");
 var _DragMenu = require("./DragMenu");
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -18,7 +17,6 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     scrollableElement = _ref.scrollableElement,
     editorView = _ref.editorView,
     isOpen = _ref.isOpen,
-    tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
     direction = _ref.direction,
     index = _ref.index,
@@ -28,18 +26,17 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
-  var domAtPos = editorView.domAtPos.bind(editorView);
-  var targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
-  var tableMap = tableNode ? _tableMap.TableMap.get(tableNode) : undefined;
-  var offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
+  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-    alignX: direction === 'row' ? 'left' : 'center',
-    alignY: "top",
-    target: targetCellRef,
+    alignX: direction === 'row' ? 'right' : undefined,
+    alignY: direction === 'row' ? 'start' : undefined,
+    target: targetHandleRef,
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,

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

@@ -138,8 +138,9 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": isHover ? 'table-floating-column-control-hover' : 'table-floating-column-control'
+      "data-testid": 'table-floating-column-control'
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,

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

@@ -150,8 +150,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+      "data-testid": 'table-floating-row-drag-handle'
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
       indexes: indexes,

package/dist/es2019/plugins/table/commands/insert.js

@@ -133,4 +133,18 @@ export const createTable = () => (state, dispatch) => {
   }
   return true;
 };
-// #endregion
+// #endregion
+
+export const insertTableWithSize = editorAnalyticsAPI => (rowsCount, colsCount, inputMethod) => {
+  return ({
+    tr
+  }) => {
+    const tableNode = createTableNode({
+      schema: tr.doc.type.schema,
+      rowsCount: rowsCount,
+      colsCount: colsCount
+    });
+    const newTr = safeInsert(tableNode)(tr).scrollIntoView();
+    return newTr;
+  };
+};

package/dist/es2019/plugins/table/index.js

@@ -11,6 +11,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
 import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
@@ -43,7 +44,7 @@ const tablesPlugin = ({
   config: options,
   api
 }) => {
-  var _api$analytics;
+  var _api$analytics, _api$analytics2;
   const editorViewRef = {
     current: null
   };
@@ -74,6 +75,9 @@ const tablesPlugin = ({
         })) !== null && _api$contentInsertion !== void 0 ? _api$contentInsertion : false;
       }
     },
+    commands: {
+      insertTableWithSize: insertTableWithSize(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+    },
     nodes() {
       const tableNode = options !== null && options !== void 0 && options.tableResizingEnabled ? tableWithCustomWidth : table;
       return [{

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

@@ -10,6 +10,7 @@ import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 export const DragHandle = ({
+  isDragMenuTarget,
   tableLocalId,
   direction = 'row',
   appearance = 'default',
@@ -98,7 +99,9 @@ export const DragHandle = ({
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, canDrag]);
+  const showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, {
       [ClassName.DRAG_HANDLE_DISABLED]: !canDrag || hasMergedCells
     }),

package/dist/es2019/plugins/table/ui/FloatingDragMenu/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { dragMenuDropdownWidth } from '../consts';
 import { DragMenu } from './DragMenu';
 const FloatingDragMenu = ({
@@ -11,7 +10,6 @@ const FloatingDragMenu = ({
   scrollableElement,
   editorView,
   isOpen,
-  tableRef,
   tableNode,
   direction,
   index,
@@ -22,18 +20,17 @@ const FloatingDragMenu = ({
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
-  const domAtPos = editorView.domAtPos.bind(editorView);
-  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  const targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  const offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
+  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
-    alignX: direction === 'row' ? 'left' : 'center',
-    alignY: "top",
-    target: targetCellRef,
+    alignX: direction === 'row' ? 'right' : undefined,
+    alignY: direction === 'row' ? 'start' : undefined,
+    target: targetHandleRef,
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,

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

@@ -136,8 +136,9 @@ export const ColumnControls = ({
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": isHover ? 'table-floating-column-control-hover' : 'table-floating-column-control'
+      "data-testid": 'table-floating-column-control'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,

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

@@ -140,8 +140,9 @@ const DragControlsComponent = ({
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+      "data-testid": 'table-floating-row-drag-handle'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
       indexes: indexes,

package/dist/esm/plugins/table/commands/insert.js

@@ -145,4 +145,19 @@ export var createTable = function createTable() {
     return true;
   };
 };
-// #endregion
+// #endregion
+
+export var insertTableWithSize = function insertTableWithSize(editorAnalyticsAPI) {
+  return function (rowsCount, colsCount, inputMethod) {
+    return function (_ref) {
+      var tr = _ref.tr;
+      var tableNode = createTableNode({
+        schema: tr.doc.type.schema,
+        rowsCount: rowsCount,
+        colsCount: colsCount
+      });
+      var newTr = safeInsert(tableNode)(tr).scrollIntoView();
+      return newTr;
+    };
+  };
+};

package/dist/esm/plugins/table/index.js

@@ -11,6 +11,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
 import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
@@ -42,7 +43,7 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
  * from `@atlaskit/editor-core`.
  */
 var tablesPlugin = function tablesPlugin(_ref) {
-  var _api$analytics;
+  var _api$analytics, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -77,6 +78,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         };
       }
     },
+    commands: {
+      insertTableWithSize: insertTableWithSize(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+    },
     nodes: function nodes() {
       var tableNode = options !== null && options !== void 0 && options.tableResizingEnabled ? tableWithCustomWidth : table;
       return [{

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

@@ -12,7 +12,8 @@ import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 export var DragHandle = function DragHandle(_ref) {
-  var tableLocalId = _ref.tableLocalId,
+  var isDragMenuTarget = _ref.isDragMenuTarget,
+    tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     _ref$appearance = _ref.appearance,
@@ -104,7 +105,9 @@ export var DragHandle = function DragHandle(_ref) {
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, _canDrag]);
+  var showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, _defineProperty({}, ClassName.DRAG_HANDLE_DISABLED, !_canDrag || hasMergedCells)),
     ref: dragHandleDivRef,
     style: {

package/dist/esm/plugins/table/ui/FloatingDragMenu/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { dragMenuDropdownWidth } from '../consts';
 import { DragMenu } from './DragMenu';
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -11,7 +10,6 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     scrollableElement = _ref.scrollableElement,
     editorView = _ref.editorView,
     isOpen = _ref.isOpen,
-    tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
     direction = _ref.direction,
     index = _ref.index,
@@ -21,18 +19,17 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
-  var domAtPos = editorView.domAtPos.bind(editorView);
-  var targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-  var tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  var offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
+  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
-    alignX: direction === 'row' ? 'left' : 'center',
-    alignY: "top",
-    target: targetCellRef,
+    alignX: direction === 'row' ? 'right' : undefined,
+    alignY: direction === 'row' ? 'start' : undefined,
+    target: targetHandleRef,
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,

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

@@ -129,8 +129,9 @@ export var ColumnControls = function ColumnControls(_ref) {
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": isHover ? 'table-floating-column-control-hover' : 'table-floating-column-control'
+      "data-testid": 'table-floating-column-control'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,

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

@@ -140,8 +140,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+      "data-testid": 'table-floating-row-drag-handle'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
       indexes: indexes,

package/dist/types/plugins/table/commands/insert.d.ts

@@ -1,4 +1,5 @@
-import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Command, EditorCommand, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
@@ -7,3 +8,4 @@ export declare const addColumnAfter: (getEditorContainerWidth: GetEditorContaine
 export declare const insertColumn: (getEditorContainerWidth: GetEditorContainerWidth) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean) => Command;
 export declare const createTable: () => Command;
+export declare const insertTableWithSize: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER | INPUT_METHOD.ASCII | INPUT_METHOD.TYPEAHEAD) => EditorCommand;

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

@@ -1,5 +1,6 @@
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
-import type { Command, GetEditorFeatureFlags, NextEditorPlugin } from '@atlaskit/editor-common/types';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Command, EditorCommand, GetEditorFeatureFlags, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -22,6 +23,9 @@ export type TablePlugin = NextEditorPlugin<'table', {
     actions: {
         insertTable: InsertTableAction;
     };
+    commands: {
+        insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER | INPUT_METHOD.ASCII | INPUT_METHOD.TYPEAHEAD) => EditorCommand;
+    };
     dependencies: [
         AnalyticsPlugin,
         ContentInsertionPlugin,

package/dist/types/plugins/table/ui/DragHandle/index.d.ts

@@ -16,6 +16,7 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
     canDrag?: boolean;
+    isDragMenuTarget: boolean;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ isDragMenuTarget, tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types/plugins/table/ui/FloatingDragMenu/index.d.ts

@@ -18,7 +18,7 @@ export interface Props {
     canDrag?: boolean;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types-ts4.5/plugins/table/commands/insert.d.ts

@@ -1,4 +1,5 @@
-import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Command, EditorCommand, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
@@ -7,3 +8,4 @@ export declare const addColumnAfter: (getEditorContainerWidth: GetEditorContaine
 export declare const insertColumn: (getEditorContainerWidth: GetEditorContainerWidth) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean) => Command;
 export declare const createTable: () => Command;
+export declare const insertTableWithSize: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER | INPUT_METHOD.ASCII | INPUT_METHOD.TYPEAHEAD) => EditorCommand;

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

@@ -1,5 +1,6 @@
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
-import type { Command, GetEditorFeatureFlags, NextEditorPlugin } from '@atlaskit/editor-common/types';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Command, EditorCommand, GetEditorFeatureFlags, NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -22,6 +23,9 @@ export type TablePlugin = NextEditorPlugin<'table', {
     actions: {
         insertTable: InsertTableAction;
     };
+    commands: {
+        insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER | INPUT_METHOD.ASCII | INPUT_METHOD.TYPEAHEAD) => EditorCommand;
+    };
     dependencies: [
         AnalyticsPlugin,
         ContentInsertionPlugin,

package/dist/types-ts4.5/plugins/table/ui/DragHandle/index.d.ts

@@ -16,6 +16,7 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
     canDrag?: boolean;
+    isDragMenuTarget: boolean;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ isDragMenuTarget, tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/index.d.ts

@@ -18,7 +18,7 @@ export interface Props {
     canDrag?: boolean;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.5.11",
+  "version": "5.5.13",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/__tests__/unit/ui/FloatingDragMenu.tsx

@@ -33,7 +33,7 @@ import {
 import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../plugins/table-plugin';
-import FloatingDragMenu from '../../../plugins/table/ui/FloatingDragMenu';
+import { DragMenu } from '../../../plugins/table/ui/FloatingDragMenu/DragMenu';
 
 describe('FloatingDragMenu', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -72,14 +72,13 @@ describe('FloatingDragMenu', () => {
               editorRef,
             }}
           >
-            <FloatingDragMenu
+            <DragMenu
               editorView={editorView}
-              isOpen
+              isOpen={true}
               getEditorContainerWidth={jest.fn()}
               tableRef={tableRef as HTMLTableElement}
               tableNode={tableNode?.node}
               direction="row"
-              targetCellPosition={1}
             />
           </ReactEditorViewContext.Provider>,
         );
@@ -98,14 +97,13 @@ describe('FloatingDragMenu', () => {
               editorRef,
             }}
           >
-            <FloatingDragMenu
+            <DragMenu
               editorView={editorView}
-              isOpen
+              isOpen={true}
               getEditorContainerWidth={jest.fn()}
               tableRef={tableRef as HTMLTableElement}
               tableNode={tableNode?.node}
               direction="row"
-              targetCellPosition={1}
             />
           </ReactEditorViewContext.Provider>,
         );
@@ -127,14 +125,14 @@ describe('FloatingDragMenu', () => {
             editorRef,
           }}
         >
-          <FloatingDragMenu
+          <div id="drag-handle-button-row">dragmenu anchor</div>
+          <DragMenu
             editorView={editorView}
-            isOpen
+            isOpen={true}
             getEditorContainerWidth={jest.fn()}
             tableRef={tableRef as HTMLTableElement}
             tableNode={tableNode?.node}
             direction="row"
-            targetCellPosition={1}
           />
         </ReactEditorViewContext.Provider>,
       );
@@ -163,14 +161,13 @@ describe('FloatingDragMenu', () => {
             editorRef,
           }}
         >
-          <FloatingDragMenu
+          <DragMenu
             editorView={editorView}
-            isOpen
+            isOpen={true}
             getEditorContainerWidth={jest.fn()}
             tableRef={tableRef as HTMLTableElement}
             tableNode={tableNode?.node}
             direction="column"
-            targetCellPosition={1}
           />
         </ReactEditorViewContext.Provider>,
       );

package/src/plugins/table/commands/insert.ts

@@ -1,8 +1,13 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/custom-steps';
+import type {
+  EditorAnalyticsAPI,
+  INPUT_METHOD,
+} from '@atlaskit/editor-common/analytics';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import type {
   Command,
+  EditorCommand,
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -201,3 +206,24 @@ export const createTable = (): Command => (state, dispatch) => {
   return true;
 };
 // #endregion
+
+export const insertTableWithSize =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) =>
+  (
+    rowsCount: number,
+    colsCount: number,
+    inputMethod?:
+      | INPUT_METHOD.PICKER
+      | INPUT_METHOD.ASCII
+      | INPUT_METHOD.TYPEAHEAD,
+  ): EditorCommand => {
+    return ({ tr }) => {
+      const tableNode = createTableNode({
+        schema: tr.doc.type.schema,
+        rowsCount: rowsCount,
+        colsCount: colsCount,
+      });
+      const newTr = safeInsert(tableNode)(tr).scrollIntoView();
+      return newTr;
+    };
+  };

package/src/plugins/table/index.tsx

@@ -23,6 +23,7 @@ import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type {
   Command,
+  EditorCommand,
   EditorPlugin,
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
@@ -41,6 +42,7 @@ import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
+import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
 import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
@@ -78,6 +80,7 @@ import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
+
 export interface TablePluginOptions {
   tableOptions: PluginConfig;
   // experimental custom table resizing experience, set inside editor-core behind a feature flag
@@ -103,6 +106,16 @@ export type TablePlugin = NextEditorPlugin<
     actions: {
       insertTable: InsertTableAction;
     };
+    commands: {
+      insertTableWithSize: (
+        rowsCount: number,
+        colsCount: number,
+        inputMethod?:
+          | INPUT_METHOD.PICKER
+          | INPUT_METHOD.ASCII
+          | INPUT_METHOD.TYPEAHEAD,
+      ) => EditorCommand;
+    };
     dependencies: [
       AnalyticsPlugin,
       ContentInsertionPlugin,
@@ -152,6 +165,9 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
           );
         },
     },
+    commands: {
+      insertTableWithSize: insertTableWithSize(api?.analytics?.actions),
+    },
 
     nodes() {
       const tableNode = options?.tableResizingEnabled

package/src/plugins/table/ui/DragHandle/index.tsx

@@ -33,9 +33,11 @@ type DragHandleProps = {
   onMouseUp?: MouseEventHandler;
   editorView: EditorView;
   canDrag?: boolean;
+  isDragMenuTarget: boolean; // this is identify which current handle component is
 };
 
 export const DragHandle = ({
+  isDragMenuTarget,
   tableLocalId,
   direction = 'row',
   appearance = 'default',
@@ -131,9 +133,15 @@ export const DragHandle = ({
     canDrag,
   ]);
 
+  const showDragMenuAnchorId =
+    direction === 'row'
+      ? 'drag-handle-button-row'
+      : 'drag-handle-button-column';
+
   return (
     <>
       <button
+        id={isDragMenuTarget ? showDragMenuAnchorId : undefined}
         className={classnames(
           ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
           appearance,

package/src/plugins/table/ui/FloatingDragMenu/index.tsx

@@ -3,10 +3,9 @@ import React from 'react';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
 import type { TableDirection } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
@@ -34,7 +33,6 @@ const FloatingDragMenu = ({
   scrollableElement,
   editorView,
   isOpen,
-  tableRef,
   tableNode,
   direction,
   index,
@@ -50,24 +48,26 @@ const FloatingDragMenu = ({
     return null;
   }
 
-  const domAtPos = editorView.domAtPos.bind(editorView);
-  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  const targetHandleRef =
+    direction === 'row'
+      ? document.querySelector('#drag-handle-button-row')
+      : document.querySelector('#drag-handle-button-column');
+
+  if (
+    !targetHandleRef ||
+    !(editorView.state.selection instanceof CellSelection)
+  ) {
     return null;
   }
-  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  const offset =
-    direction === 'row'
-      ? [7, 0]
-      : index === (tableMap?.width || 1) - 1
-      ? [14, 0]
-      : [-14, 0];
+
+  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return (
     <Popup
-      alignX={direction === 'row' ? 'left' : 'center'}
-      alignY="top"
-      target={targetCellRef as HTMLElement}
+      alignX={direction === 'row' ? 'right' : undefined}
+      alignY={direction === 'row' ? 'start' : undefined}
+      target={targetHandleRef as HTMLElement}
       mountTo={mountPoint}
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -217,13 +217,10 @@ export const ColumnControls = ({
             zIndex: 99,
           }}
           data-column-control-index={hoveredCell.colIndex}
-          data-testid={
-            isHover
-              ? 'table-floating-column-control-hover'
-              : 'table-floating-column-control'
-          }
+          data-testid={'table-floating-column-control'}
         >
           <DragHandle
+            isDragMenuTarget={!isHover}
             direction="column"
             tableLocalId={localId || ''}
             indexes={indexes}

package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -239,13 +239,10 @@ const DragControlsComponent = ({
             position: 'relative',
             right: '-0.5px',
           }}
-          data-testid={
-            isHover
-              ? 'table-floating-row-drag-handle-hover'
-              : 'table-floating-row-drag-handle'
-          }
+          data-testid={'table-floating-row-drag-handle'}
         >
           <DragHandle
+            isDragMenuTarget={!isHover}
             direction="row"
             tableLocalId={currentNodeLocalId}
             indexes={indexes}