@atlaskit/editor-plugin-table 0.0.6 → 0.0.7

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

@@ -0,0 +1,286 @@
+import {
+  getMousePositionHorizontalRelativeByElement,
+  getMousePositionVerticalRelativeByElement,
+} from '../../../plugins/table/utils/dom';
+
+describe('table plugin: utils/dom.js', () => {
+  let element: HTMLElement;
+  let mouseMoveOptimization = false;
+  let elementContentRects: any;
+  const elementRect: DOMRect = {
+    width: 100,
+    left: 50,
+    height: 100,
+    top: 50,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0,
+    toJSON() {
+      return JSON.stringify(this);
+    },
+  };
+  beforeAll(() => {
+    jest.spyOn(HTMLElement.prototype, 'closest').mockImplementation(() => {
+      return {
+        id: 'table-cell-id',
+      } as Element;
+    });
+  });
+
+  beforeEach(() => {
+    element = document.createElement('div');
+    mouseMoveOptimization = false;
+    element.getBoundingClientRect = () => elementRect;
+  });
+
+  describe('#getMousePositionHorizontalRelativeByElement', () => {
+    describe('when there is a gap of 30px', () => {
+      const GAP = 30;
+
+      describe('and when the mouse is outside of the gap', () => {
+        describe('for 1px on the left', () => {
+          it('should return null when mouseMoveOptimization is disabled', () => {
+            const event = {
+              target: element,
+              clientX: GAP + elementRect.left + 1,
+            };
+
+            expect(
+              getMousePositionHorizontalRelativeByElement(
+                // @ts-ignore
+                event,
+                mouseMoveOptimization,
+                elementContentRects,
+                GAP,
+              ),
+            ).toBeNull();
+          });
+
+          it('should return null when mouseMoveOptimization is enabled', () => {
+            const event = {
+              target: element,
+              offsetX: GAP + 1,
+            };
+
+            mouseMoveOptimization = true;
+            elementContentRects = { 'table-cell-id': { width: 100 } };
+
+            expect(
+              getMousePositionHorizontalRelativeByElement(
+                // @ts-ignore
+                event,
+                mouseMoveOptimization,
+                elementContentRects,
+                GAP,
+              ),
+            ).toBeNull();
+          });
+        });
+
+        describe('for 1px on the right', () => {
+          it('should return null when mouseMoveOptimization is disabled', () => {
+            const event = {
+              target: element,
+              clientX: elementRect.width + elementRect.left - GAP - 1,
+            };
+
+            expect(
+              getMousePositionHorizontalRelativeByElement(
+                // @ts-ignore
+                event,
+                mouseMoveOptimization,
+                elementContentRects,
+                GAP,
+              ),
+            ).toBeNull();
+          });
+
+          it('should return null when mouseMoveOptimization is enabled', () => {
+            const event = {
+              target: element,
+              offsetX: elementRect.width - GAP - 1,
+            };
+
+            mouseMoveOptimization = true;
+            elementContentRects = { 'table-cell-id': { width: 100 } };
+
+            expect(
+              getMousePositionHorizontalRelativeByElement(
+                // @ts-ignore
+                event,
+                mouseMoveOptimization,
+                elementContentRects,
+                GAP,
+              ),
+            ).toBeNull();
+          });
+        });
+      });
+
+      describe('and when the mouse is inside of the gap', () => {
+        it('should return left when mouseMoveOptimization is disabled', () => {
+          const event = {
+            target: element,
+            clientX: GAP + elementRect.left,
+          };
+
+          expect(
+            getMousePositionHorizontalRelativeByElement(
+              // @ts-ignore
+              event,
+              mouseMoveOptimization,
+              elementContentRects,
+              GAP,
+            ),
+          ).toBe('left');
+        });
+
+        it('should return left when mouseMoveOptimization is enabled', () => {
+          const event = {
+            target: element,
+            offsetX: GAP,
+          };
+
+          mouseMoveOptimization = true;
+          elementContentRects = { 'table-cell-id': { width: 100 } };
+
+          expect(
+            getMousePositionHorizontalRelativeByElement(
+              // @ts-ignore
+              event,
+              mouseMoveOptimization,
+              elementContentRects,
+              GAP,
+            ),
+          ).toBe('left');
+        });
+
+        it('should return right when mouseMoveOptimization is disabled', () => {
+          const event = {
+            target: element,
+            clientX: elementRect.width + elementRect.left - GAP,
+          };
+
+          expect(
+            getMousePositionHorizontalRelativeByElement(
+              // @ts-ignore
+              event,
+              mouseMoveOptimization,
+              elementContentRects,
+              GAP,
+            ),
+          ).toBe('right');
+        });
+
+        it('should return right when mouseMoveOptimization is enabled', () => {
+          const event = {
+            target: element,
+            offsetX: elementRect.width - GAP,
+          };
+
+          mouseMoveOptimization = true;
+          elementContentRects = { 'table-cell-id': { width: 100 } };
+
+          expect(
+            getMousePositionHorizontalRelativeByElement(
+              // @ts-ignore
+              event,
+              mouseMoveOptimization,
+              elementContentRects,
+              GAP,
+            ),
+          ).toBe('right');
+        });
+      });
+    });
+
+    it('should return left when the mouse is positioned before half of the element and mouseMoveOptimization is disabled', () => {
+      const event = {
+        target: element,
+        clientX: 50,
+      };
+
+      expect(
+        // @ts-ignore
+        getMousePositionHorizontalRelativeByElement(event),
+      ).toBe('left');
+    });
+
+    it('should return left when the mouse is positioned before half of the element and mouseMoveOptimization is enabled', () => {
+      const event = {
+        target: element,
+        offsetX: 50,
+      };
+
+      mouseMoveOptimization = true;
+      elementContentRects = { 'table-cell-id': { width: 100 } };
+
+      expect(
+        getMousePositionHorizontalRelativeByElement(
+          // @ts-ignore
+          event,
+          mouseMoveOptimization,
+          elementContentRects,
+        ),
+      ).toBe('left');
+    });
+
+    it('should return right when the mouse is positioned after half of the element and mouseMoveOptimization is disabled', () => {
+      const event = {
+        target: element,
+        clientX: 101,
+      };
+
+      expect(
+        // @ts-ignore
+        getMousePositionHorizontalRelativeByElement(event),
+      ).toBe('right');
+    });
+
+    it('should return right when the mouse is positioned after half of the element and mouseMoveOptimization is enabled', () => {
+      const event = {
+        target: element,
+        offsetX: 101,
+      };
+
+      mouseMoveOptimization = true;
+      elementContentRects = { 'table-cell-id': { width: 100 } };
+
+      expect(
+        getMousePositionHorizontalRelativeByElement(
+          // @ts-ignore
+          event,
+          mouseMoveOptimization,
+          elementContentRects,
+        ),
+      ).toBe('right');
+    });
+  });
+
+  describe('#getMousePositionVerticalRelativeByElement', () => {
+    it('should return top when the mouse is positioned before half of the element', () => {
+      const event = {
+        target: element,
+        clientY: 50,
+      };
+
+      expect(
+        // @ts-ignore
+        getMousePositionVerticalRelativeByElement(event),
+      ).toBe('top');
+    });
+
+    it('should return bottom when the mouse is positioned before half of the element', () => {
+      const event = {
+        target: element,
+        clientY: 101,
+      };
+
+      expect(
+        // @ts-ignore
+        getMousePositionVerticalRelativeByElement(event),
+      ).toBe('bottom');
+    });
+  });
+});

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

