@atlaskit/editor-plugin-table 5.6.3 → 5.6.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 5.6.5
+
+### Patch Changes
+
+- [#58893](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58893) [`ed82b25d516b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ed82b25d516b) - [ux] [ECA11Y-110] Selecting table columns and rows via shortcuts
+
+## 5.6.4
+
+### Patch Changes
+
+- [#61812](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61812) [`1d1776f9f6bf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1d1776f9f6bf) - Fix issue where inserting column via drag menu introduces a scroll
+
 ## 5.6.3
 
 ### Patch Changes

package/dist/cjs/plugins/table/commands/selection.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shiftArrowUpFromTable = exports.arrowRightFromTable = exports.arrowLeftFromTable = exports.TableSelectionDirection = void 0;
+exports.shiftArrowUpFromTable = exports.selectRows = exports.selectColumns = exports.arrowRightFromTable = exports.arrowLeftFromTable = exports.TableSelectionDirection = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _misc = require("../commands/misc");
 var _toolbar = require("../toolbar");
 var TableSelectionDirection = exports.TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -83,6 +84,46 @@ var arrowRightFromCellSelection = function arrowRightFromCellSelection(editorSel
     };
   };
 };
+var selectColumns = exports.selectColumns = function selectColumns(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = (0, _utils.findTable)(selection);
+      var rect = (0, _utils.selectedRect)(state);
+      if (table && (0, _utils.isRowSelected)(rect.top)(selection)) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      if (table && rect) {
+        return (0, _misc.selectColumn)(rect.left)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
+var selectRows = exports.selectRows = function selectRows(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = (0, _utils.findTable)(selection);
+      var rect = (0, _utils.selectedRect)(state);
+      if (table && (0, _utils.isColumnSelected)(rect.left)(selection)) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      if (table && rect) {
+        return (0, _misc.selectRow)(rect.top)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
 var arrowLeftFromGapCursor = function arrowLeftFromGapCursor(editorSelectionAPI) {
   return function (selection) {
     return function (state, dispatch) {

package/dist/cjs/plugins/table/pm-plugins/table-selection-keymap.js

@@ -13,6 +13,10 @@ function tableSelectionKeymapPlugin(editorSelectionAPI) {
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, (0, _selection.arrowRightFromTable)(editorSelectionAPI)(), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _selection.arrowLeftFromTable)(editorSelectionAPI)(), list);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y.table-selection_9uv33')) {
+    (0, _keymaps.bindKeymapArrayWithCommand)(_keymaps.selectColumn, (0, _selection.selectColumns)(editorSelectionAPI)(), list);
+    (0, _keymaps.bindKeymapArrayWithCommand)(_keymaps.selectRow, (0, _selection.selectRows)(editorSelectionAPI)(), list);
+  }
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.shift-arrowup-fix')) {
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.shiftArrowUp.common, (0, _selection.shiftArrowUpFromTable)(editorSelectionAPI)(), list);
   }

package/dist/cjs/plugins/table/utils/drag-menu.js

@@ -118,7 +118,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
         if (direction === 'row') {
           (0, _commands.insertRow)(index + offset, true)(state, dispatch);
         } else {
-          (0, _commands.insertColumn)(getEditorContainerWidth)(index + offset)(state, dispatch);
+          (0, _commands.insertColumn)(getEditorContainerWidth)(index + offset)(state, dispatch, editorView);
         }
         return true;
       },

package/dist/es2019/plugins/table/commands/selection.js

@@ -2,7 +2,8 @@ import { GapCursorSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode, R
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
+import { selectColumn, selectRow } from '../commands/misc';
 import { getClosestSelectionRect } from '../toolbar';
 export let TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -66,6 +67,42 @@ const arrowRightFromCellSelection = editorSelectionAPI => selection => (state, d
   }
   return false;
 };
+export const selectColumns = editorSelectionAPI => () => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const table = findTable(selection);
+  const rect = selectedRect(state);
+  if (table && isRowSelected(rect.top)(selection)) {
+    return selectFullTable(editorSelectionAPI)({
+      node: table.node,
+      startPos: table.start,
+      dir: TableSelectionDirection.BottomToTop
+    })(state, dispatch);
+  }
+  if (table && rect) {
+    return selectColumn(rect.left)(state, dispatch);
+  }
+  return false;
+};
+export const selectRows = editorSelectionAPI => () => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const table = findTable(selection);
+  const rect = selectedRect(state);
+  if (table && isColumnSelected(rect.left)(selection)) {
+    return selectFullTable(editorSelectionAPI)({
+      node: table.node,
+      startPos: table.start,
+      dir: TableSelectionDirection.BottomToTop
+    })(state, dispatch);
+  }
+  if (table && rect) {
+    return selectRow(rect.top)(state, dispatch);
+  }
+  return false;
+};
 const arrowLeftFromGapCursor = editorSelectionAPI => selection => (state, dispatch) => {
   const {
     doc

package/dist/es2019/plugins/table/pm-plugins/table-selection-keymap.js

@@ -1,11 +1,15 @@
-import { bindKeymapWithCommand, moveLeft, moveRight, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapArrayWithCommand, bindKeymapWithCommand, moveLeft, moveRight, selectColumn, selectRow, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { arrowLeftFromTable, arrowRightFromTable, shiftArrowUpFromTable } from '../commands/selection';
+import { arrowLeftFromTable, arrowRightFromTable, selectColumns, selectRows, shiftArrowUpFromTable } from '../commands/selection';
 export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   const list = {};
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
   bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
+  if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
+    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(), list);
+    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(), list);
+  }
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
   }

