@atlaskit/editor-plugin-table 2.13.3 → 2.14.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [`6ccd72d2fe0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ccd72d2fe0) - ED-18264: Clean up useSomewhatSemanticTextColorNames - default behaviour will be same as when FF was on.
+
+### Patch Changes
+
+- [`69857bbbff0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/69857bbbff0) - [ED-20004] Capture errors in getPos due to prosemirror-view bump
+
 ## 2.13.3
 
 ### Patch 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,11 +148,19 @@ 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;
-    var pos = getPos();
+    var pos;
+    try {
+      pos = getPos();
+    } catch (e) {
+      return;
+    }
     if (typeof pos !== 'number') {
       return;
     }
@@ -212,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/cjs/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -115,12 +115,9 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
         isOpen = _this$props.isOpen,
         selectionRect = _this$props.selectionRect,
         formatMessage = _this$props.intl.formatMessage,
-        editorView = _this$props.editorView,
-        getEditorFeatureFlags = _this$props.getEditorFeatureFlags;
+        editorView = _this$props.editorView;
       var items = [];
       var isSubmenuOpen = _this.state.isSubmenuOpen;
-      var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        useSomewhatSemanticTextColorNames = _getEditorFeatureFlag.useSomewhatSemanticTextColorNames;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
         targetCellPosition = _getPluginState.targetCellPosition,
@@ -149,14 +146,7 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
             paletteOptions: {
               palette: _uiColor.cellBackgroundColorPalette,
               paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
-              hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor,
-              // We did not want to create new FF or update
-              //  useSomewhatSemanticTextColorNames name
-              //  because it is temporary and require extra work.
-              // So even though it says text color names,
-              //  we are going to use for all color pickers
-              //  such as text, background and table charts.
-              showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+              hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
             }
           })))
         });

package/dist/cjs/plugins/table/ui/FloatingContextualMenu/index.js

@@ -24,8 +24,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     isOpen = _ref.isOpen,
     pluginConfig = _ref.pluginConfig,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    getEditorContainerWidth = _ref.getEditorContainerWidth,
-    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
+    getEditorContainerWidth = _ref.getEditorContainerWidth;
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition;
@@ -72,8 +71,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorContainerWidth: getEditorContainerWidth
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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,11 +138,19 @@ 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;
-    const pos = getPos();
+    let pos;
+    try {
+      pos = getPos();
+    } catch (e) {
+      return;
+    }
     if (typeof pos !== 'number') {
       return;
     }
@@ -203,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/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -95,16 +95,12 @@ export class ContextualMenu extends Component {
         intl: {
           formatMessage
         },
-        editorView,
-        getEditorFeatureFlags
+        editorView
       } = this.props;
       const items = [];
       const {
         isSubmenuOpen
       } = this.state;
-      const {
-        useSomewhatSemanticTextColorNames
-      } = getEditorFeatureFlags();
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
         targetCellPosition,
@@ -136,14 +132,7 @@ export class ContextualMenu extends Component {
             paletteOptions: {
               palette: cellBackgroundColorPalette,
               paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
-              hexToPaletteColor: hexToEditorBackgroundPaletteColor,
-              // We did not want to create new FF or update
-              //  useSomewhatSemanticTextColorNames name
-              //  because it is temporary and require extra work.
-              // So even though it says text color names,
-              //  we are going to use for all color pickers
-              //  such as text, background and table charts.
-              showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+              hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }
           })))
         });

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/index.js

@@ -16,8 +16,7 @@ const FloatingContextualMenu = ({
   isOpen,
   pluginConfig,
   editorAnalyticsAPI,
-  getEditorContainerWidth,
-  getEditorFeatureFlags
+  getEditorContainerWidth
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -68,8 +67,7 @@ const FloatingContextualMenu = ({
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorContainerWidth: getEditorContainerWidth
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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,11 +138,19 @@ 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;
-    var pos = getPos();
+    var pos;
+    try {
+      pos = getPos();
+    } catch (e) {
+      return;
+    }
     if (typeof pos !== 'number') {
       return;
     }
@@ -202,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/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -108,12 +108,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         isOpen = _this$props.isOpen,
         selectionRect = _this$props.selectionRect,
         formatMessage = _this$props.intl.formatMessage,
-        editorView = _this$props.editorView,
-        getEditorFeatureFlags = _this$props.getEditorFeatureFlags;
+        editorView = _this$props.editorView;
       var items = [];
       var isSubmenuOpen = _this.state.isSubmenuOpen;
-      var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        useSomewhatSemanticTextColorNames = _getEditorFeatureFlag.useSomewhatSemanticTextColorNames;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var _getPluginState = getPluginState(editorView.state),
         targetCellPosition = _getPluginState.targetCellPosition,
@@ -142,14 +139,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             paletteOptions: {
               palette: cellBackgroundColorPalette,
               paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
-              hexToPaletteColor: hexToEditorBackgroundPaletteColor,
-              // We did not want to create new FF or update
-              //  useSomewhatSemanticTextColorNames name
-              //  because it is temporary and require extra work.
-              // So even though it says text color names,
-              //  we are going to use for all color pickers
-              //  such as text, background and table charts.
-              showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+              hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }
           })))
         });

