@atlaskit/editor-plugin-table 9.3.3 → 9.3.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 9.3.5
+
+### Patch Changes
+
+- [#108813](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108813)
+  [`123953f8b2006`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/123953f8b2006) -
+  [ux] ED-26075 Unwrap content from nested table text block slices on paste
+
+## 9.3.4
+
+### Patch Changes
+
+- [#110015](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110015)
+  [`92048a44fc3f6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/92048a44fc3f6) -
+  fix table layout shift issue
+- Updated dependencies
+
 ## 9.3.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/toDOM.js

@@ -12,6 +12,7 @@ var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
@@ -92,7 +93,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
-          width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
+          width: (0, _platformFeatureFlags.fg)('platform_editor_table_layout_shift_fix') ? "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, "px)") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
         })
       }, ['span', {
         class: 'resizer-hover-zone'

package/dist/cjs/pm-plugins/utils/paste.js

@@ -172,12 +172,58 @@ var transformSliceToFixHardBreakProblemOnCopyFromCell = exports.transformSliceTo
   }
   return slice;
 };
+var isNodeSingleCellTable = function isNodeSingleCellTable(node, schema) {
+  var _node$firstChild, _node$firstChild$firs, _node$firstChild$firs2;
+  return node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type) === schema.nodes.tableRow && node.firstChild.childCount === 1 && (((_node$firstChild$firs = node.firstChild.firstChild) === null || _node$firstChild$firs === void 0 ? void 0 : _node$firstChild$firs.type) === schema.nodes.tableCell || ((_node$firstChild$firs2 = node.firstChild.firstChild) === null || _node$firstChild$firs2 === void 0 ? void 0 : _node$firstChild$firs2.type) === schema.nodes.tableHeader);
+};
+var isFragmentSingleCellTable = function isFragmentSingleCellTable(fragment, schema) {
+  return fragment.childCount === 1 && fragment.firstChild !== null && isNodeSingleCellTable(fragment.firstChild, schema);
+};
+var containsTextBlockChildren = function containsTextBlockChildren(fragment, schema) {
+  var containsTextBlock = false;
+  fragment.forEach(function (node) {
+    if (node.isTextblock) {
+      containsTextBlock = true;
+    }
+  });
+  return containsTextBlock;
+};
 var transformSliceToRemoveOpenTable = exports.transformSliceToRemoveOpenTable = function transformSliceToRemoveOpenTable(slice, schema) {
-  var _slice$content$firstC3;
-  // we're removing the table, tableRow and tableCell reducing the open depth by 3
-  var depthDecrement = 3;
+  var _slice$content$firstC4;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_paste_wrap_fix')) {
+    // Case 1: A slice of a textblock selection inside a nested table
+    // Prosemirror wraps nested textblock selections in their respective tables
+    // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
+
+    // slice starts and ends inside a nested table at the same depth
+    if (slice.openStart >= 7 && slice.openEnd >= 7 && slice.openStart === slice.openEnd) {
+      var cleaned = slice;
+      var descendedDepth = 0;
+      var tableDepthDecrement = 2;
 
-  // Case 1: A slice entirely within a single CELL
+      // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
+      if (isFragmentSingleCellTable(slice.content, schema)) {
+        var _slice$content$firstC2;
+        (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node, _pos, parent) {
+          if (isNodeSingleCellTable(node, schema)) {
+            descendedDepth += tableDepthDecrement;
+          } else if (node.type === schema.nodes.table) {
+            return false;
+          } else if (containsTextBlockChildren(node.content, schema)) {
+            descendedDepth += tableDepthDecrement;
+            // create a new slice with the content of the textblock children and the depth of the nested tables subtracted
+            cleaned = new _model.Slice(node.content, slice.openStart - descendedDepth - tableDepthDecrement, slice.openEnd - descendedDepth - tableDepthDecrement);
+            return false;
+          }
+        });
+      }
+      if (!cleaned.eq(slice)) {
+        return cleaned;
+      }
+    }
+  }
+
+  // Case 2: A slice entirely within a single CELL
   if (
   // starts and ends inside of a cell
   slice.openStart >= 4 && slice.openEnd >= 4 &&
@@ -186,25 +232,28 @@ var transformSliceToRemoveOpenTable = exports.transformSliceToRemoveOpenTable =
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   slice.content.firstChild.type === schema.nodes.table) {
-    var _slice$content$firstC2;
+    var _slice$content$firstC3;
+    // we're removing the table, tableRow and tableCell reducing the open depth by 3
+    var depthDecrement = 3;
+
     // prosemirror-view has a bug that it duplicates table entry when selecting multiple paragraphs in a table cell.
     // https://github.com/ProseMirror/prosemirror/issues/1270
     // The structure becomes
     // table(genuine) > tableRow(genuine) > table(duplicated) > tableRow(duplicated) > tableCell/tableHeader(genuine) > contents(genuine)
     // As we are removing wrapping table anyway, we keep duplicated table and tableRow for simplicity
-    var cleaned = slice;
-    if (((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || (_slice$content$firstC2 = _slice$content$firstC2.content) === null || _slice$content$firstC2 === void 0 || (_slice$content$firstC2 = _slice$content$firstC2.firstChild) === null || _slice$content$firstC2 === void 0 || (_slice$content$firstC2 = _slice$content$firstC2.content) === null || _slice$content$firstC2 === void 0 || (_slice$content$firstC2 = _slice$content$firstC2.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.type) === schema.nodes.table) {
-      cleaned = new _model.Slice(slice.content.firstChild.content.firstChild.content, slice.openStart - 2, slice.openEnd - 2);
+    var _cleaned = slice;
+    if (((_slice$content$firstC3 = slice.content.firstChild) === null || _slice$content$firstC3 === void 0 || (_slice$content$firstC3 = _slice$content$firstC3.content) === null || _slice$content$firstC3 === void 0 || (_slice$content$firstC3 = _slice$content$firstC3.firstChild) === null || _slice$content$firstC3 === void 0 || (_slice$content$firstC3 = _slice$content$firstC3.content) === null || _slice$content$firstC3 === void 0 || (_slice$content$firstC3 = _slice$content$firstC3.firstChild) === null || _slice$content$firstC3 === void 0 ? void 0 : _slice$content$firstC3.type) === schema.nodes.table) {
+      _cleaned = new _model.Slice(slice.content.firstChild.content.firstChild.content, slice.openStart - 2, slice.openEnd - 2);
     }
-    return new _model.Slice((0, _utils.flatmap)(cleaned.content, unwrapContentFromTable), cleaned.openStart - depthDecrement, cleaned.openEnd - depthDecrement);
+    return new _model.Slice((0, _utils.flatmap)(_cleaned.content, unwrapContentFromTable), _cleaned.openStart - depthDecrement, _cleaned.openEnd - depthDecrement);
   }
 
-  // Case 2: A slice starting within a CELL and ending outside the table
+  // Case 3: A slice starting within a CELL and ending outside the table
   if (
   // starts inside of a cell but ends outside of the starting table
   slice.openStart >= 4 &&
   // slice starts from a table node (and spans across more than one node)
-  slice.content.childCount > 1 && ((_slice$content$firstC3 = slice.content.firstChild) === null || _slice$content$firstC3 === void 0 ? void 0 : _slice$content$firstC3.type) === schema.nodes.table) {
+  slice.content.childCount > 1 && ((_slice$content$firstC4 = slice.content.firstChild) === null || _slice$content$firstC4 === void 0 ? void 0 : _slice$content$firstC4.type) === schema.nodes.table) {
     // repoint the slice's cutting depth so that cell content where the slice starts
     // does not get lifted out of the cell on paste
     return new _model.Slice(slice.content, 1, slice.openEnd);

package/dist/es2019/nodeviews/toDOM.js

@@ -2,6 +2,7 @@ import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
@@ -76,7 +77,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
           '--ak-editor-table-min-width': `${tableMinWidth}px`,
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
-          width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`
+          width: fg('platform_editor_table_layout_shift_fix') ? `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width}px)` : `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`
         })
       }, ['span', {
         class: 'resizer-hover-zone'

package/dist/es2019/pm-plugins/utils/paste.js

@@ -163,12 +163,58 @@ export const transformSliceToFixHardBreakProblemOnCopyFromCell = (slice, schema)
   }
   return slice;
 };
