@atlaskit/editor-plugin-table 3.0.5 → 3.1.1

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

@@ -6,14 +6,25 @@ import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
 
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
+import type { AnalyticsDispatch } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import type {
   EditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import {
+  analyticsEventKey,
+  browser,
+  isValidPosition,
+} from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
@@ -30,6 +41,7 @@ import {
   findStickyHeaderForTable,
   pluginKey as stickyHeadersPluginKey,
 } from '../pm-plugins/sticky-headers';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
   getLayoutSize,
   insertColgroupFromNode as recreateResizeColsByNode,
@@ -39,7 +51,10 @@ import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import type { PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { tableOverflowShadowWidth } from '../ui/consts';
+import {
+  tableOverflowShadowWidth,
+  tableOverflowShadowWidthWide,
+} from '../ui/consts';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import {
   containsHeaderRow,
@@ -53,6 +68,10 @@ import { TableContainer } from './TableContainer';
 import type { TableOptions } from './types';
 
 const isIE11 = browser.ie_version === 11;
+// When table is inserted via paste, keyboard shortcut or quickInsert,
+// componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
+// To make sure we capture the last update, we use setTimeout.
+const initialOverflowCaptureTimeroutDelay = 300;
 export interface ComponentProps {
   view: EditorView;
   getNode: () => PmNode;
@@ -81,6 +100,7 @@ interface TableState {
   [ShadowEvent.SHOW_BEFORE_SHADOW]: boolean;
   [ShadowEvent.SHOW_AFTER_SHADOW]: boolean;
 }
+
 class TableComponent extends React.Component<ComponentProps, TableState> {
   static displayName = 'TableComponent';
 
@@ -98,11 +118,15 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   private layoutSize?: number;
   private overflowShadowsObserver?: OverflowShadowsObserver;
 
+  private isInitialOverflowSent: boolean;
+  private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
+
   constructor(props: ComponentProps) {
     super(props);
     const { options, containerWidth, getNode } = props;
     this.node = getNode();
     this.containerWidth = containerWidth;
+    this.isInitialOverflowSent = false;
 
     // store table size using previous full-width mode so can detect if it has changed
     const isFullWidthModeEnabled = options
@@ -153,6 +177,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
 
     eventDispatcher.on((stickyHeadersPluginKey as any).key, this.onStickyState);
+
+    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+      const initialIsOveflowing =
+        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    }
   }
 
   componentWillUnmount() {
@@ -181,9 +213,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       (stickyHeadersPluginKey as any).key,
       this.onStickyState,
     );
+
+    if (this.initialOverflowCaptureTimerId) {
+      clearTimeout(this.initialOverflowCaptureTimerId);
+    }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(_: any, prevState: TableState) {
     const {
       view,
       getNode,
@@ -249,6 +285,44 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
       this.handleTableResizingDebounced();
     }
+
+    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+      const newIsOverflowing =
+        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+
+      const prevIsOverflowing =
+        prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        prevState[ShadowEvent.SHOW_AFTER_SHADOW];
+
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
+
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
+
+      if (
+        this.isInitialOverflowSent &&
+        prevIsOverflowing !== newIsOverflowing
+      ) {
+        const {
+          dispatch,
+          state: { tr },
+        } = this.props.view;
+
+        dispatch(
+          tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+            isOverflowing: newIsOverflowing,
+            wasOverflowing: prevIsOverflowing,
+            editorWidth: this.props.containerWidth.width || 0,
+            width: this.node.attrs.width || 0,
+            parentWidth: this.state?.parentWidth || 0,
+          }),
+        );
+      }
+    }
   }
 
   private updateShadowState = (shadowKey: ShadowEvent, value: boolean) => {
@@ -423,7 +497,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             style={{
               position: 'absolute',
               right: getBooleanFF('platform.editor.custom-table-width')
-                ? `${tableOverflowShadowWidth}px`
+                ? `${
+                    getBooleanFF(
+                      'platform.editor.table.increase-shadow-visibility_lh89r',
+                    )
+                      ? tableOverflowShadowWidthWide
+                      : tableOverflowShadowWidth
+                  }px`
                 : '-2px',
             }}
           >
@@ -577,6 +657,32 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     dispatch(tr);
   };
 
+  private setTimerToSendInitialOverflowCaptured = (isOverflowing: boolean) => {
+    const { eventDispatcher, containerWidth, options } = this.props;
+    const dispatch: AnalyticsDispatch = createDispatch(eventDispatcher);
+    const parentWidth = this.state?.parentWidth || 0;
+
+    this.initialOverflowCaptureTimerId = setTimeout(() => {
+      dispatch(analyticsEventKey, {
+        payload: {
+          action: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            editorWidth: containerWidth.width || 0,
+            isOverflowing,
+            tableResizingEnabled: options?.isTableResizingEnabled || false,
+            width: this.node.attrs.width || 0,
+            parentWidth,
+          },
+        },
+      });
+
+      this.isInitialOverflowSent = true;
+    }, initialOverflowCaptureTimeroutDelay);
+  };
+
   private handleAutoSize = () => {
     if (this.table) {
       const { view, getNode, getPos, containerWidth } = this.props;

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

@@ -11,6 +11,7 @@ import rafSchd from 'raf-schd';
 import { defineMessages, useIntl } from 'react-intl-next';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import type {
@@ -25,6 +26,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
   COLUMN_MIN_WIDTH,
   getColgroupChildrenLength,
@@ -215,6 +217,10 @@ export const TableResizer = ({
     tr.setMeta(tableWidthPluginKey, { resizing: true });
     displayGapCursor(false);
 
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED,
+    });
+
     dispatch(tr);
 
     const visibleGuidelines = getVisibleGuidelines(

package/src/plugins/table/pm-plugins/table-analytics.ts

@@ -0,0 +1,102 @@
+/**
+ * A plugin is created for collecting payload data for tableOverflowChanged analytics event
+ */
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+  TABLE_OVERFLOW_CHANGE_TRIGGER,
+} from '@atlaskit/editor-common/analytics';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+
+interface LastTrigger {
+  name: TABLE_OVERFLOW_CHANGE_TRIGGER;
+}
+
+type TableAnalyticsPluginState = {
+  lastTrigger: LastTrigger | undefined;
+};
+
+export const pluginKey = new PluginKey<TableAnalyticsPluginState>(
+  'tableAnalyticsPlugin',
+);
+
+export const META_KEYS = {
+  OVERFLOW_TRIGGER: 'tableOverflowTrigger',
+  OVERFLOW_STATE_CHANGED: 'tableOverflowStateChanged',
+};
+
+const createPlugin = (
+  dispatch: Dispatch,
+  dispatchAnalyticsEvent: DispatchAnalyticsEvent,
+  tableResizingEnabled: boolean,
+) =>
+  new SafePlugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          lastTrigger: undefined,
+        };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(META_KEYS.OVERFLOW_TRIGGER);
+        const newState = { ...pluginState };
+        if (meta) {
+          newState.lastTrigger = { ...meta };
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+
+        return pluginState;
+      },
+    },
+    appendTransaction: (transactions, oldState, newState) => {
+      const newPluginState = pluginKey.getState(newState);
+      let hasAnalyticsBeenDispatched = false;
+      let lastTriggerName =
+        newPluginState?.lastTrigger?.name ||
+        // NOTE: We assume that we know and can correctly differentiate
+        // between all triggers of table overflow state change.
+        // The only trigger we can't identify is viewport width change.
+        // However, since there is still a chance that there are other triggers we didn't think of,
+        // all these unknown triggers and viwport width change trigger are captured as EXTERNAL.
+        TABLE_OVERFLOW_CHANGE_TRIGGER.EXTERNAL;
+
+      transactions.forEach((tr) => {
+        const payload = tr.getMeta(META_KEYS.OVERFLOW_STATE_CHANGED);
+
+        if (payload) {
+          dispatchAnalyticsEvent({
+            action: TABLE_ACTION.OVERFLOW_CHANGED,
+            actionSubject: ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            eventType: EVENT_TYPE.TRACK,
+            attributes: {
+              editorWidth: payload.editorWidth,
+              parentWidth: payload.parentWidth,
+              isOverflowing: payload.isOverflowing,
+              wasOverflowing: payload.wasOverflowing,
+              width: payload.width,
+              tableResizingEnabled,
+              trigger: lastTriggerName,
+            },
+          });
+
+          hasAnalyticsBeenDispatched = true;
+        }
+      });
+
+      if (hasAnalyticsBeenDispatched) {
+        const tr = newState.tr;
+        return tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {});
+      }
+
+      return undefined;
+    },
+  });
+
+export { createPlugin };

