@atlaskit/editor-plugin-table 7.6.7 → 7.6.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.6.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [#87069](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87069) [`3c2cb323593e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3c2cb323593e) - remove feature flag in-danger-hover-merged-cells-fix
8
+
9
+ ## 7.6.8
10
+
11
+ ### Patch Changes
12
+
13
+ - [#84955](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84955) [`f5eded0ecb9d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f5eded0ecb9d) - ECA11Y-192: Fix table resize screen reader announcement for NVDA Windows
14
+
3
15
  ## 7.6.7
4
16
 
5
17
  ### Patch Changes
@@ -27,6 +27,9 @@
27
27
  {
28
28
  "path": "../../editor-palette/afm-cc/tsconfig.json"
29
29
  },
30
+ {
31
+ "path": "../../editor-plugin-accessibility-utils/afm-cc/tsconfig.json"
32
+ },
30
33
  {
31
34
  "path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
32
35
  },
@@ -9,7 +9,6 @@ exports.TableResizer = void 0;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
- var _debounce = _interopRequireDefault(require("lodash/debounce"));
13
12
  var _rafSchd = _interopRequireDefault(require("raf-schd"));
14
13
  var _reactIntlNext = require("react-intl-next");
15
14
  var _analytics = require("@atlaskit/editor-common/analytics");
@@ -33,7 +32,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
33
32
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
34
33
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
35
34
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
36
- var DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
37
35
  var RESIZE_STEP_VALUE = 10;
38
36
  var handles = {
39
37
  right: true
@@ -122,26 +120,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
122
120
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
123
121
  snappingEnabled = _useState4[0],
124
122
  setSnappingEnabled = _useState4[1];
125
-
126
- // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
127
- var _useState5 = (0, _react.useState)({
128
- type: 'none',
129
- width: width
130
- }),
131
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
132
- screenReaderResizeInformation = _useState6[0],
133
- setScreenReaderResizeInformation = _useState6[1];
134
123
  var _useIntl = (0, _reactIntlNext.useIntl)(),
135
124
  formatMessage = _useIntl.formatMessage;
136
- var screenReaderResizeAnnouncerMessages = {
137
- increase: formatMessage(_messages.tableMessages.tableSizeIncreaseScreenReaderInformation, {
138
- newWidth: screenReaderResizeInformation.width
139
- }),
140
- decrease: formatMessage(_messages.tableMessages.tableSizeDecreaseScreenReaderInformation, {
141
- newWidth: screenReaderResizeInformation.width
142
- }),
143
- none: ''
144
- };
145
125
  var isTableSelected = ((_findTable = (0, _utils2.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
146
126
  var resizerMinWidth = getResizerMinWidth(node);
147
127
  var handleSize = getResizerHandleHeight(tableRef);
@@ -282,6 +262,19 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
282
262
  }
283
263
  displayGapCursor(true);
284
264
  dispatch(tr);
265
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv')) {
266
+ if (delta.width < 0) {
267
+ var _pluginInjectionApi$a;
268
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeDecreaseScreenReaderInformation, {
269
+ newWidth: newWidth
270
+ }));
271
+ } else if (delta.width > 0) {
272
+ var _pluginInjectionApi$a2;
273
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeIncreaseScreenReaderInformation, {
274
+ newWidth: newWidth
275
+ }));
276
+ }
277
+ }
285
278
 
286
279
  // Hide guidelines when resizing stops
287
280
  displayGuideline([]);
@@ -291,7 +284,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
291
284
  onResizeStop();
292
285
  }
293
286
  return newWidth;
294
- }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest]);
287
+ }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest, formatMessage, pluginInjectionApi]);
295
288
  var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
296
289
  var newWidth = width + step;
297
290
  if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -373,27 +366,6 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
373
366
  (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
374
367
  }
375
368
  }, [width]);
376
- (0, _react.useEffect)(function () {
377
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv')) {
378
- var debouncedSetWidth = (0, _debounce.default)(setScreenReaderResizeInformation, DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER);
379
- debouncedSetWidth(function (prevState) {
380
- var type = 'none';
381
- if (prevState.width > width) {
382
- type = 'decrease';
383
- }
384
- if (prevState.width < width) {
385
- type = 'increase';
386
- }
387
- return {
388
- type: type,
389
- width: width
390
- };
391
- });
392
- return function () {
393
- debouncedSetWidth.cancel();
394
- };
395
- }
396
- }, [width]);
397
369
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
398
370
  ref: resizerRef,
399
371
  enable: handles,
@@ -422,8 +394,5 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
422
394
  keymap: _keymaps.focusTableResizer
423
395
  });
424
396
  } : formatMessage(_messages.tableMessages.resizeTable)
425
- }, children), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-resizing_uapcv') && /*#__PURE__*/_react.default.createElement("div", {
426
- className: "assistive",
427
- role: "status"
428
- }, screenReaderResizeAnnouncerMessages[screenReaderResizeInformation.type]));
397
+ }, children));
429
398
  };
