@atlaskit/editor-plugin-table 26.0.10 → 26.2.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-plugin-table
 
+## 26.2.0
+
+### Minor Changes
+
+- [`da5eaf0bc37da`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da5eaf0bc37da) -
+  Clean up the platform_editor_editor_ssr_streaming experiment. The SSR streaming code paths are now
+  permanent and the isSSRStreaming() utility has been removed from
+  @atlaskit/editor-common/core-utils.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 26.1.0
+
+### Minor Changes
+
+- [`2d23b40eed4f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d23b40eed4f0) -
+  Add gated content-visibility:auto to tables, expands and media singles to improve editor rendering
+  performance on large documents. Applied only to nodes whose rendered size can be estimated closely
+  — structurally (row/child counts) for tables and expands, and from the media's own dimensions and
+  the renderer's width calculation for media singles. Behind the
+  cc_editor_limited_mode_perf_improvements experiment and only active when limited mode is enabled
+  for the document (shared large-document detection with the limited-mode plugin).
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 26.0.10
 
 ### Patch Changes

package/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/9be4f6fa-1e46-4040-9a16-090520d0a5db
 name: '@atlaskit/editor-plugin-table'
-ownerId: ari:cloud:identity::team/2484e1f6-f62c-4a70-95f1-8e5695c51b6b # Editor Jenga
+ownerId: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb # Editor Developers
 labels:
   - platform-code
   - platform-afm
@@ -16,14 +16,14 @@ links:
     url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
   - name: Slack Channel
     type: CHAT_CHANNEL
-    url: https://atlassian.enterprise.slack.com/archives/C061GUMN3NY # #team-cc-editor-exp-cloud-native
+    url: https://atlassian.enterprise.slack.com/archives/CFG3PSQ9E # #help-editor
   - name: Editor Plugin Table
     type: REPOSITORY
     url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/editor/editor-plugin-table
 customFields:
   - name: Department
     type: text
-    value: Eng - Editor Autonomy - Jenga
+    value: Editor Developers
   - name: Trusted Reviewer Teams
     type: text
     value: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb

package/dist/cjs/nodeviews/TableSSRReactContextsProvider.js

@@ -11,7 +11,7 @@ var _coreUtils = require("@atlaskit/editor-common/core-utils");
 function TableSSRReactContextsProvider(_ref) {
   var children = _ref.children,
     intl = _ref.intl;
-  if (!(0, _coreUtils.isSSR)() || !(0, _coreUtils.isSSRStreaming)()) {
+  if (!(0, _coreUtils.isSSR)()) {
     return children;
   }
   if (!intl) {

package/dist/cjs/nodeviews/table.js

@@ -14,10 +14,10 @@ var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _table = require("@atlaskit/editor-common/table");
+var _contentVisibility = require("@atlaskit/editor-common/utils/content-visibility");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -74,6 +74,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     _this = _callSuper(this, TableView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined,
     // @portal-render-immediately
     true]);
+    (0, _defineProperty2.default)(_this, "isNestedTable", false);
     (0, _defineProperty2.default)(_this, "getNode", function () {
       return _this.node;
     });
@@ -115,6 +116,8 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         var tableElement = rendered.dom.querySelector('table');
         this.table = tableElement ? tableElement : rendered.dom;
         this.renderedDOM = rendered.dom;
+        this.isNestedTable = isNested;
+        this.updateContentVisibility();
         var allowFixedColumnWidthOption = ((_this$reactComponentP5 = this.reactComponentProps) === null || _this$reactComponentP5 === void 0 ? void 0 : _this$reactComponentP5.allowFixedColumnWidthOption) || false;
         if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && allowFixedColumnWidthOption && this.node.attrs.displayMode === 'fixed') {
           var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
@@ -174,11 +177,11 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         }
 
         // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-        // In SSR streaming the portal renders via `container.innerHTML = html` (portal/common.tsx), which detaches
+        // In SSR the portal renders via `container.innerHTML = html` (portal/common.tsx), which detaches
         // `renderedDOM` from `dom` before this runs; require it to still be a child so `removeChild` doesn't throw
         // `NotFoundError` (which would make EditorSSRRenderer fall back to the position-blind schema toDOM and lose
-        // nested detection). CSR keeps the original condition unchanged.
-        if (this.dom && this.renderedDOM && (!(0, _coreUtils.isSSRStreaming)() || this.renderedDOM.parentNode === this.dom)) {
+        // nested detection).
+        if (this.dom && this.renderedDOM && this.renderedDOM.parentNode === this.dom) {
           this.dom.removeChild(this.renderedDOM);
         }
         // Move the table from the ProseMirror table structure into the React rendered table node.
@@ -264,6 +267,35 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         }
       }
     }
+  }, {
+    key: "updateContentVisibility",
+    value: function updateContentVisibility() {
+      var _this$reactComponentP9,
+        _limitedMode$sharedSt,
+        _this4 = this;
+      if (this.isNestedTable || !this.table) {
+        return;
+      }
+      // Read limited mode from the nodeView's own `this.view.state` via the plugin key exposed on
+      // the (already-typed) shared state, NOT `currentState().enabled`: during initial EditorView
+      // construction the injection API's editor state is undefined, so `.enabled` reads a stale false.
+      var limitedMode = (_this$reactComponentP9 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP9 === void 0 ? void 0 : _this$reactComponentP9.limitedMode;
+      var enabled = Boolean(limitedMode === null || limitedMode === void 0 || (_limitedMode$sharedSt = limitedMode.sharedState.currentState()) === null || _limitedMode$sharedSt === void 0 || (_limitedMode$sharedSt = _limitedMode$sharedSt.limitedModePluginKey) === null || _limitedMode$sharedSt === void 0 || (_limitedMode$sharedSt = _limitedMode$sharedSt.getState(this.view.state)) === null || _limitedMode$sharedSt === void 0 ? void 0 : _limitedMode$sharedSt.documentSizeBreachesThreshold);
+      var applied = (0, _contentVisibility.applyContentVisibility)(this.table, enabled, function () {
+        return {
+          // The `<table>` is content-sized (`display: table`), so it needs an explicit intrinsic
+          // width or it collapses to 0 wide while contained. `getTableContainerWidth` covers
+          // wide/full-width tables; explicit inline widths (resizable tables) simply override it.
+          width: (0, _nodeWidth.getTableContainerWidth)(_this4.node),
+          height: (0, _contentVisibility.estimateTableIntrinsicHeight)(_this4.node)
+        };
+      });
+      // Marker for the shared table CSS: when content-visibility (→ contain: paint) is actually
+      // applied, it pulls the `::after` outer-border overlay from `inset: -0.5px` to `inset: 0` so
+      // paint clipping doesn't shave the border. Keyed off the real applied style so it stays in
+      // sync with the gate inside applyContentVisibility.
+      this.table.toggleAttribute('data-content-visibility', applied);
+    }
   }, {
     key: "update",
     value: function update(node, decorations, innerDecorations, validUpdate) {
@@ -272,6 +304,9 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
       // Keep the rounded-corner edge attrs in sync with structural changes (rows/columns
       // added, removed, merged, or reordered via drag-and-drop) that the cells themselves
       // can miss.
+      if (didUpdate) {
+        this.updateContentVisibility();
+      }
       if (didUpdate && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
         var _this$roundedTableEdg;
         (_this$roundedTableEdg = this.roundedTableEdges) === null || _this$roundedTableEdg === void 0 || _this$roundedTableEdg.handleUpdate(node);

package/dist/cjs/nodeviews/toDOM.js

@@ -11,7 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _classnames = _interopRequireDefault(require("classnames"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _adfSchema = require("@atlaskit/adf-schema");
-var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _table = require("@atlaskit/editor-common/table");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -102,7 +101,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]])].concat(overflowShadows, [['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
-      }]], (0, _toConsumableArray2.default)((0, _coreUtils.isSSRStreaming)() ? [['div', {
+      }], ['div', {
         contenteditable: 'false',
         class: 'pm-table-left-border',
         'data-with-numbered-table': node.attrs.isNumberColumnEnabled,
@@ -111,7 +110,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         contenteditable: 'false',
         class: 'pm-table-right-border',
         'data-testid': 'table-right-border'
-      }]] : []));
+      }]]);
       if (!config.tableResizingEnabled || config.isNested) {
         return ['div', {
           class: 'tableView-content-wrap',

package/dist/cjs/pm-plugins/main.js

@@ -68,7 +68,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
     }
     return editorView.state;
   };
-  var intl = (0, _coreUtils.isSSRStreaming)() ? getIntl() : undefined;
+  var intl = getIntl();
   var getNodeView = function getNodeView() {
     return {
       table: (0, _tableNodeViews.tableView)({

package/dist/cjs/pm-plugins/table-resizing/utils/colgroup.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isMinCellWidthTable = exports.insertColgroupFromNode = exports.hasTableColumnBeenResized = exports.hasTableBeenResized = exports.getResizerMinWidth = exports.getColgroupChildrenLength = exports.getColWidthFix = exports.generateColgroupFromNode = exports.generateColgroup = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
@@ -33,7 +32,7 @@ var generateColStyle = function generateColStyle(fixedColWidth, tableWidth, isCo
     if (hasTableBeenResized) {
       return "width: max(".concat(fixedColWidth, "px, ").concat(_styles.tableCellMinWidth, "px)");
     }
-    return (0, _coreUtils.isSSRStreaming)() ? "width: ".concat(_styles.tableCellMinWidth, "px") : "width: ".concat(_styles.tableCellMinWidth, "px)");
+    return "width: ".concat(_styles.tableCellMinWidth, "px");
   }
   if (isFullPageEditor || !isFullPageEditor && isTableHasWidth) {
     var scaledPercent = isNumberColumnEnabled ? "calc(calc(var(--ak-editor-table-width) - ".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px - 1px)/").concat(tableWidth, ")") : "calc(calc(var(--ak-editor-table-width) - 1px)/".concat(tableWidth, ")");

package/dist/es2019/nodeviews/TableSSRReactContextsProvider.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { RawIntlProvider } from 'react-intl';
-import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 export function TableSSRReactContextsProvider({
   children,
   intl
 }) {
-  if (!isSSR() || !isSSRStreaming()) {
+  if (!isSSR()) {
     return children;
   }
   if (!intl) {

package/dist/es2019/nodeviews/table.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
+import { applyContentVisibility, estimateTableIntrinsicHeight } from '@atlaskit/editor-common/utils/content-visibility';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -55,6 +55,7 @@ export default class TableView extends ReactNodeView {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined,
     // @portal-render-immediately
     true);
+    _defineProperty(this, "isNestedTable", false);
     _defineProperty(this, "getNode", () => {
       return this.node;
     });
@@ -88,6 +89,8 @@ export default class TableView extends ReactNodeView {
       const tableElement = rendered.dom.querySelector('table');
       this.table = tableElement ? tableElement : rendered.dom;
       this.renderedDOM = rendered.dom;
+      this.isNestedTable = isNested;
+      this.updateContentVisibility();
       const allowFixedColumnWidthOption = ((_this$reactComponentP5 = this.reactComponentProps) === null || _this$reactComponentP5 === void 0 ? void 0 : _this$reactComponentP5.allowFixedColumnWidthOption) || false;
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && allowFixedColumnWidthOption && this.node.attrs.displayMode === 'fixed') {
         const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
@@ -146,11 +149,11 @@ export default class TableView extends ReactNodeView {
       }
 
       // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-      // In SSR streaming the portal renders via `container.innerHTML = html` (portal/common.tsx), which detaches
+      // In SSR the portal renders via `container.innerHTML = html` (portal/common.tsx), which detaches
       // `renderedDOM` from `dom` before this runs; require it to still be a child so `removeChild` doesn't throw
       // `NotFoundError` (which would make EditorSSRRenderer fall back to the position-blind schema toDOM and lose
-      // nested detection). CSR keeps the original condition unchanged.
-      if (this.dom && this.renderedDOM && (!isSSRStreaming() || this.renderedDOM.parentNode === this.dom)) {
+      // nested detection).
+      if (this.dom && this.renderedDOM && this.renderedDOM.parentNode === this.dom) {
         this.dom.removeChild(this.renderedDOM);
       }
       // Move the table from the ProseMirror table structure into the React rendered table node.
@@ -229,12 +232,38 @@ export default class TableView extends ReactNodeView {
       }
     }
   }
+  updateContentVisibility() {
+    var _this$reactComponentP9, _limitedMode$sharedSt, _limitedMode$sharedSt2, _limitedMode$sharedSt3;
+    if (this.isNestedTable || !this.table) {
+      return;
+    }
+    // Read limited mode from the nodeView's own `this.view.state` via the plugin key exposed on
+    // the (already-typed) shared state, NOT `currentState().enabled`: during initial EditorView
+    // construction the injection API's editor state is undefined, so `.enabled` reads a stale false.
+    const limitedMode = (_this$reactComponentP9 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP9 === void 0 ? void 0 : _this$reactComponentP9.limitedMode;
+    const enabled = Boolean(limitedMode === null || limitedMode === void 0 ? void 0 : (_limitedMode$sharedSt = limitedMode.sharedState.currentState()) === null || _limitedMode$sharedSt === void 0 ? void 0 : (_limitedMode$sharedSt2 = _limitedMode$sharedSt.limitedModePluginKey) === null || _limitedMode$sharedSt2 === void 0 ? void 0 : (_limitedMode$sharedSt3 = _limitedMode$sharedSt2.getState(this.view.state)) === null || _limitedMode$sharedSt3 === void 0 ? void 0 : _limitedMode$sharedSt3.documentSizeBreachesThreshold);
+    const applied = applyContentVisibility(this.table, enabled, () => ({
+      // The `<table>` is content-sized (`display: table`), so it needs an explicit intrinsic
+      // width or it collapses to 0 wide while contained. `getTableContainerWidth` covers
+      // wide/full-width tables; explicit inline widths (resizable tables) simply override it.
+      width: getTableContainerWidth(this.node),
+      height: estimateTableIntrinsicHeight(this.node)
+    }));
+    // Marker for the shared table CSS: when content-visibility (→ contain: paint) is actually
+    // applied, it pulls the `::after` outer-border overlay from `inset: -0.5px` to `inset: 0` so
+    // paint clipping doesn't shave the border. Keyed off the real applied style so it stays in
+    // sync with the gate inside applyContentVisibility.
+    this.table.toggleAttribute('data-content-visibility', applied);
+  }
   update(node, decorations, innerDecorations, validUpdate) {
     const didUpdate = super.update(node, decorations, innerDecorations, validUpdate);
 
     // Keep the rounded-corner edge attrs in sync with structural changes (rows/columns
     // added, removed, merged, or reordered via drag-and-drop) that the cells themselves
     // can miss.
+    if (didUpdate) {
+      this.updateContentVisibility();
+    }
     if (didUpdate && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
       var _this$roundedTableEdg;
       (_this$roundedTableEdg = this.roundedTableEdges) === null || _this$roundedTableEdg === void 0 ? void 0 : _this$roundedTableEdg.handleUpdate(node);

package/dist/es2019/nodeviews/toDOM.js

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
-import { isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -88,7 +87,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
       }, ...roundedTableCornerMasks, ['table', attrs, colgroup, ['tbody', 0]]], ...overflowShadows, ['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
-      }], ...(isSSRStreaming() ? [['div', {
+      }], ['div', {
         contenteditable: 'false',
         class: 'pm-table-left-border',
         'data-with-numbered-table': node.attrs.isNumberColumnEnabled,
@@ -97,7 +96,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
         contenteditable: 'false',
         class: 'pm-table-right-border',
         'data-testid': 'table-right-border'
-      }]] : [])];
+      }]];
       if (!config.tableResizingEnabled || config.isNested) {
         return ['div', {
           class: 'tableView-content-wrap',

package/dist/es2019/pm-plugins/main.js

@@ -1,7 +1,7 @@
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { insideTable, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
+import { insideTable } from '@atlaskit/editor-common/core-utils';
 import { isNestedTablesSupported } from '@atlaskit/editor-common/nesting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension, transformSliceToRemoveOpenNestedExpand } from '@atlaskit/editor-common/transforms';
@@ -59,7 +59,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     }
     return editorView.state;
   };
-  const intl = isSSRStreaming() ? getIntl() : undefined;
+  const intl = getIntl();
   const getNodeView = () => {
     return {
       table: tableView({

package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js

@@ -1,4 +1,3 @@
-import { isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths, getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
@@ -23,7 +22,7 @@ const generateColStyle = (fixedColWidth, tableWidth, isCommentEditor, isChromele
     if (hasTableBeenResized) {
       return `width: max(${fixedColWidth}px, ${tableCellMinWidth}px)`;
     }
-    return isSSRStreaming() ? `width: ${tableCellMinWidth}px` : `width: ${tableCellMinWidth}px)`;
+    return `width: ${tableCellMinWidth}px`;
   }
   if (isFullPageEditor || !isFullPageEditor && isTableHasWidth) {
     const scaledPercent = isNumberColumnEnabled ? `calc(calc(var(--ak-editor-table-width) - ${akEditorTableNumberColumnWidth}px - 1px)/${tableWidth})` : `calc(calc(var(--ak-editor-table-width) - 1px)/${tableWidth})`;

package/dist/esm/nodeviews/TableSSRReactContextsProvider.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { RawIntlProvider } from 'react-intl';
-import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 export function TableSSRReactContextsProvider(_ref) {
   var children = _ref.children,
     intl = _ref.intl;
-  if (!isSSR() || !isSSRStreaming()) {
+  if (!isSSR()) {
     return children;
   }
   if (!intl) {

package/dist/esm/nodeviews/table.js

@@ -10,10 +10,10 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 import React from 'react';
-import { isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
+import { applyContentVisibility, estimateTableIntrinsicHeight } from '@atlaskit/editor-common/utils/content-visibility';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -67,6 +67,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     _this = _callSuper(this, TableView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined,
     // @portal-render-immediately
     true]);
+    _defineProperty(_this, "isNestedTable", false);
     _defineProperty(_this, "getNode", function () {
       return _this.node;
     });
@@ -108,6 +109,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         var tableElement = rendered.dom.querySelector('table');
         this.table = tableElement ? tableElement : rendered.dom;
         this.renderedDOM = rendered.dom;
+        this.isNestedTable = isNested;
+        this.updateContentVisibility();
         var allowFixedColumnWidthOption = ((_this$reactComponentP5 = this.reactComponentProps) === null || _this$reactComponentP5 === void 0 ? void 0 : _this$reactComponentP5.allowFixedColumnWidthOption) || false;
         if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && allowFixedColumnWidthOption && this.node.attrs.displayMode === 'fixed') {
           var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
@@ -167,11 +170,11 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         }
 
         // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-        // In SSR streaming the portal renders via `container.innerHTML = html` (portal/common.tsx), which detaches
+        // In SSR the portal renders via `container.innerHTML = html` (portal/common.tsx), which detaches
         // `renderedDOM` from `dom` before this runs; require it to still be a child so `removeChild` doesn't throw
         // `NotFoundError` (which would make EditorSSRRenderer fall back to the position-blind schema toDOM and lose
-        // nested detection). CSR keeps the original condition unchanged.
-        if (this.dom && this.renderedDOM && (!isSSRStreaming() || this.renderedDOM.parentNode === this.dom)) {
+        // nested detection).
+        if (this.dom && this.renderedDOM && this.renderedDOM.parentNode === this.dom) {
           this.dom.removeChild(this.renderedDOM);
         }
         // Move the table from the ProseMirror table structure into the React rendered table node.
@@ -257,6 +260,35 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         }
       }
     }
+  }, {
+    key: "updateContentVisibility",
+    value: function updateContentVisibility() {
+      var _this$reactComponentP9,
+        _limitedMode$sharedSt,
+        _this4 = this;
+      if (this.isNestedTable || !this.table) {
+        return;
+      }
+      // Read limited mode from the nodeView's own `this.view.state` via the plugin key exposed on
+      // the (already-typed) shared state, NOT `currentState().enabled`: during initial EditorView
+      // construction the injection API's editor state is undefined, so `.enabled` reads a stale false.
+      var limitedMode = (_this$reactComponentP9 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP9 === void 0 ? void 0 : _this$reactComponentP9.limitedMode;
+      var enabled = Boolean(limitedMode === null || limitedMode === void 0 || (_limitedMode$sharedSt = limitedMode.sharedState.currentState()) === null || _limitedMode$sharedSt === void 0 || (_limitedMode$sharedSt = _limitedMode$sharedSt.limitedModePluginKey) === null || _limitedMode$sharedSt === void 0 || (_limitedMode$sharedSt = _limitedMode$sharedSt.getState(this.view.state)) === null || _limitedMode$sharedSt === void 0 ? void 0 : _limitedMode$sharedSt.documentSizeBreachesThreshold);
+      var applied = applyContentVisibility(this.table, enabled, function () {
+        return {
+          // The `<table>` is content-sized (`display: table`), so it needs an explicit intrinsic
+          // width or it collapses to 0 wide while contained. `getTableContainerWidth` covers
+          // wide/full-width tables; explicit inline widths (resizable tables) simply override it.
+          width: getTableContainerWidth(_this4.node),
+          height: estimateTableIntrinsicHeight(_this4.node)
+        };
+      });
+      // Marker for the shared table CSS: when content-visibility (→ contain: paint) is actually
+      // applied, it pulls the `::after` outer-border overlay from `inset: -0.5px` to `inset: 0` so
+      // paint clipping doesn't shave the border. Keyed off the real applied style so it stays in
+      // sync with the gate inside applyContentVisibility.
+      this.table.toggleAttribute('data-content-visibility', applied);
+    }
   }, {
     key: "update",
     value: function update(node, decorations, innerDecorations, validUpdate) {
@@ -265,6 +297,9 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       // Keep the rounded-corner edge attrs in sync with structural changes (rows/columns
       // added, removed, merged, or reordered via drag-and-drop) that the cells themselves
       // can miss.
+      if (didUpdate) {
+        this.updateContentVisibility();
+      }
       if (didUpdate && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
         var _this$roundedTableEdg;
         (_this$roundedTableEdg = this.roundedTableEdges) === null || _this$roundedTableEdg === void 0 || _this$roundedTableEdg.handleUpdate(node);

package/dist/esm/nodeviews/toDOM.js

@@ -6,7 +6,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import classNames from 'classnames';
 import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
-import { isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -95,7 +94,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
       }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]])].concat(overflowShadows, [['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
-      }]], _toConsumableArray(isSSRStreaming() ? [['div', {
+      }], ['div', {
         contenteditable: 'false',
         class: 'pm-table-left-border',
         'data-with-numbered-table': node.attrs.isNumberColumnEnabled,
@@ -104,7 +103,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         contenteditable: 'false',
         class: 'pm-table-right-border',
         'data-testid': 'table-right-border'
-      }]] : []));
+      }]]);
       if (!config.tableResizingEnabled || config.isNested) {
         return ['div', {
           class: 'tableView-content-wrap',

package/dist/esm/pm-plugins/main.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { insideTable, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
+import { insideTable } from '@atlaskit/editor-common/core-utils';
 import { isNestedTablesSupported } from '@atlaskit/editor-common/nesting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension, transformSliceToRemoveOpenNestedExpand } from '@atlaskit/editor-common/transforms';
@@ -61,7 +61,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
     }
     return editorView.state;
   };
-  var intl = isSSRStreaming() ? getIntl() : undefined;
+  var intl = getIntl();
   var getNodeView = function getNodeView() {
     return {
       table: tableView({

package/dist/esm/pm-plugins/table-resizing/utils/colgroup.js

@@ -1,5 +1,4 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import { isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths, getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
@@ -26,7 +25,7 @@ var generateColStyle = function generateColStyle(fixedColWidth, tableWidth, isCo
     if (hasTableBeenResized) {
       return "width: max(".concat(fixedColWidth, "px, ").concat(tableCellMinWidth, "px)");
     }
-    return isSSRStreaming() ? "width: ".concat(tableCellMinWidth, "px") : "width: ".concat(tableCellMinWidth, "px)");
+    return "width: ".concat(tableCellMinWidth, "px");
   }
   if (isFullPageEditor || !isFullPageEditor && isTableHasWidth) {
     var scaledPercent = isNumberColumnEnabled ? "calc(calc(var(--ak-editor-table-width) - ".concat(akEditorTableNumberColumnWidth, "px - 1px)/").concat(tableWidth, ")") : "calc(calc(var(--ak-editor-table-width) - 1px)/".concat(tableWidth, ")");

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

@@ -16,6 +16,7 @@ export default class TableView extends ReactNodeView<Props> {
     private resizeObserver?;
     private roundedTableEdges;
     private intl?;
+    private isNestedTable;
     eventDispatcher?: EventDispatcher;
     getPos: getPosHandlerNode;
     options: TableOptions | undefined;
@@ -35,6 +36,7 @@ export default class TableView extends ReactNodeView<Props> {
     private _handleTableRef;
     setDomAttrs(node: PmNode): void;
     getNode: () => PmNode;
+    private updateContentVisibility;
     update(node: PmNode, decorations: ReadonlyArray<Decoration>, innerDecorations?: DecorationSource, validUpdate?: (currentNode: PmNode, newNode: PmNode) => boolean): boolean;
     render(props: Props, forwardRef: ForwardRef): React.JSX.Element;
     private hasHoveredRows;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "26.0.10",
+	"version": "26.2.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^14.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^14.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^16.0.0",
-		"@atlaskit/editor-plugin-extension": "17.1.1",
+		"@atlaskit/editor-plugin-extension": "17.2.0",
 		"@atlaskit/editor-plugin-guideline": "^14.0.0",
 		"@atlaskit/editor-plugin-interaction": "^25.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^11.0.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/editor-ui-control-model": "^2.6.0",
 		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/icon-lab": "^7.5.0",
-		"@atlaskit/insm": "^1.3.0",
+		"@atlaskit/insm": "^2.0.0",
 		"@atlaskit/menu": "^10.0.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
 		"@atlaskit/primitives": "^22.2.0",
-		"@atlaskit/tmp-editor-statsig": "^147.0.0",
+		"@atlaskit/tmp-editor-statsig": "^147.1.0",
 		"@atlaskit/toggle": "^17.1.0",
 		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
@@ -68,7 +68,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.10.0",
+		"@atlaskit/editor-common": "^118.12.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"