@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

package/src/commands/sort.ts

@@ -1,112 +1,94 @@
 import type { CardAttributes, DataType, UrlType } from '@atlaskit/adf-schema';
-import {
-  TableSortOrder as SortOrder,
-  TableSortStep,
-} from '@atlaskit/custom-steps';
+import { TableSortOrder as SortOrder, TableSortStep } from '@atlaskit/custom-steps';
 import type { Command } from '@atlaskit/editor-common/types';
 import { createCompareNodes } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type {
-  EditorState,
-  Transaction,
-} from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
-  convertArrayOfRowsToTableNode,
-  convertTableNodeToArrayOfRows,
-  findCellRectClosestToPos,
-  findTable,
-  getSelectionRect,
-  isSelectionType,
+	convertArrayOfRowsToTableNode,
+	convertTableNodeToArrayOfRows,
+	findCellRectClosestToPos,
+	findTable,
+	getSelectionRect,
+	isSelectionType,
 } from '@atlaskit/editor-tables/utils';
 
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import type { TablePluginState } from '../types';
 
-const createGetInlineCardTextFromStore = (
-  attrs: CardAttributes,
-): string | null => {
-  const { data } = attrs as DataType;
-  if (data && ((data as any).name || (data as any).title)) {
-    return (data as any).name || (data as any).title;
-  }
+const createGetInlineCardTextFromStore = (attrs: CardAttributes): string | null => {
+	const { data } = attrs as DataType;
+	if (data && ((data as any).name || (data as any).title)) {
+		return (data as any).name || (data as any).title;
+	}
 
-  const { url: cardUrl } = attrs as UrlType;
-  return cardUrl;
+	const { url: cardUrl } = attrs as UrlType;
+	return cardUrl;
 };
 
-export const sortByColumn = (
-  columnIndex: number,
-  order: SortOrder = SortOrder.DESC,
-): Command =>
-  createCommand(
-    () => ({
-      type: 'SORT_TABLE',
-      data: {
-        ordering: {
-          columnIndex,
-          order,
-        },
-      },
-    }),
-    (tr: Transaction, state: EditorState) => {
-      const table = findTable(tr.selection)!;
-      if (!table || !table.node) {
-        return tr;
-      }
+export const sortByColumn = (columnIndex: number, order: SortOrder = SortOrder.DESC): Command =>
+	createCommand(
+		() => ({
+			type: 'SORT_TABLE',
+			data: {
+				ordering: {
+					columnIndex,
+					order,
+				},
+			},
+		}),
+		(tr: Transaction, state: EditorState) => {
+			const table = findTable(tr.selection)!;
+			if (!table || !table.node) {
+				return tr;
+			}
 
-      const selectionRect = isSelectionType(tr.selection, 'cell')
-        ? getSelectionRect(tr.selection)!
-        : findCellRectClosestToPos(tr.selection.$from);
+			const selectionRect = isSelectionType(tr.selection, 'cell')
+				? getSelectionRect(tr.selection)!
+				: findCellRectClosestToPos(tr.selection.$from);
 
-      if (!selectionRect) {
-        return tr;
-      }
+			if (!selectionRect) {
+				return tr;
+			}
 
-      const tablePluginState: TablePluginState = getPluginState(state);
-      const tableArray = convertTableNodeToArrayOfRows(table.node);
+			const tablePluginState: TablePluginState = getPluginState(state);
+			const tableArray = convertTableNodeToArrayOfRows(table.node);
 
-      let headerRow;
-      if (tablePluginState.isHeaderRowEnabled) {
-        headerRow = tableArray.shift();
-      }
-      const compareNodesInOrder = createCompareNodes(
-        {
-          getInlineCardTextFromStore: createGetInlineCardTextFromStore,
-        },
-        order,
-      );
+			let headerRow;
+			if (tablePluginState.isHeaderRowEnabled) {
+				headerRow = tableArray.shift();
+			}
+			const compareNodesInOrder = createCompareNodes(
+				{
+					getInlineCardTextFromStore: createGetInlineCardTextFromStore,
+				},
+				order,
+			);
 
-      const sortedTable = tableArray.sort(
-        (rowA: Array<PMNode | null>, rowB: Array<PMNode | null>) =>
-          compareNodesInOrder(rowA[columnIndex], rowB[columnIndex]),
-      );
+			const sortedTable = tableArray.sort(
+				(rowA: Array<PMNode | null>, rowB: Array<PMNode | null>) =>
+					compareNodesInOrder(rowA[columnIndex], rowB[columnIndex]),
+			);
 
-      if (headerRow) {
-        sortedTable.unshift(headerRow);
-      }
+			if (headerRow) {
+				sortedTable.unshift(headerRow);
+			}
 
-      const newTableNode = convertArrayOfRowsToTableNode(
-        table.node,
-        sortedTable,
-      );
+			const newTableNode = convertArrayOfRowsToTableNode(table.node, sortedTable);
 
-      tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTableNode);
+			tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTableNode);
 
-      const pos = TableMap.get(table.node).positionAt(
-        selectionRect.top,
-        columnIndex,
-        table.node,
-      );
+			const pos = TableMap.get(table.node).positionAt(selectionRect.top, columnIndex, table.node);
 
-      const prev = tablePluginState.ordering;
-      const next = {
-        columnIndex,
-        order,
-      };
+			const prev = tablePluginState.ordering;
+			const next = {
+				columnIndex,
+				order,
+			};
 
-      tr.step(new TableSortStep(table.pos, prev, next));
-      return tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos)));
-    },
-  );
+			tr.step(new TableSortStep(table.pos, prev, next));
+			return tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos)));
+		},
+	);

