@atlaskit/editor-plugin-table 5.1.0 → 5.2.1

package/src/plugins/table/{pm-plugins/sticky-headers/nodeviews/tableRow.ts → nodeviews/TableRow.ts}

@@ -3,31 +3,33 @@ import throttle from 'lodash/throttle';
 
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { browser, mapChildren } from '@atlaskit/editor-common/utils';
-import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import { browser } from '@atlaskit/editor-common/utils';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
-import type { TablePluginState } from '../../../types';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
+import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
 import {
-  TableCssClassName as ClassName,
-  TableCssClassName,
-} from '../../../types';
+  syncStickyRowToTable,
+  updateStickyMargins as updateTableMargin,
+} from '../pm-plugins/table-resizing/utils/dom';
+import type { DraggableSourceData, TablePluginState } from '../types';
+import { TableCssClassName as ClassName, TableCssClassName } from '../types';
 import {
   STICKY_HEADER_TOGGLE_TOLERANCE_MS,
   stickyHeaderBorderBottomWidth,
   stickyRowOffsetTop,
   tableControlsSpacing,
   tableScrollbarOffset,
-} from '../../../ui/consts';
-import { pluginKey as tablePluginKey } from '../../plugin-key';
-import {
-  syncStickyRowToTable,
-  updateStickyMargins as updateTableMargin,
-} from '../../table-resizing/utils/dom';
-import { updateStickyState } from '../commands';
+} from '../ui/consts';
+import type { TableDOMElements } from '../utils/dom';
+import { getTop, getTree } from '../utils/dom';
+import { supportedHeaderRow } from '../utils/nodes';
 
