@atlaskit/editor-plugin-table 0.1.0 → 0.1.1

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

@@ -179,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);
@@ -276,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)) {
@@ -296,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;
@@ -482,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

@@ -47,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/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();

package/src/plugins/table/nodeviews/update-overflow-shadows.ts

@@ -22,51 +22,51 @@ export const updateShadowListForStickyStyles = (
  * Update overflow shadows for a given wrapper & table.
  * if `overflowShadowOptimization` is enabled, this will exit early.
  */
-export const updateOverflowShadows = (
-  getEditorFeatureFlags: GetEditorFeatureFlags,
-) => (
-  editorState: EditorState,
-  wrapper?: HTMLElement | null,
-  table?: HTMLElement | null,
-  rightShadows?: NodeListOf<HTMLElement> | null,
-  leftShadows?: NodeListOf<HTMLElement> | null,
-) => {
-  if (getEditorFeatureFlags()?.tableOverflowShadowsOptimization === true) {
-    return false;
-  }
-  // Right shadow
-  if (table && wrapper) {
-    const stickyRow = wrapper.querySelector('tr.sticky');
-    const stickyCell = stickyRow && stickyRow.firstElementChild;
+export const updateOverflowShadows =
+  (getEditorFeatureFlags: GetEditorFeatureFlags) =>
+  (
+    editorState: EditorState,
+    wrapper?: HTMLElement | null,
+    table?: HTMLElement | null,
+    rightShadows?: NodeListOf<HTMLElement> | null,
+    leftShadows?: NodeListOf<HTMLElement> | null,
+  ) => {
+    if (getEditorFeatureFlags()?.tableOverflowShadowsOptimization === true) {
+      return false;
+    }
+    // Right shadow
+    if (table && wrapper) {
+      const stickyRow = wrapper.querySelector('tr.sticky');
+      const stickyCell = stickyRow && stickyRow.firstElementChild;
 
-    if (rightShadows) {
-      const diff = table.offsetWidth - wrapper.offsetWidth;
+      if (rightShadows) {
+        const diff = table.offsetWidth - wrapper.offsetWidth;
 
-      for (let i = 0; i < rightShadows.length; i++) {
-        const rightShadow = rightShadows[i];
-        rightShadow.style.display =
-          diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
+        for (let i = 0; i < rightShadows.length; i++) {
+          const rightShadow = rightShadows[i];
+          rightShadow.style.display =
+            diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
 
-        if (
-          rightShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
-          stickyCell
-        ) {
-          rightShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+          if (
+            rightShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
+            stickyCell
+          ) {
+            rightShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+          }
         }
       }
-    }
-    if (leftShadows) {
-      for (let i = 0; i < leftShadows.length; i++) {
-        const leftShadow = leftShadows[i];
-        leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
+      if (leftShadows) {
+        for (let i = 0; i < leftShadows.length; i++) {
+          const leftShadow = leftShadows[i];
+          leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
 
-        if (
-          leftShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
-          stickyCell
-        ) {
-          leftShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+          if (
+            leftShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
+            stickyCell
+          ) {
+            leftShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+          }
         }
       }
     }
-  }
-};
+  };

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -65,16 +65,14 @@ const removeColumnControlsSelectedDecoration: DecorationTransformer = ({
 const hasColumnSelectedDecorations = (decorationSet: DecorationSet): boolean =>
   !!findColumnControlSelectedDecoration(decorationSet).length;
 
-export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer = ({
-  decorationSet,
-  tr,
-}): DecorationSet => {
-  if (!hasColumnSelectedDecorations(decorationSet)) {
-    return decorationSet;
-  }
+export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer =
+  ({ decorationSet, tr }): DecorationSet => {
+    if (!hasColumnSelectedDecorations(decorationSet)) {
+      return decorationSet;
+    }
 
-  return removeColumnControlsSelectedDecoration({ decorationSet, tr });
-};
+    return removeColumnControlsSelectedDecoration({ decorationSet, tr });
+  };
 
 export const buildColumnControlsDecorations: DecorationTransformer = ({
   decorationSet,