@atlaskit/editor-plugin-table 7.10.1 → 7.11.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 7.11.0
+
+### Minor Changes
+
+- [#90188](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90188) [`ac66ba300996`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ac66ba300996) - Add plugin to allow sorting tables in Live View mode
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.10.2
+
+### Patch Changes
+
+- [#95062](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95062) [`06171107f90c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/06171107f90c) - Cleanup analytics moved event feature flag.
+
 ## 7.10.1
 
 ### Patch Changes

package/dist/cjs/commands/insert.js

@@ -12,7 +12,6 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../pm-plugins/analytics/commands");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _columnWidth = require("../transforms/column-width");
@@ -46,7 +45,7 @@ function addColumnAt() {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
         updatedTr = (0, _columnWidth.rescaleColumns)(isTableScalingEnabled)(table, view)(updatedTr);
       }
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') && view) {
+      if (view) {
         updatedTr = (0, _commands.updateRowOrColumnMovedTransform)({
           type: 'column'
         }, 'addRowOrColumn')(view.state, updatedTr);
@@ -134,11 +133,9 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
       } else {
         tr.setSelection(selection.map(tr.doc, tr.mapping));
       }
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event')) {
-        (0, _commands.updateRowOrColumnMovedTransform)({
-          type: 'row'
-        }, 'addRowOrColumn')(state, tr);
-      }
+      (0, _commands.updateRowOrColumnMovedTransform)({
+        type: 'row'
+      }, 'addRowOrColumn')(state, tr);
       dispatch(tr);
     }
     return true;

package/dist/cjs/commands/misc.js

@@ -195,9 +195,16 @@ var getTableElementMoveTypeBySlice = exports.getTableElementMoveTypeBySlice = fu
   if (slice.content.childCount === 1 && slice.content.firstChild.type === tableRow) {
     return 'row';
   }
-  var map = _tableMap.TableMap.get(currentTable.node);
-  var slicedMap = _tableMap.TableMap.get(slice.content.firstChild);
-  return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;
+
+  // `TableMap.get` can throw if the content is invalid - in which case we should just
+  // return undefined
+  try {
+    var map = _tableMap.TableMap.get(currentTable.node);
+    var slicedMap = _tableMap.TableMap.get(slice.content.firstChild);
+    return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;
+  } catch (e) {
+    return undefined;
+  }
 };
 var isInsideFirstCellOfRowOrColumn = exports.isInsideFirstCellOfRowOrColumn = function isInsideFirstCellOfRowOrColumn(selection, type) {
   var table = (0, _utils2.findTable)(selection);

package/dist/cjs/nodeviews/TableComponent.js

@@ -73,6 +73,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       scroll: 0,
       parentWidth: undefined
     }, (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_AFTER_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, "tableWrapperWidth", undefined), (0, _defineProperty3.default)(_defineProperty2, "tableWrapperHeight", undefined), _defineProperty2));
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnter", function () {
+      var node = _this.props.getNode();
+      var pos = _this.props.getPos();
+      var tr = _this.props.view.state.tr;
+      var tableId = node.attrs.localId;
+      tr.setMeta('mouseEnterTable', [tableId, node, pos]);
+      _this.props.view.dispatch(tr);
+    });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateShadowState", function (shadowKey, value) {
       if (_this.state[shadowKey] === value) {
         return;
@@ -338,6 +346,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.live-pages-sorting_4malx')) {
+        var _this$props$pluginInj;
+        var _ref = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.sharedState.currentState()) || {},
+          mode = _ref.mode;
+        if (mode === 'view') {
+          var _this$table;
+          this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
+        }
+      }
       if (isTableScalingEnabled) {
         this.handleColgroupUpdates(true);
       }
@@ -413,6 +430,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.live-pages-sorting_4malx')) {
+        var _this$table2;
+        this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
+      }
       if (this.overflowShadowsObserver) {
         this.overflowShadowsObserver.dispose();
       }
@@ -527,8 +548,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNoOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable);
       var isNoOfRowsChanged = (0, _utils5.tablesHaveDifferentNoOfRows)(currentTable, previousTable);
       if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-        var _this$props$pluginInj;