-import type { TableDOMElements } from './dom';
-import { getTop, getTree } from './dom';
+import TableNodeView from './TableNodeViewBase';
 
 // limit scroll event calls
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
@@ -36,48 +38,51 @@ const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 // if too short it would trigger too many dom updates.
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 
-const anyChildCellMergedAcrossRow = (node: PmNode) =>
-  mapChildren(node, (child) => child.attrs.rowspan || 0).some(
-    (rowspan) => rowspan > 1,
-  );
-
-/**
- * Check if a given node is a header row with this definition:
- *  - all children are tableHeader cells
- *  - no table cells have been have merged with other table row cells
- *
- * @param node ProseMirror node
- * @return boolean if it meets definition
- */
-export const supportedHeaderRow = (node: PmNode) => {
-  const allHeaders = mapChildren(
-    node,
-    (child) => child.type.name === 'tableHeader',
-  ).every(Boolean);
-
-  const someMerged = anyChildCellMergedAcrossRow(node);
-
-  return allHeaders && !someMerged;
-};
-
-export class TableRowNodeView implements NodeView {
-  view: EditorView;
-  node: PmNode;
-  getPos: () => number;
-  eventDispatcher: EventDispatcher;
-
-  dom: HTMLTableRowElement; // this is the sticky header table row
-  contentDOM: HTMLElement;
-
-  isHeaderRow: boolean;
-  editorScrollableElement?: HTMLElement | Window;
-  colControlsOffset = 0;
-  focused = false;
-  topPosEditorElement = 0;
-  isSticky: boolean;
-  lastStickyTimestamp: number | undefined;
-  lastTimePainted: number;
+export default class TableRow
+  extends TableNodeView<HTMLTableRowElement>
+  implements NodeView
+{
+  constructor(
+    node: PMNode,
+    view: EditorView,
+    getPos: () => number | undefined,
+    eventDispatcher: EventDispatcher,
+  ) {
+    super(node, view, getPos, eventDispatcher);
+
+    this.isHeaderRow = supportedHeaderRow(node);
+    this.isSticky = false;
+
+    const { pluginConfig, isDragAndDropEnabled } = getPluginState(view.state);
 
+    this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
+    this.isDragAndDropEnabled = !!isDragAndDropEnabled;
+
+    if (this.isHeaderRow) {
+      this.dom.setAttribute('data-header-row', 'true');
+      if (this.isStickyHeaderEnabled) {
+        this.subscribe();
+      }
+    }
+
+    if (this.isDragAndDropEnabled) {
+      this.addDropTarget(this.contentDOM);
+    }
+  }
+
+  /**
+   * Variables
+   */
+  private isHeaderRow: boolean;
+  private isStickyHeaderEnabled: boolean;
+  // @ts-ignore
+  private isDragAndDropEnabled: boolean;
+  private editorScrollableElement?: HTMLElement | Window;
+  private colControlsOffset = 0;
+  private focused = false;
+  private topPosEditorElement = 0;
+  private isSticky: boolean;
+  private lastStickyTimestamp: number | undefined;
   private intersectionObserver?: IntersectionObserver;
   private resizeObserver?: ResizeObserver;
   private sentinels: {
@@ -85,54 +90,156 @@ export class TableRowNodeView implements NodeView {
     bottom?: HTMLElement | null;
   } = {};
   private stickyRowHeight?: number;
+  private listening = false;
+  private padding: number = 0;
+  private top: number = 0;
+  private dropTargetCleanup?: () => void;
 
-  get tree(): TableDOMElements | null | undefined {
-    return getTree(this.dom);
-  }
+  /**
+   * Methods: Nodeview Lifecycle
+   */
+  update(node: PMNode, ..._args: any[]) {
+    // do nothing if nodes were identical
+    if (node === this.node) {
+      return true;
+    }
 
-  constructor(
-    node: PmNode,
-    view: EditorView,
-    getPos: any,
-    eventDispatcher: EventDispatcher,
-  ) {
-    this.view = view;
+    // see if we're changing into a header row or
+    // changing away from one
+    const newNodeIsHeaderRow = supportedHeaderRow(node);
+    if (this.isHeaderRow !== newNodeIsHeaderRow) {
+      return false; // re-create nodeview
+    }
+
+    // node is different but no need to re-create nodeview
     this.node = node;
-    this.getPos = getPos;
-    this.eventDispatcher = eventDispatcher;
 
-    this.dom = document.createElement('tr');
-    this.contentDOM = this.dom;
+    // don't do anything if we're just a regular tr
+    if (!this.isHeaderRow) {
+      return true;
+    }
 
-    this.lastTimePainted = 0;
-    this.isHeaderRow = supportedHeaderRow(node);
-    this.isSticky = false;
-    this.lastStickyTimestamp = undefined;
+    // something changed, sync widths
+    if (this.isStickyHeaderEnabled) {
+      const tbody = this.dom.parentElement;
+      const table = tbody && tbody.parentElement;
+      syncStickyRowToTable(table);
+    }
 
-    if (this.isHeaderRow) {
-      this.dom.setAttribute('data-header-row', 'true');
-      this.subscribe();
+    return true;
+  }
+
+  destroy() {
+    if (this.isStickyHeaderEnabled) {
+      this.unsubscribe();
+
+      const tree = getTree(this.dom);
+      if (tree) {
+        this.makeRowHeaderNotSticky(tree.table, true);
+      }
+
+      this.emitOff(true);
     }
+
+    // If a drop target cleanup method has been set then we should call it.
+    this.dropTargetCleanup?.();
   }
 
-  /* external events */
-  listening = false;
+  ignoreMutation(
+    mutationRecord: MutationRecord | { type: 'selection'; target: Element },
+  ) {
+    /* tableRows are not directly editable by the user
+     * so it should be safe to ignore mutations that we cause
+     * by updating styles and classnames on this DOM element
+     *
+     * Update: should not ignore mutations for row selection to avoid known issue with table selection highlight in firefox
+     * Related bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1289673
+     * */
+    const isTableSelection =
+      mutationRecord.type === 'selection' &&
+      mutationRecord.target.nodeName === 'TR';
+    /**
+     * Update: should not ignore mutations when an node is added, as this interferes with
+     * prosemirrors handling of some language inputs in Safari (ie. Pinyin, Hiragana).
+     *
+     * In paticular, when a composition occurs at the start of the first node inside a table cell, if the resulting mutation
+     * from the composition end is ignored than prosemirror will end up with; invalid table markup nesting and a misplaced
+     * selection and insertion.
+     */
+    const isNodeInsertion =
+      mutationRecord.type === 'childList' &&
+      mutationRecord.target.nodeName === 'TR' &&
+      mutationRecord.addedNodes.length;
+
+    if (isTableSelection || isNodeInsertion) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Methods
+   */
+
+  private addDropTarget(element: HTMLElement) {
+    const pos = this.getPos()!;
+    if (!Number.isFinite(pos)) {
+      return;
+    }
+
+    if (this.dropTargetCleanup) {
+      this.dropTargetCleanup();
+    }
+
+    const resolvedPos = this.view.state.doc.resolve(pos);
+    const targetIndex = resolvedPos.index();
+    const localId = resolvedPos.parent.attrs.localId;
+
+    this.dropTargetCleanup = dropTargetForElements({
+      element: element,
+      canDrop({ source }) {
+        const data = source.data as DraggableSourceData;
+        return (
+          // Only draggables of row type can be dropped on this target
+          data.type === 'table-row' &&
+          // Only draggables which came from the same table can be dropped on this target
+          data.localId === localId &&
+          // Only draggables which DO NOT include this drop targets index can be dropped
+          !!data.indexes?.length &&
+          data.indexes?.indexOf(targetIndex) === -1
+        );
+      },
+      getData({ input, element }) {
+        const data = {
+          localId,
+          type: 'table-row',
+          targetIndex,
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom'],
+        });
+      },
+    });
+  }
 
-  headerRowMouseScrollEnd = debounce(() => {
+  private headerRowMouseScrollEnd = debounce(() => {
     this.dom.classList.remove('no-pointer-events');
   }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT);
 
   // When the header is sticky, the header row is set to position: fixed
   // This prevents mouse wheel scrolling on the scroll-parent div when user's mouse is hovering the header row.
   // This fix sets pointer-events: none on the header row briefly to avoid this behaviour
-  headerRowMouseScroll = throttle(() => {
+  private headerRowMouseScroll = throttle(() => {
     if (this.isSticky) {
       this.dom.classList.add('no-pointer-events');
       this.headerRowMouseScrollEnd();
     }
   }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT);
 
-  subscribe() {
+  private subscribe() {
     this.editorScrollableElement =
       findOverflowScrollParent(this.view.dom as HTMLElement) || window;
 
@@ -141,11 +248,14 @@ export class TableRowNodeView implements NodeView {
       this.topPosEditorElement = getTop(this.editorScrollableElement);
     }
 
-    this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
+    this.eventDispatcher.on(
+      'widthPlugin',
+      this.updateStickyHeaderWidth.bind(this),
+    );
 
     this.eventDispatcher.on(
       (tablePluginKey as any).key,
-      this.onTablePluginState,
+      this.onTablePluginState.bind(this),
     );
 
     this.listening = true;
@@ -160,7 +270,7 @@ export class TableRowNodeView implements NodeView {
     );
   }
 
-  unsubscribe() {
+  private unsubscribe() {
     if (!this.listening) {
       return;
     }
@@ -211,7 +321,7 @@ export class TableRowNodeView implements NodeView {
 
     window.requestAnimationFrame(() => {
       // we expect tree to be defined after animation frame
-      const tableContainer = this.tree?.wrapper.closest(
+      const tableContainer = getTree(this.dom)?.wrapper.closest(
         `.${TableCssClassName.NODEVIEW_WRAPPER}`,
       );
       if (tableContainer) {
@@ -236,10 +346,11 @@ export class TableRowNodeView implements NodeView {
   // to allocate for new header height
   private createResizeObserver() {
     this.resizeObserver = new ResizeObserver((entries) => {
-      if (!this.tree) {
+      const tree = getTree(this.dom);
+      if (!tree) {
         return;
       }
-      const { table } = this.tree;
+      const { table } = tree;
       entries.forEach((entry) => {
         // On resize of the parent scroll element we need to adjust the width
         // of the sticky header
@@ -275,10 +386,11 @@ export class TableRowNodeView implements NodeView {
   private createIntersectionObserver() {
     this.intersectionObserver = new IntersectionObserver(
       (entries: IntersectionObserverEntry[], _: IntersectionObserver) => {
-        if (!this.tree) {
+        const tree = getTree(this.dom);
+        if (!tree) {
           return;
         }
-        const { table } = this.tree;
+        const { table } = tree;
 
         if (table.rows.length < 2) {
           // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
@@ -299,8 +411,7 @@ export class TableRowNodeView implements NodeView {
               (entry.rootBounds?.bottom || 0) < entry.boundingClientRect.bottom;
 
             if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
-              this.tree &&
-                this.makeHeaderRowSticky(this.tree, entry.rootBounds?.top);
+              tree && this.makeHeaderRowSticky(tree, entry.rootBounds?.top);
               this.lastStickyTimestamp = Date.now();
             } else {
               table && this.makeRowHeaderNotSticky(table);
@@ -328,8 +439,7 @@ export class TableRowNodeView implements NodeView {
                 this.makeRowHeaderNotSticky(table);
               }
             } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
-              this.tree &&
-                this.makeHeaderRowSticky(this.tree, entry?.rootBounds?.top);
+              tree && this.makeHeaderRowSticky(tree, entry?.rootBounds?.top);
               this.lastStickyTimestamp = Date.now();
             }
           }
@@ -339,94 +449,12 @@ export class TableRowNodeView implements NodeView {
       { root: this.editorScrollableElement as Element },
     );
   }
-
-  /* paint/update loop */
-  previousDomTop: number | undefined;
-  previousPadding: number | undefined;
-
-  latestDomTop: number | undefined;
-
-  nextFrame: number | undefined;
-
-  /* nodeview lifecycle */
-  update(node: PmNode, ..._args: any[]) {
-    // do nothing if nodes were identical
-    if (node === this.node) {
-      return true;
-    }
-
-    // see if we're changing into a header row or
-    // changing away from one
-    const newNodeIsHeaderRow = supportedHeaderRow(node);
-    if (this.isHeaderRow !== newNodeIsHeaderRow) {
-      return false; // re-create nodeview
-    }
-
-    // node is different but no need to re-create nodeview
-    this.node = node;
-
-    // don't do anything if we're just a regular tr
-    if (!this.isHeaderRow) {
-      return true;
-    }
-
-    // something changed, sync widths
-    const tbody = this.dom.parentElement;
-    const table = tbody && tbody.parentElement;
-    syncStickyRowToTable(table);
-
-    return true;
-  }
-
-  destroy() {
-    this.unsubscribe();
-
-    if (this.tree) {
-      this.makeRowHeaderNotSticky(this.tree.table, true);
-    }
-
-    this.emitOff(true);
-  }
-
-  ignoreMutation(
-    mutationRecord: MutationRecord | { type: 'selection'; target: Element },
-  ) {
-    /* tableRows are not directly editable by the user
-     * so it should be safe to ignore mutations that we cause
-     * by updating styles and classnames on this DOM element
-     *
-     * Update: should not ignore mutations for row selection to avoid known issue with table selection highlight in firefox
-     * Related bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1289673
-     * */
-    const isTableSelection =
-      mutationRecord.type === 'selection' &&
-      mutationRecord.target.nodeName === 'TR';
-    /**
-     * Update: should not ignore mutations when an node is added, as this interferes with
-     * prosemirrors handling of some language inputs in Safari (ie. Pinyin, Hiragana).
-     *
-     * In paticular, when a composition occurs at the start of the first node inside a table cell, if the resulting mutation
-     * from the composition end is ignored than prosemirror will end up with; invalid table markup nesting and a misplaced
-     * selection and insertion.
-     */
-    const isNodeInsertion =
-      mutationRecord.type === 'childList' &&
-      mutationRecord.target.nodeName === 'TR' &&
-      mutationRecord.addedNodes.length;
-
-    if (isTableSelection || isNodeInsertion) {
-      return false;
-    }
-
-    return true;
-  }
-
   /* receive external events */
 
-  onTablePluginState = (state: TablePluginState) => {
+  private onTablePluginState(state: TablePluginState) {
     const tableRef = state.tableRef;
 
-    const tree = this.tree;
+    const tree = getTree(this.dom);
     if (!tree) {
       return;
     }
@@ -443,8 +471,8 @@ export class TableRowNodeView implements NodeView {
     const isCurrentTableSelected = tableRef === tree.table;
 
     // If current table selected and header row is toggled off, turn off sticky header
-    if (isCurrentTableSelected && !state.isHeaderRowEnabled && this.tree) {
-      this.makeRowHeaderNotSticky(this.tree.table);
+    if (isCurrentTableSelected && !state.isHeaderRowEnabled && tree) {
+      this.makeRowHeaderNotSticky(tree.table);
     }
     this.focused = isCurrentTableSelected;
 
@@ -481,55 +509,23 @@ export class TableRowNodeView implements NodeView {
     setTimeout(() => {
       syncStickyRowToTable(tree.table);
     }, 0);
-  };
+  }
 
-  updateStickyHeaderWidth = () => {
+  private updateStickyHeaderWidth() {
     // table width might have changed, sync that back to sticky row
-    const tree = this.tree;
+    const tree = getTree(this.dom);
     if (!tree) {
       return;
     }
 
     syncStickyRowToTable(tree.table);
-  };
-
-  shouldHeaderStick = (tree: TableDOMElements): boolean => {
-    const { wrapper } = tree;
-    const tableWrapperRect = wrapper.getBoundingClientRect();
-    const editorAreaRect = (
-      this.editorScrollableElement as HTMLElement
-    ).getBoundingClientRect();
-
-    const stickyHeaderRect = this.contentDOM.getBoundingClientRect();
-    const firstHeaderRow = !this.dom.previousElementSibling;
-    const subsequentRows = !!this.dom.nextElementSibling;
-    const isHeaderValid = firstHeaderRow && subsequentRows;
-
-    // if the table wrapper is less than the editor top pos then make it sticky
-    // Make header sticky if table wrapper top is outside viewport
-    //  but bottom is still in the viewport.
-    if (
-      tableWrapperRect.top < editorAreaRect.top &&
-      tableWrapperRect.bottom > editorAreaRect.top &&
-      isHeaderValid
-    ) {
-      return true;
-    }
-
-    // if the sticky header is below the editor area make it non-sticky
-    if (stickyHeaderRect.top > editorAreaRect.top) {
-      return false;
-    }
-
-    // otherwise make it non-sticky
-    return false;
-  };
+  }
 
   /**
    * Manually refire the intersection observers.
    * Useful when the header may have detached from the table.
    */
-  refireIntersectionObservers = () => {
+  private refireIntersectionObservers() {
     if (this.isSticky) {
       [this.sentinels.top, this.sentinels.bottom].forEach((el) => {
         if (el && this.intersectionObserver) {
@@ -538,9 +534,9 @@ export class TableRowNodeView implements NodeView {
         }
       });
     }
-  };
+  }
 
-  makeHeaderRowSticky = (tree: TableDOMElements, scrollTop?: number) => {
+  private makeHeaderRowSticky(tree: TableDOMElements, scrollTop?: number) {
     // If header row height is more than 50% of viewport height don't do this
     if (
       this.isSticky ||
@@ -596,12 +592,12 @@ export class TableRowNodeView implements NodeView {
     this.dom.scrollLeft = wrapper.scrollLeft;
 
     this.emitOn(domTop, this.colControlsOffset);
-  };
+  }
 
-  makeRowHeaderNotSticky = (
+  private makeRowHeaderNotSticky(
     table: HTMLElement,
     isEditorDestroyed: boolean = false,
-  ) => {
+  ) {
     if (!this.isSticky || !table || !this.dom) {
       return;
     }
@@ -615,59 +611,63 @@ export class TableRowNodeView implements NodeView {
     table.style.removeProperty('margin-top');
 
     this.emitOff(isEditorDestroyed);
-  };
+  }
 
-  getWrapperoffset = (inverse: boolean = false): number => {
+  private getWrapperoffset(inverse: boolean = false): number {
     const focusValue = inverse ? !this.focused : this.focused;
     return focusValue ? 0 : tableControlsSpacing;
-  };
+  }
 
-  getWrapperRefTop = (wrapper: HTMLElement): number =>
-    Math.round(getTop(wrapper)) + this.getWrapperoffset();
+  private getWrapperRefTop(wrapper: HTMLElement): number {
+    return Math.round(getTop(wrapper)) + this.getWrapperoffset();
+  }
 
   // TODO: rename!
-  getScrolledTableTop = (wrapper: HTMLElement): number =>
-    this.getWrapperRefTop(wrapper) - this.topPosEditorElement;
+  private getScrolledTableTop(wrapper: HTMLElement): number {
+    return this.getWrapperRefTop(wrapper) - this.topPosEditorElement;
+  }
 
-  getCurrentTableTop = (tree: TableDOMElements): number =>
-    this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight;
+  private getCurrentTableTop(tree: TableDOMElements): number {
+    return this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight;
+  }
 
   /* emit external events */
 
-  padding = 0;
-  top = 0;
-
-  emitOn = (top: number, padding: number) => {
+  private emitOn(top: number, padding: number) {
     if (top === this.top && padding === this.padding) {
       return;
     }
 
     this.top = top;
     this.padding = padding;
+    const pos = this.getPos()!;
 
-    updateStickyState({
-      pos: this.getPos(),
-      top,
-      sticky: true,
-      padding,
-    })(this.view.state, this.view.dispatch, this.view);
-  };
+    if (Number.isFinite(pos)) {
+      updateStickyState({
+        pos,
+        top,
+        sticky: true,
+        padding,
+      })(this.view.state, this.view.dispatch, this.view);
+    }
+  }
 
-  emitOff = (isEditorDestroyed: boolean) => {
+  private emitOff(isEditorDestroyed: boolean) {
     if (this.top === 0 && this.padding === 0) {
       return;
     }
 
     this.top = 0;
     this.padding = 0;
+    const pos = this.getPos()!;
 
-    if (!isEditorDestroyed) {
+    if (!isEditorDestroyed && Number.isFinite(pos)) {
       updateStickyState({
-        pos: this.getPos(),
+        pos,
         sticky: false,
         top: this.top,
         padding: this.padding,
       })(this.view.state, this.view.dispatch, this.view);
     }
-  };
+  }
 }