@@ -0,0 +1,59 @@
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  p,
+  table,
+  tr,
+  th,
+  tdEmpty,
+  tdCursor,
+  thEmpty,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { TablePluginState } from '../../../plugins/table/types';
+import { containsHeaderColumn } from '../../../plugins/table/utils/nodes';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+
+describe('table merging logic', () => {
+  const createEditor = createEditorFactory<TablePluginState>();
+
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      editorProps: { allowTables: true },
+      pluginKey,
+    });
+
+  describe('#containsHeaderColumn', () => {
+    it('should return true when first col is all tableHeaders', () => {
+      const { editorView } = editor(
+        doc(
+          table()(
+            tr(thEmpty, tdCursor, tdEmpty),
+            tr(thEmpty, tdEmpty, tdEmpty),
+            tr(thEmpty, tdEmpty, tdEmpty),
+          ),
+        ),
+      );
+
+      const TableWithPos = findTable(editorView.state.selection)!;
+      expect(containsHeaderColumn(TableWithPos.node)).toEqual(true);
+    });
+
+    it('should return true when first col has a rowspan', () => {
+      const { editorView } = editor(
+        doc(
+          table()(
+            tr(thEmpty, tdCursor, tdEmpty),
+            tr(th({ rowspan: 2 })(p()), tdEmpty, tdEmpty),
+            tr(tdEmpty, tdEmpty),
+          ),
+        ),
+      );
+
+      const TableWithPos = findTable(editorView.state.selection)!;
+      expect(containsHeaderColumn(TableWithPos.node)).toEqual(true);
+    });
+  });
+});

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

