@atlaskit/editor-plugin-table 5.2.1 → 5.2.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 5.2.2
+
+### Patch Changes
+
+- [#41510](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41510) [`12e9528f975`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12e9528f975) - [ux] Adds a command for shift+arrowUp when pressed inside table to select the whole table when we reach top row.
+- Updated dependencies
+
 ## 5.2.1
 
 ### Patch Changes

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

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.arrowRightFromTable = exports.arrowLeftFromTable = exports.TableSelectionDirection = void 0;
+exports.shiftArrowUpFromTable = 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 _toolbar = require("../toolbar");
 var TableSelectionDirection = exports.TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
   TableSelectionDirection["BottomToTop"] = "BottomToTop";
@@ -344,4 +345,22 @@ var isSelectionAtStartOfTable = function isSelectionAtStartOfTable($pos, selecti
 };
 var isSelectionAtEndOfTable = function isSelectionAtEndOfTable($pos, selection) {
   return (0, _selection.isSelectionAtEndOfNode)($pos, (0, _utils.findTable)(selection));
+};
+var shiftArrowUpFromTable = exports.shiftArrowUpFromTable = function shiftArrowUpFromTable(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = (0, _utils.findTable)(selection);
+      var selectionRect = (0, _toolbar.getClosestSelectionRect)(state);
+      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top;
+      if (table && index === 0) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      return false;
+    };
+  };
 };

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

@@ -7,11 +7,15 @@ exports.default = void 0;
 exports.tableSelectionKeymapPlugin = tableSelectionKeymapPlugin;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _selection = require("../commands/selection");
 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.table.shift-arrowup-fix')) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.shiftArrowUp.common, (0, _selection.shiftArrowUpFromTable)(editorSelectionAPI)(), list);
+  }
   return (0, _keymap.keymap)(list);
 }
 var _default = exports.default = tableSelectionKeymapPlugin;

package/dist/cjs/plugins/table/toolbar.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.messages = exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = void 0;
+exports.messages = exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getClosestSelectionRect = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _customSteps = require("@atlaskit/custom-steps");
@@ -291,7 +291,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     showSelected: false
   };
 };
-var getClosestSelectionRect = function getClosestSelectionRect(state) {
+var getClosestSelectionRect = exports.getClosestSelectionRect = function getClosestSelectionRect(state) {
   var selection = state.selection;
   return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : (0, _utils3.findCellRectClosestToPos)(selection.$from);
 };

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

@@ -3,6 +3,7 @@ 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 { getClosestSelectionRect } from '../toolbar';
 export let TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
   TableSelectionDirection["BottomToTop"] = "BottomToTop";
@@ -305,4 +306,20 @@ const setGapCursorAfterTable = editorSelectionAPI => () => (state, dispatch) =>
   return false;
 };
 const isSelectionAtStartOfTable = ($pos, selection) => isSelectionAtStartOfNode($pos, findTable(selection));
-const isSelectionAtEndOfTable = ($pos, selection) => isSelectionAtEndOfNode($pos, findTable(selection));
+const isSelectionAtEndOfTable = ($pos, selection) => isSelectionAtEndOfNode($pos, findTable(selection));
+export const shiftArrowUpFromTable = editorSelectionAPI => () => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const table = findTable(selection);
+  const selectionRect = getClosestSelectionRect(state);
+  const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top;
+  if (table && index === 0) {
+    return selectFullTable(editorSelectionAPI)({
+      node: table.node,
+      startPos: table.start,
+      dir: TableSelectionDirection.BottomToTop
+    })(state, dispatch);
+  }
+  return false;
+};

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

@@ -1,10 +1,14 @@
-import { bindKeymapWithCommand, moveLeft, moveRight } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, moveLeft, moveRight, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { arrowLeftFromTable, arrowRightFromTable } from '../commands/selection';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { arrowLeftFromTable, arrowRightFromTable, 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.table.shift-arrowup-fix')) {
+    bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
+  }
   return keymap(list);
 }
 export default tableSelectionKeymapPlugin;

package/dist/es2019/plugins/table/toolbar.js

@@ -286,7 +286,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     showSelected: false
   };
 };
