@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

package/src/__tests__/unit/pm-plugins/table-resizing/colgroup.ts

@@ -1,269 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  p,
-  table,
-  td,
-  th,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import defaultSchema from '@atlaskit/editor-test-helpers/schema';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
-
-import {
-  generateColgroup,
-  getColgroupChildrenLength,
-} from '../../../../pm-plugins/table-resizing/utils';
-import { isMinCellWidthTable } from '../../../../pm-plugins/table-resizing/utils/colgroup';
-
-describe('table-resizing/colgroup', () => {
-  describe('#generateColgroup', () => {
-    describe('creates col with correct widths', () => {
-      describe('based on colwidth cell attributes', () => {
-        ffTest(
-          'platform.editor.custom-table-width',
-          () => {
-            const result = generateColgroup(
-              getTable([
-                {
-                  colwidth: [10],
-                  colspan: 1,
-                },
-                {
-                  colwidth: [20],
-                  colspan: 1,
-                },
-              ]),
-            );
-
-            expect(result).toEqual([
-              ['col', { style: 'width: 47.5px;' }],
-              ['col', { style: 'width: 47.5px;' }],
-            ]);
-          },
-          () => {
-            const result = generateColgroup(
-              getTable([
-                {
-                  colwidth: [10],
-                  colspan: 1,
-                },
-                {
-                  colwidth: [20],
-                  colspan: 1,
-                },
-              ]),
-            );
-
-            expect(result).toEqual([
-              ['col', { style: 'width: 10px;' }],
-              ['col', { style: 'width: 20px;' }],
-            ]);
-          },
-        );
-      });
-
-      describe('when colwidth is not an array', () => {
-        ffTest(
-          'platform.editor.custom-table-width',
-          () => {
-            const result = generateColgroup(
-              getTable([
-                {
-                  colwidth: 10,
-                  colspan: 1,
-                },
-                {
-                  colwidth: null,
-                  colspan: 1,
-                },
-                {
-                  colwidth: undefined,
-                  colspan: 1,
-                },
-              ]),
-            );
-
-            expect(result).toEqual([
-              ['col', { style: 'width: 48px;' }],
-              ['col', { style: 'width: 48px;' }],
-              ['col', { style: 'width: 48px;' }],
-            ]);
-          },
-          () => {
-            const result = generateColgroup(
-              getTable([
-                {
-                  colwidth: 10,
-                  colspan: 1,
-                },
-                {
-                  colwidth: null,
-                  colspan: 1,
-                },
-                {
-                  colwidth: undefined,
-                  colspan: 1,
-                },
-              ]),
-            );
-
-            expect(result).toEqual([
-              ['col', {}],
-              ['col', {}],
-              ['col', {}],
-            ]);
-          },
-        );
-      });
-
-      describe('when colwidth has falsy values', () => {
-        ffTest(
-          'platform.editor.custom-table-width',
-          () => {
-            const result = generateColgroup(
-              getTable([
-                {
-                  colwidth: [0],
-                  colspan: 1,
-                },
-                {
-                  colwidth: [null],
-                  colspan: 1,
-                },
-                {
-                  colwidth: [undefined],
-                  colspan: 1,
-                },
-              ]),
-            );
-
-            expect(result).toEqual(
-              expect.arrayContaining([
-                // (.666*) -> match unknown number of 6's
-                // (.?) -> match rounding errors e.g. 47.6666664px
-                [
-                  'col',
-                  { style: expect.stringMatching(/^width: 47.666*.?px/) },
-                ],
-                [
-                  'col',
-                  { style: expect.stringMatching(/^width: 47.666*.?px/) },
-                ],
-                [
-                  'col',
-                  { style: expect.stringMatching(/^width: 47.666*.?px/) },
-                ],
-              ]),
-            );
-          },
-          () => {
-            const result = generateColgroup(
-              getTable([
-                {
-                  colwidth: [0],
-                  colspan: 1,
-                },
-                {
-                  colwidth: [null],
-                  colspan: 1,
-                },
-                {
-                  colwidth: [undefined],
-                  colspan: 1,
-                },
-              ]),
-            );
-            expect(result).toEqual([
-              ['col', {}],
-              ['col', {}],
-              ['col', {}],
-            ]);
-          },
-        );
-      });
-
-      function getTable(cellAttributes: { [key: string]: any }[]) {
-        return table({
-          isNumberColumnEnabled: true,
-        })(tr(...cellAttributes.map((attrs) => td(attrs)(p('text')))))(
-          defaultSchema,
-        );
-      }
-    });
-  });
-
-  //isMinCellWidthTable function test
-  describe('#isMinCellWidthTable', () => {
-    describe('check if a table has all the columns with minimum width', () => {
-      it('when input table has all columns in minimum width', () => {
-        const result = isMinCellWidthTable(getMinCellWidthTable());
-
-        expect(result).toEqual(true);
-      });
-
-      it('when input table has a column that is not minimum width', () => {
-        const result = isMinCellWidthTable(getNonMinCellWidthTable());
-
-        expect(result).toEqual(false);
-      });
-
-      function getMinCellWidthTable() {
-        return table()(
-          tr(
-            td({ colwidth: [48] })(p('')),
-            td({ colwidth: [48] })(p('')),
-            td({ colwidth: [48] })(p('')),
-          ),
-        )(defaultSchema);
-      }
-
-      function getNonMinCellWidthTable() {
-        return table()(
-          tr(
-            td({ colwidth: [200] })(p('')),
-            td({ colwidth: [200] })(p('')),
-            td({ colwidth: [48] })(p('')),
-          ),
-        )(defaultSchema);
-      }
-    });
-  });
-
-  describe('#getColgroupChildrenLength', () => {
-    it('returns 1 when table only have 1 column', () => {
-      expect(
-        getColgroupChildrenLength(table()(tr(td()(p(''))))(defaultSchema)),
-      ).toBe(1);
-    });
-
-    it('returns 3 when table have 3 column', () => {
-      expect(
-        getColgroupChildrenLength(
-          table()(tr(td()(p('')), td()(p('')), td()(p(''))))(defaultSchema),
-        ),
-      ).toBe(3);
-    });
-
-    it('returns 5 when table have 5 column', () => {
-      expect(
-        getColgroupChildrenLength(
-          table()(
-            tr(td()(p('')), td()(p('')), td()(p('')), td()(p('')), td()(p(''))),
-          )(defaultSchema),
-        ),
-      ).toBe(5);
-    });
-
-    it('returns correct number when table have merged header column', () => {
-      expect(
-        getColgroupChildrenLength(
-          table()(
-            tr(th({ colspan: 2 })(p('')), th()(p(''))),
-            tr(td()(p('')), td()(p('')), td()(p(''))),
-          )(defaultSchema),
-        ),
-      ).toBe(3);
-    });
-  });
-});

