@atlaskit/editor-plugin-table 5.1.0 → 5.2.1

package/src/plugins/table/pm-plugins/main.ts

@@ -25,10 +25,8 @@ import {
 import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
-  getPosHandler,
 } from '@atlaskit/editor-common/types';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
-import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type {
   EditorState,
   TextSelection,
@@ -67,7 +65,8 @@ import {
   whenTableInFocus,
 } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
-import TableCellNodeView from '../nodeviews/tableCell';
+import TableCell from '../nodeviews/TableCell';
+import TableRow from '../nodeviews/TableRow';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { fixTables, replaceSelectedTable } from '../transforms';
 import type {
@@ -103,6 +102,7 @@ export const createPlugin = (
   fullWidthModeEnabled?: boolean,
   tableResizingEnabled?: boolean,
   previousFullWidthModeEnabled?: boolean,
+  dragAndDropEnabled?: boolean,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   pluginInjectionApi?: PluginInjectionAPI,
 ) => {
@@ -116,6 +116,7 @@ export const createPlugin = (
     isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
+    isDragAndDropEnabled: dragAndDropEnabled,
     ...defaultTableSelection,
     getIntl,
   });
@@ -133,19 +134,6 @@ export const createPlugin = (
       })
     : undefined;
 
-  const tableCellNodeview = {
-    tableCell: (
-      node: ProseMirrorNode,
-      view: EditorView,
-      getPos: getPosHandler,
-    ) => new TableCellNodeView(node, view, getPos, observer),
-    tableHeader: (
-      node: ProseMirrorNode,
-      view: EditorView,
-      getPos: getPosHandler,
-    ) => new TableCellNodeView(node, view, getPos, observer),
-  };
-
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds: string[] = [];
   let editorViewRef: EditorView | null = null;
@@ -365,9 +353,7 @@ export const createPlugin = (
         }
         return false;
       },
