@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

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

@@ -1,118 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl-next';
-
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-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 { PluginKey } from '@atlaskit/editor-prosemirror/state';
-// 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,
-  tdCursor,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import { hoverTable } from '../../../commands';
-import tablePlugin from '../../../plugin';
-import { getDecorations } from '../../../pm-plugins/decorations/plugin';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import type { TablePluginState } from '../../../types';
-import TableFloatingControls from '../../../ui/TableFloatingControls';
-
-describe('TableFloatingControls', () => {
-  const createEditor = createProsemirrorEditorFactory();
-
-  const preset = new Preset<LightEditorPlugin>()
-    .add([featureFlagsPlugin, {}])
-    .add([analyticsPlugin, {}])
-    .add(contentInsertionPlugin)
-    .add(widthPlugin)
-    .add(guidelinePlugin)
-    .add(selectionPlugin)
-    .add([
-      tablePlugin,
-      { tableOptions: { advanced: true }, dragAndDropEnabled: false },
-    ]);
-
-  const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey, typeof preset>({
-      doc,
-      preset,
-      pluginKey: pluginKey,
-    });
-
-  describe('when tableRef is undefined', () => {
-    it('should not render table header', () => {
-      const { editorView } = editor(
-        doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdEmpty))),
-      );
-      const { container } = render(
-        <TableFloatingControls
-          editorView={editorView}
-          isDragAndDropEnabled={false}
-        />,
-      );
-      expect(container.innerHTML).toEqual('');
-    });
-  });
-
-  describe('when tableRef is defined', () => {
-    it('should render CornerControls and RowControls', () => {
-      const { editorView } = editor(
-        doc(p('text'), table()(tr(tdCursor, tdEmpty, tdEmpty))),
-      );
-      const ref = editorView.dom.querySelector('table') || undefined;
-
-      render(
-        <IntlProvider locale="en">
-          <TableFloatingControls
-            tableRef={ref}
-            tableActive={true}
-            editorView={editorView}
-            isDragAndDropEnabled={false}
-            selection={editorView.state.selection}
-          />
-        </IntlProvider>,
-      );
-
-      expect(screen.getByLabelText('Highlight row')).toBeTruthy();
-      expect(screen.getByLabelText('Highlight table')).toBeTruthy();
-    });
-  });
-
-  describe('when delete icon is hovered', () => {
-    it('should add a node decoration to table nodeView with class="danger"', () => {
-      const { editorView } = editor(
-        doc(
-          p('text'),
-          table()(
-            tr(tdCursor, tdEmpty),
-            tr(tdEmpty, tdEmpty),
-            tr(tdEmpty, tdEmpty),
-          ),
-        ),
-      );
-      hoverTable(true)(editorView.state, editorView.dispatch);
-      const decorationSet = getDecorations(editorView.state);
-      const decoration = decorationSet.find()[0] as any;
-      expect(decoration.type.attrs.class.indexOf('danger')).toBeGreaterThan(-1);
-    });
-  });
-});

package/src/__tests__/unit/undo-redo.ts

