@atlaskit/editor-plugin-table 7.28.8 → 7.28.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.28.9
+
+### Patch Changes
+
+- [#150125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150125)
+  [`c9d8f549c024a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c9d8f549c024a) -
+  [ux] ED-24539 Fix live view toggle and column sorting in live view pages
+
 ## 7.28.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -358,7 +358,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props$pluginInj, _this$table2, _this$table3;
+      var _this$table, _this$table2, _this$table3;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -367,12 +367,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      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);
-      }
+      this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
       this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
@@ -647,8 +642,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$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), {
+        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), {
           priority: 'important'
         });
       }

package/dist/cjs/plugin.js

@@ -275,7 +275,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableViewModeSort',
         plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api) : undefined;
         }
       }, {
         name: 'tableLocalId',

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

@@ -12,10 +12,10 @@ 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 _SortingIconWrapper = require("../../ui/icons/SortingIconWrapper");
 var _pluginFactory = require("../plugin-factory");
 var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
@@ -29,7 +29,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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) {
+var createPlugin = exports.createPlugin = function createPlugin(api) {
   return new _safePlugin.SafePlugin({
     state: {
       init: function init() {
@@ -40,9 +40,10 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
         };
       },
       apply: function apply(tr, pluginState, oldState) {
+        var _api$editorViewMode;
         // 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()) || {},
+        var _ref = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {},
           mode = _ref.mode;
         if (mode !== 'view') {
           return pluginState;
@@ -101,7 +102,6 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
             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');
@@ -121,11 +121,12 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
                   getIntl = _getPluginState.getIntl;
                 _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
                   value: getIntl()
-                }, /*#__PURE__*/(0, _react.createElement)(_table3.SortingIcon, {
+                }, /*#__PURE__*/(0, _react.createElement)(_SortingIconWrapper.SortingIconWrapper, {
                   isSortingAllowed: !hasMergedCells,
                   sortOrdered: sortOrdered,
                   onClick: function onClick() {},
-                  onKeyDown: function onKeyDown() {}
+                  onKeyDown: function onKeyDown() {},
+                  api: api
                 })), element);
                 return element;
               }));
@@ -152,9 +153,9 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
     },
     key: _pluginKey.tableViewModeSortPluginKey,
     appendTransaction: function appendTransaction(trs, oldState, newState) {
-      var _key$getState;
+      var _api$editorViewMode2, _key$getState;
       // return newState.tr;
-      var _ref8 = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+      var _ref8 = (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState()) || {},
         mode = _ref8.mode;
       if (mode !== 'view') {
         return newState.tr;

package/dist/cjs/ui/icons/SortingIconWrapper.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortingIconWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _table = require("@atlaskit/editor-common/table");
+var SortingIconWrapper = exports.SortingIconWrapper = function SortingIconWrapper(props) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_table.SortingIcon, props);
+};

package/dist/es2019/nodeviews/TableComponent.js

@@ -339,7 +339,7 @@ class TableComponent extends React.Component {
     }
   }
   componentDidMount() {
-    var _this$props$pluginInj, _this$props$pluginInj2, _this$table2, _this$table3;
+    var _this$table, _this$table2, _this$table3;
     const {
       allowColumnResizing,
       eventDispatcher,
@@ -349,13 +349,7 @@ class TableComponent extends React.Component {
       getEditorFeatureFlags,
       isTableScalingEnabled
     } = this.props;
-    const {
-      mode
-    } = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj2 === void 0 ? void 0 : _this$props$pluginInj2.sharedState.currentState()) || {};
-    if (mode === 'view') {
-      var _this$table;
-      this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
-    }
+    this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
     this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
     this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
     const {
@@ -625,8 +619,8 @@ class TableComponent extends React.Component {
     const isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
     const isNoOfRowsChanged = tablesHaveDifferentNoOfRows(currentTable, previousTable);
     if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-      var _this$props$pluginInj3, _this$props$pluginInj4;
-      (_this$props$pluginInj3 = this.props.pluginInjectionApi) === null || _this$props$pluginInj3 === void 0 ? void 0 : (_this$props$pluginInj4 = _this$props$pluginInj3.accessibilityUtils) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
+      var _this$props$pluginInj, _this$props$pluginInj2;
+      (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj2 === void 0 ? void 0 : _this$props$pluginInj2.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
         priority: 'important'
       });
     }

package/dist/es2019/plugin.js

@@ -263,7 +263,7 @@ const tablesPlugin = ({
       }, {
         name: 'tableViewModeSort',
         plugin: () => {
-          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api) : undefined;
         }
       }, {
         name: 'tableLocalId',

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

@@ -8,15 +8,15 @@ 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 { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 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 => {
+export const createPlugin = api => {
   return new SafePlugin({
     state: {
       init: () => ({
@@ -25,11 +25,12 @@ export const createPlugin = editorViewModeAPI => {
         allTables: []
       }),
       apply(tr, pluginState, oldState) {
+        var _api$editorViewMode;
         // 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()) || {};
+        } = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {};
         if (mode !== 'view') {
           return pluginState;
         }
@@ -77,7 +78,6 @@ export const createPlugin = editorViewModeAPI => {
             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');
@@ -98,11 +98,12 @@ export const createPlugin = editorViewModeAPI => {
                 } = getPluginState(oldState);
                 ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
                   value: getIntl()
-                }, /*#__PURE__*/createElement(SortingIcon, {
+                }, /*#__PURE__*/createElement(SortingIconWrapper, {
                   isSortingAllowed: !hasMergedCells,
                   sortOrdered,
                   onClick: () => {},
-                  onKeyDown: () => {}
+                  onKeyDown: () => {},
+                  api
                 })), element);
                 return element;
               }));
@@ -129,11 +130,11 @@ export const createPlugin = editorViewModeAPI => {
     },
     key,
     appendTransaction: (trs, oldState, newState) => {
-      var _key$getState;
+      var _api$editorViewMode2, _key$getState;
       // return newState.tr;
       const {
         mode
-      } = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {};
+      } = (api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState()) || {};
       if (mode !== 'view') {
         return newState.tr;
       }

package/dist/es2019/ui/icons/SortingIconWrapper.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+export const SortingIconWrapper = props => {
+  const {
+    editorViewModeState
+  } = useSharedPluginState(props.api, ['editorViewMode']);
+  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SortingIcon, props);
+};

package/dist/esm/nodeviews/TableComponent.js

@@ -351,7 +351,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   _createClass(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props$pluginInj, _this$table2, _this$table3;
+      var _this$table, _this$table2, _this$table3;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -360,12 +360,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      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);
-      }
+      this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
       this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
@@ -640,8 +635,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
       var isNoOfRowsChanged = tablesHaveDifferentNoOfRows(currentTable, previousTable);
       if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-        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), {
+        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), {
           priority: 'important'
         });
       }

package/dist/esm/plugin.js

@@ -268,7 +268,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableViewModeSort',
         plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api) : undefined;
         }
       }, {
         name: 'tableLocalId',

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

@@ -16,15 +16,15 @@ 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 { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 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) {
+export var createPlugin = function createPlugin(api) {
   return new SafePlugin({
     state: {
       init: function init() {
@@ -35,9 +35,10 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
         };
       },
       apply: function apply(tr, pluginState, oldState) {
+        var _api$editorViewMode;
         // 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()) || {},
+        var _ref = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {},
           mode = _ref.mode;
         if (mode !== 'view') {
           return pluginState;
@@ -96,7 +97,6 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
             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');
@@ -116,11 +116,12 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
                   getIntl = _getPluginState.getIntl;
                 ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
                   value: getIntl()
-                }, /*#__PURE__*/createElement(SortingIcon, {
+                }, /*#__PURE__*/createElement(SortingIconWrapper, {
                   isSortingAllowed: !hasMergedCells,
                   sortOrdered: sortOrdered,
                   onClick: function onClick() {},
-                  onKeyDown: function onKeyDown() {}
+                  onKeyDown: function onKeyDown() {},
+                  api: api
                 })), element);
                 return element;
               }));
@@ -147,9 +148,9 @@ export var createPlugin = function createPlugin(editorViewModeAPI) {
     },
     key: key,
     appendTransaction: function appendTransaction(trs, oldState, newState) {
-      var _key$getState;
+      var _api$editorViewMode2, _key$getState;
       // return newState.tr;
-      var _ref8 = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+      var _ref8 = (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState()) || {},
         mode = _ref8.mode;
       if (mode !== 'view') {
         return newState.tr;

package/dist/esm/ui/icons/SortingIconWrapper.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+export var SortingIconWrapper = function SortingIconWrapper(props) {
+  var _useSharedPluginState = useSharedPluginState(props.api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SortingIcon, props);
+};

package/dist/types/pm-plugins/view-mode-sort/index.d.ts

@@ -7,4 +7,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type tablePlugin from '../../plugin';
 import type { ViewModeSortPluginState } from './types';
-export declare const createPlugin: (editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode']) => SafePlugin<ViewModeSortPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>) => SafePlugin<ViewModeSortPluginState>;

package/dist/types/ui/icons/SortingIconWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TablePlugin } from '../../plugin';
+type SortingIconProps = React.ComponentProps<typeof SortingIcon>;
+type SortingIconWrapperProps = SortingIconProps & {
+    api: ExtractInjectionAPI<TablePlugin>;
+};
+export declare const SortingIconWrapper: (props: SortingIconWrapperProps) => JSX.Element | null;
+export {};

package/dist/types-ts4.5/pm-plugins/view-mode-sort/index.d.ts

@@ -7,4 +7,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type tablePlugin from '../../plugin';
 import type { ViewModeSortPluginState } from './types';
-export declare const createPlugin: (editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode']) => SafePlugin<ViewModeSortPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>) => SafePlugin<ViewModeSortPluginState>;

package/dist/types-ts4.5/ui/icons/SortingIconWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TablePlugin } from '../../plugin';
+type SortingIconProps = React.ComponentProps<typeof SortingIcon>;
+type SortingIconWrapperProps = SortingIconProps & {
+    api: ExtractInjectionAPI<TablePlugin>;
+};
+export declare const SortingIconWrapper: (props: SortingIconWrapperProps) => JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.28.8",
+	"version": "7.28.9",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableComponent.tsx

@@ -228,11 +228,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isTableScalingEnabled,
 		} = this.props;
 
-		const { mode } =
-			this.props.pluginInjectionApi?.editorViewMode?.sharedState.currentState() || {};
-		if (mode === 'view') {
-			this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
-		}
+		this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
 
 		this?.table?.addEventListener('mouseout', this.handleMouseOut);
 

package/src/plugin.tsx

@@ -436,7 +436,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tableViewModeSort',
 					plugin: () => {
-						return api?.editorViewMode ? createViewModeSortPlugin(api.editorViewMode) : undefined;
+						return api?.editorViewMode ? createViewModeSortPlugin(api) : undefined;
 					},
 				},
 				{

package/src/pm-plugins/view-mode-sort/index.ts

@@ -10,13 +10,13 @@ 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 type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import type tablePlugin from '../../plugin';
+import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 import { getPluginState } from '../plugin-factory';
 
 import {
@@ -28,9 +28,7 @@ import { tableViewModeSortPluginKey as key } from './plugin-key';
 import type { ViewModeSortPluginState } from './types';
 import { getTableElements, toggleSort } from './utils';
 
-export const createPlugin = (
-	editorViewModeAPI: ExtractInjectionAPI<typeof tablePlugin>['editorViewMode'],
-) => {
+export const createPlugin = (api: ExtractInjectionAPI<typeof tablePlugin>) => {
 	return new SafePlugin({
 		state: {
 			init: () => ({
@@ -41,7 +39,7 @@ export const createPlugin = (
 			apply(tr, pluginState: ViewModeSortPluginState, 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?.sharedState.currentState() || {};
+				const { mode } = api.editorViewMode?.sharedState.currentState() || {};
 				if (mode !== 'view') {
 					return pluginState;
 				}
@@ -86,7 +84,6 @@ export const createPlugin = (
 						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, () => {
 									const element = document.createElement('div');
@@ -109,11 +106,12 @@ export const createPlugin = (
 										createElement(
 											RawIntlProvider,
 											{ value: getIntl() },
-											createElement(SortingIcon, {
+											createElement(SortingIconWrapper, {
 												isSortingAllowed: !hasMergedCells,
 												sortOrdered,
 												onClick: () => {},
 												onKeyDown: () => {},
+												api,
 											}),
 										),
 										element,
@@ -146,7 +144,7 @@ export const createPlugin = (
 		key,
 		appendTransaction: (trs, oldState, newState) => {
 			// return newState.tr;
-			const { mode } = editorViewModeAPI?.sharedState.currentState() || {};
+			const { mode } = api?.editorViewMode?.sharedState.currentState() || {};
 			if (mode !== 'view') {
 				return newState.tr;
 			}

package/src/ui/icons/SortingIconWrapper.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+
+import type { TablePlugin } from '../../plugin';
+
+type SortingIconProps = React.ComponentProps<typeof SortingIcon>;
+type SortingIconWrapperProps = SortingIconProps & {
+	api: ExtractInjectionAPI<TablePlugin>;
+};
+
+export const SortingIconWrapper = (props: SortingIconWrapperProps) => {
+	const { editorViewModeState } = useSharedPluginState(props.api, ['editorViewMode']);
+	if (editorViewModeState?.mode === 'edit') {
+		return null;
+	}
+	return <SortingIcon {...props} />;
+};