-
       nodeViews: {
-        ...tableCellNodeview,
         table: (node, view, getPos) =>
           createTableView(
             node,
@@ -379,8 +365,13 @@ export const createPlugin = (
             getEditorFeatureFlags,
             pluginInjectionApi,
           ),
+        tableRow: (node, view, getPos) =>
+          new TableRow(node, view, getPos, eventDispatcher),
+        tableCell: (node, view, getPos) =>
+          new TableCell(node, view, getPos, eventDispatcher, observer),
+        tableHeader: (node, view, getPos) =>
+          new TableCell(node, view, getPos, eventDispatcher, observer),
       },
-
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,

package/src/plugins/table/pm-plugins/sticky-headers/index.ts

@@ -4,4 +4,3 @@ export type { StickyPluginState, RowStickyState } from './types';
 
 export { findStickyHeaderForTable } from './util';
 export { updateStickyState, removeStickyState } from './commands';
-export { TableRowNodeView } from './nodeviews/tableRow';

package/src/plugins/table/pm-plugins/sticky-headers/plugin.ts

@@ -1,11 +1,10 @@
-import {
+import type {
   Dispatch,
   EventDispatcher,
 } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 
-import { TableRowNodeView } from './nodeviews/tableRow';
 import { pluginKey } from './plugin-key';
 import { createPluginState } from './plugin-state';
 
@@ -18,12 +17,5 @@ export const createPlugin = (
   return new SafePlugin({
     state: createPluginState(dispatch, initialState),
     key: pluginKey,
-    props: {
-      nodeViews: {
-        tableRow: (node, view, getPos) => {
-          return new TableRowNodeView(node, view, getPos, eventDispatcher);
-        },
-      },
-    },
   });
 };

package/src/plugins/table/types.ts

@@ -121,6 +121,8 @@ export interface TablePluginState {
   isBreakoutEnabled?: boolean;
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
+
+  isDragAndDropEnabled?: boolean;
 }
 
 export type TablePluginAction =
@@ -365,3 +367,19 @@ export type InvalidNodeAttr = {
   spanValue: number;
   tableLocalId: string;
 };
+
+/**
+ * Drag and Drop interfaces
+ */
+export type DraggableType = 'table-row' | 'table-column';
+export interface DraggableSourceData extends Record<string, unknown> {
+  type: DraggableType;
+  localId: string;
+  indexes: number[];
+}
+
+export interface DraggableTargetData extends Record<string, unknown> {
+  type: DraggableType;
+  localId: string;
+  targetIndex: number;
+}

package/src/plugins/table/utils/dom.ts

@@ -203,3 +203,41 @@ export const hasResizeHandler = ({
 
   return true;
 };
+
+export type TableDOMElements = {
+  wrapper: HTMLDivElement;
+  table: HTMLTableElement;
+};
+
+export const getTree = (tr: HTMLTableRowElement): TableDOMElements | null => {
+  // pm renders into tbody, owned by react
+  const tbody = tr.parentElement;
+  if (!tbody) {
+    return null;
+  }
+
+  // rendered by react
+  const table = tbody.parentElement;
+  if (!table) {
+    return null;
+  }
+
+  // rendered by react
+  const wrapper = table.parentElement;
+  if (!wrapper) {
+    return null;
+  }
+
+  return {
+    wrapper: wrapper as HTMLDivElement,
+    table: table as HTMLTableElement,
+  };
+};
+
+export const getTop = (element: HTMLElement | Window | undefined): number => {
+  if (!element || element instanceof Window) {
+    return 0;
+  }
+
+  return element?.getBoundingClientRect?.()?.top ?? 0;
+};

package/src/plugins/table/utils/index.ts

@@ -26,6 +26,8 @@ export {
   tablesHaveDifferentColumnWidths,
   tablesHaveDifferentNoOfColumns,
   isTableNested,
+  anyChildCellMergedAcrossRow,
+  supportedHeaderRow,
 } from './nodes';
 export {
   unwrapContentFromTable,

package/src/plugins/table/utils/nodes.ts

@@ -1,5 +1,9 @@
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+import { mapChildren } from '@atlaskit/editor-common/utils';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type {
+  EditorState,
+  Selection,
+} from '@atlaskit/editor-prosemirror/state';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -149,3 +153,27 @@ export const isTableNested = (state: EditorState, tablePos = 0): boolean => {
     parent.type === nodeTypes.bodiedExtension
   );
 };
+
+export const anyChildCellMergedAcrossRow = (node: PmNode): boolean =>
+  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): boolean => {
+  const allHeaders = mapChildren(
+    node,
+    (child) => child.type.name === 'tableHeader',
+  ).every(Boolean);
+
+  const someMerged = anyChildCellMergedAcrossRow(node);
+
+  return allHeaders && !someMerged;
+};

package/tsconfig.app.json

@@ -69,6 +69,12 @@
     {
       "path": "../../platform/feature-flags/tsconfig.app.json"
     },
+    {
+      "path": "../../pragmatic-drag-and-drop/core/tsconfig.app.json"
+    },
+    {
+      "path": "../../pragmatic-drag-and-drop/hitbox/tsconfig.app.json"
+    },
     {
       "path": "../../design-system/theme/tsconfig.app.json"
     },

package/dist/cjs/plugins/table/nodeviews/tableCell.js

@@ -1,99 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _uuid = _interopRequireDefault(require("uuid"));
-var _adfSchema = require("@atlaskit/adf-schema");
-var _model = require("@atlaskit/editor-prosemirror/model");
-var DEFAULT_COL_SPAN = 1;
-var DEFAULT_ROW_SPAN = 1;
-var TableCellNodeView = exports.default = /*#__PURE__*/function () {
-  function TableCellNodeView(node, view, getPos, observer) {
-    (0, _classCallCheck2.default)(this, TableCellNodeView);
-    this.view = view;
-    this.node = node;
-    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node)),
-      dom = _DOMSerializer$render.dom,
-      contentDOM = _DOMSerializer$render.contentDOM;
-    this.getPos = getPos;
-    this.dom = dom;
-    this.contentDOM = contentDOM;
-    if (observer) {
-      this.contentDOM.id = (0, _uuid.default)();
-      this.observer = observer;
-      observer.observe(this.contentDOM);
-    }
-  }
-  (0, _createClass2.default)(TableCellNodeView, [{
-    key: "updateNodeView",
-    value: function updateNodeView(node) {
-      var _this = this;
-      if (this.node.type !== node.type) {
-        return false;
-      }
-      var attrs = (0, _adfSchema.getCellDomAttrs)(this.node);
-      var nextAttrs = (0, _adfSchema.getCellDomAttrs)(node);
-      var _getCellAttrs = (0, _adfSchema.getCellAttrs)(this.dom),
-        colspan = _getCellAttrs.colspan,
-        rowspan = _getCellAttrs.rowspan;
-
-      // need to rerender when colspan/rowspan in dom are different from the node attrs
-      // this can happen when undoing merge cells
-      if (colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) || rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)) {
-        return false;
-      }
-
-      // added + changed attributes
-      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref) {
-        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-          key = _ref2[0],
-          value = _ref2[1];
-        return attrs[key] !== value;
-      });
-      var removedAttrs = Object.keys(attrs).filter(function (key) {
-        return !nextAttrs.hasOwnProperty(key);
-      });
-      if (addedAttrs.length || removedAttrs.length) {
-        addedAttrs.forEach(function (_ref3) {
-          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-            key = _ref4[0],
-            value = _ref4[1];
-          return _this.dom.setAttribute(key, value || '');
-        });
-        removedAttrs.forEach(function (key) {
-          return _this.dom.removeAttribute(key);
-        });
-        return true;
-      }
-
-      // Return true to not re-render this node view
-      if (this.node.sameMarkup(node)) {
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "update",
-    value: function update(node) {
-      var didUpdate = this.updateNodeView(node);
-      if (didUpdate) {
-        this.node = node;
-      }
-      return didUpdate;
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      if (this.observer) {
-        this.observer.unobserve(this.contentDOM);
-      }
-    }
-  }]);
-  return TableCellNodeView;
-}();

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/dom.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTree = exports.getTop = void 0;
-var getTree = exports.getTree = function getTree(tr) {
-  // pm renders into tbody, owned by react
-  var tbody = tr.parentElement;
-  if (!tbody) {
-    return null;
-  }
-
-  // rendered by react
-  var table = tbody.parentElement;
-  if (!table) {
-    return null;
-  }
-
-  // rendered by react
-  var wrapper = table.parentElement;
-  if (!wrapper) {
-    return null;
-  }
-  return {
-    wrapper: wrapper,
-    table: table
-  };
-};
-var getTop = exports.getTop = function getTop(element) {
-  if (!element || element instanceof Window) {
-    return 0;
-  }
-  return element.getBoundingClientRect().top;
-};

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/dom.js

