@atlaskit/editor-plugin-table 5.5.10 → 5.5.12

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+- [#60830](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60830) [`5472a318103f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5472a318103f) - force colgroup to update after column drop to ensure the correct column width is shown
+- [#60767](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60767) [`737f3666a35d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/737f3666a35d) - Ensure the target that is being pasted is a table
+- [#60717](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60717) [`15f7bd8c548a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/15f7bd8c548a) - disable sort in drag menu when there is merged cell in table
+
 ## 5.5.10
 
 ### 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/commands/misc.js

@@ -185,17 +185,17 @@ var getTableElementMoveTypeBySlice = exports.getTableElementMoveTypeBySlice = fu
   var _state$schema$nodes = state.schema.nodes,
     tableRow = _state$schema$nodes.tableRow,
     table = _state$schema$nodes.table;
+  var currentTable = (0, _utils2.findTable)(state.tr.selection);
 
   // check if copied slice is a table or table row
-  if (!slice.content.firstChild || slice.content.firstChild.type !== table && slice.content.firstChild.type !== tableRow) {
-    return;
+  if (!slice.content.firstChild || slice.content.firstChild.type !== table && slice.content.firstChild.type !== tableRow || !currentTable) {
+    return undefined;
   }
 
   // if the slice only contains one table row, assume it's a row
   if (slice.content.childCount === 1 && slice.content.firstChild.type === tableRow) {
     return 'row';
   }
-  var currentTable = (0, _utils2.findTable)(state.tr.selection);
   var map = _tableMap.TableMap.get(currentTable.node);
   var slicedMap = _tableMap.TableMap.get(slice.content.firstChild);
   return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;

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/pm-plugins/analytics/plugin.js

@@ -45,7 +45,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
           var type = (0, _misc.getTableElementMoveTypeBySlice)(slice, state);
 
           // if the selection wasn't in the first cell of a row or column, don't count it
-          if (!(0, _misc.isInsideFirstCellOfRowOrColumn)(state.selection, type)) {
+          if (!type || !(0, _misc.isInsideFirstCellOfRowOrColumn)(state.selection, type)) {
             return;
           }
           var count = (0, _misc.countCellsInSlice)(slice, schema, type);

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -15,6 +15,7 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _utils2 = require("../../utils");
 var _pluginFactory = require("../plugin-factory");
 var _pluginKey = require("../plugin-key");
+var _utils3 = require("../table-resizing/utils");
 var _actions = require("./actions");
 var _commands = require("./commands");
 var _consts = require("./consts");
@@ -189,6 +190,17 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
               sourceIndex = _sourceIndexes[0];
             requestAnimationFrame(function () {
               (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+
+              // force a colgroup update here, otherwise dropped columns don't have
+              // the correct width immediately after the drop
+              if (sourceType === 'table-column') {
+                var _getTablePluginState5 = (0, _pluginFactory.getPluginState)(editorView.state),
+                  tableRef = _getTablePluginState5.tableRef,
+                  tableNode = _getTablePluginState5.tableNode;
+                if (tableRef && tableNode) {
+                  (0, _utils3.insertColgroupFromNode)(tableRef, tableNode);
+                }
+              }
               editorView.focus();
             });
           }

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

@@ -84,7 +84,8 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
   var hasMergedCells = direction === 'row' ? _utils2.hasMergedCellsInRow : _utils2.hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, editorView, tableMap, index, targetCellPosition, selectionRect);
+  var hasMergedCellsInTable = (0, _utils2.getMergedCellsPositions)(state.tr).length > 0;
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

package/dist/cjs/plugins/table/utils/drag-menu.js

@@ -42,7 +42,7 @@ var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   }
   return false;
 };
-var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, editorView, tableMap, index, targetCellPosition, selectionRect) {
+var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect) {
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -190,6 +190,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     return {
       id: "sort_column_".concat(order),
       title: "Sort ".concat(label),
+      disabled: hasMergedCellsInTable,
       icon: icon,
       onClick: function onClick(state, dispatch) {
         (0, _commands.sortByColumn)(index, order)(state, dispatch);

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/commands/misc.js

@@ -191,17 +191,17 @@ export const getTableElementMoveTypeBySlice = (slice, state) => {
       }
     }
   } = state;
+  const currentTable = findTable(state.tr.selection);
 
   // check if copied slice is a table or table row
-  if (!slice.content.firstChild || slice.content.firstChild.type !== table && slice.content.firstChild.type !== tableRow) {
-    return;
+  if (!slice.content.firstChild || slice.content.firstChild.type !== table && slice.content.firstChild.type !== tableRow || !currentTable) {
+    return undefined;
   }
 
   // if the slice only contains one table row, assume it's a row
   if (slice.content.childCount === 1 && slice.content.firstChild.type === tableRow) {
     return 'row';
   }
-  const currentTable = findTable(state.tr.selection);
   const map = TableMap.get(currentTable.node);
   const slicedMap = TableMap.get(slice.content.firstChild);
   return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;

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/pm-plugins/analytics/plugin.js

@@ -41,7 +41,7 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent) => new SafePlugin
         const type = getTableElementMoveTypeBySlice(slice, state);
 
         // if the selection wasn't in the first cell of a row or column, don't count it
-        if (!isInsideFirstCellOfRowOrColumn(state.selection, type)) {
+        if (!type || !isInsideFirstCellOfRowOrColumn(state.selection, type)) {
           return;
         }
         const count = countCellsInSlice(slice, schema, type);

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -6,6 +6,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import { findNearestCellIndexToPoint, hasMergedCellsInBetween } from '../../utils';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
+import { insertColgroupFromNode } from '../table-resizing/utils';
 import { DragAndDropActionType } from './actions';
 import { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
 import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT, DropTargetType } from './consts';
@@ -190,6 +191,18 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             const [sourceIndex] = sourceIndexes;
             requestAnimationFrame(() => {
               moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+
+              // force a colgroup update here, otherwise dropped columns don't have
+              // the correct width immediately after the drop
+              if (sourceType === 'table-column') {
+                const {
+                  tableRef,
+                  tableNode
+                } = getTablePluginState(editorView.state);
+                if (tableRef && tableNode) {
+                  insertColgroupFromNode(tableRef, tableNode);
+                }
+              }
               editorView.focus();
             });
           }

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

@@ -7,7 +7,7 @@ import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@at
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
-import { getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 const groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'], ['sort_column_asc', 'sort_column_desc']];
@@ -75,7 +75,8 @@ export const DragMenu = ({
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, editorView, tableMap, index, targetCellPosition, selectionRect);
+  const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect);
   const {
     menuItems,
     menuCallback

package/dist/es2019/plugins/table/utils/drag-menu.js

@@ -28,7 +28,7 @@ const isDistributeColumnsEnabled = state => {
   }
   return false;
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, editorView, tableMap, index, targetCellPosition, selectionRect) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect) => {
   const addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -172,6 +172,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, e
   }) => ({
     id: `sort_column_${order}`,
     title: `Sort ${label}`,
+    disabled: hasMergedCellsInTable,
     icon,
     onClick: (state, dispatch) => {
       sortByColumn(index, order)(state, dispatch);

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/commands/misc.js

@@ -178,17 +178,17 @@ export var getTableElementMoveTypeBySlice = function getTableElementMoveTypeBySl
   var _state$schema$nodes = state.schema.nodes,
     tableRow = _state$schema$nodes.tableRow,
     table = _state$schema$nodes.table;
+  var currentTable = findTable(state.tr.selection);
 
   // check if copied slice is a table or table row
-  if (!slice.content.firstChild || slice.content.firstChild.type !== table && slice.content.firstChild.type !== tableRow) {
-    return;
+  if (!slice.content.firstChild || slice.content.firstChild.type !== table && slice.content.firstChild.type !== tableRow || !currentTable) {
+    return undefined;
   }
 
   // if the slice only contains one table row, assume it's a row
   if (slice.content.childCount === 1 && slice.content.firstChild.type === tableRow) {
     return 'row';
   }
-  var currentTable = findTable(state.tr.selection);
   var map = TableMap.get(currentTable.node);
   var slicedMap = TableMap.get(slice.content.firstChild);
   return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;

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/pm-plugins/analytics/plugin.js

@@ -39,7 +39,7 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
           var type = getTableElementMoveTypeBySlice(slice, state);
 
           // if the selection wasn't in the first cell of a row or column, don't count it
-          if (!isInsideFirstCellOfRowOrColumn(state.selection, type)) {
+          if (!type || !isInsideFirstCellOfRowOrColumn(state.selection, type)) {
             return;
           }
           var count = countCellsInSlice(slice, schema, type);

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -10,6 +10,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import { findNearestCellIndexToPoint, hasMergedCellsInBetween } from '../../utils';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
+import { insertColgroupFromNode } from '../table-resizing/utils';
 import { DragAndDropActionType } from './actions';
 import { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
 import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT, DropTargetType } from './consts';
@@ -182,6 +183,17 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
               sourceIndex = _sourceIndexes[0];
             requestAnimationFrame(function () {
               moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+
+              // force a colgroup update here, otherwise dropped columns don't have
+              // the correct width immediately after the drop
+              if (sourceType === 'table-column') {
+                var _getTablePluginState5 = getTablePluginState(editorView.state),
+                  tableRef = _getTablePluginState5.tableRef,
+                  tableNode = _getTablePluginState5.tableNode;
+                if (tableRef && tableNode) {
+                  insertColgroupFromNode(tableRef, tableNode);
+                }
+              }
               editorView.focus();
             });
           }

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

@@ -8,7 +8,7 @@ import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@at
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
-import { getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 var groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'], ['sort_column_asc', 'sort_column_desc']];
@@ -76,7 +76,8 @@ export var DragMenu = function DragMenu(_ref) {
   var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
-  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, editorView, tableMap, index, targetCellPosition, selectionRect);
+  var hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

package/dist/esm/plugins/table/utils/drag-menu.js

@@ -35,7 +35,7 @@ var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   }
   return false;
 };
-export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, editorView, tableMap, index, targetCellPosition, selectionRect) {
+export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect) {
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -183,6 +183,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     return {
       id: "sort_column_".concat(order),
       title: "Sort ".concat(label),
+      disabled: hasMergedCellsInTable,
       icon: icon,
       onClick: function onClick(state, dispatch) {
         sortByColumn(index, order)(state, dispatch);

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/utils/drag-menu.d.ts

@@ -8,4 +8,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<IconProps>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];

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/utils/drag-menu.d.ts

@@ -8,4 +8,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<IconProps>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.5.10",
+  "version": "5.5.12",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,9 +44,9 @@
     "@atlaskit/pragmatic-drag-and-drop": "^0.25.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^0.8.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
-    "@atlaskit/primitives": "^1.14.0",
+    "@atlaskit/primitives": "^1.15.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@atlaskit/tooltip": "^18.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

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/commands/misc.ts

@@ -283,14 +283,16 @@ export const getTableElementMoveTypeBySlice = (
       nodes: { tableRow, table },
     },
   } = state;
+  const currentTable = findTable(state.tr.selection);
 
   // check if copied slice is a table or table row
   if (
     !slice.content.firstChild ||
     (slice.content.firstChild.type !== table &&
-      slice.content.firstChild.type !== tableRow)
+      slice.content.firstChild.type !== tableRow) ||
+    !currentTable
   ) {
-    return;
+    return undefined;
   }
 
   // if the slice only contains one table row, assume it's a row
@@ -301,7 +303,6 @@ export const getTableElementMoveTypeBySlice = (
     return 'row';
   }
 
-  const currentTable = findTable(state.tr.selection)!;
   const map = TableMap.get(currentTable.node);
   const slicedMap = TableMap.get(slice.content.firstChild);
 

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/pm-plugins/analytics/plugin.ts

@@ -59,7 +59,7 @@ export const createPlugin = (
           const type = getTableElementMoveTypeBySlice(slice, state);
 
           // if the selection wasn't in the first cell of a row or column, don't count it
-          if (!isInsideFirstCellOfRowOrColumn(state.selection, type)) {
+          if (!type || !isInsideFirstCellOfRowOrColumn(state.selection, type)) {
             return;
           }
 

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -16,6 +16,7 @@ import {
 } from '../../utils';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
+import { insertColgroupFromNode } from '../table-resizing/utils';
 
 import { DragAndDropActionType } from './actions';
 import {
@@ -236,6 +237,17 @@ export const createPlugin = (
                 tr,
               )(editorView.state, editorView.dispatch);
 
+              // force a colgroup update here, otherwise dropped columns don't have
+              // the correct width immediately after the drop
+              if (sourceType === 'table-column') {
+                const { tableRef, tableNode } = getTablePluginState(
+                  editorView.state,
+                );
+                if (tableRef && tableNode) {
+                  insertColgroupFromNode(tableRef, tableNode);
+                }
+              }
+
               editorView.focus();
             });
           },

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

@@ -27,6 +27,7 @@ import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import type { PluginConfig, TableDirection } from '../../types';
 import {
+  getMergedCellsPositions,
   getSelectedColumnIndexes,
   getSelectedRowIndexes,
   hasMergedCellsInColumn,
@@ -136,10 +137,13 @@ export const DragMenu = ({
   const shouldMoveDisabled =
     index !== undefined && hasMergedCells(index)(selection);
 
+  const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+
   const dragMenuConfig = getDragMenuConfig(
     direction,
     getEditorContainerWidth,
     !!canDrag && !shouldMoveDisabled,
+    hasMergedCellsInTable,
     editorView,
     tableMap,
     index,

package/src/plugins/table/utils/drag-menu.ts

@@ -73,6 +73,7 @@ export const getDragMenuConfig = (
   direction: TableDirection,
   getEditorContainerWidth: GetEditorContainerWidth,
   canDrag: boolean,
+  hasMergedCellsInTable: boolean,
   editorView: EditorView,
   tableMap?: TableMap,
   index?: number,
@@ -248,6 +249,7 @@ export const getDragMenuConfig = (
     ...sortOptions.map(({ label, order, icon }) => ({
       id: `sort_column_${order}`,
       title: `Sort ${label}`,
+      disabled: hasMergedCellsInTable,
       icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         sortByColumn(index!, order)(state, dispatch);