@atlaskit/editor-plugin-table 7.6.14 → 7.7.1

package/src/nodeviews/TableContainer.tsx

@@ -7,7 +7,6 @@ import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-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';
@@ -17,7 +16,6 @@ import {
   akEditorMediaResizeHandlerPaddingWide,
   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';
@@ -26,22 +24,6 @@ import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
 import type { TableResizerImprovementProps } from './TableResizer';
 
-const getMarginLeft = (
-  lineLength: number | undefined,
-  tableWidth: number | 'inherit',
-) => {
-  let marginLeft;
-  if (tableWidth !== 'inherit' && lineLength) {
-    const containerWidth = tableWidth;
-
-    if (containerWidth) {
-      marginLeft = (lineLength - containerWidth) / 2;
-    }
-  }
-
-  return marginLeft;
-};
-
 type InnerContainerProps = {
   className: string;
   style?: {
@@ -218,13 +200,11 @@ export const ResizableTableContainer = React.memo(
       pluginInjectionApi,
     };
 
-    if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
-      tableResizerProps = {
-        ...tableResizerProps,
-        onResizeStart: onResizeStart,
-        onResizeStop: onResizeStop,
-      };
-    }
+    tableResizerProps = {
+      ...tableResizerProps,
+      onResizeStart: onResizeStart,
+      onResizeStop: onResizeStop,
+    };
 
     return (
       <div
@@ -265,7 +245,6 @@ type TableContainerProps = {
   className: string;
   containerWidth: EditorContainerWidth;
   isTableResizingEnabled: boolean | undefined;
-  isBreakoutEnabled: boolean | undefined;
   editorView: EditorView;
   getPos: () => number | undefined;
   tableRef: HTMLTableElement;
@@ -281,9 +260,8 @@ export const TableContainer = ({
   children,
   node,
   className,
-  containerWidth: { lineLength, width: editorWidth },
+  containerWidth: { width: editorWidth },
   isTableResizingEnabled,
-  isBreakoutEnabled,
   editorView,
   getPos,
   tableRef,
@@ -314,10 +292,6 @@ export const TableContainer = ({
     );
   }
 
-  const tableWidth = isBreakoutEnabled
-    ? calcTableWidth(node.attrs.layout, editorWidth)
-    : 'inherit';
-
   return (
     <InnerContainer
       node={node}
@@ -325,8 +299,7 @@ export const TableContainer = ({
         'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested,
       })}
       style={{
-        width: tableWidth,
-        marginLeft: getMarginLeft(lineLength!, tableWidth),
+        width: 'inherit',
       }}
     >
       {children}

package/src/nodeviews/TableResizer.tsx

@@ -270,10 +270,7 @@ export const TableResizer = ({
     );
 
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-    if (
-      getBooleanFF('platform.editor.resizing-table-height-improvement') &&
-      onResizeStart
-    ) {
+    if (onResizeStart) {
       onResizeStart();
     }
   }, [
@@ -443,10 +440,7 @@ export const TableResizer = ({
       updateWidth(newWidth);
       scheduleResize.cancel();
 
-      if (
-        getBooleanFF('platform.editor.resizing-table-height-improvement') &&
-        onResizeStop
-      ) {
+      if (onResizeStop) {
         onResizeStop();
       }
 

package/src/nodeviews/table.tsx

@@ -376,7 +376,6 @@ export const createTableView = (
 ): NodeView => {
   const {
     pluginConfig,
-    isBreakoutEnabled,
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
@@ -395,7 +394,6 @@ export const createTableView = (
     eventDispatcher,
     getPos: getPos as getPosHandlerNode,
     options: {
-      isBreakoutEnabled,
       isFullWidthModeEnabled,
       wasFullWidthModeEnabled,
       isTableResizingEnabled,

package/src/nodeviews/types.ts

@@ -11,7 +11,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../types';
 
 export type TableOptions = {
-  isBreakoutEnabled?: boolean;
   isFullWidthModeEnabled?: boolean;
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;

package/src/plugin.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
 
-import {
-  table,
-  tableCell,
-  tableHeader,
-  tableRow,
-  tableWithCustomWidth,
-} from '@atlaskit/adf-schema';
+import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
@@ -86,16 +80,12 @@ import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
-import LayoutButton from './ui/LayoutButton';
-import { createTableWithWidth, isLayoutSupported } from './utils';
+import { createTableWithWidth } from './utils';
 
 export interface TablePluginOptions {
   tableOptions: PluginConfig;
-  // experimental custom table resizing experience, set inside editor-core behind a feature flag
-  // will eventually replace breakoutEnabled
   tableResizingEnabled?: boolean;
   dragAndDropEnabled?: boolean;
-  breakoutEnabled?: boolean;
   allowContextualMenu?: boolean;
   // TODO these two need to be rethought
   fullWidthEnabled?: boolean;
@@ -233,12 +223,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
     },
 
     nodes() {
-      const tableNode = options?.tableResizingEnabled
-        ? tableWithCustomWidth
-        : table;
-
       return [
-        { name: 'table', node: tableNode },
+        { name: 'table', node: table },
         { name: 'tableHeader', node: tableHeader },
         { name: 'tableRow', node: tableRow },
         { name: 'tableCell', node: tableCell },
@@ -260,7 +246,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               fullWidthEnabled,
               wasFullWidthEnabled,
               tableResizingEnabled,
-              breakoutEnabled,
+
               tableOptions,
               getEditorFeatureFlags,
               dragAndDropEnabled,
@@ -275,7 +261,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               defaultGetEditorContainerWidth,
               getEditorFeatureFlags || defaultGetEditorFeatureFlags,
               getIntl,
-              breakoutEnabled,
               tableResizingEnabled,
               fullWidthEnabled,
               wasFullWidthEnabled,
@@ -466,7 +451,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               tableWidthPluginState,
               dragAndDropState,
             }) => {
-              const { state } = editorView;
               const isColumnResizing = resizingPluginState?.dragging;
               const isTableResizing = tableWidthPluginState?.resizing;
               const isResizing = isColumnResizing || isTableResizing;
@@ -476,7 +460,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 tablePos,
                 targetCellPosition,
                 isContextualMenuOpen,
-                layout,
                 tableRef,
                 pluginConfig,
                 insertColumnButtonIndex,
@@ -493,26 +476,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 ? findStickyHeaderForTable(stickyHeadersState, tablePos)
                 : undefined;
 
-              const LayoutContent =
-                options &&
-                !options.tableResizingEnabled &&
-                isLayoutSupported(state) &&
-                options.breakoutEnabled ? (
-                  <LayoutButton
-                    editorView={editorView}
-                    mountPoint={popupsMountPoint}
-                    boundariesElement={popupsBoundariesElement}
-                    scrollableElement={popupsScrollableElement}
-                    targetRef={tableWrapperTarget!}
-                    layout={layout}
-                    isResizing={
-                      !!resizingPluginState && !!resizingPluginState.dragging
-                    }
-                    stickyHeader={stickyHeader}
-                    editorAnalyticsAPI={editorAnalyticsAPI}
-                  />
-                ) : null;
-
               return (
                 <>
                   {targetCellPosition &&
@@ -531,7 +494,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                         scrollableElement={popupsScrollableElement}
                         dispatchAnalyticsEvent={dispatchAnalyticsEvent}
                         isContextualMenuOpen={isContextualMenuOpen}
-                        layout={layout}
                         stickyHeader={stickyHeader}
                         tableWrapper={tableWrapperTarget}
                       />
@@ -603,7 +565,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       editorAnalyticsAPI={editorAnalyticsAPI}
                     />
                   )}
-                  {LayoutContent}
                 </>
               );
             }}

package/src/pm-plugins/main.ts

@@ -107,7 +107,6 @@ export const createPlugin = (
   getEditorContainerWidth: GetEditorContainerWidth,
   getEditorFeatureFlags: GetEditorFeatureFlags,
   getIntl: () => IntlShape,
-  breakoutEnabled?: boolean,
   tableResizingEnabled?: boolean,
   fullWidthModeEnabled?: boolean,
   previousFullWidthModeEnabled?: boolean,
@@ -122,7 +121,6 @@ export const createPlugin = (
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
     isFullWidthModeEnabled: fullWidthModeEnabled,
-    isBreakoutEnabled: breakoutEnabled,
     wasFullWidthModeEnabled: previousFullWidthModeEnabled,
     isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,

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

@@ -1,4 +1,4 @@
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import {
   ACTION_SUBJECT,
   EVENT_TYPE,
@@ -7,14 +7,12 @@ import {
   TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -30,7 +28,6 @@ import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import {
   currentColWidth,
-  getLayoutSize,
   getResizeState,
   getTableMaxWidth,
   pointsAtCell,
@@ -80,39 +77,13 @@ export const handleMouseDown = (
     dom = dom.closest('table') as HTMLTableElement;
   }
 
-  let maxSize;
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    const containerWidth = getEditorContainerWidth();
-    const parentWidth = getParentNodeWidth(start, state, containerWidth);
-
-    maxSize = getBooleanFF('platform.editor.custom-table-width')
-      ? parentWidth ||
-        // its safe to reference table width from node as this will not have changed
-        originalTable.attrs.width ||
-        getLayoutSize(
-          dom.getAttribute('data-layout') as TableLayout,
-          containerWidth.width,
-          {},
-        )
-      : parentWidth ||
-        getLayoutSize(
-          dom.getAttribute('data-layout') as TableLayout,
-          containerWidth.width,
-          {},
-        );
-
-    if (originalTable.attrs.isNumberColumnEnabled) {
-      maxSize -= akEditorTableNumberColumnWidth;
-    }
-  } else {
-    maxSize = getTableMaxWidth({
-      table: originalTable,
-      tableStart: start,
-      state,
-      layout: originalTable.attrs.layout,
-      getEditorContainerWidth,
-    });
-  }
+  const maxSize = getTableMaxWidth({
+    table: originalTable,
+    tableStart: start,
+    state,
+    layout: originalTable.attrs.layout,
+    getEditorContainerWidth,
+  });
 
   const shouldScale = tableDepth === 0 && isTableScalingEnabled;
   const resizeState = getResizeState({
@@ -224,6 +195,11 @@ export const handleMouseDown = (
         const resizedDelta = clientX - startX;
 
         tr = updateColumnWidths(newResizeState, table, start)(tr);
+
+        // console.log('debug newResizeState=', newResizeState);
+        if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          tr.setNodeAttribute(tablePos, 'width', newResizeState.tableWidth);
+        }
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
 

package/src/pm-plugins/table-resizing/utils/colgroup.ts

@@ -3,7 +3,6 @@ import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getTableScalingPercent } from './misc';
 
@@ -21,70 +20,50 @@ export const getColWidthFix = (colwidth: number, tableColumnCount: number) =>
 export const generateColgroup = (table: PmNode, tableRef?: HTMLElement) => {
   const cols: Col[] = [];
 
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    const map = TableMap.get(table);
-    table.content.firstChild!.content.forEach((cell) => {
-      const colspan = cell.attrs.colspan || 1;
-      if (Array.isArray(cell.attrs.colwidth)) {
-        // We slice here to guard against our colwidth array having more entries
-        // Than the we actually span. We'll patch the document at a later point.
-        if (tableRef) {
-          const scalePercent = getTableScalingPercent(table, tableRef);
-          cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-            const fixedColWidth = getColWidthFix(width, map.width);
-            const scaledWidth = fixedColWidth * scalePercent;
-            const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
-            cols.push([
-              'col',
-              {
-                style: `width: ${finalWidth}px;`,
-              },
-            ]);
-          });
-        } else {
-          cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-            cols.push([
-              'col',
-              {
-                style: `width: ${getColWidthFix(
-                  width
-                    ? Math.max(width, tableCellMinWidth)
-                    : tableCellMinWidth,
-                  map.width,
-                )}px;`,
-              },
-            ]);
-          });
-        }
-      } else {
-        // When we have merged cells on the first row (firstChild),
-        // We want to ensure we're creating the appropriate amount of
-        // cols the table still has.
-        cols.push(
-          ...Array.from({ length: colspan }, (_) => [
-            'col',
-            { style: `width: ${tableCellMinWidth}px;` },
-          ]),
-        );
-      }
-    });
-  } else {
-    table.content.firstChild!.content.forEach((cell) => {
-      const colspan = cell.attrs.colspan || 1;
-      if (Array.isArray(cell.attrs.colwidth)) {
-        // We slice here to guard against our colwidth array having more entries
-        // Than the we actually span. We'll patch the document at a later point.
+  const map = TableMap.get(table);
+  table.content.firstChild!.content.forEach((cell) => {
+    const colspan = cell.attrs.colspan || 1;
+    if (Array.isArray(cell.attrs.colwidth)) {
+      // We slice here to guard against our colwidth array having more entries
+      // Than the we actually span. We'll patch the document at a later point.
+      if (tableRef) {
+        const scalePercent = getTableScalingPercent(table, tableRef);
         cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-          cols.push(['col', width ? { style: `width: ${width}px;` } : {}]);
+          const fixedColWidth = getColWidthFix(width, map.width);
+          const scaledWidth = fixedColWidth * scalePercent;
+          const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+          cols.push([
+            'col',
+            {
+              style: `width: ${finalWidth}px;`,
+            },
+          ]);
         });
       } else {
-        // When we have merged cells on the first row (firstChild),
-        // We want to ensure we're creating the appropriate amount of
-        // cols the table still has.
-        cols.push(...Array.from({ length: colspan }, (_) => ['col', {}]));
+        cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+          cols.push([
+            'col',
+            {
+              style: `width: ${getColWidthFix(
+                width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth,
+                map.width,
+              )}px;`,
+            },
+          ]);
+        });
       }
-    });
-  }
+    } else {
+      // When we have merged cells on the first row (firstChild),
+      // We want to ensure we're creating the appropriate amount of
+      // cols the table still has.
+      cols.push(
+        ...Array.from({ length: colspan }, (_) => [
+          'col',
+          { style: `width: ${tableCellMinWidth}px;` },
+        ]),
+      );
+    }
+  });
 
   return cols;
 };

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -26,7 +26,6 @@ import {
   akEditorGutterPadding,
   akEditorTableNumberColumnWidth,
 } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { TableOptions } from '../../../nodeviews/types';
 
@@ -127,11 +126,10 @@ export const getTableMaxWidth = ({
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
 
-  let maxWidth = getBooleanFF('platform.editor.custom-table-width')
-    ? parentWidth ||
-      table.attrs.width ||
-      getLayoutSize(layout, containerWidth.width, {})
-    : parentWidth || getLayoutSize(layout, containerWidth.width, {});
+  let maxWidth =
+    parentWidth ||
+    table.attrs.width ||
+    getLayoutSize(layout, containerWidth.width, {});
 
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -1,8 +1,11 @@
 // Resize a given column by an amount from the current state
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import { getTableScalingPercent } from './misc';
-import { growColumn, shrinkColumn } from './resize-logic';
+import { TableCssClassName as ClassName } from '../../../types';
+
+import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
+import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 import type { ResizeState } from './types';
 
@@ -16,20 +19,60 @@ export const resizeColumn = (
   isTableScalingEnabled = false,
 ): ResizeState => {
   let scalePercent = 1;
-  let resizeAmount = amount;
+  let resizeAmount = getBooleanFF(
+    'platform.editor.table.colum-resizing-improvements',
+  )
+    ? amount * 2
+    : amount;
 
   if (isTableScalingEnabled) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  const newState =
-    resizeAmount > 0
-      ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-      : resizeAmount < 0
-      ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-      : resizeState;
+
+  const newState = getBooleanFF(
+    'platform.editor.table.colum-resizing-improvements',
+  )
+    ? updateAffectedColumn(resizeState, colIndex, resizeAmount)
+    : resizeAmount > 0
+    ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
+    : resizeAmount < 0
+    ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
+    : resizeState;
 
   updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
 
+  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+    // use the difference in width from affected column to update overall table width
+    const delta =
+      newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+
+    updateTable(delta, tableRef, tableNode);
+    return {
+      ...newState,
+      tableWidth: resizeState.tableWidth + delta,
+    };
+  }
+
   return newState;
 };
+
+const updateTable = (
+  resizeAmount: number,
+  tableRef: HTMLElement,
+  tableNode: PmNode,
+  // isTableScalingEnabled: boolean,
+) => {
+  const currentWidth = getTableContainerElementWidth(tableNode);
+  const resizingContainer = tableRef.closest(
+    `.${ClassName.TABLE_RESIZER_CONTAINER}`,
+  );
+  const resizingItem = resizingContainer?.querySelector('.resizer-item');
+
+  if (resizingContainer && resizingItem) {
+    const newWidth = `${currentWidth + resizeAmount}px`;
+    tableRef.style.width = newWidth;
+    (resizingContainer as HTMLElement).style.width = newWidth;
+    (resizingItem as HTMLElement).style.width = newWidth;
+  }
+};

package/src/pm-plugins/table-resizing/utils/resize-logic.ts

@@ -278,3 +278,28 @@ function getCandidates(
     ? candidates.slice(0, destIdx)
     : candidates.slice(destIdx + 1);
 }
+
+/**
+ * Update the given column based on resizeAmount, maintaining all other columns
+ */
+export function updateAffectedColumn(
+  resizeState: ResizeState,
+  colIndex: number,
+  resizeAmount: number,
+): ResizeState {
+  const updatedCols = resizeState.cols.map((col, index) => {
+    if (index === colIndex) {
+      const newWidth = Math.max(col.width + resizeAmount, col.minWidth);
+      return {
+        ...col,
+        width: newWidth,
+      };
+    }
+    return col;
+  });
+
+  return {
+    ...resizeState,
+    cols: updatedCols,
+  };
+}