@atlaskit/editor-plugin-table 26.0.10 → 26.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 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/dist/cjs/nodeviews/table.js

@@ -18,6 +18,7 @@ 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 +75,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 +117,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);
@@ -264,6 +268,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 +305,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/es2019/nodeviews/table.js

@@ -4,6 +4,7 @@ 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 +56,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 +90,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);
@@ -229,12 +233,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/esm/nodeviews/table.js

@@ -14,6 +14,7 @@ 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 +68,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 +110,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);
@@ -257,6 +261,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 +298,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/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.1.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.10.0",
+		"@atlaskit/editor-common": "^118.11.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"