@@ -1,220 +0,0 @@
-import clone from 'lodash/clone';
-
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-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 { redo, undo } from '@atlaskit/editor-prosemirror/history';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-// 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,
-  tdCursor,
-  tdEmpty,
-  th,
-  thEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import sendKeyToPm from '@atlaskit/editor-test-helpers/send-key-to-pm';
-
-import { insertColumn } from '../../commands';
-import tablePlugin from '../../plugin';
-import { pluginKey as tablePluginKey } from '../../pm-plugins/plugin-key';
-import { deleteColumns } from '../../transforms';
-import { colsToRect } from '../../utils/table';
-
-const TABLE_LOCAL_ID = 'test-table-local-id';
-
-const getEditorContainerWidth = () => {
-  return {
-    width: 500,
-  };
-};
-// HELPERS
-const INSERT_COLUMN = (editorView: EditorView) =>
-  insertColumn(getEditorContainerWidth)(1)(
-    editorView.state,
-    editorView.dispatch,
-    editorView,
-  );
-const DELETE_COLUMN = (editorView: EditorView) => {
-  const { state, dispatch } = editorView;
-  dispatch(deleteColumns(colsToRect([0], 1), true, editorView)(state.tr));
-};
-const SHORTCUT_ADD_COLUMN_BEFORE = (editorView: EditorView) =>
-  sendKeyToPm(editorView, 'Ctrl-Alt-ArrowLeft');
-const SHORTCUT_ADD_COLUMN_AFTER = (editorView: EditorView) =>
-  sendKeyToPm(editorView, 'Ctrl-Alt-ArrowRight');
-
-describe('undo/redo with tables', () => {
-  const createEditor = createProsemirrorEditorFactory();
-  const editor = (doc: DocBuilder) => {
-    const tableOptions = {
-      advanced: true,
-      allowColumnSorting: true,
-    };
-    return createEditor({
-      doc,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add(selectionPlugin)
-        .add([tablePlugin, { tableOptions }]),
-      pluginKey: tablePluginKey,
-    });
-  };
-  type TestCase = [
-    string,
-    {
-      before: DocBuilder;
-      action: Function;
-    },
-  ];
-
-  const case01: TestCase = [
-    'when table has colwidth attribute and new col has been inserted',
-    {
-      before: doc(
-        table({
-          localId: TABLE_LOCAL_ID,
-        })(tr(th({ colwidth: [285] })(p('')), th({ colwidth: [1310] })(p('')))),
-      ),
-      action: INSERT_COLUMN,
-    },
-  ];
-
-  const case02: TestCase = [
-    'when table has colwidth attribute and deleting a col',
-    {
-      before: doc(
-        table({
-          localId: TABLE_LOCAL_ID,
-        })(tr(th({ colwidth: [285] })(p('')), th({ colwidth: [1310] })(p('')))),
-      ),
-      action: DELETE_COLUMN,
-    },
-  ];
-
-  const case03: TestCase = [
-    'when table has no colwidth attribute and new col is inserted',
-    {
-      before: doc(
-        table({
-          localId: TABLE_LOCAL_ID,
-        })(tr(thEmpty, thEmpty)),
-      ),
-      action: INSERT_COLUMN,
-    },
-  ];
-
-  const case04: TestCase = [
-    'when table has no colwidth attribute and col is deleted',
-    {
-      before: doc(
-        table({
-          localId: TABLE_LOCAL_ID,
-        })(tr(thEmpty, thEmpty)),
-      ),
-      action: DELETE_COLUMN,
-    },
-  ];
-
-  const case05: TestCase = [
-    'when table has colwidth attribute and col is inserted after selection via shortcuts',
-    {
-      before: doc(
-        table({
-          localId: TABLE_LOCAL_ID,
-        })(
-          tr(
-            td({ colwidth: [194] })(p('{<>}')),
-            td({ colwidth: [564] })(p('')),
-          ),
-        ),
-      ),
-      action: SHORTCUT_ADD_COLUMN_AFTER,
-    },
-  ];
-
-  const case06: TestCase = [
-    'when table has colwidth attribute and col is inserted before selection via shortcuts',
-    {
-      before: doc(
-        table({
-          localId: TABLE_LOCAL_ID,
-        })(
-          tr(
-            td({ colwidth: [194] })(p('{<>}')),
-            td({ colwidth: [564] })(p('')),
-          ),
-        ),
-      ),
-      action: SHORTCUT_ADD_COLUMN_BEFORE,
-    },
-  ];
-
-  const case07: TestCase = [
-    'when table has no colwidth attribute and col is inserted before selection via shortcuts',
-    {
-      before: doc(
-        table({
-          localId: TABLE_LOCAL_ID,
-        })(tr(tdCursor, tdEmpty)),
-      ),
-      action: SHORTCUT_ADD_COLUMN_BEFORE,
-    },
-  ];
-
-  const case08: TestCase = [
-    'when table has no colwidth attribute and col is inserted after selection via shortcuts',
-    {
-      before: doc(
-        table({
-          localId: TABLE_LOCAL_ID,
-        })(tr(tdCursor, tdEmpty)),
-      ),
-      action: SHORTCUT_ADD_COLUMN_BEFORE,
-    },
-  ];
-
-  describe.each<TestCase>([
-    case01,
-    case02,
-    case03,
-    case04,
-    case05,
-    case06,
-    case07,
-    case08,
-  ])('[case%#] %s', (_description, testCase) => {
-    it('should be able to undo/redo', () => {
-      const { editorView } = editor(testCase.before);
-      const docAtStart = clone(editorView.state.doc);
-      testCase.action(editorView);
-      expect(editorView.state.doc).not.toEqualDocument(docAtStart);
-      const docAfterAction = clone(editorView.state.doc);
-      undo(editorView.state, editorView.dispatch);
-      expect(editorView.state.doc).toEqualDocument(docAtStart);
-      redo(editorView.state, editorView.dispatch);
-      expect(editorView.state.doc).toEqualDocument(docAfterAction);
-    });
-  });
-});

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

