@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

package/src/__tests__/visual-regression/copy-button.ts

@@ -0,0 +1,181 @@
+export {};
+
+it.skip('TODO: restore vr `packages/editor/editor-plugin-table/src/plugins/table/__tests__/visual-regression/copy-button.ts`', () => {});
+
+// import { _getCopyButtonTestSuite } from '../../../copy-button/__tests__/visual-regression/_getCopyButtonTestSuite';
+
+// _getCopyButtonTestSuite({
+//   nodeName: 'Table',
+//   editorOptions: {
+//     allowTables: {
+//       advanced: true,
+//     },
+//     defaultValue: {
+//       version: 1,
+//       type: 'doc',
+//       content: [
+//         {
+//           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: 'text',
+//                           text: '1',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '2',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '3',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '4',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '5',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '6',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '7',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '8',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '9',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//           ],
+//         },
+//       ],
+//     },
+//   },
+//   nodeSelector: '.pm-table-cell-content-wrap',
+// });

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

@@ -1,8 +1,10 @@
+export {};
+
 // import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+// import { Device } from '@atlaskit/editor-test-helpers/vr-utils/device-viewport';
 // import {
 //   snapshot,
 //   initFullPageEditorWithAdf,
-//   Device,
 // } from '../../../../__tests__/visual-regression/_utils';
 // import tableWith100ListItemsADF from './__fixtures__/table-with-100-numbered-list-items.json';
 // import {

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

@@ -11,39 +11,40 @@ 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;
+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 (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);
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
     }
-    return true;
-  }
-  return false;
-};
+    return false;
+  };
 
 export const clearSelection: Command = (state, dispatch) => {
   if (dispatch) {

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

@@ -15,42 +15,45 @@ 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;
-  }
+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);
+    }
 
-  if (dispatch) {
-    return baseGotoNextCell(direction)(state, dispatch);
-  }
-
-  return true;
-};
+    return true;
+  };

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

@@ -59,13 +59,14 @@ export const hoverMergedCells = () =>
 export const hoverColumns = (hoveredColumns: number[], isInDanger?: boolean) =>
   createCommand(
     (state) => {
-      const cells = getCellsInColumn(hoveredColumns)(state.selection);
+      const cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
       if (!cells) {
         return false;
       }
       const decorations = createControlsHoverDecoration(
         cells,
         'column',
+        state.tr,
         isInDanger,
       );
 
@@ -95,6 +96,7 @@ export const hoverRows = (hoveredRows: number[], isInDanger?: boolean) =>
       const decorations = createControlsHoverDecoration(
         cells,
         'row',
+        state.tr,
         isInDanger,
       );
 
@@ -131,6 +133,7 @@ export const hoverTable = (isInDanger?: boolean, isSelected?: boolean) =>
       const decorations = createControlsHoverDecoration(
         cells,
         'table',
+        state.tr,
         isInDanger,
         isSelected,
       );

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

@@ -57,109 +57,109 @@ export function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth) {
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
-export const addColumnBefore = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-): Command => (state, dispatch, view) => {
-  const table = findTable(state.selection);
-  if (!table) {
-    return false;
-  }
-  if (dispatch) {
-    let rect = selectedRect(state);
-    dispatch(
-      addColumnAt(getEditorContainerWidth)(
-        rect.left,
-        getAllowAddColumnCustomStep(state),
-        view,
-      )(state.tr),
-    );
-  }
-  return true;
-};
+export const addColumnBefore =
+  (getEditorContainerWidth: GetEditorContainerWidth): Command =>
+  (state, dispatch, view) => {
+    const table = findTable(state.selection);
+    if (!table) {
+      return false;
+    }
+    if (dispatch) {
+      let rect = selectedRect(state);
+      dispatch(
+        addColumnAt(getEditorContainerWidth)(
+          rect.left,
+          getAllowAddColumnCustomStep(state),
+          view,
+        )(state.tr),
+      );
+    }
+    return true;
+  };
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
-export const addColumnAfter = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-): Command => (state, dispatch, view) => {
-  const table = findTable(state.selection);
-  if (!table) {
-    return false;
-  }
-  if (dispatch) {
-    let rect = selectedRect(state);
-    dispatch(
-      addColumnAt(getEditorContainerWidth)(
-        rect.right,
-        getAllowAddColumnCustomStep(state),
-        view,
-      )(state.tr),
-    );
-  }
-  return true;
-};
+export const addColumnAfter =
+  (getEditorContainerWidth: GetEditorContainerWidth): Command =>
+  (state, dispatch, view) => {
+    const table = findTable(state.selection);
+    if (!table) {
+      return false;
+    }
+    if (dispatch) {
+      let rect = selectedRect(state);
+      dispatch(
+        addColumnAt(getEditorContainerWidth)(
+          rect.right,
+          getAllowAddColumnCustomStep(state),
+          view,
+        )(state.tr),
+      );
+    }
+    return true;
+  };
 
 // #region Commands