package/src/plugins/table/pm-plugins/table-resizing/commands.ts

@@ -1,13 +1,16 @@
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 
 import { updateColumnWidths } from '../../transforms';
+import { META_KEYS } from '../table-analytics';
 
 import { createCommand, getPluginState } from './plugin-factory';
-import { evenAllColumnsWidths, isClickNear, ResizeState } from './utils';
+import type { ResizeState } from './utils';
+import { evenAllColumnsWidths, isClickNear } from './utils';
 
 export const evenColumns =
   ({
@@ -60,6 +63,9 @@ export const distributeColumnsWidths =
         table.node,
         table.start,
       )(state.tr);
+      tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+        name: TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS,
+      });
       stopResizing(tr)(state, dispatch);
     }
 

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

@@ -3,6 +3,7 @@ import {
   ACTION_SUBJECT,
   EVENT_TYPE,
   TABLE_ACTION,
+  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';
@@ -20,6 +21,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
+import { META_KEYS } from '../table-analytics';
 
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
@@ -53,6 +55,14 @@ export const handleMouseDown = (
   }
   event.preventDefault();
 
+  if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+    const tr = view.state.tr;
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN,
+    });
+    dispatch(tr);
+  }
+
   const mouseDownTime = event.timeStamp;
   const cell = state.doc.nodeAt(localResizeHandlePos);
   const $cell = state.doc.resolve(localResizeHandlePos);

