@atlaskit/editor-plugin-table 1.2.0 → 1.2.2

package/src/__tests__/integration/meta-arrowup-cursor-in-first-row.ts

@@ -8,7 +8,7 @@ import {
   goToEditorTestingWDExample,
   mountEditor,
 } from '@atlaskit/editor-test-helpers/testing-example-page';
-import tableAdf from './__fixtures__/table-and-paragraph-adf.json';
+import tableAdf from './__fixtures__/table-and-paragraph-adf';
 
 BrowserTestCase(
   'meta-arrowup-cursor-in-first-row.ts: pressing command/ctrl + arrow up should move cursor into first row',
@@ -20,7 +20,9 @@ BrowserTestCase(
     );
     await mountEditor(page, {
       appearance: fullpage.appearance,
-      allowTables: {},
+      allowTables: {
+        advanced: true,
+      },
       defaultValue: tableAdf,
     });
 

package/src/__tests__/integration/sticky-header.ts

@@ -3,6 +3,7 @@ import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
 import {
   fullpage,
   tableSelectors,
+  toggleBreakout,
 } from '@atlaskit/editor-test-helpers/integration/helpers';
 import {
   goToEditorTestingWDExample,
@@ -22,6 +23,15 @@ const scrollTo = async (page: WebdriverPage, height: number) => {
   );
 };
 
+// const resizeScrollParent = async (page: WebdriverPage) => {
+//   const editorScrollParentSelector = '.ak-editor-fp-content-area';
+//   await page.execute((editorScrollParentSelector: string) => {
+//     const editor = document.querySelector(editorScrollParentSelector);
+//     console.log('editort', editor);
+//     editor && editor.setAttribute('width', '1000px');
+//   }, editorScrollParentSelector);
+// };
+
 const insertColumn = async (page: any, cell: 'first' | 'last') => {
   const columnControl = tableSelectors.nthColumnControl(1);
   const insertButton = tableSelectors.insertButton;
@@ -41,9 +51,12 @@ const insertColumn = async (page: any, cell: 'first' | 'last') => {
   await page.click(insertButton);
 };
 
+// FIXME: This test was automatically skipped due to failure on 01/04/2023: https://product-fabric.atlassian.net/browse/ED-17364
 BrowserTestCase(
   'Sticky header should correctly toggle on and off',
-  { skip: [] },
+  {
+    skip: ['*'],
+  },
   async (client: any, testName: string) => {
     const page = await goToEditorTestingWDExample(
       client,
@@ -158,3 +171,50 @@ BrowserTestCase(
     expect(!numberedColStyle.includes('top')).toBeTruthy();
   },
 );
+
+BrowserTestCase(
+  'Sticky header should resize when the width of parent scroll container changes',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(stickyTable),
+      allowTables: {
+        advanced: true,
+        stickyHeaders: true,
+      },
+      featureFlags: {
+        stickyHeadersOptimization: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+
+    await toggleBreakout(page, 2);
+
+    await scrollTo(page, window.innerHeight * 100);
+
+    await page.execute(() => {
+      const editorScrollParentSelector = '.fabric-editor-popup-scroll-parent';
+      const editor = document.querySelector(
+        editorScrollParentSelector,
+      ) as HTMLElement;
+      if (editor) {
+        editor.style.flexGrow = '0';
+        editor.style.width = '750px';
+      }
+    });
+
+    const table = await page.$(tableSelectors.stickyTable);
+    const tableWidth = await table.getSize();
+    const stickyHeader = await page.$(tableSelectors.stickyTr);
+    const stickyHeaderWidth = await stickyHeader.getSize();
+
+    expect(tableWidth.width).toEqual(stickyHeaderWidth.width);
+  },
+);

package/src/__tests__/unit/commands/insert.ts

@@ -37,14 +37,14 @@ describe('table plugin: insert', () => {
 
     const createEditor = createProsemirrorEditorFactory();
 
-    const preset = new Preset<LightEditorPlugin>();
-    preset.add([
-      tablePlugin,
-      {
-        tableOptions: {},
-      },
-    ]);
-    preset.add(widthPlugin);
+    const preset = new Preset<LightEditorPlugin>()
+      .add([
+        tablePlugin,
+        {
+          tableOptions: {},
+        },
+      ])
+      .add(widthPlugin);
 
     const editor = (doc: DocBuilder) =>
       createEditor<TablePluginState, PluginKey>({

package/src/__tests__/unit/commands/sort.ts

@@ -22,8 +22,10 @@ import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
 import tablePlugin from '../../../plugins/table-plugin';
 import statusPlugin from '@atlaskit/editor-core/src/plugins/status';
 import mentionsPlugin from '@atlaskit/editor-core/src/plugins/mentions';
+import editorDisabledPlugin from '@atlaskit/editor-core/src/plugins/editor-disabled';
 import hyperlinkPlugin from '@atlaskit/editor-core/src/plugins/hyperlink';
 import datePlugin from '@atlaskit/editor-core/src/plugins/date';
+import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -118,6 +120,8 @@ describe('Sort Table', () => {
     beforeEach(() => {
       ({ editorView } = createEditor({
         preset: new Preset<LightEditorPlugin>()
+          .add([featureFlagsPlugin, {}])
+          .add(editorDisabledPlugin)
           .add([tablePlugin, { tableOptions: { allowHeaderRow: true } }])
           .add([statusPlugin, { menuDisabled: false }])
           .add(mentionsPlugin)

package/src/__tests__/unit/commands.ts

@@ -60,6 +60,7 @@ import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
 import mediaPlugin from '@atlaskit/editor-core/src/plugins/media';
 import textFormattingPlugin from '@atlaskit/editor-core/src/plugins/text-formatting';
+import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -78,6 +79,7 @@ describe('table plugin: actions', () => {
       doc,
       attachTo: document.body,
       preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
         .add(tablePlugin)
         .add(panelPlugin)
         .add(textFormattingPlugin)

package/src/__tests__/unit/index.ts

@@ -62,6 +62,7 @@ import { getPluginState } from '../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import tablePlugin from '../../plugins/table-plugin';
+import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -91,6 +92,7 @@ describe('table plugin', () => {
     } as PluginConfig;
 
     const preset = new Preset<LightEditorPlugin>()
+      .add([featureFlagsPlugin, {}])
       .add([tablePlugin, { tableOptions }])
       .add([mediaPlugin, { allowMediaSingle: true }])
       .add([analyticsPlugin, {}])

package/src/__tests__/unit/keymap.ts

@@ -56,8 +56,9 @@ import statusPlugin from '@atlaskit/editor-core/src/plugins/status';
 import tablePlugin from '../../plugins/table';
 import { TablePluginState } from '../../plugins/table/types';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import featureFlagsPlugin from '@atlaskit/editor-core/src/plugins/feature-flags-context';
 import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
+import editorDisabledPlugin from '@atlaskit/editor-core/src/plugins/editor-disabled';
+import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -81,6 +82,7 @@ describe('table keymap', () => {
 
   const createEditor = createProsemirrorEditorFactory();
   const preset = new Preset<LightEditorPlugin>()
+    .add([featureFlagsPlugin, {}])
     .add(selectionPlugin)
     .add([
       tablePlugin,
@@ -97,12 +99,12 @@ describe('table keymap', () => {
     .add(emojiPlugin)
     .add(jiraIssuePlugin)
     .add(extensionPlugin)
+    .add(editorDisabledPlugin)
     .add(datePlugin)
     .add(layoutPlugin)
     .add([statusPlugin, { menuDisabled: false }])
     .add([mediaPlugin, { allowMediaSingle: true }])
     .add([analyticsPlugin, { createAnalyticsEvent }])
-    .add([featureFlagsPlugin, {}])
     .add(widthPlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/layout.ts

@@ -35,6 +35,7 @@ import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
 import layoutPlugin from '@atlaskit/editor-core/src/plugins/layout';
 import { PluginKey } from 'prosemirror-state';
+import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 
 describe('table toolbar', () => {
   const tableOptions = {
@@ -46,6 +47,7 @@ describe('table toolbar', () => {
 
   const createEditor = createProsemirrorEditorFactory();
   const preset = new Preset<LightEditorPlugin>()
+    .add([featureFlagsPlugin, {}])
     .add([tablePlugin, { tableOptions }])
     .add(expandPlugin)
     .add(extensionPlugin)

package/src/__tests__/unit/nodeviews/OverflowShadowsObserver.ts

@@ -1,12 +1,15 @@
 import { MockIntersectionObserver } from '@atlaskit/editor-test-helpers/mock-intersection-observer';
 
 import { OverflowShadowsObserver } from '../../../plugins/table/nodeviews/OverflowShadowsObserver';
+import { TableCssClassName as className } from '../../../plugins/table/types';
 import { ShadowEvent } from '../../../plugins/table/types';
 
 describe('OverflowShadowsObserver', () => {
   let table: HTMLTableElement;
   let td1: HTMLTableDataCellElement;
   let td2: HTMLTableDataCellElement;
+  let shadowSentinelLeft: HTMLDivElement;
+  let shadowSentinelRight: HTMLDivElement;
   let wrapper: HTMLDivElement;
   const updateSpy = jest.fn();
   const observeSpy = jest.fn();
@@ -37,15 +40,15 @@ describe('OverflowShadowsObserver', () => {
   });
 
   it('observes on first and last table cells', () => {
-    overflowShadowsObserver.observeCells();
-    expect(observeSpy).toHaveBeenCalledWith(td1);
-    expect(observeSpy).toHaveBeenCalledWith(td2);
+    overflowShadowsObserver.observeShadowSentinels();
+    expect(observeSpy).toHaveBeenCalledWith(shadowSentinelLeft);
+    expect(observeSpy).toHaveBeenCalledWith(shadowSentinelRight);
   });
 
-  it('does not re-observe if cells did not change', () => {
-    overflowShadowsObserver.observeCells();
+  it('does not re-observe if shadow sentinels are already observed', () => {
+    overflowShadowsObserver.observeShadowSentinels();
     observeSpy.mockClear();
-    overflowShadowsObserver.observeCells();
+    overflowShadowsObserver.observeShadowSentinels();
     expect(observeSpy).not.toHaveBeenCalled();
   });
 
@@ -61,14 +64,14 @@ describe('OverflowShadowsObserver', () => {
 
   describe('calls the provided update function when intersecting', () => {
     beforeEach(() => {
-      overflowShadowsObserver.observeCells();
+      overflowShadowsObserver.observeShadowSentinels();
     });
 
     it.each([
       [
         'hides first shadow when first cell fully intersects',
         {
-          getTarget: () => td1,
+          getTarget: () => shadowSentinelLeft,
           intersectionRatio: 1,
           isIntersecting: true,
           expectedShadow: ShadowEvent.SHOW_BEFORE_SHADOW,
@@ -78,7 +81,7 @@ describe('OverflowShadowsObserver', () => {
       [
         'hides last shadow when last cell fully intersects',
         {
-          getTarget: () => td2,
+          getTarget: () => shadowSentinelRight,
           intersectionRatio: 1,
           isIntersecting: true,
           expectedShadow: ShadowEvent.SHOW_AFTER_SHADOW,
@@ -88,7 +91,7 @@ describe('OverflowShadowsObserver', () => {
       [
         'shows first shadow when first cell partially intersects',
         {
-          getTarget: () => td1,
+          getTarget: () => shadowSentinelLeft,
           intersectionRatio: 0,
           isIntersecting: true,
           expectedShadow: ShadowEvent.SHOW_BEFORE_SHADOW,
@@ -98,7 +101,7 @@ describe('OverflowShadowsObserver', () => {
       [
         'shows last shadow when last cell partially intersects',
         {
-          getTarget: () => td2,
+          getTarget: () => shadowSentinelRight,
           intersectionRatio: 0,
           isIntersecting: true,
           expectedShadow: ShadowEvent.SHOW_AFTER_SHADOW,
@@ -140,6 +143,12 @@ describe('OverflowShadowsObserver', () => {
   function buildTable() {
     wrapper = document.createElement('div');
     table = document.createElement('table');
+    shadowSentinelLeft = document.createElement('div');
+    shadowSentinelLeft.className = className.TABLE_SHADOW_SENTINEL_LEFT;
+    shadowSentinelRight = document.createElement('div');
+    shadowSentinelRight.className = className.TABLE_SHADOW_SENTINEL_RIGHT;
+    table.prepend(shadowSentinelLeft);
+    table.prepend(shadowSentinelRight);
     wrapper.appendChild(table);
     const tbody = document.createElement('tbody');
     table.appendChild(tbody);

package/src/__tests__/unit/nodeviews/cell.ts

@@ -39,6 +39,20 @@ jest.mock('@atlaskit/editor-common/utils', () => ({
   },
 }));
 
+jest.mock('@atlaskit/editor-palette', () => ({
+  ...jest.requireActual<Object>('@atlaskit/editor-palette'),
+  hexToEditorBackgroundPaletteColorTokenName: jest.fn((hexColor: string) => {
+    return hexColor;
+  }),
+}));
+
+jest.mock('@atlaskit/tokens', () => ({
+  ...jest.requireActual<Object>('@atlaskit/tokens'),
+  getTokenValue: jest.fn((tokenId: string, fallback: string = '') => {
+    return tokenId || fallback;
+  }),
+}));
+
 describe('table -> nodeviews -> tableCell.tsx', () => {
   const TABLE_LOCAL_ID = 'test-table-local-id';
   const createEditor = createProsemirrorEditorFactory();

package/src/__tests__/unit/pm-plugins/main-with-allow-collapse.ts

@@ -21,6 +21,7 @@ import { TablePluginState } from '../../../plugins/table/types';
 import { handleDocOrSelectionChanged } from '../../../plugins/table/handlers';
 import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
+import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 
 describe('tables: main plugin with allowCollapse: true', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -28,6 +29,7 @@ describe('tables: main plugin with allowCollapse: true', () => {
     createEditor({
       doc,
       preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
         .add(tablePlugin)
         .add(expandPlugin)
         .add(extensionPlugin),

package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -472,7 +472,7 @@ describe('TableRowNodeView', () => {
         triggerElementIntersect({
           target: sentinelTop,
           isIntersecting: false,
-          rootBounds: { bottom: 0, top: 0 },
+          rootBounds: { bottom: 0, top: 56 },
           boundingClientRect: { bottom: 0, top: 0 },
         });
 
@@ -507,7 +507,7 @@ describe('TableRowNodeView', () => {
         triggerElementIntersect({
           target: sentinelBottom,
           isIntersecting: true,
-          rootBounds: { bottom: 0, top: 0 },
+          rootBounds: { bottom: 0, top: 56 },
           boundingClientRect: { bottom: 0, top: -100 },
         });
 

package/src/__tests__/unit/transforms/delete-rows.ts

@@ -241,6 +241,51 @@ describe('table plugin -> transforms -> delete rows', () => {
       });
     });
 
+    describe('when delete the row in between rows that have merged cells with an extra row underneath', () => {
+      it('should decrement colspan of these cells', () => {
+        const { editorView } = editor(
+          doc(
+            p('text'),
+            table()(
+              tr(td({ colspan: 5 })(p('a1')), td({})(p('a6'))),
+              tr(
+                td({})(p('b1{<cell}')),
+                td({})(p('b2')),
+                td({})(p('b3')),
+                td({})(p('b4')),
+                td({})(p('b5')),
+                td({})(p('b6{cell>}')),
+              ),
+              tr(td({})(p('c1')), td({ colspan: 5 })(p('c6'))),
+              tr(
+                td({ colspan: 3 })(p('d1')),
+                td({})(p('d4')),
+                td({})(p('d5')),
+                td({})(p('d6')),
+              ),
+            ),
+          ),
+        );
+        const { state, dispatch } = editorView;
+        dispatch(deleteRows(getSelectionRect(state.selection)!)(state.tr));
+        expect(editorView.state.doc).toEqualDocument(
+          doc(
+            p('text'),
+            table({ localId: TABLE_LOCAL_ID })(
+              tr(td({ colspan: 4 })(p('a1')), td({})(p('a6'))),
+              tr(td({})(p('c1')), td({ colspan: 4 })(p('c6'))),
+              tr(
+                td({ colspan: 2 })(p('d1')),
+                td({})(p('d4')),
+                td({})(p('d5')),
+                td({})(p('d6')),
+              ),
+            ),
+          ),
+        );
+      });
+    });
+
     describe('when after deleting the first row table has columns where all cells have colspan > 1', () => {
       it('should decrement colspan of these cells', () => {
         const { editorView } = editor(

package/src/__tests__/unit/ui/ContextualMenu.tsx

@@ -22,6 +22,7 @@ import { ContextualMenu } from '../../../plugins/table/ui/FloatingContextualMenu
 
 describe('ContextualMenu', () => {
   const getEditorContainerWidth = () => ({ width: 500 });
+  const getEditorFeatureFlags = () => ({});
   const createEditor = createProsemirrorEditorFactory();
   describe('with right table cell position in plugin state', () => {
     let editorView: EditorView;
@@ -44,6 +45,7 @@ describe('ContextualMenu', () => {
           isOpen
           selectionRect={{ bottom: 0, left: 0, right: 0, top: 0 }}
           getEditorContainerWidth={getEditorContainerWidth}
+          getEditorFeatureFlags={getEditorFeatureFlags}
         />,
       );
 

package/src/__tests__/unit/ui/FloatingContextualMenu.tsx

@@ -40,6 +40,7 @@ describe('FloatingContextualMenu', () => {
             isOpen
             pluginConfig={getPluginState(editorView.state).pluginConfig}
             getEditorContainerWidth={jest.fn()}
+            getEditorFeatureFlags={() => ({})}
           />
         </IntlProvider>,
       );

package/src/__tests__/unit/utils/collapse.ts

@@ -18,12 +18,15 @@ import {
   isTableCollapsible,
   collapseSelectedTable,
 } from '../../../plugins/table/utils/collapse';
+import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 
 describe('collapse', () => {
   const createEditor = createProsemirrorEditorFactory();
 
   const editor = (doc: DocBuilder, expandInPlugins?: boolean) => {
-    const preset = new Preset<LightEditorPlugin>().add(tablePlugin);
+    const preset = new Preset<LightEditorPlugin>()
+      .add([featureFlagsPlugin, {}])
+      .add(tablePlugin);
 
     const finalPreset = expandInPlugins ? preset.add(expandPlugin) : preset;
 

package/src/i18n/en.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.
+ */
+//
+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/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/index.tsx

@@ -371,6 +371,10 @@ const tablesPlugin: NextEditorPlugin<
                     pluginConfig={pluginConfig}
                     editorAnalyticsAPI={options?.editorAnalyticsAPI}
                     getEditorContainerWidth={defaultGetEditorContainerWidth}
+                    getEditorFeatureFlags={
+                      options?.getEditorFeatureFlags ||
+                      defaultGetEditorFeatureFlags
+                    }
                   />
                   {allowControls && (
                     <FloatingDeleteButton

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;
     }
   };