@@ -0,0 +1,176 @@
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { uuid } from '@atlaskit/adf-schema';
+
+import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import {
+  doc,
+  p,
+  table,
+  tr as row,
+  th,
+  td,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { TablePluginState } from '../../../plugins/table/types';
+import { copyPreviousRow } from '../../../plugins/table/utils/row-controls';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+
+const TABLE_LOCAL_ID = 'test-table-local-id';
+
+describe('table plugin: utils/row-controls.js', () => {
+  beforeAll(() => {
+    uuid.setStatic(TABLE_LOCAL_ID);
+  });
+
+  afterAll(() => {
+    uuid.setStatic(false);
+  });
+
+  const createEditor = createEditorFactory<TablePluginState>();
+  const editor = (doc: DocBuilder) =>
+    createEditor({
+      doc,
+      editorProps: { allowTables: true },
+      pluginKey,
+    });
+
+  describe('#copyPreviousRow', () => {
+    describe('complex table', () => {
+      it('should accept rowIndex zero', () => {
+        const { editorView } = editor(
+          doc(
+            table()(
+              row(th()(p('{<>}a1')), th()(p('a2')), th()(p('a3'))),
+              row(th()(p('b1')), td()(p('b3')), td()(p('b3'))),
+            ),
+          ),
+        );
+        const { state } = editorView;
+        expect(() => {
+          copyPreviousRow(state.schema)(0)(state.tr);
+        }).toThrow(
+          /Row Index less or equal 0 isn't not allowed since there is not a previous to copy/,
+        );
+      });
+
+      it('should copy column header', () => {
+        const { editorView } = editor(
+          doc(
+            table()(
+              row(th()(p('{<>}a1')), th()(p('a2')), th()(p('a3'))),
+              row(th()(p('b1')), td()(p('b3')), td()(p('b3'))),
+            ),
+          ),
+        );
+        const { state } = editorView;
+        const newTr = copyPreviousRow(state.schema)(2)(state.tr);
+        expect(newTr.doc).toEqualDocument(
+          doc(
+            table({ localId: TABLE_LOCAL_ID })(
+              row(th()(p('{<>}a1')), th()(p('a2')), th()(p('a3'))),
+              row(th()(p('b1')), td()(p('b3')), td()(p('b3'))),
+              row(th()(p('')), td()(p('')), td()(p(''))),
+            ),
+          ),
+        );
+      });
+
+      it('should copy column header with colspan', () => {
+        const { editorView } = editor(
+          doc(
+            table()(
+              row(th()(p('{<>}a1')), th()(p('a2')), th()(p('a3'))),
+              row(th({ colspan: 2 })(p('b1')), td()(p('b3'))),
+            ),
+          ),
+        );
+        const { state } = editorView;
+        const newTr = copyPreviousRow(state.schema)(2)(state.tr);
+        expect(newTr.doc).toEqualDocument(
+          doc(
+            table({ localId: TABLE_LOCAL_ID })(
+              row(th()(p('{<>}a1')), th()(p('a2')), th()(p('a3'))),
+              row(th({ colspan: 2 })(p('b1')), td()(p('b3'))),
+              row(th({ colspan: 2 })(p('')), td()(p(''))),
+            ),
+          ),
+        );
+      });
+
+      it('should keep colspan', () => {
+        const { editorView } = editor(
+          doc(
+            table()(
+              row(th()(p('{<>}a1')), th()(p('a2')), th()(p('a3'))),
+              row(td({ colspan: 2 })(p('b1')), td()(p('b3'))),
+            ),
+          ),
+        );
+
+        const { state } = editorView;
+        const newTr = copyPreviousRow(state.schema)(2)(state.tr);
+        expect(newTr.doc).toEqualDocument(
+          doc(
+            table({ localId: TABLE_LOCAL_ID })(
+              row(th()(p('{<>}a1')), th()(p('a2')), th()(p('a3'))),
+              row(td({ colspan: 2 })(p('b1')), td()(p('b3'))),
+              row(td({ colspan: 2 })(p('')), td()(p(''))),
+            ),
+          ),
+        );
+      });
+
+      it('should copy background colors and does not expand previous rowspan', () => {
+        const { editorView } = editor(
+          doc(
+            table()(
+              row(th()(p('{<>}a1')), th()(p('a2')), th()(p('a3'))),
+              row(
+                td()(p('b1')),
+                td()(p('b2')),
+                td({ background: '#eeeaaa', rowspan: 4 })(p('b3')),
+              ),
+              row(td()(p('c1')), td()(p('c2'))),
+              row(
+                td()(p('d1')),
+                td({ background: '#fffaaa', rowspan: 3 })(p('d2')),
+              ),
+              row(td()(p('XXXX'))),
+              row(td()(p('e1')), td()(p('e2'))),
+              row(td()(p('f1')), td()(p('f2')), td()(p('f3'))),
+            ),
+          ),
+        );
+        const { state } = editorView;
+
+        const newTr = copyPreviousRow(state.schema)(5)(state.tr);
+
+        const newTable = findTable(newTr.selection);
+        const map = TableMap.get(newTable!.node);
+        expect(map.problems).toBeNull();
+        expect(newTr.doc).toEqualDocument(
+          doc(
+            table({ localId: TABLE_LOCAL_ID })(
+              row(th()(p('a1')), th()(p('a2')), th()(p('a3'))),
+              row(
+                td()(p('b1')),
+                td()(p('b2')),
+                td({ background: '#eeeaaa', rowspan: 4 })(p('b3')),
+              ),
+              row(td()(p('c1')), td()(p('c2'))),
+              row(
+                td()(p('d1')),
+                td({ background: '#fffaaa', rowspan: 4 })(p('d2')),
+              ),
+              row(td()(p('XXXX'))),
+              row(td()(p('')), td({ background: '#eeeaaa' })(p(''))),
+              row(td()(p('e1')), td()(p('e2'))),
+              row(td()(p('f1')), td()(p('f2')), td()(p('f3'))),
+            ),
+          ),
+        );
+      });
+    });
+  });
+});

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

@@ -0,0 +1,93 @@
+import {
+  doc,
+  p,
+  table,
+  td,
+  th,
+  tr as row,
+  tdEmpty,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import { getCellsInRow } from '@atlaskit/editor-tables/utils';
+import { getMergedCellsPositions } from '../../../plugins/table/utils';
+import { createEditorState } from '@atlaskit/editor-test-helpers/create-editor-state';
+
+describe('table utils', () => {
+  describe('#getMergedCellsPositions', () => {
+    describe('when the table has not merged cells', () => {
+      it('should returns an emppty array', () => {
+        const { tr } = createEditorState(
+          doc(
+            table()(
+              row(th({})(p('Number{<>}'))),
+              row(td({})(p('10{<>}'))),
+              row(td({})(p('0'))),
+              row(td({})(p('5'))),
+            ),
+          ),
+        );
+
+        expect(getMergedCellsPositions(tr)).toHaveLength(0);
+      });
+    });
+
+    describe('when the table has merged cells in columns', () => {
+      it('should returns the positions', () => {
+        const { tr } = createEditorState(
+          doc(
+            table()(
+              row(
+                th({})(p('Number{<>}')),
+                td({})(p('10{<>}')),
+                tdEmpty,
+                tdEmpty,
+              ),
+              row(td({})(p('10{<>}')), td({})(p('10{<>}')), tdEmpty, tdEmpty),
+              row(td({ colspan: 2 })(p('0')), td({ colspan: 2 })(p('1'))),
+              row(td({})(p('5')), td({})(p('10{<>}')), tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+        const cells = getCellsInRow(2)(tr.selection)!;
+        const tableStart = 1;
+
+        expect(getMergedCellsPositions(tr)).toEqual([
+          cells[0].pos - tableStart,
+          cells[1].pos - tableStart,
+        ]);
+      });
+    });
+
+    describe('when the table has merged cells in rows', () => {
+      it('should returns the positions', () => {
+        const { tr } = createEditorState(
+          doc(
+            table()(
+              row(
+                th({})(p('Number{<>}')),
+                td({})(p('10{<>}')),
+                tdEmpty,
+                tdEmpty,
+              ),
+              row(td({})(p('10{<>}')), td({})(p('10{<>}')), tdEmpty, tdEmpty),
+              row(
+                td({ rowspan: 2 })(p('0')),
+                tdEmpty,
+                tdEmpty,
+                td({ rowspan: 2 })(p('1')),
+              ),
+              row(tdEmpty, tdEmpty),
+            ),
+          ),
+        );
+
+        const cells = getCellsInRow(2)(tr.selection)!;
+        const tableStart = 1;
+
+        expect(getMergedCellsPositions(tr)).toEqual([
+          cells[0].pos - tableStart,
+          cells[3].pos - tableStart,
+        ]);
+      });
+    });
+  });
+});