@atlaskit/editor-plugin-table 2.10.1 → 2.10.3

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

@@ -8,15 +8,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   tdCursor,
@@ -28,7 +28,7 @@ import tablePlugin from '../../../plugins/table-plugin';
 import { hoverTable } from '../../../plugins/table/commands';
 import { getDecorations } from '../../../plugins/table/pm-plugins/decorations/plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 import TableFloatingControls from '../../../plugins/table/ui/TableFloatingControls';
 
 describe('TableFloatingControls', () => {
@@ -43,7 +43,7 @@ describe('TableFloatingControls', () => {
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey: pluginKey,

package/src/__tests__/unit/utils.ts

@@ -3,15 +3,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -22,7 +22,7 @@ import {
 
 import tablePlugin from '../../plugins/table';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../plugins/table/types';
+import type { TablePluginState } from '../../plugins/table/types';
 import {
   getColumnClassNames,
   getColumnDeleteButtonParams,
@@ -46,7 +46,7 @@ describe('table plugin: utils', () => {
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,

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

@@ -184,8 +184,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   }
 
   componentDidUpdate() {
-    const { view, getNode, isMediaFullscreen, allowColumnResizing } =
-      this.props;
+    const {
+      view,
+      getNode,
+      isMediaFullscreen,
+      allowColumnResizing,
+      isResizing,
+      options,
+    } = this.props;
     const { isInDanger } = getPluginState(view.state);
     const table = findTable(view.state.selection);
 
@@ -227,7 +233,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         tablesHaveDifferentNoOfColumns(currentTable, previousTable)
       ) {
         const { view } = this.props;
-        recreateResizeColsByNode(this.table, currentTable);
+
+        const shouldRecreateResizeCols =
+          !options?.isTableResizingEnabled ||
+          !isResizing ||
+          (tablesHaveDifferentNoOfColumns(currentTable, previousTable) &&
+            isResizing);
+
+        if (shouldRecreateResizeCols) {
+          recreateResizeColsByNode(this.table, currentTable);
+        }
+
         updateControls()(view.state);
       }
 
@@ -345,6 +361,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isNested={isNested}
         pluginInjectionApi={pluginInjectionApi}
         isTableResizingEnabled={options?.isTableResizingEnabled}
+        isResizing={isResizing}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}

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

@@ -10,7 +10,10 @@ import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import {
+  akEditorDefaultLayoutWidth,
+  akEditorMobileBreakoutPoint,
+} from '@atlaskit/editor-shared-styles';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import type { PluginInjectionAPI } from '../types';
@@ -66,6 +69,7 @@ type ResizableTableContainerProps = {
   editorView: EditorView;
   getPos: () => number | undefined;
   tableRef: HTMLTableElement;
+  isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
 };
 
@@ -78,10 +82,39 @@ export const ResizableTableContainer = ({
   editorView,
   getPos,
   tableRef,
+  isResizing,
   pluginInjectionApi,
 }: PropsWithChildren<ResizableTableContainerProps>) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   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) => {
@@ -134,16 +167,25 @@ export const ResizableTableContainer = ({
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = containerWidth - 76;
   const width = Math.min(tableWidth, responsiveContainerWidth);
-  marginLeftRef.current = getMarginLeft(lineLength, width);
+
+  if (!isResizing) {
+    tableWidthRef.current = width;
+    marginLeftRef.current = getMarginLeft(lineLength, width);
+  }
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
 
   return (
     <div
-      style={{ marginLeft: marginLeftRef.current, width }}
+      style={{
+        marginLeft: marginLeftRef.current,
+        width: tableWidthRef.current,
+      }}
       className={ClassName.TABLE_RESIZER_CONTAINER}
       ref={containerRef}
     >
       <TableResizer
+        onResizeStart={onResizeStart}
+        onResizeStop={onResizeStop}
         width={width}
         maxWidth={maxResizerWidth}
         containerWidth={containerWidth}
@@ -173,6 +215,7 @@ type TableContainerProps = {
   getPos: () => number | undefined;
   tableRef: HTMLTableElement;
   isNested: boolean;
+  isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
 };
 
@@ -187,6 +230,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  isResizing,
   pluginInjectionApi,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
@@ -199,6 +243,7 @@ export const TableContainer = ({
         editorView={editorView}
         getPos={getPos}
         tableRef={tableRef}
+        isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
       >
         {children}

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

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

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

@@ -12,13 +12,16 @@ import type {
   getPosHandlerNode,
 } from '@atlaskit/editor-common/types';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
-import {
+import type {
   DOMOutputSpec,
-  DOMSerializer,
   Node as PmNode,
 } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import type {
+  EditorState,
+  PluginKey,
+} from '@atlaskit/editor-prosemirror/state';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
@@ -28,11 +31,11 @@ import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
-import { PluginInjectionAPI } from '../types';
+import type { PluginInjectionAPI } from '../types';
 import { isTableNested } from '../utils';
 
 import TableComponent from './TableComponent';
-import { Props, TableOptions } from './types';
+import type { Props, TableOptions } from './types';
 
 type ForwardRef = (node: HTMLElement | null) => void;
 
@@ -160,7 +163,11 @@ export default class TableView extends ReactNodeView<Props> {
       this.getPos(),
     );
 
-    if (tableInlineWidth) {
+    const isTableResizing = tableWidthPluginKey.getState(
+      this.view.state,
+    )?.resizing;
+
+    if (!isTableResizing && tableInlineWidth) {
       handleInlineTableWidth(this.table, tableInlineWidth);
     }
   }