@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/types/plugins/table/utils/selection.d.ts

@@ -0,0 +1,6 @@
+import { Selection, Transaction } from 'prosemirror-state';
+import { Rect } from '@atlaskit/editor-tables/table-map';
+export declare const isSelectionUpdated: (oldSelection: Selection, newSelection?: Selection<any> | undefined) => boolean;
+export declare const normalizeSelection: (tr: Transaction) => Transaction;
+export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];
+export declare const getSelectedRowIndexes: (selectionRect: Rect) => number[];

package/dist/types/plugins/table/utils/table.d.ts

@@ -0,0 +1,4 @@
+import { Transaction } from 'prosemirror-state';
+import { Rect } from '@atlaskit/editor-tables/table-map';
+export declare const getMergedCellsPositions: (tr: Transaction) => number[];
+export declare const colsToRect: (cols: Array<number>, noOfRows: number) => Rect;

package/dist/types/plugins/table/utils/update-plugin-state-decorations.d.ts

@@ -0,0 +1,4 @@
+import { EditorState } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { TableDecorations } from '../types';
+export declare const updatePluginStateDecorations: (state: EditorState<any>, decorations: Decoration[], key: TableDecorations) => DecorationSet;

package/dist/types/plugins/table-plugin.d.ts

@@ -1,2 +1,2 @@
-declare const tablesPlugin: () => any;
+import { default as tablesPlugin } from './table';
 export default tablesPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -17,24 +17,46 @@
     "releaseModel": "continuous"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^69.1.0",
+    "@atlaskit/adf-schema": "^24.0.0",
+    "@atlaskit/editor-common": "^69.3.0",
+    "@atlaskit/editor-shared-styles": "^2.2.0",
+    "@atlaskit/editor-tables": "^2.1.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1",
     "@types/prosemirror-state": "^1.2.0",
     "@types/prosemirror-view": "^1.9.0",
+    "classnames": "^2.2.5",
+    "lodash": "^4.17.21",
+    "memoize-one": "^6.0.0",
+    "prosemirror-commands": "1.1.11",
+    "prosemirror-keymap": "1.1.4",
     "prosemirror-model": "1.14.3",
     "prosemirror-state": "1.3.4",
