@atlaskit/editor-plugin-table 5.0.0 → 5.2.0

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/actions.js

@@ -0,0 +1,6 @@
+export const DragAndDropActionType = {
+  SET_DROP_TARGET: 'SET_DROP_TARGET',
+  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET'
+};
+
+// NOTE: This should be a Union of all possible actions

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/commands.js

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

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/consts.js

@@ -0,0 +1,5 @@
+export const DropTargetType = {
+  NONE: 'none',
+  ROW: 'row',
+  COLUMN: 'column'
+};

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/index.js

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

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin-factory.js

@@ -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/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('dragAndDropPlugin');

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -0,0 +1,22 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DropTargetType } from './consts';
+import { createPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+export const createPlugin = (dispatch, 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 => {
+      // TODO: Add Pragmatic DnD monitor when the view is constructed.
+      return {
+        // TODO: Cleanup monitor instance
+        // destroy: cleanup,
+      };
+    }
+  });
+};

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/reducer.js

@@ -0,0 +1,20 @@
+import { DragAndDropActionType } from './actions';
+import { DropTargetType } from './consts';
+export default ((pluginState, action) => {
+  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/dist/es2019/plugins/table/pm-plugins/drag-and-drop/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/plugins/table/pm-plugins/main.js

@@ -10,7 +10,8 @@ import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, 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 { TableCssClassName as ClassName } from '../types';
@@ -19,7 +20,7 @@ import { isHeaderRowRequired } from '../utils/paste';
 import { defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
   var _window;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -31,6 +32,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
+    isDragAndDropEnabled: dragAndDropEnabled,
     ...defaultTableSelection,
     getIntl
   });
@@ -43,10 +45,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       elementContentRects[entry.target.id] = entry.contentRect;
     });
   }) : undefined;
-  const tableCellNodeview = {
-    tableCell: (node, view, getPos) => new TableCellNodeView(node, view, getPos, observer),
-    tableHeader: (node, view, getPos) => new TableCellNodeView(node, view, getPos, observer)
-  };
 
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds = [];
@@ -228,8 +226,10 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         return false;
       },
       nodeViews: {
-        ...tableCellNodeview,
-        table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi)
+        table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, 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,

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

@@ -1,5 +1,4 @@
 export { createPlugin } from './plugin';
 export { pluginKey } from './plugin-key';
 export { findStickyHeaderForTable } from './util';
-export { updateStickyState, removeStickyState } from './commands';
-export { TableRowNodeView } from './nodeviews/tableRow';
+export { updateStickyState, removeStickyState } from './commands';

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

@@ -1,17 +1,9 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { TableRowNodeView } from './nodeviews/tableRow';
 import { pluginKey } from './plugin-key';
 import { createPluginState } from './plugin-state';
 export const createPlugin = (dispatch, eventDispatcher, initialState = () => [], getEditorFeatureFlags) => {
   return new SafePlugin({
     state: createPluginState(dispatch, initialState),
-    key: pluginKey,
-    props: {
-      nodeViews: {
-        tableRow: (node, view, getPos) => {
-          return new TableRowNodeView(node, view, getPos, eventDispatcher);
-        }
-      }
-    }
+    key: pluginKey
   });
 };

package/dist/es2019/plugins/table/utils/dom.js

@@ -135,4 +135,34 @@ export const hasResizeHandler = ({
     return false;
   }
   return true;
+};
+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 => {
+  var _element$getBoundingC, _element$getBoundingC2, _element$getBoundingC3;
+  if (!element || element instanceof Window) {
+    return 0;
+  }
+  return (_element$getBoundingC = element === null || element === void 0 ? void 0 : (_element$getBoundingC2 = element.getBoundingClientRect) === null || _element$getBoundingC2 === void 0 ? void 0 : (_element$getBoundingC3 = _element$getBoundingC2.call(element)) === null || _element$getBoundingC3 === void 0 ? void 0 : _element$getBoundingC3.top) !== null && _element$getBoundingC !== void 0 ? _element$getBoundingC : 0;
 };

