@atlaskit/editor-plugin-table 7.10.0 → 7.10.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 7.10.1
+
+### Patch Changes
+
+- [#92552](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92552) [`7cd874b858c8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7cd874b858c8) - Check target elements are actually HTMLElement rather than typecasting.
+
 ## 7.10.0
 
 ### Minor Changes

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

@@ -182,7 +182,13 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
     var map = _editorTables.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 ((0, _platformFeatureFlags.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');
     }

package/dist/cjs/nodeviews/TableRow.js

@@ -403,7 +403,7 @@ var TableRow = exports.default = /*#__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 = _consts.tableControlsSpacing;

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

@@ -63,13 +63,13 @@ var generateColgroup = exports.generateColgroup = function generateColgroup(tabl
 var insertColgroupFromNode = exports.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/cjs/pm-plugins/table-resizing/utils/misc.js

@@ -103,7 +103,7 @@ var getTableContainerElementWidth = exports.getTableContainerElementWidth = func
 var getTableScalingPercent = exports.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 - _consts.MAX_SCALING_PERCENT);

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

@@ -22,7 +22,7 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
     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) {
@@ -53,11 +53,13 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
 };
 var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
   var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
-  var resizingContainer = tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
+  var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(_types.TableCssClassName.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/cjs/pm-plugins/table-resizing/utils/resize-state.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils2 = require("../../../utils");
 var _colgroup = require("./colgroup");
 var _columnState = require("./column-state");
@@ -92,8 +93,8 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
 
 // updates Colgroup DOM node with new widths
 var updateColgroup = exports.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.
@@ -105,11 +106,11 @@ var updateColgroup = exports.updateColgroup = function updateColgroup(state, tab
       return column && !!column.width;
     }) // if width is 0, we dont want to apply that.
     .forEach(function (column, i) {
-      var fixedColWidth = (0, _colgroup.getColWidthFix)(column.width, columnsCount);
+      var fixedColWidth = (0, _colgroup.getColWidthFix)(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0);
       var scaledWidth = fixedColWidth * scalePercent;
       var finalWidth = Math.max(scaledWidth, _styles.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");
       }
     });
@@ -118,8 +119,8 @@ var updateColgroup = exports.updateColgroup = function updateColgroup(state, tab
       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((0, _colgroup.getColWidthFix)(column.width, columnsCount), "px");
+      if (cols !== null && cols !== void 0 && cols[i]) {
+        cols[i].style.width = "".concat((0, _colgroup.getColWidthFix)(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0), "px");
       }
     });
   }
@@ -319,7 +320,8 @@ var getNewResizeStateFromSelectedColumns = exports.getNewResizeStateFromSelected
     return;
   }
   var maybeTable = domAtPos(table.start).node;
-  var tableRef = maybeTable.closest('table');
+  var maybeTableElement = maybeTable instanceof HTMLElement ? maybeTable : null;
+  var tableRef = (0, _platformFeatureFlags.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/cjs/transforms/column-width.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _styles = require("@atlaskit/editor-common/styles");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
@@ -105,7 +106,8 @@ var rescaleColumns = exports.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 = (0, _platformFeatureFlags.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/cjs/ui/TableFloatingControls/RowControls/DragControls.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _commands = require("../../../commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
@@ -100,14 +101,26 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }
   }, [editorView, tableActive]);
   var handleMouseMove = (0, _react.useCallback)(function (e) {
-    var isParentDragControls = e.nativeEvent.target.closest(".".concat(_types.TableCssClassName.DRAG_ROW_CONTROLS));
-    var rowIndex = e.nativeEvent.target.getAttribute('data-start-index');
+    if ((0, _platformFeatureFlags.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(_types.TableCssClassName.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(_types.TableCssClassName.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 = (0, _react.useMemo)(function () {
     return [rowIndex];

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

@@ -177,7 +177,13 @@ export const changeColumnWidthByStep = ({
   const map = TableMap.get(originalTable);
   const domAtPos = view.domAtPos.bind(view);
   const colIndex = map.colCount($cell.pos - tableStartPosition) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
-  let dom = domAtPos(tableStartPosition).node;
+  let dom = null;
+  if (getBooleanFF('platform.editor.explicit-html-element-check')) {
+    const 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');
   }

package/dist/es2019/nodeviews/TableRow.js

@@ -369,7 +369,7 @@ export default class TableRow extends TableNodeView {
       wrapper
     } = tree;
     const tableContainer = wrapper.parentElement;
-    const tableContentWrapper = tableContainer.parentElement;
+    const tableContentWrapper = tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.parentElement;
     const layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
     if (isCurrentTableSelected) {
       this.colControlsOffset = tableControlsSpacing;

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

@@ -49,13 +49,13 @@ export const generateColgroup = (table, tableRef) => {
   return cols;
 };
 export const insertColgroupFromNode = (tableRef, table, isTableScalingEnabled = false, shouldRemove = true) => {
-  let colgroup = tableRef.querySelector('colgroup');
+  let colgroup = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelector('colgroup');
   if (colgroup && shouldRemove) {
-    tableRef.removeChild(colgroup);
+    tableRef === null || tableRef === void 0 ? 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 ? void 0 : tableRef.insertBefore(colgroup, tableRef === null || tableRef === void 0 ? void 0 : tableRef.firstChild);
   }
   return colgroup.children;
 };

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

@@ -93,7 +93,7 @@ export const getTableContainerElementWidth = table => {
 export const getTableScalingPercent = (table, tableRef) => {
   var _tableRef$parentEleme;
   const tableWidth = getTableContainerElementWidth(table);
-  let renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
+  let renderWidth = (tableRef === null || tableRef === void 0 ? 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
   let scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);

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

@@ -13,7 +13,7 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
     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.
     const tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    const tableContainerWidth = (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+    const tableContainerWidth = tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
     const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
     resizeAmount = amount * 2;
     if (isOverflowed) {
@@ -45,11 +45,13 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
 };
 const updateTable = (resizeAmount, tableRef, tableNode) => {
   const currentWidth = getTableContainerElementWidth(tableNode);
-  const resizingContainer = tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
+  const resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
   const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
   if (resizingContainer && resizingItem) {
     const newWidth = `${currentWidth + resizeAmount}px`;
-    tableRef.style.width = newWidth;
+    if (tableRef) {
+      tableRef.style.width = newWidth;
+    }
     resizingContainer.style.width = newWidth;
     resizingItem.style.width = newWidth;
   }

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/esm/commands/column-resize.js

@@ -176,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');
     }

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/types/pm-plugins/table-resizing/utils/colgroup.d.ts

@@ -10,7 +10,7 @@ type Col = Array<string | {
  */
 export declare const getColWidthFix: (colwidth: number, tableColumnCount: number) => number;
 export declare const generateColgroup: (table: PmNode, tableRef?: HTMLElement) => Col[];
-export declare const insertColgroupFromNode: (tableRef: HTMLTableElement, table: PmNode, isTableScalingEnabled?: boolean, shouldRemove?: boolean) => HTMLCollection;
+export declare const insertColgroupFromNode: (tableRef: HTMLTableElement | null, table: PmNode, isTableScalingEnabled?: boolean, shouldRemove?: boolean) => HTMLCollection;
 export declare const hasTableBeenResized: (table: PmNode) => boolean;
 /**
  * Check if a table has all the column width set to tableCellMinWidth(48px) or null

package/dist/types/pm-plugins/table-resizing/utils/misc.d.ts

@@ -24,5 +24,5 @@ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getE
  */
 export declare const getTableElementWidth: (table: PMNode) => number;
 export declare const getTableContainerElementWidth: (table: PMNode) => number;
-export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement) => number;
+export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement | null) => number;
 export {};

