@atlaskit/editor-plugin-table 1.2.1 → 1.2.2

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -225,9 +225,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       }
 
       if (this.overflowShadowsObserver) {
-        this.overflowShadowsObserver.observeCells(
+        this.overflowShadowsObserver.observeShadowSentinels(
           this.state.stickyHeader?.sticky,
-          containsHeaderRow(getNode()),
         );
       }
     }
@@ -287,6 +286,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     this.setState({ [shadowKey]: value });
   };
 
+  private createShadowSentinels = (table: HTMLTableElement | null) => {
+    if (table) {
+      const shadowSentinelLeft = document.createElement('span');
+      shadowSentinelLeft.className = ClassName.TABLE_SHADOW_SENTINEL_LEFT;
+      const shadowSentinelRight = document.createElement('span');
+      shadowSentinelRight.className = ClassName.TABLE_SHADOW_SENTINEL_RIGHT;
+      table.prepend(shadowSentinelLeft);
+      table.prepend(shadowSentinelRight);
+    }
+  };
+
   onStickyState = (state: StickyPluginState) => {
     const { tableOverflowShadowsOptimization } =
       this.props.getEditorFeatureFlags();
@@ -440,6 +450,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
               const tableElement = elem.querySelector('table');
               if (tableElement !== this.table) {
                 this.table = tableElement;
+                this.createShadowSentinels(this.table);
               }
             }
           }}
@@ -519,6 +530,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     if (!tableOverflowShadowsOptimization) {
       this.updateShadows();
     }
+
+    if (this.wrapper.scrollLeft === 0) {
+      this.setState({ [ShadowEvent.SHOW_BEFORE_SHADOW]: false });
+    } else {
+      this.setState({ [ShadowEvent.SHOW_BEFORE_SHADOW]: true });
+    }
   };
 
   private handleTableResizing = () => {

package/src/plugins/table/nodeviews/__mocks__/OverflowShadowsObserver.ts

@@ -1,13 +1,13 @@
 import { OverridableMock } from './OverridableMock';
 
 export class OverflowShadowsObserver extends OverridableMock {
-  firstCell: HTMLElement | null = null;
-  lastCell: HTMLElement | null = null;
+  leftShadowSentinel: HTMLElement | null = null;
+  rightShadowSentinel: HTMLElement | null = null;
   constructor(...inputs: any[]) {
     super(...inputs);
   }
 
-  observeCells = this.getMock('observeCells');
+  observeShadowSentinels = this.getMock('observeShadowSentinels');
   updateStickyShadows = this.getMock('updateStickyShadows');
   dispose = this.getMock('dispose');
 }

package/src/plugins/table/nodeviews/table.tsx

@@ -225,6 +225,18 @@ export default class TableView extends ReactNodeView<Props> {
       return false;
     }
 
+    // ED-16668
+    // Do not remove this fixes an issue with windows firefox that relates to
+    // the addition of the shadow sentinels
+    if (
+      type === 'selection' &&
+      nodeName?.toUpperCase() === 'TABLE' &&
+      (firstChild?.nodeName.toUpperCase() === 'COLGROUP' ||
+        firstChild?.nodeName.toUpperCase() === 'SPAN')
+    ) {
+      return false;
+    }
+
     return true;
   }
 

package/src/plugins/table/transforms/delete-rows.ts

@@ -5,7 +5,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 
 import { CellAttributes } from '@atlaskit/adf-schema';
 
-import { removeEmptyColumns } from './merge';
+import { mergeEmptyColumns } from './merge';
 import { setMeta } from './metadata';
 
 export const deleteRows =
@@ -125,7 +125,7 @@ export const deleteRows =
       rows,
       table.node.marks,
     );