@@ -1,98 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-
-import {
-  ACTION_SUBJECT,
-  EVENT_TYPE,
-  TABLE_ACTION,
-} from '@atlaskit/editor-common/analytics';
-
-import {
-  generateResizeFrameRatePayloads,
-  reduceResizeFrameRateSamples,
-  useMeasureFramerate,
-} from '../../../utils/analytics';
-
-describe('reduceResizeFrameRateSamples()', () => {
-  it('should return the same array if it has only one element', () => {
-    expect(reduceResizeFrameRateSamples([1])).toEqual([1]);
-  });
-
-  it('should return the first element and the average of the array if length > 1', () => {
-    expect(reduceResizeFrameRateSamples([3, 2, 4, 6])).toEqual([3, 4]);
-  });
-});
-
-describe('generateResizeFrameRatePayloads()', () => {
-  it('should return an empty array if the array is empty', () => {
-    expect(
-      generateResizeFrameRatePayloads({
-        docSize: 10,
-        frameRateSamples: [],
-        originalNode: { nodeSize: 5 } as any,
-      }),
-    ).toEqual([]);
-  });
-
-  it('should return an array of payloads with the correct attributes', () => {
-    expect(
-      generateResizeFrameRatePayloads({
-        docSize: 10,
-        frameRateSamples: [3, 2, 4, 6],
-        originalNode: { nodeSize: 5 } as any,
-      }),
-    ).toEqual([
-      {
-        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
-        actionSubject: ACTION_SUBJECT.TABLE,
-        eventType: EVENT_TYPE.OPERATIONAL,
-        attributes: {
-          frameRate: 3,
-          nodeSize: 5,
-          docSize: 10,
-          isInitialSample: true,
-        },
-      },
-      {
-        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
-        actionSubject: ACTION_SUBJECT.TABLE,
-        eventType: EVENT_TYPE.OPERATIONAL,
-        attributes: {
-          frameRate: 4,
-          nodeSize: 5,
-          docSize: 10,
-          isInitialSample: false,
-        },
-      },
-    ]);
-  });
-});
-
-describe('useMeasureFramerate()', () => {
-  jest.useFakeTimers('modern');
-
-  it('should return the correct handlers', () => {
-    const { result } = renderHook(() => useMeasureFramerate());
-    const { startMeasure, endMeasure, countFrames } = result.current;
-
-    expect(startMeasure).toBeInstanceOf(Function);
-    expect(endMeasure).toBeInstanceOf(Function);
-    expect(countFrames).toBeInstanceOf(Function);
-  });
-
-  it('should return the correct frame rate sample', async () => {
-    const { result } = renderHook(() =>
-      useMeasureFramerate({ minTimeMs: 0, minFrames: 0, sampleRateMs: 0 }),
-    );
-
-    const { startMeasure, endMeasure, countFrames } = result.current;
-    jest.advanceTimersByTime(100);
-    startMeasure();
-    jest.advanceTimersByTime(100);
-    countFrames();
-    const samples = endMeasure();
-
-    expect(samples).toEqual([10]);
-
-    jest.useRealTimers();
-  });
-});

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

