@atlaskit/editor-plugin-table 5.0.0 → 5.2.0

package/dist/types-ts4.5/plugins/table/utils/get-allow-add-column-custom-step.d.ts

@@ -0,0 +1,2 @@
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare function getAllowAddColumnCustomStep(state: EditorState): boolean;

package/dist/types-ts4.5/plugins/table/utils/guidelines.d.ts

@@ -0,0 +1,2 @@
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+export declare const defaultGuidelines: GuidelineConfig[];

package/dist/types-ts4.5/plugins/table/utils/index.d.ts

@@ -0,0 +1,11 @@
+export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, isSelectionUpdated, } from './selection';
+export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnLineResize, } from './decoration';
+export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
+export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
+export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
+export type { RowParams } from './row-controls';
+export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
+export { getMergedCellsPositions } from './table';
+export { updatePluginStateDecorations } from './update-plugin-state-decorations';

package/dist/types-ts4.5/plugins/table/utils/nodes.d.ts

@@ -0,0 +1,23 @@
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+export declare const isIsolating: (node: PmNode) => boolean;
+export declare const containsHeaderColumn: (table: PmNode) => boolean;
+export declare const containsHeaderRow: (table: PmNode) => boolean;
+export declare const checkIfHeaderColumnEnabled: (selection: Selection) => boolean;
+export declare const checkIfHeaderRowEnabled: (selection: Selection) => boolean;
+export declare const checkIfNumberColumnEnabled: (selection: Selection) => boolean;
+export declare const isLayoutSupported: (state: EditorState) => boolean;
+export declare const getTableWidth: (node: PmNode) => number;
+export declare const tablesHaveDifferentColumnWidths: (currentTable: PmNode, previousTable: PmNode) => boolean;
+export declare const tablesHaveDifferentNoOfColumns: (currentTable: PmNode, previousTable: PmNode) => boolean;
+export declare const isTableNested: (state: EditorState, tablePos?: number) => boolean;
+export declare const anyChildCellMergedAcrossRow: (node: PmNode) => boolean;
+/**
+ * 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 declare const supportedHeaderRow: (node: PmNode) => boolean;

package/dist/types-ts4.5/plugins/table/utils/paste.d.ts

@@ -0,0 +1,14 @@
+import { Fragment, Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const unwrapContentFromTable: (maybeTable: PMNode) => PMNode | PMNode[];
+export declare const removeTableFromFirstChild: (node: PMNode, i: number) => PMNode | PMNode[];
+export declare const removeTableFromLastChild: (node: PMNode, i: number, fragment: Fragment) => PMNode | PMNode[];
+/**
+ * When we copy from a table cell with a hardBreak at the end,
+ * the slice generated will come with a hardBreak outside of the table.
+ * This code will look for that pattern and fix it.
+ */
+export declare const transformSliceToFixHardBreakProblemOnCopyFromCell: (slice: Slice, schema: Schema) => Slice;
+export declare const transformSliceToRemoveOpenTable: (slice: Slice, schema: Schema) => Slice;
+export declare const transformSliceToCorrectEmptyTableCells: (slice: Slice, schema: Schema) => Slice;
+export declare function isHeaderRowRequired(state: EditorState): boolean | undefined;

package/dist/types-ts4.5/plugins/table/utils/row-controls.d.ts

@@ -0,0 +1,16 @@
+import { Schema } from '@atlaskit/editor-prosemirror/model';
+import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+export interface RowParams {
+    startIndex: number;
+    endIndex: number;
+    height: number;
+}
+export declare const getRowHeights: (tableRef: HTMLTableElement) => number[];
+export declare const isRowDeleteButtonVisible: (selection: Selection) => boolean;
+export declare const getRowDeleteButtonParams: (rowsHeights: Array<number | undefined>, selection: Selection, offsetTop?: number) => {
+    top: number;
+    indexes: number[];
+} | null;
+export declare const getRowsParams: (rowsHeights: Array<number | undefined>) => RowParams[];
+export declare const getRowClassNames: (index: number, selection: Selection, hoveredRows?: number[], isInDanger?: boolean, isResizing?: boolean) => string;
+export declare const copyPreviousRow: (schema: Schema) => (insertNewRowIndex: number) => (tr: Transaction) => Transaction;

package/dist/types-ts4.5/plugins/table/utils/selection.d.ts

@@ -0,0 +1,6 @@
+import { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Rect } from '@atlaskit/editor-tables/table-map';
+export declare const isSelectionUpdated: (oldSelection: Selection, newSelection?: Selection) => boolean;
+export declare const normalizeSelection: (tr: Transaction) => Transaction;
+export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];
+export declare const getSelectedRowIndexes: (selectionRect: Rect) => number[];

package/dist/types-ts4.5/plugins/table/utils/snapping.d.ts

@@ -0,0 +1,10 @@
+import { type GuidelineConfig } from '@atlaskit/editor-common/guideline';
+export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
+export declare const defaultSnappingWidths: number[];
+/**
+ * Returns keys of guidelines that are closest to the table and withthin the snapGap
+ */
+export declare const findClosestSnap: (currentWidth: number, snapWidths: number[], guidelines: GuidelineConfig[], snapGap?: number, tolerance?: number) => {
+    gap: number;
+    keys: string[];
+};

