@atlaskit/editor-plugin-table 7.11.2 → 7.11.4

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

@@ -1,4 +1,9 @@
 import { SortOrder } from '@atlaskit/editor-common/types';
+import {
+  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 {
@@ -21,30 +26,42 @@ export const unsort = (
   });
 };
 
-// TODO - reuse sort logic from the Renderer and support switching between ASC, DESC and NO_ORDER
 export const getSortOrderFromTable = (
-  tableElement: HTMLElement,
+  tableNode: PMNode,
   sortIndex: number,
-  direction: string,
+  direction: SortOrder,
 ) => {
-  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())
+  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,
+  }));
+
+  const compareNodesInOrder = createCompareNodes(
+    {
+      // TODO - add inline card support
+      getInlineCardTextFromStore() {
+        return null;
+      },
+    },
+    direction,
+  );
+  const order = tableArrayWithIndex
     .sort((a, b) => {
-      const string = strings[a] || '';
-      return string.localeCompare(strings[b] || '') * sortOrder;
+      return compareNodesInOrder(a.node[sortIndex], b.node[sortIndex]);
     })
-    .map((value, index) => ({
-      value,
+    .map((tableRow, index) => ({
+      value: tableRow.originalIndex,
       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];
+  return [
+    // Ensures the first tr is always first in the order
+    { value: -1, index: -1 },
+    ...order,
+  ];
 };
 
 export const toggleSort = (
@@ -52,20 +69,29 @@ export const toggleSort = (
   event: Event,
   pluginState: TableSortMeta,
 ) => {
-  const target = event.target as HTMLElement;
+  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 datasetortIndex = target
+  let dataSortIndex = target
     ?.closest('.ProseMirror-widget')
     ?.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
   const tr = view.state.tr;
   const tableElement = target.closest('table');
-  if (!tableElement || !datasetortIndex) {
+  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;
   }
-  const tableId = tableElement.getAttribute('data-table-local-id') || '';
 
   let { index, direction, order: oldOrder } = pluginState?.[tableId] || {};
 
@@ -74,7 +100,7 @@ export const toggleSort = (
     unsort(oldOrder, tableElement);
   }
 
-  const sortIndex = parseInt(datasetortIndex);
+  const sortIndex = parseInt(dataSortIndex);
   if (sortIndex === index) {
     switch (direction) {
       case SortOrder.NO_ORDER:
@@ -91,7 +117,7 @@ export const toggleSort = (
     direction = SortOrder.ASC; // default direction when a new index is clicked
   }
 
-  const order = getSortOrderFromTable(tableElement, sortIndex, direction);
+  const order = getSortOrderFromTable(tableNode, sortIndex, direction);
 
   if (direction === SortOrder.NO_ORDER) {
     tr.setMeta('tableSortMeta', {

package/src/toolbar.tsx

@@ -466,11 +466,11 @@ export const getToolbarConfig =
     // We don't want to show floating toolbar while resizing the table
     const isWidthResizing = tableWidthState?.resizing;
 
-    const { isTableScalingEnabled, widthToWidest } = pluginState;
+    const { widthToWidest } = pluginState;
     const currentTableNodeLocalId = tableObject?.node?.attrs?.localId ?? '';
 
     if (
-      isTableScalingEnabled && // TODO ED-21670: check if need options.isTableScalingEnabled
+      options?.isTableScalingEnabled &&
       isWidthResizing &&
       widthToWidest &&
       currentTableNodeLocalId &&
@@ -531,8 +531,6 @@ export const getToolbarConfig =
         editorAnalyticsAPI,
       );
 
-      const { isTableScalingEnabled = false } = getPluginState(state); // TODO ED-21670: check if we need options.isTableScalingEnabled and not an acutual state of displayNode attr on the table
-
       let cellItems: Array<FloatingToolbarItem<Command>>;
       cellItems = pluginState.isDragAndDropEnabled
         ? []
@@ -542,7 +540,7 @@ export const getToolbarConfig =
             intl,
             getEditorContainerWidth,
             editorAnalyticsAPI,
-            isTableScalingEnabled,
+            options?.isTableScalingEnabled,
           );
 
       let columnSettingsItems;
@@ -553,8 +551,7 @@ export const getToolbarConfig =
             intl,
             getEditorContainerWidth,
             editorAnalyticsAPI,
-            options,
-            isTableScalingEnabled,
+            options?.isTableScalingEnabled,
           )
         : [];
       const colorPicker = getColorPicker(
@@ -740,7 +737,6 @@ const getColumnSettingItems = (
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-  options: TablePluginOptions | undefined,
   isTableScalingEnabled = false,
 ): Array<FloatingToolbarItem<Command>> => {
   const pluginState = getPluginState(editorState);
@@ -755,7 +751,7 @@ const getColumnSettingItems = (
     editorState,
     editorView.domAtPos.bind(editorView),
     getEditorContainerWidth,
-    isTableScalingEnabled, // TODO ED-21670: Here should be actual state of tableNode's displayMode attr
+    isTableScalingEnabled,
   );
 
   const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
@@ -763,7 +759,7 @@ const getColumnSettingItems = (
   const items: Array<FloatingToolbarItem<Command>> = [];
 
   const isTableScalingLockBtnEnabled =
-    options?.isTableScalingEnabled &&
+    isTableScalingEnabled &&
     getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
 
   if (isTableScalingLockBtnEnabled) {
@@ -798,7 +794,7 @@ const getColumnSettingItems = (
         getDistributeConfig(
           getEditorContainerWidth,
           editorAnalyticsAPI,
-          isTableScalingEnabled, // TODO ED-21670: Maybe here too we an actual state of tableNode's displayMode attr
+          isTableScalingEnabled,
         )(state, dispatch, view),
       disabled: !wouldChange,
     });

package/src/transforms/column-width.ts

@@ -143,7 +143,14 @@ export const rescaleColumns =
     };
 
     const tableDepth = view.state.doc.resolve(table.pos).depth;
-    const shouldScale = isTableScalingEnabled && tableDepth === 0;
+    let shouldScale = isTableScalingEnabled && tableDepth === 0;
+    if (
+      shouldScale &&
+      getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+    ) {
+      shouldScale = newTable.attrs.displayMode !== 'fixed';
+    }
+
     if (shouldScale) {
       previousTableInfo = {
         width: getTableElementWidth(table.node),

package/src/ui/FloatingDragMenu/index.tsx

@@ -11,7 +11,6 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
-import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { PluginConfig, TableDirection } from '../../types';
 import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
@@ -33,6 +32,7 @@ export interface Props {
   editorAnalyticsAPI?: EditorAnalyticsAPI;
   stickyHeaders?: RowStickyState;
   pluginConfig?: PluginConfig;
+  isTableScalingEnabled?: boolean;
 }
 
 const FloatingDragMenu = ({
@@ -49,6 +49,7 @@ const FloatingDragMenu = ({
   editorAnalyticsAPI,
   stickyHeaders,
   pluginConfig,
+  isTableScalingEnabled,
 }: Props) => {
   if (
     !isOpen ||
@@ -73,8 +74,6 @@ const FloatingDragMenu = ({
     return null;
   }
 
-  const { isTableScalingEnabled = false } = getPluginState(editorView.state);
-
   return (
     <Popup
       alignX={direction === 'row' ? 'right' : undefined}

package/src/ui/common-styles.ts

@@ -239,44 +239,32 @@ const viewModeSortStyles = () => {
 };
 
 const tableBorderStyles = () => {
-  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return `border-color: ${tableBorderDeleteColor}`;
-  } else {
-    return `border: 1px solid ${tableBorderDeleteColor}`;
-  }
+  return `border-color: ${tableBorderDeleteColor}`;
 };
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const tableStickyHeaderColumnControlsDecorationsStyle = () => {
-  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css`
-      .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        z-index: 0;
-        left: -1px;
-      }
+  return css`
+    .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+      z-index: 0;
+      left: -1px;
+    }
 
-      .${ClassName.TABLE_STICKY}
-        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        border-left: 1px solid ${tableBorderColor};
-      }
+    .${ClassName.TABLE_STICKY}
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+      border-left: 1px solid ${tableBorderColor};
+    }
 
-      .${ClassName.TABLE_STICKY}
-        tr:first-of-type
-        th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            left: 0;
-          }
+    .${ClassName.TABLE_STICKY}
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+          left: 0;
         }
       }
-    `;
-  } else {
-    return css`
-      .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        z-index: 0;
-      }
-    `;
-  }
+    }
+  `;
 };
 
 const tableStickyHeaderFirefoxFixStyle = () => {

package/src/ui/ui-styles.ts

@@ -12,7 +12,6 @@ import {
   akEditorTableNumberColumnWidth,
   akEditorUnitZIndex,
 } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
@@ -399,34 +398,18 @@ const overflowShadowWidhoutDnD = (
 };
 
 const columnHeaderButton = (cssString?: string) => {
-  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css(
-      {
-        background: tableHeaderCellBackgroundColor,
-        display: 'block',
-        boxSizing: 'border-box',
-        padding: 0,
-        ':focus': {
-          outline: 'none',
-        },
+  return css(
+    {
+      background: tableHeaderCellBackgroundColor,
+      display: 'block',
+      boxSizing: 'border-box',
+      padding: 0,
+      ':focus': {
+        outline: 'none',
       },
-      cssString,
-    );
-  } else {
-    return css(
-      {
-        background: tableHeaderCellBackgroundColor,
-        border: `1px solid ${tableBorderColor}`,
-        display: 'block',
-        boxSizing: 'border-box',
-        padding: 0,
-        ':focus': {
-          outline: 'none',
-        },
-      },
-      cssString,
-    );
-  }
+    },
+    cssString,
+  );
 };
 
 const columnHeaderButtonSelected = () =>
@@ -504,34 +487,33 @@ export const rowControlsWrapperDotStyle = () => {
 };
 
 export const columnControlsDecoration = () => {
-  if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css`
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        display: none;
-        cursor: pointer;
+  return css`
+    .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+      display: none;
+      cursor: pointer;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
+      height: ${columnControlsDecorationHeight}px;
+      // floating dot for adding column button
+      &::before {
+        content: ' ';
+        background-color: ${tableBorderColor};
         position: absolute;
-        width: 100%;
-        left: 0;
-        top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
-        height: ${columnControlsDecorationHeight}px;
-        // floating dot for adding column button
-        &::before {
-          content: ' ';
-          background-color: ${tableBorderColor};
-          position: absolute;
-          height: ${lineMarkerSize}px;
-          width: ${lineMarkerSize}px;
-          border-radius: 50%;
-          pointer-events: none;
-          top: 2px;
-          right: -1px;
-        }
+        height: ${lineMarkerSize}px;
+        width: ${lineMarkerSize}px;
+        border-radius: 50%;
+        pointer-events: none;
+        top: 2px;
+        right: ${token('space.negative.025', '-2px')};
+      }
 
-        &::after {
-          content: ' ';
+      &::after {
+        content: ' ';
 
-          ${columnHeaderButton(
-            `
+        ${columnHeaderButton(
+          `
         border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
         border-top: ${tableCellBorderWidth}px solid ${tableBorderColor};
         border-bottom: ${tableCellBorderWidth}px solid ${tableBorderColor};
@@ -543,159 +525,86 @@ export const columnControlsDecoration = () => {
         left: 0px;
         z-index: ${columnControlsZIndex};
       `,
-          )}
-        }
+        )}
       }
+    }
 
-      // floating dot for adding column button - overriding style on last column to avoid scroll
-      ${getFloatingDotOverrides()}
-
-      .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        display: block;
-      }
+    // floating dot for adding column button - overriding style on last column to avoid scroll
+    ${getFloatingDotOverrides()}
 
-      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_TABLE} {
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected()};
-          }
-
-          &.${ClassName.HOVERED_CELL_IN_DANGER}
-            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            background-color: ${tableToolbarDeleteColor};
-            border-color: ${tableBorderDeleteColor};
-            z-index: ${akEditorUnitZIndex * 100};
-          }
-        }
-      }
+    .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
+      display: block;
+    }
 
-      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected()};
-            border-left: ${tableCellBorderWidth}px solid
-              ${tableBorderSelectedColor};
-            left: -${tableCellBorderWidth}px;
-          }
+    table
+      tr:first-of-type
+      td.${ClassName.TABLE_CELL},table
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_TABLE} {
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+          ${columnHeaderButtonSelected()};
         }
-      }
 
-      table tr:first-of-type th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.HOVERED_COLUMN} {
+        &.${ClassName.HOVERED_CELL_IN_DANGER}
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected()};
-          }
-
-          &.${ClassName.HOVERED_CELL_IN_DANGER}
-            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            background-color: ${tableToolbarDeleteColor};
-            border-color: ${tableBorderDeleteColor};
-            border-left: ${tableCellBorderWidth}px solid
-              ${tableBorderDeleteColor};
-            left: -${tableCellBorderWidth}px;
-            z-index: ${akEditorUnitZIndex * 100};
-          }
+          background-color: ${tableToolbarDeleteColor};
+          border-color: ${tableBorderDeleteColor};
+          z-index: ${akEditorUnitZIndex * 100};
         }
       }
+    }
 
-      .${ClassName.TABLE_SELECTED}
-        table
-        tr:first-of-type
-        td.${ClassName.TABLE_CELL},
-        .${ClassName.TABLE_SELECTED}
-        table
-        tr:first-of-type
-        th.${ClassName.TABLE_HEADER_CELL} {
+    table
+      tr:first-of-type
+      td.${ClassName.TABLE_CELL},table
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      &.${ClassName.COLUMN_SELECTED}, &.${ClassName.HOVERED_COLUMN} {
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
           ${columnHeaderButtonSelected()};
+          border-left: ${tableCellBorderWidth}px solid
+            ${tableBorderSelectedColor};
+          left: -${tableCellBorderWidth}px;
         }
       }
-    `;
-  } else {
-    return css`
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        display: none;
-        cursor: pointer;
-        position: absolute;
-        width: calc(100% + ${tableCellBorderWidth * 2}px);
-        left: -1px;
-        top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
-        height: ${columnControlsDecorationHeight}px;
-        // floating dot for adding column button
-        &::before {
-          content: ' ';
-          background-color: ${tableBorderColor};
-          position: absolute;
-          height: ${lineMarkerSize}px;
-          width: ${lineMarkerSize}px;
-          border-radius: 50%;
-          pointer-events: none;
-          top: 2px;
-          right: -1px;
-        }
-
-        &::after {
-          content: ' ';
+    }
 
-          ${columnHeaderButton(
-            `
-        border-right: ${tableCellBorderWidth}px solid ${tableBorderColor};
-        border-bottom: none;
-        height: ${tableToolbarSize}px;
-        width: 100%;
-        position: absolute;
-        top: ${columnControlsDecorationHeight - tableToolbarSize}px;
-        left: 0px;
-        z-index: ${columnControlsZIndex};
-      `,
-          )}
+    table
+      tr:first-of-type
+      td.${ClassName.TABLE_CELL},
+      table
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      &.${ClassName.HOVERED_COLUMN} {
+        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+          ${columnHeaderButtonSelected()};
         }
-      }
-
-      // floating dot for adding column button - overriding style on last column to avoid scroll
-      ${getFloatingDotOverrides()}
 
-      .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
-        display: block;
-      }
-
-      table
-        tr:first-of-type
-        td.${ClassName.TABLE_CELL},
-        table
-        tr:first-of-type
-        th.${ClassName.TABLE_HEADER_CELL} {
-        &.${ClassName.COLUMN_SELECTED},
-          &.${ClassName.HOVERED_COLUMN},
-          &.${ClassName.HOVERED_TABLE} {
+        &.${ClassName.HOVERED_CELL_IN_DANGER}
           .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            ${columnHeaderButtonSelected()};
-          }
-
-          &.${ClassName.HOVERED_CELL_IN_DANGER}
-            .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-            background-color: ${tableToolbarDeleteColor};
-            border: 1px solid ${tableBorderDeleteColor};
-            border-bottom: none;
-            z-index: ${akEditorUnitZIndex * 100};
-          }
+          background-color: ${tableToolbarDeleteColor};
+          border-color: ${tableBorderDeleteColor};
+          border-left: ${tableCellBorderWidth}px solid ${tableBorderDeleteColor};
+          left: -${tableCellBorderWidth}px;
+          z-index: ${akEditorUnitZIndex * 100};
         }
       }
+    }
 
+    .${ClassName.TABLE_SELECTED}
+      table
+      tr:first-of-type
+      td.${ClassName.TABLE_CELL},
       .${ClassName.TABLE_SELECTED}
-        table
-        tr:first-of-type
-        td.${ClassName.TABLE_CELL},
-        .${ClassName.TABLE_SELECTED}
-        table
-        tr:first-of-type
-        th.${ClassName.TABLE_HEADER_CELL} {
-        .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-          ${columnHeaderButtonSelected()};
-        }
+      table
+      tr:first-of-type
+      th.${ClassName.TABLE_HEADER_CELL} {
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+        ${columnHeaderButtonSelected()};
       }
-    `;
-  }
+    }
+  `;
 };
 
 export const hoveredDeleteButton = () => css`