package/dist/esm/plugins/table/ui/FloatingContextualMenu/index.js

@@ -16,8 +16,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     isOpen = _ref.isOpen,
     pluginConfig = _ref.pluginConfig,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    getEditorContainerWidth = _ref.getEditorContainerWidth,
-    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
+    getEditorContainerWidth = _ref.getEditorContainerWidth;
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = getPluginState(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition;
@@ -64,8 +63,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorContainerWidth: getEditorContainerWidth
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

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/plugins/table/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const messages: {
     cellBackground: {
         id: string;
@@ -61,7 +61,6 @@ export interface Props {
     offset?: Array<number>;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     getEditorContainerWidth: GetEditorContainerWidth;
-    getEditorFeatureFlags: GetEditorFeatureFlags;
 }
 export interface State {
     isSubmenuOpen: boolean;

package/dist/types/plugins/table/ui/FloatingContextualMenu/index.d.ts

@@ -2,13 +2,13 @@
 import { jsx } from '@emotion/react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { PluginConfig } from '../../types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginConfig } from '../../types';
 export interface Props {
     editorView: EditorView;
     isOpen: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
-    getEditorFeatureFlags: GetEditorFeatureFlags;
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
     targetCellPosition?: number;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;
@@ -17,7 +17,7 @@ export interface Props {
     editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
 declare const FloatingContextualMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, }: Props): jsx.JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, }: Props): jsx.JSX.Element | null;
     displayName: string;
 };
 export default FloatingContextualMenu;

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/dist/types-ts4.5/plugins/table/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const messages: {
     cellBackground: {
         id: string;
@@ -61,7 +61,6 @@ export interface Props {
     offset?: Array<number>;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     getEditorContainerWidth: GetEditorContainerWidth;
-    getEditorFeatureFlags: GetEditorFeatureFlags;
 }
 export interface State {
     isSubmenuOpen: boolean;

package/dist/types-ts4.5/plugins/table/ui/FloatingContextualMenu/index.d.ts

@@ -2,13 +2,13 @@
 import { jsx } from '@emotion/react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { PluginConfig } from '../../types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginConfig } from '../../types';
 export interface Props {
     editorView: EditorView;
     isOpen: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
-    getEditorFeatureFlags: GetEditorFeatureFlags;
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
     targetCellPosition?: number;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;
@@ -17,7 +17,7 @@ export interface Props {
     editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
 declare const FloatingContextualMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, }: Props): jsx.JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, }: Props): jsx.JSX.Element | null;
     displayName: string;
 };
 export default FloatingContextualMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.13.3",
+  "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/__tests__/unit/ui/ContextualMenu.tsx