package/src/commands/split-cell.ts

@@ -9,20 +9,20 @@ import type { TablePluginState } from '../types';
  * We are using editor-tables splitCellWithType that allows you to choose what cell type should be.
  */
 export const splitCell: Command = (state, dispatch) => {
-  const tableState: TablePluginState = getPluginState(state);
-  const { tableHeader, tableCell } = state.schema.nodes;
-  if (dispatch) {
-    return splitCellWithType(({ row, col }: { row: number; col: number }) => {
-      if (
-        (row === 0 && tableState.isHeaderRowEnabled) ||
-        (col === 0 && tableState.isHeaderColumnEnabled)
-      ) {
-        return tableHeader;
-      }
+	const tableState: TablePluginState = getPluginState(state);
+	const { tableHeader, tableCell } = state.schema.nodes;
+	if (dispatch) {
+		return splitCellWithType(({ row, col }: { row: number; col: number }) => {
+			if (
+				(row === 0 && tableState.isHeaderRowEnabled) ||
+				(col === 0 && tableState.isHeaderColumnEnabled)
+			) {
+				return tableHeader;
+			}
 
-      return tableCell;
-    })(state, dispatch);
-  }
+			return tableCell;
+		})(state, dispatch);
+	}
 
-  return true;
+	return true;
 };

package/src/commands/toggle.ts

@@ -16,90 +16,92 @@ import { META_KEYS } from '../pm-plugins/table-analytics';
  * default -> wide -> full-width -> default
  */
 export const getNextLayout = (currentLayout: TableLayout) => {
-  switch (currentLayout) {
-    case 'default':
-      return 'wide';
-    case 'wide':
-      return 'full-width';
-    case 'full-width':
-      return 'default';
-    default:
-      return 'default';
-  }
+	switch (currentLayout) {
+		case 'default':
+			return 'wide';
+		case 'wide':
+			return 'full-width';
+		case 'full-width':
+			return 'default';
+		default:
+			return 'default';
+	}
 };
 // #endregion
 
 // #region Actions
 export const toggleHeaderRow: Command = (state, dispatch): boolean =>
-  toggleHeader('row')(state, (tr) =>
-    createCommand({ type: 'TOGGLE_HEADER_ROW' }, () =>
-      tr.setMeta('scrollIntoView', false),
-    )(state, dispatch),
-  );
+	toggleHeader('row')(state, (tr) =>
+		createCommand({ type: 'TOGGLE_HEADER_ROW' }, () => tr.setMeta('scrollIntoView', false))(
+			state,
+			dispatch,
+		),
+	);
 
 export const toggleHeaderColumn: Command = (state, dispatch): boolean =>
