@atlaskit/editor-plugin-table 1.2.1 → 1.2.3

package/dist/es2019/i18n/en.js

@@ -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.
+ */
+//
+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/dist/es2019/i18n/en_GB.js

@@ -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/dist/es2019/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -5,16 +5,9 @@ import { updateShadowListForStickyStyles } from './update-overflow-shadows';
 export class OverflowShadowsObserver {
   // updateShadowState is a method to update shadow key
   constructor(updateShadowState, _table, wrapper) {
-    _defineProperty(this, "firstCell", null);
-    _defineProperty(this, "lastCell", null);
-    _defineProperty(this, "getFirstCell", (isSticky, hasHeaderRow) => {
-      var _this$table;
-      return (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td' : 'table tbody tr th');
-    });
-    _defineProperty(this, "getLastCell", (isSticky, hasHeaderRow) => {
-      var _this$table2;
-      return (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td:last-child' : 'table tbody tr th:last-child');
-    });
+    _defineProperty(this, "leftShadowSentinel", null);
+    _defineProperty(this, "rightShadowSentinel", null);
+    _defineProperty(this, "shadowsObserved", false);
     _defineProperty(this, "isSticky", false);
     _defineProperty(this, "stickyRowHeight", 0);
     _defineProperty(this, "init", () => {
@@ -28,11 +21,11 @@ export class OverflowShadowsObserver {
           if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.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 ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
+          this.checkIntersectionEvent(entry, this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
         };
         this.tableIntersectionObserver = new IntersectionObserver((entries, _) => {
           entries.forEach(entry => intersectonOnbserverCallback(entry));
@@ -55,25 +48,19 @@ export class OverflowShadowsObserver {
         this.updateShadowState(shadowKey, true);
       }
     });
-    _defineProperty(this, "observeCells", (isSticky, hasHeaderRow) => {
-      const stickyChanged = !!isSticky !== this.isSticky;
+    _defineProperty(this, "observeShadowSentinels", isSticky => {
+      var _this$table, _this$table2;
       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);
-      if (this.tableIntersectionObserver && this.firstCell && this.lastCell) {
+      this.leftShadowSentinel = (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(`.${ClassName.TABLE_SHADOW_SENTINEL_LEFT}`);
+      this.rightShadowSentinel = (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(`.${ClassName.TABLE_SHADOW_SENTINEL_RIGHT}`);
+      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;
       }
     });
     _defineProperty(this, "updateStickyShadows", stickyRowHeight => {

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -48,6 +48,16 @@ class TableComponent extends React.Component {
         [shadowKey]: value
       });
     });
+    _defineProperty(this, "createShadowSentinels", table => {
+      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);
+      }
+    });
     _defineProperty(this, "onStickyState", state => {
       const {
         tableOverflowShadowsOptimization
@@ -102,6 +112,15 @@ class TableComponent extends React.Component {
       if (!tableOverflowShadowsOptimization) {
         this.updateShadows();
       }
+      if (this.wrapper.scrollLeft === 0) {
+        this.setState({
+          [ShadowEvent.SHOW_BEFORE_SHADOW]: false
+        });
+      } else {
+        this.setState({
+          [ShadowEvent.SHOW_BEFORE_SHADOW]: true
+        });
+      }
     });
     _defineProperty(this, "handleTableResizing", () => {
       const {
@@ -369,7 +388,7 @@ class TableComponent extends React.Component {
       }
       if (this.overflowShadowsObserver) {
         var _this$state$stickyHea;
-        this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, containsHeaderRow(getNode()));
+        this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
       }
     }
     const currentTable = getNode();
@@ -500,6 +519,7 @@ class TableComponent extends React.Component {
           const tableElement = elem.querySelector('table');
           if (tableElement !== this.table) {
             this.table = tableElement;
+            this.createShadowSentinels(this.table);
           }
         }
       }

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -151,6 +151,13 @@ export default class TableView extends ReactNodeView {
     if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
       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 === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
+      return false;
+    }
     return true;
   }
   destroy() {

package/dist/es2019/plugins/table/transforms/delete-rows.js

@@ -1,7 +1,7 @@
 import { Selection } from 'prosemirror-state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { removeEmptyColumns } from './merge';
+import { mergeEmptyColumns } from './merge';
 import { setMeta } from './metadata';
 export const deleteRows = (rect, isHeaderRowRequired = false) => tr => {
   const table = findTable(tr.selection);
@@ -96,7 +96,7 @@ export const deleteRows = (rect, isHeaderRowRequired = false) => tr => {
     })(tr);
   }
   const newTable = table.node.type.createChecked(table.node.attrs, rows, table.node.marks);
-  const fixedTable = removeEmptyColumns(newTable);
+  const fixedTable = mergeEmptyColumns(newTable);
   if (fixedTable === null) {
     return setMeta({
       type: 'DELETE_ROWS',

package/dist/es2019/plugins/table/transforms/index.js

@@ -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/dist/es2019/plugins/table/transforms/merge.js

@@ -113,7 +113,7 @@ export function mergeCells(tr) {
     })(tr);
   }
   const newTable = table.node.type.createChecked(table.node.attrs, rows, table.node.marks);
-  const fixedTable = removeEmptyColumns(newTable);
+  const fixedTable = mergeEmptyColumns(newTable);
   if (fixedTable === null) {
     return setMeta({
       type: 'MERGE_CELLS',
@@ -188,70 +188,66 @@ function cellsOverlapRectangle({
 }
 
 // returns an array of numbers, each number indicates the minimum colSpan in each column
-function getMinColSpans(table) {
+function getEmptyColumnIndexes(table) {
   const map = TableMap.get(table);
-  const minColspans = [];
-  for (let colIndex = map.width - 1; colIndex >= 0; colIndex--) {
-    const cellsPositions = map.cellsInRect({
+  const emptyColumnIndexes = new Set();
+
+  // 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) {
+export function mergeEmptyColumns(table) {
+  const rows = [];
   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 = [];
   for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
     const cellsByCols = {};
-    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 = 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/dist/es2019/plugins/table/ui/common-styles.js

@@ -47,7 +47,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 = `
@@ -55,10 +70,36 @@ const listLargeNumericMarkersOldStyles = `
     padding-left: revert;
   }
 `;
+const breakoutWidthStyling = useFragmentMarkBreakoutWidthStylingFix => {
+  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 => {
-  var _props$featureFlags, _props$featureFlags2;
+  var _props$featureFlags, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3;
   return css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${`var(--ds-background-neutral, ${N20A})`};
@@ -326,11 +367,8 @@ export const tableStyles = props => {
        */
     }
 
-    /* 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$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true)}
 
     ${columnControlsDecoration(props)};
 
@@ -532,6 +570,8 @@ export const tableStyles = props => {
       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;
@@ -646,7 +686,9 @@ export const tableStyles = props => {
   styles that handle this generally (in editor-common) so we can
   throw away the older table-specific styles here.
   */
-  ${props !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? `` : listLargeNumericMarkersOldStyles}
+  ${props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? `` : listLargeNumericMarkersOldStyles}
+
+  ${shadowSentinelStyles}
 `;
 };
 export const tableFullPageEditorStyles = css`

package/dist/es2019/plugins/table/utils/row-controls.js

@@ -7,8 +7,9 @@ import { TableCssClassName as ClassName } from '../types';
 import { tableDeleteButtonSize } from '../ui/consts';
 export const getRowHeights = tableRef => {
   const heights = [];
-  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];
       heights[i] = row.getBoundingClientRect().height + 1;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.2.1",
+	"version": "1.2.3",
 	"sideEffects": false
 }

package/dist/esm/i18n/en.js

@@ -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.
+ */
+//
+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/dist/esm/i18n/en_GB.js

@@ -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/dist/esm/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -9,16 +9,9 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
   function OverflowShadowsObserver(updateShadowState, _table, wrapper) {
     var _this = this;
     _classCallCheck(this, OverflowShadowsObserver);
-    _defineProperty(this, "firstCell", null);
-    _defineProperty(this, "lastCell", null);
-    _defineProperty(this, "getFirstCell", function (isSticky, hasHeaderRow) {
-      var _this$table;
-      return (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td' : 'table tbody tr th');
-    });
-    _defineProperty(this, "getLastCell", function (isSticky, hasHeaderRow) {
-      var _this$table2;
-      return (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td:last-child' : 'table tbody tr th:last-child');
-    });
+    _defineProperty(this, "leftShadowSentinel", null);
+    _defineProperty(this, "rightShadowSentinel", null);
+    _defineProperty(this, "shadowsObserved", false);
     _defineProperty(this, "isSticky", false);
     _defineProperty(this, "stickyRowHeight", 0);
     _defineProperty(this, "init", function () {
@@ -32,11 +25,11 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
           if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.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 ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
+          _this.checkIntersectionEvent(entry, _this.leftShadowSentinel === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
         };
         _this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
           entries.forEach(function (entry) {
@@ -61,25 +54,19 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
         _this.updateShadowState(shadowKey, true);
       }
     });
-    _defineProperty(this, "observeCells", function (isSticky, hasHeaderRow) {
-      var stickyChanged = !!isSticky !== _this.isSticky;
+    _defineProperty(this, "observeShadowSentinels", function (isSticky) {
+      var _this$table, _this$table2;
       _this.isSticky = !!isSticky;
 
       // update sticky shadows
       _this.updateStickyShadowsHeightIfChanged();
-      if (!stickyChanged) {
-        var firstCell = _this.getFirstCell(isSticky, hasHeaderRow);
-        var 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);
-      if (_this.tableIntersectionObserver && _this.firstCell && _this.lastCell) {
+      _this.leftShadowSentinel = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(".".concat(ClassName.TABLE_SHADOW_SENTINEL_LEFT));
+      _this.rightShadowSentinel = (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(".".concat(ClassName.TABLE_SHADOW_SENTINEL_RIGHT));
+      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;
       }
     });
     _defineProperty(this, "updateStickyShadows", function (stickyRowHeight) {