@@ -1,29 +0,0 @@
-export const getTree = tr => {
-  // pm renders into tbody, owned by react
-  const tbody = tr.parentElement;
-  if (!tbody) {
-    return null;
-  }
-
-  // rendered by react
-  const table = tbody.parentElement;
-  if (!table) {
-    return null;
-  }
-
-  // rendered by react
-  const wrapper = table.parentElement;
-  if (!wrapper) {
-    return null;
-  }
-  return {
-    wrapper: wrapper,
-    table: table
-  };
-};
-export const getTop = element => {
-  if (!element || element instanceof Window) {
-    return 0;
-  }
-  return element.getBoundingClientRect().top;
-};

package/dist/esm/plugins/table/nodeviews/tableCell.js

@@ -1,93 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import uuid from 'uuid';
-import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-var DEFAULT_COL_SPAN = 1;
-var DEFAULT_ROW_SPAN = 1;
-var TableCellNodeView = /*#__PURE__*/function () {
-  function TableCellNodeView(node, view, getPos, observer) {
-    _classCallCheck(this, TableCellNodeView);
-    this.view = view;
-    this.node = node;
-    var _DOMSerializer$render = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node)),
-      dom = _DOMSerializer$render.dom,
-      contentDOM = _DOMSerializer$render.contentDOM;
-    this.getPos = getPos;
-    this.dom = dom;
-    this.contentDOM = contentDOM;
-    if (observer) {
-      this.contentDOM.id = uuid();
-      this.observer = observer;
-      observer.observe(this.contentDOM);
-    }
-  }
-  _createClass(TableCellNodeView, [{
-    key: "updateNodeView",
-    value: function updateNodeView(node) {
-      var _this = this;
-      if (this.node.type !== node.type) {
-        return false;
-      }
-      var attrs = getCellDomAttrs(this.node);
-      var nextAttrs = getCellDomAttrs(node);
-      var _getCellAttrs = getCellAttrs(this.dom),
-        colspan = _getCellAttrs.colspan,
-        rowspan = _getCellAttrs.rowspan;
-
-      // need to rerender when colspan/rowspan in dom are different from the node attrs
-      // this can happen when undoing merge cells
-      if (colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) || rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)) {
-        return false;
-      }
-
-      // added + changed attributes
-      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-          key = _ref2[0],
-          value = _ref2[1];
-        return attrs[key] !== value;
-      });
-      var removedAttrs = Object.keys(attrs).filter(function (key) {
-        return !nextAttrs.hasOwnProperty(key);
-      });
-      if (addedAttrs.length || removedAttrs.length) {
-        addedAttrs.forEach(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2),
-            key = _ref4[0],
-            value = _ref4[1];
-          return _this.dom.setAttribute(key, value || '');
-        });
-        removedAttrs.forEach(function (key) {
-          return _this.dom.removeAttribute(key);
-        });
-        return true;
-      }
-
-      // Return true to not re-render this node view
-      if (this.node.sameMarkup(node)) {
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "update",
-    value: function update(node) {
-      var didUpdate = this.updateNodeView(node);
-      if (didUpdate) {
-        this.node = node;
-      }
-      return didUpdate;
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      if (this.observer) {
-        this.observer.unobserve(this.contentDOM);
-      }
-    }
-  }]);
-  return TableCellNodeView;
-}();
-export { TableCellNodeView as default };

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/dom.js