@@ -13,7 +13,6 @@ var _utils = require("@atlaskit/editor-common/utils");
13
13
  var _view = require("@atlaskit/editor-prosemirror/view");
14
14
  var _tableMap = require("@atlaskit/editor-tables/table-map");
15
15
  var _utils2 = require("@atlaskit/editor-tables/utils");
16
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
16
  var _types = require("../types");
18
17
  var _ColumnResizeWidget = require("../ui/ColumnResizeWidget");
19
18
  // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -71,51 +70,13 @@ var createControlsHoverDecoration = exports.createControlsHoverDecoration = func
71
70
  // So If the table cells are in danger we want to create a "rectangle" selection
72
71
  // to match the "clicked" selection
73
72
 
74
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.in-danger-hover-merged-cells-fix')) {
75
- if (danger && type !== 'table') {
76
- var selection = tr.selection;
77
- var _table = (0, _utils2.findTable)(selection);
78
- var rect = (0, _utils2.getSelectionRect)(selection);
79
- if (_table && rect) {
80
- updatedCells = map.cellsInRect(rect).map(function (x) {
81
- return x + _table.start;
82
- });
83
- }
84
- }
85
- } else {
86
- if (danger) {
87
- // Find the bounding rectangle of all the given cells, also considering
88
- // merged cells.
89
- var _cells$reduce3 = cells.reduce(function (acc, cell) {
90
- var _map$findCell = map.findCell(cell.pos - table.start),
91
- left = _map$findCell.left,
92
- right = _map$findCell.right,
93
- bottom = _map$findCell.bottom,
94
- top = _map$findCell.top;
95
- // Finding the bounding rect requires finding the min left and top positions,
96
- // and the max right and bottom positions of the cells
97
- return {
98
- recLeft: Math.min(acc.recLeft, left),
99
- recTop: Math.min(acc.recTop, top),
100
- recRight: Math.max(acc.recRight, right),
101
- recBottom: Math.max(acc.recBottom, bottom)
102
- };
103
- },
104
- // +-Infinity as initialisation vars which will always be overwritten
105
- // by smaller/larger values respectively
106
- {
107
- recLeft: Infinity,
108
- recTop: Infinity,
109
- recRight: -Infinity,
110
- recBottom: -Infinity
111
- }),
112
- recLeft = _cells$reduce3.recLeft,
113
- recTop = _cells$reduce3.recTop,
114
- recRight = _cells$reduce3.recRight,
115
- recBottom = _cells$reduce3.recBottom;
116
- var _rect = new _tableMap.Rect(recLeft, recTop, recRight, recBottom);
117
- updatedCells = map.cellsInRect(_rect).map(function (x) {
118
- return x + table.start;
73
+ if (danger && type !== 'table') {
74
+ var selection = tr.selection;
75
+ var _table = (0, _utils2.findTable)(selection);
76
+ var rect = (0, _utils2.getSelectionRect)(selection);
77
+ if (_table && rect) {
78
+ updatedCells = map.cellsInRect(rect).map(function (x) {
79
+ return x + _table.start;
119
80
  });
120
81
  }
121
82
  }
@@ -1,5 +1,4 @@
1
1
  import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
2
- import debounce from 'lodash/debounce';
3
2
  import rafSchd from 'raf-schd';
4
3
  import { useIntl } from 'react-intl-next';
5
4
  import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
@@ -19,7 +18,6 @@ import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGH
19
18
  import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
20
19
  import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
21
20
  import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
22
- const DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
23
21
  const RESIZE_STEP_VALUE = 10;
24
22
  const handles = {
25
23
  right: true
@@ -105,24 +103,9 @@ export const TableResizer = ({
105
103
  // used to reposition tooltip when table is resizing via keyboard
106
104
  const updateTooltip = React.useRef();
107
105
  const [snappingEnabled, setSnappingEnabled] = useState(false);
108
-
109
- // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
110
- const [screenReaderResizeInformation, setScreenReaderResizeInformation] = useState({
111
- type: 'none',
112
- width
113
- });
114
106
  const {
115
107
  formatMessage
116
108
  } = useIntl();
117
- const screenReaderResizeAnnouncerMessages = {
118
- increase: formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
119
- newWidth: screenReaderResizeInformation.width
120
- }),
121
- decrease: formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
122
- newWidth: screenReaderResizeInformation.width
123
- }),
124
- none: ''
125
- };
126
109
  const isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
127
110
  const resizerMinWidth = getResizerMinWidth(node);
128
111
  const handleSize = getResizerHandleHeight(tableRef);
@@ -274,6 +257,19 @@ export const TableResizer = ({
274
257
  }
275
258
  displayGapCursor(true);
276
259
  dispatch(tr);
260
+ if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
261
+ if (delta.width < 0) {
262
+ var _pluginInjectionApi$a;
263
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
264
+ newWidth: newWidth
265
+ }));
266
+ } else if (delta.width > 0) {
267
+ var _pluginInjectionApi$a2;
268
+ pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
269
+ newWidth: newWidth
270
+ }));
271
+ }
272
+ }
277
273
 