-        (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.actions.ariaNotify((0, _utils5.getAssistiveMessage)(previousTable, currentTable, this.props.intl), {
+        var _this$props$pluginInj2;
+        (_this$props$pluginInj2 = this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.accessibilityUtils) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.ariaNotify((0, _utils5.getAssistiveMessage)(previousTable, currentTable, this.props.intl), {
           priority: 'important'
         });
       }

package/dist/cjs/plugin.js

@@ -34,6 +34,7 @@ var _tableLocalId = require("./pm-plugins/table-local-id");
 var _tableResizing = require("./pm-plugins/table-resizing");
 var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
 var _tableWidth = require("./pm-plugins/table-width");
+var _viewModeSort = require("./pm-plugins/view-mode-sort");
 var _toolbar = require("./toolbar");
 var _FloatingContextualButton = _interopRequireDefault(require("./ui/FloatingContextualButton"));
 var _FloatingContextualMenu = _interopRequireDefault(require("./ui/FloatingContextualMenu"));
@@ -226,6 +227,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var dispatch = _ref11.dispatch;
           return options !== null && options !== void 0 && options.dragAndDropEnabled ? (0, _dragAndDrop.createPlugin)(dispatch, editorAnalyticsAPI) : undefined;
         }
+      }, {
+        name: 'tableViewModeSort',
+        plugin: function plugin() {
+          return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.live-pages-sorting_4malx') && api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api.editorViewMode) : undefined;
+        }
       }, {
         name: 'tableLocalId',
         plugin: function plugin(_ref12) {
@@ -255,7 +261,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
         plugin: function plugin(_ref15) {
           var dispatch = _ref15.dispatch,
             dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
-          return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') ? (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent) : undefined;
+          return (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent);
         }
       }, {
         name: 'tableGetEditorViewReferencePlugin',

package/dist/cjs/pm-plugins/analytics/plugin.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPlugin = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _misc = require("../../commands/misc");
 var _commands = require("./commands");
 var _pluginFactory = require("./plugin-factory");
@@ -40,33 +39,29 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
       handlePaste: function handlePaste(_ref, event, slice) {
         var state = _ref.state,
           dispatch = _ref.dispatch;
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event')) {
-          var schema = state.schema;
-          var type = (0, _misc.getTableElementMoveTypeBySlice)(slice, state);
+        var schema = state.schema;
+        var type = (0, _misc.getTableElementMoveTypeBySlice)(slice, state);
 
-          // if the selection wasn't in the first cell of a row or column, don't count it
-          if (!type || !(0, _misc.isInsideFirstCellOfRowOrColumn)(state.selection, type)) {
-            return;
-          }
-          var count = (0, _misc.countCellsInSlice)(slice, schema, type);
-          (0, _commands.updateRowOrColumnMoved)({
-            numberOfCells: count,
-            type: type
-          }, 'pasted')(state, dispatch);
+        // if the selection wasn't in the first cell of a row or column, don't count it
+        if (!type || !(0, _misc.isInsideFirstCellOfRowOrColumn)(state.selection, type)) {
+          return;
         }
+        var count = (0, _misc.countCellsInSlice)(slice, schema, type);
+        (0, _commands.updateRowOrColumnMoved)({
+          numberOfCells: count,
+          type: type
+        }, 'pasted')(state, dispatch);
       },
       transformCopied: function transformCopied(slice, _ref2) {
         var state = _ref2.state,
           dispatch = _ref2.dispatch;
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event')) {
-          var schema = state.schema;
-          var type = (0, _misc.getTableSelectionType)(state.selection);
-          var count = (0, _misc.countCellsInSlice)(slice, schema, type);
-          (0, _commands.updateRowOrColumnMoved)({
-            numberOfCells: count,
-            type: type
-          }, 'copyOrCut')(state, dispatch);
-        }
+        var schema = state.schema;
+        var type = (0, _misc.getTableSelectionType)(state.selection);
+        var count = (0, _misc.countCellsInSlice)(slice, schema, type);
+        (0, _commands.updateRowOrColumnMoved)({
+          numberOfCells: count,
+          type: type
+        }, 'copyOrCut')(state, dispatch);
         return slice;
       }
     }

