@atlaskit/editor-plugin-table 7.2.2 → 7.3.0

package/src/__tests__/unit/layout.ts

@@ -1,146 +0,0 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
-import type { DocBuilder } from '@atlaskit/editor-common/types';
-import { 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 { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { findTable } from '@atlaskit/editor-tables/utils';
-// 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,
-  tdCursor,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import { toggleTableLayout } from '../../commands';
-import tablePlugin from '../../plugin';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { pluginKey as tablePluginKey } from '../../pm-plugins/plugin-key';
-import type { PermittedLayoutsDescriptor, TablePluginState } from '../../types';
-
-describe('table toolbar', () => {
-  const tableOptions = {
-    allowNumberColumn: true,
-    allowHeaderRow: true,
-    allowHeaderColumn: true,
-    permittedLayouts: 'all' as PermittedLayoutsDescriptor,
-  };
-
-  const createEditor = createProsemirrorEditorFactory();
-  const preset = new Preset<LightEditorPlugin>()
-    .add([featureFlagsPlugin, {}])
-    .add([analyticsPlugin, {}])
-    .add(contentInsertionPlugin)
-    .add(decorationsPlugin)
-    .add(widthPlugin)
-    .add(guidelinePlugin)
-    .add(selectionPlugin)
-    .add([tablePlugin, { tableOptions }]);
-
-  const editor = (doc: DocBuilder) => {
-    return createEditor<TablePluginState, PluginKey, typeof preset>({
-      doc,
-      preset,
-      pluginKey: tablePluginKey,
-    });
-  };
-
-  describe('table layouts', () => {
-    it('should update the table node layout attribute', () => {
-      const { editorView } = editor(
-        doc(table()(tr(tdCursor, tdEmpty, tdEmpty))),
-      );
-
-      const nodeInitial = findTable(editorView.state.selection)!.node;
-      expect(nodeInitial).toBeDefined();
-      expect(nodeInitial!.attrs.layout).toBe('default');
-
-      toggleTableLayout(editorView.state, editorView.dispatch);
-
-      const { node } = findTable(editorView.state.selection)!;
-
-      expect(node).toBeDefined();
-      expect(node!.attrs.layout).toBe('wide');
-    });
-
-    it('can set the data-layout attribute on the table DOM element', () => {
-      const { editorView } = editor(
-        doc(table()(tr(tdCursor, tdEmpty, tdEmpty))),
-      );
-
-      let tableElement = editorView.dom.querySelector('table');
-      expect(tableElement!.getAttribute('data-layout')).toBe('default');
-
-      toggleTableLayout(editorView.state, editorView.dispatch);
-      tableElement = editorView.dom.querySelector('table');
-      expect(tableElement!.getAttribute('data-layout')).toBe('wide');
-    });
-
-    it('applies the initial data-layout attribute on the table DOM element', () => {
-      const { editorView } = editor(
-        doc(table({ layout: 'full-width' })(tr(tdCursor, tdEmpty, tdEmpty))),
-      );
-
-      const tables = editorView.dom.getElementsByTagName('table');
-      expect(tables.length).toBe(1);
-      const tableElement = tables[0];
-
-      expect(tableElement.getAttribute('data-layout')).toBe('full-width');
-    });
-
-    ['default', 'wide', 'full-width'].forEach((currentLayout) => {
-      describe(`#toggleTableLayout`, () => {
-        it('should toggle table layout attribute', () => {
-          const { editorView } = editor(
-            doc(
-              table({ layout: currentLayout as TableLayout })(
-                tr(tdCursor, tdEmpty, tdEmpty),
-              ),
-            ),
-          );
-          toggleTableLayout(editorView.state, editorView.dispatch);
-          const { tableNode } = getPluginState(editorView.state);
-          let nextLayout;
-          switch (currentLayout) {
-            case 'default':
-              nextLayout = 'wide';
-              break;
-            case 'wide':
-              nextLayout = 'full-width';
-              break;
-            case 'full-width':
-              nextLayout = 'default';
-              break;
-          }
-          expect(tableNode).toBeDefined();
-          expect(tableNode!.attrs.layout).toBe(nextLayout);
-        });
-      });
-    });
-
-    it('applies the initial data-layout attribute on the table DOM element', () => {
-      const { editorView } = editor(
-        doc(table({ layout: 'full-width' })(tr(tdCursor, tdEmpty, tdEmpty))),
-      );
-
-      const tables = editorView.dom.getElementsByTagName('table');
-      expect(tables.length).toBe(1);
-      const tableElement = tables[0];
-
-      expect(tableElement.getAttribute('data-layout')).toBe('full-width');
-    });
-  });
-});

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

@@ -1,162 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { MockIntersectionObserver } from '@atlaskit/editor-test-helpers/mock-intersection-observer';
-
-import { OverflowShadowsObserver } from '../../../nodeviews/OverflowShadowsObserver';
-import { TableCssClassName as className, ShadowEvent } from '../../../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();
-  const disconnectSpy = jest.fn();
-  let overflowShadowsObserver: OverflowShadowsObserver;
-
-  const mockObserver = new MockIntersectionObserver();
-
-  beforeEach(() => {
-    overflowShadowsObserver = new OverflowShadowsObserver(
-      updateSpy,
-      table,
-      wrapper,
-    );
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  beforeAll(() => {
-    buildTable();
-    mockObserver.setup({ observe: observeSpy, disconnect: disconnectSpy });
-  });
-
-  afterAll(() => {
-    mockObserver.cleanup();
-  });
-
-  it('observes on first and last table cells', () => {
-    overflowShadowsObserver.observeShadowSentinels();
-    expect(observeSpy).toHaveBeenCalledWith(shadowSentinelLeft);
-    expect(observeSpy).toHaveBeenCalledWith(shadowSentinelRight);
-  });
-
-  it('does not re-observe if shadow sentinels are already observed', () => {
-    overflowShadowsObserver.observeShadowSentinels();
-    observeSpy.mockClear();
-    overflowShadowsObserver.observeShadowSentinels();
-    expect(observeSpy).not.toHaveBeenCalled();
-  });
-
-  it('disconnects intersection observer on dispose', () => {
-    const overflowShadowsObserver = new OverflowShadowsObserver(
-      updateSpy,
-      table,
-      wrapper,
-    );
-    overflowShadowsObserver.dispose();
-    expect(disconnectSpy).toHaveBeenCalled();
-  });
-
-  describe('calls the provided update function when intersecting', () => {
-    beforeEach(() => {
-      overflowShadowsObserver.observeShadowSentinels();
-    });
-
-    it.each([
-      [
-        'hides first shadow when first cell fully intersects',
-        {
-          getTarget: () => shadowSentinelLeft,
-          intersectionRatio: 1,
-          isIntersecting: true,
-          expectedShadow: ShadowEvent.SHOW_BEFORE_SHADOW,
-          expectedShow: false,
-        },
-      ],
-      [
-        'hides last shadow when last cell fully intersects',
-        {
-          getTarget: () => shadowSentinelRight,
-          intersectionRatio: 1,
-          isIntersecting: true,
-          expectedShadow: ShadowEvent.SHOW_AFTER_SHADOW,
-          expectedShow: false,
-        },
-      ],
-      [
-        'shows first shadow when first cell partially intersects',
-        {
-          getTarget: () => shadowSentinelLeft,
-          intersectionRatio: 0,
-          isIntersecting: true,
-          expectedShadow: ShadowEvent.SHOW_BEFORE_SHADOW,
-          expectedShow: true,
-        },
-      ],
-      [
-        'shows last shadow when last cell partially intersects',
-        {
-          getTarget: () => shadowSentinelRight,
-          intersectionRatio: 0,
-          isIntersecting: true,
-          expectedShadow: ShadowEvent.SHOW_AFTER_SHADOW,
-          expectedShow: true,
-        },
-      ],
-    ])(
-      '%s',
-      (
-        _name,
-        {
-          getTarget,
-          intersectionRatio,
-          isIntersecting,
-          expectedShadow,
-          expectedShow,
-        },
-      ) => {
-        mockObserver.triggerIntersect({
-          boundingClientRect: {
-            height: 10,
-            width: 10,
-          },
-          rootBounds: {
-            height: 100,
-            width: 100,
-          },
-          intersectionRatio,
-          target: getTarget(),
-          isIntersecting,
-        });
-        expect(updateSpy).toHaveBeenCalledWith(expectedShadow, expectedShow);
-      },
-    );
-  });
-
-  // helpers
-
-  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);
-    const tr = document.createElement('tr');
-    tbody.appendChild(tr);
-    td1 = document.createElement('td');
-    td2 = document.createElement('td');
-    tr.appendChild(td1);
-    tr.appendChild(td2);
-  }
-});