278
274
  // Hide guidelines when resizing stops
279
275
  displayGuideline([]);
@@ -283,7 +279,7 @@ export const TableResizer = ({
283
279
  onResizeStop();
284
280
  }
285
281
  return newWidth;
286
- }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest]);
282
+ }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest, formatMessage, pluginInjectionApi]);
287
283
  const handleTableSizeChangeOnKeypress = useCallback(step => {
288
284
  const newWidth = width + step;
289
285
  if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -365,27 +361,6 @@ export const TableResizer = ({
365
361
  (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 ? void 0 : _updateTooltip$curren.call(updateTooltip);
366
362
  }
367
363
  }, [width]);
368
- useEffect(() => {
369
- if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
370
- const debouncedSetWidth = debounce(setScreenReaderResizeInformation, DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER);
371
- debouncedSetWidth(prevState => {
372
- let type = 'none';
373
- if (prevState.width > width) {
374
- type = 'decrease';
375
- }
376
- if (prevState.width < width) {
377
- type = 'increase';
378
- }
379
- return {
380
- type,
381
- width
382
- };
383
- });
384
- return () => {
385
- debouncedSetWidth.cancel();
386
- };
387
- }
388
- }, [width]);
389
364
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
390
365
  ref: resizerRef,
391
366
  enable: handles,
@@ -415,8 +390,5 @@ export const TableResizer = ({
415
390
  keymap: focusTableResizer
416
391
  });
417
392
  } : formatMessage(messages.resizeTable)
418
- }, children), getBooleanFF('platform.editor.a11y-table-resizing_uapcv') && /*#__PURE__*/React.createElement("div", {
419
- className: "assistive",
420
- role: "status"
421
- }, screenReaderResizeAnnouncerMessages[screenReaderResizeInformation.type]));
393
+ }, children));
422
394
  };
@@ -6,9 +6,8 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
6
6
  // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
7
7
 
8
8
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
9
- import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
9
+ import { TableMap } from '@atlaskit/editor-tables/table-map';
10
10
  import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
11
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
12
11
  import { TableCssClassName as ClassName, TableDecorations } from '../types';
13
12
  import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
14
13
  const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
@@ -44,51 +43,13 @@ export const createControlsHoverDecoration = (cells, type, tr, isDragAndDropEnab
44
43
  // So If the table cells are in danger we want to create a "rectangle" selection
45
44
  // to match the "clicked" selection
46
45
 
47
- if (getBooleanFF('platform.editor.table.in-danger-hover-merged-cells-fix')) {
48
- if (danger && type !== 'table') {
49
- const {
50
- selection
51
- } = tr;
52
- const table = findTable(selection);
53
- const rect = getSelectionRect(selection);
54
- if (table && rect) {
55
- updatedCells = map.cellsInRect(rect).map(x => x + table.start);
56
- }
57
- }
58
- } else {
59
- if (danger) {
60
- // Find the bounding rectangle of all the given cells, also considering
61
- // merged cells.
62
- const {
63
- recLeft,
64
- recTop,
65
- recRight,
66
- recBottom
67
- } = cells.reduce((acc, cell) => {
68
- const {
69
- left,
70
- right,
71
- bottom,
72
- top
73
- } = map.findCell(cell.pos - table.start);
74
- // Finding the bounding rect requires finding the min left and top positions,
75
- // and the max right and bottom positions of the cells
76
- return {
77
- recLeft: Math.min(acc.recLeft, left),
78
- recTop: Math.min(acc.recTop, top),
79
- recRight: Math.max(acc.recRight, right),
80
- recBottom: Math.max(acc.recBottom, bottom)
81
- };
82
- },
83
- // +-Infinity as initialisation vars which will always be overwritten
84
- // by smaller/larger values respectively
85
- {
86
- recLeft: Infinity,
87
- recTop: Infinity,
88
- recRight: -Infinity,
89
- recBottom: -Infinity
90
- });
91
- const rect = new Rect(recLeft, recTop, recRight, recBottom);
46
+ if (danger && type !== 'table') {
47
+ const {
48
+ selection
49
+ } = tr;
50
+ const table = findTable(selection);
51
+ const rect = getSelectionRect(selection);
52
+ if (table && rect) {
92
53
  updatedCells = map.cellsInRect(rect).map(x => x + table.start);
93
54
  }
94
55
  }
@@ -3,7 +3,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
6
- import debounce from 'lodash/debounce';
7
6
  import rafSchd from 'raf-schd';
8
7
  import { useIntl } from 'react-intl-next';
9
8
  import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
@@ -23,7 +22,6 @@ import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGH
23
22
  import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
24
23
  import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
25
24
  import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
26
- var DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
27
25
  var RESIZE_STEP_VALUE = 10;
28
26
  var handles = {
29
27
  right: true
@@ -112,26 +110,8 @@ export var TableResizer = function TableResizer(_ref) {
112
110
  _useState4 = _slicedToArray(_useState3, 2),
113
111
  snappingEnabled = _useState4[0],
114
112
  setSnappingEnabled = _useState4[1];
115
-
116
- // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
117
- var _useState5 = useState({
118
- type: 'none',
119
- width: width
120
- }),
121
- _useState6 = _slicedToArray(_useState5, 2),
122
- screenReaderResizeInformation = _useState6[0],
123
- setScreenReaderResizeInformation = _useState6[1];
124
113
  var _useIntl = useIntl(),
125
114
  formatMessage = _useIntl.formatMessage;
126
- var screenReaderResizeAnnouncerMessages = {
127
- increase: formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
128
- newWidth: screenReaderResizeInformation.width
129
- }),
130
- decrease: formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
131
- newWidth: screenReaderResizeInformation.width
132
- }),
133
- none: ''
134
- };
135
115
  var isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
136
116
  var resizerMinWidth = getResizerMinWidth(node);
137
117
  var handleSize = getResizerHandleHeight(tableRef);
@@ -272,6 +252,19 @@ export var TableResizer = function TableResizer(_ref) {
272
252
  }
273
253
  displayGapCursor(true);
274
254
  dispatch(tr);
255
+ if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
256
+ if (delta.width < 0) {
257
+ var _pluginInjectionApi$a;
258
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
259
+ newWidth: newWidth
260
+ }));
261
+ } else if (delta.width > 0) {
262
+ var _pluginInjectionApi$a2;
263
+ pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
264
+ newWidth: newWidth
265
+ }));
266
+ }
267
+ }
275
268
 
