@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

package/src/pm-plugins/view-mode-sort/utils.ts

@@ -1,146 +1,137 @@
 import { SortOrder } from '@atlaskit/editor-common/types';
 import {
-  convertProsemirrorTableNodeToArrayOfRows,
-  createCompareNodes,
+	convertProsemirrorTableNodeToArrayOfRows,
+	createCompareNodes,
 } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import {
-  IS_DISABLED_CLASS_NAME,
-  SORT_INDEX_DATA_ATTRIBUTE,
-  SORTING_ICON_CLASS_NAME,
+	IS_DISABLED_CLASS_NAME,
+	SORT_INDEX_DATA_ATTRIBUTE,
+	SORTING_ICON_CLASS_NAME,
 } from './consts';
 import type { TableSortMeta } from './types';
 
-export const unsort = (
-  oldOrder: { index: number; value: number }[],
-  tableElement: HTMLElement,
-) => {
-  const rows = tableElement.querySelectorAll('tr');
-  const tbody = tableElement.querySelector('tbody');
+export const unsort = (oldOrder: { index: number; value: number }[], tableElement: HTMLElement) => {
+	const rows = tableElement.querySelectorAll('tr');
+	const tbody = tableElement.querySelector('tbody');
 
-  const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
-  sortedOrder.forEach((item) => {
-    tbody?.appendChild(rows[item.index + 1]);
-  });
+	const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
+	sortedOrder.forEach((item) => {
+		tbody?.appendChild(rows[item.index + 1]);
+	});
 };
 
 export const getSortOrderFromTable = (
-  tableNode: PMNode,
-  sortIndex: number,
-  direction: SortOrder,
+	tableNode: PMNode,
+	sortIndex: number,
+	direction: SortOrder,
 ) => {
-  const tableArray = convertProsemirrorTableNodeToArrayOfRows(tableNode);
-  tableArray.shift(); // remove header row
+	const tableArray = convertProsemirrorTableNodeToArrayOfRows(tableNode);
+	tableArray.shift(); // remove header row
 
-  // Keep track of the origin row index
-  const tableArrayWithIndex = tableArray.map((node, index) => ({
-    node,
-    originalIndex: index,
-  }));
+	// Keep track of the origin row index
+	const tableArrayWithIndex = tableArray.map((node, index) => ({
+		node,
+		originalIndex: index,
+	}));
 
-  const compareNodesInOrder = createCompareNodes(
-    {
-      // TODO - add inline card support
-      getInlineCardTextFromStore() {
-        return null;
-      },
-    },
-    direction,
-  );
-  const order = tableArrayWithIndex
-    .sort((a, b) => {
-      return compareNodesInOrder(a.node[sortIndex], b.node[sortIndex]);
-    })
-    .map((tableRow, index) => ({
-      value: tableRow.originalIndex,
-      index,
-    }));
-  return [
-    // Ensures the first tr is always first in the order
-    { value: -1, index: -1 },
-    ...order,
-  ];
+	const compareNodesInOrder = createCompareNodes(
+		{
+			// TODO - add inline card support
+			getInlineCardTextFromStore() {
+				return null;
+			},
+		},
+		direction,
+	);
+	const order = tableArrayWithIndex
+		.sort((a, b) => {
+			return compareNodesInOrder(a.node[sortIndex], b.node[sortIndex]);
+		})
+		.map((tableRow, index) => ({
+			value: tableRow.originalIndex,
+			index,
+		}));
+	return [
+		// Ensures the first tr is always first in the order
+		{ value: -1, index: -1 },
+		...order,
+	];
 };
 
-export const toggleSort = (
-  view: EditorView,
-  event: Event,
-  pluginState: TableSortMeta,
-) => {
-  const target = event.target;
-  if (!(target instanceof HTMLElement)) {
-    return;
-  }
-  const widget = target.closest(`.${SORTING_ICON_CLASS_NAME}`);
-  if (widget?.classList.contains(IS_DISABLED_CLASS_NAME) || !widget) {
-    return;
-  }
-  let dataSortIndex = target
-    ?.closest('.ProseMirror-widget')
-    ?.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
-  const tr = view.state.tr;
-  const tableElement = target.closest('table');
-  if (!tableElement || !dataSortIndex) {
-    return;
-  }
-  const tablePos = view.posAtDOM(tableElement, 0);
-  const tableNode = view.state.doc.nodeAt(tablePos - 1);
-  const tableId = tableNode?.attrs.localId;
+export const toggleSort = (view: EditorView, event: Event, pluginState: TableSortMeta) => {
+	const target = event.target;
+	if (!(target instanceof HTMLElement)) {
+		return;
+	}
+	const widget = target.closest(`.${SORTING_ICON_CLASS_NAME}`);
+	if (widget?.classList.contains(IS_DISABLED_CLASS_NAME) || !widget) {
+		return;
+	}
+	let dataSortIndex = target
+		?.closest('.ProseMirror-widget')
+		?.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
+	const tr = view.state.tr;
+	const tableElement = target.closest('table');
+	if (!tableElement || !dataSortIndex) {
+		return;
+	}
+	const tablePos = view.posAtDOM(tableElement, 0);
+	const tableNode = view.state.doc.nodeAt(tablePos - 1);
+	const tableId = tableNode?.attrs.localId;
 
-  if (!tableId || !tableNode || tableNode?.type?.name !== 'table') {
-    return;
-  }
+	if (!tableId || !tableNode || tableNode?.type?.name !== 'table') {
+		return;
+	}
 
-  let { index, direction, order: oldOrder } = pluginState?.[tableId] || {};
+	let { index, direction, order: oldOrder } = pluginState?.[tableId] || {};
 
-  // Unsort if there was already a sort
-  if (direction !== SortOrder.NO_ORDER && oldOrder !== undefined) {
-    unsort(oldOrder, tableElement);
-  }
+	// Unsort if there was already a sort
+	if (direction !== SortOrder.NO_ORDER && oldOrder !== undefined) {
+		unsort(oldOrder, tableElement);
+	}
 
-  const sortIndex = parseInt(dataSortIndex);
-  if (sortIndex === index) {
-    switch (direction) {
-      case SortOrder.NO_ORDER:
-        direction = SortOrder.ASC;
-        break;
-      case SortOrder.ASC:
-        direction = SortOrder.DESC;
-        break;
-      case SortOrder.DESC:
-        direction = SortOrder.NO_ORDER;
-        break;
-    }
-  } else {
-    direction = SortOrder.ASC; // default direction when a new index is clicked
-  }
+	const sortIndex = parseInt(dataSortIndex);
+	if (sortIndex === index) {
+		switch (direction) {
+			case SortOrder.NO_ORDER:
+				direction = SortOrder.ASC;
+				break;
+			case SortOrder.ASC:
+				direction = SortOrder.DESC;
+				break;
+			case SortOrder.DESC:
+				direction = SortOrder.NO_ORDER;
+				break;
+		}
+	} else {
+		direction = SortOrder.ASC; // default direction when a new index is clicked
+	}
 
-  const order = getSortOrderFromTable(tableNode, sortIndex, direction);
+	const order = getSortOrderFromTable(tableNode, sortIndex, direction);
 
-  if (direction === SortOrder.NO_ORDER) {
-    tr.setMeta('tableSortMeta', {
-      [tableId]: {},
-    });
-  } else {
-    tr.setMeta('tableSortMeta', {
-      [tableId]: {
-        index: sortIndex,
-        direction,
-        order,
-        tableElement,
-      },
-    });
-  }
-  view.dispatch(tr);
+	if (direction === SortOrder.NO_ORDER) {
+		tr.setMeta('tableSortMeta', {
+			[tableId]: {},
+		});
+	} else {
+		tr.setMeta('tableSortMeta', {
+			[tableId]: {
+				index: sortIndex,
+				direction,
+				order,
+				tableElement,
+			},
+		});
+	}
+	view.dispatch(tr);
 };
 
 export const getTableElements = (tableId: string) => {
-  const tableElement = document.querySelector(
-    `table[data-table-local-id="${tableId}"]`,
-  );
-  const tbody = tableElement?.querySelector('tbody');
-  const rows = tableElement?.querySelectorAll('tr');
-  return { tbody, rows };
+	const tableElement = document.querySelector(`table[data-table-local-id="${tableId}"]`);
+	const tbody = tableElement?.querySelector('tbody');
+	const rows = tableElement?.querySelectorAll('tr');
+	return { tbody, rows };
 };

package/src/reducer.ts

@@ -1,159 +1,143 @@
 import { defaultTableSelection } from './pm-plugins/default-table-selection';
 import type { TablePluginAction, TablePluginState } from './types';
 
-export default (
-  pluginState: TablePluginState,
-  action: TablePluginAction,
-): TablePluginState => {
-  switch (action.type) {
-    case 'TOGGLE_HEADER_COLUMN':
-      return {
-        ...pluginState,
-        isHeaderColumnEnabled: !pluginState.isHeaderColumnEnabled,
-      };
-
-    case 'TOGGLE_HEADER_ROW':
-      return {
-        ...pluginState,
-        isHeaderRowEnabled: !pluginState.isHeaderRowEnabled,
-      };
-
-    case 'CLEAR_HOVER_SELECTION':
-      return { ...pluginState, ...action.data, ...defaultTableSelection };
-
-    case 'SELECT_COLUMN':
-      return { ...pluginState, ...action.data, isContextualMenuOpen: false };
-
-    case 'SET_TARGET_CELL_POSITION':
-      return { ...pluginState, ...action.data, isContextualMenuOpen: false };
-
-    case 'TOGGLE_CONTEXTUAL_MENU':
-      return {
-        ...pluginState,
-        isContextualMenuOpen: !pluginState.isContextualMenuOpen,
-      };
-
-    case 'SHOW_INSERT_ROW_BUTTON':
-      if (
-        action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex
-      ) {
-        return pluginState;
-      }
-
-      return {
-        ...pluginState,
-        ...action.data,
-        insertColumnButtonIndex: undefined, // We need to assure that column is not shown
-      };
-
-    case 'SHOW_INSERT_COLUMN_BUTTON':
-      if (
-        action.data.insertColumnButtonIndex ===
-        pluginState.insertColumnButtonIndex
-      ) {
-        return pluginState;
-      }
-      return {
-        ...pluginState,
-        ...action.data,
-        insertRowButtonIndex: undefined, // We need to assure that row is not shown
-      };
-
-    case 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON':
-      if (
-        pluginState.insertRowButtonIndex !== undefined ||
-        pluginState.insertColumnButtonIndex !== undefined
-      ) {
-        return {
-          ...pluginState,
-          insertRowButtonIndex: undefined,
-          insertColumnButtonIndex: undefined,
-        };
-      }
-      return pluginState;
-
-    case 'HIDE_RESIZE_HANDLE_LINE':
-      return {
-        ...pluginState,
-        ...action.data,
-        resizeHandleColumnIndex: undefined,
-        resizeHandleRowIndex: undefined,
-      };
-    case 'START_KEYBOARD_COLUMN_RESIZE':
-    case 'ADD_RESIZE_HANDLE_DECORATIONS':
-      if (
-        action.data.resizeHandleColumnIndex ===
-          pluginState.resizeHandleColumnIndex &&
-        action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex &&
-        action.data.resizeHandleIncludeTooltip ===
-          pluginState.resizeHandleIncludeTooltip &&
-        action.data.isKeyboardResize === pluginState.isKeyboardResize
-      ) {
-        return pluginState;
-      }
-      return {
-        ...pluginState,
-        ...action.data,
-        isResizeHandleWidgetAdded: true,
-      };
-
-    case 'UPDATE_RESIZE_HANDLE_DECORATIONS':
-      const {
-        resizeHandleColumnIndex,
-        resizeHandleRowIndex,
-        resizeHandleIncludeTooltip,
-      } = action.data;
-
-      if (
-        (resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex ||
-          !Number.isFinite(resizeHandleColumnIndex)) &&
-        (resizeHandleRowIndex === pluginState.resizeHandleRowIndex ||
-          !Number.isFinite(resizeHandleRowIndex)) &&
-        (resizeHandleIncludeTooltip ===
-          pluginState.resizeHandleIncludeTooltip ||
-          resizeHandleIncludeTooltip === undefined)
-      ) {
-        return pluginState;
-      }
-
-      return {
-        ...pluginState,
-        resizeHandleColumnIndex:
-          resizeHandleColumnIndex ?? pluginState.resizeHandleColumnIndex,
-        resizeHandleRowIndex:
-          resizeHandleRowIndex ?? pluginState.resizeHandleRowIndex,
-        resizeHandleIncludeTooltip:
-          resizeHandleIncludeTooltip ?? pluginState.resizeHandleIncludeTooltip,
-      };
-
-    case 'STOP_KEYBOARD_COLUMN_RESIZE':
-    case 'REMOVE_RESIZE_HANDLE_DECORATIONS':
-      if (!pluginState.isResizeHandleWidgetAdded) {
-        return pluginState;
-      }
-
-      return {
-        ...pluginState,
-        ...action.data,
-        resizeHandleColumnIndex: undefined,
-        resizeHandleRowIndex: undefined,
-        isResizeHandleWidgetAdded: false,
-        isKeyboardResize: undefined,
-      };
-
-    case 'UPDATE_TABLE_WIDTH_TO_WIDEST':
-    case 'SET_TABLE_REF':
-    case 'HOVER_ROWS':
-    case 'HOVER_COLUMNS':
-    case 'HOVER_TABLE':
-    case 'TABLE_HOVERED':
-    case 'HOVER_MERGED_CELLS':
-    case 'HOVER_CELL':
-    case 'SHOW_RESIZE_HANDLE_LINE':
-    case 'SET_EDITOR_FOCUS':
-      return { ...pluginState, ...action.data };
-
-    default:
-      return pluginState;
-  }
+export default (pluginState: TablePluginState, action: TablePluginAction): TablePluginState => {
+	switch (action.type) {
+		case 'TOGGLE_HEADER_COLUMN':
+			return {
+				...pluginState,
+				isHeaderColumnEnabled: !pluginState.isHeaderColumnEnabled,
+			};
+
+		case 'TOGGLE_HEADER_ROW':
+			return {
+				...pluginState,
+				isHeaderRowEnabled: !pluginState.isHeaderRowEnabled,
+			};
+
+		case 'CLEAR_HOVER_SELECTION':
+			return { ...pluginState, ...action.data, ...defaultTableSelection };
+
+		case 'SELECT_COLUMN':
+			return { ...pluginState, ...action.data, isContextualMenuOpen: false };
+
+		case 'SET_TARGET_CELL_POSITION':
+			return { ...pluginState, ...action.data, isContextualMenuOpen: false };
+
+		case 'TOGGLE_CONTEXTUAL_MENU':
+			return {
+				...pluginState,
+				isContextualMenuOpen: !pluginState.isContextualMenuOpen,
+			};
+
+		case 'SHOW_INSERT_ROW_BUTTON':
+			if (action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex) {
+				return pluginState;
+			}
+
+			return {
+				...pluginState,
+				...action.data,
+				insertColumnButtonIndex: undefined, // We need to assure that column is not shown
+			};
+
+		case 'SHOW_INSERT_COLUMN_BUTTON':
+			if (action.data.insertColumnButtonIndex === pluginState.insertColumnButtonIndex) {
+				return pluginState;
+			}
+			return {
+				...pluginState,
+				...action.data,
+				insertRowButtonIndex: undefined, // We need to assure that row is not shown
+			};
+
+		case 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON':
+			if (
+				pluginState.insertRowButtonIndex !== undefined ||
+				pluginState.insertColumnButtonIndex !== undefined
+			) {
+				return {
+					...pluginState,
+					insertRowButtonIndex: undefined,
+					insertColumnButtonIndex: undefined,
+				};
+			}
+			return pluginState;
+
+		case 'HIDE_RESIZE_HANDLE_LINE':
+			return {
+				...pluginState,
+				...action.data,
+				resizeHandleColumnIndex: undefined,
+				resizeHandleRowIndex: undefined,
+			};
+		case 'START_KEYBOARD_COLUMN_RESIZE':
+		case 'ADD_RESIZE_HANDLE_DECORATIONS':
+			if (
+				action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex &&
+				action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex &&
+				action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip &&
+				action.data.isKeyboardResize === pluginState.isKeyboardResize
+			) {
+				return pluginState;
+			}
+			return {
+				...pluginState,
+				...action.data,
+				isResizeHandleWidgetAdded: true,
+			};
+
+		case 'UPDATE_RESIZE_HANDLE_DECORATIONS':
+			const { resizeHandleColumnIndex, resizeHandleRowIndex, resizeHandleIncludeTooltip } =
+				action.data;
+
+			if (
+				(resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex ||
+					!Number.isFinite(resizeHandleColumnIndex)) &&
+				(resizeHandleRowIndex === pluginState.resizeHandleRowIndex ||
+					!Number.isFinite(resizeHandleRowIndex)) &&
+				(resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip ||
+					resizeHandleIncludeTooltip === undefined)
+			) {
+				return pluginState;
+			}
+
+			return {
+				...pluginState,
+				resizeHandleColumnIndex: resizeHandleColumnIndex ?? pluginState.resizeHandleColumnIndex,
+				resizeHandleRowIndex: resizeHandleRowIndex ?? pluginState.resizeHandleRowIndex,
+				resizeHandleIncludeTooltip:
+					resizeHandleIncludeTooltip ?? pluginState.resizeHandleIncludeTooltip,
+			};
+
+		case 'STOP_KEYBOARD_COLUMN_RESIZE':
+		case 'REMOVE_RESIZE_HANDLE_DECORATIONS':
+			if (!pluginState.isResizeHandleWidgetAdded) {
+				return pluginState;
+			}
+
+			return {
+				...pluginState,
+				...action.data,
+				resizeHandleColumnIndex: undefined,
+				resizeHandleRowIndex: undefined,
+				isResizeHandleWidgetAdded: false,
+				isKeyboardResize: undefined,
+			};
+
+		case 'UPDATE_TABLE_WIDTH_TO_WIDEST':
+		case 'SET_TABLE_REF':
+		case 'HOVER_ROWS':
+		case 'HOVER_COLUMNS':
+		case 'HOVER_TABLE':
+		case 'TABLE_HOVERED':
+		case 'HOVER_MERGED_CELLS':
+		case 'HOVER_CELL':
+		case 'SHOW_RESIZE_HANDLE_LINE':
+		case 'SET_EDITOR_FOCUS':
+			return { ...pluginState, ...action.data };
+
+		default:
+			return pluginState;
+	}
 };