@@ -30,7 +30,6 @@ import { ContextualMenu } from '../../../plugins/table/ui/FloatingContextualMenu
 
 describe('ContextualMenu', () => {
   const getEditorContainerWidth = () => ({ width: 500 });
-  const getEditorFeatureFlags = () => ({});
   const createEditor = createProsemirrorEditorFactory();
   describe('with right table cell position in plugin state', () => {
     let editorView: EditorView;
@@ -57,7 +56,6 @@ describe('ContextualMenu', () => {
           isOpen
           selectionRect={{ bottom: 0, left: 0, right: 0, top: 0 }}
           getEditorContainerWidth={getEditorContainerWidth}
-          getEditorFeatureFlags={getEditorFeatureFlags}
         />,
       );
 

package/src/__tests__/unit/ui/FloatingContextualMenu.tsx

@@ -55,7 +55,6 @@ describe('FloatingContextualMenu', () => {
             isOpen
             pluginConfig={getPluginState(editorView.state).pluginConfig}
             getEditorContainerWidth={jest.fn()}
-            getEditorFeatureFlags={() => ({})}
           />
         </IntlProvider>,
       );

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,
   ]);
 
@@ -226,7 +241,12 @@ export const TableResizer = ({
     (originalState, delta) => {
       countFrames();
       const newWidth = originalState.width + delta.width;
-      const pos = getPos();
+      let pos: number | undefined;
+      try {
+        pos = getPos();
+      } catch (e) {
+        return;
+      }
       if (typeof pos !== 'number') {
         return;
       }
@@ -325,6 +345,13 @@ export const TableResizer = ({
       updateWidth(newWidth);
       scheduleResize.cancel();
 
+      if (
+        getBooleanFF('platform.editor.resizing-table-height-improvement') &&
+        onResizeStop
+      ) {
+        onResizeStop();
+      }
+
       return newWidth;
     },
     [
@@ -338,6 +365,7 @@ export const TableResizer = ({
       displayGuideline,
       attachAnalyticsEvent,
       endMeasure,
+      onResizeStop,
     ],
   );
 

package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -2,11 +2,8 @@
 import { Component } from 'react';
 
 import { jsx } from '@emotion/react';
-import {
-  defineMessages,
-  injectIntl,
-  WrappedComponentProps,
-} from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { defineMessages, injectIntl } from 'react-intl-next';
 
 type DropdownItem = MenuItem & {
   value: {
@@ -24,10 +21,7 @@ import {
   tooltip,
 } from '@atlaskit/editor-common/keymaps';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import type {
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import {
   backgroundPaletteTooltipMessages,
   cellBackgroundColorPalette,
@@ -40,9 +34,9 @@ import {
 } from '@atlaskit/editor-common/ui-menu';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { splitCell } from '@atlaskit/editor-tables/utils';
 
 import {
@@ -135,7 +129,6 @@ export interface Props {
   offset?: Array<number>;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
   getEditorContainerWidth: GetEditorContainerWidth;
-  getEditorFeatureFlags: GetEditorFeatureFlags;
 }
 
 export interface State {
@@ -215,11 +208,9 @@ export class ContextualMenu extends Component<
       selectionRect,
       intl: { formatMessage },
       editorView,
-      getEditorFeatureFlags,
     } = this.props;
     const items: any[] = [];
     const { isSubmenuOpen } = this.state;
-    const { useSomewhatSemanticTextColorNames } = getEditorFeatureFlags();
     // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
     const {
       targetCellPosition,
@@ -256,14 +247,6 @@ export class ContextualMenu extends Component<
                     paletteColorTooltipMessages:
                       backgroundPaletteTooltipMessages,
                     hexToPaletteColor: hexToEditorBackgroundPaletteColor,
-                    // We did not want to create new FF or update
-                    //  useSomewhatSemanticTextColorNames name
-                    //  because it is temporary and require extra work.
-                    // So even though it says text color names,
-                    //  we are going to use for all color pickers
-                    //  such as text, background and table charts.
-                    showSomewhatSemanticTooltips:
-                      useSomewhatSemanticTextColorNames,
                   }}
                 />
               </div>

package/src/plugins/table/ui/FloatingContextualMenu/index.tsx

@@ -8,7 +8,7 @@ import type {
 } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
   akEditorFloatingDialogZIndex,
   akEditorFloatingOverlapPanelZIndex,
@@ -20,7 +20,7 @@ import {
 } from '@atlaskit/editor-tables/utils';
 
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { PluginConfig } from '../../types';
+import type { PluginConfig } from '../../types';
 import {
   contextualMenuDropdownWidth,
   contextualMenuTriggerSize,
@@ -33,7 +33,7 @@ export interface Props {
   editorView: EditorView;
   isOpen: boolean;
   getEditorContainerWidth: GetEditorContainerWidth;
-  getEditorFeatureFlags: GetEditorFeatureFlags;
+  getEditorFeatureFlags?: GetEditorFeatureFlags;
   targetCellPosition?: number;
   mountPoint?: HTMLElement;
   boundariesElement?: HTMLElement;
@@ -51,7 +51,6 @@ const FloatingContextualMenu = ({
   pluginConfig,
   editorAnalyticsAPI,
   getEditorContainerWidth,
-  getEditorFeatureFlags,
 }: Props) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const { targetCellPosition } = getPluginState(editorView.state);
@@ -115,7 +114,6 @@ const FloatingContextualMenu = ({
           boundariesElement={boundariesElement}
           editorAnalyticsAPI={editorAnalyticsAPI}
           getEditorContainerWidth={getEditorContainerWidth}
-          getEditorFeatureFlags={getEditorFeatureFlags}
         />
       </div>
     </Popup>