276
269
  // Hide guidelines when resizing stops
277
270
  displayGuideline([]);
@@ -281,7 +274,7 @@ export var TableResizer = function TableResizer(_ref) {
281
274
  onResizeStop();
282
275
  }
283
276
  return newWidth;
284
- }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest]);
277
+ }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest, formatMessage, pluginInjectionApi]);
285
278
  var handleTableSizeChangeOnKeypress = useCallback(function (step) {
286
279
  var newWidth = width + step;
287
280
  if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -363,27 +356,6 @@ export var TableResizer = function TableResizer(_ref) {
363
356
  (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
364
357
  }
365
358
  }, [width]);
366
- useEffect(function () {
367
- if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
368
- var debouncedSetWidth = debounce(setScreenReaderResizeInformation, DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER);
369
- debouncedSetWidth(function (prevState) {
370
- var type = 'none';
371
- if (prevState.width > width) {
372
- type = 'decrease';
373
- }
374
- if (prevState.width < width) {
375
- type = 'increase';
376
- }
377
- return {
378
- type: type,
379
- width: width
380
- };
381
- });
382
- return function () {
383
- debouncedSetWidth.cancel();
384
- };
385
- }
386
- }, [width]);
387
359
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
388
360
  ref: resizerRef,
389
361
  enable: handles,
@@ -412,8 +384,5 @@ export var TableResizer = function TableResizer(_ref) {
412
384
  keymap: focusTableResizer
413
385
  });
414
386
  } : formatMessage(messages.resizeTable)
415
- }, children), getBooleanFF('platform.editor.a11y-table-resizing_uapcv') && /*#__PURE__*/React.createElement("div", {
416
- className: "assistive",
417
- role: "status"
418
- }, screenReaderResizeAnnouncerMessages[screenReaderResizeInformation.type]));
387
+ }, children));
419
388
  };
@@ -7,9 +7,8 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
7
7
  // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
8
8
 
9
9
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
10
- import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
10
+ import { TableMap } from '@atlaskit/editor-tables/table-map';
11
11
  import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
12
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
13
12
  import { TableCssClassName as ClassName, TableDecorations } from '../types';
14
13
  import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
15
14
  var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
@@ -65,51 +64,13 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
65
64
  // So If the table cells are in danger we want to create a "rectangle" selection
66
65
  // to match the "clicked" selection
67
66
 
