@atlaskit/editor-plugin-table 1.2.1 → 1.2.3

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

@@ -0,0 +1,130 @@
+export default {
+  version: 1,
+  type: 'doc',
+  content: [
+    {
+      type: 'table',
+      attrs: {
+        isNumberColumnEnabled: false,
+        layout: 'default',
+        localId: '79259280-56bc-4cb0-9587-572864b97f39',
+      },
+      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: 'test',
+        },
+      ],
+    },
+  ],
+};

package/src/__tests__/integration/horizontal-scroll-shadows.ts

@@ -0,0 +1,199 @@
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import WebdriverPage from '@atlaskit/webdriver-runner/wd-wrapper';
+
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+
+import {
+  fullpage,
+  resizeColumn,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+
+import { TableCssClassName as className } from '../../plugins/table/types';
+import basicTable from './__fixtures__/basic-table';
+
+const checkShadows = async (page: WebdriverPage, side?: 'left' | 'right') => {
+  const leftShadow = await page.$(`.${className.TABLE_LEFT_SHADOW}`);
+  const leftShadowStyle = await leftShadow.getAttribute('style');
+  const rightShadow = await page.$(`.${className.TABLE_RIGHT_SHADOW}`);
+  const rightShadowStyle = await rightShadow.getAttribute('style');
+
+  if (!side) {
+    return (
+      leftShadowStyle.includes('display: block;') &&
+      rightShadowStyle.includes('display: block;')
+    );
+  } else if (side === 'left') {
+    return leftShadowStyle.includes('display: block;');
+  } else if (side === 'right') {
+    return rightShadowStyle.includes('display: block;');
+  }
+};
+
+BrowserTestCase(
+  'Table does not show horizontal scroll shadows when there is no scrollbar',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(basicTable),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+    expect(await checkShadows(page)).toBeFalsy();
+  },
+);
+
+BrowserTestCase(
+  'Table shows right shadow when table is scrollable and all the way to the left',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(basicTable),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 1000 });
+
+    expect(await checkShadows(page, 'right')).toBeTruthy();
+  },
+);
+
+BrowserTestCase(
+  'Table should not show left shadow when table is scrollable and all the way to the left',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(basicTable),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 1000 });
+
+    expect(await checkShadows(page, 'left')).toBeFalsy();
+  },
+);
+
+BrowserTestCase(
+  'Table should show both left and right shadows when table is scrollable and scrolled',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(basicTable),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 1000 });
+    await page.evaluate(() => {
+      const tableWrapper =
+        document.querySelector<HTMLElement>('.pm-table-wrapper');
+      if (tableWrapper) {
+        tableWrapper.scrollLeft += 500;
+      }
+      return tableWrapper;
+    });
+
+    expect(await checkShadows(page)).toBeTruthy();
+  },
+);
+
+BrowserTestCase(
+  'Table should not show right shadow when table is scrollable and scrolled all the way to the right',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(basicTable),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 1000 });
+    await page.evaluate(() => {
+      const tableWrapper =
+        document.querySelector<HTMLElement>('.pm-table-wrapper');
+      if (tableWrapper) {
+        tableWrapper.scrollLeft += 1000;
+      }
+      return tableWrapper;
+    });
+
+    expect(await checkShadows(page, 'right')).toBeFalsy();
+  },
+);
+
+BrowserTestCase(
+  'Table should show left shadow when table is scrollable and scrolled all the way to the right',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(basicTable),
+      allowTables: {
+        advanced: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+    await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 1000 });
+    await page.evaluate(() => {
+      const tableWrapper =
+        document.querySelector<HTMLElement>('.pm-table-wrapper');
+      if (tableWrapper) {
+        tableWrapper.scrollLeft += 1000;
+      }
+      return tableWrapper;
+    });
+
+    expect(await checkShadows(page, 'left')).toBeTruthy();
+  },
+);

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__/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/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/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/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',
+};