package/src/__tests__/unit/nodeviews/TableComponent.tsx

@@ -1,280 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-import { replaceRaf } from 'raf-stub';
-
-import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { Command, DocBuilder } from '@atlaskit/editor-common/types';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import {
-  findTable,
-  findTableClosestToPos,
-  selectTable,
-  selectTableClosestToPos,
-} from '@atlaskit/editor-tables/utils';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import {
-  doc,
-  p,
-  table,
-  td,
-  tdCursor,
-  tdEmpty,
-  thEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import * as commands from '../../../commands';
-import { hoverTable, toggleNumberColumn } from '../../../commands';
-import TableComponent from '../../../nodeviews/TableComponent';
-import tablePlugin from '../../../plugin';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
-import type { TablePluginState } from '../../../types';
-import { TableCssClassName as ClassName } from '../../../types';
-
-jest.mock('../../../utils/nodes', () =>
-  Object.assign({}, jest.requireActual('../../../utils/nodes'), {
-    tablesHaveDifferentColumnWidths: jest.fn(),
-  }),
-);
-
-jest.mock('../../../commands', () =>
-  Object.assign({}, jest.requireActual('../../../commands'), {
-    clearHoverSelection: jest.fn(),
-  }),
-);
-
-replaceRaf();
-const requestAnimationFrame = window.requestAnimationFrame as any;
-
-describe('table -> nodeviews -> TableComponent.tsx', () => {
-  const createEditor = createEditorFactory<TablePluginState>();
-  const getEditorFeatureFlags = jest.fn();
-  const editor = (
-    doc: DocBuilder,
-    featureFlags?: { [featureFlag: string]: string | boolean },
-  ) => {
-    getEditorFeatureFlags.mockReturnValue(featureFlags || {});
-    return createEditor({
-      doc,
-      editorProps: {
-        allowTables: false,
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ config: undefined })],
-        },
-        featureFlags,
-      },
-      pluginKey,
-    });
-  };
-  const getTableComponent = (editorView: EditorView, props: any = {}) => {
-    const tableF = findTable(editorView.state.selection);
-    const getNode = () => tableF!.node;
-    return (
-      <TableComponent
-        view={editorView}
-        eventDispatcher={
-          { on: () => {}, off: () => {} } as any as EventDispatcher
-        }
-        // @ts-ignore
-        containerWidth={{}}
-        // @ts-ignore
-        getNode={getNode}
-        getEditorFeatureFlags={getEditorFeatureFlags}
-        allowControls
-        contentDOM={(wrapper: HTMLElement | null) => {
-          const node = editorView.dom.getElementsByTagName('table')[0];
-          if (!wrapper?.firstChild) {
-            wrapper?.appendChild(node);
-          }
-        }}
-        getPos={jest.fn()}
-        {...props}
-      />
-    );
-  };
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('when a table is selected', () => {
-    it('should add table selected css class to the selected table', () => {
-      const { editorView } = editor(
-        doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdCursor))),
-      );
-      const { state, dispatch } = editorView;
-      dispatch(selectTable(state.tr));
-      const { container } = render(getTableComponent(editorView));
-      const tableContainer = container.querySelector(
-        `.${ClassName.TABLE_CONTAINER}`,
-      );
-      expect(
-        tableContainer!.classList.contains(ClassName.TABLE_SELECTED),
-      ).toBeTruthy();
-    });
-
-    it('should not clear the editor state hover selection when changing selection to another table', () => {
-      const clearHoverSelectionSpy = jest
-        .spyOn(commands, 'clearHoverSelection')
-        .mockImplementation(() => (() => {}) as any as Command);
-
-      const { editorView } = editor(
-        doc(
-          p('text'),
-          table()(tr(thEmpty, thEmpty, thEmpty)),
-          table()(tr(thEmpty, thEmpty, thEmpty)),
-        ),
-      );
-      const { state, dispatch } = editorView;
-
-      const isInDanger = true;
-      hoverTable(isInDanger)(state, dispatch);
-
-      const selectSecondTableTr = selectTableClosestToPos(
-        state.tr,
-        state.doc.resolve(26),
-      );
-      dispatch(selectSecondTableTr);
-      const secondTable = findTableClosestToPos(state.doc.resolve(26));
-
-      const selectFirstTableTr = selectTableClosestToPos(
-        state.tr,
-        state.doc.resolve(8),
-      );
-      dispatch(selectFirstTableTr);
-      const firstTable = findTableClosestToPos(state.doc.resolve(8));
-
-      const getTableNode = (index: number) => () =>
-        index === 1 ? firstTable!.node : secondTable!.node;
-
-      render(
-        <div>
-          {getTableComponent(editorView, {
-            getNode: getTableNode(1),
-          })}
-          {getTableComponent(editorView, {
-            getNode: getTableNode(2),
-          })}
-        </div>,
-      );
-      expect(clearHoverSelectionSpy).not.toBeCalled();
-    });
-  });
-
-  describe('when there are no tables in selection', () => {
-    it('clears the editor state hover selection if the editor state is in danger flag is set', () => {
-      const clearHoverSelectionSpy = jest
-        .spyOn(commands, 'clearHoverSelection')
-        .mockImplementation(() => (() => {}) as any as Command);
-
-      const { editorView } = editor(
-        doc(p('text'), table()(tr(thEmpty, thEmpty, thEmpty))),
-      );
-
-      const { state, dispatch } = editorView;
-      const isInDanger = true;
-      hoverTable(isInDanger)(state, dispatch);
-      dispatch(selectTable(state.tr));
-
-      const tableF = findTable(state.selection);
-      const getNode = () => tableF!.node;
-
-      const { rerender } = render(
-        getTableComponent(editorView, {
-          getNode,
-        }),
-      );
-
-      const newTr = state.tr.setSelection(TextSelection.create(state.doc, 0));
-      dispatch(newTr);
-
-      rerender(
-        getTableComponent(editorView, {
-          getNode,
-        }),
-      );
-      expect(clearHoverSelectionSpy).toBeCalledTimes(1);
-    });
-  });
-
-  describe('when the numbered column attribute is changed', () => {
-    it('should not resize the columns', () => {
-      const { editorView } = editor(
-        doc(
-          table({ isNumberColumnEnabled: false, layout: 'default' })(
-            tr(
-              td({ colwidth: [1400] })(p('{<>}')),
-              td({ colwidth: [48] })(p()),
-              td({ colwidth: [48] })(p()),
-            ),
-          ),
-        ),
-      );
-      const { state, dispatch } = editorView;
-      const tableCell = state.schema.nodes.tableCell;
-      const columnWidths: number[][] = [];
-
-      toggleNumberColumn(state, dispatch);
-      requestAnimationFrame.step();
-
-      editorView.state.doc.nodesBetween(3, 14, (node) => {
-        if (node.type === tableCell) {
-          columnWidths.push(node.attrs.colwidth);
-        }
-
-        return node.type !== tableCell;
-      });
-
-      expect(columnWidths).toEqual([[1400], [48], [48]]);
-    });
-  });
-
-  describe('WITH_CONTROLS css class', () => {
-    it.each<[string, object, boolean]>([
-      [
-        'is added when allowControls is set',
-        {
-          allowControls: true,
-          tableActive: true,
-        },
-        true,
-      ],
-      [
-        'is added by default when allowControls is not provided',
-        {
-          tableActive: true,
-        },
-        true,
-      ],
-      [
-        'is not added when allowControls is false',
-        {
-          allowControls: false,
-          tableActive: true,
-        },
-        false,
-      ],
-      [
-        'is not added when table is not active',
-        {
-          allowControls: true,
-          tableActive: false,
-        },
-        false,
-      ],
-    ])('%s', (_, props, expected) => {
-      const { editorView: view } = editor(
-        doc(p('text'), table()(tr(td()(p('{<>}text')), tdEmpty, tdEmpty))),
-      );
-      const { container } = render(getTableComponent(view, props));
-      const controlsContainer = container.querySelector(
-        `.${ClassName.WITH_CONTROLS}`,
-      );
-      expect(!!controlsContainer).toBe(expected);
-    });
-  });
-});