68
- if (getBooleanFF('platform.editor.table.in-danger-hover-merged-cells-fix')) {
69
- if (danger && type !== 'table') {
70
- var selection = tr.selection;
71
- var _table = findTable(selection);
72
- var rect = getSelectionRect(selection);
73
- if (_table && rect) {
74
- updatedCells = map.cellsInRect(rect).map(function (x) {
75
- return x + _table.start;
76
- });
77
- }
78
- }
79
- } else {
80
- if (danger) {
81
- // Find the bounding rectangle of all the given cells, also considering
82
- // merged cells.
83
- var _cells$reduce3 = cells.reduce(function (acc, cell) {
84
- var _map$findCell = map.findCell(cell.pos - table.start),
85
- left = _map$findCell.left,
86
- right = _map$findCell.right,
87
- bottom = _map$findCell.bottom,
88
- top = _map$findCell.top;
89
- // Finding the bounding rect requires finding the min left and top positions,
90
- // and the max right and bottom positions of the cells
91
- return {
92
- recLeft: Math.min(acc.recLeft, left),
93
- recTop: Math.min(acc.recTop, top),
94
- recRight: Math.max(acc.recRight, right),
95
- recBottom: Math.max(acc.recBottom, bottom)
96
- };
97
- },
98
- // +-Infinity as initialisation vars which will always be overwritten
99
- // by smaller/larger values respectively
100
- {
101
- recLeft: Infinity,
102
- recTop: Infinity,
103
- recRight: -Infinity,
104
- recBottom: -Infinity
105
- }),
106
- recLeft = _cells$reduce3.recLeft,
107
- recTop = _cells$reduce3.recTop,
108
- recRight = _cells$reduce3.recRight,
109
- recBottom = _cells$reduce3.recBottom;
110
- var _rect = new Rect(recLeft, recTop, recRight, recBottom);
111
- updatedCells = map.cellsInRect(_rect).map(function (x) {
112
- return x + table.start;
67
+ if (danger && type !== 'table') {
68
+ var selection = tr.selection;
69
+ var _table = findTable(selection);
70
+ var rect = getSelectionRect(selection);
71
+ if (_table && rect) {
72
+ updatedCells = map.cellsInRect(rect).map(function (x) {
73
+ return x + _table.start;
113
74
  });
114
75
  }
115
76
  }
@@ -1,6 +1,7 @@
1
1
  import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
2
2
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
3
  import type { Command, EditorCommand, GetEditorFeatureFlags, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
4
+ import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
4
5
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
5
6
  import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
6
7
  import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -35,6 +36,7 @@ export type TablePlugin = NextEditorPlugin<'table', {
35
36
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
36
37
  };
37
38
  dependencies: [
39
+ OptionalPlugin<AccessibilityUtilsPlugin>,
38
40
  AnalyticsPlugin,
39
41
  ContentInsertionPlugin,
40
42
  WidthPlugin,
@@ -30,7 +30,15 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
30
30
  commands: {
31
31
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: import("@atlaskit/editor-common/analytics").INPUT_METHOD.PICKER | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
32
32
  };
33
- dependencies: [import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
33
+ dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
34
+ dependencies: [];
35
+ actions: {
36
+ ariaNotify: (message: string) => void;
37
+ };
38
+ sharedState: {
39
+ message: string;
40
+ };
41
+ }, undefined>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
34
42
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
35
43
  sharedState: {
36
44
  createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
@@ -80,7 +88,15 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
80
88
  sharedState: any;
81
89
  actions: any;
82
90
  }, any>>];
83
- }, import("../../../plugin").TablePluginOptions | undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
91
+ }, import("../../../plugin").TablePluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
92
+ dependencies: [];
93
+ actions: {
94
+ ariaNotify: (message: string) => void;
95
+ };
96
+ sharedState: {
97
+ message: string;
98
+ };
99
+ }, undefined>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
84
100
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
85
101
  sharedState: {
86
102
  createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
@@ -11,7 +11,15 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
11
11
  commands: {
12
12
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: import("@atlaskit/editor-common/analytics").INPUT_METHOD.PICKER | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
13
13
  };
14
- dependencies: [import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
14
+ dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
15
+ dependencies: [];
16
+ actions: {
17
+ ariaNotify: (message: string) => void;
18
+ };
19
+ sharedState: {
20
+ message: string;
21
+ };
22
+ }, undefined>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
15
23
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
16
24
  sharedState: {
17
25
  createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
@@ -61,7 +69,15 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
61
69
  sharedState: any;
62
70
  actions: any;
63
71
  }, any>>];
64
- }, import("../../../plugin").TablePluginOptions | undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
72
+ }, import("../../../plugin").TablePluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
73
+ dependencies: [];
74
+ actions: {
75
+ ariaNotify: (message: string) => void;
76
+ };
77
+ sharedState: {
78
+ message: string;
79
+ };
80
+ }, undefined>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
65
81
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
66
82
  sharedState: {
67
83
  createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
@@ -122,7 +138,15 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
122
138
  commands: {
123
139
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: import("@atlaskit/editor-common/analytics").INPUT_METHOD.PICKER | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
124
140
  };
125
- dependencies: [import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
141
+ dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
142
+ dependencies: [];
143
+ actions: {
144
+ ariaNotify: (message: string) => void;
145
+ };
146
+ sharedState: {
147
+ message: string;
148
+ };
149
+ }, undefined>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
126
150
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
127
151
  sharedState: {
128
152
  createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
@@ -172,7 +196,15 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
172
196
  sharedState: any;
173
197
  actions: any;
174
198
  }, any>>];
