@atlaskit/editor-plugin-table 7.8.1 → 7.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.8.1",
+  "version": "7.10.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.10.0",
     "@atlaskit/custom-steps": "^0.1.0",
-    "@atlaskit/editor-common": "^78.31.0",
+    "@atlaskit/editor-common": "^78.33.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",
@@ -40,7 +40,7 @@
     "@atlaskit/editor-plugin-selection": "^1.2.0",
     "@atlaskit/editor-plugin-width": "^1.1.0",
     "@atlaskit/editor-prosemirror": "4.0.0",
-    "@atlaskit/editor-shared-styles": "^2.9.0",
+    "@atlaskit/editor-shared-styles": "^2.10.0",
     "@atlaskit/editor-tables": "^2.7.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/menu": "^2.1.5",
@@ -48,7 +48,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-    "@atlaskit/primitives": "^5.5.0",
+    "@atlaskit/primitives": "^5.6.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/tokens": "^1.43.0",

package/src/commands/column-resize.ts

@@ -6,6 +6,7 @@ import type {
   Command,
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
+import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables';
 import type { CellAttributes, Direction } from '@atlaskit/editor-tables/types';
@@ -129,7 +130,10 @@ export const initiateKeyboardColumnResizing =
     ariaNotify,
     getIntl,
   }: {
-    ariaNotify?: (message: string) => void;
+    ariaNotify?: (
+      message: string,
+      ariaLiveElementAttributes?: AriaLiveElementAttributes,
+    ) => void;
     getIntl?: () => IntlShape;
   }): Command =>
   (state, dispatch, view) => {
@@ -144,7 +148,9 @@ export const initiateKeyboardColumnResizing =
     const cell = findCellClosestToPos(selection.$from);
 
     if (ariaNotify && getIntl) {
-      ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+      ariaNotify(getIntl().formatMessage(messages.startedColumnResize), {
+        priority: 'important',
+      });
     }
 
     if (selectionRect && cell && view) {
@@ -164,7 +170,10 @@ export const activateNextResizeArea =
     getIntl,
   }: {
     direction: Direction;
-    ariaNotify?: (message: string) => void;
+    ariaNotify?: (
+      message: string,
+      ariaLiveElementAttributes?: AriaLiveElementAttributes,
+    ) => void;
     getIntl?: () => IntlShape;
   }): Command =>
   (state, dispatch, view) => {
@@ -210,6 +219,7 @@ export const activateNextResizeArea =
           getIntl().formatMessage(messages.focusedOtherResize, {
             direction: 'right',
           }),
+          { priority: 'important' },
         );
       }
 
@@ -218,6 +228,7 @@ export const activateNextResizeArea =
           getIntl().formatMessage(messages.focusedOtherResize, {
             direction: 'left',
           }),
+          { priority: 'important' },
         );
       }
     }
@@ -275,7 +286,10 @@ export const changeColumnWidthByStep =
     stepSize: number;
     getEditorContainerWidth: GetEditorContainerWidth;
     isTableScalingEnabled: boolean;
-    ariaNotify?: (message: string) => void;
+    ariaNotify?: (
+      message: string,
+      ariaLiveElementAttributes?: AriaLiveElementAttributes,
+    ) => void;
     getIntl?: () => IntlShape;
     originalTr?: Transaction;
   }): Command =>
@@ -381,10 +395,14 @@ export const changeColumnWidthByStep =
 
       if (newResizeState.cols.length === colIndex + 1) {
         if (newResizeState.overflow === true) {
-          ariaNotify(getIntl().formatMessage(messages.columnResizeLast));
+          ariaNotify(getIntl().formatMessage(messages.columnResizeLast), {
+            priority: 'important',
+          });
         }
         if (newResizeState.overflow === false) {
-          ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow));
+          ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow), {
+            priority: 'important',
+          });
         }
       }
     }
@@ -398,7 +416,10 @@ export const stopKeyboardColumnResizing =
     getIntl,
     originalTr,
   }: {
-    ariaNotify?: (message: string) => void;
+    ariaNotify?: (
+      message: string,
+      ariaLiveElementAttributes?: AriaLiveElementAttributes,
+    ) => void;
     getIntl?: () => IntlShape;
     originalTr?: Transaction;
   }): Command =>