@@ -1,29 +0,0 @@
-export var getTree = function getTree(tr) {
-  // pm renders into tbody, owned by react
-  var tbody = tr.parentElement;
-  if (!tbody) {
-    return null;
-  }
-
-  // rendered by react
-  var table = tbody.parentElement;
-  if (!table) {
-    return null;
-  }
-
-  // rendered by react
-  var wrapper = table.parentElement;
-  if (!wrapper) {
-    return null;
-  }
-  return {
-    wrapper: wrapper,
-    table: table
-  };
-};
-export var getTop = function getTop(element) {
-  if (!element || element instanceof Window) {
-    return 0;
-  }
-  return element.getBoundingClientRect().top;
-};

package/dist/types/plugins/table/nodeviews/tableCell.d.ts

@@ -1,17 +0,0 @@
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { getPosHandler } from '@atlaskit/editor-common/types';
-import { Node } from '@atlaskit/editor-prosemirror/model';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-export default class TableCellNodeView implements NodeView {
-    node: Node;
-    dom: HTMLElement;
-    contentDOM: HTMLElement;
-    getPos: getPosHandler;
-    view: EditorView;
-    providerFactory?: ProviderFactory;
-    observer?: ResizeObserver;
-    constructor(node: Node, view: EditorView, getPos: any, observer?: ResizeObserver);
-    private updateNodeView;
-    update(node: Node): boolean;
-    destroy(): void;
-}

package/dist/types/plugins/table/pm-plugins/sticky-headers/nodeviews/dom.d.ts

@@ -1,6 +0,0 @@
-export type TableDOMElements = {
-    wrapper: HTMLDivElement;
-    table: HTMLTableElement;
-};
-export declare const getTree: (tr: HTMLTableRowElement) => TableDOMElements | null;
-export declare const getTop: (element: HTMLElement | Window | undefined) => number;

