@atlaskit/editor-plugin-table 7.10.1 → 7.11.0

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

@@ -0,0 +1,257 @@
+/**
+ * This plugin allows sorting of table nodes in the Editor without modifying the underlying ProseMirror document.
+ * Instead of making changes to the ProseMirror document, the plugin sorts the table rows in the DOM. This allows the sorting to be
+ * visible to the user without affecting the document's content.
+ */
+
+import { createElement } from 'react';
+
+import ReactDOM from 'react-dom';
+import { RawIntlProvider } from 'react-intl-next';
+
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { SortOrder } from '@atlaskit/editor-common/types';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+
+import type tablePlugin from '../../plugin';
+import { getPluginState } from '../plugin-factory';
+
+import {
+  IS_DISABLED_CLASS_NAME,
+  SORT_INDEX_DATA_ATTRIBUTE,
+  SORTING_ICON_CLASS_NAME,
+} from './consts';
+import { tableViewModeSortPluginKey as key } from './plugin-key';
+import type { ViewModeSortPluginState } from './types';
+import { getTableElements, toggleSort } from './utils';
+
+export const createPlugin = (
+  editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode'],
+) => {
+  return new SafePlugin({
+    state: {
+      init: () => ({
+        decorations: DecorationSet.empty,
+        sort: {},
+        allTables: [],
+      }),
+      apply(tr, pluginState: ViewModeSortPluginState, oldState) {
+        // TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
+        // does not appear correct when the plugin is created.
+        const { mode } = editorViewModeAPI?.sharedState.currentState() || {};
+        if (mode !== 'view') {
+          return pluginState;
+        }
+        let { decorations, sort, allTables } = pluginState;
+
+        const sortMeta = tr.getMeta('tableSortMeta');
+
+        let hoverTableMeta = tr.getMeta('mouseEnterTable');
+        let removeTableMeta = tr.getMeta('removeTable');
+        let tableId = '';
+
+        // Remove the table from the state
+        if (removeTableMeta) {
+          allTables = allTables.filter(([id]) => id !== removeTableMeta);
+        } else {
+          tableId = hoverTableMeta?.[0];
+        }
+
+        sort = { ...sort, ...sortMeta };
+
+        const isTableInState = allTables.some(([id]) => id === tableId);
+
+        // Update the table in the state
+        if (hoverTableMeta) {
+          allTables = allTables.filter(([id]) => id !== hoverTableMeta[0]);
+          allTables.push(hoverTableMeta);
+        }
+
+        /**
+         * Create decorations for the sorting icons
+         */
+        const decs: Decoration[] = [];
+
+        // TODO - add support for keyboard only users
+        if ((hoverTableMeta && !isTableInState) || sortMeta) {
+          allTables.forEach((table) => {
+            const [tableId, _node, pos] = table;
+            const tableNode = tr.doc.nodeAt(tr.mapping.map(pos));
+            if (!tableNode || tableNode.type.name !== 'table') {
+              return pluginState;
+            }
+            const map = TableMap.get(tableNode);
+            const hasMergedCells = new Set(map.map).size !== map.map.length;
+            map.mapByRow[0].forEach((cell, index) => {
+              // return pluginState;
+              decs.push(
+                Decoration.widget(cell + pos + 2, () => {
+                  const element = document.createElement('div');
+                  element.setAttribute(SORT_INDEX_DATA_ATTRIBUTE, `${index}`);
+                  element.classList.add(SORTING_ICON_CLASS_NAME);
+                  if (hasMergedCells) {
+                    element.classList.add(IS_DISABLED_CLASS_NAME);
+                  }
+
+                  let sortOrdered;
+                  if (index === sort[tableId]?.index) {
+                    sortOrdered = sort[tableId]?.direction;
+                  } else {
+                    sortOrdered = SortOrder.NO_ORDER;
+                  }
+
+                  const { getIntl } = getPluginState(oldState);
+
+                  ReactDOM.render(
+                    createElement(
+                      RawIntlProvider,
+                      { value: getIntl() },
+                      createElement(SortingIcon, {
+                        isSortingAllowed: !hasMergedCells,
+                        sortOrdered,
+                        onClick: () => {},
+                        onKeyDown: () => {},
+                      }),
+                    ),
+                    element,
+                  );
+                  return element;
+                }),
+              );
+            });
+          });
+          decorations = DecorationSet.create(tr.doc, decs);
+        }
+
+        /**
+         * Map the decorations to the new document if there are changes
+         */
+        if (tr.docChanged) {
+          decorations = decorations.map(tr.mapping, tr.doc);
+          allTables = allTables.map((table) => {
+            return [table[0], table[1], tr.mapping.map(table[2])];
+          });
+        }
+
+        return {
+          decorations,
+          sort,
+          allTables,
+        };
+      },
+    },
+    key,
+    appendTransaction: (trs, oldState, newState) => {
+      // return newState.tr;
+      const { mode } = editorViewModeAPI?.sharedState.currentState() || {};
+      if (mode !== 'view') {
+        return newState.tr;
+      }
+
+      let allTables = key.getState(newState)?.allTables || [];
+
+      /**
+       * If incoming changes have affected a table node, remove the sorting. This prevents the
+       * table from breaking if changes like merged cells are incoming.
+       */
+      for (const tr of trs) {
+        const hoverTableMeta = tr.getMeta('mouseEnterTable');
+        if (hoverTableMeta) {
+          allTables = allTables.filter(([id]) => id !== hoverTableMeta[0]);
+          allTables.push(hoverTableMeta);
+        }
+        const isRemote = tr.getMeta('isRemote');
+        const isDocChanged = tr.docChanged;
+        const isChangesIncoming = isRemote && isDocChanged;
+
+        const oldPluginState = key.getState(oldState);
+        const newPluginState = key.getState(newState);
+
+        for (const table of allTables) {
+          const [tableId, node, pos] = table;
+          const {
+            order: oldOrder,
+            direction: oldDirection,
+            index: oldIndex,
+          } = oldPluginState?.sort?.[tableId] || {};
+
+          if (isChangesIncoming) {
+            const maybeTableNode = tr.doc.nodeAt(pos);
+            const isTableNodeChanged =
+              maybeTableNode?.attrs?.localId !== tableId ||
+              !node.eq(maybeTableNode);
+
+            if (isTableNodeChanged) {
+              const newtr = newState.tr;
+              newtr.setMeta('tableSortMeta', {
+                [tableId]: {},
+              });
+              newtr.setMeta('removeTable', tableId);
+
+              // Unsort the table here
+              if (oldOrder !== undefined) {
+                const { rows, tbody } = getTableElements(tableId);
+                if (!rows || !tbody) {
+                  return newtr;
+                }
+                const sortedOrder = [...oldOrder].sort(
+                  (a, b) => a.value - b.value,
+                );
+                sortedOrder.forEach((index, i) => {
+                  tbody.appendChild(rows[index.index + 1]);
+                });
+                return newtr;
+              }
+            }
+          }
+
+          /**
+           * Sort the table if the sort order has changed
+           */
+          const {
+            order: newOrder,
+            direction: newDirection,
+            index: newIndex,
+          } = newPluginState?.sort?.[tableId] || {};
+          const orderChanged =
+            oldDirection !== newDirection || oldIndex !== newIndex;
+
+          if (orderChanged) {
+            if (!isRemote && newDirection !== SortOrder.NO_ORDER) {
+              const { rows, tbody } = getTableElements(tableId);
+              if (rows && newOrder) {
+                newOrder.forEach((index, i) => {
+                  tbody?.appendChild(rows[index.value + 1]);
+                });
+              }
+            }
+          }
+        }
+      }
+      return newState.tr;
+    },
+    props: {
+      handleDOMEvents: {
+        keydown: (view, event) => {
+          // TODO - fix the focus issue here, where toggling sort with a keypress loses focus
+          if (event.key === 'Enter' || event.key === ' ') {
+            const pluginState = key.getState(view.state)?.sort || {};
+            toggleSort(view, event, pluginState);
+          }
+        },
+
+        click: (view, event) => {
+          const pluginState = key.getState(view.state)?.sort || {};
+          toggleSort(view, event, pluginState);
+        },
+      },
+      decorations(state) {
+        const decs = key.getState(state)?.decorations || DecorationSet.empty;
+        return decs;
+      },
+    },
+  });
+};

