@atlaskit/editor-plugin-table 2.5.5 → 2.6.1

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

@@ -7,9 +7,16 @@ import React, {
 } from 'react';
 
 import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import rafSchd from 'raf-schd';
 
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+  TableEventPayload,
+} from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import {
   HandleHeightSizeType,
@@ -17,18 +24,20 @@ import {
   ResizerNext,
 } from '@atlaskit/editor-common/resizer';
 import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+import { TableMap } from '@atlaskit/editor-tables';
 
 import {
   COLUMN_MIN_WIDTH,
   getColgroupChildrenLength,
+  hasTableBeenResized,
   previewScaleTable,
   scaleTable,
 } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
+import { getTableWidth } from '../utils';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
-
 interface TableResizerProps {
   width: number;
   maxWidth: number;
@@ -38,11 +47,37 @@ interface TableResizerProps {
   node: PMNode;
   tableRef: HTMLTableElement;
   displayGuideline: (guideline: GuidelineConfig[]) => boolean;
+  attachAnalyticsEvent: (
+    payload: TableEventPayload,
+  ) => ((tr: Transaction) => boolean) | undefined;
 }
 
 const handles = { right: true };
 const tableHandleMarginTop = 11;
 
+const generateResizedPayload = (props: {
+  originalNode: PMNode;
+  resizedNode: PMNode;
+}): TableEventPayload => {
+  const tableMap = TableMap.get(props.resizedNode);
+
+  return {
+    action: TABLE_ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newWidth: props.resizedNode.attrs.width,
+      prevWidth: props.originalNode.attrs.width ?? null,
+      nodeSize: props.resizedNode.nodeSize,
+      totalTableWidth: hasTableBeenResized(props.resizedNode)
+        ? getTableWidth(props.resizedNode)
+        : null,
+      totalRowCount: tableMap.height,
+      totalColumnCount: tableMap.width,
+    },
+  };
+};
+
 export const TableResizer = ({
   children,
   width,
@@ -53,6 +88,7 @@ export const TableResizer = ({
   node,
   tableRef,
   displayGuideline,
+  attachAnalyticsEvent,
 }: PropsWithChildren<TableResizerProps>) => {
   const currentColumnCount = getColgroupChildrenLength(node);
   const minColumnWidth =
@@ -111,6 +147,7 @@ export const TableResizer = ({
       dispatch,
       state: { tr },
     } = editorView;
+
     dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
 
     setSnappingEnabled(displayGuideline(defaultGuidelines));
@@ -142,19 +179,73 @@ export const TableResizer = ({
           },
           editorView.domAtPos.bind(editorView),
         )(tr);
+
+        const scaledNode = tr.doc.nodeAt(pos)!;
+
+        attachAnalyticsEvent(
+          generateResizedPayload({
+            originalNode: node,
+            resizedNode: scaledNode,
+          }),
+        )?.(tr);
       }
 
       dispatch(tr);
 
       // Hide guidelines when resizing stops
       displayGuideline([]);
+      updateWidth(newWidth);
+
+      return newWidth;
+    },
+    [
+      updateWidth,
+      editorView,
+      getPos,
+      node,
+      tableRef,
+      displayGuideline,
+      attachAnalyticsEvent,
+    ],
+  );
+
+  const handleResize = useCallback(
+    (originalState, delta) => {
+      const newWidth = originalState.width + delta.width;
+      const pos = getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+
+      previewScaleTable(
+        tableRef,
+        {
+          node,
+          prevNode: node,
+          start: pos + 1,
+          parentWidth: newWidth,
+        },
+        editorView.domAtPos.bind(editorView),
+      );
+
+      updateActiveGuidelines(
+        findClosestSnap(
+          newWidth,
+          defaultGuidelineWidths,
+          defaultGuidelines,
+          TABLE_HIGHLIGHT_GAP,
+        ),
+      );
 
       updateWidth(newWidth);
+
       return newWidth;
     },
-    [updateWidth, editorView, getPos, node, tableRef, displayGuideline],
+    [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines],
   );
 
+  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
+
   return (
     <ResizerNext
       enable={handles}
@@ -163,36 +254,7 @@ export const TableResizer = ({
       handleHeightSize={handleHeightSize}
       handleMarginTop={tableHandleMarginTop}
       handleResizeStart={handleResizeStart}
-      handleResize={rafSchd((originalState, delta) => {
-        const newWidth = originalState.width + delta.width;
-        const pos = getPos();
-        if (typeof pos !== 'number') {
-          return;
-        }
-
-        previewScaleTable(
-          tableRef,
-          {
-            node,
-            prevNode: node,
-            start: pos + 1,
-            parentWidth: newWidth,
-          },
-          editorView.domAtPos.bind(editorView),
-        );
-
-        updateActiveGuidelines(
-          findClosestSnap(
-            newWidth,
-            defaultGuidelineWidths,
-            defaultGuidelines,
-            TABLE_HIGHLIGHT_GAP,
-          ),
-        );
-
-        updateWidth(newWidth);
-        return newWidth;
-      })}
+      handleResize={scheduleResize}
       handleResizeStop={handleResizeStop}
       resizeRatio={2}
       minWidth={minColumnWidth}

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

@@ -20,6 +20,7 @@ import type {
   getPosHandlerNode,
 } from '@atlaskit/editor-common/types';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
@@ -49,7 +50,11 @@ const tableAttributes = (
     options?.isTableResizingEnabled && !isTableNested(state, pos);
 
   let style = shouldHaveInlineWidth
-    ? `width: ${getTableContainerWidth(node)}px`
+    ? `width: ${
+        node.attrs.isNumberColumnEnabled
+          ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth
+          : getTableContainerWidth(node)
+      }px`
     : undefined;
 
   return {

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

@@ -2,6 +2,7 @@ import { Node as PMNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
 import type { DomAtPos } from 'prosemirror-utils';
 
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 
@@ -29,6 +30,7 @@ export interface ScaleOptions {
   layoutChanged?: boolean;
   isBreakoutEnabled?: boolean;
   isFullWidthModeEnabled?: boolean;
+  isTableResizingEnabled?: boolean;
 }
 
 // Base function to trigger the actual scale on a table node.
@@ -51,24 +53,27 @@ export const scale = (
     start,
     isBreakoutEnabled,
     layoutChanged,
+    isTableResizingEnabled,
   } = options;
 
-  const maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
-    isBreakoutEnabled,
-  });
+  const maxSize = isTableResizingEnabled
+    ? getTableContainerWidth(node)
+    : getLayoutSize(node.attrs.layout, containerWidth, {
+        isBreakoutEnabled,
+      });
+
   const prevTableWidth = getTableWidth(prevNode);
-  const previousMaxSize = getLayoutSize(
-    prevNode.attrs.layout,
-    previousContainerWidth,
-    {
-      isBreakoutEnabled,
-    },
-  );
+  const previousMaxSize = isTableResizingEnabled
+    ? getTableContainerWidth(node)
+    : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
+        isBreakoutEnabled,
+      });
 
   let newWidth = maxSize;
 
   // adjust table width if layout is updated
   const hasOverflow = prevTableWidth > previousMaxSize;
+
   if (layoutChanged && hasOverflow) {
     // No keep overflow if the old content can be in the new size
     const canFitInNewSize = prevTableWidth < maxSize;
@@ -157,7 +162,11 @@ export const previewScaleTable = (
   }
 
   if (parentWidth) {
-    tableRef.style.width = `${parentWidth}px`;
+    const isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+    const width = isNumberColumnEnabled
+      ? parentWidth - akEditorTableNumberColumnWidth
+      : parentWidth;
+    tableRef.style.width = `${width}px`;
   }
 
   if (!hasTableBeenResized(node)) {
@@ -186,7 +195,6 @@ export const scaleTable =
     }
 
     const { node, start, parentWidth, layoutChanged } = options;
-
     // If a table has not been resized yet, columns should be auto.
     if (hasTableBeenResized(node) === false) {
       // If its not a re-sized table, we still want to re-create cols