@atlaskit/editor-plugin-table 7.9.0 → 7.10.1

package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js

@@ -1,6 +1,7 @@
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getSelectedTableInfo } from '../../../utils';
 import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
@@ -72,8 +73,8 @@ export const getResizeState = ({
 
 // updates Colgroup DOM node with new widths
 export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled) => {
-  const cols = tableRef.querySelectorAll('col');
-  const columnsCount = cols.length;
+  const cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
+  const columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
      updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
      We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
@@ -83,19 +84,19 @@ export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled
     const scalePercent = getTableScalingPercent(tableNode, tableRef);
     state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
     .forEach((column, i) => {
-      const fixedColWidth = getColWidthFix(column.width, columnsCount);
+      const fixedColWidth = getColWidthFix(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0);
       const scaledWidth = fixedColWidth * scalePercent;
       const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
       // we aren't handling the remaining pixels here when the 48px min width is reached
-      if (cols[i]) {
+      if (cols !== null && cols !== void 0 && cols[i]) {
         cols[i].style.width = `${finalWidth}px`;
       }
     });
   } else {
     state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
     .forEach((column, i) => {
-      if (cols[i]) {
-        cols[i].style.width = `${getColWidthFix(column.width, columnsCount)}px`;
+      if (cols !== null && cols !== void 0 && cols[i]) {
+        cols[i].style.width = `${getColWidthFix(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0)}px`;
       }
     });
   }
@@ -290,7 +291,8 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
     return;
   }
   const maybeTable = domAtPos(table.start).node;
-  const tableRef = maybeTable.closest('table');
+  const maybeTableElement = maybeTable instanceof HTMLElement ? maybeTable : null;
+  const tableRef = getBooleanFF('platform.editor.explicit-html-element-check') ? maybeTableElement === null || maybeTableElement === void 0 ? void 0 : maybeTableElement.closest('table') : maybeTable === null || maybeTable === void 0 ? void 0 : maybeTable.closest('table');
   if (!tableRef) {
     return;
   }

package/dist/es2019/transforms/column-width.js

@@ -1,6 +1,7 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerElementWidth, getTableElementWidth, hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
@@ -94,7 +95,8 @@ export const rescaleColumns = (isTableScalingEnabled = false) => (table, view) =
   const newTable = tr.doc.nodeAt(table.pos);
   const domAtPos = view.domAtPos.bind(view);
   const maybeTable = domAtPos(table.start).node;
-  const tableRef = maybeTable.closest('table');
+  const maybeTableElement = getBooleanFF('platform.editor.explicit-html-element-check') ? maybeTable instanceof HTMLElement ? maybeTable : null : maybeTable;
+  const tableRef = maybeTableElement === null || maybeTableElement === void 0 ? void 0 : maybeTableElement.closest('table');
   if (!tableRef || !newTable) {
     return tr;
   }

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -4,6 +4,7 @@ import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'reac
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
@@ -90,14 +91,26 @@ const DragControlsComponent = ({
     }
   }, [editorView, tableActive]);
   const handleMouseMove = useCallback(e => {
-    const isParentDragControls = e.nativeEvent.target.closest(`.${ClassName.DRAG_ROW_CONTROLS}`);
-    const rowIndex = e.nativeEvent.target.getAttribute('data-start-index');
+    if (getBooleanFF('platform.editor.explicit-html-element-check')) {
+      const target = e.nativeEvent.target instanceof Element ? e.nativeEvent.target : null;
+      const isParentDragControls = target === null || target === void 0 ? void 0 : target.closest(`.${ClassName.DRAG_ROW_CONTROLS}`);
+      const rowIndex = target === null || target === void 0 ? void 0 : target.getAttribute('data-start-index');
 
-    // avoid updating if event target is not related
-    if (!isParentDragControls || !rowIndex) {
-      return;
+      // avoid updating if event target is not related
+      if (!isParentDragControls || !rowIndex) {
+        return;
+      }
+      updateCellHoverLocation(Number(rowIndex));
+    } else {
+      const isParentDragControls = e.nativeEvent.target.closest(`.${ClassName.DRAG_ROW_CONTROLS}`);
+      const rowIndex = e.nativeEvent.target.getAttribute('data-start-index');
+
+      // avoid updating if event target is not related
+      if (!isParentDragControls || !rowIndex) {
+        return;
+      }
+      updateCellHoverLocation(Number(rowIndex));
     }
-    updateCellHoverLocation(Number(rowIndex));
   }, [updateCellHoverLocation]);
   const rowIndexes = useMemo(() => {
     return [rowIndex];

package/dist/es2019/utils/index.js

@@ -1,12 +1,12 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, isSelectionUpdated } from './selection';
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
-export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
+export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } 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, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells } from './merged-cells';
 export { createTableWithWidth } from './create';

package/dist/es2019/utils/nodes.js

@@ -57,6 +57,11 @@ export const tablesHaveDifferentNoOfColumns = (currentTable, previousTable) => {
   const currentMap = TableMap.get(currentTable);
   return prevMap.width !== currentMap.width;
 };
+export const tablesHaveDifferentNoOfRows = (currentTable, previousTable) => {
+  const prevMap = TableMap.get(previousTable);
+  const currentMap = TableMap.get(currentTable);
+  return prevMap.height !== currentMap.height;
+};
 function filterNearSelection(selection, findNode, predicate, defaultValue) {
   const found = findNode(selection);
   if (!found) {

package/dist/es2019/utils/table.js

@@ -1,3 +1,4 @@
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 export const getMergedCellsPositions = tr => {
@@ -22,4 +23,38 @@ export const colsToRect = (cols, noOfRows) => ({
   right: Math.max(...cols) + 1,
   top: 0,
   bottom: noOfRows
-});
+});
+export const getAssistiveMessage = (prevTableNode, currentTableNode, intl) => {
+  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 '';
+};

package/dist/esm/commands/column-resize.js

@@ -72,7 +72,9 @@ export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResiz
     var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
     var cell = findCellClosestToPos(selection.$from);
     if (ariaNotify && getIntl) {
-      ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+      ariaNotify(getIntl().formatMessage(messages.startedColumnResize), {
+        priority: 'important'
+      });
     }
     if (selectionRect && cell && view) {
       return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
@@ -116,12 +118,16 @@ export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
       if (direction === 1) {
         ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
           direction: 'right'
-        }));
+        }), {
+          priority: 'important'
+        });
       }
       if (direction === -1) {
         ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
           direction: 'left'
-        }));
+        }), {
+          priority: 'important'
+        });
       }
     }
     if ($nextCell) {
@@ -170,7 +176,13 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
     var map = TableMap.get(originalTable);
     var domAtPos = view.domAtPos.bind(view);
     var colIndex = map.colCount($cell.pos - tableStartPosition) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
-    var dom = domAtPos(tableStartPosition).node;
+    var dom = null;
+    if (getBooleanFF('platform.editor.explicit-html-element-check')) {
+      var domAtPosition = domAtPos(tableStartPosition);
+      dom = domAtPosition.node instanceof HTMLTableElement ? domAtPosition.node : null;
+    } else {
+      dom = domAtPos(tableStartPosition).node;
+    }
     if (dom && dom.nodeName !== 'TABLE') {
       dom = dom.closest('table');
     }
@@ -217,10 +229,14 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
       }));
       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'