package/src/pm-plugins/view-mode-sort/plugin-key.ts

@@ -0,0 +1,6 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+
+import type { ViewModeSortPluginState } from './types';
+
+export const tableViewModeSortPluginKey =
+  new PluginKey<ViewModeSortPluginState>('tableViewModeSortPlugin');

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

@@ -0,0 +1,23 @@
+import type { SortOrder } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+
+export type TableSortMeta = Record<
+  string,
+  {
+    index: number;
+    order: {
+      index: number;
+      value: number;
+    }[];
+    direction: SortOrder;
+  }
+>;
+
+export interface ViewModeSortPluginState {
+  decorations: DecorationSet;
+  sort: TableSortMeta;
+  allTables: HoverTableMeta[];
+}
+
+export type HoverTableMeta = [string, PMNode, number];

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

@@ -0,0 +1,120 @@
+import { SortOrder } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+import {
+  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');
+
+  const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
+  sortedOrder.forEach((item) => {
+    tbody?.appendChild(rows[item.index + 1]);
+  });
+};
+
+// TODO - reuse sort logic from the Renderer and support switching between ASC, DESC and NO_ORDER
+export const getSortOrderFromTable = (
+  tableElement: HTMLElement,
+  sortIndex: number,
+  direction: string,
+) => {
+  const sortOrder = direction === SortOrder.DESC ? -1 : 1;
+  const strings: string[] = [];
+  tableElement
+    .querySelectorAll('tr:not([data-header-row="true"])')
+    .forEach((tr) => {
+      strings.push(tr.querySelectorAll('td')[sortIndex]?.textContent || '');
+    });
+  const order = Array.from(strings.keys())
+    .sort((a, b) => {
+      const string = strings[a] || '';
+      return string.localeCompare(strings[b] || '') * sortOrder;
+    })
+    .map((value, index) => ({
+      value,
+      index,
+    }));
+  // TODO - improve this. right now this is a workaround to ensure the first tr is always first in the order
+  return [{ value: -1, index: -1 }, ...order];
+};
+
+export const toggleSort = (
+  view: EditorView,
+  event: Event,
+  pluginState: TableSortMeta,
+) => {
+  const target = event.target as HTMLElement;
+  const widget = target.closest(`.${SORTING_ICON_CLASS_NAME}`);
+  if (widget?.classList.contains(IS_DISABLED_CLASS_NAME) || !widget) {
+    return;
+  }
+  let datasetortIndex = target
+    ?.closest('.ProseMirror-widget')
+    ?.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
+  const tr = view.state.tr;
+  const tableElement = target.closest('table');
+  if (!tableElement || !datasetortIndex) {
+    return;
+  }
+  const tableId = tableElement.getAttribute('data-table-local-id') || '';
+
+  let { index, direction, order: oldOrder } = pluginState?.[tableId] || {};
+
+  // Unsort if there was already a sort
+  if (direction !== SortOrder.NO_ORDER && oldOrder !== undefined) {
+    unsort(oldOrder, tableElement);
+  }
+
+  const sortIndex = parseInt(datasetortIndex);
+  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(tableElement, sortIndex, direction);
+
+  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 };
+};

