@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/src/plugins/table/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-should-remove-the-table-column-on-click-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9c8221121bc35d8d4d1dd7b3d30212732802458bbae60bbae450b9b88bdd3ed3
+size 14078

package/src/plugins/table/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-visual-hints-should-be-added-to-the-table-column-on-hover-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b2d4c34ad034fd6a8ffe63e9470ef849f5025413a0d1f9f97e5621ee7c689333
+size 29845

package/src/plugins/table/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-should-remove-the-table-row-on-click-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ae2a52bca4841381cd728c6e22d70aebd6a58177ce5123fedb725d5ac2aa80ac
+size 13915

package/src/plugins/table/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-visual-hints-should-be-added-to-the-table-row-on-hover-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:337ae7625db1ff78ea3fad3a65bda0821c41c0917ba728eaa6cc059dc5432a8a
+size 29876

package/src/plugins/table/__tests__/visual-regression/__image_snapshots__/copy-button-ts-floating-toolbar-copy-button-table-target-node-displays-blue-border-when-copy-button-is-hovered-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e7a36445c9b8e700ee0d8e54eac5975ad2a0cafebc8cdf1202e7d2048363c4d9
+size 16964

package/src/plugins/table/__tests__/visual-regression/__image_snapshots__/index-ts-snapshot-test-table-numbered-list-should-not-overflow-table-cell-when-there-are-more-than-100-ordered-list-items-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e1ead4b828d0e308aa3957be1ab8ef479be3beec76c6e859972af838101a2c2a
+size 43564

package/src/plugins/table/__tests__/visual-regression/__image_snapshots__/index-ts-snapshot-test-table-numbered-list-should-not-overflow-table-cell-when-there-are-more-than-100-ordered-list-items-2-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0b843f717d3993180fda76be9fad2c0647c34db85c3b1c735ef184eb62ad0ea4
+size 34895

package/src/plugins/table/__tests__/visual-regression/__image_snapshots__/index-ts-snapshot-test-table-numbered-list-should-not-overflow-table-cell-when-there-are-more-than-100-ordered-list-items-3-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:61cd30f491d1cf3499042fe4c002d5ec610520b57e395cc78c998b71dadc9cd3
+size 42193

package/src/plugins/table/__tests__/visual-regression/cell-options-menu.ts

@@ -0,0 +1,97 @@
+// import {
+//   PuppeteerPage,
+//   waitForNoTooltip,
+// } from '@atlaskit/visual-regression/helper';
+// import { insertTable } from '../../../../__tests__/__helpers/page-objects/_table';
+
+// import {
+//   snapshot,
+//   initFullPageEditorWithAdf,
+// } from '../../../../__tests__/visual-regression/_utils';
+
+it.skip('TODO: restore vr `packages/editor/editor-plugin-table/src/plugins/table/__tests__/visual-regression/cell-options-menu.ts`', () => {});
+
+// const firstCellSelector = 'table tbody th p';
+// const cellOptionsSelector = '[aria-label="Cell options"]';
+// const deleteColumnCellOptionSelector = '[aria-label="Delete column"]';
+// const deleteRowCellOptionSelector = '[aria-label="Delete row"]';
+
+// const emptyDocAdf = {
+//   version: 1,
+//   type: 'doc',
+//   content: [],
+// };
+
+// describe('Table cell options menu', () => {
+//   let page: PuppeteerPage;
+
+//   beforeEach(async () => {
+//     page = global.page;
+//     await initFullPageEditorWithAdf(page, emptyDocAdf);
+//     await insertTable(page);
+//     page.waitForSelector(firstCellSelector);
+
+//     // move the focus to the first table cell
+//     await page.type(firstCellSelector, 'focus table cell');
+//   });
+
+//   describe('delete column menu item', () => {
+//     it('visual hints should be added to the table column on hover', async () => {
+//       // open the table cell options menu
+//       await page.waitForSelector(cellOptionsSelector);
+//       await page.click(cellOptionsSelector);
+
+//       // hover over the table cell options Delete column entry
+//       await page.waitForSelector(deleteColumnCellOptionSelector);
+//       await page.hover(deleteColumnCellOptionSelector);
+
+//       await waitForNoTooltip(page);
+
+//       await snapshot(page);
+//     });
+
+//     it('should remove the table column on click', async () => {
+//       // open the table cell options menu
+//       await page.waitForSelector(cellOptionsSelector);
+//       await page.click(cellOptionsSelector);
+
+//       // click the table cell options Delete column entry
+//       await page.waitForSelector(deleteColumnCellOptionSelector);
+//       await page.click(deleteColumnCellOptionSelector);
+
+//       await waitForNoTooltip(page);
+
+//       await snapshot(page);
+//     });
+//   });
+
+//   describe('delete row menu item', () => {
+//     it('visual hints should be added to the table row on hover', async () => {
+//       // open the table cell options menu
+//       await page.waitForSelector(cellOptionsSelector);
+//       await page.click(cellOptionsSelector);
+
+//       // hover over the table cell options Delete row entry
+//       await page.waitForSelector(deleteRowCellOptionSelector);
+//       await page.hover(deleteRowCellOptionSelector);
+
+//       await waitForNoTooltip(page);
+
+//       await snapshot(page);
+//     });
+
+//     it('should remove the table row on click', async () => {
+//       // open the table cell options menu
+//       await page.waitForSelector(cellOptionsSelector);
+//       await page.click(cellOptionsSelector);
+
+//       // click the table cell options Delete row entry
+//       await page.waitForSelector(deleteColumnCellOptionSelector);
+//       await page.click(deleteRowCellOptionSelector);
+
+//       await waitForNoTooltip(page);
+
+//       await snapshot(page);
+//     });
+//   });
+// });