-const getClosestSelectionRect = state => {
+export const getClosestSelectionRect = state => {
   const selection = state.selection;
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };

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

@@ -3,6 +3,7 @@ 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 { getClosestSelectionRect } from '../toolbar';
 export var TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
   TableSelectionDirection["BottomToTop"] = "BottomToTop";
@@ -338,4 +339,22 @@ var isSelectionAtStartOfTable = function isSelectionAtStartOfTable($pos, selecti
 };
 var isSelectionAtEndOfTable = function isSelectionAtEndOfTable($pos, selection) {
   return isSelectionAtEndOfNode($pos, findTable(selection));
+};
+export var shiftArrowUpFromTable = function shiftArrowUpFromTable(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = findTable(selection);
+      var selectionRect = getClosestSelectionRect(state);
+      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top;
+      if (table && index === 0) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      return false;
+    };
+  };
 };

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

@@ -1,10 +1,14 @@
-import { bindKeymapWithCommand, moveLeft, moveRight } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, moveLeft, moveRight, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { arrowLeftFromTable, arrowRightFromTable } from '../commands/selection';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { arrowLeftFromTable, arrowRightFromTable, 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.table.shift-arrowup-fix')) {
+    bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
+  }
   return keymap(list);
 }
 export default tableSelectionKeymapPlugin;

package/dist/esm/plugins/table/toolbar.js

@@ -283,7 +283,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     showSelected: false
   };
 };
-var getClosestSelectionRect = function getClosestSelectionRect(state) {
+export var getClosestSelectionRect = function getClosestSelectionRect(state) {
   var selection = state.selection;
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };

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

@@ -6,3 +6,4 @@ 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 shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

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

@@ -33,4 +33,5 @@ export declare const messages: {
 };
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
+export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;

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

@@ -6,3 +6,4 @@ 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 shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

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

@@ -33,4 +33,5 @@ export declare const messages: {
 };
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
+export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.10.0",
+    "@atlaskit/editor-common": "^76.11.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -127,6 +127,9 @@
     "platform.editor.table.increase-shadow-visibility_lh89r": {
       "type": "boolean"
     },
+    "platform.editor.table.shift-arrowup-fix": {
+      "type": "boolean"
+    },
     "platform.editor.table.update-table-resizer-styles": {
       "type": "boolean"
     },

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

@@ -20,6 +20,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 
 import type tablePlugin from '../index';
+import { getClosestSelectionRect } from '../toolbar';
 
 export enum TableSelectionDirection {
   TopToBottom = 'TopToBottom',
@@ -485,3 +486,26 @@ const isSelectionAtStartOfTable = ($pos: ResolvedPos, selection: Selection) =>
 
 const isSelectionAtEndOfTable = ($pos: ResolvedPos, selection: Selection) =>
   isSelectionAtEndOfNode($pos, findTable(selection));
+
+export const shiftArrowUpFromTable =
+  (
+    editorSelectionAPI:
+      | ExtractInjectionAPI<typeof tablePlugin>['selection']
+      | undefined,
+  ) =>
+  (): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const table = findTable(selection);
+    const selectionRect = getClosestSelectionRect(state);
+    const index = selectionRect?.top;
+    if (table && index === 0) {
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.BottomToTop,
+      })(state, dispatch);
+    }
+
+    return false;
+  };

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

@@ -2,12 +2,18 @@ import {
   bindKeymapWithCommand,
   moveLeft,
   moveRight,
+  shiftArrowUp,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import { arrowLeftFromTable, arrowRightFromTable } from '../commands/selection';
+import {
+  arrowLeftFromTable,
+  arrowRightFromTable,
+  shiftArrowUpFromTable,
+} from '../commands/selection';
 import type tablePlugin from '../index';
 
 export function tableSelectionKeymapPlugin(
@@ -29,6 +35,14 @@ export function tableSelectionKeymapPlugin(
     list,
   );
 
+  if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
+    bindKeymapWithCommand(
+      shiftArrowUp.common!,
+      shiftArrowUpFromTable(editorSelectionAPI)(),
+      list,
+    );
+  }
+
   return keymap(list) as SafePlugin;
 }
 

package/src/plugins/table/toolbar.tsx

@@ -420,7 +420,9 @@ export const getToolbarCellOptionsConfig = (
   };
 };
 
-const getClosestSelectionRect = (state: EditorState): Rect | undefined => {
+export const getClosestSelectionRect = (
+  state: EditorState,
+): Rect | undefined => {
   const selection = state.selection;
   return isSelectionType(selection, 'cell')
     ? getSelectionRect(selection)!