+          });
         }
       }
     }
@@ -256,7 +272,9 @@ export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(_ref
       return customTr.setMeta('scrollIntoView', false);
     })(state, fakeDispatch);
     if (ariaNotify && getIntl) {
-      ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+      ariaNotify(getIntl().formatMessage(messages.columnResizeStop), {
+        priority: 'important'
+      });
     }
     if (dispatch) {
       dispatch(customTr);

package/dist/esm/nodeviews/TableComponent.js

@@ -17,6 +17,7 @@ import React from 'react';
 import classnames from 'classnames';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
+import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
@@ -37,7 +38,7 @@ import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
-import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
+import { containsHeaderRow, getAssistiveMessage, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../utils';
 import { ExternalDropTargets } from './ExternalDropTargets';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
@@ -515,6 +516,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
       }
       var currentTable = getNode();
+      var previousTable = this.node;
+      var isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
+      var isNoOfRowsChanged = tablesHaveDifferentNoOfRows(currentTable, previousTable);
+      if (isNoOfColumnsChanged || isNoOfRowsChanged) {
+        var _this$props$pluginInj;
+        (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.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();
@@ -524,8 +534,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       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.
-        var previousTable = this.node;
-        var isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
         if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || isNoOfColumnsChanged) {
           var _view = this.props.view;
           var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || isNoOfColumnsChanged && isResizing;
@@ -786,4 +794,4 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   return TableComponent;
 }(React.Component);
 _defineProperty(TableComponent, "displayName", 'TableComponent');
-export default TableComponent;
+export default injectIntl(TableComponent);

package/dist/esm/nodeviews/TableRow.js

@@ -396,7 +396,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
       this.focused = isCurrentTableSelected;
       var wrapper = tree.wrapper;
       var tableContainer = wrapper.parentElement;
-      var tableContentWrapper = tableContainer.parentElement;
+      var tableContentWrapper = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.parentElement;
       var layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
       if (isCurrentTableSelected) {
         this.colControlsOffset = tableControlsSpacing;

package/dist/esm/pm-plugins/table-resizing/utils/colgroup.js

@@ -56,13 +56,13 @@ export var generateColgroup = function generateColgroup(table, tableRef) {
 export var insertColgroupFromNode = function insertColgroupFromNode(tableRef, table) {
   var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var shouldRemove = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  var colgroup = tableRef.querySelector('colgroup');
+  var colgroup = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelector('colgroup');
   if (colgroup && shouldRemove) {
-    tableRef.removeChild(colgroup);
+    tableRef === null || tableRef === void 0 || tableRef.removeChild(colgroup);
   }
-  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef : undefined);
+  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined);
   if (shouldRemove) {
-    tableRef.insertBefore(colgroup, tableRef.firstChild);
+    tableRef === null || tableRef === void 0 || tableRef.insertBefore(colgroup, tableRef === null || tableRef === void 0 ? void 0 : tableRef.firstChild);
   }
   return colgroup.children;
 };

package/dist/esm/pm-plugins/table-resizing/utils/misc.js

@@ -93,7 +93,7 @@ export var getTableContainerElementWidth = function getTableContainerElementWidt
 export var getTableScalingPercent = function getTableScalingPercent(table, tableRef) {
   var _tableRef$parentEleme;
   var tableWidth = getTableContainerElementWidth(table);
-  var renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
+  var renderWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
   // minus 1 here to avoid any 1px scroll in Firefox
   var scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);

package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js

@@ -17,7 +17,7 @@ export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, t
     var _tableRef$closest;
     // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
     var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    var tableContainerWidth = (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+    var tableContainerWidth = tableRef === null || tableRef === void 0 || (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
     var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
     resizeAmount = amount * 2;
     if (isOverflowed) {
@@ -48,11 +48,13 @@ export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, t
 };
 var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
   var currentWidth = getTableContainerElementWidth(tableNode);
-  var resizingContainer = tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
+  var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
   if (resizingContainer && resizingItem) {
     var newWidth = "".concat(currentWidth + resizeAmount, "px");
-    tableRef.style.width = newWidth;
+    if (tableRef) {
+      tableRef.style.width = newWidth;
+    }
     resizingContainer.style.width = newWidth;
     resizingItem.style.width = newWidth;
   }

package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getSelectedTableInfo } from '../../../utils';
 import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
@@ -85,8 +86,8 @@ export var getResizeState = function getResizeState(_ref) {
 
 // updates Colgroup DOM node with new widths
 export var updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled) {
-  var cols = tableRef.querySelectorAll('col');
-  var columnsCount = cols.length;
+  var cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
+  var columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
      updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
      We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
@@ -98,11 +99,11 @@ export var updateColgroup = function updateColgroup(state, tableRef, tableNode,
       return column && !!column.width;
     }) // if width is 0, we dont want to apply that.
     .forEach(function (column, i) {
-      var fixedColWidth = getColWidthFix(column.width, columnsCount);
+      var fixedColWidth = getColWidthFix(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0);
       var scaledWidth = fixedColWidth * scalePercent;
       var finalWidth = Math.max(scaledWidth, tableCellMinWidth);
       // we aren't handling the remaining pixels here when the 48px min width is reached
-      if (cols[i]) {
+      if (cols !== null && cols !== void 0 && cols[i]) {
         cols[i].style.width = "".concat(finalWidth, "px");
       }
     });
@@ -111,8 +112,8 @@ export var updateColgroup = function updateColgroup(state, tableRef, tableNode,
       return column && !!column.width;
     }) // if width is 0, we dont want to apply that.
     .forEach(function (column, i) {
-      if (cols[i]) {
-        cols[i].style.width = "".concat(getColWidthFix(column.width, columnsCount), "px");
+      if (cols !== null && cols !== void 0 && cols[i]) {
+        cols[i].style.width = "".concat(getColWidthFix(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0), "px");
       }
     });
   }
@@ -312,7 +313,8 @@ export var getNewResizeStateFromSelectedColumns = function getNewResizeStateFrom
     return;
   }
   var maybeTable = domAtPos(table.start).node;
-  var tableRef = maybeTable.closest('table');
+  var maybeTableElement = maybeTable instanceof HTMLElement ? maybeTable : null;
+  var tableRef = getBooleanFF('platform.editor.explicit-html-element-check') ? maybeTableElement === null || maybeTableElement === void 0 ? void 0 : maybeTableElement.closest('table') : maybeTable === null || maybeTable === void 0 ? void 0 : maybeTable.closest('table');
   if (!tableRef) {
     return;
   }

package/dist/esm/transforms/column-width.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerElementWidth, getTableElementWidth, hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
@@ -99,7 +100,8 @@ export var rescaleColumns = function rescaleColumns() {
       var newTable = tr.doc.nodeAt(table.pos);
       var domAtPos = view.domAtPos.bind(view);
       var maybeTable = domAtPos(table.start).node;
-      var tableRef = maybeTable.closest('table');
+      var maybeTableElement = getBooleanFF('platform.editor.explicit-html-element-check') ? maybeTable instanceof HTMLElement ? maybeTable : null : maybeTable;
+      var tableRef = maybeTableElement === null || maybeTableElement === void 0 ? void 0 : maybeTableElement.closest('table');
       if (!tableRef || !newTable) {
         return tr;
       }

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -5,6 +5,7 @@ import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'reac
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
@@ -90,14 +91,26 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }
   }, [editorView, tableActive]);
   var handleMouseMove = useCallback(function (e) {
-    var isParentDragControls = e.nativeEvent.target.closest(".".concat(ClassName.DRAG_ROW_CONTROLS));
-    var rowIndex = e.nativeEvent.target.getAttribute('data-start-index');
+    if (getBooleanFF('platform.editor.explicit-html-element-check')) {
+      var target = e.nativeEvent.target instanceof Element ? e.nativeEvent.target : null;
+      var isParentDragControls = target === null || target === void 0 ? void 0 : target.closest(".".concat(ClassName.DRAG_ROW_CONTROLS));
+      var _rowIndex = target === null || target === void 0 ? void 0 : target.getAttribute('data-start-index');
 
-    // avoid updating if event target is not related
-    if (!isParentDragControls || !rowIndex) {
-      return;
+      // avoid updating if event target is not related
+      if (!isParentDragControls || !_rowIndex) {
+        return;
+      }
+      updateCellHoverLocation(Number(_rowIndex));
+    } else {
+      var _isParentDragControls = e.nativeEvent.target.closest(".".concat(ClassName.DRAG_ROW_CONTROLS));
+      var _rowIndex2 = e.nativeEvent.target.getAttribute('data-start-index');
+
+      // avoid updating if event target is not related
+      if (!_isParentDragControls || !_rowIndex2) {
+        return;
+      }
+      updateCellHoverLocation(Number(_rowIndex2));
     }
-    updateCellHoverLocation(Number(rowIndex));
   }, [updateCellHoverLocation]);
   var rowIndexes = useMemo(function () {
     return [rowIndex];

package/dist/esm/utils/index.js

@@ -1,12 +1,12 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, isSelectionUpdated } from './selection';
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
-export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
+export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } 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, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells } from './merged-cells';
 export { createTableWithWidth } from './create';