package/src/plugins/table/__tests__/visual-regression/index.ts

@@ -0,0 +1,42 @@
+// import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+// import {
+//   snapshot,
+//   initFullPageEditorWithAdf,
+//   Device,
+// } from '../../../../__tests__/visual-regression/_utils';
+// import tableWith100ListItemsADF from './__fixtures__/table-with-100-numbered-list-items.json';
+// import {
+//   scrollToBottom,
+//   scrollToElement,
+// } from '../../../../__tests__/__helpers/page-objects/_editor';
+
+// async function initEditor(page: PuppeteerPage, adf: Object) {
+//   await initFullPageEditorWithAdf(page, adf, Device.LaptopMDPI, undefined, {});
+// }
+
+it.skip('TODO: restore vr `packages/editor/editor-plugin-table/src/plugins/table/__tests__/visual-regression/index.ts`', () => {});
+
+// describe('Snapshot Test: Table', () => {
+//   let page: PuppeteerPage;
+
+//   beforeEach(() => {
+//     page = global.page;
+//   });
+
+//   describe('numbered list', () => {
+//     it('should not overflow table cell, when there are more than 100 ordered list items', async () => {
+//       await initEditor(page, tableWith100ListItemsADF);
+
+//       // initial elements
+//       await snapshot(page);
+
+//       // 100th elements
+//       await scrollToElement(page, 'ol > li:nth-of-type(120)');
+//       await snapshot(page);
+
+//       // 1000th elements
+//       await scrollToBottom(page);
+//       await snapshot(page);
+//     });
+//   });
+// });

package/src/plugins/table/commands/clear.ts

