@atlaskit/editor-plugin-table 2.10.4 → 2.10.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 2.10.5
+
+### Patch Changes
+
+- [`e813382ff78`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e813382ff78) - Revert ED-19511 due to incorrect height calculations when sticky headers are enabled for tables
+
 ## 2.10.4
 
 ### Patch Changes

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

@@ -55,23 +55,6 @@ 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;
@@ -119,8 +102,6 @@ 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

@@ -78,8 +78,6 @@ 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,
@@ -122,8 +120,7 @@ var TableResizer = function TableResizer(_ref) {
     }));
     var visibleGuidelines = getVisibleGuidelines(_guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-    onResizeStart();
-  }, [displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
+  }, [displayGuideline, editorView, startMeasure, containerWidth]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -188,9 +185,8 @@ var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
-    onResizeStop();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
   var handleComponent = (0, _react.useMemo)(function () {
     return {
       left: /*#__PURE__*/_react.default.createElement("div", {

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

@@ -46,23 +46,6 @@ 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;
@@ -110,8 +93,6 @@ 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

@@ -63,8 +63,6 @@ export const TableResizer = ({
   maxWidth,
   containerWidth,
   updateWidth,
-  onResizeStop,
-  onResizeStart,
   editorView,
   getPos,
   node,
@@ -111,8 +109,7 @@ export const TableResizer = ({
     }));
     const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-    onResizeStart();
-  }, [displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
+  }, [displayGuideline, editorView, startMeasure, containerWidth]);
   const handleResize = useCallback((originalState, delta) => {
     countFrames();
     const newWidth = originalState.width + delta.width;
@@ -178,9 +175,8 @@ export const TableResizer = ({
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
-    onResizeStop();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
   const handleComponent = useMemo(() => ({
     left: /*#__PURE__*/React.createElement("div", {
       className: resizerHandleShadowClassName,

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

@@ -44,23 +44,6 @@ 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;
@@ -108,8 +91,6 @@ 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

@@ -68,8 +68,6 @@ 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,
@@ -112,8 +110,7 @@ export var TableResizer = function TableResizer(_ref) {
     }));
     var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-    onResizeStart();
-  }, [displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
+  }, [displayGuideline, editorView, startMeasure, containerWidth]);
   var handleResize = useCallback(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -178,9 +175,8 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
-    onResizeStop();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
   var handleComponent = useMemo(function () {
     return {
       left: /*#__PURE__*/React.createElement("div", {

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.10.4",
+  "version": "2.10.5",
   "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.50.0",
+    "@atlaskit/editor-common": "^74.51.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.8",
@@ -58,7 +58,7 @@
     "@atlaskit/editor-plugin-decorations": "^0.1.0",
     "@atlaskit/editor-plugin-feature-flags": "^0.1.3",
     "@atlaskit/editor-plugin-grid": "^0.1.0",
-    "@atlaskit/editor-plugin-guideline": "^0.3.4",
+    "@atlaskit/editor-plugin-guideline": "^0.4.0",
     "@atlaskit/editor-plugin-hyperlink": "^0.3.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-test-helpers": "^18.11.0",

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

@@ -89,33 +89,6 @@ 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) {
@@ -184,8 +157,6 @@ export const ResizableTableContainer = ({
       ref={containerRef}
     >
       <TableResizer
-        onResizeStart={onResizeStart}
-        onResizeStop={onResizeStop}
         width={width}
         maxWidth={maxResizerWidth}
         containerWidth={containerWidth}

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

@@ -43,8 +43,6 @@ interface TableResizerProps {
   maxWidth: number;
   containerWidth: number;
   updateWidth: (width: number) => void;
-  onResizeStop: () => void;
-  onResizeStart: () => void;
   editorView: EditorView;
   getPos: () => number | undefined;
   node: PMNode;
@@ -122,8 +120,6 @@ export const TableResizer = ({
   maxWidth,
   containerWidth,
   updateWidth,
-  onResizeStop,
-  onResizeStart,
   editorView,
   getPos,
   node,
@@ -186,15 +182,7 @@ export const TableResizer = ({
       containerWidth,
     );
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-
-    onResizeStart();
-  }, [
-    displayGuideline,
-    editorView,
-    startMeasure,
-    onResizeStart,
-    containerWidth,
-  ]);
+  }, [displayGuideline, editorView, startMeasure, containerWidth]);
 
   const handleResize = useCallback(
     (originalState, delta) => {
@@ -298,8 +286,6 @@ export const TableResizer = ({
       updateWidth(newWidth);
       scheduleResize.cancel();
 
-      onResizeStop();
-
       return newWidth;
     },
     [
@@ -312,7 +298,6 @@ export const TableResizer = ({
       displayGuideline,
       attachAnalyticsEvent,
       endMeasure,
-      onResizeStop,
     ],
   );