package/dist/esm/utils/nodes.js

@@ -68,6 +68,11 @@ export var tablesHaveDifferentNoOfColumns = function tablesHaveDifferentNoOfColu
   var currentMap = TableMap.get(currentTable);
   return prevMap.width !== currentMap.width;
 };
+export var tablesHaveDifferentNoOfRows = function tablesHaveDifferentNoOfRows(currentTable, previousTable) {
+  var prevMap = TableMap.get(previousTable);
+  var currentMap = TableMap.get(currentTable);
+  return prevMap.height !== currentMap.height;
+};
 function filterNearSelection(selection, findNode, predicate, defaultValue) {
   var found = findNode(selection);
   if (!found) {

package/dist/esm/utils/table.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 export var getMergedCellsPositions = function getMergedCellsPositions(tr) {
@@ -25,4 +26,36 @@ export var colsToRect = function colsToRect(cols, noOfRows) {
     top: 0,
     bottom: noOfRows
   };
+};
+export var getAssistiveMessage = function getAssistiveMessage(prevTableNode, currentTableNode, intl) {
+  var formatMessage = intl.formatMessage;
+  var prevTableMap = TableMap.get(prevTableNode);
+  var currentTableMap = TableMap.get(currentTableNode);
+  if (currentTableMap.width !== prevTableMap.width) {
+    var 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) {
+    var _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 '';
 };

package/dist/types/commands/column-resize.d.ts

@@ -1,26 +1,27 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 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 type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: ({ ariaNotify, getIntl, }: {
-    ariaNotify?: ((message: string) => void) | undefined;
+    ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
 }) => Command;
 export declare const activateNextResizeArea: ({ direction, ariaNotify, getIntl, }: {
     direction: Direction;
-    ariaNotify?: ((message: string) => void) | undefined;
+    ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
 }) => Command;
 export declare const changeColumnWidthByStep: ({ stepSize, getEditorContainerWidth, isTableScalingEnabled, ariaNotify, getIntl, }: {
     stepSize: number;
     getEditorContainerWidth: GetEditorContainerWidth;
     isTableScalingEnabled: boolean;
-    ariaNotify?: ((message: string) => void) | undefined;
+    ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
     originalTr?: Transaction | undefined;
 }) => Command;
 export declare const stopKeyboardColumnResizing: ({ ariaNotify, getIntl, originalTr, }: {
-    ariaNotify?: ((message: string) => void) | undefined;
+    ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
     originalTr?: Transaction | undefined;
 }) => Command;