-    const fixedTable = removeEmptyColumns(newTable);
+    const fixedTable = mergeEmptyColumns(newTable);
     if (fixedTable === null) {
       return setMeta({ type: 'DELETE_ROWS', problem: 'REMOVE_EMPTY_COLUMNS' })(
         tr,

package/src/plugins/table/transforms/index.ts

@@ -1,5 +1,5 @@
-export { mergeCells, canMergeCells, removeEmptyColumns } from './merge';
 export { fireAnalytics, fixTables, fixAutoSizedTable } from './fix-tables';
+export { mergeCells, canMergeCells, mergeEmptyColumns } from './merge';
 export { deleteColumns } from './delete-columns';
 export { deleteRows } from './delete-rows';
 export { updateColumnWidths } from './column-width';

package/src/plugins/table/transforms/merge.ts

@@ -131,7 +131,8 @@ export function mergeCells(tr: Transaction): Transaction {
     rows,
     table.node.marks,
   );
-  const fixedTable = removeEmptyColumns(newTable);
+
+  const fixedTable = mergeEmptyColumns(newTable);
   if (fixedTable === null) {
     return setMeta({ type: 'MERGE_CELLS', problem: 'REMOVE_EMPTY_COLUMNS' })(
       tr,
@@ -227,77 +228,74 @@ function cellsOverlapRectangle({ width, height, map }: TableMap, rect: Rect) {
 }
 
 // returns an array of numbers, each number indicates the minimum colSpan in each column
-function getMinColSpans(table: PMNode): number[] {
+function getEmptyColumnIndexes(table: PMNode): Set<number> {
   const map = TableMap.get(table);
-  const minColspans: number[] = [];
-  for (let colIndex = map.width - 1; colIndex >= 0; colIndex--) {
-    const cellsPositions = map.cellsInRect({
+  const emptyColumnIndexes = new Set<number>();
+
+  // Loop throuh each column
+  for (let colIndex = 0; colIndex < map.width; colIndex++) {
+    // Get the cells in each row for this column
+    const cellPositions = map.cellsInRect({
       left: colIndex,
       right: colIndex + 1,
       top: 0,
       bottom: map.height,
     });
-    if (cellsPositions.length) {
-      const colspans = cellsPositions.map((cellPos) => {
-        const cell = table.nodeAt(cellPos);
-        if (cell) {
-          return cell.attrs.colspan;
-        }
-      });
-      const minColspan = Math.min(...colspans);
-      // only care about the case when the next column is invisible
-      if (!minColspans[colIndex + 1]) {
-        minColspans[colIndex] = minColspan;
-      } else {
-        minColspans[colIndex] = 1;
-      }
+
+    // If no cells exist in that column it is empty
+    if (!cellPositions.length) {
+      emptyColumnIndexes.add(colIndex);
     }
   }
 
-  return minColspans;
+  return emptyColumnIndexes;
 }
 
-export function removeEmptyColumns(table: PMNode): PMNode | null {
+export function mergeEmptyColumns(table: PMNode): PMNode | null {
+  const rows: PMNode[] = [];
   const map = TableMap.get(table);
-  const minColSpans = getMinColSpans(table);
-  if (!minColSpans.some((colspan) => colspan > 1)) {
+  const emptyColumnIndexes = getEmptyColumnIndexes(table);
+
+  // We don't need to remove any so return early.
+  if (emptyColumnIndexes.size === 0) {
     return table;
   }
-  const rows: PMNode[] = [];
+
   for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
     const cellsByCols: Record<string, PMNode> = {};
-    const cols = Object.keys(minColSpans).map(Number);
-    for (let idx in cols) {
-      const colIndex = cols[idx];
+
+    // Work backwards so that calculating colwidths is easier with Array.slice
+    for (let colIndex = map.width - 1; colIndex >= 0; colIndex--) {
       const cellPos = map.map[colIndex + rowIndex * map.width];
       const rect = map.findCell(cellPos);
-      const cell = cellsByCols[rect.left] || table.nodeAt(cellPos);
-      if (cell && rect.top === rowIndex) {
-        if (minColSpans[colIndex] > 1) {
-          const colspan = cell.attrs.colspan - minColSpans[colIndex] + 1;
-          if (colspan < 1) {
-            return null;
-          }
-          const { colwidth } = cell.attrs;
-          const newCell = cell.type.createChecked(
+      let cell = cellsByCols[rect.left] || table.nodeAt(cellPos);
+
+      if (rect.top !== rowIndex) {
+        continue;
+      }
+
+      // If this column is empty, we want to decrement the colspan of its corresponding
+      // cell as this column is being "merged"
+      if (emptyColumnIndexes.has(colIndex)) {
+        const { colspan, colwidth } = cell.attrs;
+
+        if (colspan > 1) {
+          cell = cell.type.createChecked(
             {
               ...cell.attrs,
-              colspan,
+              colspan: colspan - 1,
               colwidth: colwidth ? colwidth.slice(0, colspan) : null,
             },
             cell.content,
             cell.marks,
           );
-          cellsByCols[rect.left] = newCell;
-        } else {
-          cellsByCols[rect.left] = cell;
         }
       }
+
+      cellsByCols[rect.left] = cell;
     }
 
-    const rowCells: PMNode[] = Object.keys(cellsByCols).map(
-      (col) => cellsByCols[col],
-    );
+    const rowCells = Object.values(cellsByCols);
     const row = table.child(rowIndex);
     if (row) {
       rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));

package/src/plugins/table/ui/common-styles.ts

@@ -113,6 +113,22 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
   }
 }`;
 
+const shadowSentinelStyles = `
+  .${ClassName.TABLE_SHADOW_SENTINEL_LEFT},
+  .${ClassName.TABLE_SHADOW_SENTINEL_RIGHT} {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 1px;
+    visibility: hidden;
+  }
+  .${ClassName.TABLE_SHADOW_SENTINEL_LEFT} {
+    left: 0;
+  }
+  .${ClassName.TABLE_SHADOW_SENTINEL_RIGHT} {
+    right: 0;
+  }
+`;
 // previous styles to add spacing to numbered lists with
 // large item markers (e.g. 101, 102, ...) when nested inside tables
 const listLargeNumericMarkersOldStyles = `
@@ -624,6 +640,8 @@ export const tableStyles = (
       border-top: none;
       // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
       margin-right: -1px;
+      // Allows better positioning for the shadow sentinels - ED-16668
+      position: relative;
 
       > tbody > tr {
         white-space: pre-wrap;
@@ -741,6 +759,8 @@ export const tableStyles = (
   ${props?.featureFlags?.restartNumberedLists
     ? ``
     : listLargeNumericMarkersOldStyles}
+
+  ${shadowSentinelStyles}
 `;
 
 export const tableFullPageEditorStyles = css`

package/src/plugins/table/utils/row-controls.ts

@@ -22,8 +22,9 @@ export interface RowParams {
 
 export const getRowHeights = (tableRef: HTMLTableElement): number[] => {
   const heights: number[] = [];
-  if (tableRef.lastChild) {
-    const rows = tableRef.lastChild.childNodes;
+  const tableBody = tableRef.querySelector('tbody');
+  if (tableBody) {
+    const rows = tableBody.childNodes;
     for (let i = 0, count = rows.length; i < count; i++) {
       const row = rows[i] as HTMLTableRowElement;
       heights[i] = row.getBoundingClientRect().height + 1;

package/src/__tests__/integration/__fixtures__/table-and-paragraph-adf.json

@@ -1,130 +0,0 @@
-{
-    "version": 1,
-    "type": "doc",
-    "content": [
-        {
-            "type": "table",
-            "attrs": {
-                "isNumberColumnEnabled": false,
-                "layout": "default",
-                "localId": "e1365400-6226-4bb9-b3f1-b80fd3ae640a"
-            },
-            "content": [
-                {
-                    "type": "tableRow",
-                    "content": [
-                        {
-                            "type": "tableHeader",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableHeader",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableHeader",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    "type": "tableRow",
-                    "content": [
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    "type": "tableRow",
-                    "content": [
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        },
-                        {
-                            "type": "tableCell",
-                            "attrs": {},
-                            "content": [
-                                {
-                                    "type": "paragraph",
-                                    "content": []
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            "type": "paragraph",
-            "content": [
-                {
-                    "type": "text",
-                    "text": "text"
-                }
-            ]
-        }
-    ]
-}