@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,130 @@
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  td,
+  tdCursor,
+  tdEmpty,
+  tr,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../table';
+import { handleMouseOut, handleMouseDown } from '../../event-handlers';
+import { pluginKey } from '../../pm-plugins/plugin-key';
+import { TableCssClassName as ClassName } from '../../types';
+
+describe('table plugin: decorations', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+      pluginKey,
+    });
+  describe('#handleMouseDown', () => {
+    beforeEach(() => {
+      jest.resetAllMocks();
+    });
+    it('should return true & prevent default behaviour for table wrappers: pm-table-contianer', () => {
+      const { editorView } = editor(
+        doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
+      );
+      const tableContainer = document.createElement('div');
+      tableContainer.className = 'pm-table-container';
+      const event = new MouseEvent('mousedown');
+      Object.defineProperty(event, 'target', { value: tableContainer });
+      const preventDefaultSpy = jest.spyOn(
+        MouseEvent.prototype,
+        'preventDefault',
+      );
+
+      expect(handleMouseDown(editorView, event)).toEqual(true);
+      expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return true & prevent default behaviour for table wrappers: pm-table-wrapper', () => {
+      const { editorView } = editor(
+        doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
+      );
+      const tableContainer = document.createElement('div');
+      tableContainer.className = 'pm-table-wrapper';
+      const event = new MouseEvent('mousedown');
+      Object.defineProperty(event, 'target', { value: tableContainer });
+      const preventDefaultSpy = jest.spyOn(
+        MouseEvent.prototype,
+        'preventDefault',
+      );
+
+      expect(handleMouseDown(editorView, event)).toEqual(true);
+      expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return false & not prevent default behaviour for editor content area: ak-editor-content-area', () => {
+      const { editorView } = editor(
+        doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
+      );
+      const editorContentArea = document.createElement('div');
+      editorContentArea.className = 'ak-editor-content-area';
+      const event = new MouseEvent('mousedown');
+      Object.defineProperty(event, 'target', { value: editorContentArea });
+      const preventDefaultSpy = jest.spyOn(
+        MouseEvent.prototype,
+        'preventDefault',
+      );
+
+      expect(handleMouseDown(editorView, event)).toEqual(false);
+      expect(preventDefaultSpy).toHaveBeenCalledTimes(0);
+    });
+  });
+  describe('#handleMouseOut', () => {
+    describe('when the target is a resize handle column', () => {
+      it('should return true', () => {
+        const { editorView } = editor(
+          doc(table()(tr(tdCursor, tdEmpty), tr(td()(p('{o}')), tdEmpty))),
+        );
+        const firstCell = document.createElement('div');
+        firstCell.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
+
+        // event.target = secondCell.node;
+        const spy = jest
+          .spyOn(MouseEvent.prototype, 'target', 'get')
+          .mockReturnValue(firstCell);
+
+        const event = new MouseEvent('opa');
+
+        expect(handleMouseOut(editorView, event)).toEqual(true);
+        spy.mockRestore();
+      });
+    });
+
+    describe('when the relatedTarget is a resize handle column too', () => {
+      it('should return false', () => {
+        const { editorView } = editor(
+          doc(table()(tr(tdCursor, tdEmpty), tr(td()(p('{o}')), tdEmpty))),
+        );
+        const firstCell = document.createElement('div');
+        firstCell.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
+        const secondCell = document.createElement('div');
+        secondCell.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
+
+        // event.target = secondCell.node;
+        const spy = jest
+          .spyOn(MouseEvent.prototype, 'target', 'get')
+          .mockReturnValue(secondCell);
+
+        const event = new MouseEvent('opa', {
+          relatedTarget: firstCell,
+        });
+
+        expect(handleMouseOut(editorView, event)).toEqual(false);
+        spy.mockRestore();
+      });
+    });
+  });
+});

package/src/plugins/table/__tests__/unit/get-toolbar-config.ts

@@ -0,0 +1,140 @@
+import { EditorView } from 'prosemirror-view';
+import {
+  doc,
+  p,
+  tr,
+  table,
+  tdCursor,
+  tdEmpty,
+  dataConsumer,
+  extension,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+
+import tablePlugin from '../../../table';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { getToolbarConfig } from '../../toolbar';
+import { setTableRef, setEditorFocus } from '../../commands';
+import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
+import dataConsumerPlugin from '@atlaskit/editor-core/src/plugins/data-consumer';
+import type {
+  FloatingToolbarItem,
+  FloatingToolbarButton,
+} from '@atlaskit/editor-common/types';
+
+const formatMessage: (t: { id: string }) => string = (message) =>
+  `${message.id}`;
+
+describe('getToolbarConfig', () => {
+  const getEditorContainerWidth = () => ({ width: 500 });
+  const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
+    attachAnalyticsEvent: jest.fn().mockReturnValue(() => jest.fn()),
+  };
+  const getButton = (editorView: EditorView) => {
+    const { state } = editorView;
+    const config = getToolbarConfig(
+      getEditorContainerWidth,
+      editorAnalyticsAPIFake,
+    )({})(state, { formatMessage } as any, {} as any)!;
+    //
+    expect(config).not.toBeUndefined();
+    expect(Array.isArray(config.items)).toBeTruthy();
+
+    const items =
+      typeof config.items === 'function'
+        ? config.items(state.doc.firstChild!)
+        : config.items;
+
+    const button = items.find(
+      (item: FloatingToolbarItem<any>) =>
+        item.type === 'button' && item.id === 'editor.table.delete',
+    )! as FloatingToolbarButton<any>;
+
+    expect(button).not.toBeUndefined();
+    return button;
+  };
+
+  /**
+   * Use `createEditorFactory` here to enable referentiality as
+   * `createProsemirrorEditorFactory` has some issues with correctly mimicking
+   * old state for the unique localId plugin
+   */
+  const createEditorFn = createProsemirrorEditorFactory();
+  const createEditor = (doc: DocBuilder) => {
+    const output = createEditorFn({
+      doc,
+
+      attachTo: document.body,
+      preset: new Preset<LightEditorPlugin>()
+        .add(dataConsumerPlugin)
+        .add(extensionPlugin)
+        .add(tablePlugin),
+    });
+
+    // Prep the table plugin state a little
+    const { editorView } = output;
+    const { dispatch } = editorView;
+    const tableRef = document.querySelector(
+      '.ProseMirror table',
+    ) as HTMLTableElement;
+    setEditorFocus(true)(output.editorView.state, dispatch);
+    setTableRef(tableRef)(output.editorView.state, dispatch);
+
+    return output;
+  };
+
+  describe('should not add confirmDialog to delete button', () => {
+    it('if no localId', () => {
+      const { editorView } = createEditor(
+        doc(p('text'), table()(tr(tdCursor, tdEmpty))),
+      );
+
+      const button = getButton(editorView);
+      expect(button.confirmDialog).toBeUndefined();
+    });
+
+    it('if localId defined but not referenced', () => {
+      const { editorView } = createEditor(
+        doc(
+          p('text'),
+          table({ localId: 'unreferenced' })(tr(tdCursor, tdEmpty)),
+        ),
+      );
+
+      const button = getButton(editorView);
+      expect(button.confirmDialog).toBeUndefined();
+    });
+  });
+
+  describe('should add confirmDialog to delete button', () => {
+    it('if localId defined and is referenced', () => {
+      const { editorView } = createEditor(
+        doc(
+          p('text'),
+          table({ localId: 'ILY300' })(tr(tdCursor, tdEmpty)),
+          dataConsumer({ sources: ['ILY300'] })(
+            extension({
+              extensionKey: 'test-key-123',
+              extensionType: 'com.atlassian.extensions.update',
+              parameters: { count: 0 },
+              layout: 'default',
+              localId: 'testId0',
+            })(),
+          ),
+        ),
+      );
+
+      const button = getButton(editorView);
+      expect(button.confirmDialog).toEqual({
+        message: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
+        okButtonLabel: 'fabric.editor.tables.confirmDeleteLinkedModalOKButton',
+      });
+    });
+  });
+});

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

@@ -0,0 +1,153 @@
+import { MockIntersectionObserver } from '@atlaskit/editor-test-helpers/mock-intersection-observer';
+
+import { OverflowShadowsObserver } from '../../../nodeviews/OverflowShadowsObserver';
+import { ShadowEvent } from '../../../types';
+
+describe('OverflowShadowsObserver', () => {
+  let table: HTMLTableElement;
+  let td1: HTMLTableDataCellElement;
+  let td2: HTMLTableDataCellElement;
+  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.observeCells();
+    expect(observeSpy).toHaveBeenCalledWith(td1);
+    expect(observeSpy).toHaveBeenCalledWith(td2);
+  });
+
+  it('does not re-observe if cells did not change', () => {
+    overflowShadowsObserver.observeCells();
+    observeSpy.mockClear();
+    overflowShadowsObserver.observeCells();
+    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.observeCells();
+    });
+
+    it.each([
+      [
+        'hides first shadow when first cell fully intersects',
+        {
+          getTarget: () => td1,
+          intersectionRatio: 1,
+          isIntersecting: true,
+          expectedShadow: ShadowEvent.SHOW_BEFORE_SHADOW,
+          expectedShow: false,
+        },
+      ],
+      [
+        'hides last shadow when last cell fully intersects',
+        {
+          getTarget: () => td2,
+          intersectionRatio: 1,
+          isIntersecting: true,
+          expectedShadow: ShadowEvent.SHOW_AFTER_SHADOW,
+          expectedShow: false,
+        },
+      ],
+      [
+        'shows first shadow when first cell partially intersects',
+        {
+          getTarget: () => td1,
+          intersectionRatio: 0,
+          isIntersecting: true,
+          expectedShadow: ShadowEvent.SHOW_BEFORE_SHADOW,
+          expectedShow: true,
+        },
+      ],
+      [
+        'shows last shadow when last cell partially intersects',
+        {
+          getTarget: () => td2,
+          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');
+    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);
+  }
+});