-  toggleHeader('column')(state, (tr) =>
-    createCommand({ type: 'TOGGLE_HEADER_COLUMN' }, () =>
-      tr.setMeta('scrollIntoView', false),
-    )(state, dispatch),
-  );
+	toggleHeader('column')(state, (tr) =>
+		createCommand({ type: 'TOGGLE_HEADER_COLUMN' }, () => tr.setMeta('scrollIntoView', false))(
+			state,
+			dispatch,
+		),
+	);
 
 export const toggleNumberColumn: Command = (state, dispatch) => {
-  const { tr } = state;
-  const { node, pos } = findTable(state.selection)!;
-  const isNumberedColumnEnabled = node.attrs.isNumberColumnEnabled;
+	const { tr } = state;
+	const { node, pos } = findTable(state.selection)!;
+	const isNumberedColumnEnabled = node.attrs.isNumberColumnEnabled;
 
-  tr.setNodeMarkup(pos, state.schema.nodes.table, {
-    ...node.attrs,
-    isNumberColumnEnabled: !isNumberedColumnEnabled,
-  });
-  tr.setMeta('scrollIntoView', false);
+	tr.setNodeMarkup(pos, state.schema.nodes.table, {
+		...node.attrs,
+		isNumberColumnEnabled: !isNumberedColumnEnabled,
+	});
+	tr.setMeta('scrollIntoView', false);
 
-  const tableOverflowChangeTriggerName = isNumberedColumnEnabled
-    ? TABLE_OVERFLOW_CHANGE_TRIGGER.DISABLED_NUMBERED_COLUMN
-    : TABLE_OVERFLOW_CHANGE_TRIGGER.ENABLED_NUMBERED_COLUMN;
-  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-    name: tableOverflowChangeTriggerName,
-  });
+	const tableOverflowChangeTriggerName = isNumberedColumnEnabled
+		? TABLE_OVERFLOW_CHANGE_TRIGGER.DISABLED_NUMBERED_COLUMN
+		: TABLE_OVERFLOW_CHANGE_TRIGGER.ENABLED_NUMBERED_COLUMN;
+	tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+		name: tableOverflowChangeTriggerName,
+	});
 
-  if (dispatch) {
-    dispatch(tr);
-  }
-  return true;
+	if (dispatch) {
+		dispatch(tr);
+	}
+	return true;
 };
 
 export const toggleTableLayout: Command = (state, dispatch): boolean => {
-  const table = findTable(state.selection);
-  if (!table) {
-    return false;
-  }
-  const layout = getNextLayout(table.node.attrs.layout);
+	const table = findTable(state.selection);
+	if (!table) {
+		return false;
+	}
+	const layout = getNextLayout(table.node.attrs.layout);
 
-  return createCommand(
-    {
-      type: 'SET_TABLE_LAYOUT',
-      data: {
-        layout,
-      },
-    },
-    (tr: Transaction) => {
-      tr.setNodeMarkup(table.pos, state.schema.nodes.table, {
-        ...table.node.attrs,
-        layout,
-      });
-      tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-        name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED,
-      });
-      return tr.setMeta('scrollIntoView', false);
-    },
-  )(state, dispatch);
+	return createCommand(
+		{
+			type: 'SET_TABLE_LAYOUT',
+			data: {
+				layout,
+			},
+		},
+		(tr: Transaction) => {
+			tr.setNodeMarkup(table.pos, state.schema.nodes.table, {
+				...table.node.attrs,
+				layout,
+			});
+			tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+				name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED,
+			});
+			return tr.setMeta('scrollIntoView', false);
+		},
+	)(state, dispatch);
 };
 
 export const toggleContextualMenu = () =>
-  createCommand(
-    {
-      type: 'TOGGLE_CONTEXTUAL_MENU',
-    },
-    (tr) => tr.setMeta('addToHistory', false),
-  );
+	createCommand(
+		{
+			type: 'TOGGLE_CONTEXTUAL_MENU',
+		},
+		(tr) => tr.setMeta('addToHistory', false),
+	);
 // #endregion