@@ -1,57 +0,0 @@
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-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';
-// 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,
-  table,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import tablePlugin from '../../../plugin';
-import { isTableCollapsible } from '../../../utils/collapse';
-
-describe('collapse', () => {
-  const createEditor = createProsemirrorEditorFactory();
-
-  const editor = (doc: DocBuilder) => {
-    const preset = new Preset<LightEditorPlugin>()
-      .add([featureFlagsPlugin, {}])
-      .add([analyticsPlugin, {}])
-      .add(contentInsertionPlugin)
-      .add(widthPlugin)
-      .add(guidelinePlugin)
-      .add(selectionPlugin)
-      .add(tablePlugin);
-
-    return createEditor({ doc, preset });
-  };
-
-  describe('isTableCollapsible', () => {
-    it('should not mutate a transaction when using isTableCollapsible', () => {
-      const editorData = editor(doc(table()(tr(tdEmpty, tdEmpty))));
-      const editorView = editorData.editorView;
-      const newTr = editorView.state.tr;
-
-      expect(newTr.steps.length).toEqual(0);
-
-      const isTableCollapsibleRes = isTableCollapsible(newTr);
-
-      expect(newTr.steps.length).toEqual(0);
-      expect(isTableCollapsibleRes.tableIsCollapsible).toEqual(false);
-    });
-  });
-});

package/src/__tests__/unit/utils/column-controls.ts

