@atlaskit/editor-plugin-table 5.4.8 → 5.4.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 5.4.10
+
+### Patch Changes
+
+- [#58174](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58174) [`b409282ab2b8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b409282ab2b8) - Check pasted slice is a table element before trying to access table map
+
+## 5.4.9
+
+### Patch Changes
+
+- [#58068](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58068) [`3f88811fe28a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f88811fe28a) - Disable move commands in floating menu when there are merged cells
+
 ## 5.4.8
 
 ### Patch Changes

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

@@ -181,17 +181,21 @@ var getTableSelectionType = exports.getTableSelectionType = function getTableSel
   }
 };
 var getTableElementMoveTypeBySlice = exports.getTableElementMoveTypeBySlice = function getTableElementMoveTypeBySlice(slice, state) {
-  if (!slice.content.firstChild) {
+  var _state$schema$nodes = state.schema.nodes,
+    tableRow = _state$schema$nodes.tableRow,
+    table = _state$schema$nodes.table;
+
+  // 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;
   }
-  var schema = state.schema;
 
   // if the slice only contains one table row, assume it's a row
-  if (slice.content.childCount === 1 && slice.content.firstChild.type === schema.nodes.tableRow) {
+  if (slice.content.childCount === 1 && slice.content.firstChild.type === tableRow) {
     return 'row';
   }
-  var table = (0, _utils2.findTable)(state.tr.selection);
-  var map = _tableMap.TableMap.get(table.node);
+  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/ui/FloatingDragMenu/DragMenu.js

@@ -81,7 +81,9 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     dispatch = editorView.dispatch;
   var selection = state.selection;
   var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect);
+  var hasMergedCells = direction === 'row' ? _utils2.hasMergedCellsInRow : _utils2.hasMergedCellsInColumn;
+  var mergedCells = index !== undefined && hasMergedCells(index)(selection);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, mergedCells, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

@@ -30,7 +30,7 @@ var canIncrease = function canIncrease(index) {
   var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return index !== undefined && index < max;
 };
-var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect) {
+var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCells, tableMap, index, targetCellPosition, selectionRect) {
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -144,7 +144,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
-      disabled: !canMove(index),
+      disabled: hasMergedCells || !canMove(index),
       icon: icon,
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {

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

@@ -183,19 +183,26 @@ export const getTableSelectionType = selection => {
   }
 };
 export const getTableElementMoveTypeBySlice = (slice, state) => {
-  if (!slice.content.firstChild) {
-    return;
-  }
   const {
-    schema
+    schema: {
+      nodes: {
+        tableRow,
+        table
+      }
+    }
   } = state;
 
+  // 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 the slice only contains one table row, assume it's a row
-  if (slice.content.childCount === 1 && slice.content.firstChild.type === schema.nodes.tableRow) {
+  if (slice.content.childCount === 1 && slice.content.firstChild.type === tableRow) {
     return 'row';
   }
-  const table = findTable(state.tr.selection);
-  const map = TableMap.get(table.node);
+  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/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 } from '../../utils';
+import { 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']];
@@ -72,7 +72,9 @@ export const DragMenu = ({
     selection
   } = state;
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect);
+  const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+  const mergedCells = index !== undefined && hasMergedCells(index)(selection);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, mergedCells, tableMap, index, targetCellPosition, selectionRect);
   const {
     menuItems,
     menuCallback

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

@@ -16,7 +16,7 @@ import { deleteRows } from '../transforms';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
 const canDecrease = (index, min = 0) => index !== undefined && index > min;
 const canIncrease = (index, max = 0) => index !== undefined && index < max;
-export const getDragMenuConfig = (direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedCells, tableMap, index, targetCellPosition, selectionRect) => {
   const addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -129,7 +129,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, tableMap,
   }) => ({
     id: `move_${direction}_${label}`,
     title: `Move ${direction} ${label}`,
-    disabled: !canMove(index),
+    disabled: hasMergedCells || !canMove(index),
     icon,
     onClick: (state, dispatch) => {
       if (canMove(index)) {

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

@@ -174,17 +174,21 @@ export var getTableSelectionType = function getTableSelectionType(selection) {
   }
 };
 export var getTableElementMoveTypeBySlice = function getTableElementMoveTypeBySlice(slice, state) {
-  if (!slice.content.firstChild) {
+  var _state$schema$nodes = state.schema.nodes,
+    tableRow = _state$schema$nodes.tableRow,
+    table = _state$schema$nodes.table;
+
+  // 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;
   }
-  var schema = state.schema;
 
   // if the slice only contains one table row, assume it's a row
-  if (slice.content.childCount === 1 && slice.content.firstChild.type === schema.nodes.tableRow) {
+  if (slice.content.childCount === 1 && slice.content.firstChild.type === tableRow) {
     return 'row';
   }
-  var table = findTable(state.tr.selection);
-  var map = TableMap.get(table.node);
+  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/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 } from '../../utils';
+import { 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']];
@@ -73,7 +73,9 @@ export var DragMenu = function DragMenu(_ref) {
     dispatch = editorView.dispatch;
   var selection = state.selection;
   var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
-  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect);
+  var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+  var mergedCells = index !== undefined && hasMergedCells(index)(selection);
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, mergedCells, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

@@ -23,7 +23,7 @@ var canIncrease = function canIncrease(index) {
   var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return index !== undefined && index < max;
 };
-export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect) {
+export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCells, tableMap, index, targetCellPosition, selectionRect) {
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -137,7 +137,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
-      disabled: !canMove(index),
+      disabled: hasMergedCells || !canMove(index),
       icon: icon,
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {

package/dist/types/plugins/table/utils/drag-menu.d.ts

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

package/dist/types-ts4.5/plugins/table/utils/drag-menu.d.ts

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

package/package.json

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

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

@@ -276,22 +276,31 @@ export const getTableElementMoveTypeBySlice = (
   slice: Slice,
   state: EditorState,
 ) => {
-  if (!slice.content.firstChild) {
+  const {
+    schema: {
+      nodes: { tableRow, table },
+    },
+  } = state;
+
+  // 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;
   }
 
-  const { schema } = state;
-
   // if the slice only contains one table row, assume it's a row
   if (
     slice.content.childCount === 1 &&
-    slice.content.firstChild.type === schema.nodes.tableRow
+    slice.content.firstChild.type === tableRow
   ) {
     return 'row';
   }
 
-  const table = findTable(state.tr.selection)!;
-  const map = TableMap.get(table.node);
+  const currentTable = findTable(state.tr.selection)!;
+  const map = TableMap.get(currentTable.node);
   const slicedMap = TableMap.get(slice.content.firstChild);
 
   return map.width === slicedMap.width

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

@@ -26,7 +26,12 @@ 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 type { PluginConfig, TableDirection } from '../../types';
-import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
+import {
+  getSelectedColumnIndexes,
+  getSelectedRowIndexes,
+  hasMergedCellsInColumn,
+  hasMergedCellsInRow,
+} from '../../utils';
 import type { DragMenuConfig } from '../../utils/drag-menu';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
@@ -123,9 +128,15 @@ export const DragMenu = ({
     ? getSelectionRect(selection)!
     : findCellRectClosestToPos(selection.$from);
 
+  const hasMergedCells =
+    direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+
+  const mergedCells = index !== undefined && hasMergedCells(index)(selection);
+
   const dragMenuConfig = getDragMenuConfig(
     direction,
     getEditorContainerWidth,
+    mergedCells,
     tableMap,
     index,
     targetCellPosition,

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

@@ -57,6 +57,7 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
 export const getDragMenuConfig = (
   direction: TableDirection,
   getEditorContainerWidth: GetEditorContainerWidth,
+  hasMergedCells: boolean,
   tableMap?: TableMap,
   index?: number,
   targetCellPosition?: number,
@@ -95,7 +96,12 @@ export const getDragMenuConfig = (
   const moveOptions =
     direction === 'row'
       ? [
-          { label: 'up', offset: -1, canMove: canDecrease, icon: ArrowUpIcon },
+          {
+            label: 'up',
+            offset: -1,
+            canMove: canDecrease,
+            icon: ArrowUpIcon,
+          },
           {
             label: 'down',
             offset: 1,
@@ -190,7 +196,7 @@ export const getDragMenuConfig = (
     ...moveOptions.map(({ label, offset, canMove, icon }) => ({
       id: `move_${direction}_${label}`,
       title: `Move ${direction} ${label}`,
-      disabled: !canMove(index),
+      disabled: hasMergedCells || !canMove(index),
       icon,
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (canMove(index)) {