@atlaskit/editor-plugin-table 5.0.0 → 5.2.0

package/src/plugins/table/pm-plugins/drag-and-drop/commands.ts

@@ -0,0 +1,32 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+
+import { DragAndDropActionType } from './actions';
+import type { DropTargetType } from './consts';
+import { createCommand } from './plugin-factory';
+
+// TODO: This command is a placeholder example. Please replace this if required.
+export const setDropTarget = (
+  type: DropTargetType,
+  index: number,
+  tr?: Transaction,
+) =>
+  createCommand(
+    {
+      type: DragAndDropActionType.SET_DROP_TARGET,
+      data: {
+        type,
+        index,
+      },
+    },
+    (originalTr: Transaction) =>
+      (tr || originalTr).setMeta('addToHistory', false),
+  );
+
+export const clearDropTarget = (tr?: Transaction) =>
+  createCommand(
+    {
+      type: DragAndDropActionType.CLEAR_DROP_TARGET,
+    },
+    (originalTr: Transaction) =>
+      (tr || originalTr).setMeta('addToHistory', false),
+  );

package/src/plugins/table/pm-plugins/drag-and-drop/consts.ts

@@ -0,0 +1,8 @@
+export const DropTargetType = {
+  NONE: 'none',
+  ROW: 'row',
+  COLUMN: 'column',
+} as const;
+
+export type DropTargetType =
+  (typeof DropTargetType)[keyof typeof DropTargetType];

package/src/plugins/table/pm-plugins/drag-and-drop/index.ts

@@ -0,0 +1,5 @@
+export { createPlugin } from './plugin';
+export { pluginKey } from './plugin-key';
+export type { DragAndDropPluginState } from './types';
+
+export { setDropTarget, clearDropTarget } from './commands';

package/src/plugins/table/pm-plugins/drag-and-drop/plugin-factory.ts

@@ -0,0 +1,8 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+
+import { pluginKey } from './plugin-key';
+import reducer from './reducer';
+
+const { createPluginState, createCommand } = pluginFactory(pluginKey, reducer);
+
+export { createPluginState, createCommand };

package/src/plugins/table/pm-plugins/drag-and-drop/plugin-key.ts

@@ -0,0 +1,7 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+
+import type { DragAndDropPluginState } from './types';
+
+export const pluginKey = new PluginKey<DragAndDropPluginState>(
+  'dragAndDropPlugin',
+);

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -0,0 +1,32 @@
+import type {
+  Dispatch,
+  EventDispatcher,
+} from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+import { DropTargetType } from './consts';
+import { createPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+
+export const createPlugin = (
+  dispatch: Dispatch,
+  eventDispatcher: EventDispatcher,
+) => {
+  return new SafePlugin({
+    state: createPluginState(dispatch, {
+      // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
+      // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
+      dropTargetType: DropTargetType.NONE,
+      dropTargetIndex: 0,
+    }),
+    key: pluginKey,
+    view: (editorView: EditorView) => {
+      // TODO: Add Pragmatic DnD monitor when the view is constructed.
+      return {
+        // TODO: Cleanup monitor instance
+        // destroy: cleanup,
+      };
+    },
+  });
+};

package/src/plugins/table/pm-plugins/drag-and-drop/reducer.ts

@@ -0,0 +1,26 @@
+import type { DragAndDropPluginAction } from './actions';
+import { DragAndDropActionType } from './actions';
+import { DropTargetType } from './consts';
+import type { DragAndDropPluginState } from './types';
+
+export default (
+  pluginState: DragAndDropPluginState,
+  action: DragAndDropPluginAction,
+): DragAndDropPluginState => {
+  switch (action.type) {
+    case DragAndDropActionType.SET_DROP_TARGET:
+      return {
+        ...pluginState,
+        dropTargetType: action.data.type,
+        dropTargetIndex: action.data.index,
+      };
+    case DragAndDropActionType.CLEAR_DROP_TARGET:
+      return {
+        ...pluginState,
+        dropTargetType: DropTargetType.NONE,
+        dropTargetIndex: 0,
+      };
+    default:
+      return pluginState;
+  }
+};

package/src/plugins/table/pm-plugins/drag-and-drop/types.ts

@@ -0,0 +1,6 @@
+import type { DropTargetType } from './consts';
+
+export interface DragAndDropPluginState {
+  dropTargetType: DropTargetType;
+  dropTargetIndex: number;
+}

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 =

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/tmp/api-report-tmp.d.ts

@@ -0,0 +1,100 @@
+## API Report File for "@atlaskit/editor-plugin-table"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+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 { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { NextEditorPlugin } 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';
+
+// @public (undocumented)
+type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
+
+// @public (undocumented)
+type PermittedLayoutsDescriptor = 'all' | TableLayout[];
+
+// @public (undocumented)
+interface PluginConfig {
+    // (undocumented)
+    advanced?: boolean;
+    // (undocumented)
+    allowAddColumnWithCustomStep?: boolean;
+    // (undocumented)
+    allowBackgroundColor?: boolean;
+    // (undocumented)
+    allowCellOptionsInFloatingToolbar?: boolean;
+    // (undocumented)
+    allowCollapse?: boolean;
+    // (undocumented)
+    allowColumnResizing?: boolean;
+    // (undocumented)
+    allowColumnSorting?: boolean;
+    // (undocumented)
+    allowControls?: boolean;
+    // (undocumented)
+    allowDistributeColumns?: boolean;
+    // (undocumented)
+    allowHeaderColumn?: boolean;
+    // (undocumented)
+    allowHeaderRow?: boolean;
+    // (undocumented)
+    allowMergeCells?: boolean;
+    // (undocumented)
+    allowNumberColumn?: boolean;
+    // (undocumented)
+    isHeaderRowRequired?: boolean;
+    // (undocumented)
+    permittedLayouts?: PermittedLayoutsDescriptor;
+    // (undocumented)
+    stickyHeaders?: boolean;
+}
+
+// @public (undocumented)
+export type TablePlugin = NextEditorPlugin<'table', {
+    pluginConfiguration: TablePluginOptions | undefined;
+    actions: {
+        insertTable: InsertTableAction;
+    };
+    dependencies: [
+    AnalyticsPlugin,
+    ContentInsertionPlugin,
+    WidthPlugin,
+    GuidelinePlugin,
+    SelectionPlugin
+    ];
+}>;
+
+// @public (undocumented)
+interface TablePluginOptions {
+    // (undocumented)
+    allowContextualMenu?: boolean;
+    // (undocumented)
+    breakoutEnabled?: boolean;
+    // (undocumented)
+    dragAndDropEnabled?: boolean;
+    // (undocumented)
+    fullWidthEnabled?: boolean;
+    // (undocumented)
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
+    // (undocumented)
+    tableOptions: PluginConfig;
+    // (undocumented)
+    tableResizingEnabled?: boolean;
+    // (undocumented)
+    wasFullWidthEnabled?: boolean;
+}
+
+// @public
+export const tablesPlugin: TablePlugin;
+
+// (No @packageDocumentation comment for this package)
+
+```

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