@atlaskit/editor-plugin-table 5.0.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 5.2.0
+
+### Minor Changes
+
+- [#41423](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41423) [`d0acefc12f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0acefc12f6) - The nodeviews are now all located in a single space rather then being spread out amounst other sub-plugins. Only the main pm-plugin should add one nodeview per node.
+
+## 5.1.0
+
+### Minor Changes
+
+- [#41273](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41273) [`322add4eb2a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/322add4eb2a) - Created table drag N drop plugin
+
 ## 5.0.0
 
 ### Major Changes

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

@@ -20,6 +20,7 @@ var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _createPluginConfig = require("./create-plugin-config");
 var _plugin = require("./pm-plugins/decorations/plugin");
+var _dragAndDrop = require("./pm-plugins/drag-and-drop");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _pluginKey = require("./pm-plugins/plugin-key");
@@ -111,8 +112,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
             tableResizingEnabled = _ref3.tableResizingEnabled,
             breakoutEnabled = _ref3.breakoutEnabled,
             tableOptions = _ref3.tableOptions,
-            getEditorFeatureFlags = _ref3.getEditorFeatureFlags;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
+            getEditorFeatureFlags = _ref3.getEditorFeatureFlags,
+            dragAndDropEnabled = _ref3.dragAndDropEnabled;
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',
@@ -175,25 +177,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 ? (0, _dragAndDrop.createPlugin)(dispatch, eventDispatcher) : undefined;
+        }
+      }, {
+        name: 'tableLocalId',
+        plugin: function plugin(_ref9) {
+          var dispatch = _ref9.dispatch;
           return (0, _tableLocalId.createPlugin)(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 ? (0, _tableWidth.createPlugin)(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 (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics') ? (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
         }
       }, {
@@ -224,12 +233,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.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -240,30 +249,31 @@ var tablesPlugin = function tablesPlugin(_ref) {
           tablePluginState: _pluginKey.pluginKey,
           tableWidthPluginState: _tableWidth.pluginKey,
           tableResizingPluginState: _tableResizing.pluginKey,
-          stickyHeadersState: _stickyHeaders.pluginKey
+          stickyHeadersState: _stickyHeaders.pluginKey,
+          dragAndDropState: _dragAndDrop.pluginKey
         },
-        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 ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && (0, _utils3.isLayoutSupported)(state) && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
@@ -329,8 +339,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.toolbarInsertBlockMessages.table),

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

@@ -0,0 +1,111 @@
+"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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _uuid = _interopRequireDefault(require("uuid"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+var DEFAULT_COL_SPAN = 1;
+var DEFAULT_ROW_SPAN = 1;
+var TableCell = exports.default = /*#__PURE__*/function (_ref) {
+  (0, _inherits2.default)(TableCell, _ref);
+  var _super = _createSuper(TableCell);
+  function TableCell(node, view, getPos, eventDispatcher, observer) {
+    var _this;
+    (0, _classCallCheck2.default)(this, TableCell);
+    _this = _super.call(this, node, view, getPos, eventDispatcher);
+    _this.observer = observer;
+    var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
+      pluginConfig = _getPluginState.pluginConfig,
+      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+    _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
+    _this.isDragAndDropEnabled = !!isDragAndDropEnabled;
+    if (observer) {
+      _this.contentDOM.id = (0, _uuid.default)();
+      observer.observe(_this.contentDOM);
+    }
+    return _this;
+  }
+
+  // @ts-ignore
+
+  // @ts-ignore
+  (0, _createClass2.default)(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 = (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 (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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;
+}(_TableNodeViewBase.default);

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _model = require("@atlaskit/editor-prosemirror/model");
+var TableNodeView = exports.default = /*#__PURE__*/(0, _createClass2.default)(
+/**
+ * @constructor
+ */
+function TableNodeView(node, view, getPos, eventDispatcher) {
+  (0, _classCallCheck2.default)(this, TableNodeView);
+  this.node = node;
+  this.view = view;
+  this.getPos = getPos;
+  this.eventDispatcher = eventDispatcher;
+  var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node)),
+    dom = _DOMSerializer$render.dom,
+    contentDOM = _DOMSerializer$render.contentDOM;
+  this.dom = dom;
+  this.contentDOM = contentDOM;
+}
+
+/**
+ * Variables
+ */);