@atlaskit/editor-plugin-table 7.10.1 → 7.11.0

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

@@ -0,0 +1,243 @@
+/**
+ * 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 const createPlugin = editorViewModeAPI => {
+  return new SafePlugin({
+    state: {
+      init: () => ({
+        decorations: DecorationSet.empty,
+        sort: {},
+        allTables: []
+      }),
+      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.
+        const {
+          mode
+        } = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {};
+        if (mode !== 'view') {
+          return pluginState;
+        }
+        let {
+          decorations,
+          sort,
+          allTables
+        } = pluginState;
+        const sortMeta = tr.getMeta('tableSortMeta');
+        let hoverTableMeta = tr.getMeta('mouseEnterTable');
+        let removeTableMeta = tr.getMeta('removeTable');
+        let tableId = '';
+
+        // Remove the table from the state
+        if (removeTableMeta) {
+          allTables = allTables.filter(([id]) => id !== removeTableMeta);
+        } else {
+          tableId = hoverTableMeta === null || hoverTableMeta === void 0 ? void 0 : hoverTableMeta[0];
+        }
+        sort = {
+          ...sort,
+          ...sortMeta
+        };
+        const isTableInState = allTables.some(([id]) => id === tableId);
+
+        // Update the table in the state
+        if (hoverTableMeta) {
+          allTables = allTables.filter(([id]) => id !== hoverTableMeta[0]);
+          allTables.push(hoverTableMeta);
+        }
+
+        /**
+         * Create decorations for the sorting icons
+         */
+        const decs = [];
+
+        // TODO - add support for keyboard only users
+        if (hoverTableMeta && !isTableInState || sortMeta) {
+          allTables.forEach(table => {
+            const [tableId, _node, pos] = table;
+            const tableNode = tr.doc.nodeAt(tr.mapping.map(pos));
+            if (!tableNode || tableNode.type.name !== 'table') {
+              return pluginState;
+            }
+            const map = TableMap.get(tableNode);
+            const hasMergedCells = new Set(map.map).size !== map.map.length;
+            map.mapByRow[0].forEach((cell, index) => {
+              // return pluginState;
+              decs.push(Decoration.widget(cell + pos + 2, () => {
+                var _sort$tableId;
+                const element = document.createElement('div');
+                element.setAttribute(SORT_INDEX_DATA_ATTRIBUTE, `${index}`);
+                element.classList.add(SORTING_ICON_CLASS_NAME);
+                if (hasMergedCells) {
+                  element.classList.add(IS_DISABLED_CLASS_NAME);
+                }
+                let 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;
+                }
+                const {
+                  getIntl
+                } = getPluginState(oldState);
+                ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+                  value: getIntl()
+                }, /*#__PURE__*/createElement(SortingIcon, {
+                  isSortingAllowed: !hasMergedCells,
+                  sortOrdered,
+                  onClick: () => {},
+                  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(table => {
+            return [table[0], table[1], tr.mapping.map(table[2])];
+          });
+        }
+        return {
+          decorations,
+          sort,
+          allTables
+        };
+      }
+    },
+    key,
+    appendTransaction: (trs, oldState, newState) => {
+      var _key$getState;
+      // return newState.tr;
+      const {
+        mode
+      } = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {};
+      if (mode !== 'view') {
+        return newState.tr;
+      }
+      let 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.
+       */
+      for (const tr of trs) {
+        const hoverTableMeta = tr.getMeta('mouseEnterTable');
+        if (hoverTableMeta) {
+          allTables = allTables.filter(([id]) => id !== hoverTableMeta[0]);
+          allTables.push(hoverTableMeta);
+        }
+        const isRemote = tr.getMeta('isRemote');
+        const isDocChanged = tr.docChanged;
+        const isChangesIncoming = isRemote && isDocChanged;
+        const oldPluginState = key.getState(oldState);
+        const newPluginState = key.getState(newState);
+        for (const table of allTables) {
+          var _oldPluginState$sort, _newPluginState$sort;
+          const [tableId, node, pos] = table;
+          const {
+            order: oldOrder,
+            direction: oldDirection,
+            index: oldIndex
+          } = (oldPluginState === null || oldPluginState === void 0 ? void 0 : (_oldPluginState$sort = oldPluginState.sort) === null || _oldPluginState$sort === void 0 ? void 0 : _oldPluginState$sort[tableId]) || {};
+          if (isChangesIncoming) {
+            var _maybeTableNode$attrs;
+            const maybeTableNode = tr.doc.nodeAt(pos);
+            const isTableNodeChanged = (maybeTableNode === null || maybeTableNode === void 0 ? void 0 : (_maybeTableNode$attrs = maybeTableNode.attrs) === null || _maybeTableNode$attrs === void 0 ? void 0 : _maybeTableNode$attrs.localId) !== tableId || !node.eq(maybeTableNode);
+            if (isTableNodeChanged) {
+              const newtr = newState.tr;
+              newtr.setMeta('tableSortMeta', {
+                [tableId]: {}
+              });
+              newtr.setMeta('removeTable', tableId);
+
+              // Unsort the table here
+              if (oldOrder !== undefined) {
+                const {
+                  rows,
+                  tbody
+                } = getTableElements(tableId);
+                if (!rows || !tbody) {
+                  return newtr;
+                }
+                const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
+                sortedOrder.forEach((index, i) => {
+                  tbody.appendChild(rows[index.index + 1]);
+                });
+                return newtr;
+              }
+            }
+          }
+
+          /**
+           * Sort the table if the sort order has changed
+           */
+          const {
+            order: newOrder,
+            direction: newDirection,
+            index: newIndex
+          } = (newPluginState === null || newPluginState === void 0 ? void 0 : (_newPluginState$sort = newPluginState.sort) === null || _newPluginState$sort === void 0 ? void 0 : _newPluginState$sort[tableId]) || {};
+          const orderChanged = oldDirection !== newDirection || oldIndex !== newIndex;
+          if (orderChanged) {
+            if (!isRemote && newDirection !== SortOrder.NO_ORDER) {
+              const {
+                rows,
+                tbody
+              } = getTableElements(tableId);
+              if (rows && newOrder) {
+                newOrder.forEach((index, i) => {
+                  tbody === null || tbody === void 0 ? void 0 : tbody.appendChild(rows[index.value + 1]);
+                });
+              }
+            }
+          }
+        }
+      }
+      return newState.tr;
+    },
+    props: {
+      handleDOMEvents: {
+        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;
+            const pluginState = ((_key$getState2 = key.getState(view.state)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.sort) || {};
+            toggleSort(view, event, pluginState);
+          }
+        },
+        click: (view, event) => {
+          var _key$getState3;
+          const pluginState = ((_key$getState3 = key.getState(view.state)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.sort) || {};
+          toggleSort(view, event, pluginState);
+        }
+      },
+      decorations(state) {
+        var _key$getState4;
+        const decs = ((_key$getState4 = key.getState(state)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.decorations) || DecorationSet.empty;
+        return decs;
+      }
+    }
+  });
+};

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

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

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

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

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/commands/insert.js

@@ -5,7 +5,6 @@ import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { addColumnAt as addColumnAtPMUtils, addRowAt, findTable, selectedRect } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateRowOrColumnMovedTransform } from '../pm-plugins/analytics/commands';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { rescaleColumns } from '../transforms/column-width';
@@ -37,7 +36,7 @@ export function addColumnAt() {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
         updatedTr = rescaleColumns(isTableScalingEnabled)(table, view)(updatedTr);
       }
-      if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
+      if (view) {
         updatedTr = updateRowOrColumnMovedTransform({
           type: 'column'
         }, 'addRowOrColumn')(view.state, updatedTr);
@@ -125,11 +124,9 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow) {
       } else {
         tr.setSelection(selection.map(tr.doc, tr.mapping));
       }
-      if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
-        updateRowOrColumnMovedTransform({
-          type: 'row'
-        }, 'addRowOrColumn')(state, tr);
-      }
+      updateRowOrColumnMovedTransform({
+        type: 'row'
+      }, 'addRowOrColumn')(state, tr);
       dispatch(tr);
     }
     return true;

