@atlaskit/editor-plugin-table 1.2.0 → 1.2.2

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -172,7 +172,7 @@ export class TableRowNodeView {
         syncStickyRowToTable(tree.table);
       }, 0);
     });
-    _defineProperty(this, "onWidthPluginState", () => {
+    _defineProperty(this, "updateStickyHeaderWidth", () => {
       // table width might have changed, sync that back to sticky row
       const tree = this.tree;
       if (!tree) {
@@ -206,7 +206,7 @@ export class TableRowNodeView {
       // otherwise make it non-sticky
       return false;
     });
-    _defineProperty(this, "makeHeaderRowSticky", tree => {
+    _defineProperty(this, "makeHeaderRowSticky", (tree, scrollTop) => {
       var _tbody$firstChild;
       // If header row height is more than 50% of viewport height don't do this
       if (this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
@@ -223,7 +223,10 @@ export class TableRowNodeView {
         return;
       }
       const currentTableTop = this.getCurrentTableTop(tree);
-      const domTop = currentTableTop > 0 ? this.topPosEditorElement : this.topPosEditorElement + currentTableTop;
+      if (!scrollTop) {
+        scrollTop = getTop(this.editorScrollableElement);
+      }
+      const domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
       if (!this.isSticky) {
         syncStickyRowToTable(table);
         this.dom.classList.add('sticky');
@@ -315,7 +318,7 @@ export class TableRowNodeView {
       }
       this.topPosEditorElement = getTop(this.editorScrollableElement);
     }
-    this.eventDispatcher.on('widthPlugin', this.onWidthPluginState);
+    this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
     this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
     this.listening = true;
     this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
@@ -341,7 +344,7 @@ export class TableRowNodeView {
     if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
       this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
     }
-    this.eventDispatcher.off('widthPlugin', this.onWidthPluginState);
+    this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
     this.eventDispatcher.off(tablePluginKey.key, this.onTablePluginState);
     this.listening = false;
     this.dom.removeEventListener('wheel', this.headerRowMouseScroll);
@@ -360,6 +363,9 @@ export class TableRowNodeView {
       return;
     }
     this.resizeObserver.observe(this.dom);
+    if (this.editorScrollableElement) {
+      this.resizeObserver.observe(this.editorScrollableElement);
+    }
     window.requestAnimationFrame(() => {
       var _this$tree;
       // we expect tree to be defined after animation frame
@@ -389,14 +395,21 @@ export class TableRowNodeView {
         table
       } = this.tree;
       entries.forEach(entry => {
-        const newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-        if (this.sentinels.bottom &&
-        // When the table header is sticky, it would be taller by a 1px (border-bottom),
-        // So we adding this check to allow a 1px difference.
-        Math.abs(newHeight - (this.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
-          this.stickyRowHeight = newHeight;
-          this.sentinels.bottom.style.bottom = `${tableScrollbarOffset + stickyRowOffsetTop + newHeight}px`;
-          updateTableMargin(table);
+        var _this$editorScrollabl;
+        // On resize of the parent scroll element we need to adjust the width
+        // of the sticky header
+        if (entry.target.className === ((_this$editorScrollabl = this.editorScrollableElement) === null || _this$editorScrollabl === void 0 ? void 0 : _this$editorScrollabl.className)) {
+          this.updateStickyHeaderWidth();
+        } else {
+          const newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
+          if (this.sentinels.bottom &&
+          // When the table header is sticky, it would be taller by a 1px (border-bottom),
+          // So we adding this check to allow a 1px difference.
+          Math.abs(newHeight - (this.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
+            this.stickyRowHeight = newHeight;
+            this.sentinels.bottom.style.bottom = `${tableScrollbarOffset + stickyRowOffsetTop + newHeight}px`;
+            updateTableMargin(table);
+          }
         }
       });
     });
@@ -421,18 +434,20 @@ export class TableRowNodeView {
           var _entry$rootBounds2;
           const sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
           if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
-            this.tree && this.makeHeaderRowSticky(this.tree);
+            var _entry$rootBounds3;
+            this.tree && this.makeHeaderRowSticky(this.tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
           } else {
             table && this.makeRowHeaderNotSticky(table);
           }
         }
         if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
-          var _entry$rootBounds3;
-          const sentinelIsAboveScrollArea = entry.boundingClientRect.top - this.dom.offsetHeight < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top) || 0);
+          var _entry$rootBounds4;
+          const sentinelIsAboveScrollArea = entry.boundingClientRect.top - this.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
           if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
             this.makeRowHeaderNotSticky(table);
           } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
-            this.tree && this.makeHeaderRowSticky(this.tree);
+            var _entry$rootBounds5;
+            this.tree && this.makeHeaderRowSticky(this.tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
           }
         }
       });

package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -9,7 +9,6 @@ import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import { getParentWidthWithoutPadding } from './utils/misc';
 export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) => {
   const {
     state,
@@ -32,10 +31,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   }
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
-
-  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
-  const parentActualWidth = getParentWidthWithoutPadding(parentWidth, start, state);
-  let maxSize = parentActualWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
+  let maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;
   }

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/misc.js

@@ -3,8 +3,6 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { containsClassName } from '@atlaskit/editor-common/utils';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
-import { gridSize } from '@atlaskit/theme/constants';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 export const tableLayoutToSize = {
   default: akEditorDefaultLayoutWidth,
   wide: akEditorWideLayoutWidth,
@@ -73,43 +71,9 @@ export const getTableMaxWidth = ({
 }) => {
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-
-  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
-  const parentActualWidth = getParentWidthWithoutPadding(parentWidth, tableStart, state);
-  let maxWidth = parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
+  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }
   return maxWidth;
-};
-export const getParentWidthWithoutPadding = (parentWidth, tableStartPos, state) => {
-  const node = getNestedParentNode(tableStartPos, state);
-  if (!node) {
-    return;
-  }
-  const {
-    schema
-  } = state;
-  if (node.type === schema.nodes.expand) {
-    // padding
-    parentWidth -= gridSize() * 2;
-    // gutter offset
-    parentWidth += gridSize() * 1.5 * 2;
-    // padding right
-    parentWidth -= gridSize();
-    // padding left
-    parentWidth -= gridSize() * 4 - gridSize() / 2;
-  }
-  return parentWidth;
-};
-
-// copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
-// to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
-const getNestedParentNode = (tablePos, state) => {
-  if (tablePos === undefined) {
-    return null;
-  }
-  const $pos = state.doc.resolve(tablePos);
-  const parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
-  return parent ? parent.node : null;
 };

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/FloatingContextualMenu/ContextualMenu.js

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
 import { splitCell } from '@atlaskit/editor-tables/utils';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
-import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, backgroundPaletteTooltipMessages, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
@@ -94,12 +94,16 @@ export class ContextualMenu extends Component {
         intl: {
           formatMessage
         },
-        editorView
+        editorView,
+        getEditorFeatureFlags
       } = this.props;
       const items = [];
       const {
         isSubmenuOpen
       } = this.state;
+      const {
+        useSomewhatSemanticTextColorNames
+      } = getEditorFeatureFlags();
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
         targetCellPosition,
@@ -126,9 +130,19 @@ export class ContextualMenu extends Component {
             ref: this.handleSubMenuRef
           }, jsx(ColorPalette, {
             cols: 7,
-            palette: cellBackgroundColorPalette,
             onClick: this.setColor,
-            selectedColor: background
+            selectedColor: background,
+            paletteOptions: {
+              palette: cellBackgroundColorPalette,
+              paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+              // We did not want to create new FF or update
+              //  useSomewhatSemanticTextColorNames name
+              //  because it is temporary and require extra work.
+              // So even though it says text color names,
+              //  we are going to use for all color pickers
+              //  such as text, background and table charts.
+              showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+            }
           })))
         });
       }

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/index.js

@@ -34,7 +34,8 @@ const FloatingContextualMenu = ({
   isOpen,
   pluginConfig,
   editorAnalyticsAPI,
-  getEditorContainerWidth
+  getEditorContainerWidth,
+  getEditorFeatureFlags
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -69,7 +70,8 @@ const FloatingContextualMenu = ({
     ,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: [-7, 0]
+    offset: [-7, 0],
+    stick: true
   }, jsx("div", {
     css: tablePopupStyles
   }, jsx(ContextualMenu, {
@@ -83,7 +85,8 @@ const FloatingContextualMenu = ({
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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 = `
@@ -532,6 +547,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;
@@ -625,6 +642,7 @@ export const tableStyles = props => {
       padding-bottom: 0px;
       /* fixes gap cursor height */
       overflow: auto;
+      overflow-y: hidden;
       position: relative;
     }
   }
@@ -646,6 +664,8 @@ export const tableStyles = props => {
   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}
+
+  ${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/types/i18n.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.2.0",
+	"version": "1.2.2",
 	"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/index.js

@@ -266,7 +266,8 @@ var tablesPlugin = function tablesPlugin(options) {
             isOpen: Boolean(isContextualMenuOpen),
             pluginConfig: pluginConfig,
             editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth
+            getEditorContainerWidth: defaultGetEditorContainerWidth,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), allowControls && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

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) {