175
- }, import("../../../plugin").TablePluginOptions | undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
199
+ }, import("../../../plugin").TablePluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
200
+ dependencies: [];
201
+ actions: {
202
+ ariaNotify: (message: string) => void;
203
+ };
204
+ sharedState: {
205
+ message: string;
206
+ };
207
+ }, undefined>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
176
208
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
177
209
  sharedState: {
178
210
  createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
@@ -39,7 +39,15 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
39
39
  commands: {
40
40
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: import("@atlaskit/editor-common/analytics").INPUT_METHOD.PICKER | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
41
41
  };
42
- dependencies: [import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
42
+ dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
43
+ dependencies: [];
44
+ actions: {
45
+ ariaNotify: (message: string) => void;
46
+ };
47
+ sharedState: {
48
+ message: string;
49
+ };
50
+ }, undefined>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
43
51
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
44
52
  sharedState: {
45
53
  createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
@@ -89,7 +97,15 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
89
97
  sharedState: any;
90
98
  actions: any;
91
99
  }, any>>];
92
- }, import("../../plugin").TablePluginOptions | undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
100
+ }, import("../../plugin").TablePluginOptions | undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
101
+ dependencies: [];
102
+ actions: {
103
+ ariaNotify: (message: string) => void;
104
+ };
105
+ sharedState: {
106
+ message: string;
107
+ };
108
+ }, undefined>>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
93
109
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
94
110
  sharedState: {
95
111
  createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
@@ -1,6 +1,7 @@
1
1
  import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
2
2
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
3
  import type { Command, EditorCommand, GetEditorFeatureFlags, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
4
+ import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
4
5
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
5
6
  import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
6
7
  import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -35,6 +36,7 @@ export type TablePlugin = NextEditorPlugin<'table', {
35
36
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
36
37
  };
37
38
  dependencies: [
39
+ OptionalPlugin<AccessibilityUtilsPlugin>,
38
40
  AnalyticsPlugin,
39
41
  ContentInsertionPlugin,
40
42
  WidthPlugin,
@@ -32,6 +32,16 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
32
32
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: import("@atlaskit/editor-common/analytics").INPUT_METHOD.PICKER | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
33
33
  };
34
34
  dependencies: [
35
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
36
+ dependencies: [
37
+ ];
38
+ actions: {
39
+ ariaNotify: (message: string) => void;
40
+ };
41
+ sharedState: {
42
+ message: string;
43
+ };
44
+ }, undefined>>,
35
45
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
36
46
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
37
47
  sharedState: {
@@ -97,6 +107,16 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
97
107
  }, any>>
98
108
  ];
99
109
  }, import("../../../plugin").TablePluginOptions | undefined>,
110
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
111
+ dependencies: [
112
+ ];
113
+ actions: {
114
+ ariaNotify: (message: string) => void;
115
+ };
116
+ sharedState: {
117
+ message: string;
118
+ };
119
+ }, undefined>>,
100
120
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
101
121
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
102
122
  sharedState: {
@@ -13,6 +13,16 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
13
13
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: import("@atlaskit/editor-common/analytics").INPUT_METHOD.PICKER | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
14
14
  };
15
15
  dependencies: [
16
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
17
+ dependencies: [
18
+ ];
19
+ actions: {
20
+ ariaNotify: (message: string) => void;
21
+ };
22
+ sharedState: {
23
+ message: string;
24
+ };
25
+ }, undefined>>,
16
26
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
17
27
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
18
28
  sharedState: {
@@ -78,6 +88,16 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
78
88
  }, any>>
79
89
  ];
80
90
  }, import("../../../plugin").TablePluginOptions | undefined>,
91
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
92
+ dependencies: [
93
+ ];
94
+ actions: {
95
+ ariaNotify: (message: string) => void;
96
+ };
97
+ sharedState: {
98
+ message: string;
99
+ };
100
+ }, undefined>>,
81
101
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
82
102
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
83
103
  sharedState: {
@@ -155,6 +175,16 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
155
175
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: import("@atlaskit/editor-common/analytics").INPUT_METHOD.PICKER | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
156
176
  };
157
177
  dependencies: [
178
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
179
+ dependencies: [
180
+ ];
181
+ actions: {
182
+ ariaNotify: (message: string) => void;
183
+ };
184
+ sharedState: {
185
+ message: string;
186
+ };
187
+ }, undefined>>,
158
188
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
159
189
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
160
190
  sharedState: {
@@ -220,6 +250,16 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
220
250
  }, any>>
221
251
  ];
222
252
  }, import("../../../plugin").TablePluginOptions | undefined>,