package/dist/cjs/pm-plugins/view-mode-sort/consts.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SORT_INDEX_DATA_ATTRIBUTE = exports.SORTING_ICON_CLASS_NAME = exports.IS_DISABLED_CLASS_NAME = void 0;
+var SORTING_ICON_CLASS_NAME = exports.SORTING_ICON_CLASS_NAME = 'view-mode-sorting-icon';
+var IS_DISABLED_CLASS_NAME = exports.IS_DISABLED_CLASS_NAME = 'is-disabled';
+var SORT_INDEX_DATA_ATTRIBUTE = exports.SORT_INDEX_DATA_ATTRIBUTE = 'data-sort-index';

package/dist/cjs/pm-plugins/view-mode-sort/index.js

@@ -0,0 +1,304 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactIntlNext = require("react-intl-next");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _table3 = require("@atlaskit/editor-common/table");
+var _types = require("@atlaskit/editor-common/types");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _pluginFactory = require("../plugin-factory");
+var _consts = require("./consts");
+var _pluginKey = require("./plugin-key");
+var _utils = require("./utils");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * This plugin allows sorting of table nodes in the Editor without modifying the underlying ProseMirror document.
+ * Instead of making changes to the ProseMirror document, the plugin sorts the table rows in the DOM. This allows the sorting to be
+ * visible to the user without affecting the document's content.
+ */
+var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAPI) {
+  return new _safePlugin.SafePlugin({
+    state: {
+      init: function init() {
+        return {
+          decorations: _view.DecorationSet.empty,
+          sort: {},
+          allTables: []
+        };
+      },
+      apply: function apply(tr, pluginState, oldState) {
+        // TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
+        // does not appear correct when the plugin is created.
+        var _ref = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+          mode = _ref.mode;
+        if (mode !== 'view') {
+          return pluginState;
+        }
+        var decorations = pluginState.decorations,
+          sort = pluginState.sort,
+          allTables = pluginState.allTables;
+        var sortMeta = tr.getMeta('tableSortMeta');
+        var hoverTableMeta = tr.getMeta('mouseEnterTable');
+        var removeTableMeta = tr.getMeta('removeTable');
+        var tableId = '';
+
+        // Remove the table from the state
+        if (removeTableMeta) {
+          allTables = allTables.filter(function (_ref2) {
+            var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+              id = _ref3[0];
+            return id !== removeTableMeta;
+          });
+        } else {
+          tableId = hoverTableMeta === null || hoverTableMeta === void 0 ? void 0 : hoverTableMeta[0];
+        }
+        sort = _objectSpread(_objectSpread({}, sort), sortMeta);
+        var isTableInState = allTables.some(function (_ref4) {
+          var _ref5 = (0, _slicedToArray2.default)(_ref4, 1),
+            id = _ref5[0];
+          return id === tableId;
+        });
+
+        // Update the table in the state
+        if (hoverTableMeta) {
+          allTables = allTables.filter(function (_ref6) {
+            var _ref7 = (0, _slicedToArray2.default)(_ref6, 1),
+              id = _ref7[0];
+            return id !== hoverTableMeta[0];
+          });
+          allTables.push(hoverTableMeta);
+        }
+
+        /**
+         * Create decorations for the sorting icons
+         */
+        var decs = [];
+
+        // TODO - add support for keyboard only users
+        if (hoverTableMeta && !isTableInState || sortMeta) {
+          allTables.forEach(function (table) {
+            var _table = (0, _slicedToArray2.default)(table, 3),
+              tableId = _table[0],
+              _node = _table[1],
+              pos = _table[2];
+            var tableNode = tr.doc.nodeAt(tr.mapping.map(pos));
+            if (!tableNode || tableNode.type.name !== 'table') {
+              return pluginState;
+            }
+            var map = _tableMap.TableMap.get(tableNode);
+            var hasMergedCells = new Set(map.map).size !== map.map.length;
+            map.mapByRow[0].forEach(function (cell, index) {
+              // return pluginState;
+              decs.push(_view.Decoration.widget(cell + pos + 2, function () {
+                var _sort$tableId;
+                var element = document.createElement('div');
+                element.setAttribute(_consts.SORT_INDEX_DATA_ATTRIBUTE, "".concat(index));
+                element.classList.add(_consts.SORTING_ICON_CLASS_NAME);
+                if (hasMergedCells) {
+                  element.classList.add(_consts.IS_DISABLED_CLASS_NAME);
+                }
+                var sortOrdered;
+                if (index === ((_sort$tableId = sort[tableId]) === null || _sort$tableId === void 0 ? void 0 : _sort$tableId.index)) {
+                  var _sort$tableId2;
+                  sortOrdered = (_sort$tableId2 = sort[tableId]) === null || _sort$tableId2 === void 0 ? void 0 : _sort$tableId2.direction;
+                } else {
+                  sortOrdered = _types.SortOrder.NO_ORDER;
+                }
+                var _getPluginState = (0, _pluginFactory.getPluginState)(oldState),
+                  getIntl = _getPluginState.getIntl;
+                _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+                  value: getIntl()
+                }, /*#__PURE__*/(0, _react.createElement)(_table3.SortingIcon, {
+                  isSortingAllowed: !hasMergedCells,
+                  sortOrdered: sortOrdered,
+                  onClick: function onClick() {},
+                  onKeyDown: function onKeyDown() {}
+                })), element);
+                return element;
+              }));
+            });
+          });
+          decorations = _view.DecorationSet.create(tr.doc, decs);
+        }
+
+        /**
+         * Map the decorations to the new document if there are changes
+         */
+        if (tr.docChanged) {
+          decorations = decorations.map(tr.mapping, tr.doc);
+          allTables = allTables.map(function (table) {
+            return [table[0], table[1], tr.mapping.map(table[2])];
+          });
+        }
+        return {
+          decorations: decorations,
+          sort: sort,
+          allTables: allTables
+        };
+      }
+    },
+    key: _pluginKey.tableViewModeSortPluginKey,
+    appendTransaction: function appendTransaction(trs, oldState, newState) {
+      var _key$getState;
+      // return newState.tr;
+      var _ref8 = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+        mode = _ref8.mode;
+      if (mode !== 'view') {
+        return newState.tr;
+      }
+      var allTables = ((_key$getState = _pluginKey.tableViewModeSortPluginKey.getState(newState)) === null || _key$getState === void 0 ? void 0 : _key$getState.allTables) || [];
+
+      /**
+       * If incoming changes have affected a table node, remove the sorting. This prevents the
+       * table from breaking if changes like merged cells are incoming.
+       */
+      var _iterator = _createForOfIteratorHelper(trs),
+        _step;
+      try {
+        var _loop = function _loop() {
+            var tr = _step.value;
+            var hoverTableMeta = tr.getMeta('mouseEnterTable');
+            if (hoverTableMeta) {
+              allTables = allTables.filter(function (_ref9) {
+                var _ref10 = (0, _slicedToArray2.default)(_ref9, 1),
+                  id = _ref10[0];
+                return id !== hoverTableMeta[0];
+              });
+              allTables.push(hoverTableMeta);
+            }
+            var isRemote = tr.getMeta('isRemote');
+            var isDocChanged = tr.docChanged;
+            var isChangesIncoming = isRemote && isDocChanged;
+            var oldPluginState = _pluginKey.tableViewModeSortPluginKey.getState(oldState);
+            var newPluginState = _pluginKey.tableViewModeSortPluginKey.getState(newState);
+            var _iterator2 = _createForOfIteratorHelper(allTables),
+              _step2;
+            try {
+              var _loop2 = function _loop2() {
+                  var _oldPluginState$sort, _newPluginState$sort;
+                  var table = _step2.value;
+                  var _table2 = (0, _slicedToArray2.default)(table, 3),
+                    tableId = _table2[0],
+                    node = _table2[1],
+                    pos = _table2[2];
+                  var _ref11 = (oldPluginState === null || oldPluginState === void 0 || (_oldPluginState$sort = oldPluginState.sort) === null || _oldPluginState$sort === void 0 ? void 0 : _oldPluginState$sort[tableId]) || {},
+                    oldOrder = _ref11.order,
+                    oldDirection = _ref11.direction,
+                    oldIndex = _ref11.index;
+                  if (isChangesIncoming) {
+                    var _maybeTableNode$attrs;
+                    var maybeTableNode = tr.doc.nodeAt(pos);
+                    var isTableNodeChanged = (maybeTableNode === null || maybeTableNode === void 0 || (_maybeTableNode$attrs = maybeTableNode.attrs) === null || _maybeTableNode$attrs === void 0 ? void 0 : _maybeTableNode$attrs.localId) !== tableId || !node.eq(maybeTableNode);
+                    if (isTableNodeChanged) {
+                      var newtr = newState.tr;
+                      newtr.setMeta('tableSortMeta', (0, _defineProperty2.default)({}, tableId, {}));
+                      newtr.setMeta('removeTable', tableId);
+
+                      // Unsort the table here
+                      if (oldOrder !== undefined) {
+                        var _getTableElements = (0, _utils.getTableElements)(tableId),
+                          rows = _getTableElements.rows,
+                          tbody = _getTableElements.tbody;
+                        if (!rows || !tbody) {
+                          return {
+                            v: {
+                              v: newtr
+                            }
+                          };
+                        }
+                        var sortedOrder = (0, _toConsumableArray2.default)(oldOrder).sort(function (a, b) {
+                          return a.value - b.value;
+                        });
+                        sortedOrder.forEach(function (index, i) {
+                          tbody.appendChild(rows[index.index + 1]);
+                        });
+                        return {
+                          v: {
+                            v: newtr
+                          }
+                        };
+                      }
+                    }
+                  }
+
+                  /**
+                   * Sort the table if the sort order has changed
+                   */
+                  var _ref12 = (newPluginState === null || newPluginState === void 0 || (_newPluginState$sort = newPluginState.sort) === null || _newPluginState$sort === void 0 ? void 0 : _newPluginState$sort[tableId]) || {},
+                    newOrder = _ref12.order,
+                    newDirection = _ref12.direction,
+                    newIndex = _ref12.index;
+                  var orderChanged = oldDirection !== newDirection || oldIndex !== newIndex;
+                  if (orderChanged) {
+                    if (!isRemote && newDirection !== _types.SortOrder.NO_ORDER) {
+                      var _getTableElements2 = (0, _utils.getTableElements)(tableId),
+                        _rows = _getTableElements2.rows,
+                        _tbody = _getTableElements2.tbody;
+                      if (_rows && newOrder) {
+                        newOrder.forEach(function (index, i) {
+                          _tbody === null || _tbody === void 0 || _tbody.appendChild(_rows[index.value + 1]);
+                        });
+                      }
+                    }
+                  }
+                },
+                _ret2;
+              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                _ret2 = _loop2();
+                if (_ret2) return _ret2.v;
+              }
+            } catch (err) {
+              _iterator2.e(err);
+            } finally {
+              _iterator2.f();
+            }
+          },
+          _ret;
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _ret = _loop();
+          if (_ret) return _ret.v;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return newState.tr;
+    },
+    props: {
+      handleDOMEvents: {
+        keydown: function keydown(view, event) {
+          // TODO - fix the focus issue here, where toggling sort with a keypress loses focus
+          if (event.key === 'Enter' || event.key === ' ') {
+            var _key$getState2;
+            var pluginState = ((_key$getState2 = _pluginKey.tableViewModeSortPluginKey.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.sort) || {};
+            (0, _utils.toggleSort)(view, event, pluginState);
+          }
+        },
+        click: function click(view, event) {
+          var _key$getState3;
+          var pluginState = ((_key$getState3 = _pluginKey.tableViewModeSortPluginKey.getState(view.state)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.sort) || {};
+          (0, _utils.toggleSort)(view, event, pluginState);
+        }
+      },
+      decorations: function decorations(state) {
+        var _key$getState4;
+        var decs = ((_key$getState4 = _pluginKey.tableViewModeSortPluginKey.getState(state)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.decorations) || _view.DecorationSet.empty;
+        return decs;
+      }
+    }
+  });
+};