@@ -0,0 +1,58 @@
+// #region Imports
+import { Selection } from 'prosemirror-state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import {
+  findCellClosestToPos,
+  emptyCell,
+  isSelectionType,
+} from '@atlaskit/editor-tables/utils';
+
+import { Command } from '@atlaskit/editor-common/types';
+// #endregion
+
+// #region Commands
+export const clearMultipleCells = (targetCellPosition?: number): Command => (
+  state,
+  dispatch,
+) => {
+  let cursorPos: number | undefined;
+  let { tr } = state;
+
+  if (isSelectionType(tr.selection, 'cell')) {
+    const selection = (tr.selection as any) as CellSelection;
+    selection.forEachCell((_node, pos) => {
+      const $pos = tr.doc.resolve(tr.mapping.map(pos + 1));
+      tr = emptyCell(findCellClosestToPos($pos)!, state.schema)(tr);
+    });
+    cursorPos = selection.$headCell.pos;
+  } else if (targetCellPosition) {
+    const cell = findCellClosestToPos(tr.doc.resolve(targetCellPosition + 1))!;
+    tr = emptyCell(cell, state.schema)(tr);
+    cursorPos = cell.pos;
+  }
+  if (tr.docChanged && cursorPos) {
+    const $pos = tr.doc.resolve(tr.mapping.map(cursorPos));
+    const textSelection = Selection.findFrom($pos, 1, true);
+    if (textSelection) {
+      tr.setSelection(textSelection);
+    }
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+
+export const clearSelection: Command = (state, dispatch) => {
+  if (dispatch) {
+    dispatch(
+      state.tr
+        .setSelection(Selection.near(state.selection.$from))
+        .setMeta('addToHistory', false),
+    );
+  }
+  return true;
+};
+// #endregion

package/src/plugins/table/commands/collapse.ts

@@ -0,0 +1,16 @@
+import { Command } from '@atlaskit/editor-common/types';
+import { collapseSelectedTable } from '../utils/collapse';
+
+export const wrapTableInExpand: Command = (state, dispatch) => {
+  const collapseTr = collapseSelectedTable(state.tr);
+
+  if (!collapseTr) {
+    return false;
+  }
+
+  if (dispatch) {
+    dispatch(collapseTr);
+  }
+
+  return true;
+};

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

@@ -0,0 +1,56 @@
+// #region Constants
+import {
+  findTable,
+  goToNextCell as baseGotoNextCell,
+} from '@atlaskit/editor-tables/utils';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { Direction } from '@atlaskit/editor-tables/types';
+import { findParentNodeOfType } from 'prosemirror-utils';
+
+import { Command } from '@atlaskit/editor-common/types';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { insertRowWithAnalytics } from '../commands-with-analytics';
+
+const TAB_FORWARD_DIRECTION = 1;
+const TAB_BACKWARD_DIRECTION = -1;
+
+export const goToNextCell = (
+  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+) => (direction: Direction): Command => (state, dispatch) => {
+  const table = findTable(state.selection);
+  if (!table) {
+    return false;
+  }
+
+  const map = TableMap.get(table.node);
+  const { tableCell, tableHeader } = state.schema.nodes;
+  const cell = findParentNodeOfType([tableCell, tableHeader])(state.selection)!;
+  const firstCellPos = map.positionAt(0, 0, table.node) + table.start;
+  const lastCellPos =
+    map.positionAt(map.height - 1, map.width - 1, table.node) + table.start;
+
+  // when tabbing backwards at first cell (top left), insert row at the start of table
+  if (firstCellPos === cell.pos && direction === TAB_BACKWARD_DIRECTION) {
+    insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
+      index: 0,
+      moveCursorToInsertedRow: true,
+    })(state, dispatch);
+    return true;
+  }
+
+  // when tabbing forwards at last cell (bottom right), insert row at the end of table
+  if (lastCellPos === cell.pos && direction === TAB_FORWARD_DIRECTION) {
+    insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, {
+      index: map.height,
+      moveCursorToInsertedRow: true,
+    })(state, dispatch);
+    return true;
+  }
+
+  if (dispatch) {
+    return baseGotoNextCell(direction)(state, dispatch);
+  }
+
+  return true;
+};

package/src/plugins/table/commands/hover.ts