package/dist/types/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,3 +1,3 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
-export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean) => ResizeState;
+export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean) => ResizeState;

package/dist/types/pm-plugins/table-resizing/utils/resize-state.d.ts

@@ -7,7 +7,7 @@ export declare const getResizeState: ({ minWidth, maxSize, table, tableRef, star
     minWidth: number;
     maxSize: number;
     table: PMNode;
-    tableRef: HTMLTableElement;
+    tableRef: HTMLTableElement | null;
     start: number;
     domAtPos: (pos: number) => {
         node: Node;
@@ -15,7 +15,7 @@ export declare const getResizeState: ({ minWidth, maxSize, table, tableRef, star
     };
     isTableScalingEnabled: boolean;
 }) => ResizeState;
-export declare const updateColgroup: (state: ResizeState, tableRef: HTMLElement, tableNode?: PMNode, isTableScalingEnabled?: boolean) => void;
+export declare const updateColgroup: (state: ResizeState, tableRef: HTMLElement | null, tableNode?: PMNode, isTableScalingEnabled?: boolean) => void;
 export declare const getTotalWidth: ({ cols }: ResizeState) => number;
 export declare const adjustColumnsWidths: (resizeState: ResizeState, maxSize: number) => ResizeState;
 export declare const evenAllColumnsWidths: (resizeState: ResizeState) => ResizeState;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/colgroup.d.ts

@@ -10,7 +10,7 @@ type Col = Array<string | {
  */
 export declare const getColWidthFix: (colwidth: number, tableColumnCount: number) => number;
 export declare const generateColgroup: (table: PmNode, tableRef?: HTMLElement) => Col[];
-export declare const insertColgroupFromNode: (tableRef: HTMLTableElement, table: PmNode, isTableScalingEnabled?: boolean, shouldRemove?: boolean) => HTMLCollection;
+export declare const insertColgroupFromNode: (tableRef: HTMLTableElement | null, table: PmNode, isTableScalingEnabled?: boolean, shouldRemove?: boolean) => HTMLCollection;
 export declare const hasTableBeenResized: (table: PmNode) => boolean;
 /**
  * Check if a table has all the column width set to tableCellMinWidth(48px) or null

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/misc.d.ts

@@ -24,5 +24,5 @@ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getE
  */
 export declare const getTableElementWidth: (table: PMNode) => number;
 export declare const getTableContainerElementWidth: (table: PMNode) => number;
-export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement) => number;
+export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement | null) => number;
 export {};

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,3 +1,3 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
-export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean) => ResizeState;
+export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean) => ResizeState;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-state.d.ts

