@atlaskit/editor-plugin-table 5.2.0 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.2.1
+
+### Patch Changes
+
+- [#41471](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41471) [`94c3351cece`](https://bitbucket.org/atlassian/atlassian-frontend/commits/94c3351cece) - Table row nodeviews will now be set as drop targets when the DnD FF is enabled
+
 ## 5.2.0
 
 ### Minor Changes

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

@@ -16,6 +16,8 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
+var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../pm-plugins/sticky-headers/commands");
@@ -47,9 +49,6 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listening", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "padding", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "top", 0);
-    /**
-     * Methods
-     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "headerRowMouseScrollEnd", (0, _debounce.default)(function () {
       _this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -75,6 +74,9 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
         _this.subscribe();
       }
     }
+    if (_this.isDragAndDropEnabled) {
+      _this.addDropTarget(_this.contentDOM);
+    }
     return _this;
   }
 
@@ -121,6 +123,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$dropTargetClean;
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
         var tree = (0, _dom2.getTree)(this.dom);
@@ -129,6 +132,9 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
         }
         this.emitOff(true);
       }
+
+      // If a drop target cleanup method has been set then we should call it.
+      (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 || _this$dropTargetClean.call(this);
     }
   }, {
     key: "ignoreMutation",
@@ -155,6 +161,54 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
       }
       return true;
     }
+
+    /**
+     * Methods
+     */
+  }, {
+    key: "addDropTarget",
+    value: function addDropTarget(element) {
+      var pos = this.getPos();
+      if (!Number.isFinite(pos)) {
+        return;
+      }
+      if (this.dropTargetCleanup) {
+        this.dropTargetCleanup();
+      }
+      var resolvedPos = this.view.state.doc.resolve(pos);
+      var targetIndex = resolvedPos.index();
+      var localId = resolvedPos.parent.attrs.localId;
+      this.dropTargetCleanup = (0, _element.dropTargetForElements)({
+        element: element,
+        canDrop: function canDrop(_ref2) {
+          var _data$indexes, _data$indexes2;
+          var source = _ref2.source;
+          var data = source.data;
+          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 = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
+          );
+        },
+        getData: function getData(_ref3) {
+          var input = _ref3.input,
+            element = _ref3.element;
+          var data = {
+            localId: localId,
+            type: 'table-row',
+            targetIndex: targetIndex
+          };
+          return (0, _closestEdge.attachClosestEdge)(data, {
+            input: input,
+            element: element,
+            allowedEdges: ['top', 'bottom']
+          });
+        }
+      });
+    }
   }, {
     key: "subscribe",
     value: function subscribe() {

package/dist/cjs/plugins/table/types.js

@@ -117,4 +117,7 @@ var ShadowEvent = exports.ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
   ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
   return ShadowEvent;
-}({});
+}({});
+/**
+ * Drag and Drop interfaces
+ */

package/dist/es2019/plugins/table/nodeviews/TableRow.js

@@ -3,6 +3,8 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -29,9 +31,6 @@ export default class TableRow extends TableNodeView {
     _defineProperty(this, "listening", false);
     _defineProperty(this, "padding", 0);
     _defineProperty(this, "top", 0);
-    /**
-     * Methods
-     */
     _defineProperty(this, "headerRowMouseScrollEnd", debounce(() => {
       this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -58,6 +57,9 @@ export default class TableRow extends TableNodeView {
         this.subscribe();
       }
     }
+    if (this.isDragAndDropEnabled) {
+      this.addDropTarget(this.contentDOM);
+    }
   }
 
   /**
@@ -99,6 +101,7 @@ export default class TableRow extends TableNodeView {
     return true;
   }
   destroy() {
+    var _this$dropTargetClean;
     if (this.isStickyHeaderEnabled) {
       this.unsubscribe();
       const tree = getTree(this.dom);
@@ -107,6 +110,9 @@ export default class TableRow extends TableNodeView {
       }
       this.emitOff(true);
     }
+
+    // If a drop target cleanup method has been set then we should call it.
+    (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 ? void 0 : _this$dropTargetClean.call(this);
   }
   ignoreMutation(mutationRecord) {
     /* tableRows are not directly editable by the user
@@ -131,6 +137,55 @@ export default class TableRow extends TableNodeView {
     }
     return true;
   }
+
+  /**
+   * Methods
+   */
+
+  addDropTarget(element) {
+    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
+      }) {
+        var _data$indexes, _data$indexes2;
+        const data = source.data;
+        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 = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
+        );
+      },
+      getData({
+        input,
+        element
+      }) {
+        const data = {
+          localId,
+          type: 'table-row',
+          targetIndex
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom']
+        });
+      }
+    });
+  }
   subscribe() {
     this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
     if (this.editorScrollableElement) {

package/dist/es2019/plugins/table/types.js

@@ -109,4 +109,8 @@ export let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
   ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
   return ShadowEvent;
-}({});
+}({});
+
+/**
+ * Drag and Drop interfaces
+ */

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

