@atlaskit/editor-plugin-table 9.5.8 → 9.5.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/nodeviews/TableComponent.js +2 -1
  3. package/dist/cjs/pm-plugins/main.js +14 -4
  4. package/dist/cjs/pm-plugins/utils/paste.js +3 -3
  5. package/dist/cjs/pm-plugins/view-mode-sort/utils.js +5 -4
  6. package/dist/cjs/ui/common-styles.js +1 -1
  7. package/dist/es2019/nodeviews/TableComponent.js +2 -1
  8. package/dist/es2019/pm-plugins/main.js +14 -4
  9. package/dist/es2019/pm-plugins/utils/paste.js +3 -3
  10. package/dist/es2019/pm-plugins/view-mode-sort/utils.js +5 -4
  11. package/dist/es2019/ui/common-styles.js +11 -7
  12. package/dist/esm/nodeviews/TableComponent.js +2 -1
  13. package/dist/esm/pm-plugins/main.js +14 -4
  14. package/dist/esm/pm-plugins/utils/paste.js +3 -3
  15. package/dist/esm/pm-plugins/view-mode-sort/utils.js +5 -4
  16. package/dist/esm/ui/common-styles.js +1 -1
  17. package/dist/types/pm-plugins/view-mode-sort/utils.d.ts +2 -2
  18. package/dist/types-ts4.5/pm-plugins/view-mode-sort/utils.d.ts +2 -2
  19. package/package.json +4 -1
  20. package/src/nodeviews/TableComponent.tsx +4 -1
  21. package/src/pm-plugins/main.ts +15 -5
  22. package/src/pm-plugins/utils/paste.ts +3 -3
  23. package/src/pm-plugins/view-mode-sort/utils.ts +14 -4
  24. package/src/ui/common-styles.ts +11 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 9.5.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [#116555](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116555)
8
+ [`ee0cb1bc42e39`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee0cb1bc42e39) -
9
+ [ux] ED-26663 Bugfix for a regression introduced by nested tables - when nested table nodes are
10
+ enabled but the nested table experiment is disabled, copying table content inside a bodied
11
+ extension and pasting it in the table results in the content being pasted under the table and
12
+ wrapped in a table
13
+
14
+ ## 9.5.9
15
+
16
+ ### Patch Changes
17
+
18
+ - [#115089](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115089)
19
+ [`cebfa87c2825a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cebfa87c2825a) -
20
+ [ux] [ED-26564] This change fixes the table sort functionality for tables containing nested
21
+ tables, and fixes the styling for the table sort button when selected (is active).
22
+
3
23
  ## 9.5.8
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/nodeviews/TableComponent.js CHANGED
@@ -338,6 +338,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
338
338
  (0, _defineProperty3.default)(_this, "handleScrollDebounced", (0, _rafSchd.default)(_this.handleScroll));
339
339
  (0, _defineProperty3.default)(_this, "handleAutoSizeDebounced", (0, _rafSchd.default)(_this.handleAutoSize));
340
340
  (0, _defineProperty3.default)(_this, "handleWindowResizeDebounced", (0, _rafSchd.default)(_this.handleWindowResize));
341
+ (0, _defineProperty3.default)(_this, "updateShadowStateDebounced", (0, _rafSchd.default)(_this.updateShadowState));
341
342
  var _options = props.options,
342
343
  _containerWidth = props.containerWidth,
343
344
  _getNode = props.getNode;
@@ -733,7 +734,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
733
734
  // that happens when a table is nested in expand and expand's width is
734
735
  // changed via breakout button
735
736
  window.requestAnimationFrame(function () {
736
- _this4.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this4.updateShadowState,
737
+ _this4.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? _this4.updateShadowStateDebounced : _this4.updateShadowState,
737
738
  // Ignored via go/ees005
738
739
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
739
740
  _this4.table, _this4.wrapper);
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -193,11 +193,21 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
193
193
  // This needs to go before `transformSliceToRemoveOpenTable`
194
194
  slice = (0, _transforms.transformSliceToRemoveOpenExpand)(slice, schema);
195
195
 
196
- /** If a partial paste of table, paste only table's content */
197
- slice = (0, _paste.transformSliceToRemoveOpenTable)(slice, schema);
196
+ // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
197
+ // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
198
+ if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_bodied_extension_fix')) {
199
+ /** If a partial paste of bodied extension, paste only text */
200
+ slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
198
201
 
199
- /** If a partial paste of bodied extension, paste only text */
200
- slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
202
+ /** If a partial paste of table, paste only table's content */
203
+ slice = (0, _paste.transformSliceToRemoveOpenTable)(slice, schema);
204
+ } else {
205
+ /** If a partial paste of table, paste only table's content */
206
+ slice = (0, _paste.transformSliceToRemoveOpenTable)(slice, schema);
207
+
208
+ /** If a partial paste of bodied extension, paste only text */
209
+ slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
210
+ }
201
211
 
202
212
  /** If a partial paste of multi bodied extension, paste only children */
203
213
  slice = (0, _transforms.transformSliceToRemoveOpenMultiBodiedExtension)(slice, schema);
package/dist/cjs/pm-plugins/utils/paste.js CHANGED
@@ -195,8 +195,8 @@ var containsNonTableBlockChildren = function containsNonTableBlockChildren(fragm
195
195
  var transformSliceToRemoveOpenTable = exports.transformSliceToRemoveOpenTable = function transformSliceToRemoveOpenTable(slice, schema) {
196
196
  var _slice$content$firstC4;
197
197
  if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_paste_wrap_fix')) {
198
- // Case 1: A slice of a textblock selection inside a nested table
199
- // Prosemirror wraps nested textblock selections in their respective tables
198
+ // Case 1: A slice of a block selection inside a nested table
199
+ // Prosemirror wraps nested block selections in their respective tables
200
200
  // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
201
201
 
202
202
  // slice starts and ends inside a nested table at the same depth
@@ -208,7 +208,7 @@ var transformSliceToRemoveOpenTable = exports.transformSliceToRemoveOpenTable =
208
208
  // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
209
209
  if (isFragmentSingleCellTable(slice.content, schema)) {
210
210
  var _slice$content$firstC2;
211
- (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node, _pos, parent) {
211
+ (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node) {
212
212
  if (isNodeSingleCellTable(node, schema)) {
213
213
  descendedDepth += tableDepthDecrement;
214
214
  } else if (node.type === schema.nodes.table) {
package/dist/cjs/pm-plugins/view-mode-sort/utils.js CHANGED
@@ -9,10 +9,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
10
  var _types = require("@atlaskit/editor-common/types");
11
11
  var _utils = require("@atlaskit/editor-common/utils");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _consts = require("./consts");
13
14
  var unsort = exports.unsort = function unsort(oldOrder, tableElement) {
14
- var rows = tableElement.querySelectorAll('tr');
15
- var tbody = tableElement.querySelector('tbody');
15
+ var tbody = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelector(":scope > tbody") : tableElement.querySelector('tbody');
16
+ var rows = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelectorAll(":scope > tbody > tr") : tableElement.querySelectorAll('tr');
16
17
  var sortedOrder = (0, _toConsumableArray2.default)(oldOrder).sort(function (a, b) {
17
18
  return a.value - b.value;
18
19
  });
@@ -117,8 +118,8 @@ var toggleSort = exports.toggleSort = function toggleSort(view, event, pluginSta
117
118
  };
118
119
  var getTableElements = exports.getTableElements = function getTableElements(tableId) {
119
120
  var tableElement = document.querySelector("table[data-table-local-id=\"".concat(tableId, "\"]"));
120
- var tbody = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
121
- var rows = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
121
+ var tbody = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(':scope > tbody') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
122
+ var rows = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll(':scope > tbody > tr') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
122
123
  return {
123
124
  tbody: tbody,
124
125
  rows: rows
package/dist/cjs/ui/common-styles.js CHANGED
@@ -43,7 +43,7 @@ var breakoutWidthStyling = function breakoutWidthStyling() {
43
43
  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t> *:not([data-mark-type='fragment'])\n\t\t\t.", "\n\t\t\t.", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t> [data-mark-type='fragment'] * .", " .", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\t"])), _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.NODEVIEW_WRAPPER, _types.TableCssClassName.TABLE_CONTAINER);
44
44
  };
45
45
  var viewModeSortStyles = function viewModeSortStyles() {
46
- return (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// new styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.", ":hover)) {\n\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _types.TableCssClassName.TABLE_CONTAINER, _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// old styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME);
46
+ return (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// new styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .", " {\n\t\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .", " {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.", ":hover)) {\n\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _types.TableCssClassName.TABLE_CONTAINER, _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t// old styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _consts.SORTING_ICON_CLASS_NAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME, _table.SORTABLE_COLUMN_ICON_CLASSNAME);
47
47
  };
48
48
  var tableBorderStyles = function tableBorderStyles() {
49
49
  return "border-color: ".concat(_consts2.tableBorderDeleteColor);
package/dist/es2019/nodeviews/TableComponent.js CHANGED
@@ -336,6 +336,7 @@ class TableComponent extends React.Component {
336
336
  _defineProperty(this, "handleScrollDebounced", rafSchedule(this.handleScroll));
337
337
  _defineProperty(this, "handleAutoSizeDebounced", rafSchedule(this.handleAutoSize));
338
338
  _defineProperty(this, "handleWindowResizeDebounced", rafSchedule(this.handleWindowResize));
339
+ _defineProperty(this, "updateShadowStateDebounced", rafSchedule(this.updateShadowState));
339
340
  const {
340
341
  options: _options,
341
342
  containerWidth: _containerWidth,
@@ -702,7 +703,7 @@ class TableComponent extends React.Component {
702
703
  // that happens when a table is nested in expand and expand's width is
703
704
  // changed via breakout button
704
705
  window.requestAnimationFrame(() => {
705
- this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState,
706
+ this.overflowShadowsObserver = new OverflowShadowsObserver(fg('platform_editor_nested_tables_view_mode_sort') ? this.updateShadowStateDebounced : this.updateShadowState,
706
707
  // Ignored via go/ees005
707
708
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
708
709
  this.table, this.wrapper);
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -185,11 +185,21 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
185
185
  // This needs to go before `transformSliceToRemoveOpenTable`
186
186
  slice = transformSliceToRemoveOpenExpand(slice, schema);
187
187
 
188
- /** If a partial paste of table, paste only table's content */
189
- slice = transformSliceToRemoveOpenTable(slice, schema);
188
+ // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
189
+ // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
190
+ if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
191
+ /** If a partial paste of bodied extension, paste only text */
192
+ slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
190
193
 
191
- /** If a partial paste of bodied extension, paste only text */
192
- slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
194
+ /** If a partial paste of table, paste only table's content */
195
+ slice = transformSliceToRemoveOpenTable(slice, schema);
196
+ } else {
197
+ /** If a partial paste of table, paste only table's content */
198
+ slice = transformSliceToRemoveOpenTable(slice, schema);
199
+
200
+ /** If a partial paste of bodied extension, paste only text */
201
+ slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
202
+ }
193
203
 
194
204
  /** If a partial paste of multi bodied extension, paste only children */
195
205
  slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);
package/dist/es2019/pm-plugins/utils/paste.js CHANGED
@@ -187,8 +187,8 @@ const containsNonTableBlockChildren = (fragment, schema) => {
187
187
  export const transformSliceToRemoveOpenTable = (slice, schema) => {
188
188
  var _slice$content$firstC8;
189
189
  if (fg('platform_editor_nested_tables_paste_wrap_fix')) {
190
- // Case 1: A slice of a textblock selection inside a nested table
191
- // Prosemirror wraps nested textblock selections in their respective tables
190
+ // Case 1: A slice of a block selection inside a nested table
191
+ // Prosemirror wraps nested block selections in their respective tables
192
192
  // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
193
193
 
194
194
  // slice starts and ends inside a nested table at the same depth
@@ -200,7 +200,7 @@ export const transformSliceToRemoveOpenTable = (slice, schema) => {
200
200
  // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
201
201
  if (isFragmentSingleCellTable(slice.content, schema)) {
202
202
  var _slice$content$firstC2;
203
- (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.descendants((node, _pos, parent) => {
203
+ (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.descendants(node => {
204
204
  if (isNodeSingleCellTable(node, schema)) {
205
205
  descendedDepth += tableDepthDecrement;
206
206
  } else if (node.type === schema.nodes.table) {
package/dist/es2019/pm-plugins/view-mode-sort/utils.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { SortOrder } from '@atlaskit/editor-common/types';
2
2
  import { convertProsemirrorTableNodeToArrayOfRows, createCompareNodes } from '@atlaskit/editor-common/utils';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
4
5
  export const unsort = (oldOrder, tableElement) => {
5
- const rows = tableElement.querySelectorAll('tr');
6
- const tbody = tableElement.querySelector('tbody');
6
+ const tbody = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelector(`:scope > tbody`) : tableElement.querySelector('tbody');
7
+ const rows = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelectorAll(`:scope > tbody > tr`) : tableElement.querySelectorAll('tr');
7
8
  const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
8
9
  sortedOrder.forEach(item => {
9
10
  tbody === null || tbody === void 0 ? void 0 : tbody.appendChild(rows[item.index + 1]);
@@ -107,8 +108,8 @@ export const toggleSort = (view, event, pluginState) => {
107
108
  };
108
109
  export const getTableElements = tableId => {
109
110
  const tableElement = document.querySelector(`table[data-table-local-id="${tableId}"]`);
110
- const tbody = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
111
- const rows = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
111
+ const tbody = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(':scope > tbody') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
112
+ const rows = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll(':scope > tbody > tr') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
112
113
  return {
113
114
  tbody,
114
115
  rows
package/dist/es2019/ui/common-styles.js CHANGED
@@ -134,16 +134,20 @@ const viewModeSortStyles = () => {
134
134
  }
135
135
  }
136
136
 
137
- &:has(.is-active) {
138
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
139
- opacity: 1;
137
+ > .${SORTING_ICON_CLASS_NAME} {
138
+ &:has(.is-active) {
139
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
140
+ opacity: 1;
141
+ }
140
142
  }
141
143
  }
142
144
 
143
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
144
- opacity: 0;
145
- &:focus {
146
- opacity: 1;
145
+ > .${SORTING_ICON_CLASS_NAME} {
146
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
147
+ opacity: 0;
148
+ &:focus {
149
+ opacity: 1;
150
+ }
147
151
  }
148
152
  }
149
153
 
package/dist/esm/nodeviews/TableComponent.js CHANGED
@@ -332,6 +332,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
332
332
  _defineProperty(_this, "handleScrollDebounced", rafSchedule(_this.handleScroll));
333
333
  _defineProperty(_this, "handleAutoSizeDebounced", rafSchedule(_this.handleAutoSize));
334
334
  _defineProperty(_this, "handleWindowResizeDebounced", rafSchedule(_this.handleWindowResize));
335
+ _defineProperty(_this, "updateShadowStateDebounced", rafSchedule(_this.updateShadowState));
335
336
  var _options = props.options,
336
337
  _containerWidth = props.containerWidth,
337
338
  _getNode = props.getNode;
@@ -727,7 +728,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
727
728
  // that happens when a table is nested in expand and expand's width is
728
729
  // changed via breakout button
729
730
  window.requestAnimationFrame(function () {
730
- _this4.overflowShadowsObserver = new OverflowShadowsObserver(_this4.updateShadowState,
731
+ _this4.overflowShadowsObserver = new OverflowShadowsObserver(fg('platform_editor_nested_tables_view_mode_sort') ? _this4.updateShadowStateDebounced : _this4.updateShadowState,
731
732
  // Ignored via go/ees005
732
733
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
733
734
  _this4.table, _this4.wrapper);
package/dist/esm/pm-plugins/main.js CHANGED
@@ -186,11 +186,21 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
186
186
  // This needs to go before `transformSliceToRemoveOpenTable`
187
187
  slice = transformSliceToRemoveOpenExpand(slice, schema);
188
188
 
189
- /** If a partial paste of table, paste only table's content */
190
- slice = transformSliceToRemoveOpenTable(slice, schema);
189
+ // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
190
+ // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
191
+ if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
192
+ /** If a partial paste of bodied extension, paste only text */
193
+ slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
191
194
 
192
- /** If a partial paste of bodied extension, paste only text */
193
- slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
195
+ /** If a partial paste of table, paste only table's content */
196
+ slice = transformSliceToRemoveOpenTable(slice, schema);
197
+ } else {
198
+ /** If a partial paste of table, paste only table's content */
199
+ slice = transformSliceToRemoveOpenTable(slice, schema);
200
+
201
+ /** If a partial paste of bodied extension, paste only text */
202
+ slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
203
+ }
194
204
 
195
205
  /** If a partial paste of multi bodied extension, paste only children */
196
206
  slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);
package/dist/esm/pm-plugins/utils/paste.js CHANGED
@@ -188,8 +188,8 @@ var containsNonTableBlockChildren = function containsNonTableBlockChildren(fragm
188
188
  export var transformSliceToRemoveOpenTable = function transformSliceToRemoveOpenTable(slice, schema) {
189
189
  var _slice$content$firstC4;
190
190
  if (fg('platform_editor_nested_tables_paste_wrap_fix')) {
191
- // Case 1: A slice of a textblock selection inside a nested table
192
- // Prosemirror wraps nested textblock selections in their respective tables
191
+ // Case 1: A slice of a block selection inside a nested table
192
+ // Prosemirror wraps nested block selections in their respective tables
193
193
  // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
194
194
 
195
195
  // slice starts and ends inside a nested table at the same depth
@@ -201,7 +201,7 @@ export var transformSliceToRemoveOpenTable = function transformSliceToRemoveOpen
201
201
  // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
202
202
  if (isFragmentSingleCellTable(slice.content, schema)) {
203
203
  var _slice$content$firstC2;
204
- (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node, _pos, parent) {
204
+ (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node) {
205
205
  if (isNodeSingleCellTable(node, schema)) {
206
206
  descendedDepth += tableDepthDecrement;
207
207
  } else if (node.type === schema.nodes.table) {
package/dist/esm/pm-plugins/view-mode-sort/utils.js CHANGED
@@ -2,10 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
3
  import { SortOrder } from '@atlaskit/editor-common/types';
4
4
  import { convertProsemirrorTableNodeToArrayOfRows, createCompareNodes } from '@atlaskit/editor-common/utils';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
6
7
  export var unsort = function unsort(oldOrder, tableElement) {
7
- var rows = tableElement.querySelectorAll('tr');
8
- var tbody = tableElement.querySelector('tbody');
8
+ var tbody = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelector(":scope > tbody") : tableElement.querySelector('tbody');
9
+ var rows = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement.querySelectorAll(":scope > tbody > tr") : tableElement.querySelectorAll('tr');
9
10
  var sortedOrder = _toConsumableArray(oldOrder).sort(function (a, b) {
10
11
  return a.value - b.value;
11
12
  });
@@ -110,8 +111,8 @@ export var toggleSort = function toggleSort(view, event, pluginState) {
110
111
  };
111
112
  export var getTableElements = function getTableElements(tableId) {
112
113
  var tableElement = document.querySelector("table[data-table-local-id=\"".concat(tableId, "\"]"));
113
- var tbody = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
114
- var rows = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
114
+ var tbody = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(':scope > tbody') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tbody');
115
+ var rows = fg('platform_editor_nested_tables_view_mode_sort') ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll(':scope > tbody > tr') : tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr');
115
116
  return {
116
117
  tbody: tbody,
117
118
  rows: rows
package/dist/esm/ui/common-styles.js CHANGED
@@ -38,7 +38,7 @@ var breakoutWidthStyling = function breakoutWidthStyling() {
38
38
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t> *:not([data-mark-type='fragment'])\n\t\t\t.", "\n\t\t\t.", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t> [data-mark-type='fragment'] * .", " .", " {\n\t\t\tmargin-left: unset !important;\n\t\t\twidth: 100% !important;\n\t\t}\n\t"])), ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER);
39
39
  };
40
40
  var viewModeSortStyles = function viewModeSortStyles() {
41
- return fg('platform_editor_nested_tables_view_mode_sort') ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t// new styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.", ":hover)) {\n\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, ClassName.TABLE_CONTAINER, SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t// old styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
41
+ return fg('platform_editor_nested_tables_view_mode_sort') ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t// new styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .", " {\n\t\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> .", " {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover:not(:has(.", ":hover)) {\n\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, ClassName.TABLE_CONTAINER, SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t// old styles\n\t\t\t\tth {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\t+ p {\n\t\t\t\t\t\t\tmargin-top: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:has(.is-active) {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), SORTING_ICON_CLASS_NAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME, SORTABLE_COLUMN_ICON_CLASSNAME);
42
42
  };
43
43
  var tableBorderStyles = function tableBorderStyles() {
44
44
  return "border-color: ".concat(tableBorderDeleteColor);
package/dist/types/pm-plugins/view-mode-sort/utils.d.ts CHANGED
@@ -6,6 +6,6 @@ export declare const unsort: (oldOrder: {
6
6
  }[], tableElement: HTMLElement) => void;
7
7
  export declare const toggleSort: (view: EditorView, event: Event, pluginState: TableSortMeta) => void;
8
8
  export declare const getTableElements: (tableId: string) => {
9
- tbody: HTMLTableSectionElement | null | undefined;
10
- rows: NodeListOf<HTMLTableRowElement> | undefined;
9
+ tbody: Element | null | undefined;
10
+ rows: NodeListOf<Element> | undefined;
11
11
  };
package/dist/types-ts4.5/pm-plugins/view-mode-sort/utils.d.ts CHANGED
@@ -6,6 +6,6 @@ export declare const unsort: (oldOrder: {
6
6
  }[], tableElement: HTMLElement) => void;
7
7
  export declare const toggleSort: (view: EditorView, event: Event, pluginState: TableSortMeta) => void;
8
8
  export declare const getTableElements: (tableId: string) => {
9
- tbody: HTMLTableSectionElement | null | undefined;
10
- rows: NodeListOf<HTMLTableRowElement> | undefined;
9
+ tbody: Element | null | undefined;
10
+ rows: NodeListOf<Element> | undefined;
11
11
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "9.5.8",
3
+ "version": "9.5.10",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -164,6 +164,9 @@
164
164
  },
165
165
  "platform_editor_react18_stickyheaders_fix": {
166
166
  "type": "boolean"
167
+ },
168
+ "platform_editor_nested_tables_bodied_extension_fix": {
169
+ "type": "boolean"
167
170
  }
168
171
  }
169
172
  }
package/src/nodeviews/TableComponent.tsx CHANGED
@@ -651,7 +651,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
651
651
  // changed via breakout button
652
652
  window.requestAnimationFrame(() => {
653
653
  this.overflowShadowsObserver = new OverflowShadowsObserver(
654
- this.updateShadowState,
654
+ fg('platform_editor_nested_tables_view_mode_sort')
655
+ ? this.updateShadowStateDebounced
656
+ : this.updateShadowState,
655
657
  // Ignored via go/ees005
656
658
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
657
659
  this.table as HTMLElement,
@@ -1335,6 +1337,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
1335
1337
  private handleScrollDebounced = rafSchedule(this.handleScroll);
1336
1338
  private handleAutoSizeDebounced = rafSchedule(this.handleAutoSize);
1337
1339
  private handleWindowResizeDebounced = rafSchedule(this.handleWindowResize);
1340
+ private updateShadowStateDebounced = rafSchedule(this.updateShadowState);
1338
1341
  }
1339
1342
 
1340
1343
  export default injectIntl(TableComponent);
package/src/pm-plugins/main.ts CHANGED
@@ -287,11 +287,21 @@ export const createPlugin = (
287
287
  // This needs to go before `transformSliceToRemoveOpenTable`
288
288
  slice = transformSliceToRemoveOpenExpand(slice, schema);
289
289
 
290
- /** If a partial paste of table, paste only table's content */
291
- slice = transformSliceToRemoveOpenTable(slice, schema);
292
-
293
- /** If a partial paste of bodied extension, paste only text */
294
- slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
290
+ // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
291
+ // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
292
+ if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
293
+ /** If a partial paste of bodied extension, paste only text */
294
+ slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
295
+
296
+ /** If a partial paste of table, paste only table's content */
297
+ slice = transformSliceToRemoveOpenTable(slice, schema);
298
+ } else {
299
+ /** If a partial paste of table, paste only table's content */
300
+ slice = transformSliceToRemoveOpenTable(slice, schema);
301
+
302
+ /** If a partial paste of bodied extension, paste only text */
303
+ slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
304
+ }
295
305
 
296
306
  /** If a partial paste of multi bodied extension, paste only children */
297
307
  slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);
package/src/pm-plugins/utils/paste.ts CHANGED
@@ -244,8 +244,8 @@ const containsNonTableBlockChildren = (fragment: Fragment, schema: Schema): bool
244
244
 
245
245
  export const transformSliceToRemoveOpenTable = (slice: Slice, schema: Schema): Slice => {
246
246
  if (fg('platform_editor_nested_tables_paste_wrap_fix')) {
247
- // Case 1: A slice of a textblock selection inside a nested table
248
- // Prosemirror wraps nested textblock selections in their respective tables
247
+ // Case 1: A slice of a block selection inside a nested table
248
+ // Prosemirror wraps nested block selections in their respective tables
249
249
  // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
250
250
 
251
251
  // slice starts and ends inside a nested table at the same depth
@@ -256,7 +256,7 @@ export const transformSliceToRemoveOpenTable = (slice: Slice, schema: Schema): S
256
256
 
257
257
  // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
258
258
  if (isFragmentSingleCellTable(slice.content, schema)) {
259
- slice.content.firstChild?.descendants((node, _pos, parent) => {
259
+ slice.content.firstChild?.descendants((node) => {
260
260
  if (isNodeSingleCellTable(node, schema)) {
261
261
  descendedDepth += tableDepthDecrement;
262
262
  } else if (node.type === schema.nodes.table) {
package/src/pm-plugins/view-mode-sort/utils.ts CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  } from '@atlaskit/editor-common/utils';
6
6
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
7
7
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
 
9
10
  import {
10
11
  IS_DISABLED_CLASS_NAME,
@@ -14,8 +15,12 @@ import {
14
15
  import type { TableSortMeta } from './types';
15
16
 
16
17
  export const unsort = (oldOrder: { index: number; value: number }[], tableElement: HTMLElement) => {
17
- const rows = tableElement.querySelectorAll('tr');
18
- const tbody = tableElement.querySelector('tbody');
18
+ const tbody = fg('platform_editor_nested_tables_view_mode_sort')
19
+ ? tableElement.querySelector(`:scope > tbody`)
20
+ : tableElement.querySelector('tbody');
21
+ const rows = fg('platform_editor_nested_tables_view_mode_sort')
22
+ ? tableElement.querySelectorAll(`:scope > tbody > tr`)
23
+ : tableElement.querySelectorAll('tr');
19
24
 
20
25
  const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
21
26
  sortedOrder.forEach((item) => {
@@ -129,7 +134,12 @@ export const toggleSort = (view: EditorView, event: Event, pluginState: TableSor
129
134
 
130
135
  export const getTableElements = (tableId: string) => {
131
136
  const tableElement = document.querySelector(`table[data-table-local-id="${tableId}"]`);
132
- const tbody = tableElement?.querySelector('tbody');
133
- const rows = tableElement?.querySelectorAll('tr');
137
+ const tbody = fg('platform_editor_nested_tables_view_mode_sort')
138
+ ? tableElement?.querySelector(':scope > tbody')
139
+ : tableElement?.querySelector('tbody');
140
+
141
+ const rows = fg('platform_editor_nested_tables_view_mode_sort')
142
+ ? tableElement?.querySelectorAll(':scope > tbody > tr')
143
+ : tableElement?.querySelectorAll('tr');
134
144
  return { tbody, rows };
135
145
  };
package/src/ui/common-styles.ts CHANGED
@@ -206,16 +206,20 @@ const viewModeSortStyles = () => {
206
206
  }
207
207
  }
208
208
 
209
- &:has(.is-active) {
210
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
211
- opacity: 1;
209
+ > .${SORTING_ICON_CLASS_NAME} {
210
+ &:has(.is-active) {
211
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
212
+ opacity: 1;
213
+ }
212
214
  }
213
215
  }
214
216
 
215
- .${SORTABLE_COLUMN_ICON_CLASSNAME} {
216
- opacity: 0;
217
- &:focus {
218
- opacity: 1;
217
+ > .${SORTING_ICON_CLASS_NAME} {
218
+ .${SORTABLE_COLUMN_ICON_CLASSNAME} {
219
+ opacity: 0;
220
+ &:focus {
221
+ opacity: 1;
222
+ }
219
223
  }
220
224
  }
221
225