package/dist/cjs/pm-plugins/view-mode-sort/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableViewModeSortPluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var tableViewModeSortPluginKey = exports.tableViewModeSortPluginKey = new _state.PluginKey('tableViewModeSortPlugin');

package/dist/cjs/pm-plugins/view-mode-sort/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/pm-plugins/view-mode-sort/utils.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unsort = exports.toggleSort = exports.getTableElements = exports.getSortOrderFromTable = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _types = require("@atlaskit/editor-common/types");
+var _consts = require("./consts");
+var unsort = exports.unsort = function unsort(oldOrder, tableElement) {
+  var rows = tableElement.querySelectorAll('tr');
+  var tbody = tableElement.querySelector('tbody');
+  var sortedOrder = (0, _toConsumableArray2.default)(oldOrder).sort(function (a, b) {
+    return a.value - b.value;
+  });
+  sortedOrder.forEach(function (item) {
+    tbody === null || tbody === void 0 || tbody.appendChild(rows[item.index + 1]);
+  });
+};
+
+// TODO - reuse sort logic from the Renderer and support switching between ASC, DESC and NO_ORDER
+var getSortOrderFromTable = exports.getSortOrderFromTable = function getSortOrderFromTable(tableElement, sortIndex, direction) {
+  var sortOrder = direction === _types.SortOrder.DESC ? -1 : 1;
+  var strings = [];
+  tableElement.querySelectorAll('tr:not([data-header-row="true"])').forEach(function (tr) {
+    var _tr$querySelectorAll$;
+    strings.push(((_tr$querySelectorAll$ = tr.querySelectorAll('td')[sortIndex]) === null || _tr$querySelectorAll$ === void 0 ? void 0 : _tr$querySelectorAll$.textContent) || '');
+  });
+  var order = Array.from(strings.keys()).sort(function (a, b) {
+    var string = strings[a] || '';
+    return string.localeCompare(strings[b] || '') * sortOrder;
+  }).map(function (value, index) {
+    return {
+      value: value,
+      index: index
+    };
+  });
+  // TODO - improve this. right now this is a workaround to ensure the first tr is always first in the order
+  return [{
+    value: -1,
+    index: -1
+  }].concat((0, _toConsumableArray2.default)(order));
+};
+var toggleSort = exports.toggleSort = function toggleSort(view, event, pluginState) {
+  var _target$closest;
+  var target = event.target;
+  var widget = target.closest(".".concat(_consts.SORTING_ICON_CLASS_NAME));
+  if (widget !== null && widget !== void 0 && widget.classList.contains(_consts.IS_DISABLED_CLASS_NAME) || !widget) {
+    return;
+  }
+  var datasetortIndex = target === null || target === void 0 || (_target$closest = target.closest('.ProseMirror-widget')) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute(_consts.SORT_INDEX_DATA_ATTRIBUTE);
+  var tr = view.state.tr;
+  var tableElement = target.closest('table');
+  if (!tableElement || !datasetortIndex) {
+    return;
+  }
+  var tableId = tableElement.getAttribute('data-table-local-id') || '';
+  var _ref = (pluginState === null || pluginState === void 0 ? void 0 : pluginState[tableId]) || {},
+    index = _ref.index,
+    direction = _ref.direction,
+    oldOrder = _ref.order;
+
+  // Unsort if there was already a sort
+  if (direction !== _types.SortOrder.NO_ORDER && oldOrder !== undefined) {
+    unsort(oldOrder, tableElement);
+  }
+  var sortIndex = parseInt(datasetortIndex);
+  if (sortIndex === index) {
+    switch (direction) {
+      case _types.SortOrder.NO_ORDER:
+        direction = _types.SortOrder.ASC;
+        break;
+      case _types.SortOrder.ASC:
+        direction = _types.SortOrder.DESC;
+        break;
+      case _types.SortOrder.DESC:
+        direction = _types.SortOrder.NO_ORDER;
+        break;
+    }
+  } else {
+    direction = _types.SortOrder.ASC; // default direction when a new index is clicked
+  }
+  var order = getSortOrderFromTable(tableElement, sortIndex, direction);
+  if (direction === _types.SortOrder.NO_ORDER) {
+    tr.setMeta('tableSortMeta', (0, _defineProperty2.default)({}, tableId, {}));
+  } else {
+    tr.setMeta('tableSortMeta', (0, _defineProperty2.default)({}, tableId, {
+      index: sortIndex,
+      direction: direction,
+      order: order,
+      tableElement: tableElement
+    }));
+  }
+  view.dispatch(tr);
+};
+var getTableElements = exports.getTableElements = function getTableElements(tableId) {
+  var tableElement = document.querySelector("table[data-table-local-id=\"".concat(tableId, "\"]"));
+  var tbody = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
+  var rows = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
+  return {
+    tbody: tbody,
+    rows: rows
+  };
+};