+const isNodeSingleCellTable = (node, schema) => {
+  var _node$firstChild, _node$firstChild$firs, _node$firstChild$firs2;
+  return node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type) === schema.nodes.tableRow && node.firstChild.childCount === 1 && (((_node$firstChild$firs = node.firstChild.firstChild) === null || _node$firstChild$firs === void 0 ? void 0 : _node$firstChild$firs.type) === schema.nodes.tableCell || ((_node$firstChild$firs2 = node.firstChild.firstChild) === null || _node$firstChild$firs2 === void 0 ? void 0 : _node$firstChild$firs2.type) === schema.nodes.tableHeader);
+};
+const isFragmentSingleCellTable = (fragment, schema) => {
+  return fragment.childCount === 1 && fragment.firstChild !== null && isNodeSingleCellTable(fragment.firstChild, schema);
+};
+const containsTextBlockChildren = (fragment, schema) => {
+  let containsTextBlock = false;
+  fragment.forEach(node => {
+    if (node.isTextblock) {
+      containsTextBlock = true;
+    }
+  });
+  return containsTextBlock;
+};
 export const transformSliceToRemoveOpenTable = (slice, schema) => {
-  var _slice$content$firstC7;
-  // we're removing the table, tableRow and tableCell reducing the open depth by 3
-  const depthDecrement = 3;
+  var _slice$content$firstC8;
+  if (fg('platform_editor_nested_tables_paste_wrap_fix')) {
+    // Case 1: A slice of a textblock selection inside a nested table
+    // Prosemirror wraps nested textblock selections in their respective tables
+    // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
+
+    // slice starts and ends inside a nested table at the same depth
+    if (slice.openStart >= 7 && slice.openEnd >= 7 && slice.openStart === slice.openEnd) {
+      let cleaned = slice;
+      let descendedDepth = 0;
+      const tableDepthDecrement = 2;
 
-  // Case 1: A slice entirely within a single CELL
+      // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
+      if (isFragmentSingleCellTable(slice.content, schema)) {
+        var _slice$content$firstC2;
+        (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.descendants((node, _pos, parent) => {
+          if (isNodeSingleCellTable(node, schema)) {
+            descendedDepth += tableDepthDecrement;
+          } else if (node.type === schema.nodes.table) {
+            return false;
+          } else if (containsTextBlockChildren(node.content, schema)) {
+            descendedDepth += tableDepthDecrement;
+            // create a new slice with the content of the textblock children and the depth of the nested tables subtracted
+            cleaned = new Slice(node.content, slice.openStart - descendedDepth - tableDepthDecrement, slice.openEnd - descendedDepth - tableDepthDecrement);
+            return false;
+          }
+        });
+      }
+      if (!cleaned.eq(slice)) {
+        return cleaned;
+      }
+    }
+  }
+
+  // Case 2: A slice entirely within a single CELL
   if (
   // starts and ends inside of a cell
   slice.openStart >= 4 && slice.openEnd >= 4 &&
@@ -177,25 +223,28 @@ export const transformSliceToRemoveOpenTable = (slice, schema) => {
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   slice.content.firstChild.type === schema.nodes.table) {
-    var _slice$content$firstC2, _slice$content$firstC3, _slice$content$firstC4, _slice$content$firstC5, _slice$content$firstC6;
+    var _slice$content$firstC3, _slice$content$firstC4, _slice$content$firstC5, _slice$content$firstC6, _slice$content$firstC7;
+    // we're removing the table, tableRow and tableCell reducing the open depth by 3
+    const depthDecrement = 3;
+
     // prosemirror-view has a bug that it duplicates table entry when selecting multiple paragraphs in a table cell.
     // https://github.com/ProseMirror/prosemirror/issues/1270
     // The structure becomes
     // table(genuine) > tableRow(genuine) > table(duplicated) > tableRow(duplicated) > tableCell/tableHeader(genuine) > contents(genuine)
     // As we are removing wrapping table anyway, we keep duplicated table and tableRow for simplicity
     let cleaned = slice;
-    if (((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : (_slice$content$firstC3 = _slice$content$firstC2.content) === null || _slice$content$firstC3 === void 0 ? void 0 : (_slice$content$firstC4 = _slice$content$firstC3.firstChild) === null || _slice$content$firstC4 === void 0 ? void 0 : (_slice$content$firstC5 = _slice$content$firstC4.content) === null || _slice$content$firstC5 === void 0 ? void 0 : (_slice$content$firstC6 = _slice$content$firstC5.firstChild) === null || _slice$content$firstC6 === void 0 ? void 0 : _slice$content$firstC6.type) === schema.nodes.table) {
+    if (((_slice$content$firstC3 = slice.content.firstChild) === null || _slice$content$firstC3 === void 0 ? void 0 : (_slice$content$firstC4 = _slice$content$firstC3.content) === null || _slice$content$firstC4 === void 0 ? void 0 : (_slice$content$firstC5 = _slice$content$firstC4.firstChild) === null || _slice$content$firstC5 === void 0 ? void 0 : (_slice$content$firstC6 = _slice$content$firstC5.content) === null || _slice$content$firstC6 === void 0 ? void 0 : (_slice$content$firstC7 = _slice$content$firstC6.firstChild) === null || _slice$content$firstC7 === void 0 ? void 0 : _slice$content$firstC7.type) === schema.nodes.table) {
       cleaned = new Slice(slice.content.firstChild.content.firstChild.content, slice.openStart - 2, slice.openEnd - 2);
     }
     return new Slice(flatmap(cleaned.content, unwrapContentFromTable), cleaned.openStart - depthDecrement, cleaned.openEnd - depthDecrement);
   }
 
-  // Case 2: A slice starting within a CELL and ending outside the table
+  // Case 3: A slice starting within a CELL and ending outside the table
   if (
   // starts inside of a cell but ends outside of the starting table
   slice.openStart >= 4 &&
   // slice starts from a table node (and spans across more than one node)
-  slice.content.childCount > 1 && ((_slice$content$firstC7 = slice.content.firstChild) === null || _slice$content$firstC7 === void 0 ? void 0 : _slice$content$firstC7.type) === schema.nodes.table) {
+  slice.content.childCount > 1 && ((_slice$content$firstC8 = slice.content.firstChild) === null || _slice$content$firstC8 === void 0 ? void 0 : _slice$content$firstC8.type) === schema.nodes.table) {
     // repoint the slice's cutting depth so that cell content where the slice starts
     // does not get lifted out of the cell on paste
     return new Slice(slice.content, 1, slice.openEnd);

package/dist/esm/nodeviews/toDOM.js

@@ -7,6 +7,7 @@ import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
@@ -85,7 +86,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
-          width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
+          width: fg('platform_editor_table_layout_shift_fix') ? "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, "px)") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
         })
       }, ['span', {
         class: 'resizer-hover-zone'

package/dist/esm/pm-plugins/utils/paste.js

@@ -165,12 +165,58 @@ export var transformSliceToFixHardBreakProblemOnCopyFromCell = function transfor
   }
   return slice;
 };
+var isNodeSingleCellTable = function isNodeSingleCellTable(node, schema) {
+  var _node$firstChild, _node$firstChild$firs, _node$firstChild$firs2;
+  return node.childCount === 1 && ((_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.type) === schema.nodes.tableRow && node.firstChild.childCount === 1 && (((_node$firstChild$firs = node.firstChild.firstChild) === null || _node$firstChild$firs === void 0 ? void 0 : _node$firstChild$firs.type) === schema.nodes.tableCell || ((_node$firstChild$firs2 = node.firstChild.firstChild) === null || _node$firstChild$firs2 === void 0 ? void 0 : _node$firstChild$firs2.type) === schema.nodes.tableHeader);
+};
+var isFragmentSingleCellTable = function isFragmentSingleCellTable(fragment, schema) {
+  return fragment.childCount === 1 && fragment.firstChild !== null && isNodeSingleCellTable(fragment.firstChild, schema);
+};
+var containsTextBlockChildren = function containsTextBlockChildren(fragment, schema) {
+  var containsTextBlock = false;
+  fragment.forEach(function (node) {
+    if (node.isTextblock) {
+      containsTextBlock = true;
+    }
+  });
+  return containsTextBlock;
+};
 export var transformSliceToRemoveOpenTable = function transformSliceToRemoveOpenTable(slice, schema) {
-  var _slice$content$firstC3;
-  // we're removing the table, tableRow and tableCell reducing the open depth by 3
-  var depthDecrement = 3;
+  var _slice$content$firstC4;
+  if (fg('platform_editor_nested_tables_paste_wrap_fix')) {
+    // Case 1: A slice of a textblock selection inside a nested table
+    // Prosemirror wraps nested textblock selections in their respective tables
+    // We are using `safeInsert` to paste nested tables, so we do not want to preserve this wrapping
+
+    // slice starts and ends inside a nested table at the same depth
+    if (slice.openStart >= 7 && slice.openEnd >= 7 && slice.openStart === slice.openEnd) {
+      var cleaned = slice;
+      var descendedDepth = 0;
+      var tableDepthDecrement = 2;
 
-  // Case 1: A slice entirely within a single CELL
+      // if the slice is a single cell table and contains cells with single cell tables, descend into it until we find textblock children
+      if (isFragmentSingleCellTable(slice.content, schema)) {
+        var _slice$content$firstC2;
+        (_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || _slice$content$firstC2.descendants(function (node, _pos, parent) {
+          if (isNodeSingleCellTable(node, schema)) {
+            descendedDepth += tableDepthDecrement;
+          } else if (node.type === schema.nodes.table) {
+            return false;
+          } else if (containsTextBlockChildren(node.content, schema)) {
+            descendedDepth += tableDepthDecrement;
+            // create a new slice with the content of the textblock children and the depth of the nested tables subtracted
+            cleaned = new Slice(node.content, slice.openStart - descendedDepth - tableDepthDecrement, slice.openEnd - descendedDepth - tableDepthDecrement);
+            return false;
+          }
+        });
+      }
+      if (!cleaned.eq(slice)) {
+        return cleaned;
+      }
+    }
+  }
+
+  // Case 2: A slice entirely within a single CELL
   if (
   // starts and ends inside of a cell
   slice.openStart >= 4 && slice.openEnd >= 4 &&
@@ -179,25 +225,28 @@ export var transformSliceToRemoveOpenTable = function transformSliceToRemoveOpen
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   slice.content.firstChild.type === schema.nodes.table) {
-    var _slice$content$firstC2;
+    var _slice$content$firstC3;
+    // we're removing the table, tableRow and tableCell reducing the open depth by 3
+    var depthDecrement = 3;
+
     // prosemirror-view has a bug that it duplicates table entry when selecting multiple paragraphs in a table cell.
     // https://github.com/ProseMirror/prosemirror/issues/1270
     // The structure becomes
     // table(genuine) > tableRow(genuine) > table(duplicated) > tableRow(duplicated) > tableCell/tableHeader(genuine) > contents(genuine)
     // As we are removing wrapping table anyway, we keep duplicated table and tableRow for simplicity
-    var cleaned = slice;
-    if (((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 || (_slice$content$firstC2 = _slice$content$firstC2.content) === null || _slice$content$firstC2 === void 0 || (_slice$content$firstC2 = _slice$content$firstC2.firstChild) === null || _slice$content$firstC2 === void 0 || (_slice$content$firstC2 = _slice$content$firstC2.content) === null || _slice$content$firstC2 === void 0 || (_slice$content$firstC2 = _slice$content$firstC2.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.type) === schema.nodes.table) {
-      cleaned = new Slice(slice.content.firstChild.content.firstChild.content, slice.openStart - 2, slice.openEnd - 2);
+    var _cleaned = slice;
+    if (((_slice$content$firstC3 = slice.content.firstChild) === null || _slice$content$firstC3 === void 0 || (_slice$content$firstC3 = _slice$content$firstC3.content) === null || _slice$content$firstC3 === void 0 || (_slice$content$firstC3 = _slice$content$firstC3.firstChild) === null || _slice$content$firstC3 === void 0 || (_slice$content$firstC3 = _slice$content$firstC3.content) === null || _slice$content$firstC3 === void 0 || (_slice$content$firstC3 = _slice$content$firstC3.firstChild) === null || _slice$content$firstC3 === void 0 ? void 0 : _slice$content$firstC3.type) === schema.nodes.table) {
+      _cleaned = new Slice(slice.content.firstChild.content.firstChild.content, slice.openStart - 2, slice.openEnd - 2);
     }
-    return new Slice(flatmap(cleaned.content, unwrapContentFromTable), cleaned.openStart - depthDecrement, cleaned.openEnd - depthDecrement);
+    return new Slice(flatmap(_cleaned.content, unwrapContentFromTable), _cleaned.openStart - depthDecrement, _cleaned.openEnd - depthDecrement);
   }
 
-  // Case 2: A slice starting within a CELL and ending outside the table
+  // Case 3: A slice starting within a CELL and ending outside the table
   if (
   // starts inside of a cell but ends outside of the starting table
   slice.openStart >= 4 &&
   // slice starts from a table node (and spans across more than one node)
-  slice.content.childCount > 1 && ((_slice$content$firstC3 = slice.content.firstChild) === null || _slice$content$firstC3 === void 0 ? void 0 : _slice$content$firstC3.type) === schema.nodes.table) {
+  slice.content.childCount > 1 && ((_slice$content$firstC4 = slice.content.firstChild) === null || _slice$content$firstC4 === void 0 ? void 0 : _slice$content$firstC4.type) === schema.nodes.table) {
     // repoint the slice's cutting depth so that cell content where the slice starts
     // does not get lifted out of the cell on paste
     return new Slice(slice.content, 1, slice.openEnd);

package/dist/types/nodeviews/ExternalDropTargets.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const ExternalDropTargets: ({ editorView, node, getScrollOffset, getTableWrapperWidth, }: {
@@ -6,4 +6,4 @@ export declare const ExternalDropTargets: ({ editorView, node, getScrollOffset,
     node?: PMNode | undefined;
     getScrollOffset: () => number;
     getTableWrapperWidth: () => number;
-}) => JSX.Element | null;
+}) => React.JSX.Element | null;

package/dist/types/nodeviews/TableComponentWithSharedState.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { GetEditorFeatureFlags, getPosHandlerNode } from '@atlaskit/editor-common/types';
@@ -25,5 +25,5 @@ type TableComponentWithSharedStateProps = {
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
-export declare const TableComponentWithSharedState: ({ view, options, getNode, dispatchAnalyticsEvent, api, getEditorFeatureFlags, eventDispatcher, allowColumnResizing, allowControls, getPos, forwardRef, allowTableAlignment, allowTableResizing, }: TableComponentWithSharedStateProps) => JSX.Element | null;
+export declare const TableComponentWithSharedState: ({ view, options, getNode, dispatchAnalyticsEvent, api, getEditorFeatureFlags, eventDispatcher, allowColumnResizing, allowControls, getPos, forwardRef, allowTableAlignment, allowTableResizing, }: TableComponentWithSharedStateProps) => React.JSX.Element | null;
 export {};

package/dist/types/nodeviews/TableContainer.d.ts

@@ -22,7 +22,7 @@ type ResizableTableContainerProps = {
     shouldUseIncreasedScalingPercent?: boolean;
     isCommentEditor?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, lineLength, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, lineLength, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, }: PropsWithChildren<ResizableTableContainerProps>) => React.JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -43,5 +43,5 @@ type TableContainerProps = {
     isCommentEditor?: boolean;
     isChromelessEditor?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, }: PropsWithChildren<TableContainerProps>) => React.JSX.Element;
 export {};

package/dist/types/nodeviews/TableResizer.d.ts

@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from 'react';
+import React from 'react';
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -30,5 +31,5 @@ interface TableResizerProps {
     onResizeStart?: () => void;
     disabled?: boolean;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, isWholeTableInDanger, shouldUseIncreasedScalingPercent, pluginInjectionApi, isFullWidthModeEnabled, isCommentEditor, disabled, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isTableAlignmentEnabled, isWholeTableInDanger, shouldUseIncreasedScalingPercent, pluginInjectionApi, isFullWidthModeEnabled, isCommentEditor, disabled, }: PropsWithChildren<TableResizerProps>) => React.JSX.Element;
 export {};

package/dist/types/nodeviews/table.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
@@ -23,7 +23,7 @@ export default class TableView extends ReactNodeView<Props> {
     };
     setDomAttrs(node: PmNode): void;
     getNode: () => PmNode;
-    render(props: Props, forwardRef: ForwardRef): JSX.Element;
+    render(props: Props, forwardRef: ForwardRef): React.JSX.Element;
     private hasHoveredRows;
     viewShouldUpdate(nextNode: PmNode): boolean;
     ignoreMutation(mutation: MutationRecord | {

package/dist/types/ui/DragHandle/HandleIconComponent.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 type HandleIconProps = {
     forceDefaultHandle: boolean;
     isHandleHovered: boolean;
     hasMergedCells: boolean;
 };
-export declare const HandleIconComponent: (props: HandleIconProps) => JSX.Element;
+export declare const HandleIconComponent: (props: HandleIconProps) => React.JSX.Element;
 export {};

package/dist/types/ui/DragPreview/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { TableDirection } from '../../types';
 export declare const DragPreview: ({ direction, width, height, }: {
     direction: TableDirection;
     width: number;
     height: number;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/dist/types/ui/FloatingDeleteButton/index.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -50,6 +50,6 @@ declare class FloatingDeleteButton extends Component<Props, State> {
      * @memberof FloatingDeleteButton
      */
     private handleClick;
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
 }
 export default FloatingDeleteButton;

package/dist/types/ui/FloatingDragMenu/DropdownMenu.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 type DropdownMenuProps = {
     items: Array<{
@@ -32,5 +32,5 @@ type DropdownMenuProps = {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
 };
-export declare const DropdownMenu: ({ items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, fitWidth, fitHeight, direction, mountPoint, boundariesElement, scrollableElement, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, fitWidth, fitHeight, direction, mountPoint, boundariesElement, scrollableElement, }: DropdownMenuProps) => React.JSX.Element;
 export {};

package/dist/types/ui/FloatingDragMenu/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
@@ -28,7 +28,7 @@ interface Props {
     isCommentEditor?: boolean;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, stickyHeaders, pluginConfig, isTableScalingEnabled, getEditorFeatureFlags, ariaNotifyPlugin, api, isCommentEditor, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, stickyHeaders, pluginConfig, isTableScalingEnabled, getEditorFeatureFlags, ariaNotifyPlugin, api, isCommentEditor, }: Props): React.JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types/ui/FloatingInsertButton/index.d.ts

@@ -30,7 +30,7 @@ export interface Props {
 export declare class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
     static displayName: string;
     constructor(props: Props & WrappedComponentProps);
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
     private getCellPosition;
     private insertRow;
     private insertColumn;

package/dist/types/ui/FloatingToolbarLabel/FloatingToolbarLabel.d.ts

@@ -9,5 +9,5 @@ interface Props {
     stick?: boolean;
     offset?: [number, number];
 }
-export declare const FloatingToolbarLabel: React.MemoExoticComponent<(props: Props) => JSX.Element>;
+export declare const FloatingToolbarLabel: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export {};

package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TablePlugin } from '../../../tablePluginType';
@@ -28,5 +28,5 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
         commands: import("../../../tablePluginType").TablePluginCommands;
         dependencies: import("../../../tablePluginType").TablePluginDependencies;
     }> | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export {};

package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     index: number;
     localId?: string;
@@ -6,5 +6,5 @@ interface Props {
     height?: number;
     marginTop?: number;
 }
-export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop }: Props) => JSX.Element;
+export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop }: Props) => React.JSX.Element;
 export {};

package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     tableRef: HTMLTableElement;
     tableHeight?: number;
@@ -7,5 +7,5 @@ interface Props {
     isHeaderSticky?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const ColumnDropTargets: ({ tableRef, tableHeight, localId, colWidths, isHeaderSticky, getScrollOffset, }: Props) => JSX.Element | null;
+export declare const ColumnDropTargets: ({ tableRef, tableHeight, localId, colWidths, isHeaderSticky, getScrollOffset, }: Props) => React.JSX.Element | null;
 export {};

package/dist/types/ui/TableFloatingColumnControls/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -29,5 +29,5 @@ interface Props {
     api?: PluginInjectionAPI;
     isChromelessEditor?: boolean;
 }
-declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, }: Props) => JSX.Element | null;
+declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, api, isChromelessEditor, }: Props) => React.JSX.Element | null;
 export default TableFloatingColumnControls;

package/dist/types/ui/TableFloatingControls/FloatingControlsWithSelection.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TablePlugin } from '../../tablePluginType';
@@ -16,5 +16,5 @@ type FloatingControlsWithSelectionProps = {
     tableActive: boolean;
     api?: ExtractInjectionAPI<TablePlugin>;
 };
-export declare const FloatingControlsWithSelection: ({ editorView, tableRef, isInDanger, isResizing, isHeaderRowEnabled, isHeaderColumnEnabled, hoveredRows, stickyTop, hoverRows, selectRow, tableActive, api, }: FloatingControlsWithSelectionProps) => JSX.Element;
+export declare const FloatingControlsWithSelection: ({ editorView, tableRef, isInDanger, isResizing, isHeaderRowEnabled, isHeaderColumnEnabled, hoveredRows, stickyTop, hoverRows, selectRow, tableActive, api, }: FloatingControlsWithSelectionProps) => React.JSX.Element;
 export {};