@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

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

@@ -23,7 +23,6 @@ import {
   isLastItemMediaGroup,
   setNodeSelection,
 } from '@atlaskit/editor-common/utils';
-// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
@@ -180,9 +179,8 @@ export const handleMouseOver = (
   }
   const { state, dispatch } = view;
   const target = mouseEvent.target;
-  const { insertColumnButtonIndex, insertRowButtonIndex } = getPluginState(
-    state,
-  );
+  const { insertColumnButtonIndex, insertRowButtonIndex } =
+    getPluginState(state);
 
   if (isInsertRowButton(target)) {
     const [startIndex, endIndex] = getColumnOrRowIndex(target);
@@ -277,9 +275,8 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   }
 
   const { state, dispatch } = view;
-  const { insertColumnButtonIndex, insertRowButtonIndex } = getPluginState(
-    state,
-  );
+  const { insertColumnButtonIndex, insertRowButtonIndex } =
+    getPluginState(state);
 
   const target = event.target;
   if (isTableControlsButton(target)) {
@@ -297,99 +294,99 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   return false;
 };
 
-export const handleMouseMove = (
-  getEditorFeatureFlags: GetEditorFeatureFlags,
-) => (
-  view: EditorView,
-  event: Event,
-  tableCellOptimization?: boolean,
-  elementContentRects?: ElementContentRects,
-) => {
-  if (!(event.target instanceof HTMLElement)) {
-    return false;
-  }
-  const element = event.target;
-
-  if (isColumnControlsDecorations(element)) {
-    const { state, dispatch } = view;
-    const { insertColumnButtonIndex } = getPluginState(state);
-    const [startIndex, endIndex] = getColumnOrRowIndex(element);
-
-    const positionColumn =
-      getMousePositionHorizontalRelativeByElement(
-        event as MouseEvent,
-        tableCellOptimization,
-        elementContentRects,
-      ) === 'right'
-        ? endIndex
-        : startIndex;
+export const handleMouseMove =
+  (getEditorFeatureFlags: GetEditorFeatureFlags) =>
+  (
+    view: EditorView,
+    event: Event,
+    tableCellOptimization?: boolean,
+    elementContentRects?: ElementContentRects,
+  ) => {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
+    }
+    const element = event.target;
 
-    if (positionColumn !== insertColumnButtonIndex) {
-      return showInsertColumnButton(positionColumn)(state, dispatch);
+    if (isColumnControlsDecorations(element)) {
+      const { state, dispatch } = view;
+      const { insertColumnButtonIndex } = getPluginState(state);
+      const [startIndex, endIndex] = getColumnOrRowIndex(element);
+
+      const positionColumn =
+        getMousePositionHorizontalRelativeByElement(
+          event as MouseEvent,
+          tableCellOptimization,
+          elementContentRects,
+        ) === 'right'
+          ? endIndex
+          : startIndex;
+
+      if (positionColumn !== insertColumnButtonIndex) {
+        return showInsertColumnButton(positionColumn)(state, dispatch);
+      }
     }
-  }
 
-  if (isRowControlsButton(element)) {
-    const { state, dispatch } = view;
-    const { insertRowButtonIndex } = getPluginState(state);
-    const [startIndex, endIndex] = getColumnOrRowIndex(element);
+    if (isRowControlsButton(element)) {
+      const { state, dispatch } = view;
+      const { insertRowButtonIndex } = getPluginState(state);
+      const [startIndex, endIndex] = getColumnOrRowIndex(element);
 
-    const positionRow =
-      getMousePositionVerticalRelativeByElement(event as MouseEvent) ===
-      'bottom'
-        ? endIndex
-        : startIndex;
+      const positionRow =
+        getMousePositionVerticalRelativeByElement(event as MouseEvent) ===
+        'bottom'
+          ? endIndex
+          : startIndex;
 
-    if (positionRow !== insertRowButtonIndex) {
-      return showInsertRowButton(positionRow)(state, dispatch);
+      if (positionRow !== insertRowButtonIndex) {
+        return showInsertRowButton(positionRow)(state, dispatch);
+      }
     }
-  }
 
-  const { mouseMoveOptimization } = getEditorFeatureFlags();
-  // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
-  // because it relies on tableCell node view that is added  via tableCellOptimization
-  const useMouseMoveOptimisation =
-    tableCellOptimization && mouseMoveOptimization;
-
-  if (!isResizeHandleDecoration(element) && isCell(element)) {
-    const positionColumn = getMousePositionHorizontalRelativeByElement(
-      event as MouseEvent,
-      useMouseMoveOptimisation,
-      elementContentRects,
-      RESIZE_HANDLE_AREA_DECORATION_GAP,
-    );
+    const { mouseMoveOptimization } = getEditorFeatureFlags();
+    // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
+    // because it relies on tableCell node view that is added  via tableCellOptimization
+    const useMouseMoveOptimisation =
+      tableCellOptimization && mouseMoveOptimization;
 
-    if (positionColumn !== null) {
-      const { state, dispatch } = view;
-      const { resizeHandleColumnIndex } = getPluginState(state);
-      const tableCell = closestElement(
-        element,
-        'td, th',
-      ) as HTMLTableCellElement;
-      const cellStartPosition = view.posAtDOM(tableCell, 0);
-      const rect = findCellRectClosestToPos(
-        state.doc.resolve(cellStartPosition),
+    if (!isResizeHandleDecoration(element) && isCell(element)) {
+      const positionColumn = getMousePositionHorizontalRelativeByElement(
+        event as MouseEvent,
+        useMouseMoveOptimisation,
+        elementContentRects,
+        RESIZE_HANDLE_AREA_DECORATION_GAP,
       );
 
-      if (rect) {
-        const columnEndIndexTarget =
-          positionColumn === 'left' ? rect.left : rect.right;
-
-        if (
-          columnEndIndexTarget !== resizeHandleColumnIndex ||
-          !hasResizeHandler({ target: element, columnEndIndexTarget })
-        ) {
-          return addResizeHandleDecorations(columnEndIndexTarget)(
-            state,
-            dispatch,
-          );
+      if (positionColumn !== null) {
+        const { state, dispatch } = view;
+        const { resizeHandleColumnIndex } = getPluginState(state);
+        const tableCell = closestElement(
+          element,
+          'td, th',
+        ) as HTMLTableCellElement;
+        const cellStartPosition = view.posAtDOM(tableCell, 0);
+        const rect = findCellRectClosestToPos(
+          state.doc.resolve(cellStartPosition),
+        );
+
+        if (rect) {
+          const columnEndIndexTarget =
+            positionColumn === 'left' ? rect.left : rect.right;
+
+          if (
+            columnEndIndexTarget !== resizeHandleColumnIndex ||
+            !hasResizeHandler({ target: element, columnEndIndexTarget })
+          ) {
+            return addResizeHandleDecorations(columnEndIndexTarget)(
+              state,
+              dispatch,
+            );
+          }
         }
       }
     }
-  }
 
-  return false;
-};
+    return false;
+  };
 
 export function handleTripleClick(view: EditorView, pos: number) {
   const { state, dispatch } = view;
@@ -483,31 +480,33 @@ export const handleCut = (
   return tr;
 };
 
-export const whenTableInFocus = (
-  eventHandler: (
-    view: EditorView,
-    mouseEvent: Event,
-    tableCellOptimization?: boolean,
+export const whenTableInFocus =
+  (
+    eventHandler: (
+      view: EditorView,
+      mouseEvent: Event,
+      tableCellOptimization?: boolean,
+      elementContentRects?: ElementContentRects,
+    ) => boolean,
     elementContentRects?: ElementContentRects,
-  ) => boolean,
-  elementContentRects?: ElementContentRects,
-) => (view: EditorView, mouseEvent: Event): boolean => {
-  const tableResizePluginState = getResizePluginState(view.state);
-  const tablePluginState = getPluginState(view.state);
-  const isDragging =
-    tableResizePluginState && !!tableResizePluginState.dragging;
-  const hasTableNode = tablePluginState && tablePluginState.tableNode;
-  const tableCellOptimization =
-    tablePluginState?.pluginConfig?.tableCellOptimization;
-
-  if (!hasTableNode || isDragging) {
-    return false;
-  }
+  ) =>
+  (view: EditorView, mouseEvent: Event): boolean => {
+    const tableResizePluginState = getResizePluginState(view.state);
+    const tablePluginState = getPluginState(view.state);
+    const isDragging =
+      tableResizePluginState && !!tableResizePluginState.dragging;
+    const hasTableNode = tablePluginState && tablePluginState.tableNode;
+    const tableCellOptimization =
+      tablePluginState?.pluginConfig?.tableCellOptimization;
+
+    if (!hasTableNode || isDragging) {
+      return false;
+    }
 
-  return eventHandler(
-    view,
-    mouseEvent,
-    tableCellOptimization,
-    elementContentRects,
-  );
-};
+    return eventHandler(
+      view,
+      mouseEvent,
+      tableCellOptimization,
+      elementContentRects,
+    );
+  };

package/src/plugins/table/handlers.ts

@@ -3,7 +3,6 @@ import { Transaction, ReadonlyTransaction } from 'prosemirror-state';
 import { ContentNodeWithPos, findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
-// import { isTextInput } from '../../utils/is-text-input';
 import { isTextInput } from '@atlaskit/editor-common/utils';
 import { isTableCollapsible } from './utils/collapse';
 
@@ -48,112 +47,113 @@ type BuilderTablePluginState = (props: {
   table?: ContentNodeWithPos;
 }) => (pluginState: TablePluginState) => TablePluginState;
 
-const updateTargetCellPosition: BuilderTablePluginState = ({ tr, table }) => (
-  pluginState: TablePluginState,
-) => {
-  const tableNode = table && table.node;
-  if (!tableNode) {
+const updateTargetCellPosition: BuilderTablePluginState =
+  ({ tr, table }) =>
+  (pluginState: TablePluginState) => {
+    const tableNode = table && table.node;
+    if (!tableNode) {
+      return {
+        ...pluginState,
+        targetCellPosition: undefined,
+      };
+    }
+
+    const { tableCell, tableHeader } = tr.doc.type.schema.nodes;
+    const cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
+    const targetCellPosition = cell ? cell.pos : undefined;
+
+    if (pluginState.targetCellPosition === targetCellPosition) {
+      return pluginState;
+    }
+
     return {
       ...pluginState,
-      targetCellPosition: undefined,
+      targetCellPosition,
     };
-  }
-
-  const { tableCell, tableHeader } = tr.doc.type.schema.nodes;
-  const cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
-  const targetCellPosition = cell ? cell.pos : undefined;
-
-  if (pluginState.targetCellPosition === targetCellPosition) {
-    return pluginState;
-  }
-
-  return {
-    ...pluginState,
-    targetCellPosition,
   };
-};
 
-const updateTableNodePluginState: BuilderTablePluginState = ({ tr, table }) => (
-  pluginState,
-) => {
-  const tableNode = table && table.node;
+const updateTableNodePluginState: BuilderTablePluginState =
+  ({ tr, table }) =>
+  (pluginState) => {
+    const tableNode = table && table.node;
 
-  if (!tableNode || isTextInput(tr)) {
-    return pluginState;
-  }
+    if (!tableNode || isTextInput(tr)) {
+      return pluginState;
+    }
 
-  return {
-    ...pluginState,
-    ...defaultTableSelection,
-    tableNode,
-    ordering: nextTableSorting(tr, table),
-    resizeHandleColumnIndex: nextResizeHandleColumnIndex(
-      tr,
-      pluginState.resizeHandleColumnIndex,
-    ),
-    isNumberColumnEnabled: checkIfNumberColumnEnabled(tr.selection),
-    isHeaderColumnEnabled: checkIfHeaderColumnEnabled(tr.selection),
-    isHeaderRowEnabled: checkIfHeaderRowEnabled(tr.selection),
-  };
-};
-
-const updateCollapseHandler: BuilderTablePluginState = ({ tr, table }) => (
-  pluginState,
-) => {
-  const tableNode = table && table.node;
-  const schema = tr.doc.type.schema;
-  const allowCollapse = pluginState.pluginConfig.allowCollapse;
-  const isExpandInSchema = schema.nodes.expand !== undefined;
-  const isCollapseEnabled = allowCollapse && isExpandInSchema;
-
-  /**
-   * If we don't have focus, or collapse isn't allowed, or a table node doesn't
-   * exist, we don't need to waste extra checks below
-   */
-  if (!pluginState.editorHasFocus || !isCollapseEnabled || !tableNode) {
-    return pluginState;
-  }
-
-  const expandNodeType = schema.nodes.expand as NodeType;
-  const isTableCollapsed =
-    expandNodeType && !!findParentNodeOfType(expandNodeType)(tr.selection);
-
-  const trCanBeCollapsed = isTableCollapsible(tr).tableIsCollapsible;
-
-  // We're focused on a table + we're not inside an expand
-  const canCollapseTable: boolean =
-    !!pluginState.tableNode &&
-    // is it already collapsed?
-    !isTableCollapsed &&
-    !!trCanBeCollapsed;
-
-  if (
-    pluginState.isTableCollapsed !== isTableCollapsed ||
-    pluginState.canCollapseTable !== canCollapseTable
-  ) {
     return {
       ...pluginState,
-      isTableCollapsed,
-      canCollapseTable,
+      ...defaultTableSelection,
+      tableNode,
+      ordering: nextTableSorting(tr, table),
+      resizeHandleColumnIndex: nextResizeHandleColumnIndex(
+        tr,
+        pluginState.resizeHandleColumnIndex,
+      ),
+      isNumberColumnEnabled: checkIfNumberColumnEnabled(tr.selection),
+      isHeaderColumnEnabled: checkIfHeaderColumnEnabled(tr.selection),
+      isHeaderRowEnabled: checkIfHeaderRowEnabled(tr.selection),
     };
-  }
+  };
 
-  return pluginState;
-};
+const updateCollapseHandler: BuilderTablePluginState =
+  ({ tr, table }) =>
+  (pluginState) => {
+    const tableNode = table && table.node;
+    const schema = tr.doc.type.schema;
+    const allowCollapse = pluginState.pluginConfig.allowCollapse;
+    const isExpandInSchema = schema.nodes.expand !== undefined;
+    const isCollapseEnabled = allowCollapse && isExpandInSchema;
+
+    /**
+     * If we don't have focus, or collapse isn't allowed, or a table node doesn't
+     * exist, we don't need to waste extra checks below
+     */
+    if (!pluginState.editorHasFocus || !isCollapseEnabled || !tableNode) {
+      return pluginState;
+    }
+
+    const expandNodeType = schema.nodes.expand as NodeType;
+    const isTableCollapsed =
+      expandNodeType && !!findParentNodeOfType(expandNodeType)(tr.selection);
+
+    const trCanBeCollapsed = isTableCollapsible(tr).tableIsCollapsible;
+
+    // We're focused on a table + we're not inside an expand
+    const canCollapseTable: boolean =
+      !!pluginState.tableNode &&
+      // is it already collapsed?
+      !isTableCollapsed &&
+      !!trCanBeCollapsed;
+
+    if (
+      pluginState.isTableCollapsed !== isTableCollapsed ||
+      pluginState.canCollapseTable !== canCollapseTable
+    ) {
+      return {
+        ...pluginState,
+        isTableCollapsed,
+        canCollapseTable,
+      };
+    }
 
-const buildPluginState = (
-  builders: Array<BuilderTablePluginState>,
-): BuilderTablePluginState => (props) => (pluginState) => {
-  if (!props.table) {
-    return pluginState.targetCellPosition
-      ? { ...pluginState, targetCellPosition: undefined }
-      : pluginState;
-  }
-  return builders.reduce(
-    (_pluginState, transform) => transform(props)(_pluginState),
-    pluginState,
-  );
-};
+    return pluginState;
+  };
+
+const buildPluginState =
+  (builders: Array<BuilderTablePluginState>): BuilderTablePluginState =>
+  (props) =>
+  (pluginState) => {
+    if (!props.table) {
+      return pluginState.targetCellPosition
+        ? { ...pluginState, targetCellPosition: undefined }
+        : pluginState;
+    }
+    return builders.reduce(
+      (_pluginState, transform) => transform(props)(_pluginState),
+      pluginState,
+    );
+  };
 
 export const handleDocOrSelectionChanged = (
   tr: Transaction | ReadonlyTransaction,

package/src/plugins/table/index.tsx

@@ -20,6 +20,7 @@ import {
   ACTION_SUBJECT_ID,
   EVENT_TYPE,
   INPUT_METHOD,
+  TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 
@@ -59,6 +60,7 @@ import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
+import { EditorState, Transaction } from 'prosemirror-state';
 
 interface TablePluginOptions {
   tableOptions: PluginConfig;
@@ -177,8 +179,31 @@ const tablesPlugin = (options?: TablePluginOptions): EditorPlugin => {
           name: 'tableSelectionKeymap',
           plugin: () => tableSelectionKeymapPlugin(options?.editorSelectionAPI),
         },
-        { name: 'tableEditing', plugin: () => tableEditing() as SafePlugin },
-
+        {
+          name: 'tableEditing',
+          plugin: () =>
+            tableEditing({
+              reportFixedTable: ({
+                state,
+                tr,
+                reason,
+              }: {
+                state: EditorState;
+                tr: Transaction;
+                reason: string;
+              }) => {
+                options?.editorAnalyticsAPI?.attachAnalyticsEvent({
+                  action: TABLE_ACTION.FIXED,
+                  actionSubject: ACTION_SUBJECT.TABLE,
+                  actionSubjectId: null,
+                  attributes: {
+                    reason,
+                  },
+                  eventType: EVENT_TYPE.TRACK,
+                })(tr);
+              },
+            }) as SafePlugin,
+        },
         {
           name: 'tableStickyHeaders',
           plugin: ({ dispatch, eventDispatcher }) =>
@@ -432,6 +457,7 @@ const tablesPlugin = (options?: TablePluginOptions): EditorPlugin => {
       floatingToolbar: getToolbarConfig(
         defaultGetEditorContainerWidth,
         options?.editorAnalyticsAPI,
+        options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
       )(pluginConfig(options?.tableOptions)),
     },
   };

package/src/plugins/table/nodeviews/OverflowShadowsObserver.ts

@@ -170,9 +170,10 @@ export class OverflowShadowsObserver {
     }px`;
     // Use getElementsByClassName here for a live node list to capture
     // sticky shadows
-    const liveRightShadows = this.wrapper?.parentElement?.getElementsByClassName(
-      `${ClassName.TABLE_RIGHT_SHADOW}`,
-    );
+    const liveRightShadows =
+      this.wrapper?.parentElement?.getElementsByClassName(
+        `${ClassName.TABLE_RIGHT_SHADOW}`,
+      );
     const liveLeftShadows = this.wrapper?.parentElement?.getElementsByClassName(
       `${ClassName.TABLE_LEFT_SHADOW}`,
     );

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

@@ -198,9 +198,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   componentDidUpdate(prevProps: ComponentProps) {
     const { getNode, isMediaFullscreen, allowColumnResizing } = this.props;
 
-    const {
-      tableOverflowShadowsOptimization,
-    } = this.props.getEditorFeatureFlags();
+    const { tableOverflowShadowsOptimization } =
+      this.props.getEditorFeatureFlags();
 
     if (!tableOverflowShadowsOptimization) {
       this.updateShadows();
@@ -281,9 +280,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   };
 
   onStickyState = (state: StickyPluginState) => {
-    const {
-      tableOverflowShadowsOptimization,
-    } = this.props.getEditorFeatureFlags();
+    const { tableOverflowShadowsOptimization } =
+      this.props.getEditorFeatureFlags();
 
     const pos = this.props.getPos();
     if (!isValidPosition(pos, this.props.view.state)) {
@@ -507,9 +505,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       }
     }
 
-    const {
-      tableOverflowShadowsOptimization,
-    } = this.props.getEditorFeatureFlags();
+    const { tableOverflowShadowsOptimization } =
+      this.props.getEditorFeatureFlags();
 
     if (!tableOverflowShadowsOptimization) {
       this.updateShadows();