@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/src/plugins/table/__tests__/unit/pm-plugins/decorations/plugin.ts

@@ -0,0 +1,140 @@
+import { Selection } from 'prosemirror-state';
+import { addColumnAt } from '@atlaskit/editor-tables/utils';
+import { DecorationSet } from 'prosemirror-view';
+
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  table,
+  tdCursor,
+  tdEmpty,
+  tr,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import { selectColumn } from '../../../../commands';
+import {
+  getDecorations,
+  handleDocOrSelectionChanged,
+} from '../../../../pm-plugins/decorations/plugin';
+import { pluginKey } from '../../../../pm-plugins/plugin-key';
+import { TableDecorations } from '../../../../types';
+import tablePlugin from '../../../../../table';
+
+describe('decorations plugin', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      attachTo: document.body,
+      preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+      pluginKey,
+    });
+
+  // ED-8457
+  describe('when there is a selection pointer set', () => {
+    it('should remove the column selected decorations', () => {
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      );
+
+      selectColumn(1)(editorView.state, editorView.dispatch);
+
+      const { tr: transaction } = editorView.state;
+
+      transaction.setMeta('pointer', true);
+      transaction.setSelection(Selection.atStart(transaction.doc));
+      editorView.dispatch(transaction);
+
+      const decorationSet = getDecorations(editorView.state);
+
+      const columnSelectedDecorations = decorationSet.find(
+        undefined,
+        undefined,
+        (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
+      );
+
+      expect(columnSelectedDecorations).toHaveLength(0);
+    });
+  });
+
+  describe('when the doc did not changed', () => {
+    it('should not re-create the decorations', () => {
+      const pluginState = DecorationSet.empty;
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      );
+
+      const oldState = handleDocOrSelectionChanged(
+        editorView.state.tr,
+        pluginState,
+        editorView.state,
+      );
+
+      const newState = handleDocOrSelectionChanged(
+        editorView.state.tr,
+        oldState,
+        editorView.state,
+      );
+
+      expect(newState).toEqual(oldState);
+    });
+  });
+
+  describe('when the table changed', () => {
+    it('should re-create the column controls decorations', () => {
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      );
+      const { state } = editorView;
+
+      const nextPluginState = handleDocOrSelectionChanged(
+        editorView.state.tr,
+        DecorationSet.empty,
+        editorView.state,
+      );
+
+      const { tr: transaction } = state;
+      editorView.dispatch(addColumnAt(2)(transaction));
+
+      const newState = handleDocOrSelectionChanged(
+        transaction,
+        nextPluginState,
+        editorView.state,
+      );
+      const expectedDecorationSet = newState;
+      const decorations = expectedDecorationSet.find(
+        undefined,
+        undefined,
+        (spec) =>
+          spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) > -1,
+      );
+
+      expect(decorations).toHaveLength(3);
+    });
+  });
+
+  describe('when nothing changed', () => {
+    it('should not re-create the column controls decorations', () => {
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      );
+      const oldPluginState = handleDocOrSelectionChanged(
+        editorView.state.tr,
+        DecorationSet.empty,
+        editorView.state,
+      );
+
+      const newPluginState = handleDocOrSelectionChanged(
+        editorView.state.tr,
+        oldPluginState,
+        editorView.state,
+      );
+      expect(oldPluginState).toEqual(newPluginState);
+    });
+  });
+});

package/src/plugins/table/__tests__/unit/pm-plugins/main-with-allow-collapse.ts

@@ -0,0 +1,100 @@
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  tdCursor,
+  tdEmpty,
+  tr,
+  expand,
+  bodiedExtension,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+
+import tablePlugin from '../../../../table';
+import { pluginKey } from '../../../pm-plugins/plugin-key';
+import { TablePluginState } from '../../../types';
+import { handleDocOrSelectionChanged } from '../../../handlers';
+import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
+import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
+
+describe('tables: main plugin with allowCollapse: true', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      preset: new Preset<LightEditorPlugin>()
+        .add(tablePlugin)
+        .add(expandPlugin)
+        .add(extensionPlugin),
+      pluginKey,
+    });
+  const baseTablePluginState: TablePluginState = {
+    editorHasFocus: true,
+    hoveredColumns: [],
+    hoveredRows: [],
+    pluginConfig: {
+      allowCollapse: true,
+    },
+    isHeaderColumnEnabled: false,
+    isHeaderRowEnabled: true,
+  };
+
+  it.each<[string, DocBuilder, object]>([
+    [
+      'should set canCollapseTable & !isTableCollapsed when table is on doc',
+      doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      {
+        canCollapseTable: true,
+        isTableCollapsed: false,
+      },
+    ],
+    [
+      'should set !canCollapseTable & isTableCollapsed when table is in expand',
+      doc(
+        expand({ title: '' })(
+          table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty)),
+        ),
+      ),
+      {
+        canCollapseTable: false,
+        isTableCollapsed: true,
+      },
+    ],
+    [
+      'should set !canCollapseTable & !isTableCollapsed when table is in bodiedExtension',
+      doc(
+        bodiedExtension({
+          extensionKey: 'bodied-eh',
+          extensionType: 'com.floofs',
+        })(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+        p(),
+      ),
+      {
+        canCollapseTable: false,
+        isTableCollapsed: false,
+      },
+    ],
+  ])('%s', (_, docBuilder, expected) => {
+    const { editorView } = editor(docBuilder);
+    const pluginState = {
+      ...baseTablePluginState,
+    };
+
+    const oldState = handleDocOrSelectionChanged(
+      editorView.state.tr,
+      pluginState,
+    );
+
+    const newState = handleDocOrSelectionChanged(editorView.state.tr, oldState);
+
+    expect(newState).toEqual({
+      ...oldState,
+      ...expected,
+    });
+  });
+});

package/src/plugins/table/__tests__/unit/pm-plugins/main.ts

@@ -0,0 +1,187 @@
+import {
+  createProsemirrorEditorFactory,
+  LightEditorPlugin,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  p,
+  table,
+  tdCursor,
+  tdEmpty,
+  tr,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { Selection } from 'prosemirror-state';
+import * as pmUtils from 'prosemirror-utils';
+
+import tablePlugin from '../../../../table';
+import textFormattingPlugin from '@atlaskit/editor-core/src/plugins/text-formatting';
+import { pluginKey } from '../../../pm-plugins/plugin-key';
+import { getPluginState } from '../../../pm-plugins/plugin-factory';
+import { setEditorFocus } from '../../../../table/commands/misc';
+import * as miscCommands from '../../../../table/commands/misc';
+import { NodeType } from 'prosemirror-model';
+import { undo } from 'prosemirror-history';
+import {
+  toggleHeaderColumn,
+  toggleHeaderRow,
+  toggleNumberColumn,
+} from '../../../../table/commands';
+
+describe('tables: main plugin', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      preset: new Preset<LightEditorPlugin>()
+        .add(tablePlugin)
+        .add(textFormattingPlugin),
+      pluginKey,
+    });
+  const tablePluginKey = (pluginKey as any).key;
+
+  it('should not call emit when typing inside a table cell', async () => {
+    const { editorView, eventDispatcher } = editor(
+      doc(table()(tr(tdCursor, tdEmpty))),
+    );
+    const emitMock = jest.spyOn(eventDispatcher, 'emit');
+    editorView.dispatch(editorView.state.tr.insertText('a'));
+    editorView.dispatch(editorView.state.tr.insertText('b'));
+    editorView.dispatch(editorView.state.tr.insertText('c'));
+
+    expect(
+      emitMock.mock.calls.filter(([e, _]) => e === tablePluginKey).length,
+    ).toEqual(0);
+
+    emitMock.mockClear();
+  });
+
+  it('should not call emit when typing anywhere in the document', async () => {
+    const { editorView, eventDispatcher } = editor(doc(p('{pos}')));
+
+    const emitMock = jest.spyOn(eventDispatcher, 'emit');
+    editorView.dispatch(editorView.state.tr.insertText('a'));
+    editorView.dispatch(editorView.state.tr.insertText('b'));
+    editorView.dispatch(editorView.state.tr.insertText('c'));
+
+    expect(
+      emitMock.mock.calls.filter(([e, _]) => e === tablePluginKey).length,
+    ).toEqual(0);
+
+    emitMock.mockClear();
+  });
+
+  it('should call setTableRef() if it can find a table at the current position', async () => {
+    const spied = jest.spyOn(miscCommands, 'setTableRef');
+
+    const { editorView } = editor(doc(table()(tr(tdCursor, tdEmpty))));
+    setEditorFocus(true)(editorView.state, editorView.dispatch);
+
+    expect(spied).toBeCalled();
+
+    spied.mockClear();
+  });
+
+  it('should not call setTableRef() if it cannot find a table at the current position', async () => {
+    const spied = jest.spyOn(miscCommands, 'setTableRef');
+
+    const findParentDomRefOfTypeMock = jest
+      .spyOn(pmUtils, 'findParentDomRefOfType')
+      // (nodeType: NodeType | NodeType[], domAtPos: DomAtPos):
+      //   (selection: Selection)
+      //     => Node | undefined
+      .mockImplementation(
+        (
+          nodeType: NodeType | NodeType[],
+          domAtPos: pmUtils.DomAtPos,
+        ): ((selection: Selection) => Node | undefined) => {
+          const parent = document.createElement('p');
+          parent.querySelector = () => null;
+          return () => parent;
+        },
+      );
+
+    const { editorView } = editor(doc(table()(tr(tdCursor, tdEmpty))));
+    setEditorFocus(true)(editorView.state, editorView.dispatch);
+
+    expect(spied).not.toBeCalled();
+
+    spied.mockClear();
+    findParentDomRefOfTypeMock.mockClear();
+  });
+
+  describe('Toggle table options', () => {
+    it('should update plugin state when we undo enabling of a header column option ', () => {
+      const { editorView } = editor(doc(table()(tr(tdCursor, tdEmpty))));
+      setEditorFocus(true)(editorView.state, editorView.dispatch);
+      expect(getPluginState(editorView.state).isHeaderRowEnabled).toBe(false);
+      expect(getPluginState(editorView.state).isHeaderColumnEnabled).toBe(
+        false,
+      );
+      expect(getPluginState(editorView.state).isNumberColumnEnabled).toBe(
+        false,
+      );
+
+      toggleHeaderColumn(editorView.state, editorView.dispatch);
+      expect(getPluginState(editorView.state).isHeaderColumnEnabled).toBe(true);
+
+      undo(editorView.state, editorView.dispatch);
+      expect(getPluginState(editorView.state).isHeaderRowEnabled).toBe(false);
+      expect(getPluginState(editorView.state).isHeaderColumnEnabled).toBe(
+        false,
+      );
+      expect(getPluginState(editorView.state).isNumberColumnEnabled).toBe(
+        false,
+      );
+    });
+
+    it('should update plugin state when we undo enabling of a header row option ', () => {
+      const { editorView } = editor(doc(table()(tr(tdCursor, tdEmpty))));
+      setEditorFocus(true)(editorView.state, editorView.dispatch);
+      expect(getPluginState(editorView.state).isHeaderRowEnabled).toBe(false);
+      expect(getPluginState(editorView.state).isHeaderColumnEnabled).toBe(
+        false,
+      );
+      expect(getPluginState(editorView.state).isNumberColumnEnabled).toBe(
+        false,
+      );
+
+      toggleHeaderRow(editorView.state, editorView.dispatch);
+      expect(getPluginState(editorView.state).isHeaderRowEnabled).toBe(true);
+
+      undo(editorView.state, editorView.dispatch);
+      expect(getPluginState(editorView.state).isHeaderRowEnabled).toBe(false);
+      expect(getPluginState(editorView.state).isHeaderColumnEnabled).toBe(
+        false,
+      );
+      expect(getPluginState(editorView.state).isNumberColumnEnabled).toBe(
+        false,
+      );
+    });
+
+    it('should update plugin state when we undo enabling of a numbered column option ', () => {
+      const { editorView } = editor(doc(table()(tr(tdCursor, tdEmpty))));
+      setEditorFocus(true)(editorView.state, editorView.dispatch);
+      expect(getPluginState(editorView.state).isHeaderRowEnabled).toBe(false);
+      expect(getPluginState(editorView.state).isHeaderColumnEnabled).toBe(
+        false,
+      );
+      expect(getPluginState(editorView.state).isNumberColumnEnabled).toBe(
+        false,
+      );
+
+      toggleNumberColumn(editorView.state, editorView.dispatch);
+      expect(getPluginState(editorView.state).isNumberColumnEnabled).toBe(true);
+
+      undo(editorView.state, editorView.dispatch);
+      expect(getPluginState(editorView.state).isHeaderRowEnabled).toBe(false);
+      expect(getPluginState(editorView.state).isHeaderColumnEnabled).toBe(
+        false,
+      );
+      expect(getPluginState(editorView.state).isNumberColumnEnabled).toBe(
+        false,
+      );
+    });
+  });
+});