@@ -439,7 +460,9 @@ export const stopKeyboardColumnResizing =
       () => customTr.setMeta('scrollIntoView', false),
     )(state, fakeDispatch);
     if (ariaNotify && getIntl) {
-      ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+      ariaNotify(getIntl().formatMessage(messages.columnResizeStop), {
+        priority: 'important',
+      });
     }
 
     if (dispatch) {

package/src/commands/misc.ts

@@ -435,7 +435,11 @@ export const moveCursorBackward: Command = (state, dispatch) => {
 };
 
 export const setMultipleCellAttrs =
-  (attrs: Object, targetCellPosition?: number): Command =>
+  (
+    attrs: Object,
+    targetCellPosition?: number,
+    editorView?: EditorView | null,
+  ): Command =>
   (state, dispatch) => {
     let cursorPos: number | undefined;
     let { tr } = state;
@@ -457,6 +461,10 @@ export const setMultipleCellAttrs =
 
     if (tr.docChanged && cursorPos !== undefined) {
       if (dispatch) {
+        if (cursorPos !== undefined) {
+          editorView?.focus();
+          tr.setSelection(new TextSelection(tr.doc.resolve(cursorPos)));
+        }
         dispatch(tr);
       }
       return true;

package/src/commands-with-analytics.ts

@@ -17,6 +17,7 @@ import type {
   Command,
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
@@ -173,6 +174,7 @@ export const setColorWithAnalytics =
       | INPUT_METHOD.TABLE_CONTEXT_MENU,
     cellColor: string,
     targetCellPosition?: number,
+    editorView?: EditorView | null,
   ) =>
     withEditorAnalyticsAPI(({ selection }) => {
       const {
@@ -202,7 +204,11 @@ export const setColorWithAnalytics =
         eventType: EVENT_TYPE.TRACK,
       };
     })(editorAnalyticsAPI)(
-      setMultipleCellAttrs({ background: cellColor }, targetCellPosition),
+      setMultipleCellAttrs(
+        { background: cellColor },
+        targetCellPosition,
+        editorView,
+      ),
     );
 
 export const addRowAroundSelection =

package/src/nodeviews/TableComponent.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 import classnames from 'classnames';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
+import type { IntlShape } from 'react-intl-next';
+import { injectIntl } from 'react-intl-next';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import {
@@ -61,9 +63,11 @@ import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import {
   containsHeaderRow,
+  getAssistiveMessage,
   isTableNested,
   tablesHaveDifferentColumnWidths,
   tablesHaveDifferentNoOfColumns,
+  tablesHaveDifferentNoOfRows,
 } from '../utils';
 
 import { ExternalDropTargets } from './ExternalDropTargets';
@@ -106,6 +110,7 @@ export interface ComponentProps {
   getEditorFeatureFlags: GetEditorFeatureFlags;
   dispatchAnalyticsEvent: DispatchAnalyticsEvent;
   pluginInjectionApi?: PluginInjectionAPI;
+  intl: IntlShape;
 
   // marking props as option to ensure backward compatibility when platform.editor.table.use-shared-state-hook disabled
   isInDanger?: boolean;
@@ -442,6 +447,21 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
 
     const currentTable = getNode();
+    const previousTable = this.node;
+    const isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(
+      currentTable,
+      previousTable,
+    );
+    const isNoOfRowsChanged = tablesHaveDifferentNoOfRows(
+      currentTable,
+      previousTable,
+    );
+    if (isNoOfColumnsChanged || isNoOfRowsChanged) {
+      this.props.pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify(
+        getAssistiveMessage(previousTable, currentTable, this.props.intl),
+        { priority: 'important' },
+      );
+    }
     if (currentTable.attrs.__autoSize) {
       // Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
       this.handleAutoSizeDebounced();
@@ -451,11 +471,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     else if (allowColumnResizing && this.table && !isMediaFullscreen) {
       // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
       // re-draw colgroup.
-      const previousTable = this.node;
-      const isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(
-        currentTable,
-        previousTable,
-      );
       if (
         tablesHaveDifferentColumnWidths(currentTable, previousTable) ||
         isNoOfColumnsChanged
@@ -1044,4 +1059,4 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   private handleWindowResizeDebounced = rafSchedule(this.handleWindowResize);
 }
 
-export default TableComponent;
+export default injectIntl(TableComponent);

package/src/plugin.tsx

@@ -131,12 +131,12 @@ export type TablePlugin = NextEditorPlugin<
       ) => EditorCommand;
     };
     dependencies: [
-      OptionalPlugin<AccessibilityUtilsPlugin>,
       AnalyticsPlugin,
       ContentInsertionPlugin,
       WidthPlugin,
       GuidelinePlugin,
       SelectionPlugin,
+      OptionalPlugin<AccessibilityUtilsPlugin>,
       OptionalPlugin<MediaPlugin>,
       OptionalPlugin<EditorViewModePlugin>,
     ];

package/src/toolbar.tsx

@@ -557,7 +557,13 @@ export const getToolbarConfig =
             isTableScalingEnabled,
           )
         : [];
-      const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
+      const colorPicker = getColorPicker(
+        state,
+        menu,
+        intl,
+        editorAnalyticsAPI,
+        getEditorView,
+      );
 
       // Check if we need to show confirm dialog for delete button
       let confirmDialog;
@@ -812,6 +818,7 @@ const getColorPicker = (
   menu: FloatingToolbarItem<Command>,
   { formatMessage }: ToolbarMenuContext,
   editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined,
+  getEditorView: () => EditorView | null,
 ): Array<FloatingToolbarItem<Command>> => {
   const { targetCellPosition, pluginConfig } = getPluginState(state);
   if (!pluginConfig.allowBackgroundColor) {
@@ -838,11 +845,13 @@ const getColorPicker = (
       selectType: 'color',
       defaultValue: defaultPalette,
       options: cellBackgroundColorPalette,
+      returnEscToButton: true,
       onChange: (option: any) =>
         setColorWithAnalytics(editorAnalyticsAPI)(
           INPUT_METHOD.FLOATING_TB,
           option.value,
           targetCellPosition,
+          getEditorView(),
         ),
     },
     separator(menu.hidden),

package/src/utils/index.ts

@@ -26,6 +26,7 @@ export {
   getTableWidth,
   tablesHaveDifferentColumnWidths,
   tablesHaveDifferentNoOfColumns,
+  tablesHaveDifferentNoOfRows,
   isTableNested,
   anyChildCellMergedAcrossRow,
   supportedHeaderRow,
@@ -75,7 +76,7 @@ export {
 } from './row-controls';
 export type { RowParams } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
-export { getMergedCellsPositions } from './table';
+export { getMergedCellsPositions, getAssistiveMessage } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
 export {
   hasMergedCellsInColumn,

package/src/utils/nodes.ts

@@ -94,6 +94,16 @@ export const tablesHaveDifferentNoOfColumns = (
   return prevMap.width !== currentMap.width;
 };
 
+export const tablesHaveDifferentNoOfRows = (
+  currentTable: PmNode,
+  previousTable: PmNode,
+): boolean => {
+  const prevMap = TableMap.get(previousTable);
+  const currentMap = TableMap.get(currentTable);
+
+  return prevMap.height !== currentMap.height;
+};
+
 function filterNearSelection<T, U>(
   selection: Selection,
   findNode: (selection: Selection) => { pos: number; node: PmNode } | undefined,

package/src/utils/table.ts

@@ -1,3 +1,7 @@
+import type { IntlShape } from 'react-intl-next';
+
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -30,3 +34,35 @@ export const colsToRect = (cols: Array<number>, noOfRows: number): Rect => ({
   top: 0,
   bottom: noOfRows,
 });
+
+export const getAssistiveMessage = (
+  prevTableNode: PmNode,
+  currentTableNode: PmNode,
+  intl: IntlShape,
+) => {
+  const { formatMessage } = intl;
+  const prevTableMap = TableMap.get(prevTableNode);
+  const currentTableMap = TableMap.get(currentTableNode);
+
+  if (currentTableMap.width !== prevTableMap.width) {
+    const diff = Math.abs(currentTableMap.width - prevTableMap.width);
+    if (currentTableMap.width > prevTableMap.width) {
+      return formatMessage(messages.columnsAreInserted, { count: diff });
+    }
+    if (currentTableMap.width < prevTableMap.width) {
+      return formatMessage(messages.columnsAreRemoved, { count: diff });
+    }
+  }
+
+  if (currentTableMap.height !== prevTableMap.height) {
+    const diff = Math.abs(currentTableMap.height - prevTableMap.height);
+    if (currentTableMap.height > prevTableMap.height) {
+      return formatMessage(messages.rowsAreInserted, { count: diff });
+    }
+    if (currentTableMap.height < prevTableMap.height) {
+      return formatMessage(messages.rowsAreRemoved, { count: diff });
+    }
+  }
+
+  return '';
+};