-    "prosemirror-view": "1.23.2"
+    "prosemirror-transform": "1.3.2",
+    "prosemirror-utils": "^1.0.0-0",
+    "prosemirror-view": "1.23.2",
+    "raf-schd": "^4.0.3",
+    "uuid": "^3.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1"
+    "react-dom": "^16.8.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
+    "styled-components": "^3.2.6"
   },
   "devDependencies": {
+    "@atlaskit/editor-core": "^172.2.0",
     "@atlaskit/editor-test-helpers": "^17.1.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@types/prosemirror-history": "^1.0.1",
     "enzyme": "^3.10.0",
-    "react-dom": "^16.8.0",
+    "prosemirror-history": "^1.1.3",
+    "raf-stub": "^2.0.1",
     "typescript": "4.3.5"
   },
   "af:exports": {

package/report.api.md

@@ -5,7 +5,56 @@
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
-export declare const tablesPlugin: () => any;
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { EditorPlugin } from '@atlaskit/editor-common/types';
+import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import { TableLayout } from '@atlaskit/adf-schema';
+
+declare type PermittedLayoutsDescriptor = TableLayout[] | 'all';
+
+declare interface PluginConfig {
+  advanced?: boolean;
+  allowBackgroundColor?: boolean;
+  allowColumnResizing?: boolean;
+  allowHeaderColumn?: boolean;
+  allowHeaderRow?: boolean;
+  allowMergeCells?: boolean;
+  allowNumberColumn?: boolean;
+  allowColumnSorting?: boolean;
+  allowAddColumnWithCustomStep?: boolean;
+  allowCollapse?: boolean;
+  isHeaderRowRequired?: boolean;
+  stickToolbarToBottom?: boolean;
+  permittedLayouts?: PermittedLayoutsDescriptor;
+  allowControls?: boolean;
+  stickyHeaders?: boolean;
+  allowCellOptionsInFloatingToolbar?: boolean;
+  tableCellOptimization?: boolean;
+  tableRenderOptimization?: boolean;
+  stickyHeadersOptimization?: boolean;
+  initialRenderOptimization?: boolean;
+  mouseMoveOptimization?: boolean;
+  tableOverflowShadowsOptimization?: boolean;
+  allowDistributeColumns?: boolean;
+}
+
+declare interface TablePluginOptions {
+  tableOptions: PluginConfig;
+  breakoutEnabled?: boolean;
+  allowContextualMenu?: boolean;
+  fullWidthEnabled?: boolean;
+  wasFullWidthEnabled?: boolean;
+  editorAnalyticsAPI?: EditorAnalyticsAPI;
+  editorSelectionAPI?: EditorSelectionAPI;
+  getEditorContainerWidth?: GetEditorContainerWidth;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
+}
+
+export declare const tablesPlugin: (
+  options?: TablePluginOptions | undefined,
+) => EditorPlugin;
 
 export {};
 ```

package/src/plugins/table/__tests__/integration/block-node-selection.ts

@@ -0,0 +1,164 @@
+it.skip('TODO; restore unit', () => {});
+// import { runBlockNodeSelectionTestSuite } from '../../../../__tests__/integration/selection/_blockNodeSelectionTestSuite';
+
+// runBlockNodeSelectionTestSuite({
+//   nodeName: 'table',
+//   editorOptions: {
+//     allowTables: {
+//       advanced: true,
+//     },
+//   },
+//   selector: 'table',
+//   adfNode: {
+//     type: 'table',
+//     attrs: {
+//       isNumberColumnEnabled: false,
+//       layout: 'default',
+//       localId: '15804638-b946-4591-b64c-beffe5122733',
+//     },
+//     content: [
+//       {
+//         type: 'tableRow',
+//         content: [
+//           {
+//             type: 'tableHeader',
+//             attrs: {},
+//             content: [
+//               {
+//                 type: 'paragraph',
+//                 content: [],
+//               },
+//             ],
+//           },
+//           {
+//             type: 'tableHeader',
+//             attrs: {},
+//             content: [
+//               {
+//                 type: 'paragraph',
+//                 content: [],
+//               },
+//             ],
+//           },
+//           {
+//             type: 'tableHeader',
+//             attrs: {},
+//             content: [
+//               {
+//                 type: 'paragraph',
+//                 content: [],
+//               },
+//             ],
+//           },
+//         ],
+//       },
+//       {
+//         type: 'tableRow',
+//         content: [
+//           {
+//             type: 'tableCell',
+//             attrs: {},
+//             content: [
+//               {
+//                 type: 'paragraph',
+//                 content: [],
+//               },
+//             ],
+//           },
+//           {
+//             type: 'tableCell',
+//             attrs: {},
+//             content: [
+//               {
+//                 type: 'paragraph',
+//                 content: [],
+//               },
+//             ],
+//           },
+//           {
+//             type: 'tableCell',
+//             attrs: {},
+//             content: [
+//               {
+//                 type: 'paragraph',
+//                 content: [],
+//               },
+//             ],
+//           },
+//         ],
+//       },
+//       {
+//         type: 'tableRow',
+//         content: [
+//           {
+//             type: 'tableCell',
+//             attrs: {},
+//             content: [
+//               {
+//                 type: 'paragraph',
+//                 content: [],
+//               },
+//             ],
+//           },
+//           {
+//             type: 'tableCell',
+//             attrs: {},
+//             content: [
+//               {
+//                 type: 'paragraph',
+//                 content: [],
+//               },
+//             ],
+//           },
+//           {
+//             type: 'tableCell',
+//             attrs: {},
+//             content: [
+//               {
+//                 type: 'paragraph',
+//                 content: [],
+//               },
+//             ],
+//           },
+//         ],
+//       },
+//     ],
+//   },
+//   skipTests: {
+//     'Extend selection right two characters to select [block-node] from line above with shift + arrow right': [
+//       'chrome',
+//       'safari',
+//       'firefox',
+//     ],
+//     'Extend selection left two characters to select [block-node] from line below with shift + arrow left': [
+//       'chrome',
+//       'safari',
+//       'firefox',
+//     ],
+//     'Extend a selection from end of the document to the start when [block-node] is the first node': [
+//       'chrome',
+//       'safari',
+//       'firefox',
+//     ],
+//     'Click and drag from the end to start of the document to select [block-node] when [block-node] is the first node': [
+//       'chrome',
+//       'safari',
+//       'firefox',
+//     ],
+//     'Extend a selection to the end of the document from start when [block-node] is the last node': [
+//       'chrome',
+//       'safari',
+//       'firefox',
+//     ],
+//     'Click and drag from start of the document to select [block-node] when [block-node] is the last node': [
+//       'chrome',
+//       'safari',
+//       'firefox',
+//     ],
+//     "Extend selection down by one line multiple times to select [block-node]'s in sequence with shift + arrow down": [
+//       'chrome',
+//       'safari',
+//       'firefox',
+//     ],
+//   },
+// });

package/src/plugins/table/__tests__/unit/commands/go-to-next-cell.ts

@@ -0,0 +1,155 @@
+import { PluginKey } from 'prosemirror-state';
+
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+  LightEditorPlugin,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  table,
+  tr,
+  td,
+  tdEmpty,
+  tdCursor,
+  p,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import tablePlugin from '../../../index';
+import { pluginKey } from '../../../pm-plugins/plugin-key';
+import { TablePluginState } from '../../../types';
+import { goToNextCell } from '../../../commands/go-to-next-cell';
+
+const TABLE_LOCAL_ID = 'test-table-local-id';
+
+const tdNextFocus = td()(p('{nextFocus}'));
+
+describe('table plugin: goToNextCell', () => {
+  const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
+    attachAnalyticsEvent: jest.fn().mockReturnValue(() => jest.fn()),
+  };
+  const createEditor = createProsemirrorEditorFactory();
+  const preset = new Preset<LightEditorPlugin>().add(tablePlugin);
+  const editor = (doc: DocBuilder) =>
+    createEditor<TablePluginState, PluginKey>({
+      doc,
+      preset,
+      pluginKey,
+    });
+
+  it('should do nothing when focus is not on a table', () => {
+    const { editorView } = editor(doc(p()));
+    const {
+      state,
+      state: { doc: initialDoc },
+      dispatch,
+    } = editorView;
+
+    const returnValue = goToNextCell(editorAnalyticsAPIFake)(1)(
+      state,
+      dispatch,
+    );
+
+    expect(returnValue).toBeFalsy();
+    expect(editorView.state.doc).toEqual(initialDoc);
+  });
+
+  it('should tab to next cell if focus is in the middle', () => {
+    const { editorView, refs } = editor(
+      doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(tdEmpty, tdCursor, tdNextFocus),
+          tr(tdEmpty, tdEmpty, tdEmpty),
+        ),
+      ),
+    );
+    const { state, dispatch } = editorView;
+
+    const returnValue = goToNextCell(editorAnalyticsAPIFake)(1)(
+      state,
+      dispatch,
+    );
+
+    expect(returnValue).toBeTruthy();
+    expect(editorView.state.selection.$anchor.pos).toEqual(refs.nextFocus);
+  });
+
+  it('should reverse tab to previous cell if focus is in the middle', () => {
+    const { editorView, refs } = editor(
+      doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(tdNextFocus, tdCursor, tdEmpty),
+          tr(tdEmpty, tdEmpty, tdEmpty),
+        ),
+      ),
+    );
+    const { state, dispatch } = editorView;
+
+    const returnValue = goToNextCell(editorAnalyticsAPIFake)(-1)(
+      state,
+      dispatch,
+    );
+
+    expect(returnValue).toBeTruthy();
+    expect(editorView.state.selection.$anchor.pos).toEqual(refs.nextFocus);
+  });
+
+  it('should insert row at end of table when tabbed on last cell', () => {
+    const { editorView } = editor(
+      doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(tdEmpty, tdEmpty, tdEmpty),
+          tr(tdEmpty, tdEmpty, tdCursor),
+        ),
+      ),
+    );
+    const { state, dispatch } = editorView;
+
+    const expected = doc(
+      table({ localId: TABLE_LOCAL_ID })(
+        tr(tdEmpty, tdEmpty, tdEmpty),
+        tr(tdEmpty, tdEmpty, tdEmpty),
+        tr(tdNextFocus, tdEmpty, tdEmpty),
+      ),
+    )(state.schema);
+
+    const returnValue = goToNextCell(editorAnalyticsAPIFake)(1)(
+      state,
+      dispatch,
+    );
+
+    expect(returnValue).toBeTruthy();
+    expect(expected.eq(editorView.state.doc)).toBeTruthy();
+    expect(editorView.state.selection.$anchor.pos).toEqual(32);
+  });
+
+  it('should insert row at start of table when reverse tabbed on first cell', () => {
+    const { editorView } = editor(
+      doc(
+        table({ localId: TABLE_LOCAL_ID })(
+          tr(tdCursor, tdEmpty, tdEmpty),
+          tr(tdEmpty, tdEmpty, tdEmpty),
+        ),
+      ),
+    );
+    const { state, dispatch } = editorView;
+
+    const expected = doc(
+      table({ localId: TABLE_LOCAL_ID })(
+        tr(tdNextFocus, tdEmpty, tdEmpty),
+        tr(tdEmpty, tdEmpty, tdEmpty),
+        tr(tdEmpty, tdEmpty, tdEmpty),
+      ),
+    )(state.schema);
+
+    const returnValue = goToNextCell(editorAnalyticsAPIFake)(-1)(
+      state,
+      dispatch,
+    );
+
+    expect(returnValue).toBeTruthy();
+    expect(expected.eq(editorView.state.doc)).toBeTruthy();
+    expect(editorView.state.selection.$anchor.pos).toEqual(4);
+  });
+});

package/src/plugins/table/__tests__/unit/commands/insert.ts

@@ -0,0 +1,116 @@
+import { PluginKey } from 'prosemirror-state';
+
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+  LightEditorPlugin,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import {
+  doc,
+  table,
+  tr,
+  td,
+  tdEmpty,
+  p,
+  DocBuilder,
+} from '@atlaskit/editor-test-helpers/doc-builder';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+
+import tablePlugin from '../../../index';
+import { pluginKey } from '../../../pm-plugins/plugin-key';
+import { TablePluginState } from '../../../types';
+import { addColumnAt } from '../../../commands/insert';
+import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
+
+const TABLE_LOCAL_ID = 'test-table-local-id';
+
+describe('table plugin: insert', () => {
+  describe('addColumnAt', () => {
+    // We override the body as the table resizing logic uses it via the width plugin
+    // to calculate if a table should overflow
+    const mockBodyOffsetWidth = 1000;
+    const getEditorContainerWidth: GetEditorContainerWidth = () => {
+      return {
+        width: mockBodyOffsetWidth,
+      };
+    };
+
+    const createEditor = createProsemirrorEditorFactory();
+
+    const preset = new Preset<LightEditorPlugin>();
+    preset.add([
+      tablePlugin,
+      {
+        getEditorContainerWidth: () => ({ width: mockBodyOffsetWidth }),
+        tableOptions: {},
+      },
+    ]);
+    preset.add(widthPlugin);
+
+    const editor = (doc: DocBuilder) =>
+      createEditor<TablePluginState, PluginKey>({
+        doc,
+        preset,
+        pluginKey,
+      });
+
+    test('does scale cells in tables which are not overflowing', () => {
+      const { editorView } = editor(
+        doc(
+          table({ localId: TABLE_LOCAL_ID })(
+            tr(
+              td({ colwidth: [200] })(p('')),
+              td({ colwidth: [200] })(p('')),
+              td({ colwidth: [200] })(p('')),
+            ),
+          ),
+        ),
+      );
+      const { state } = editorView;
+      const transaction = state.tr;
+      const lastTableCellNode =
+        transaction.doc.content.firstChild?.firstChild?.lastChild;
+
+      const updatedTransaction = addColumnAt(getEditorContainerWidth)(
+        2,
+        true,
+        editorView,
+      )(transaction);
+
+      const updatedLastTableCellNode =
+        updatedTransaction.doc.content.firstChild?.firstChild?.lastChild;
+
+      expect(updatedLastTableCellNode?.attrs.colwidth[0]).not.toBe(
+        lastTableCellNode?.attrs.colwidth[0],
+      );
+    });
+
+    test('does not scale cells in tables which are overflowing', () => {
+      const { editorView } = editor(
+        doc(
+          table({ localId: TABLE_LOCAL_ID })(
+            tr(
+              td({ colwidth: [mockBodyOffsetWidth] })(p('')),
+              tdEmpty,
+              tdEmpty,
+            ),
+          ),
+        ),
+      );
+      const { state } = editorView;
+      const transaction = state.tr;
+
+      const updatedTransaction = addColumnAt(getEditorContainerWidth)(
+        2,
+        true,
+        editorView,
+      )(transaction);
+
+      const tablePMNode = updatedTransaction.doc.content.firstChild;
+      const tableRowNode = tablePMNode?.firstChild;
+      const firstTableCellNode = tableRowNode?.firstChild;
+
+      expect(firstTableCellNode?.attrs.colwidth[0]).toBe(mockBodyOffsetWidth);
+    });
+  });
+});