package/src/__tests__/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -1,192 +0,0 @@
-import {
-  ACTION_SUBJECT,
-  EVENT_TYPE,
-  TABLE_ACTION,
-} from '@atlaskit/editor-common/analytics';
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
-import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
-import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
-import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
-import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import {
-  akEditorDefaultLayoutWidth,
-  akEditorFullPageMaxWidth,
-} from '@atlaskit/editor-shared-styles/consts';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  createProsemirrorEditorFactory,
-  Preset,
-} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  doc,
-  p,
-  table,
-  td,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import tablePlugin from '../../../../plugin';
-import { pluginKey } from '../../../../pm-plugins/plugin-key';
-import { setResizeHandlePos } from '../../../../pm-plugins/table-resizing/commands';
-
-// We don't need to test if the analytics implementation works (tested elsewhere)
-// We just want to know if the action is called.
-const mockAttachPayload = jest.fn();
-const analyticsPluginFake = () => ({
-  name: 'analytics',
-  actions: {
-    attachAnalyticsEvent: mockAttachPayload.mockImplementation(() => () => {}),
-  },
-});
-
-describe('table-resizing/event-handlers', () => {
-  let editor: any;
-  beforeEach(() => {
-    const createEditor = createProsemirrorEditorFactory();
-    editor = (doc: DocBuilder) =>
-      createEditor({
-        doc,
-        attachTo: document.body,
-        preset: new Preset<LightEditorPlugin>()
-          .add([featureFlagsPlugin, {}])
-          .add([analyticsPluginFake as unknown as typeof analyticsPlugin, {}])
-          .add(contentInsertionPlugin)
-          .add(decorationsPlugin)
-          .add(widthPlugin)
-          .add(guidelinePlugin)
-          .add(selectionPlugin)
-          .add([
-            tablePlugin,
-            {
-              tableOptions: { allowColumnResizing: true },
-            },
-          ]),
-        pluginKey,
-      });
-  });
-
-  describe('#handleMouseDown', () => {
-    it('should dispatch analytics event on last column resizing attempt', async () => {
-      const { editorView: view } = editor(
-        doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
-      );
-
-      resizeColumn(view, 12, 150, 250);
-
-      expect(mockAttachPayload).toHaveBeenCalledWith(
-        expect.objectContaining({
-          action: TABLE_ACTION.ATTEMPTED_TABLE_WIDTH_CHANGE,
-          actionSubject: ACTION_SUBJECT.TABLE,
-          actionSubjectId: null,
-          eventType: EVENT_TYPE.UI,
-          attributes: expect.objectContaining({
-            delta: 100,
-            position: 'right',
-            type: 'table-border',
-          }),
-        }),
-      );
-    });
-
-    it('should shrink last column until table is no longer overflowing', async () => {
-      const { editorView: view } = editor(
-        doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
-      );
-
-      // Increase column to overflow
-      resizeColumn(view, 7, 50, 500);
-
-      expect(getTotalTableWidth(view.state as EditorState)).toBeGreaterThan(
-        akEditorFullPageMaxWidth,
-      );
-
-      resizeColumn(view, 12, 3000, 700);
-
-      // No matter how large we try to resize the result should equal the width (within 1 pt)
-      expect(getTotalTableWidth(view.state as EditorState)).toBeLessThanOrEqual(
-        akEditorDefaultLayoutWidth,
-      );
-      expect(
-        getTotalTableWidth(view.state as EditorState),
-      ).toBeGreaterThanOrEqual(akEditorFullPageMaxWidth - 1);
-    });
-
-    it('should not resize the last column to grow', async () => {
-      const { editorView: view } = editor(
-        doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
-      );
-
-      // Increase column to overflow
-      resizeColumn(view, 7, 50, 500);
-
-      const overflowingTableWidth = getTotalTableWidth(
-        view.state as EditorState,
-      );
-      expect(overflowingTableWidth).toBeGreaterThan(akEditorFullPageMaxWidth);
-
-      resizeColumn(view, 12, 400, 3000);
-
-      // Width should be unchanged
-      expect(getTotalTableWidth(view.state as EditorState)).toBe(
-        overflowingTableWidth,
-      );
-    });
-
-    it('should restore text selection after replacing the table', async () => {
-      const { editorView: view } = editor(
-        doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
-      );
-
-      const currentSelection = view.state.tr.selection;
-      expect(currentSelection instanceof TextSelection).toBeTruthy();
-      expect(currentSelection.$cursor.pos).toBe(15);
-
-      resizeColumn(view, 12, 150, 250);
-
-      expect(currentSelection instanceof TextSelection).toBeTruthy();
-      expect(currentSelection.$cursor.pos).toBe(15);
-    });
-  });
-});
-
-function getTotalTableWidth(state: EditorState) {
-  let totalWidth = 0;
-  state.doc.descendants((node) => {
-    if (node.type.name === 'tableCell') {
-      totalWidth += node.attrs.colwidth[0];
-      return false;
-    }
-    return true;
-  });
-  return totalWidth;
-}
-
-function resizeColumn(
-  view: EditorView,
-  pos: number,
-  start: number,
-  end: number,
-) {
-  setResizeHandlePos(pos)(view.state, view.dispatch);
-
-  const firstmousedownEvent = new MouseEvent('mousedown', {
-    clientX: start,
-  });
-
-  view.dom.dispatchEvent(firstmousedownEvent);
-
-  const firstmouseupEvent = new MouseEvent('mouseup', {
-    clientX: end,
-  });
-  window.dispatchEvent(firstmouseupEvent);
-}

package/src/__tests__/unit/pm-plugins/table-resizing/utils/resize-state.ts

@@ -1,33 +0,0 @@
-import { updateColgroup } from '../../../../../pm-plugins/table-resizing/utils/resize-state';
-import type { ResizeState } from '../../../../../pm-plugins/table-resizing/utils/types';
-
-describe('table-resizing/utils/resize-state', () => {
-  describe('#updateColgroup', () => {
-    it('should not throw exception when the dom cols does not exist', () => {
-      const state = {
-        cols: [{ width: 100 }],
-      };
-      const tableRef = document.createElement('div');
-
-      const func = () => {
-        updateColgroup(state as ResizeState, tableRef);
-      };
-
-      expect(func).not.toThrow();
-    });
-
-    it('should not throw exception when the column is null', () => {
-      const state = {
-        cols: [null],
-      };
-      const tableRef = document.createElement('div');
-
-      const func = () => {
-        // @ts-ignore
-        updateColgroup(state, tableRef);
-      };
-
-      expect(func).not.toThrow();
-    });
-  });
-});