package/src/ui/common-styles.ts

@@ -6,6 +6,7 @@ import {
   tableMarginTop,
   tableSharedStyle,
 } from '@atlaskit/editor-common/styles';
+import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import {
@@ -27,6 +28,7 @@ import { N0, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
+import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
 import { TableCssClassName as ClassName } from '../types';
 
 import {
@@ -203,6 +205,39 @@ const breakoutWidthStyling = () => {
   `;
 };
 
+const viewModeSortStyles = () => {
+  if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
+    return css`
+      th {
+        .${SORTING_ICON_CLASS_NAME} {
+          + p {
+            margin-top: 0 !important;
+          }
+        }
+
+        &:has(.is-active) {
+          .${SORTABLE_COLUMN_ICON_CLASSNAME} {
+            opacity: 1;
+          }
+        }
+
+        .${SORTABLE_COLUMN_ICON_CLASSNAME} {
+          opacity: 0;
+          &:focus {
+            opacity: 1;
+          }
+        }
+
+        &:hover {
+          .${SORTABLE_COLUMN_ICON_CLASSNAME} {
+            opacity: 1;
+          }
+        }
+      }
+    `;
+  }
+};
+
 const tableBorderStyles = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return `border-color: ${tableBorderDeleteColor}`;
@@ -269,6 +304,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
   ${props.featureFlags?.tableDragAndDrop && insertLine()};
   ${resizeHandle(props.featureFlags?.tableDragAndDrop)};
   ${rangeSelectionStyles};
+  ${viewModeSortStyles()};
 
   .${ClassName.LAST_ITEM_IN_CELL} {
     margin-bottom: 0;