@atlaskit/editor-plugin-media 16.0.6 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-media
 
+## 16.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
+
 ## 16.0.6
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -19,6 +19,7 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
+var _contentVisibility = require("@atlaskit/editor-common/utils/content-visibility");
 var _main = require("../pm-plugins/main");
 var _MediaSSRReactContextsProvider = require("../ui/MediaSSRReactContextsProvider");
 var _mediaSingleNext = require("./mediaSingleNext");
@@ -147,6 +148,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         domRef.classList.add('media-extended-resize-experience');
       }
       domRef.setAttribute('data-media-vc-wrapper', 'true');
+      this.updateContentVisibility(domRef);
       return domRef;
     }
   }, {
@@ -158,6 +160,28 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         dom: dom
       };
     }
+
+    /**
+     * Skip rendering off-screen media in large (limited-mode) documents; the estimate is derived from
+     * the media's own dimensions and the renderer's width calculation. Called from both `createDomRef`
+     * and `update()` because limited mode can flip from disabled→enabled after the document loads.
+     * Takes the target element explicitly because `createDomRef` runs before `this.dom` is assigned.
+     */
+  }, {
+    key: "updateContentVisibility",
+    value: function updateContentVisibility(dom) {
+      var _api$limitedMode,
+        _this2 = this;
+      var api = this.reactComponentProps.pluginInjectionApi;
+      // Read limited mode from `this.view.state` via the exposed plugin key, NOT `currentState().enabled`
+      // (which reads a stale false during initial EditorView construction — see the table nodeView).
+      var enabled = Boolean(api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.limitedModePluginKey) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.getState(this.view.state)) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.documentSizeBreachesThreshold);
+      (0, _contentVisibility.applyContentVisibility)(dom, enabled, function () {
+        var _api$width, _widthState$lineLengt, _widthState$width;
+        var widthState = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
+        return (0, _contentVisibility.estimateMediaSingleIntrinsicSize)(_this2.node, (_widthState$lineLengt = widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) !== null && _widthState$lineLengt !== void 0 ? _widthState$lineLengt : 0, (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : 0);
+      });
+    }
   }, {
     key: "viewShouldUpdate",
     value: function viewShouldUpdate(nextNode) {
@@ -180,10 +204,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     key: "subscribeToViewModeChange",
     value: function subscribeToViewModeChange(domRef) {
       var _this$reactComponentP3,
-        _this2 = this;
+        _this3 = this;
       return (_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 || (_this$reactComponentP3 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.sharedState.onChange(function (viewModeState) {
         var _viewModeState$nextSh;
-        _this2.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
+        _this3.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
       });
     }
   }, {
@@ -225,10 +249,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
-      var _this3 = this;
+      var _this4 = this;
       if (!isValidUpdate) {
         isValidUpdate = function isValidUpdate(currentNode, newNode) {
-          return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
+          return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
         };
       }
       // Detect mediaSingle width attribute changes and signal child media node to update
@@ -236,12 +260,16 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         var target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
         target === null || target === void 0 || target.dispatchEvent(new CustomEvent('resized'));
       }
-      return _superPropGet(MediaSingleNodeView, "update", this, 3)([node, decorations, _innerDecorations, isValidUpdate]);
+      var didUpdate = _superPropGet(MediaSingleNodeView, "update", this, 3)([node, decorations, _innerDecorations, isValidUpdate]);
+      if (this.dom) {
+        this.updateContentVisibility(this.dom);
+      }
+      return didUpdate;
     }
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this4 = this;
+      var _this5 = this;
       var _this$reactComponentP5 = this.reactComponentProps,
         eventDispatcher = _this$reactComponentP5.eventDispatcher,
         fullWidthMode = _this$reactComponentP5.fullWidthMode,
@@ -267,12 +295,12 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
           return (0, _react2.jsx)(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             contextIdentifierProvider: contextIdentifierProvider,
-            node: _this4.node,
+            node: _this5.node,
             getPos: getPos,
             mediaOptions: mediaOptions,
-            view: _this4.view,
+            view: _this5.view,
             fullWidthMode: fullWidthMode,
-            selected: _this4.isNodeSelected,
+            selected: _this5.isNodeSelected,
             eventDispatcher: eventDispatcher
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/es2019/nodeviews/mediaSingle.js

@@ -14,6 +14,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { isNodeSelectedOrInRange } from '@atlaskit/editor-common/utils';
+import { applyContentVisibility, estimateMediaSingleIntrinsicSize } from '@atlaskit/editor-common/utils/content-visibility';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaSSRReactContextsProvider } from '../ui/MediaSSRReactContextsProvider';
 import { MediaSingleNodeNext } from './mediaSingleNext';
@@ -125,6 +126,7 @@ class MediaSingleNodeView extends ReactNodeView {
       domRef.classList.add('media-extended-resize-experience');
     }
     domRef.setAttribute('data-media-vc-wrapper', 'true');
+    this.updateContentVisibility(domRef);
     return domRef;
   }
   getContentDOM() {
@@ -134,6 +136,25 @@ class MediaSingleNodeView extends ReactNodeView {
       dom
     };
   }
+
+  /**
+   * Skip rendering off-screen media in large (limited-mode) documents; the estimate is derived from
+   * the media's own dimensions and the renderer's width calculation. Called from both `createDomRef`
+   * and `update()` because limited mode can flip from disabled→enabled after the document loads.
+   * Takes the target element explicitly because `createDomRef` runs before `this.dom` is assigned.
+   */
+  updateContentVisibility(dom) {
+    var _api$limitedMode, _api$limitedMode$shar, _api$limitedMode$shar2, _api$limitedMode$shar3;
+    const api = this.reactComponentProps.pluginInjectionApi;
+    // Read limited mode from `this.view.state` via the exposed plugin key, NOT `currentState().enabled`
+    // (which reads a stale false during initial EditorView construction — see the table nodeView).
+    const enabled = Boolean(api === null || api === void 0 ? void 0 : (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : (_api$limitedMode$shar = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode$shar === void 0 ? void 0 : (_api$limitedMode$shar2 = _api$limitedMode$shar.limitedModePluginKey) === null || _api$limitedMode$shar2 === void 0 ? void 0 : (_api$limitedMode$shar3 = _api$limitedMode$shar2.getState(this.view.state)) === null || _api$limitedMode$shar3 === void 0 ? void 0 : _api$limitedMode$shar3.documentSizeBreachesThreshold);
+    applyContentVisibility(dom, enabled, () => {
+      var _api$width, _widthState$lineLengt, _widthState$width;
+      const widthState = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
+      return estimateMediaSingleIntrinsicSize(this.node, (_widthState$lineLengt = widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) !== null && _widthState$lineLengt !== void 0 ? _widthState$lineLengt : 0, (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : 0);
+    });
+  }
   viewShouldUpdate(nextNode) {
     if (this.forceViewUpdate) {
       this.forceViewUpdate = false;
@@ -196,7 +217,11 @@ class MediaSingleNodeView extends ReactNodeView {
       const target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
       target === null || target === void 0 ? void 0 : target.dispatchEvent(new CustomEvent('resized'));
     }
-    return super.update(node, decorations, _innerDecorations, isValidUpdate);
+    const didUpdate = super.update(node, decorations, _innerDecorations, isValidUpdate);
+    if (this.dom) {
+      this.updateContentVisibility(this.dom);
+    }
+    return didUpdate;
   }
   render(props, forwardRef) {
     const {

package/dist/esm/nodeviews/mediaSingle.js

@@ -23,6 +23,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { isNodeSelectedOrInRange } from '@atlaskit/editor-common/utils';
+import { applyContentVisibility, estimateMediaSingleIntrinsicSize } from '@atlaskit/editor-common/utils/content-visibility';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaSSRReactContextsProvider } from '../ui/MediaSSRReactContextsProvider';
 import { MediaSingleNodeNext } from './mediaSingleNext';
@@ -143,6 +144,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         domRef.classList.add('media-extended-resize-experience');
       }
       domRef.setAttribute('data-media-vc-wrapper', 'true');
+      this.updateContentVisibility(domRef);
       return domRef;
     }
   }, {
@@ -154,6 +156,28 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         dom: dom
       };
     }
+
+    /**
+     * Skip rendering off-screen media in large (limited-mode) documents; the estimate is derived from
+     * the media's own dimensions and the renderer's width calculation. Called from both `createDomRef`
+     * and `update()` because limited mode can flip from disabled→enabled after the document loads.
+     * Takes the target element explicitly because `createDomRef` runs before `this.dom` is assigned.
+     */
+  }, {
+    key: "updateContentVisibility",
+    value: function updateContentVisibility(dom) {
+      var _api$limitedMode,
+        _this2 = this;
+      var api = this.reactComponentProps.pluginInjectionApi;
+      // Read limited mode from `this.view.state` via the exposed plugin key, NOT `currentState().enabled`
+      // (which reads a stale false during initial EditorView construction — see the table nodeView).
+      var enabled = Boolean(api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.limitedModePluginKey) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.getState(this.view.state)) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.documentSizeBreachesThreshold);
+      applyContentVisibility(dom, enabled, function () {
+        var _api$width, _widthState$lineLengt, _widthState$width;
+        var widthState = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
+        return estimateMediaSingleIntrinsicSize(_this2.node, (_widthState$lineLengt = widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) !== null && _widthState$lineLengt !== void 0 ? _widthState$lineLengt : 0, (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : 0);
+      });
+    }
   }, {
     key: "viewShouldUpdate",
     value: function viewShouldUpdate(nextNode) {
@@ -176,10 +200,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     key: "subscribeToViewModeChange",
     value: function subscribeToViewModeChange(domRef) {
       var _this$reactComponentP3,
-        _this2 = this;
+        _this3 = this;
       return (_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 || (_this$reactComponentP3 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.sharedState.onChange(function (viewModeState) {
         var _viewModeState$nextSh;
-        _this2.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
+        _this3.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
       });
     }
   }, {
@@ -221,10 +245,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
-      var _this3 = this;
+      var _this4 = this;
       if (!isValidUpdate) {
         isValidUpdate = function isValidUpdate(currentNode, newNode) {
-          return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
+          return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
         };
       }
       // Detect mediaSingle width attribute changes and signal child media node to update
@@ -232,12 +256,16 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         var target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
         target === null || target === void 0 || target.dispatchEvent(new CustomEvent('resized'));
       }
-      return _superPropGet(MediaSingleNodeView, "update", this, 3)([node, decorations, _innerDecorations, isValidUpdate]);
+      var didUpdate = _superPropGet(MediaSingleNodeView, "update", this, 3)([node, decorations, _innerDecorations, isValidUpdate]);
+      if (this.dom) {
+        this.updateContentVisibility(this.dom);
+      }
+      return didUpdate;
     }
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this4 = this;
+      var _this5 = this;
       var _this$reactComponentP5 = this.reactComponentProps,
         eventDispatcher = _this$reactComponentP5.eventDispatcher,
         fullWidthMode = _this$reactComponentP5.fullWidthMode,
@@ -263,12 +291,12 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
           return jsx(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             contextIdentifierProvider: contextIdentifierProvider,
-            node: _this4.node,
+            node: _this5.node,
             getPos: getPos,
             mediaOptions: mediaOptions,
-            view: _this4.view,
+            view: _this5.view,
             fullWidthMode: fullWidthMode,
-            selected: _this4.isNodeSelected,
+            selected: _this5.isNodeSelected,
             eventDispatcher: eventDispatcher
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/types/mediaPluginType.d.ts

@@ -15,6 +15,7 @@ import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { GridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
+import type { LimitedModePlugin } from '@atlaskit/editor-plugin-limited-mode/limited-mode-plugin-type';
 import type { MediaEditingPlugin } from '@atlaskit/editor-plugin-media-editing';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
@@ -44,7 +45,8 @@ export type MediaPluginDependencies = [
     OptionalPlugin<ConnectivityPlugin>,
     OptionalPlugin<InteractionPlugin>,
     OptionalPlugin<ToolbarPlugin>,
-    OptionalPlugin<MediaEditingPlugin>
+    OptionalPlugin<MediaEditingPlugin>,
+    OptionalPlugin<LimitedModePlugin>
 ];
 export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     actions: {

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

@@ -22,6 +22,13 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     getContentDOM(): {
         dom: HTMLDivElement;
     };
+    /**
+     * Skip rendering off-screen media in large (limited-mode) documents; the estimate is derived from
+     * the media's own dimensions and the renderer's width calculation. Called from both `createDomRef`
+     * and `update()` because limited mode can flip from disabled→enabled after the document loads.
+     * Takes the target element explicitly because `createDomRef` runs before `this.dom` is assigned.
+     */
+    private updateContentVisibility;
     viewShouldUpdate(nextNode: PMNode): boolean;
     subscribeToViewModeChange(domRef: HTMLElement): (() => void) | undefined;
     updateDomRefContentEditable(domRef: HTMLElement, editorViewMode?: 'edit' | 'view'): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "16.0.6",
+	"version": "16.1.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,6 +37,7 @@
 		"@atlaskit/editor-plugin-grid": "^14.0.0",
 		"@atlaskit/editor-plugin-guideline": "^14.0.0",
 		"@atlaskit/editor-plugin-interaction": "^25.0.0",
+		"@atlaskit/editor-plugin-limited-mode": "^11.0.0",
 		"@atlaskit/editor-plugin-media-editing": "^8.0.0",
 		"@atlaskit/editor-plugin-selection": "^14.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^11.0.0",
@@ -70,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.10.0",
+		"@atlaskit/editor-common": "^118.11.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
@@ -160,11 +161,6 @@
 			"type": "boolean"
 		}
 	},
-	"stricter": {
-		"no-unused-dependencies": {
-			"checkDevDependencies": true
-		}
-	},
 	"devDependencies": {
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",