@atlaskit/editor-plugin-table 7.10.2 → 7.11.1

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

@@ -0,0 +1,98 @@
+import { SortOrder } from '@atlaskit/editor-common/types';
+import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
+export const unsort = (oldOrder, tableElement) => {
+  const rows = tableElement.querySelectorAll('tr');
+  const tbody = tableElement.querySelector('tbody');
+  const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
+  sortedOrder.forEach(item => {
+    tbody === null || tbody === void 0 ? void 0 : tbody.appendChild(rows[item.index + 1]);
+  });
+};
+
+// TODO - reuse sort logic from the Renderer and support switching between ASC, DESC and NO_ORDER
+export const getSortOrderFromTable = (tableElement, sortIndex, direction) => {
+  const sortOrder = direction === SortOrder.DESC ? -1 : 1;
+  const strings = [];
+  tableElement.querySelectorAll('tr:not([data-header-row="true"])').forEach(tr => {
+    var _tr$querySelectorAll$;
+    strings.push(((_tr$querySelectorAll$ = tr.querySelectorAll('td')[sortIndex]) === null || _tr$querySelectorAll$ === void 0 ? void 0 : _tr$querySelectorAll$.textContent) || '');
+  });
+  const order = Array.from(strings.keys()).sort((a, b) => {
+    const string = strings[a] || '';
+    return string.localeCompare(strings[b] || '') * sortOrder;
+  }).map((value, index) => ({
+    value,
+    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
+  }, ...order];
+};
+export const toggleSort = (view, event, pluginState) => {
+  var _target$closest;
+  const target = event.target;
+  const widget = target.closest(`.${SORTING_ICON_CLASS_NAME}`);
+  if (widget !== null && widget !== void 0 && widget.classList.contains(IS_DISABLED_CLASS_NAME) || !widget) {
+    return;
+  }
+  let datasetortIndex = target === null || target === void 0 ? void 0 : (_target$closest = target.closest('.ProseMirror-widget')) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
+  const tr = view.state.tr;
+  const tableElement = target.closest('table');
+  if (!tableElement || !datasetortIndex) {
+    return;
+  }
+  const tableId = tableElement.getAttribute('data-table-local-id') || '';
+  let {
+    index,
+    direction,
+    order: oldOrder
+  } = (pluginState === null || pluginState === void 0 ? void 0 : pluginState[tableId]) || {};
+
+  // Unsort if there was already a sort
+  if (direction !== SortOrder.NO_ORDER && oldOrder !== undefined) {
+    unsort(oldOrder, tableElement);
+  }
+  const sortIndex = parseInt(datasetortIndex);
+  if (sortIndex === index) {
+    switch (direction) {
+      case SortOrder.NO_ORDER:
+        direction = SortOrder.ASC;
+        break;
+      case SortOrder.ASC:
+        direction = SortOrder.DESC;
+        break;
+      case SortOrder.DESC:
+        direction = SortOrder.NO_ORDER;
+        break;
+    }
+  } else {
+    direction = SortOrder.ASC; // default direction when a new index is clicked
+  }
+  const order = getSortOrderFromTable(tableElement, sortIndex, direction);
+  if (direction === SortOrder.NO_ORDER) {
+    tr.setMeta('tableSortMeta', {
+      [tableId]: {}
+    });
+  } else {
+    tr.setMeta('tableSortMeta', {
+      [tableId]: {
+        index: sortIndex,
+        direction,
+        order,
+        tableElement
+      }
+    });
+  }
+  view.dispatch(tr);
+};
+export const getTableElements = tableId => {
+  const tableElement = document.querySelector(`table[data-table-local-id="${tableId}"]`);
+  const tbody = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
+  const rows = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
+  return {
+    tbody,
+    rows
+  };
+};

package/dist/es2019/ui/common-styles.js

@@ -2,12 +2,14 @@
 
 import { css } from '@emotion/react';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
+import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { browser } from '@atlaskit/editor-common/utils';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
+import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
@@ -123,6 +125,38 @@ const breakoutWidthStyling = () => {
     }
   `;
 };
+const viewModeSortStyles = () => {
+  if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
+    return css`
+      th {
+        .${SORTING_ICON_CLASS_NAME} {
+          + p {
+            margin-top: 0 !important;
+          }
+        }
+
+        &:has(.is-active) {
+          .${SORTABLE_COLUMN_ICON_CLASSNAME} {
+            opacity: 1;
+          }
+        }
+
+        .${SORTABLE_COLUMN_ICON_CLASSNAME} {
+          opacity: 0;
+          &:focus {
+            opacity: 1;
+          }
+        }
+
+        &:hover {
+          .${SORTABLE_COLUMN_ICON_CLASSNAME} {
+            opacity: 1;
+          }
+        }
+      }
+    `;
+  }
+};
 const tableBorderStyles = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return `border-color: ${tableBorderDeleteColor}`;
@@ -190,6 +224,7 @@ export const baseTableStyles = props => {
   ${((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && insertLine()};
   ${resizeHandle((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop)};
   ${rangeSelectionStyles};
+  ${viewModeSortStyles()};
 
   .${ClassName.LAST_ITEM_IN_CELL} {
     margin-bottom: 0;

package/dist/esm/nodeviews/TableComponent.js

@@ -66,6 +66,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       scroll: 0,
       parentWidth: undefined
     }, _defineProperty(_defineProperty2, ShadowEvent.SHOW_BEFORE_SHADOW, false), _defineProperty(_defineProperty2, ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty(_defineProperty2, "tableWrapperWidth", undefined), _defineProperty(_defineProperty2, "tableWrapperHeight", undefined), _defineProperty2));
+    _defineProperty(_assertThisInitialized(_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);
+    });
     _defineProperty(_assertThisInitialized(_this), "updateShadowState", function (shadowKey, value) {
       if (_this.state[shadowKey] === value) {
         return;
@@ -331,6 +339,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
+      if (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);
       }
@@ -406,6 +423,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
+      if (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();
       }
@@ -520,8 +541,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
       var isNoOfRowsChanged = 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(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(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
           priority: 'important'
         });
       }

package/dist/esm/plugin.js

@@ -27,6 +27,7 @@ import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-loc
 import { createPlugin as createFlexiResizingPlugin, getPluginState as getFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
+import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { getToolbarConfig } from './toolbar';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
@@ -219,6 +220,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var dispatch = _ref11.dispatch;
           return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI) : undefined;
         }
+      }, {
+        name: 'tableViewModeSort',
+        plugin: function plugin() {
+          return getBooleanFF('platform.editor.table.live-pages-sorting_4malx') && api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+        }
       }, {
         name: 'tableLocalId',
         plugin: function plugin(_ref12) {

package/dist/esm/pm-plugins/table-selection-keymap.js

@@ -8,9 +8,7 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
   bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
   bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
-  if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
-    bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
-  }
+  bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
   if (getBooleanFF('platform.editor.table.cmd-a-select-table')) {
     bindKeymapWithCommand(selectTable.common, modASelectTable(editorSelectionAPI)(), list);
   }

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

@@ -0,0 +1,3 @@
+export var SORTING_ICON_CLASS_NAME = 'view-mode-sorting-icon';
+export var IS_DISABLED_CLASS_NAME = 'is-disabled';
+export var SORT_INDEX_DATA_ATTRIBUTE = 'data-sort-index';

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

@@ -0,0 +1,299 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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.
+ */
+
+import { createElement } from 'react';
+import ReactDOM from 'react-dom';
+import { RawIntlProvider } from 'react-intl-next';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import { SortOrder } from '@atlaskit/editor-common/types';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getPluginState } from '../plugin-factory';
+import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
+import { tableViewModeSortPluginKey as key } from './plugin-key';
+import { getTableElements, toggleSort } from './utils';
+export var createPlugin = function createPlugin(editorViewModeAPI) {
+  return new SafePlugin({
+    state: {
+      init: function init() {
+        return {
+          decorations: 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 = _slicedToArray(_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 = _slicedToArray(_ref4, 1),
+            id = _ref5[0];
+          return id === tableId;
+        });
+
+        // Update the table in the state
+        if (hoverTableMeta) {
+          allTables = allTables.filter(function (_ref6) {
+            var _ref7 = _slicedToArray(_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 = _slicedToArray(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.get(tableNode);
+            var hasMergedCells = new Set(map.map).size !== map.map.length;
+            map.mapByRow[0].forEach(function (cell, index) {
+              // return pluginState;
+              decs.push(Decoration.widget(cell + pos + 2, function () {
+                var _sort$tableId;
+                var element = document.createElement('div');
+                element.setAttribute(SORT_INDEX_DATA_ATTRIBUTE, "".concat(index));
+                element.classList.add(SORTING_ICON_CLASS_NAME);
+                if (hasMergedCells) {
+                  element.classList.add(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 = SortOrder.NO_ORDER;
+                }
+                var _getPluginState = getPluginState(oldState),
+                  getIntl = _getPluginState.getIntl;
+                ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+                  value: getIntl()
+                }, /*#__PURE__*/createElement(SortingIcon, {
+                  isSortingAllowed: !hasMergedCells,
+                  sortOrdered: sortOrdered,
+                  onClick: function onClick() {},
+                  onKeyDown: function onKeyDown() {}
+                })), element);
+                return element;
+              }));
+            });
+          });
+          decorations = 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: key,
+    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 = key.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 = _slicedToArray(_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 = key.getState(oldState);
+            var newPluginState = key.getState(newState);
+            var _iterator2 = _createForOfIteratorHelper(allTables),
+              _step2;
+            try {
+              var _loop2 = function _loop2() {
+                  var _oldPluginState$sort, _newPluginState$sort;
+                  var table = _step2.value;
+                  var _table2 = _slicedToArray(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', _defineProperty({}, tableId, {}));
+                      newtr.setMeta('removeTable', tableId);
+
+                      // Unsort the table here
+                      if (oldOrder !== undefined) {
+                        var _getTableElements = getTableElements(tableId),
+                          rows = _getTableElements.rows,
+                          tbody = _getTableElements.tbody;
+                        if (!rows || !tbody) {
+                          return {
+                            v: {
+                              v: newtr
+                            }
+                          };
+                        }
+                        var sortedOrder = _toConsumableArray(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 !== SortOrder.NO_ORDER) {
+                      var _getTableElements2 = 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 = key.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.sort) || {};
+            toggleSort(view, event, pluginState);
+          }
+        },
+        click: function click(view, event) {
+          var _key$getState3;
+          var pluginState = ((_key$getState3 = key.getState(view.state)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.sort) || {};
+          toggleSort(view, event, pluginState);
+        }
+      },
+      decorations: function decorations(state) {
+        var _key$getState4;
+        var decs = ((_key$getState4 = key.getState(state)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.decorations) || DecorationSet.empty;
+        return decs;
+      }
+    }
+  });
+};

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

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

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

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

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

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { SortOrder } from '@atlaskit/editor-common/types';
+import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
+export var unsort = function unsort(oldOrder, tableElement) {
+  var rows = tableElement.querySelectorAll('tr');
+  var tbody = tableElement.querySelector('tbody');
+  var sortedOrder = _toConsumableArray(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
+export var getSortOrderFromTable = function getSortOrderFromTable(tableElement, sortIndex, direction) {
+  var sortOrder = direction === 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(_toConsumableArray(order));
+};
+export var toggleSort = function toggleSort(view, event, pluginState) {
+  var _target$closest;
+  var target = event.target;
+  var widget = target.closest(".".concat(SORTING_ICON_CLASS_NAME));
+  if (widget !== null && widget !== void 0 && widget.classList.contains(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(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 !== SortOrder.NO_ORDER && oldOrder !== undefined) {
+    unsort(oldOrder, tableElement);
+  }
+  var sortIndex = parseInt(datasetortIndex);
+  if (sortIndex === index) {
+    switch (direction) {
+      case SortOrder.NO_ORDER:
+        direction = SortOrder.ASC;
+        break;
+      case SortOrder.ASC:
+        direction = SortOrder.DESC;
+        break;
+      case SortOrder.DESC:
+        direction = SortOrder.NO_ORDER;
+        break;
+    }
+  } else {
+    direction = SortOrder.ASC; // default direction when a new index is clicked
+  }
+  var order = getSortOrderFromTable(tableElement, sortIndex, direction);
+  if (direction === SortOrder.NO_ORDER) {
+    tr.setMeta('tableSortMeta', _defineProperty({}, tableId, {}));
+  } else {
+    tr.setMeta('tableSortMeta', _defineProperty({}, tableId, {
+      index: sortIndex,
+      direction: direction,
+      order: order,
+      tableElement: tableElement
+    }));
+  }
+  view.dispatch(tr);
+};
+export var 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
+  };
+};