@@ -0,0 +1,192 @@
+// #region Imports
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import {
+  findTable,
+  getCellsInColumn,
+  getCellsInRow,
+} from '@atlaskit/editor-tables/utils';
+
+import { createCommand } from '../pm-plugins/plugin-factory';
+import { Cell, CellColumnPositioning, TableDecorations } from '../types';
+import {
+  createCellHoverDecoration,
+  createColumnLineResize,
+  createControlsHoverDecoration,
+  getMergedCellsPositions,
+  updatePluginStateDecorations,
+} from '../utils';
+// #endregion
+
+// #region Utils
+const makeArray = (n: number) => Array.from(Array(n).keys());
+// #endregion
+
+// #region Commands
+export const hoverMergedCells = () =>
+  createCommand(
+    (state) => {
+      const mergedCellsPositions = getMergedCellsPositions(state.tr);
+      if (!mergedCellsPositions.length) {
+        return false;
+      }
+      const table = findTable(state.tr.selection);
+      if (!table) {
+        return false;
+      }
+
+      const mergedCells: Cell[] = mergedCellsPositions.map((pos) => ({
+        pos: pos + table.start,
+        start: pos + table.start + 1,
+        node: table.node.nodeAt(pos)!,
+      }));
+
+      const decorations = createCellHoverDecoration(mergedCells, 'warning');
+
+      return {
+        type: 'HOVER_CELLS',
+        data: {
+          decorationSet: updatePluginStateDecorations(
+            state,
+            decorations,
+            TableDecorations.CELL_CONTROLS_HOVER,
+          ),
+        },
+      };
+    },
+    (tr) => tr.setMeta('addToHistory', false),
+  );
+
+export const hoverColumns = (hoveredColumns: number[], isInDanger?: boolean) =>
+  createCommand(
+    (state) => {
+      const cells = getCellsInColumn(hoveredColumns)(state.selection);
+      if (!cells) {
+        return false;
+      }
+      const decorations = createControlsHoverDecoration(
+        cells,
+        'column',
+        isInDanger,
+      );
+
+      return {
+        type: 'HOVER_COLUMNS',
+        data: {
+          decorationSet: updatePluginStateDecorations(
+            state,
+            decorations,
+            TableDecorations.COLUMN_CONTROLS_HOVER,
+          ),
+          hoveredColumns,
+          isInDanger,
+        },
+      };
+    },
+    (tr) => tr.setMeta('addToHistory', false),
+  );
+
+export const hoverRows = (hoveredRows: number[], isInDanger?: boolean) =>
+  createCommand(
+    (state) => {
+      const cells = getCellsInRow(hoveredRows)(state.selection);
+      if (!cells) {
+        return false;
+      }
+      const decorations = createControlsHoverDecoration(
+        cells,
+        'row',
+        isInDanger,
+      );
+
+      return {
+        type: 'HOVER_ROWS',
+        data: {
+          decorationSet: updatePluginStateDecorations(
+            state,
+            decorations,
+            TableDecorations.ROW_CONTROLS_HOVER,
+          ),
+          hoveredRows,
+          isInDanger,
+        },
+      };
+    },
+    (tr) => tr.setMeta('addToHistory', false),
+  );
+
+export const hoverTable = (isInDanger?: boolean, isSelected?: boolean) =>
+  createCommand(
+    (state) => {
+      const table = findTable(state.selection);
+      if (!table) {
+        return false;
+      }
+      const map = TableMap.get(table.node);
+      const hoveredColumns = makeArray(map.width);
+      const hoveredRows = makeArray(map.height);
+      const cells = getCellsInRow(hoveredRows)(state.selection);
+      if (!cells) {
+        return false;
+      }
+      const decorations = createControlsHoverDecoration(
+        cells,
+        'table',
+        isInDanger,
+        isSelected,
+      );
+
+      return {
+        type: 'HOVER_TABLE',
+        data: {
+          decorationSet: updatePluginStateDecorations(
+            state,
+            decorations,
+            TableDecorations.TABLE_CONTROLS_HOVER,
+          ),
+          hoveredColumns,
+          hoveredRows,
+          isInDanger,
+        },
+      };
+    },
+    (tr) => tr.setMeta('addToHistory', false),
+  );
+
+export const clearHoverSelection = () =>
+  createCommand((state) => ({
+    type: 'CLEAR_HOVER_SELECTION',
+    data: {
+      decorationSet: updatePluginStateDecorations(
+        state,
+        [],
+        TableDecorations.ALL_CONTROLS_HOVER,
+      ),
+    },
+  }));
+
+export const showResizeHandleLine = (
+  cellColumnPositioning: CellColumnPositioning,
+) =>
+  createCommand((state) => ({
+    type: 'SHOW_RESIZE_HANDLE_LINE',
+    data: {
+      decorationSet: updatePluginStateDecorations(
+        state,
+        createColumnLineResize(state.selection, cellColumnPositioning),
+        TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
+      ),
+    },
+  }));
+
+export const hideResizeHandleLine = () =>
+  createCommand((state) => ({
+    type: 'HIDE_RESIZE_HANDLE_LINE',
+    data: {
+      decorationSet: updatePluginStateDecorations(
+        state,
+        [],
+        TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
+      ),
+    },
+  }));
+// #endregion

package/src/plugins/table/commands/index.ts

@@ -0,0 +1,40 @@
+export {
+  hoverColumns,
+  hoverRows,
+  hoverTable,
+  hoverMergedCells,
+  clearHoverSelection,
+  showResizeHandleLine,
+  hideResizeHandleLine,
+} from './hover';
+export { insertColumn, insertRow, createTable } from './insert';
+export {
+  getNextLayout,
+  toggleContextualMenu,
+  toggleHeaderColumn,
+  toggleHeaderRow,
+  toggleNumberColumn,
+  toggleTableLayout,
+} from './toggle';
+export { clearMultipleCells } from './clear';
+export {
+  autoSizeTable,
+  convertFirstRowToHeader,
+  deleteTable,
+  hideInsertColumnOrRowButton,
+  moveCursorBackward,
+  selectColumn,
+  selectRow,
+  setCellAttr,
+  setEditorFocus,
+  setMultipleCellAttrs,
+  setTableRef,
+  showInsertColumnButton,
+  showInsertRowButton,
+  transformSliceToAddTableHeaders,
+  triggerUnlessTableHeader,
+  addBoldInEmptyHeaderCells,
+  addResizeHandleDecorations,
+} from './misc';
+export { sortByColumn } from './sort';
+export { goToNextCell } from './go-to-next-cell';