@@ -7,7 +7,7 @@ export declare const getResizeState: ({ minWidth, maxSize, table, tableRef, star
     minWidth: number;
     maxSize: number;
     table: PMNode;
-    tableRef: HTMLTableElement;
+    tableRef: HTMLTableElement | null;
     start: number;
     domAtPos: (pos: number) => {
         node: Node;
@@ -15,7 +15,7 @@ export declare const getResizeState: ({ minWidth, maxSize, table, tableRef, star
     };
     isTableScalingEnabled: boolean;
 }) => ResizeState;
-export declare const updateColgroup: (state: ResizeState, tableRef: HTMLElement, tableNode?: PMNode, isTableScalingEnabled?: boolean) => void;
+export declare const updateColgroup: (state: ResizeState, tableRef: HTMLElement | null, tableNode?: PMNode, isTableScalingEnabled?: boolean) => void;
 export declare const getTotalWidth: ({ cols }: ResizeState) => number;
 export declare const adjustColumnsWidths: (resizeState: ResizeState, maxSize: number) => ResizeState;
 export declare const evenAllColumnsWidths: (resizeState: ResizeState) => ResizeState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.10.0",
+  "version": "7.10.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -147,6 +147,9 @@
     },
     "platform.editor.table.colum-resizing-improvements": {
       "type": "boolean"
+    },
+    "platform.editor.explicit-html-element-check": {
+      "type": "boolean"
     }
   }
 }

package/src/commands/column-resize.ts

@@ -319,11 +319,19 @@ export const changeColumnWidthByStep =
       ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) -
       1;
 
-    let dom: HTMLTableElement = domAtPos(tableStartPosition)
-      .node as HTMLTableElement;
+    let dom: HTMLTableElement | null = null;
+    if (getBooleanFF('platform.editor.explicit-html-element-check')) {
+      const domAtPosition = domAtPos(tableStartPosition);
+      dom =
+        domAtPosition.node instanceof HTMLTableElement
+          ? domAtPosition.node
+          : null;
+    } else {
+      dom = domAtPos(tableStartPosition).node as HTMLTableElement;
+    }
 
     if (dom && dom.nodeName !== 'TABLE') {
-      dom = dom.closest('table') as HTMLTableElement;
+      dom = dom.closest('table');
     }
 
     const cellAttrs = cell?.node.attrs;