@@ -11,6 +11,8 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -41,9 +43,6 @@ var TableRow = /*#__PURE__*/function (_ref) {
     _defineProperty(_assertThisInitialized(_this), "listening", false);
     _defineProperty(_assertThisInitialized(_this), "padding", 0);
     _defineProperty(_assertThisInitialized(_this), "top", 0);
-    /**
-     * Methods
-     */
     _defineProperty(_assertThisInitialized(_this), "headerRowMouseScrollEnd", debounce(function () {
       _this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -69,6 +68,9 @@ var TableRow = /*#__PURE__*/function (_ref) {
         _this.subscribe();
       }
     }
+    if (_this.isDragAndDropEnabled) {
+      _this.addDropTarget(_this.contentDOM);
+    }
     return _this;
   }
 
@@ -115,6 +117,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "destroy",
     value: function destroy() {
+      var _this$dropTargetClean;
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
         var tree = getTree(this.dom);
@@ -123,6 +126,9 @@ var TableRow = /*#__PURE__*/function (_ref) {
         }
         this.emitOff(true);
       }
+
+      // If a drop target cleanup method has been set then we should call it.
+      (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 || _this$dropTargetClean.call(this);
     }
   }, {
     key: "ignoreMutation",
@@ -149,6 +155,54 @@ var TableRow = /*#__PURE__*/function (_ref) {
       }
       return true;
     }
+
+    /**
+     * Methods
+     */
+  }, {
+    key: "addDropTarget",
+    value: function addDropTarget(element) {
+      var pos = this.getPos();
+      if (!Number.isFinite(pos)) {
+        return;
+      }
+      if (this.dropTargetCleanup) {
+        this.dropTargetCleanup();
+      }
+      var resolvedPos = this.view.state.doc.resolve(pos);
+      var targetIndex = resolvedPos.index();
+      var localId = resolvedPos.parent.attrs.localId;
+      this.dropTargetCleanup = dropTargetForElements({
+        element: element,
+        canDrop: function canDrop(_ref2) {
+          var _data$indexes, _data$indexes2;
+          var source = _ref2.source;
+          var data = source.data;
+          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 = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
+          );
+        },
+        getData: function getData(_ref3) {
+          var input = _ref3.input,
+            element = _ref3.element;
+          var data = {
+            localId: localId,
+            type: 'table-row',
+            targetIndex: targetIndex
+          };
+          return attachClosestEdge(data, {
+            input: input,
+            element: element,
+            allowedEdges: ['top', 'bottom']
+          });
+        }
+      });
+    }
   }, {
     key: "subscribe",
     value: function subscribe() {

package/dist/esm/plugins/table/types.js

@@ -111,4 +111,8 @@ export var ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
   ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
   return ShadowEvent;
-}({});
+}({});
+
+/**
+ * Drag and Drop interfaces
+ */

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

@@ -23,6 +23,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private listening;
     private padding;
     private top;
+    private dropTargetCleanup?;
     /**
      * Methods: Nodeview Lifecycle
      */
@@ -35,6 +36,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     /**
      * Methods
      */
+    private addDropTarget;
     private headerRowMouseScrollEnd;
     private headerRowMouseScroll;
     private subscribe;

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

@@ -341,3 +341,17 @@ 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/dist/types-ts4.5/plugins/table/nodeviews/TableRow.d.ts

@@ -23,6 +23,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private listening;
     private padding;
     private top;
+    private dropTargetCleanup?;
     /**
      * Methods: Nodeview Lifecycle
      */
@@ -35,6 +36,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     /**
      * Methods
      */
+    private addDropTarget;
     private headerRowMouseScrollEnd;
     private headerRowMouseScroll;
     private subscribe;

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

@@ -341,3 +341,17 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "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.9.0",
+    "@atlaskit/editor-common": "^76.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -38,6 +38,8 @@
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
+    "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.26.0",
     "@atlaskit/tooltip": "^17.8.0",

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

@@ -6,6 +6,8 @@ import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 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 { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
@@ -14,7 +16,7 @@ import {
   syncStickyRowToTable,
   updateStickyMargins as updateTableMargin,
 } from '../pm-plugins/table-resizing/utils/dom';
-import type { TablePluginState } from '../types';
+import type { DraggableSourceData, TablePluginState } from '../types';
 import { TableCssClassName as ClassName, TableCssClassName } from '../types';
 import {
   STICKY_HEADER_TOGGLE_TOLERANCE_MS,
@@ -62,6 +64,10 @@ export default class TableRow
         this.subscribe();
       }
     }
+
+    if (this.isDragAndDropEnabled) {
+      this.addDropTarget(this.contentDOM);
+    }
   }
 
   /**
@@ -87,6 +93,7 @@ export default class TableRow
   private listening = false;
   private padding: number = 0;
   private top: number = 0;
+  private dropTargetCleanup?: () => void;
 
   /**
    * Methods: Nodeview Lifecycle
@@ -133,6 +140,9 @@ export default class TableRow
 
       this.emitOff(true);
     }
+
+    // If a drop target cleanup method has been set then we should call it.
+    this.dropTargetCleanup?.();
   }
 
   ignoreMutation(
@@ -172,6 +182,49 @@ export default class TableRow
    * 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'],
+        });
+      },
+    });
+  }
+
   private headerRowMouseScrollEnd = debounce(() => {
     this.dom.classList.remove('no-pointer-events');
   }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT);

package/src/plugins/table/types.ts

@@ -367,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/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"
     },