-export const insertColumn = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-) => (column: number): Command => (state, dispatch, view) => {
-  let tr = addColumnAt(getEditorContainerWidth)(
-    column,
-    getAllowAddColumnCustomStep(state),
-    view,
-  )(state.tr);
-  const table = findTable(tr.selection);
-  if (!table) {
-    return false;
-  }
-  // move the cursor to the newly created column
-  const pos = TableMap.get(table.node).positionAt(0, column, table.node);
+export const insertColumn =
+  (getEditorContainerWidth: GetEditorContainerWidth) =>
+  (column: number): Command =>
+  (state, dispatch, view) => {
+    let tr = addColumnAt(getEditorContainerWidth)(
+      column,
+      getAllowAddColumnCustomStep(state),
+      view,
+    )(state.tr);
+    const table = findTable(tr.selection);
+    if (!table) {
+      return false;
+    }
+    // move the cursor to the newly created column
+    const pos = TableMap.get(table.node).positionAt(0, column, table.node);
 
-  if (dispatch) {
-    dispatch(
-      tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos))),
-    );
-  }
-  return true;
-};
+    if (dispatch) {
+      dispatch(
+        tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos))),
+      );
+    }
+    return true;
+  };
 
-export const insertRow = (
-  row: number,
-  moveCursorToTheNewRow: boolean,
-): Command => (state, dispatch) => {
-  // Don't clone the header row
-  const headerRowEnabled = checkIfHeaderRowEnabled(state.selection);
-  const clonePreviousRow =
-    (headerRowEnabled && row > 1) || (!headerRowEnabled && row > 0);
+export const insertRow =
+  (row: number, moveCursorToTheNewRow: boolean): Command =>
+  (state, dispatch) => {
+    // Don't clone the header row
+    const headerRowEnabled = checkIfHeaderRowEnabled(state.selection);
+    const clonePreviousRow =
+      (headerRowEnabled && row > 1) || (!headerRowEnabled && row > 0);
 
-  // When the table have header row
-  // we should not add row on the position zero
-  if (row === 0 && headerRowEnabled) {
-    return false;
-  }
+    // When the table have header row
+    // we should not add row on the position zero
+    if (row === 0 && headerRowEnabled) {
+      return false;
+    }
 
-  const tr = clonePreviousRow
-    ? copyPreviousRow(state.schema)(row)(state.tr)
-    : addRowAt(row)(state.tr);
+    const tr = clonePreviousRow
+      ? copyPreviousRow(state.schema)(row)(state.tr)
+      : addRowAt(row)(state.tr);
 
-  const table = findTable(tr.selection);
-  if (!table) {
-    return false;
-  }
-  if (dispatch) {
-    const { selection } = state;
-    if (moveCursorToTheNewRow) {
-      // move the cursor to the newly created row
-      const pos = TableMap.get(table.node).positionAt(row, 0, table.node);
-      tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos)));
-    } else {
-      tr.setSelection(selection.map(tr.doc, tr.mapping));
+    const table = findTable(tr.selection);
+    if (!table) {
+      return false;
     }
+    if (dispatch) {
+      const { selection } = state;
+      if (moveCursorToTheNewRow) {
+        // move the cursor to the newly created row
+        const pos = TableMap.get(table.node).positionAt(row, 0, table.node);
+        tr.setSelection(Selection.near(tr.doc.resolve(table.start + pos)));
+      } else {
+        tr.setSelection(selection.map(tr.doc, tr.mapping));
+      }
 
-    dispatch(tr);
-  }
-  return true;
-};
+      dispatch(tr);
+    }
+    return true;
+  };
 
 export const createTable = (): Command => (state, dispatch) => {
   const table = createTableNode({