@@ -1,205 +0,0 @@
-import type { TableMap } from '@atlaskit/editor-tables';
-
-import {
-  colWidthsForRow,
-  convertHTMLCellIndexToColumnIndex,
-  getColumnIndexMappedToColumnIndexInFirstRow,
-} from '../../../utils/column-controls';
-
-const createRow = (colCount: number, childType = 'td') => {
-  const tr = document.createElement('tr');
-  for (let i = 0; i < colCount; i++) {
-    const child = document.createElement(childType);
-    child.innerText = `Cell ${i}`;
-    tr.appendChild(child);
-  }
-
-  return tr;
-};
-
-describe('table utilities', () => {
-  let table: HTMLTableElement;
-  let tbody: HTMLElement;
-  let colgroup: HTMLTableColElement;
-
-  beforeEach(() => {
-    table = document.createElement('table');
-
-    tbody = document.createElement('tbody');
-    table.appendChild(tbody);
-
-    colgroup = document.createElement('colgroup');
-    table.appendChild(colgroup);
-  });
-
-  afterEach(() => {
-    table.remove();
-  });
-
-  describe('pctWidthsForRow', () => {
-    it('returns nothing for an empty table and empty row', () => {
-      expect(colWidthsForRow(createRow(0))).toEqual('');
-    });
-
-    describe('unresized table/no colgroup', () => {
-      it('returns 100% for single cell', () => {
-        expect(colWidthsForRow(createRow(1))).toEqual('100%');
-      });
-
-      it('returns split 50% for two cells', () => {
-        expect(colWidthsForRow(createRow(2))).toEqual('50% 50%');
-      });
-
-      it('works for merged cells', () => {
-        const rowWithColspan = createRow(2);
-
-        // first column should spans 3
-        rowWithColspan.children[0].setAttribute('colspan', '3');
-
-        // last row should still span 1 row
-        // giving 4 visual rows, and only 2 in DOM
-
-        // colgroup is still empty
-        expect(colWidthsForRow(rowWithColspan)).toEqual('75% 25%');
-      });
-    });
-  });
-});
-
-describe('table utilities - convertHTMLCellIndexToColumnIndex', () => {
-  /*
-    Table looks like this:
-     ___ _______ ___ ___ ___
-    |___|       |_A_|___|___|
-    |___|       |___|   |___|
-    |___|_______|_B_|   |___|
-    |___|___|___|___|   |___|
-    |___________|___|___|___|
-    |___________|___|_C_|___|
-    |___________|___|___|___|
-    |___|___|___|_D_|___|___|
-    |___|___|_E_____________|
-  */
-  const tableMap = {
-    width: 6,
-    height: 9,
-    map: [
-      1, 5, 5, 9, 13, 17, 23, 5, 5, 27, 31, 35, 41, 5, 5, 45, 31, 49, 55, 59,
-      63, 67, 31, 71, 77, 77, 77, 81, 31, 85, 91, 91, 91, 95, 99, 103, 109, 109,
-      109, 113, 117, 121, 127, 131, 135, 139, 143, 147, 153, 157, 161, 161, 161,
-      161,
-    ],
-  } as TableMap;
-
-  const testCases = [
-    [
-      'case A: when hovered cell is in the first row and first row has merged cells',
-      2, // htmlColIndex
-      0, // htmlRowIndex
-      3, // expected
-    ],
-    [
-      'case B: when hoverd cell is not in the first row, but the row has merged cells',
-      1,
-      2,
-      3,
-    ],
-    [
-      'case C: when a cell that is in the row above and to the left of current cell is merged',
-      3,
-      5,
-      5,
-    ],
-    [
-      'case D: when first row has merged cell and hovered cell is below merged area',
-      2,
-      7,
-      2,
-    ],
-    [
-      'case E: when first row has merged cell and hovered cell is below merged area and is part of merged area',
-      2,
-      8,
-      2,
-    ],
-  ];
-
-  describe('should convert cellIndex into colIndex correctly', () => {
-    test.each(testCases)(
-      '%s',
-      (message, htmlColIndex, htmlRowIndex, expected) => {
-        expect(
-          convertHTMLCellIndexToColumnIndex(
-            htmlColIndex as number,
-            htmlRowIndex as number,
-            tableMap,
-          ),
-        ).toEqual(expected);
-      },
-    );
-  });
-});
-
-describe('tableUtilities - getColumnIndexMappedToColumnIndexInFirstRow', () => {
-  /*
-    Table used for this tests looks like this:
-     ___ _______ ___ ___ ___ ___ ___ ___________ ___
-    |___|_______|___|___|___|___|___|___________|_D_|
-    |___|_A_|_B_|___|___|___|___|___|___|_E_|___|___|
-    |___|___|_______|___|_____C_|___|___|___|___|___|
-    |___|___|___|___|___|___|___|___|___|___|___|___|
-  */
-
-  const tableMap = {
-    width: 12,
-    height: 4,
-    map: [
-      1, 5, 5, 9, 13, 17, 21, 25, 29, 29, 29, 33, 39, 43, 47, 51, 55, 59, 63,
-      67, 71, 75, 79, 83, 89, 93, 97, 97, 101, 105, 105, 109, 113, 117, 121,
-      125, 131, 135, 139, 143, 147, 151, 155, 159, 163, 167, 171, 175,
-    ],
-  } as TableMap;
-
-  const testCases = [
-    [
-      'case A: mouse is on a cell located below merged area of the first row closer to its start',
-      2, // convertedColIndex
-      1, // htmlRowIndex
-      1, // expected
-    ],
-    [
-      'case B: mouse is on a cell located below merged area of the first row close to its end',
-      1,
-      1,
-      1,
-    ],
-    [
-      'case E: mouse is on a cell located below merged area of the first row in the middle of the merged area',
-      9,
-      1,
-      8,
-    ],
-    ['case C: mouse is on a merged cell located below the first row', 5, 2, 5],
-    [
-      'case D: mouse is on a cell in the first row that is next to a merged cell',
-      11,
-      1,
-      11,
-    ],
-  ];
-
-  describe('should adapt converted colIndex when first row has merged cells', () => {
-    test.each(testCases)(
-      '%s',
-      (message, convertedColIndex, htmlRowIndex, expected) => {
-        expect(
-          getColumnIndexMappedToColumnIndexInFirstRow(
-            convertedColIndex as number,
-            htmlRowIndex as number,
-            tableMap,
-          ),
-        ).toEqual(expected);
-      },
-    );
-  });
-});