package/dist/types/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts

@@ -1,73 +0,0 @@
-/// <reference types="lodash" />
-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 type { TablePluginState } from '../../../types';
-import type { TableDOMElements } from './dom';
-/**
- * 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;
-export declare class TableRowNodeView implements NodeView {
-    view: EditorView;
-    node: PmNode;
-    getPos: () => number;
-    eventDispatcher: EventDispatcher;
-    dom: HTMLTableRowElement;
-    contentDOM: HTMLElement;
-    isHeaderRow: boolean;
-    editorScrollableElement?: HTMLElement | Window;
-    colControlsOffset: number;
-    focused: boolean;
-    topPosEditorElement: number;
-    isSticky: boolean;
-    lastStickyTimestamp: number | undefined;
-    lastTimePainted: number;
-    private intersectionObserver?;
-    private resizeObserver?;
-    private sentinels;
-    private stickyRowHeight?;
-    get tree(): TableDOMElements | null | undefined;
-    constructor(node: PmNode, view: EditorView, getPos: any, eventDispatcher: EventDispatcher);
-    listening: boolean;
-    headerRowMouseScrollEnd: import("lodash").DebouncedFunc<() => void>;
-    headerRowMouseScroll: import("lodash").DebouncedFunc<() => void>;
-    subscribe(): void;
-    unsubscribe(): void;
-    private initObservers;
-    private createResizeObserver;
-    private createIntersectionObserver;
-    previousDomTop: number | undefined;
-    previousPadding: number | undefined;
-    latestDomTop: number | undefined;
-    nextFrame: number | undefined;
-    update(node: PmNode, ..._args: any[]): boolean;
-    destroy(): void;
-    ignoreMutation(mutationRecord: MutationRecord | {
-        type: 'selection';
-        target: Element;
-    }): boolean;
-    onTablePluginState: (state: TablePluginState) => void;
-    updateStickyHeaderWidth: () => void;
-    shouldHeaderStick: (tree: TableDOMElements) => boolean;
-    /**
-     * Manually refire the intersection observers.
-     * Useful when the header may have detached from the table.
-     */
-    refireIntersectionObservers: () => void;
-    makeHeaderRowSticky: (tree: TableDOMElements, scrollTop?: number) => void;
-    makeRowHeaderNotSticky: (table: HTMLElement, isEditorDestroyed?: boolean) => void;
-    getWrapperoffset: (inverse?: boolean) => number;
-    getWrapperRefTop: (wrapper: HTMLElement) => number;
-    getScrolledTableTop: (wrapper: HTMLElement) => number;
-    getCurrentTableTop: (tree: TableDOMElements) => number;
-    padding: number;
-    top: number;
-    emitOn: (top: number, padding: number) => void;
-    emitOff: (isEditorDestroyed: boolean) => void;
-}

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

@@ -1,17 +0,0 @@
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { getPosHandler } from '@atlaskit/editor-common/types';
-import { Node } from '@atlaskit/editor-prosemirror/model';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-export default class TableCellNodeView implements NodeView {
-    node: Node;
-    dom: HTMLElement;
-    contentDOM: HTMLElement;
-    getPos: getPosHandler;
-    view: EditorView;
-    providerFactory?: ProviderFactory;
-    observer?: ResizeObserver;
-    constructor(node: Node, view: EditorView, getPos: any, observer?: ResizeObserver);
-    private updateNodeView;
-    update(node: Node): boolean;
-    destroy(): void;
-}

package/dist/types-ts4.5/plugins/table/pm-plugins/sticky-headers/nodeviews/dom.d.ts

@@ -1,6 +0,0 @@
-export type TableDOMElements = {
-    wrapper: HTMLDivElement;
-    table: HTMLTableElement;
-};
-export declare const getTree: (tr: HTMLTableRowElement) => TableDOMElements | null;
-export declare const getTop: (element: HTMLElement | Window | undefined) => number;