package/dist/es2019/plugins/table/utils/drag-menu.js

@@ -100,7 +100,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
       if (direction === 'row') {
         insertRow(index + offset, true)(state, dispatch);
       } else {
-        insertColumn(getEditorContainerWidth)(index + offset)(state, dispatch);
+        insertColumn(getEditorContainerWidth)(index + offset)(state, dispatch, editorView);
       }
       return true;
     },

package/dist/esm/plugins/table/commands/selection.js

@@ -2,7 +2,8 @@ import { GapCursorSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode, R
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
+import { selectColumn, selectRow } from '../commands/misc';
 import { getClosestSelectionRect } from '../toolbar';
 export var TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -77,6 +78,46 @@ var arrowRightFromCellSelection = function arrowRightFromCellSelection(editorSel
     };
   };
 };
+export var selectColumns = function selectColumns(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = findTable(selection);
+      var rect = selectedRect(state);
+      if (table && isRowSelected(rect.top)(selection)) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      if (table && rect) {
+        return selectColumn(rect.left)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
+export var selectRows = function selectRows(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = findTable(selection);
+      var rect = selectedRect(state);
+      if (table && isColumnSelected(rect.left)(selection)) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      if (table && rect) {
+        return selectRow(rect.top)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
 var arrowLeftFromGapCursor = function arrowLeftFromGapCursor(editorSelectionAPI) {
   return function (selection) {
     return function (state, dispatch) {

package/dist/esm/plugins/table/pm-plugins/table-selection-keymap.js

@@ -1,11 +1,15 @@
-import { bindKeymapWithCommand, moveLeft, moveRight, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapArrayWithCommand, bindKeymapWithCommand, moveLeft, moveRight, selectColumn, selectRow, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { arrowLeftFromTable, arrowRightFromTable, shiftArrowUpFromTable } from '../commands/selection';
+import { arrowLeftFromTable, arrowRightFromTable, selectColumns, selectRows, shiftArrowUpFromTable } from '../commands/selection';
 export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   var list = {};
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
   bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
+  if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
+    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(), list);
+    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(), list);
+  }
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
   }

package/dist/esm/plugins/table/utils/drag-menu.js

@@ -111,7 +111,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
         if (direction === 'row') {
           insertRow(index + offset, true)(state, dispatch);
         } else {
-          insertColumn(getEditorContainerWidth)(index + offset)(state, dispatch);
+          insertColumn(getEditorContainerWidth)(index + offset)(state, dispatch, editorView);
         }
         return true;
       },

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

@@ -6,4 +6,6 @@ export declare enum TableSelectionDirection {
 }
 export declare const arrowLeftFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
 export declare const arrowRightFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const selectColumns: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const selectRows: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
 export declare const shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

package/dist/types-ts4.5/plugins/table/commands/selection.d.ts

@@ -6,4 +6,6 @@ export declare enum TableSelectionDirection {
 }
 export declare const arrowLeftFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
 export declare const arrowRightFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const selectColumns: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const selectRows: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
 export declare const shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.6.3",
+  "version": "5.6.5",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -138,6 +138,9 @@
     },
     "platform.editor.a11y-table-resizing_uapcv": {
       "type": "boolean"
+    },
+    "platform.editor.a11y.table-selection_9uv33": {
+      "type": "boolean"
     }
   }
 }

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