253
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
254
+ dependencies: [
255
+ ];
256
+ actions: {
257
+ ariaNotify: (message: string) => void;
258
+ };
259
+ sharedState: {
260
+ message: string;
261
+ };
262
+ }, undefined>>,
223
263
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
224
264
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
225
265
  sharedState: {
@@ -41,6 +41,16 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
41
41
  insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: import("@atlaskit/editor-common/analytics").INPUT_METHOD.PICKER | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
42
42
  };
43
43
  dependencies: [
44
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
45
+ dependencies: [
46
+ ];
47
+ actions: {
48
+ ariaNotify: (message: string) => void;
49
+ };
50
+ sharedState: {
51
+ message: string;
52
+ };
53
+ }, undefined>>,
44
54
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
45
55
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
46
56
  sharedState: {
@@ -106,6 +116,16 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
106
116
  }, any>>
107
117
  ];
108
118
  }, import("../../plugin").TablePluginOptions | undefined>,
119
+ import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"accessibilityUtils", {
120
+ dependencies: [
121
+ ];
122
+ actions: {
123
+ ariaNotify: (message: string) => void;
124
+ };
125
+ sharedState: {
126
+ message: string;
127
+ };
128
+ }, undefined>>,
109
129
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
110
130
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
111
131
  sharedState: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.6.7",
3
+ "version": "7.6.9",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,6 +32,7 @@
32
32
  "@atlaskit/custom-steps": "^0.0.17",
33
33
  "@atlaskit/editor-common": "^78.23.0",
34
34
  "@atlaskit/editor-palette": "1.5.3",
35
+ "@atlaskit/editor-plugin-accessibility-utils": "^1.0.0",
35
36
  "@atlaskit/editor-plugin-analytics": "^1.0.0",
36
37
  "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
37
38
  "@atlaskit/editor-plugin-guideline": "^1.0.0",
@@ -128,9 +129,6 @@
128
129
  "platform.editor.menu.group-items": {
129
130
  "type": "boolean"
130
131
  },
131
- "platform.editor.table.in-danger-hover-merged-cells-fix": {
132
- "type": "boolean"
133
- },
134
132
  "platform.editor.a11y-column-resizing_emcvz": {
135
133
  "type": "boolean"
136
134
  },
@@ -8,7 +8,6 @@ import React, {
8
8
  useState,
9
9
  } from 'react';
10
10
 
11
- import debounce from 'lodash/debounce';
12
11
  import rafSchd from 'raf-schd';
13
12
  import { useIntl } from 'react-intl-next';
14
13
 
@@ -90,9 +89,6 @@ export interface TableResizerImprovementProps extends TableResizerProps {
90
89
 
91
90
  type ResizerNextHandler = React.ElementRef<typeof ResizerNext>;
92
91
 
93
- type ResizeAction = 'increase' | 'decrease' | 'none';
94
-
95
- const DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
96
92
  const RESIZE_STEP_VALUE = 10;
97
93
 
98
94
  const handles = { right: true };
@@ -189,26 +185,7 @@ export const TableResizer = ({
189
185
  const updateTooltip = React.useRef<() => void>();
190
186
  const [snappingEnabled, setSnappingEnabled] = useState(false);
191
187
 
192
- // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
193
- const [screenReaderResizeInformation, setScreenReaderResizeInformation] =
194
- useState<{
195
- type: ResizeAction;
196
- width: number;
197
- }>({
198
- type: 'none',
199
- width,
200
- });
201
-
202
188
  const { formatMessage } = useIntl();
203
- const screenReaderResizeAnnouncerMessages = {
204
- increase: formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
205
- newWidth: screenReaderResizeInformation.width,
206
- }),
207
- decrease: formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
208
- newWidth: screenReaderResizeInformation.width,
209
- }),
210
- none: '',
211
- };
212
189
 
213
190
  const isTableSelected =
214
191
  findTable(editorView.state?.selection)?.pos === getPos();
@@ -453,6 +430,22 @@ export const TableResizer = ({
453
430
  displayGapCursor(true);
454
431
  dispatch(tr);
455
432
 
433
+ if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
434
+ if (delta.width < 0) {
435
+ pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify(
436
+ formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
437
+ newWidth: newWidth,
438
+ }),
439
+ );
440
+ } else if (delta.width > 0) {
441
+ pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify(
442
+ formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
443
+ newWidth: newWidth,
444
+ }),
445
+ );
446
+ }
447
+ }
448
+
456
449
  // Hide guidelines when resizing stops
457
450
  displayGuideline([]);
458
451
  updateWidth(newWidth);
@@ -481,6 +474,8 @@ export const TableResizer = ({
481
474
  onResizeStop,
482
475
  isTableScalingEnabled,
483
476
  widthToWidest,
477
+ formatMessage,
478
+ pluginInjectionApi,
484
479
  ],
485
480
  );
486
481
 
@@ -599,34 +594,6 @@ export const TableResizer = ({
599
594
  }
600
595
  }, [width]);
