@atlaskit/editor-plugin-table 2.10.2 → 2.10.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 2.10.4
+
+### Patch Changes
+
+- [`eefbc3c6065`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eefbc3c6065) - [ED-19510] Applies performance tweaks for table
+
+## 2.10.3
+
+### Patch Changes
+
+- [`d6e4badd8c4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6e4badd8c4) - Add explicit height to table when resizing width to increase performance
+
 ## 2.10.2
 
 ### Patch Changes

package/dist/cjs/plugins/table/nodeviews/TableContainer.js

@@ -55,6 +55,23 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   var containerRef = (0, _react.useRef)(null);
   var marginLeftRef = (0, _react.useRef)(0);
   var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
+  var updateContainerHeight = (0, _react.useCallback)(function (height) {
+    var _containerRef$current;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('height', typeof height === 'number' ? "".concat(height + 29, "px") : 'auto');
+  }, []);
+  var resizeObserverRef = (0, _react.useRef)(new ResizeObserver(function (entries) {
+    updateContainerHeight(entries[entries.length - 1].contentRect.height);
+  }));
+  var onResizeStart = (0, _react.useCallback)(function () {
+    updateContainerHeight(tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight);
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef, updateContainerHeight]);
+  var onResizeStop = (0, _react.useCallback)(function () {
+    updateContainerHeight('auto');
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
   var updateWidth = (0, _react.useCallback)(function (width) {
     if (!containerRef.current) {
       return;
@@ -102,6 +119,8 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, {
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop,
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -33,6 +33,10 @@ var tableHandlePosition = 14;
 var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
+  if (!tableHeight) {
+    return handleHeightSize;
+  }
+
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -41,9 +45,9 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight && tableHeight > 46 && tableHeight < 96) {
+  if (tableHeight > 46 && tableHeight < 96) {
     handleHeightSize = 'medium';
-  } else if (tableHeight && tableHeight >= 96) {
+  } else if (tableHeight >= 96) {
     handleHeightSize = 'large';
   }
   return handleHeightSize;
@@ -74,6 +78,8 @@ var TableResizer = function TableResizer(_ref) {
     maxWidth = _ref.maxWidth,
     containerWidth = _ref.containerWidth,
     updateWidth = _ref.updateWidth,
+    onResizeStop = _ref.onResizeStop,
+    onResizeStart = _ref.onResizeStart,
     editorView = _ref.editorView,
     getPos = _ref.getPos,
     node = _ref.node,
@@ -116,7 +122,8 @@ var TableResizer = function TableResizer(_ref) {
     }));
     var visibleGuidelines = getVisibleGuidelines(_guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGuideline, containerWidth, editorView, startMeasure]);
+    onResizeStart();
+  }, [displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -181,8 +188,9 @@ var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
+    onResizeStop();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   var handleComponent = (0, _react.useMemo)(function () {
     return {
       left: /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/plugins/table/pm-plugins/main.js

@@ -13,6 +13,7 @@ var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
 var _misc = require("../commands/misc");
 var _eventHandlers = require("../event-handlers");
@@ -132,8 +133,12 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
           if (pluginState.tableRef !== tableRef) {
             (0, _commands.setTableRef)(tableRef)(state, dispatch);
           }
-          if (pluginState.tableNode !== tableNode) {
-            (0, _utils4.updateResizeHandles)(tableRef);
+
+          // Removes updateResizeHandles
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-remove-update-resize-handles_djvab')) {} else {
+            if (pluginState.tableNode !== tableNode) {
+              (0, _utils4.updateResizeHandles)(tableRef);
+            }
           }
           if (pluginState.editorHasFocus && pluginState.tableRef) {
             var _ref = state.selection,

package/dist/cjs/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -140,7 +140,10 @@ var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom);
     (0, _utils3.updateControls)()(state);
-    (0, _utils2.updateResizeHandles)(dom);
+    // Remove updateResizeHandles
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-remove-update-resize-handles_djvab')) {} else {
+      (0, _utils2.updateResizeHandles)(dom);
+    }
   }
   window.addEventListener('mouseup', finish);
   window.addEventListener('mousemove', move);

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

@@ -93,6 +93,7 @@ var TableCssClassName = _objectSpread(_objectSpread({}, _styles.TableSharedCssCl
   RESIZING_PLUGIN: "".concat(_adfSchema.tablePrefixSelector, "-resizing-plugin"),
   RESIZE_CURSOR: "".concat(_adfSchema.tablePrefixSelector, "-resize-cursor"),
   IS_RESIZING: "".concat(_adfSchema.tablePrefixSelector, "-is-resizing"),
+  // Resize handle is going to be removed together with updateResizeHandles - table's utility function
   RESIZE_HANDLE: "".concat(_adfSchema.tablePrefixSelector, "-resize-handle"),
   RESIZE_HANDLE_DECORATION: "".concat(_adfSchema.tablePrefixSelector, "-resize-decoration"),
   CONTEXTUAL_SUBMENU: "".concat(_adfSchema.tablePrefixSelector, "-contextual-submenu"),

package/dist/cjs/plugins/table/utils/dom.js

@@ -135,17 +135,20 @@ var getMousePositionVerticalRelativeByElement = function getMousePositionVertica
   }
   return null;
 };
+
+// This function is deprecated
 exports.getMousePositionVerticalRelativeByElement = getMousePositionVerticalRelativeByElement;
 var updateResizeHandles = function updateResizeHandles(tableRef) {
   if (!tableRef) {
     return;
   }
-  var height = tableRef.offsetHeight + _consts.tableToolbarSize;
+
   // see ED-7600
   var nodes = Array.from(tableRef.querySelectorAll(".".concat(_types.TableCssClassName.RESIZE_HANDLE)));
   if (!nodes || !nodes.length) {
     return;
   }
+  var height = tableRef.offsetHeight + _consts.tableToolbarSize;
   nodes.forEach(function (node) {
     node.style.height = "".concat(height, "px");
   });

package/dist/es2019/plugins/table/nodeviews/TableContainer.js

@@ -46,6 +46,23 @@ export const ResizableTableContainer = ({
   const containerRef = useRef(null);
   const marginLeftRef = useRef(0);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  const updateContainerHeight = useCallback(height => {
+    var _containerRef$current;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('height', typeof height === 'number' ? `${height + 29}px` : 'auto');
+  }, []);
+  const resizeObserverRef = useRef(new ResizeObserver(entries => {
+    updateContainerHeight(entries[entries.length - 1].contentRect.height);
+  }));
+  const onResizeStart = useCallback(() => {
+    updateContainerHeight(tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight);
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef, updateContainerHeight]);
+  const onResizeStop = useCallback(() => {
+    updateContainerHeight('auto');
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
   const updateWidth = useCallback(width => {
     if (!containerRef.current) {
       return;
@@ -93,6 +110,8 @@ export const ResizableTableContainer = ({
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
   }, /*#__PURE__*/React.createElement(TableResizer, {
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop,
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -19,6 +19,10 @@ const tableHandlePosition = 14;
 const getResizerHandleHeight = tableRef => {
   const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   let handleHeightSize = 'small';
+  if (!tableHeight) {
+    return handleHeightSize;
+  }
+
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -27,9 +31,9 @@ const getResizerHandleHeight = tableRef => {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight && tableHeight > 46 && tableHeight < 96) {
+  if (tableHeight > 46 && tableHeight < 96) {
     handleHeightSize = 'medium';
-  } else if (tableHeight && tableHeight >= 96) {
+  } else if (tableHeight >= 96) {
     handleHeightSize = 'large';
   }
   return handleHeightSize;
@@ -59,6 +63,8 @@ export const TableResizer = ({
   maxWidth,
   containerWidth,
   updateWidth,
+  onResizeStop,
+  onResizeStart,
   editorView,
   getPos,
   node,
@@ -105,7 +111,8 @@ export const TableResizer = ({
     }));
     const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGuideline, containerWidth, editorView, startMeasure]);
+    onResizeStart();
+  }, [displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
   const handleResize = useCallback((originalState, delta) => {
     countFrames();
     const newWidth = originalState.width + delta.width;
@@ -171,8 +178,9 @@ export const TableResizer = ({
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
+    onResizeStop();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   const handleComponent = useMemo(() => ({
     left: /*#__PURE__*/React.createElement("div", {
       className: resizerHandleShadowClassName,

package/dist/es2019/plugins/table/pm-plugins/main.js

@@ -5,6 +5,7 @@ import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenEx
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus } from '../event-handlers';
@@ -117,8 +118,12 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           if (pluginState.tableRef !== tableRef) {
             setTableRef(tableRef)(state, dispatch);
           }
-          if (pluginState.tableNode !== tableNode) {
-            updateResizeHandles(tableRef);
+
+          // Removes updateResizeHandles
+          if (getBooleanFF('platform.editor.table-remove-update-resize-handles_djvab')) {} else {
+            if (pluginState.tableNode !== tableNode) {
+              updateResizeHandles(tableRef);
+            }
           }
           if (pluginState.editorHasFocus && pluginState.tableRef) {
             const {

package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -150,7 +150,10 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
     updateControls()(state);
-    updateResizeHandles(dom);
+    // Remove updateResizeHandles
+    if (getBooleanFF('platform.editor.table-remove-update-resize-handles_djvab')) {} else {
+      updateResizeHandles(dom);
+    }
   }
   window.addEventListener('mouseup', finish);
   window.addEventListener('mousemove', move);

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

@@ -83,6 +83,7 @@ export const TableCssClassName = {
   RESIZING_PLUGIN: `${tablePrefixSelector}-resizing-plugin`,
   RESIZE_CURSOR: `${tablePrefixSelector}-resize-cursor`,
   IS_RESIZING: `${tablePrefixSelector}-is-resizing`,
+  // Resize handle is going to be removed together with updateResizeHandles - table's utility function
   RESIZE_HANDLE: `${tablePrefixSelector}-resize-handle`,
   RESIZE_HANDLE_DECORATION: `${tablePrefixSelector}-resize-decoration`,
   CONTEXTUAL_SUBMENU: `${tablePrefixSelector}-contextual-submenu`,

package/dist/es2019/plugins/table/utils/dom.js

@@ -104,16 +104,19 @@ export const getMousePositionVerticalRelativeByElement = mouseEvent => {
   }
   return null;
 };
+
+// This function is deprecated
 export const updateResizeHandles = tableRef => {
   if (!tableRef) {
     return;
   }
-  const height = tableRef.offsetHeight + tableToolbarSize;
+
   // see ED-7600
   const nodes = Array.from(tableRef.querySelectorAll(`.${ClassName.RESIZE_HANDLE}`));
   if (!nodes || !nodes.length) {
     return;
   }
+  const height = tableRef.offsetHeight + tableToolbarSize;
   nodes.forEach(node => {
     node.style.height = `${height}px`;
   });

package/dist/esm/plugins/table/nodeviews/TableContainer.js

@@ -44,6 +44,23 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   var containerRef = useRef(null);
   var marginLeftRef = useRef(0);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  var updateContainerHeight = useCallback(function (height) {
+    var _containerRef$current;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('height', typeof height === 'number' ? "".concat(height + 29, "px") : 'auto');
+  }, []);
+  var resizeObserverRef = useRef(new ResizeObserver(function (entries) {
+    updateContainerHeight(entries[entries.length - 1].contentRect.height);
+  }));
+  var onResizeStart = useCallback(function () {
+    updateContainerHeight(tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight);
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef, updateContainerHeight]);
+  var onResizeStop = useCallback(function () {
+    updateContainerHeight('auto');
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
   var updateWidth = useCallback(function (width) {
     if (!containerRef.current) {
       return;
@@ -91,6 +108,8 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
   }, /*#__PURE__*/React.createElement(TableResizer, {
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop,
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -23,6 +23,10 @@ var tableHandlePosition = 14;
 var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
+  if (!tableHeight) {
+    return handleHeightSize;
+  }
+
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -31,9 +35,9 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight && tableHeight > 46 && tableHeight < 96) {
+  if (tableHeight > 46 && tableHeight < 96) {
     handleHeightSize = 'medium';
-  } else if (tableHeight && tableHeight >= 96) {
+  } else if (tableHeight >= 96) {
     handleHeightSize = 'large';
   }
   return handleHeightSize;
@@ -64,6 +68,8 @@ export var TableResizer = function TableResizer(_ref) {
     maxWidth = _ref.maxWidth,
     containerWidth = _ref.containerWidth,
     updateWidth = _ref.updateWidth,
+    onResizeStop = _ref.onResizeStop,
+    onResizeStart = _ref.onResizeStart,
     editorView = _ref.editorView,
     getPos = _ref.getPos,
     node = _ref.node,
@@ -106,7 +112,8 @@ export var TableResizer = function TableResizer(_ref) {
     }));
     var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGuideline, containerWidth, editorView, startMeasure]);
+    onResizeStart();
+  }, [displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
   var handleResize = useCallback(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -171,8 +178,9 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
+    onResizeStop();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   var handleComponent = useMemo(function () {
     return {
       left: /*#__PURE__*/React.createElement("div", {

package/dist/esm/plugins/table/pm-plugins/main.js

@@ -8,6 +8,7 @@ import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenEx
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus } from '../event-handlers';
@@ -125,8 +126,12 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
           if (pluginState.tableRef !== tableRef) {
             setTableRef(tableRef)(state, dispatch);
           }
-          if (pluginState.tableNode !== tableNode) {
-            updateResizeHandles(tableRef);
+
+          // Removes updateResizeHandles
+          if (getBooleanFF('platform.editor.table-remove-update-resize-handles_djvab')) {} else {
+            if (pluginState.tableNode !== tableNode) {
+              updateResizeHandles(tableRef);
+            }
           }
           if (pluginState.editorHasFocus && pluginState.tableRef) {
             var _ref = state.selection,

package/dist/esm/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -134,7 +134,10 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
     updateControls()(state);
-    updateResizeHandles(dom);
+    // Remove updateResizeHandles
+    if (getBooleanFF('platform.editor.table-remove-update-resize-handles_djvab')) {} else {
+      updateResizeHandles(dom);
+    }
   }
   window.addEventListener('mouseup', finish);
   window.addEventListener('mousemove', move);

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

@@ -85,6 +85,7 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   RESIZING_PLUGIN: "".concat(tablePrefixSelector, "-resizing-plugin"),
   RESIZE_CURSOR: "".concat(tablePrefixSelector, "-resize-cursor"),
   IS_RESIZING: "".concat(tablePrefixSelector, "-is-resizing"),
+  // Resize handle is going to be removed together with updateResizeHandles - table's utility function
   RESIZE_HANDLE: "".concat(tablePrefixSelector, "-resize-handle"),
   RESIZE_HANDLE_DECORATION: "".concat(tablePrefixSelector, "-resize-decoration"),
   CONTEXTUAL_SUBMENU: "".concat(tablePrefixSelector, "-contextual-submenu"),

package/dist/esm/plugins/table/utils/dom.js

@@ -120,16 +120,19 @@ export var getMousePositionVerticalRelativeByElement = function getMousePosition
   }
   return null;
 };
+
+// This function is deprecated
 export var updateResizeHandles = function updateResizeHandles(tableRef) {
   if (!tableRef) {
     return;
   }
-  var height = tableRef.offsetHeight + tableToolbarSize;
+
   // see ED-7600
   var nodes = Array.from(tableRef.querySelectorAll(".".concat(ClassName.RESIZE_HANDLE)));
   if (!nodes || !nodes.length) {
     return;
   }
+  var height = tableRef.offsetHeight + tableToolbarSize;
   nodes.forEach(function (node) {
     node.style.height = "".concat(height, "px");
   });

package/dist/types/plugins/table/nodeviews/TableResizer.d.ts

@@ -9,6 +9,8 @@ interface TableResizerProps {
     maxWidth: number;
     containerWidth: number;
     updateWidth: (width: number) => void;
+    onResizeStop: () => void;
+    onResizeStart: () => void;
     editorView: EditorView;
     getPos: () => number | undefined;
     node: PMNode;
@@ -16,5 +18,5 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

package/dist/types/plugins/table/pm-plugins/main.d.ts

@@ -3,5 +3,5 @@ import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-di
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { PluginConfig, PluginInjectionAPI } from '../types';
+import type { PluginConfig, PluginInjectionAPI } from '../types';
 export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, breakoutEnabled?: boolean, fullWidthModeEnabled?: boolean, tableResizingEnabled?: boolean, previousFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI) => SafePlugin<import("../types").TablePluginState>;

package/dist/types/plugins/table/ui/common-styles.d.ts

@@ -1,5 +1,5 @@
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import { ThemeProps } from '@atlaskit/theme/types';
+import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const insertColumnButtonOffset: number;
 export declare const tableStyles: (props: ThemeProps & {
     featureFlags?: FeatureFlags;

package/dist/types/plugins/table/utils/dom.d.ts

@@ -1,4 +1,4 @@
-import { ElementContentRects } from '../types';
+import type { ElementContentRects } from '../types';
 export declare const isCell: (node: HTMLElement | null) => boolean;
 export declare const isCornerButton: (node: HTMLElement | null) => boolean;
 export declare const isInsertRowButton: (node: HTMLElement | null) => boolean | HTMLElement | null;

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

@@ -9,6 +9,8 @@ interface TableResizerProps {
     maxWidth: number;
     containerWidth: number;
     updateWidth: (width: number) => void;
+    onResizeStop: () => void;
+    onResizeStart: () => void;
     editorView: EditorView;
     getPos: () => number | undefined;
     node: PMNode;
@@ -16,5 +18,5 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

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

@@ -3,5 +3,5 @@ import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-di
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { PluginConfig, PluginInjectionAPI } from '../types';
+import type { PluginConfig, PluginInjectionAPI } from '../types';
 export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, breakoutEnabled?: boolean, fullWidthModeEnabled?: boolean, tableResizingEnabled?: boolean, previousFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI) => SafePlugin<import("../types").TablePluginState>;

package/dist/types-ts4.5/plugins/table/ui/common-styles.d.ts

@@ -1,5 +1,5 @@
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import { ThemeProps } from '@atlaskit/theme/types';
+import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const insertColumnButtonOffset: number;
 export declare const tableStyles: (props: ThemeProps & {
     featureFlags?: FeatureFlags;

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

@@ -1,4 +1,4 @@
-import { ElementContentRects } from '../types';
+import type { ElementContentRects } from '../types';
 export declare const isCell: (node: HTMLElement | null) => boolean;
 export declare const isCornerButton: (node: HTMLElement | null) => boolean;
 export declare const isInsertRowButton: (node: HTMLElement | null) => boolean | HTMLElement | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^28.1.0",
-    "@atlaskit/editor-common": "^74.49.0",
+    "@atlaskit/editor-common": "^74.50.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.8",
@@ -105,6 +105,9 @@
     },
     "platform.editor.update-table-cell-width-via-step": {
       "type": "boolean"
+    },
+    "platform.editor.table-remove-update-resize-handles_djvab": {
+      "type": "boolean"
     }
   }
 }

package/src/plugins/table/nodeviews/TableContainer.tsx

@@ -89,6 +89,33 @@ export const ResizableTableContainer = ({
   const marginLeftRef = useRef<number | undefined>(0);
   const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
 
+  const updateContainerHeight = useCallback((height: number | 'auto') => {
+    containerRef.current?.style.setProperty(
+      'height',
+      typeof height === 'number' ? `${height + 29}px` : 'auto',
+    );
+  }, []);
+
+  const resizeObserverRef = useRef(
+    new ResizeObserver((entries) => {
+      updateContainerHeight(entries[entries.length - 1].contentRect.height);
+    }),
+  );
+
+  const onResizeStart = useCallback(() => {
+    updateContainerHeight(tableRef?.clientHeight);
+
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef, updateContainerHeight]);
+
+  const onResizeStop = useCallback(() => {
+    updateContainerHeight('auto');
+
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
+
   const updateWidth = useCallback(
     (width: number) => {
       if (!containerRef.current) {
@@ -157,6 +184,8 @@ export const ResizableTableContainer = ({
       ref={containerRef}
     >
       <TableResizer
+        onResizeStart={onResizeStart}
+        onResizeStop={onResizeStop}
         width={width}
         maxWidth={maxResizerWidth}
         containerWidth={containerWidth}

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -43,6 +43,8 @@ interface TableResizerProps {
   maxWidth: number;
   containerWidth: number;
   updateWidth: (width: number) => void;
+  onResizeStop: () => void;
+  onResizeStart: () => void;
   editorView: EditorView;
   getPos: () => number | undefined;
   node: PMNode;
@@ -57,9 +59,14 @@ const handles = { right: true };
 const tableHandleMarginTop = 12;
 const tableHandlePosition = 14;
 
-const getResizerHandleHeight = (tableRef: HTMLTableElement) => {
+const getResizerHandleHeight = (tableRef: HTMLTableElement | undefined) => {
   const tableHeight = tableRef?.clientHeight;
   let handleHeightSize: HandleHeightSizeType | undefined = 'small';
+
+  if (!tableHeight) {
+    return handleHeightSize;
+  }
+
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -69,9 +76,9 @@ const getResizerHandleHeight = (tableRef: HTMLTableElement) => {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight && tableHeight > 46 && tableHeight < 96) {
+  if (tableHeight > 46 && tableHeight < 96) {
     handleHeightSize = 'medium';
-  } else if (tableHeight && tableHeight >= 96) {
+  } else if (tableHeight >= 96) {
     handleHeightSize = 'large';
   }
 
@@ -115,6 +122,8 @@ export const TableResizer = ({
   maxWidth,
   containerWidth,
   updateWidth,
+  onResizeStop,
+  onResizeStart,
   editorView,
   getPos,
   node,
@@ -177,7 +186,15 @@ export const TableResizer = ({
       containerWidth,
     );
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGuideline, containerWidth, editorView, startMeasure]);
+
+    onResizeStart();
+  }, [
+    displayGuideline,
+    editorView,
+    startMeasure,
+    onResizeStart,
+    containerWidth,
+  ]);
 
   const handleResize = useCallback(
     (originalState, delta) => {
@@ -281,6 +298,8 @@ export const TableResizer = ({
       updateWidth(newWidth);
       scheduleResize.cancel();
 
+      onResizeStop();
+
       return newWidth;
     },
     [
@@ -293,6 +312,7 @@ export const TableResizer = ({
       displayGuideline,
       attachAnalyticsEvent,
       endMeasure,
+      onResizeStop,
     ],
   );
 

package/src/plugins/table/pm-plugins/main.ts

@@ -26,8 +26,8 @@ import type {
   getPosHandler,
 } from '@atlaskit/editor-common/types';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
-import { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
-import {
+import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
+import type {
   EditorState,
   TextSelection,
   Transaction,
@@ -36,8 +36,9 @@ import {
   findParentDomRefOfType,
   findParentNodeOfType,
 } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   addBoldInEmptyHeaderCells,
@@ -66,13 +67,13 @@ import { createTableView } from '../nodeviews/table';
 import TableCellNodeView from '../nodeviews/tableCell';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { fixTables, replaceSelectedTable } from '../transforms';
-import {
-  TableCssClassName as ClassName,
+import type {
   ElementContentRects,
   InvalidNodeAttr,
   PluginConfig,
   PluginInjectionAPI,
 } from '../types';
+import { TableCssClassName as ClassName } from '../types';
 import {
   findControlsHoverDecoration,
   transformSliceToCorrectEmptyTableCells,
@@ -230,8 +231,16 @@ export const createPlugin = (
             setTableRef(tableRef)(state, dispatch);
           }
 
-          if (pluginState.tableNode !== tableNode) {
-            updateResizeHandles(tableRef);
+          // Removes updateResizeHandles
+          if (
+            getBooleanFF(
+              'platform.editor.table-remove-update-resize-handles_djvab',
+            )
+          ) {
+          } else {
+            if (pluginState.tableNode !== tableNode) {
+              updateResizeHandles(tableRef);
+            }
           }
 
           if (pluginState.editorHasFocus && pluginState.tableRef) {

package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts

@@ -215,7 +215,13 @@ export const handleMouseDown = (
     resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
 
     updateControls()(state);
-    updateResizeHandles(dom);
+    // Remove updateResizeHandles
+    if (
+      getBooleanFF('platform.editor.table-remove-update-resize-handles_djvab')
+    ) {
+    } else {
+      updateResizeHandles(dom);
+    }
   }
 
   window.addEventListener('mouseup', finish);

package/src/plugins/table/types.ts

@@ -282,6 +282,7 @@ export const TableCssClassName = {
   RESIZE_CURSOR: `${tablePrefixSelector}-resize-cursor`,
   IS_RESIZING: `${tablePrefixSelector}-is-resizing`,
 
+  // Resize handle is going to be removed together with updateResizeHandles - table's utility function
   RESIZE_HANDLE: `${tablePrefixSelector}-resize-handle`,
   RESIZE_HANDLE_DECORATION: `${tablePrefixSelector}-resize-decoration`,
 

package/src/plugins/table/ui/common-styles.ts

@@ -21,7 +21,7 @@ import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
-import { ThemeProps } from '@atlaskit/theme/types';
+import type { ThemeProps } from '@atlaskit/theme/types';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../types';

package/src/plugins/table/utils/dom.ts

@@ -3,7 +3,8 @@ import {
   containsClassName,
 } from '@atlaskit/editor-common/utils';
 
-import { TableCssClassName as ClassName, ElementContentRects } from '../types';
+import { TableCssClassName as ClassName } from '../types';
+import type { ElementContentRects } from '../types';
 import { tableToolbarSize } from '../ui/consts';
 
 const SELECTOR_TABLE_LEAFS = `.${ClassName.TABLE_CELL}, .${ClassName.TABLE_HEADER_CELL}`;
@@ -154,11 +155,12 @@ export const getMousePositionVerticalRelativeByElement = (
   return null;
 };
 
+// This function is deprecated
 export const updateResizeHandles = (tableRef?: HTMLElement) => {
   if (!tableRef) {
     return;
   }
-  const height = tableRef.offsetHeight + tableToolbarSize;
+
   // see ED-7600
   const nodes = Array.from(
     tableRef.querySelectorAll(
@@ -169,6 +171,7 @@ export const updateResizeHandles = (tableRef?: HTMLElement) => {
     return;
   }
 
+  const height = tableRef.offsetHeight + tableToolbarSize;
   nodes.forEach((node) => {
     node.style.height = `${height}px`;
   });