@atlaskit/editor-plugin-table 5.1.0 → 5.2.0

package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -33,10 +33,11 @@ import {
 
 import tablePlugin from '../../../../plugins/table';
 import TableComponent from '../../../../plugins/table/nodeviews/TableComponent';
+import TableRow from '../../../../plugins/table/nodeviews/TableRow';
 import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
-import { TableRowNodeView } from '../../../../plugins/table/pm-plugins/sticky-headers';
 import { updateStickyState } from '../../../../plugins/table/pm-plugins/sticky-headers/commands';
 import { TableCssClassName } from '../../../../plugins/table/types';
+import type { PluginConfig } from '../../../../plugins/table/types';
 import {
   stickyRowOffsetTop,
   tableScrollbarOffset,
@@ -56,8 +57,17 @@ jest.mock('@atlaskit/editor-common/ui', () => ({
   findOverflowScrollParent: jest.fn(() => jest.fn()),
 }));
 
-describe('TableRowNodeView', () => {
-  let tableRowNodeView: TableRowNodeView;
+describe('TableRow', () => {
+  const tableOptions = {
+    allowNumberColumn: true,
+    allowHeaderRow: true,
+    allowHeaderColumn: true,
+    permittedLayouts: 'all',
+    allowColumnResizing: true,
+    stickyHeaders: true,
+  } as PluginConfig;
+
+  let tableRowNodeView: TableRow;
   const fakeGetEditorFeatureFlags = jest.fn(() => ({}));
   const createEditor = createProsemirrorEditorFactory();
   const editor = (doc: DocBuilder) => {
@@ -72,7 +82,12 @@ describe('TableRowNodeView', () => {
         .add(widthPlugin)
         .add(guidelinePlugin)
         .add(selectionPlugin)
-        .add(tablePlugin),
+        .add([
+          tablePlugin,
+          {
+            tableOptions,
+          },
+        ]),
       pluginKey,
       attachTo: document.body,
     });
@@ -94,121 +109,6 @@ describe('TableRowNodeView', () => {
     toJSON: jest.fn(),
   };
 
-  describe('stickyHeader', () => {
-    beforeEach(() => {
-      const editorWithTableSticky = (doc: DocBuilder) =>
-        createEditor({
-          doc,
-          preset: new Preset<LightEditorPlugin>()
-            .add([featureFlagsPlugin, {}])
-            .add([analyticsPlugin, {}])
-            .add(contentInsertionPlugin)
-            .add(widthPlugin)
-            .add(guidelinePlugin)
-            .add(selectionPlugin)
-            .add(tablePlugin),
-          pluginKey,
-        });
-      const editorData = editorWithTableSticky(
-        doc(table({ localId: '' })(tr(tdEmpty, tdEmpty))),
-      );
-      editorView = editorData.editorView;
-      eventDispatcher = editorData.eventDispatcher;
-      tableRowNode = editorView.state.doc.firstChild!.firstChild!;
-      tableRowDom = editorView.dom.getElementsByTagName('tr')[0];
-      tableRowNodeView = new TableRowNodeView(
-        tableRowNode,
-        editorView,
-        jest.fn(),
-        eventDispatcher,
-      );
-    });
-    afterEach(() => {
-      jest.clearAllMocks();
-    });
-
-    function createBoundingClientRect(rect: any) {
-      return {
-        getBoundingClientRect: () => {
-          return rect;
-        },
-      };
-    }
-
-    function setupMocks(
-      tableRowNodeView: any,
-      editorRect: any,
-      tableRect: any,
-    ) {
-      jest.spyOn(tableRowNodeView as any, 'tree', 'get').mockReturnValue({
-        wrapper: createBoundingClientRect(tableRect),
-      });
-
-      Object.defineProperty(tableRowNodeView, 'editorScrollableElement', {
-        get() {
-          return createBoundingClientRect(editorRect);
-        },
-      });
-      Object.defineProperty(tableRowNodeView, 'dom', {
-        get() {
-          return {
-            previousElementSibling: false,
-            nextElementSibling: true,
-            clientHeight: 20,
-          };
-        },
-      });
-
-      Object.defineProperty(tableRowNodeView, 'topPosEditorElement', {
-        get() {
-          return 50;
-        },
-      });
-    }
-
-    it('should make it sticky if table is taller than viewport', () => {
-      const tableRect = { top: 10, bottom: 110, height: 100 };
-      const editorRect = { top: 50, bottom: 100, height: 50 };
-      setupMocks(tableRowNodeView, editorRect, tableRect);
-      const res = tableRowNodeView.shouldHeaderStick(
-        tableRowNodeView.tree as any,
-      );
-      expect(res).toBe(true);
-    });
-
-    it('should make it sticky if table is lower than the editor', () => {
-      const tableRect = { top: 20, bottom: 120, height: 100 };
-      const editorRect = { top: 50, bottom: 100, height: 50 };
-      setupMocks(tableRowNodeView, editorRect, tableRect);
-      const res = tableRowNodeView.shouldHeaderStick(
-        tableRowNodeView.tree as any,
-      );
-      expect(res).toBe(true);
-    });
-
-    it('should make it non-sticky if table is higher than the editor', () => {
-      const tableRect = { top: 60, bottom: 70, height: 50 };
-      const editorRect = { top: 50, bottom: 150, height: 100 };
-      setupMocks(tableRowNodeView, editorRect, tableRect);
-
-      const res = tableRowNodeView.shouldHeaderStick(
-        tableRowNodeView.tree as any,
-      );
-      expect(res).toBe(false);
-    });
-
-    it('should make it non-sticky if table out of viewport', () => {
-      const tableRect = { top: -50, bottom: 20, height: 70 };
-      const editorRect = { top: 50, bottom: 150, height: 100 };
-      setupMocks(tableRowNodeView, editorRect, tableRect);
-
-      const res = tableRowNodeView.shouldHeaderStick(
-        tableRowNodeView.tree as any,
-      );
-      expect(res).toBe(false);
-    });
-  });
-
   describe('ignoreMutation', () => {
     beforeEach(() => {
       const editorData = editor(
@@ -217,10 +117,10 @@ describe('TableRowNodeView', () => {
       editorView = editorData.editorView;
       eventDispatcher = editorData.eventDispatcher;
       tableRowNode = editorView.state.doc.firstChild!.firstChild!;
-      tableRowNodeView = new TableRowNodeView(
+      tableRowNodeView = new TableRow(
         tableRowNode,
         editorView,
-        jest.fn(),
+        () => 0,
         eventDispatcher,
       );
       tableRowDom = editorView.dom.getElementsByTagName('tr')[0];
@@ -363,10 +263,10 @@ describe('TableRowNodeView', () => {
       tableRowDom = editorView.dom.getElementsByTagName('tr')[0];
       scrollContainer = mockScrollPositions(tableRowDom)!;
 
-      tableRowNodeView = new TableRowNodeView(
+      tableRowNodeView = new TableRow(
         tableRowNode,
         editorView,
-        jest.fn(),
+        () => 0,
         eventDispatcher,
       );
       tableRowNodeView.dom = tableRowDom;
@@ -616,19 +516,14 @@ describe('TableRowNodeView', () => {
       tableRowNode = editorView.state.doc.firstChild!.firstChild!;
       tableRowDom = editorView.dom.getElementsByTagName('tr')[0];
 
-      tableRowNodeView = new TableRowNodeView(
+      tableRowNodeView = new TableRow(
         tableRowNode,
         editorView,
-        jest.fn(),
+        () => 0,
         eventDispatcher,
       );
       tableRowNodeView.dom = tableRowDom;
 
-      // Initialize with sticky off
-      tableRowNodeView.isSticky = false;
-      tableRowNodeView.top = 0;
-      tableRowNodeView.padding = 0;
-
       makeRowHeaderNotStickySpy = jest.spyOn(
         tableRowNodeView as any,
         'makeRowHeaderNotSticky',
@@ -665,23 +560,5 @@ describe('TableRowNodeView', () => {
       });
       expect(makeRowHeaderNotStickySpy).toHaveBeenCalled();
     });
-
-    it('should cause isSticky state to be set to false when called', () => {
-      // Begin test with stickyheaders state on
-      tableRowNodeView.isSticky = true;
-      tableRowNodeView.top = 1;
-      tableRowNodeView.padding = 1;
-
-      tableRowNodeView.makeRowHeaderNotSticky(tableRef);
-
-      expect(updateStickyState).toHaveBeenCalledWith(
-        expect.objectContaining({
-          sticky: false,
-        }),
-      );
-      expect(tableRowNodeView.isSticky).toBe(false);
-      expect(tableRowNodeView.top).toBe(0);
-      expect(tableRowNodeView.padding).toBe(0);
-    });
   });
 });

package/src/plugins/table/index.tsx

@@ -184,6 +184,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               breakoutEnabled,
               tableOptions,
               getEditorFeatureFlags,
+              dragAndDropEnabled,
             } = options || ({} as TablePluginOptions);
             return createPlugin(
               dispatchAnalyticsEvent,
@@ -198,6 +199,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               fullWidthEnabled,
               tableResizingEnabled,
               wasFullWidthEnabled,
+              dragAndDropEnabled,
               editorAnalyticsAPI,
               api,
             );

package/src/plugins/table/nodeviews/{tableCell.tsx → TableCell.ts}

@@ -1,53 +1,62 @@
 import uuid from 'uuid';
 
-import {
-  CellDomAttrs,
-  getCellAttrs,
-  getCellDomAttrs,
-} from '@atlaskit/adf-schema';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { getPosHandler } from '@atlaskit/editor-common/types';
-import { DOMSerializer, Node } from '@atlaskit/editor-prosemirror/model';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { CellDomAttrs } from '@atlaskit/adf-schema';
+import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+
+import { getPluginState } from '../pm-plugins/plugin-factory';
+
+import TableNodeView from './TableNodeViewBase';
 
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;
 
-export default class TableCellNodeView implements NodeView {
-  node: Node;
-  dom: HTMLElement;
-  contentDOM: HTMLElement;
-  getPos: getPosHandler;
-  view: EditorView;
-  providerFactory?: ProviderFactory;
-  observer?: ResizeObserver;
-
+export default class TableCell
+  extends TableNodeView<HTMLElement>
+  implements NodeView
+{
   constructor(
-    node: Node,
+    node: PMNode,
     view: EditorView,
-    getPos: any,
-    observer?: ResizeObserver,
+    getPos: () => number | undefined,
+    eventDispatcher: EventDispatcher,
+    private readonly observer?: ResizeObserver,
   ) {
-    this.view = view;
-    this.node = node;
+    super(node, view, getPos, eventDispatcher);
 
-    const { dom, contentDOM } = DOMSerializer.renderSpec(
-      document,
-      node.type.spec.toDOM!(node),
-    );
+    const { pluginConfig, isDragAndDropEnabled } = getPluginState(view.state);
 
-    this.getPos = getPos;
-    this.dom = dom as HTMLElement;
-    this.contentDOM = contentDOM as HTMLElement;
+    this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
+    this.isDragAndDropEnabled = !!isDragAndDropEnabled;
 
     if (observer) {
       this.contentDOM.id = uuid();
-      this.observer = observer;
       observer.observe(this.contentDOM);
     }
   }
 
-  private updateNodeView(node: Node) {
+  // @ts-ignore
+  private isStickyHeaderEnabled: boolean;
+  // @ts-ignore
+  private isDragAndDropEnabled: boolean;
+
+  update(node: PMNode) {
+    const didUpdate = this.updateNodeView(node);
+    if (didUpdate) {
+      this.node = node;
+    }
+    return didUpdate;
+  }
+
+  destroy() {
+    if (this.observer) {
+      this.observer.unobserve(this.contentDOM);
+    }
+  }
+
+  private updateNodeView(node: PMNode) {
     if (this.node.type !== node.type) {
       return false;
     }
@@ -90,18 +99,4 @@ export default class TableCellNodeView implements NodeView {
 
     return false;
   }
-
-  update(node: Node) {
-    const didUpdate = this.updateNodeView(node);
-    if (didUpdate) {
-      this.node = node;
-    }
-    return didUpdate;
-  }
-
-  destroy() {
-    if (this.observer) {
-      this.observer.unobserve(this.contentDOM);
-    }
-  }
 }

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

@@ -0,0 +1,32 @@
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+
+export default abstract class TableNodeView<T extends HTMLElement>
+  implements NodeView
+{
+  /**
+   * @constructor
+   */
+  constructor(
+    protected node: PmNode,
+    protected readonly view: EditorView,
+    protected readonly getPos: () => number | undefined,
+    protected readonly eventDispatcher: EventDispatcher,
+  ) {
+    const { dom, contentDOM } = DOMSerializer.renderSpec(
+      document,
+      node.type.spec.toDOM!(node),
+    );
+
+    this.dom = dom as T;
+    this.contentDOM = contentDOM as T;
+  }
+
+  /**
+   * Variables
+   */
+  dom: T;
+  contentDOM: T;
+}