package/dist/types-ts4.5/plugins/table/utils/table.d.ts

@@ -0,0 +1,4 @@
+import { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { Rect } from '@atlaskit/editor-tables/table-map';
+export declare const getMergedCellsPositions: (tr: Transaction) => number[];
+export declare const colsToRect: (cols: Array<number>, noOfRows: number) => Rect;

package/dist/types-ts4.5/plugins/table/utils/update-plugin-state-decorations.d.ts

@@ -0,0 +1,4 @@
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { TableDecorations } from '../types';
+export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;

package/dist/types-ts4.5/plugins/table-plugin.d.ts

@@ -0,0 +1,2 @@
+import { default as tablesPlugin } from './table';
+export default tablesPlugin;

package/dist/types-ts4.5/types/i18n.d.ts

@@ -0,0 +1,5 @@
+export interface MessageDescriptor {
+    id: string;
+    description: string;
+    defaultMessage: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.8.0",
+    "@atlaskit/editor-common": "^76.9.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -39,7 +39,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.26.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/report.api.md

@@ -19,12 +19,10 @@ import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import type { EditorCommand } from '@atlaskit/editor-common/types';
-import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { TableLayout } from '@atlaskit/adf-schema';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 
@@ -70,17 +68,6 @@ interface PluginConfig {
   stickyHeaders?: boolean;
 }
 
-// @public (undocumented)
-type SelectionPlugin = NextEditorPlugin<
-  'selection',
-  {
-    pluginConfiguration: unknown;
-    commands: {
-      displayGapCursor: (toggle: boolean) => EditorCommand;
-    };
-  }
->;
-
 // @public (undocumented)
 export type TablePlugin = NextEditorPlugin<
   'table',
@@ -94,7 +81,7 @@ export type TablePlugin = NextEditorPlugin<
       ContentInsertionPlugin,
       WidthPlugin,
       GuidelinePlugin,
-      OptionalPlugin<SelectionPlugin>,
+      SelectionPlugin,
     ];
   }
 >;
@@ -108,8 +95,6 @@ interface TablePluginOptions {
   // (undocumented)
   dragAndDropEnabled?: boolean;
   // (undocumented)
-  editorSelectionAPI?: EditorSelectionAPI;
-  // (undocumented)
   fullWidthEnabled?: boolean;
   // (undocumented)
   getEditorFeatureFlags?: GetEditorFeatureFlags;

package/src/__tests__/unit/nodeviews/cell.ts

@@ -32,7 +32,7 @@ import {
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
 import tablePlugin from '../../../plugins/table-plugin';
-import TableCellViews from '../../../plugins/table/nodeviews/tableCell';
+import TableCell from '../../../plugins/table/nodeviews/TableCell';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import type { PluginConfig } from '../../../plugins/table/types';
 
@@ -121,7 +121,7 @@ describe('table -> nodeviews -> tableCell.tsx', () => {
       const { state, dispatch } = editorView;
       const cell = findCellClosestToPos(state.doc.resolve(pos))!;
       const background = tableBackgroundColorNames.get('red');
-      const updateSpy = jest.spyOn(TableCellViews.prototype, 'update');
+      const updateSpy = jest.spyOn(TableCell.prototype, 'update');
       dispatch(setCellAttrs(cell, { background })(state.tr));
       expect(updateSpy).toHaveReturnedWith(true);
       const cellDomNode = document.querySelector('td')!;

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

@@ -43,6 +43,10 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
+import {
+  createPlugin as createDragAndDropPlugin,
+  pluginKey as dragAndDropPluginKey,
+} from './pm-plugins/drag-and-drop';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
@@ -180,6 +184,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               breakoutEnabled,
               tableOptions,
               getEditorFeatureFlags,
+              dragAndDropEnabled,
             } = options || ({} as TablePluginOptions);
             return createPlugin(
               dispatchAnalyticsEvent,
@@ -194,6 +199,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               fullWidthEnabled,
               tableResizingEnabled,
               wasFullWidthEnabled,
+              dragAndDropEnabled,
               editorAnalyticsAPI,
               api,
             );
@@ -266,6 +272,13 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 )
               : undefined,
         },
+        {
+          name: 'tableDragAndDrop',
+          plugin: ({ dispatch, eventDispatcher }) =>
+            options?.dragAndDropEnabled
+              ? createDragAndDropPlugin(dispatch, eventDispatcher)
+              : undefined,
+        },
         {
           name: 'tableLocalId',
           plugin: ({ dispatch }) => createTableLocalIdPlugin(dispatch),
@@ -343,6 +356,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               tableWidthPluginState: tableWidthPluginKey,
               tableResizingPluginState: tableResizingPluginKey,
               stickyHeadersState: stickyHeadersPluginKey,
+              dragAndDropState: dragAndDropPluginKey,
             }}
             render={({
               tableResizingPluginState: resizingPluginState,

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;
+}