601
596
 
602
- useEffect(() => {
603
- if (getBooleanFF('platform.editor.a11y-table-resizing_uapcv')) {
604
- const debouncedSetWidth = debounce(
605
- setScreenReaderResizeInformation,
606
- DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER,
607
- );
608
- debouncedSetWidth((prevState) => {
609
- let type: ResizeAction = 'none';
610
- if (prevState.width > width) {
611
- type = 'decrease';
612
- }
613
-
614
- if (prevState.width < width) {
615
- type = 'increase';
616
- }
617
-
618
- return {
619
- type,
620
- width,
621
- };
622
- });
623
-
624
- return () => {
625
- debouncedSetWidth.cancel();
626
- };
627
- }
628
- }, [width]);
629
-
630
597
  return (
631
598
  <>
632
599
  <ResizerNext
@@ -667,15 +634,6 @@ export const TableResizer = ({
667
634
  >
668
635
  {children}
669
636
  </ResizerNext>
670
- {getBooleanFF('platform.editor.a11y-table-resizing_uapcv') && (
671
- <div className="assistive" role="status">
672
- {
673
- screenReaderResizeAnnouncerMessages[
674
- screenReaderResizeInformation.type
675
- ]
676
- }
677
- </div>
678
- )}
679
637
  </>
680
638
  );
681
639
  };
package/src/plugin.tsx CHANGED
@@ -32,6 +32,7 @@ import type {
32
32
  } from '@atlaskit/editor-common/types';
33
33
  import { browser } from '@atlaskit/editor-common/utils';
34
34
  import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
35
+ import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
35
36
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
36
37
  import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
37
38
  import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
@@ -133,6 +134,7 @@ export type TablePlugin = NextEditorPlugin<
133
134
  ) => EditorCommand;
134
135
  };
135
136
  dependencies: [
137
+ OptionalPlugin<AccessibilityUtilsPlugin>,
136
138
  AnalyticsPlugin,
137
139
  ContentInsertionPlugin,
138
140
  WidthPlugin,
@@ -16,13 +16,12 @@ import type {
16
16
  import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
17
17
  import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
18
18
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
19
- import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
19
+ import { TableMap } from '@atlaskit/editor-tables/table-map';
20
20
  import {
21
21
  findTable,
22
22
  getCellsInRow,
23
23
  getSelectionRect,
24
24
  } from '@atlaskit/editor-tables/utils';
25
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
26
25
 
27
26
  import type { Cell, CellColumnPositioning } from '../types';
28
27
  import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -102,44 +101,12 @@ export const createControlsHoverDecoration = (
102
101
  // So If the table cells are in danger we want to create a "rectangle" selection
103
102
  // to match the "clicked" selection
104
103
 
105
- if (getBooleanFF('platform.editor.table.in-danger-hover-merged-cells-fix')) {
106
- if (danger && type !== 'table') {
107
- const { selection } = tr;
108
- const table = findTable(selection);
109
- const rect = getSelectionRect(selection);
104
+ if (danger && type !== 'table') {
105
+ const { selection } = tr;
106
+ const table = findTable(selection);
107
+ const rect = getSelectionRect(selection);
110
108
 
111
- if (table && rect) {
112
- updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
113
- }
114
- }
115
- } else {
116
- if (danger) {
117
- // Find the bounding rectangle of all the given cells, also considering
118
- // merged cells.
119
- const { recLeft, recTop, recRight, recBottom } = cells.reduce(
120
- (acc, cell) => {
121
- const { left, right, bottom, top } = map.findCell(
122
- cell.pos - table.start,
123
- );
124
- // Finding the bounding rect requires finding the min left and top positions,
125
- // and the max right and bottom positions of the cells
126
- return {
127
- recLeft: Math.min(acc.recLeft, left),
128
- recTop: Math.min(acc.recTop, top),
129
- recRight: Math.max(acc.recRight, right),
130
- recBottom: Math.max(acc.recBottom, bottom),
131
- };
132
- },
133
- // +-Infinity as initialisation vars which will always be overwritten
134
- // by smaller/larger values respectively
135
- {
136
- recLeft: Infinity,
137
- recTop: Infinity,
138
- recRight: -Infinity,
139
- recBottom: -Infinity,
140
- },
141
- );
142
- const rect = new Rect(recLeft, recTop, recRight, recBottom);
109
+ if (table && rect) {
143
110
  updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
144
111
  }
145
112
  }
package/tsconfig.app.json CHANGED
@@ -42,6 +42,9 @@
42
42
  {
43
43
  "path": "../editor-palette/tsconfig.app.json"
44
44
  },
45
+ {
46
+ "path": "../editor-plugin-accessibility-utils/tsconfig.app.json"
47
+ },
45
48
  {
46
49
  "path": "../editor-plugin-analytics/tsconfig.app.json"
47
50
  },