@atlaskit/editor-plugin-table 1.2.1 → 1.2.3

package/src/i18n/en_GB.ts

@@ -0,0 +1,36 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//English (United Kingdom)
+export default {
+  'fabric.editor.canNotSortTable': "⚠️ You can't sort a table with merged cells",
+  'fabric.editor.cellBackground': 'Cell background',
+  'fabric.editor.cellOptions': 'Cell options',
+  'fabric.editor.clearCells': 'Clear {0, plural, one {cell} other {cells}}',
+  'fabric.editor.collapseTable': 'Collapse table',
+  'fabric.editor.cornerControl': 'Highlight table',
+  'fabric.editor.distributeColumns': 'Distribute columns',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix': 'Deleting',
+  'fabric.editor.extension.deleteElementTitle': 'Delete element',
+  'fabric.editor.extension.sourceNoTitledName': 'this element',
+  'fabric.editor.floatingToolbar.confirmModalCheckboxLabel': 'Also delete connected elements',
+  'fabric.editor.headerColumn': 'Header column',
+  'fabric.editor.headerRow': 'Header row',
+  'fabric.editor.insertColumn': 'Insert column right',
+  'fabric.editor.insertRow': 'Insert row below',
+  'fabric.editor.mergeCells': 'Merge cells',
+  'fabric.editor.numberedColumn': 'Numbered column',
+  'fabric.editor.removeColumns': 'Delete {0, plural, one {column} other {columns}}',
+  'fabric.editor.removeRows': 'Delete {0, plural, one {row} other {rows}}',
+  'fabric.editor.rowControl': 'Highlight row',
+  'fabric.editor.sortColumnASC': 'Sort column A → Z',
+  'fabric.editor.sortColumnDESC': 'Sort column Z → A',
+  'fabric.editor.splitCell': 'Split cell',
+  'fabric.editor.tableOptions': 'Table options',
+  'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.',
+  'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Delete',
+};

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

@@ -8,25 +8,9 @@ export class OverflowShadowsObserver {
   private table: HTMLElement;
   private wrapper: HTMLDivElement;
 
-  private firstCell: HTMLElement | null = null;
-  private lastCell: HTMLElement | null = null;
-
-  private getFirstCell: (
-    isSticky?: boolean,
-    hasHeaderRow?: boolean,
-  ) => HTMLElement | null = (isSticky, hasHeaderRow) =>
-    this.table?.querySelector(
-      isSticky || !hasHeaderRow ? 'table tbody tr td' : 'table tbody tr th',
-    );
-  private getLastCell: (
-    isSticky?: boolean,
-    hasHeaderRow?: boolean,
-  ) => HTMLElement | null = (isSticky, hasHeaderRow) =>
-    this.table?.querySelector(
-      isSticky || !hasHeaderRow
-        ? 'table tbody tr td:last-child'
-        : 'table tbody tr th:last-child',
-    );
+  private leftShadowSentinel: HTMLElement | null = null;
+  private rightShadowSentinel: HTMLElement | null = null;
+  private shadowsObserved: boolean = false;
 
   private isSticky = false;
   private stickyRowHeight = 0;
@@ -58,13 +42,16 @@ export class OverflowShadowsObserver {
         if (!entry.rootBounds?.height && !entry.rootBounds?.width) {
           return;
         }
-        if (entry.target !== this.firstCell && entry.target !== this.lastCell) {
+        if (
+          entry.target !== this.leftShadowSentinel &&
+          entry.target !== this.rightShadowSentinel
+        ) {
           return;
         }
         this.updateStickyShadowsHeightIfChanged();
         this.checkIntersectionEvent(
           entry,
-          this.firstCell === entry.target
+          this.leftShadowSentinel === entry.target
             ? ShadowEvent.SHOW_BEFORE_SHADOW
             : ShadowEvent.SHOW_AFTER_SHADOW,
         );
@@ -123,32 +110,29 @@ export class OverflowShadowsObserver {
     return stickyCell;
   }
 
-  observeCells = (isSticky?: boolean, hasHeaderRow?: boolean) => {
-    const stickyChanged = !!isSticky !== this.isSticky;
+  observeShadowSentinels = (isSticky?: boolean) => {
     this.isSticky = !!isSticky;
 
     // update sticky shadows
     this.updateStickyShadowsHeightIfChanged();
 
-    if (!stickyChanged) {
-      const firstCell = this.getFirstCell(isSticky, hasHeaderRow);
-      const lastCell = this.getLastCell(isSticky, hasHeaderRow);
-      if (
-        !firstCell ||
-        !lastCell ||
-        (firstCell === this.firstCell && lastCell === this.lastCell)
-      ) {
-        return;
-      }
-    }
-
-    this.firstCell = this.getFirstCell(isSticky, hasHeaderRow);
-    this.lastCell = this.getLastCell(isSticky, hasHeaderRow);
+    this.leftShadowSentinel = this.table?.querySelector(
+      `.${ClassName.TABLE_SHADOW_SENTINEL_LEFT}`,
+    );
+    this.rightShadowSentinel = this.table?.querySelector(
+      `.${ClassName.TABLE_SHADOW_SENTINEL_RIGHT}`,
+    );
 
-    if (this.tableIntersectionObserver && this.firstCell && this.lastCell) {
+    if (
+      this.tableIntersectionObserver &&
+      this.leftShadowSentinel &&
+      this.rightShadowSentinel &&
+      !this.shadowsObserved
+    ) {
       this.tableIntersectionObserver.disconnect();
-      this.tableIntersectionObserver.observe(this.firstCell);
-      this.tableIntersectionObserver.observe(this.lastCell);
+      this.tableIntersectionObserver.observe(this.leftShadowSentinel);
+      this.tableIntersectionObserver.observe(this.rightShadowSentinel);
+      this.shadowsObserved = true;
     }
   };
 

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 = `
@@ -121,6 +137,36 @@ const listLargeNumericMarkersOldStyles = `
   }
 `;
 
+const breakoutWidthStyling = (
+  useFragmentMarkBreakoutWidthStylingFix: boolean,
+) => {
+  if (useFragmentMarkBreakoutWidthStylingFix) {
+    return css`
+      > *:not([data-mark-type='fragment'])
+        .${ClassName.NODEVIEW_WRAPPER}
+        .${ClassName.TABLE_CONTAINER} {
+        margin-left: unset !important;
+        width: 100% !important;
+      }
+
+      > [data-mark-type='fragment']
+        *
+        .${ClassName.NODEVIEW_WRAPPER}
+        .${ClassName.TABLE_CONTAINER} {
+        margin-left: unset !important;
+        width: 100% !important;
+      }
+    `;
+  }
+
+  return css`
+    > * .${ClassName.NODEVIEW_WRAPPER} .${ClassName.TABLE_CONTAINER} {
+      margin-left: unset !important;
+      width: 100% !important;
+    }
+  `;
+};
+
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export const tableStyles = (
   props: ThemeProps & { featureFlags?: FeatureFlags },
@@ -394,11 +440,10 @@ export const tableStyles = (
        */
     }
 
-    /* Breakout only works on top level */
-    > * .${ClassName.NODEVIEW_WRAPPER} .${ClassName.TABLE_CONTAINER} {
-      margin-left: unset !important;
-      width: 100% !important;
-    }
+    /* Breakout only works on top level unless wrapped in fragment mark */
+    ${breakoutWidthStyling(
+      props.featureFlags?.useFragmentMarkBreakoutWidthStylingFix ?? true,
+    )}
 
     ${columnControlsDecoration(props)};
 
@@ -624,6 +669,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 +788,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"
-                }
-            ]
-        }
-    ]
-}