package/dist/esm/commands/misc.js

@@ -188,9 +188,16 @@ export var getTableElementMoveTypeBySlice = function getTableElementMoveTypeBySl
   if (slice.content.childCount === 1 && slice.content.firstChild.type === tableRow) {
     return 'row';
   }
-  var map = TableMap.get(currentTable.node);
-  var slicedMap = 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.get(currentTable.node);
+    var slicedMap = TableMap.get(slice.content.firstChild);
+    return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;
+  } catch (e) {
+    return undefined;
+  }
 };
 export var isInsideFirstCellOfRowOrColumn = function isInsideFirstCellOfRowOrColumn(selection, type) {
   var table = findTable(selection);

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) {
@@ -248,7 +254,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
         plugin: function plugin(_ref15) {
           var dispatch = _ref15.dispatch,
             dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
-          return getBooleanFF('platform.editor.table.analytics-plugin-moved-event') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent) : undefined;
+          return createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent);
         }
       }, {
         name: 'tableGetEditorViewReferencePlugin',

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

@@ -1,6 +1,5 @@
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { countCellsInSlice, getTableElementMoveTypeBySlice, getTableSelectionType, isInsideFirstCellOfRowOrColumn } from '../../commands/misc';
 import { resetRowOrColumnMovedTransform, updateRowOrColumnMoved } from './commands';
 import { createPluginState } from './plugin-factory';
@@ -34,33 +33,29 @@ export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent
       handlePaste: function handlePaste(_ref, event, slice) {
         var state = _ref.state,
           dispatch = _ref.dispatch;
-        if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
-          var schema = state.schema;
-          var type = getTableElementMoveTypeBySlice(slice, state);
+        var schema = state.schema;
+        var type = getTableElementMoveTypeBySlice(slice, state);
 
-          // if the selection wasn't in the first cell of a row or column, don't count it
-          if (!type || !isInsideFirstCellOfRowOrColumn(state.selection, type)) {
-            return;
-          }
-          var count = countCellsInSlice(slice, schema, type);
-          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 || !isInsideFirstCellOfRowOrColumn(state.selection, type)) {
+          return;
         }
+        var count = countCellsInSlice(slice, schema, type);
+        updateRowOrColumnMoved({
+          numberOfCells: count,
+          type: type
+        }, 'pasted')(state, dispatch);
       },
       transformCopied: function transformCopied(slice, _ref2) {
         var state = _ref2.state,
           dispatch = _ref2.dispatch;
-        if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
-          var schema = state.schema;
-          var type = getTableSelectionType(state.selection);
-          var count = countCellsInSlice(slice, schema, type);
-          updateRowOrColumnMoved({
-            numberOfCells: count,
-            type: type
-          }, 'copyOrCut')(state, dispatch);
-        }
+        var schema = state.schema;
+        var type = getTableSelectionType(state.selection);
+        var count = countCellsInSlice(slice, schema, type);
+        updateRowOrColumnMoved({
+          numberOfCells: count,
+          type: type
+        }, 'copyOrCut')(state, dispatch);
         return slice;
       }
     }

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