package/src/nodeviews/TableRow.ts

@@ -494,8 +494,8 @@ export default class TableRow
 
     const { wrapper } = tree;
 
-    const tableContainer = wrapper.parentElement!;
-    const tableContentWrapper = tableContainer.parentElement;
+    const tableContainer = wrapper.parentElement;
+    const tableContentWrapper = tableContainer?.parentElement;
 
     const layoutContainer =
       tableContentWrapper && tableContentWrapper.parentElement;

package/src/pm-plugins/table-resizing/utils/colgroup.ts

@@ -69,22 +69,22 @@ export const generateColgroup = (table: PmNode, tableRef?: HTMLElement) => {
 };
 
 export const insertColgroupFromNode = (
-  tableRef: HTMLTableElement,
+  tableRef: HTMLTableElement | null,
   table: PmNode,
   isTableScalingEnabled = false,
   shouldRemove = true,
 ): HTMLCollection => {
-  let colgroup = tableRef.querySelector('colgroup') as HTMLElement;
+  let colgroup = tableRef?.querySelector('colgroup') as HTMLElement;
   if (colgroup && shouldRemove) {
-    tableRef.removeChild(colgroup);
+    tableRef?.removeChild(colgroup);
   }
 
   colgroup = renderColgroupFromNode(
     table,
-    isTableScalingEnabled ? tableRef : undefined,
+    isTableScalingEnabled ? tableRef ?? undefined : undefined,
   );
   if (shouldRemove) {
-    tableRef.insertBefore(colgroup, tableRef.firstChild);
+    tableRef?.insertBefore(colgroup, tableRef?.firstChild);
   }
 
   return colgroup.children;

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -158,10 +158,10 @@ export const getTableContainerElementWidth = (table: PMNode) => {
 
 export const getTableScalingPercent = (
   table: PMNode,
-  tableRef: HTMLElement,
+  tableRef: HTMLElement | null,
 ) => {
   const tableWidth = getTableContainerElementWidth(table);
-  let renderWidth = tableRef.parentElement?.clientWidth || tableWidth;
+  let renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
   // minus 1 here to avoid any 1px scroll in Firefox
   let scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -13,7 +13,7 @@ export const resizeColumn = (
   resizeState: ResizeState,
   colIndex: number,
   amount: number,
-  tableRef: HTMLElement,
+  tableRef: HTMLElement | null,
   tableNode: PmNode,
   selectedColumns?: number[],
   isTableScalingEnabled = false,
@@ -25,7 +25,7 @@ export const resizeColumn = (
   if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
     // 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.
     const tableWidth = tableRef?.clientWidth;
-    const tableContainerWidth = tableRef.closest('.resizer-item')?.clientWidth;
+    const tableContainerWidth = tableRef?.closest('.resizer-item')?.clientWidth;
 
     const isOverflowed = !!(
       tableWidth &&
@@ -92,18 +92,20 @@ export const resizeColumn = (
 
 const updateTable = (
   resizeAmount: number,
-  tableRef: HTMLElement,
+  tableRef: HTMLElement | null,
   tableNode: PmNode,
 ) => {
   const currentWidth = getTableContainerElementWidth(tableNode);
-  const resizingContainer = tableRef.closest(
+  const resizingContainer = tableRef?.closest(
     `.${ClassName.TABLE_RESIZER_CONTAINER}`,
   );
   const resizingItem = resizingContainer?.querySelector('.resizer-item');
 
   if (resizingContainer && resizingItem) {
     const newWidth = `${currentWidth + resizeAmount}px`;
-    tableRef.style.width = newWidth;
+    if (tableRef) {
+      tableRef.style.width = newWidth;
+    }
     (resizingContainer as HTMLElement).style.width = newWidth;
     (resizingItem as HTMLElement).style.width = newWidth;
   }

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -8,6 +8,7 @@ import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getSelectedTableInfo } from '../../../utils';
 
@@ -34,7 +35,7 @@ export const getResizeState = ({
   minWidth: number;
   maxSize: number;
   table: PMNode;
-  tableRef: HTMLTableElement;
+  tableRef: HTMLTableElement | null;
   start: number;
   domAtPos: (pos: number) => { node: Node; offset: number };
   isTableScalingEnabled: boolean;
@@ -107,12 +108,12 @@ export const getResizeState = ({
 // updates Colgroup DOM node with new widths
 export const updateColgroup = (
   state: ResizeState,
-  tableRef: HTMLElement,
+  tableRef: HTMLElement | null,
   tableNode?: PMNode,
   isTableScalingEnabled?: boolean,
 ): void => {
-  const cols = tableRef.querySelectorAll('col');
-  const columnsCount = cols.length;
+  const cols = tableRef?.querySelectorAll('col');
+  const columnsCount = 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.
@@ -123,11 +124,11 @@ export const updateColgroup = (
     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 ?? 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?.[i]) {
           cols[i].style.width = `${finalWidth}px`;
         }
       });
@@ -135,10 +136,10 @@ export const updateColgroup = (
     state.cols
       .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
       .forEach((column, i) => {
-        if (cols[i]) {
+        if (cols?.[i]) {
           cols[i].style.width = `${getColWidthFix(
             column.width,
-            columnsCount,
+            columnsCount ?? 0,
           )}px`;
         }
       });
@@ -361,8 +362,13 @@ export const getNewResizeStateFromSelectedColumns = (
     return;
   }
 
-  const maybeTable = domAtPos(table.start).node as HTMLElement;
-  const tableRef = maybeTable.closest('table');
+  const maybeTable = domAtPos(table.start).node;
+
+  const maybeTableElement =
+    maybeTable instanceof HTMLElement ? maybeTable : null;
+  const tableRef = getBooleanFF('platform.editor.explicit-html-element-check')
+    ? maybeTableElement?.closest('table')
+    : (maybeTable as HTMLElement)?.closest('table');
 
   if (!tableRef) {
     return;

package/src/transforms/column-width.ts

@@ -6,6 +6,7 @@ import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { ResizeState } from '../pm-plugins/table-resizing/utils';
 import {
@@ -119,8 +120,15 @@ export const rescaleColumns =
 
     const newTable = tr.doc.nodeAt(table.pos);
     const domAtPos = view.domAtPos.bind(view);
-    const maybeTable = domAtPos(table.start).node as HTMLElement;
-    const tableRef = maybeTable.closest('table');
+    const maybeTable = domAtPos(table.start).node;
+    const maybeTableElement = getBooleanFF(
+      'platform.editor.explicit-html-element-check',
+    )
+      ? maybeTable instanceof HTMLElement
+        ? maybeTable
+        : null
+      : (maybeTable as HTMLElement | null);
+    const tableRef = maybeTableElement?.closest('table');
 
     if (!tableRef || !newTable) {
       return tr;

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -16,6 +16,7 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 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 { token } from '@atlaskit/tokens';
 
@@ -142,19 +143,35 @@ const DragControlsComponent = ({
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
-      const isParentDragControls = (e.nativeEvent.target as Element).closest(
-        `.${ClassName.DRAG_ROW_CONTROLS}`,
-      );
-      const rowIndex = (e.nativeEvent.target as Element).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?.closest(
+          `.${ClassName.DRAG_ROW_CONTROLS}`,
+        );
+        const rowIndex = 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));
+        updateCellHoverLocation(Number(rowIndex));
+      } else {
+        const isParentDragControls = (e.nativeEvent.target as Element).closest(
+          `.${ClassName.DRAG_ROW_CONTROLS}`,
+        );
+        const rowIndex = (e.nativeEvent.target as Element).getAttribute(
+          'data-start-index',
+        );
+
+        // avoid updating if event target is not related
+        if (!isParentDragControls || !rowIndex) {
+          return;
+        }
+
+        updateCellHoverLocation(Number(rowIndex));
+      }
     },
     [updateCellHoverLocation],
   );