package/dist/es2019/plugins/table/utils/index.js

@@ -1,6 +1,6 @@
 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 } from './nodes';
+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';

package/dist/es2019/plugins/table/utils/nodes.js

@@ -1,3 +1,4 @@
+import { mapChildren } from '@atlaskit/editor-common/utils';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -94,4 +95,19 @@ export const isTableNested = (state, tablePos = 0) => {
   const parent = state.doc.resolve(tablePos).parent;
   const nodeTypes = state.schema.nodes;
   return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension;
+};
+export const anyChildCellMergedAcrossRow = node => 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 => {
+  const allHeaders = mapChildren(node, child => child.type.name === 'tableHeader').every(Boolean);
+  const someMerged = anyChildCellMergedAcrossRow(node);
+  return allHeaders && !someMerged;
 };

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

@@ -13,6 +13,7 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 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';
@@ -104,8 +105,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
             tableResizingEnabled = _ref3.tableResizingEnabled,
             breakoutEnabled = _ref3.breakoutEnabled,
             tableOptions = _ref3.tableOptions,
-            getEditorFeatureFlags = _ref3.getEditorFeatureFlags;
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
+            getEditorFeatureFlags = _ref3.getEditorFeatureFlags,
+            dragAndDropEnabled = _ref3.dragAndDropEnabled;
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',
@@ -168,25 +170,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
         }
       }, {
-        name: 'tableLocalId',
+        name: 'tableDragAndDrop',
         plugin: function plugin(_ref8) {
-          var dispatch = _ref8.dispatch;
+          var dispatch = _ref8.dispatch,
+            eventDispatcher = _ref8.eventDispatcher;
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher) : undefined;
+        }
+      }, {
+        name: 'tableLocalId',
+        plugin: function plugin(_ref9) {
+          var dispatch = _ref9.dispatch;
           return createTableLocalIdPlugin(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref9) {
+        plugin: function plugin(_ref10) {
           var _options$fullWidthEna;
-          var dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent,
-            dispatch = _ref9.dispatch;
+          var dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent,
+            dispatch = _ref10.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref10) {
+        plugin: function plugin(_ref11) {
           var _options$tableResizin;
-          var dispatch = _ref10.dispatch,
-            dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent;
+          var dispatch = _ref11.dispatch,
+            dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
           return getBooleanFF('platform.editor.table.overflow-state-analytics') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
         }
       }, {
@@ -217,12 +226,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref11) {
-      var editorView = _ref11.editorView,
-        popupsMountPoint = _ref11.popupsMountPoint,
-        popupsBoundariesElement = _ref11.popupsBoundariesElement,
-        popupsScrollableElement = _ref11.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref12) {
+      var editorView = _ref12.editorView,
+        popupsMountPoint = _ref12.popupsMountPoint,
+        popupsBoundariesElement = _ref12.popupsBoundariesElement,
+        popupsScrollableElement = _ref12.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -233,30 +242,31 @@ var tablesPlugin = function tablesPlugin(_ref) {
           tablePluginState: pluginKey,
           tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
-          stickyHeadersState: stickyHeadersPluginKey
+          stickyHeadersState: stickyHeadersPluginKey,
+          dragAndDropState: dragAndDropPluginKey
         },
-        render: function render(_ref12) {
-          var resizingPluginState = _ref12.tableResizingPluginState,
-            stickyHeadersState = _ref12.stickyHeadersState,
-            tablePluginState = _ref12.tablePluginState,
-            tableWidthPluginState = _ref12.tableWidthPluginState;
+        render: function render(_ref13) {
+          var resizingPluginState = _ref13.tableResizingPluginState,
+            stickyHeadersState = _ref13.stickyHeadersState,
+            tablePluginState = _ref13.tablePluginState,
+            tableWidthPluginState = _ref13.tableWidthPluginState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref13 = tablePluginState,
-            tableNode = _ref13.tableNode,
-            tablePos = _ref13.tablePos,
-            targetCellPosition = _ref13.targetCellPosition,
-            isContextualMenuOpen = _ref13.isContextualMenuOpen,
-            layout = _ref13.layout,
-            tableRef = _ref13.tableRef,
-            pluginConfig = _ref13.pluginConfig,
-            insertColumnButtonIndex = _ref13.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref13.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref13.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref13.isHeaderRowEnabled,
-            tableWrapperTarget = _ref13.tableWrapperTarget;
+          var _ref14 = tablePluginState,
+            tableNode = _ref14.tableNode,
+            tablePos = _ref14.tablePos,
+            targetCellPosition = _ref14.targetCellPosition,
+            isContextualMenuOpen = _ref14.isContextualMenuOpen,
+            layout = _ref14.layout,
+            tableRef = _ref14.tableRef,
+            pluginConfig = _ref14.pluginConfig,
+            insertColumnButtonIndex = _ref14.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref14.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref14.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref14.isHeaderRowEnabled,
+            tableWrapperTarget = _ref14.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -322,8 +332,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref14) {
-        var formatMessage = _ref14.formatMessage;
+      quickInsert: function quickInsert(_ref15) {
+        var formatMessage = _ref15.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

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

@@ -0,0 +1,105 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import uuid from 'uuid';
+import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import TableNodeView from './TableNodeViewBase';
+var DEFAULT_COL_SPAN = 1;
+var DEFAULT_ROW_SPAN = 1;
+var TableCell = /*#__PURE__*/function (_ref) {
+  _inherits(TableCell, _ref);
+  var _super = _createSuper(TableCell);
+  function TableCell(node, view, getPos, eventDispatcher, observer) {
+    var _this;
+    _classCallCheck(this, TableCell);
+    _this = _super.call(this, node, view, getPos, eventDispatcher);
+    _this.observer = observer;
+    var _getPluginState = getPluginState(view.state),
+      pluginConfig = _getPluginState.pluginConfig,
+      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+    _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
+    _this.isDragAndDropEnabled = !!isDragAndDropEnabled;
+    if (observer) {
+      _this.contentDOM.id = uuid();
+      observer.observe(_this.contentDOM);
+    }
+    return _this;
+  }
+
+  // @ts-ignore
+
+  // @ts-ignore
+  _createClass(TableCell, [{
+    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);
+      }
+    }
+  }, {
+    key: "updateNodeView",
+    value: function updateNodeView(node) {
+      var _this2 = 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 (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          value = _ref3[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 (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2),
+            key = _ref5[0],
+            value = _ref5[1];
+          return _this2.dom.setAttribute(key, value || '');
+        });
+        removedAttrs.forEach(function (key) {
+          return _this2.dom.removeAttribute(key);
+        });
+        return true;
+      }
+
+      // Return true to not re-render this node view
+      if (this.node.sameMarkup(node)) {
+        return true;
+      }
+      return false;
+    }
+  }]);
+  return TableCell;
+}(TableNodeView);
+export { TableCell as default };

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

@@ -0,0 +1,24 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+var TableNodeView = /*#__PURE__*/_createClass(
+/**
+ * @constructor
+ */
+function TableNodeView(node, view, getPos, eventDispatcher) {
+  _classCallCheck(this, TableNodeView);
+  this.node = node;
+  this.view = view;
+  this.getPos = getPos;
+  this.eventDispatcher = eventDispatcher;
+  var _DOMSerializer$render = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node)),
+    dom = _DOMSerializer$render.dom,
+    contentDOM = _DOMSerializer$render.contentDOM;
+  this.dom = dom;
+  this.contentDOM = contentDOM;
+}
+
+/**
+ * Variables
+ */);
+export { TableNodeView as default };