@atlaskit/editor-plugin-table 2.14.0 → 2.14.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 2.14.1
+
+### Patch Changes
+
+- [`b6525ba4703`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6525ba4703) - [ux] Reimplement inline height for table when resizing
+
 ## 2.14.0
 
 ### Minor Changes

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

@@ -6,16 +6,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableContainer = exports.ResizableTableContainer = exports.InnerContainer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _types = require("../types");
 var _TableResizer = require("./TableResizer");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getMarginLeft = function getMarginLeft(lineLength, tableWidth) {
   var marginLeft;
   if (tableWidth !== 'inherit' && lineLength) {
@@ -55,6 +59,38 @@ 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;
+    // current StickyHeader State is not stable to be fetch.
+    // we need to update stickyHeader plugin to make sure state can be
+    //    consistently fetch and refactor below
+    var stickyHeaders = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getElementsByClassName('pm-table-sticky');
+    if (!stickyHeaders || stickyHeaders.length < 1) {
+      var _containerRef$current2;
+      // when starting to drag, we need to keep the original space,
+      // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
+      //    1px is border width but collapse make it 0.5.
+      // -- When sticky header appear, we should add first row height but reduce
+      //    collapsed border
+      (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.setProperty('height', typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto');
+    } else {
+      var _containerRef$current3, _containerRef$current4;
+      var stickyHeaderHeight = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.style.setProperty('height', typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto');
+    }
+  }, []);
+  var resizeObserverRef = (0, _react.useRef)(new ResizeObserver(function (entries) {
+    updateContainerHeight(entries[entries.length - 1].contentRect.height);
+  }));
+  var onResizeStart = (0, _react.useCallback)(function () {
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef]);
+  var onResizeStop = (0, _react.useCallback)(function () {
+    updateContainerHeight('auto');
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
   var updateWidth = (0, _react.useCallback)(function (width) {
     if (!containerRef.current) {
       return;
@@ -98,14 +134,7 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     marginLeftRef.current = getMarginLeft(lineLength, width);
   }
   var maxResizerWidth = Math.min(responsiveContainerWidth, _utils.TABLE_MAX_WIDTH);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginLeft: marginLeftRef.current,
-      width: tableWidthRef.current
-    },
-    className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
-    ref: containerRef
-  }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, {
+  var tableResizerProps = {
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,
@@ -117,7 +146,21 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor
-  }, /*#__PURE__*/_react.default.createElement(InnerContainer, {
+  };
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement')) {
+    tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
+      onResizeStart: onResizeStart,
+      onResizeStop: onResizeStop
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginLeft: marginLeftRef.current,
+      width: tableWidthRef.current
+    },
+    className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, tableResizerProps, /*#__PURE__*/_react.default.createElement(InnerContainer, {
     className: className,
     node: node
   }, children)));

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

@@ -14,6 +14,7 @@ var _reactIntlNext = require("react-intl-next");
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _utils2 = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
@@ -85,6 +86,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,
@@ -145,7 +148,10 @@ var TableResizer = function TableResizer(_ref) {
     dispatch(tr);
     var visibleGuidelines = getVisibleGuidelines(_guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGapCursor, displayGuideline, editorView, startMeasure, containerWidth]);
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement') && onResizeStart) {
+      onResizeStart();
+    }
+  }, [displayGapCursor, displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -217,8 +223,11 @@ var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement') && onResizeStop) {
+      onResizeStop();
+    }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   var isTableSelected = ((_findTable = (0, _utils.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
   return /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     enable: handles,

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

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -46,6 +47,38 @@ export const ResizableTableContainer = ({
   const containerRef = useRef(null);
   const marginLeftRef = useRef(0);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  const updateContainerHeight = useCallback(height => {
+    var _containerRef$current;
+    // current StickyHeader State is not stable to be fetch.
+    // we need to update stickyHeader plugin to make sure state can be
+    //    consistently fetch and refactor below
+    const stickyHeaders = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getElementsByClassName('pm-table-sticky');
+    if (!stickyHeaders || stickyHeaders.length < 1) {
+      var _containerRef$current2;
+      // when starting to drag, we need to keep the original space,
+      // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
+      //    1px is border width but collapse make it 0.5.
+      // -- When sticky header appear, we should add first row height but reduce
+      //    collapsed border
+      (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.setProperty('height', typeof height === 'number' ? `${height + 40.5}px` : 'auto');
+    } else {
+      var _containerRef$current3, _containerRef$current4;
+      const stickyHeaderHeight = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.style.setProperty('height', typeof height === 'number' ? `${height + stickyHeaderHeight + 39.5}px` : 'auto');
+    }
+  }, []);
+  const resizeObserverRef = useRef(new ResizeObserver(entries => {
+    updateContainerHeight(entries[entries.length - 1].contentRect.height);
+  }));
+  const onResizeStart = useCallback(() => {
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef]);
+  const onResizeStop = useCallback(() => {
+    updateContainerHeight('auto');
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
   const updateWidth = useCallback(width => {
     if (!containerRef.current) {
       return;
@@ -89,6 +122,26 @@ export const ResizableTableContainer = ({
     marginLeftRef.current = getMarginLeft(lineLength, width);
   }
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+  let tableResizerProps = {
+    width,
+    maxWidth: maxResizerWidth,
+    containerWidth,
+    updateWidth,
+    editorView,
+    getPos,
+    node,
+    tableRef,
+    displayGuideline,
+    attachAnalyticsEvent,
+    displayGapCursor
+  };
+  if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
+    tableResizerProps = {
+      ...tableResizerProps,
+      onResizeStart: onResizeStart,
+      onResizeStop: onResizeStop
+    };
+  }
   return /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
@@ -96,19 +149,7 @@ export const ResizableTableContainer = ({
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, /*#__PURE__*/React.createElement(TableResizer, {
-    width: width,
-    maxWidth: maxResizerWidth,
-    containerWidth: containerWidth,
-    updateWidth: updateWidth,
-    editorView: editorView,
-    getPos: getPos,
-    node: node,
-    tableRef: tableRef,
-    displayGuideline: displayGuideline,
-    attachAnalyticsEvent: attachAnalyticsEvent,
-    displayGapCursor: displayGapCursor
-  }, /*#__PURE__*/React.createElement(InnerContainer, {
+  }, /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
     node: node
   }, children)));

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

@@ -4,6 +4,7 @@ import { defineMessages, useIntl } from 'react-intl-next';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
@@ -70,6 +71,8 @@ export const TableResizer = ({
   maxWidth,
   containerWidth,
   updateWidth,
+  onResizeStop,
+  onResizeStart,
   editorView,
   getPos,
   node,
@@ -135,7 +138,10 @@ export const TableResizer = ({
     dispatch(tr);
     const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGapCursor, displayGuideline, editorView, startMeasure, containerWidth]);
+    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStart) {
+      onResizeStart();
+    }
+  }, [displayGapCursor, displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
   const handleResize = useCallback((originalState, delta) => {
     countFrames();
     const newWidth = originalState.width + delta.width;
@@ -208,8 +214,11 @@ export const TableResizer = ({
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
+    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStop) {
+      onResizeStop();
+    }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   const isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,

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

@@ -1,8 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -44,6 +48,38 @@ 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;
+    // current StickyHeader State is not stable to be fetch.
+    // we need to update stickyHeader plugin to make sure state can be
+    //    consistently fetch and refactor below
+    var stickyHeaders = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getElementsByClassName('pm-table-sticky');
+    if (!stickyHeaders || stickyHeaders.length < 1) {
+      var _containerRef$current2;
+      // when starting to drag, we need to keep the original space,
+      // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
+      //    1px is border width but collapse make it 0.5.
+      // -- When sticky header appear, we should add first row height but reduce
+      //    collapsed border
+      (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.setProperty('height', typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto');
+    } else {
+      var _containerRef$current3, _containerRef$current4;
+      var stickyHeaderHeight = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.style.setProperty('height', typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto');
+    }
+  }, []);
+  var resizeObserverRef = useRef(new ResizeObserver(function (entries) {
+    updateContainerHeight(entries[entries.length - 1].contentRect.height);
+  }));
+  var onResizeStart = useCallback(function () {
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef]);
+  var onResizeStop = useCallback(function () {
+    updateContainerHeight('auto');
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
   var updateWidth = useCallback(function (width) {
     if (!containerRef.current) {
       return;
@@ -87,14 +123,7 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     marginLeftRef.current = getMarginLeft(lineLength, width);
   }
   var maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginLeft: marginLeftRef.current,
-      width: tableWidthRef.current
-    },
-    className: ClassName.TABLE_RESIZER_CONTAINER,
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement(TableResizer, {
+  var tableResizerProps = {
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,
@@ -106,7 +135,21 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor
-  }, /*#__PURE__*/React.createElement(InnerContainer, {
+  };
+  if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
+    tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
+      onResizeStart: onResizeStart,
+      onResizeStop: onResizeStop
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: marginLeftRef.current,
+      width: tableWidthRef.current
+    },
+    className: ClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
     node: node
   }, children)));

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

@@ -8,6 +8,7 @@ import { defineMessages, useIntl } from 'react-intl-next';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
@@ -75,6 +76,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,
@@ -135,7 +138,10 @@ export var TableResizer = function TableResizer(_ref) {
     dispatch(tr);
     var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGapCursor, displayGuideline, editorView, startMeasure, containerWidth]);
+    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStart) {
+      onResizeStart();
+    }
+  }, [displayGapCursor, displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
   var handleResize = useCallback(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -207,8 +213,11 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
+    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStop) {
+      onResizeStop();
+    }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   var isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,

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

@@ -17,5 +17,9 @@ interface TableResizerProps {
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export interface TableResizerImprovementProps extends TableResizerProps {
+    onResizeStop?: () => void;
+    onResizeStart?: () => void;
+}
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

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

@@ -17,5 +17,9 @@ interface TableResizerProps {
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export interface TableResizerImprovementProps extends TableResizerProps {
+    onResizeStop?: () => void;
+    onResizeStart?: () => void;
+}
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^29.1.0",
-    "@atlaskit/editor-common": "^74.58.0",
+    "@atlaskit/editor-common": "^74.59.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -38,7 +38,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.22.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -105,8 +105,11 @@
     "platform.editor.update-table-cell-width-via-step": {
       "type": "boolean"
     },
+    "platform.editor.resizing-table-height-improvement": {
+      "type": "boolean"
+    },
     "platform.editor.table-remove-update-resize-handles_djvab": {
       "type": "boolean"
     }
   }
-}
+}

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

@@ -14,12 +14,14 @@ import {
   akEditorDefaultLayoutWidth,
   akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import type { PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 
 import { TableResizer } from './TableResizer';
+import type { TableResizerImprovementProps } from './TableResizer';
 
 const getMarginLeft = (lineLength: number, tableWidth: number | 'inherit') => {
   let marginLeft;
@@ -89,6 +91,54 @@ export const ResizableTableContainer = ({
   const marginLeftRef = useRef<number | undefined>(0);
   const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
 
+  const updateContainerHeight = useCallback((height: number | 'auto') => {
+    // current StickyHeader State is not stable to be fetch.
+    // we need to update stickyHeader plugin to make sure state can be
+    //    consistently fetch and refactor below
+    const stickyHeaders =
+      containerRef.current?.getElementsByClassName('pm-table-sticky');
+    if (!stickyHeaders || stickyHeaders.length < 1) {
+      // when starting to drag, we need to keep the original space,
+      // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
+      //    1px is border width but collapse make it 0.5.
+      // -- When sticky header appear, we should add first row height but reduce
+      //    collapsed border
+      containerRef.current?.style.setProperty(
+        'height',
+        typeof height === 'number' ? `${height + 40.5}px` : 'auto',
+      );
+    } else {
+      const stickyHeaderHeight =
+        containerRef.current
+          ?.getElementsByTagName('th')[0]
+          .getBoundingClientRect().height || 0;
+      containerRef.current?.style.setProperty(
+        'height',
+        typeof height === 'number'
+          ? `${height + stickyHeaderHeight + 39.5}px`
+          : 'auto',
+      );
+    }
+  }, []);
+
+  const resizeObserverRef = useRef(
+    new ResizeObserver((entries) => {
+      updateContainerHeight(entries[entries.length - 1].contentRect.height);
+    }),
+  );
+
+  const onResizeStart = useCallback(() => {
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef]);
+
+  const onResizeStop = useCallback(() => {
+    updateContainerHeight('auto');
+
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
+
   const updateWidth = useCallback(
     (width: number) => {
       if (!containerRef.current) {
@@ -158,6 +208,28 @@ export const ResizableTableContainer = ({
   }
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
 
+  let tableResizerProps: TableResizerImprovementProps = {
+    width,
+    maxWidth: maxResizerWidth,
+    containerWidth,
+    updateWidth,
+    editorView,
+    getPos,
+    node,
+    tableRef,
+    displayGuideline,
+    attachAnalyticsEvent,
+    displayGapCursor,
+  };
+
+  if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
+    tableResizerProps = {
+      ...tableResizerProps,
+      onResizeStart: onResizeStart,
+      onResizeStop: onResizeStop,
+    };
+  }
+
   return (
     <div
       style={{
@@ -167,19 +239,7 @@ export const ResizableTableContainer = ({
       className={ClassName.TABLE_RESIZER_CONTAINER}
       ref={containerRef}
     >
-      <TableResizer
-        width={width}
-        maxWidth={maxResizerWidth}
-        containerWidth={containerWidth}
-        updateWidth={updateWidth}
-        editorView={editorView}
-        getPos={getPos}
-        node={node}
-        tableRef={tableRef}
-        displayGuideline={displayGuideline}
-        attachAnalyticsEvent={attachAnalyticsEvent}
-        displayGapCursor={displayGapCursor}
-      >
+      <TableResizer {...tableResizerProps}>
         <InnerContainer className={className} node={node}>
           {children}
         </InnerContainer>

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

@@ -22,6 +22,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import {
@@ -60,6 +61,11 @@ interface TableResizerProps {
   displayGapCursor: (toggle: boolean) => boolean;
 }
 
+export interface TableResizerImprovementProps extends TableResizerProps {
+  onResizeStop?: () => void;
+  onResizeStart?: () => void;
+}
+
 const messages = defineMessages({
   resizeTable: {
     id: 'fabric.editor.tables.resizeTable',
@@ -135,6 +141,8 @@ export const TableResizer = ({
   maxWidth,
   containerWidth,
   updateWidth,
+  onResizeStop,
+  onResizeStart,
   editorView,
   getPos,
   node,
@@ -142,7 +150,7 @@ export const TableResizer = ({
   displayGuideline,
   attachAnalyticsEvent,
   displayGapCursor,
-}: PropsWithChildren<TableResizerProps>) => {
+}: PropsWithChildren<TableResizerImprovementProps>) => {
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
@@ -214,11 +222,18 @@ export const TableResizer = ({
       containerWidth,
     );
     setSnappingEnabled(displayGuideline(visibleGuidelines));
+    if (
+      getBooleanFF('platform.editor.resizing-table-height-improvement') &&
+      onResizeStart
+    ) {
+      onResizeStart();
+    }
   }, [
     displayGapCursor,
     displayGuideline,
     editorView,
     startMeasure,
+    onResizeStart,
     containerWidth,
   ]);
 
@@ -330,6 +345,13 @@ export const TableResizer = ({
       updateWidth(newWidth);
       scheduleResize.cancel();
 
+      if (
+        getBooleanFF('platform.editor.resizing-table-height-improvement') &&
+        onResizeStop
+      ) {
+        onResizeStop();
+      }
+
       return newWidth;
     },
     [
@@ -343,6 +365,7 @@ export const TableResizer = ({
       displayGuideline,
       attachAnalyticsEvent,
       endMeasure,
+      onResizeStop,
     ],
   );