package/src/plugins/table/__tests__/unit/pm-plugins/safari-delete-composition-text-issue-workaround.ts

@@ -0,0 +1,83 @@
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  DocBuilder,
+  p,
+  table,
+  td,
+  tr,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { pluginKey } from '../../../pm-plugins/plugin-key';
+import { TablePluginState } from '../../../types';
+
+describe('table/safari-delete-composition-text-issue-workaround', () => {
+  let editor: any;
+  beforeEach(() => {
+    const createEditor = createEditorFactory<TablePluginState>();
+    editor = (doc: DocBuilder) =>
+      createEditor({
+        doc,
+        editorProps: {
+          allowTables: {
+            allowColumnResizing: true,
+          },
+        },
+        pluginKey,
+      });
+  });
+
+  beforeAll(() => {
+    const container = document.createTextNode('');
+    //@ts-ignore
+    jest.spyOn(window, 'getSelection').mockImplementation(() => ({
+      type: 'Range',
+      rangeCount: 1,
+      getRangeAt: () => ({
+        startContainer: container,
+        endContainer: container,
+        endOffset: 0,
+        startOffset: 0,
+      }),
+    }));
+  });
+
+  afterAll(() => {
+    (window.getSelection as jest.Mock).mockRestore();
+  });
+
+  it('should render empty span on beforeinput then remove it on input on safari', async () => {
+    const { editorView: view } = editor(
+      doc(table()(tr(td()(p('{<>}')), td()(p()), td()(p())))),
+    );
+
+    const beforeinputEvent = new InputEvent('beforeinput', {
+      data: 'あああ',
+      isComposing: true,
+      inputType: 'deleteCompositionText',
+    });
+
+    view.dom.dispatchEvent(beforeinputEvent);
+
+    const spanElement = view.dom.querySelector(
+      'table tr td:nth-of-type(1) span',
+    );
+
+    expect(spanElement).toBeTruthy();
+    expect(spanElement.tagName).toBe('SPAN');
+    expect(spanElement.textContent).toBeFalsy();
+
+    const inputEvent = new InputEvent('input', {
+      data: 'あああ',
+      isComposing: true,
+      inputType: 'deleteCompositionText',
+    });
+
+    view.dom.dispatchEvent(inputEvent);
+
+    const emptyElement = view.dom.querySelector(
+      'table tr td:nth-of-type(1) span',
+    );
+
+    expect(emptyElement).toBeNull();
+  });
+});