@@ -17,8 +17,15 @@ import type {
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-
+import {
+  findTable,
+  isColumnSelected,
+  isRowSelected,
+  isTableSelected,
+  selectedRect,
+} from '@atlaskit/editor-tables/utils';
+
+import { selectColumn, selectRow } from '../commands/misc';
 import type tablePlugin from '../index';
 import { getClosestSelectionRect } from '../toolbar';
 
@@ -142,6 +149,54 @@ const arrowRightFromCellSelection =
     return false;
   };
 
+export const selectColumns =
+  (
+    editorSelectionAPI:
+      | ExtractInjectionAPI<typeof tablePlugin>['selection']
+      | undefined,
+  ) =>
+  (): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const table = findTable(selection);
+    const rect = selectedRect(state);
+    if (table && isRowSelected(rect.top)(selection)) {
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.BottomToTop,
+      })(state, dispatch);
+    }
+    if (table && rect) {
+      return selectColumn(rect.left)(state, dispatch);
+    }
+    return false;
+  };
+
+export const selectRows =
+  (
+    editorSelectionAPI:
+      | ExtractInjectionAPI<typeof tablePlugin>['selection']
+      | undefined,
+  ) =>
+  (): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const table = findTable(selection);
+    const rect = selectedRect(state);
+    if (table && isColumnSelected(rect.left)(selection)) {
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.BottomToTop,
+      })(state, dispatch);
+    }
+    if (table && rect) {
+      return selectRow(rect.top)(state, dispatch);
+    }
+    return false;
+  };
+
 const arrowLeftFromGapCursor =
   (
     editorSelectionAPI:

package/src/plugins/table/pm-plugins/table-selection-keymap.ts

@@ -1,7 +1,10 @@
 import {
+  bindKeymapArrayWithCommand,
   bindKeymapWithCommand,
   moveLeft,
   moveRight,
+  selectColumn,
+  selectRow,
   shiftArrowUp,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
@@ -12,6 +15,8 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import {
   arrowLeftFromTable,
   arrowRightFromTable,
+  selectColumns,
+  selectRows,
   shiftArrowUpFromTable,
 } from '../commands/selection';
 import type tablePlugin from '../index';
@@ -35,6 +40,20 @@ export function tableSelectionKeymapPlugin(
     list,
   );
 
+  if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
+    bindKeymapArrayWithCommand(
+      selectColumn,
+      selectColumns(editorSelectionAPI)(),
+      list,
+    );
+
+    bindKeymapArrayWithCommand(
+      selectRow,
+      selectRows(editorSelectionAPI)(),
+      list,
+    );
+  }
+
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(
       shiftArrowUp.common!,

package/src/plugins/table/utils/drag-menu.ts

@@ -173,6 +173,7 @@ export const getDragMenuConfig = (
           insertColumn(getEditorContainerWidth)(index! + offset)(
             state,
             dispatch,
+            editorView,
           );
         }
         return true;