package/src/plugins/table/transforms/delete-columns.ts

@@ -1,10 +1,15 @@
-import { CellAttributes } from '@atlaskit/adf-schema';
+import type { CellAttributes } from '@atlaskit/adf-schema';
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
+import { META_KEYS } from '../pm-plugins/table-analytics';
+
 import { splitCellsInColumns } from './split';
 
 const deleteColumnsCustomStep =
@@ -244,6 +249,9 @@ function fixRowSpans(table: PMNode): PMNode | null {
 export const deleteColumns =
   (rect: Rect, allowAddColumnCustomStep = false) =>
   (tr: Transaction): Transaction => {
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN,
+    });
     if (allowAddColumnCustomStep) {
       return deleteColumnsCustomStep(rect)(tr);
     }

package/src/plugins/table/ui/common-styles.ts

@@ -42,6 +42,7 @@ import {
   tableControlsSpacing,
   tableHeaderCellBackgroundColor,
   tableInsertColumnButtonSize,
+  tableOverflowShadowWidth,
   tablePadding,
   tableScrollbarOffset,
   tableTextColor,
@@ -438,6 +439,9 @@ export const tableStyles = (
       &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
         padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
       }
+      .${ClassName.TABLE_LEFT_SHADOW}, .${ClassName.TABLE_RIGHT_SHADOW} {
+        width: ${tableOverflowShadowWidth}px;
+      }
 
       .${ClassName.TABLE_LEFT_SHADOW} {
         left: 6px;

package/src/plugins/table/ui/consts.ts

@@ -141,6 +141,7 @@ export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
 export const tableOverflowShadowWidth = 8;
+export const tableOverflowShadowWidthWide = 32;
 
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;

package/src/plugins/table/ui/ui-styles.ts

@@ -38,6 +38,7 @@ import {
   tableHeaderCellBackgroundColor,
   tableInsertColumnButtonSize,
   tableOverflowShadowWidth,
+  tableOverflowShadowWidthWide,
   tableToolbarDeleteColor,
   tableToolbarSelectedColor,
   tableToolbarSize,
@@ -246,13 +247,22 @@ export const OverflowShadow = (props: ThemeProps) => css`
     pointer-events: none;
     top: ${tableMarginTop}px;
     z-index: ${akEditorShadowZIndex};
-    width: ${tableOverflowShadowWidth}px;
+    width: ${getBooleanFF(
+      'platform.editor.table.increase-shadow-visibility_lh89r',
+    )
+      ? tableOverflowShadowWidthWide
+      : tableOverflowShadowWidth}px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
     background: linear-gradient(
         to left,
         transparent 0,
-        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+        ${token('elevation.shadow.overflow.spread', N40A)}
+          ${getBooleanFF(
+            'platform.editor.table.increase-shadow-visibility_lh89r',
+          )
+            ? 140
+            : 100}%
       ),
       linear-gradient(
         to right,
@@ -268,7 +278,12 @@ export const OverflowShadow = (props: ThemeProps) => css`
     background: linear-gradient(
         to right,
         transparent 0,
-        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+        ${token('elevation.shadow.overflow.spread', N40A)}
+          ${getBooleanFF(
+            'platform.editor.table.increase-shadow-visibility_lh89r',
+          )
+            ? 140
+            : 100}%
       ),
       linear-gradient(
         to left,
@@ -276,8 +291,16 @@ export const OverflowShadow = (props: ThemeProps) => css`
         transparent 1px
       );
     left: ${getBooleanFF('platform.editor.custom-table-width')
-      ? `calc(100% - ${tableOverflowShadowWidth}px)`
-      : 'calc(100% + 2px)'};
+      ? `calc(100% - ${
+          getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r')
+            ? tableOverflowShadowWidthWide
+            : tableOverflowShadowWidth
+        }px)`
+      : `calc(100% - ${
+          getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r')
+            ? tableOverflowShadowWidthWide - 10
+            : -2
+        }px)`};
   }
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {