@atlaskit/editor-plugin-media 24.0.4 → 24.0.6

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-media
 
+## 24.0.6
+
+### Patch Changes
+
+- [`e88ec21b2ee73`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e88ec21b2ee73) -
+  Re-land of EDITOR-9164. Behind the shared `platform_editor_reduce_forced_layout` experiment, the
+  media single node view no longer reads `offsetLeft` from `ignoreMutation` when nothing can consume
+  the result — that is, when pixel resizing is enabled (the resizer used in that mode never reads
+  it) or when resizing is disabled. The read forced a synchronous layout recalculation on every DOM
+  mutation and every caret move inside a media single. Percentage-based resizing is unaffected.
+
+  The skip decision is now resolved lazily on the first `ignoreMutation` call instead of in a
+  class-field initializer, avoiding the optional chaining in a class field that caused
+  `jsx is not defined` in the Help Center build.
+
+- Updated dependencies
+
+## 24.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.0.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -20,6 +20,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 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 _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _main = require("../pm-plugins/main");
 var _MediaSSRReactContextsProvider = require("../ui/MediaSSRReactContextsProvider");
 var _mediaSingleNext = require("./mediaSingleNext");
@@ -96,6 +97,19 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref) {
     editorAppearance: editorAppearance
   });
 };
+
+/**
+ * Only the percentage-based `ResizableMediaSingle` reads `offsetLeft`, to offset the resize grid
+ * for an image indented in a list. Pixel resizing and no-resizer configurations never consume it,
+ * so `ignoreMutation` can skip the forced layout read for them.
+ *
+ * We can remove this and always return true from ignoreMutation once the legacy media resizer is removed.
+ */
+var shouldSkipOffsetLeftRead = function shouldSkipOffsetLeftRead(mediaOptions) {
+  var allowPixelResizing = Boolean(mediaOptions && mediaOptions.allowPixelResizing);
+  var allowResizing = Boolean(mediaOptions && mediaOptions.allowResizing);
+  return (allowPixelResizing || !allowResizing) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_reduce_forced_layout');
+};
 var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   function MediaSingleNodeView() {
     var _this;
@@ -108,6 +122,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     (0, _defineProperty2.default)(_this, "forceViewUpdate", false);
     (0, _defineProperty2.default)(_this, "selectionType", null);
     (0, _defineProperty2.default)(_this, "hasResized", false);
+    (0, _defineProperty2.default)(_this, "skipsOffsetLeftRead", null);
     (0, _defineProperty2.default)(_this, "checkAndUpdateSelectionType", function () {
       var getPos = _this.getPos;
       var selection = _this.view.state.selection;
@@ -320,6 +335,13 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "ignoreMutation",
     value: function ignoreMutation() {
+      if (this.skipsOffsetLeftRead === null) {
+        this.skipsOffsetLeftRead = shouldSkipOffsetLeftRead(this.reactComponentProps.mediaOptions);
+      }
+      if (this.skipsOffsetLeftRead) {
+        return true;
+      }
+
       // DOM has changed; recalculate if we need to re-render
       if (this.dom) {
         // Ignored via go/ees005

package/dist/es2019/nodeviews/mediaSingle.js

@@ -15,6 +15,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 // 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 { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaSSRReactContextsProvider } from '../ui/MediaSSRReactContextsProvider';
 import { MediaSingleNodeNext } from './mediaSingleNext';
@@ -81,6 +82,19 @@ const MediaSingleNodeWrapper = ({
     editorAppearance: editorAppearance
   });
 };
+
+/**
+ * Only the percentage-based `ResizableMediaSingle` reads `offsetLeft`, to offset the resize grid
+ * for an image indented in a list. Pixel resizing and no-resizer configurations never consume it,
+ * so `ignoreMutation` can skip the forced layout read for them.
+ *
+ * We can remove this and always return true from ignoreMutation once the legacy media resizer is removed.
+ */
+const shouldSkipOffsetLeftRead = mediaOptions => {
+  const allowPixelResizing = Boolean(mediaOptions && mediaOptions.allowPixelResizing);
+  const allowResizing = Boolean(mediaOptions && mediaOptions.allowResizing);
+  return (allowPixelResizing || !allowResizing) && isExperimentEnabled('platform_editor_reduce_forced_layout');
+};
 class MediaSingleNodeView extends ReactNodeView {
   constructor(...args) {
     super(...args);
@@ -88,6 +102,7 @@ class MediaSingleNodeView extends ReactNodeView {
     _defineProperty(this, "forceViewUpdate", false);
     _defineProperty(this, "selectionType", null);
     _defineProperty(this, "hasResized", false);
+    _defineProperty(this, "skipsOffsetLeftRead", null);
     _defineProperty(this, "checkAndUpdateSelectionType", () => {
       const getPos = this.getPos;
       const {
@@ -274,6 +289,13 @@ class MediaSingleNodeView extends ReactNodeView {
     }));
   }
   ignoreMutation() {
+    if (this.skipsOffsetLeftRead === null) {
+      this.skipsOffsetLeftRead = shouldSkipOffsetLeftRead(this.reactComponentProps.mediaOptions);
+    }
+    if (this.skipsOffsetLeftRead) {
+      return true;
+    }
+
     // DOM has changed; recalculate if we need to re-render
     if (this.dom) {
       // Ignored via go/ees005

package/dist/esm/nodeviews/mediaSingle.js

@@ -24,6 +24,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 // 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 { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaSSRReactContextsProvider } from '../ui/MediaSSRReactContextsProvider';
 import { MediaSingleNodeNext } from './mediaSingleNext';
@@ -92,6 +93,19 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref) {
     editorAppearance: editorAppearance
   });
 };
+
+/**
+ * Only the percentage-based `ResizableMediaSingle` reads `offsetLeft`, to offset the resize grid
+ * for an image indented in a list. Pixel resizing and no-resizer configurations never consume it,
+ * so `ignoreMutation` can skip the forced layout read for them.
+ *
+ * We can remove this and always return true from ignoreMutation once the legacy media resizer is removed.
+ */
+var shouldSkipOffsetLeftRead = function shouldSkipOffsetLeftRead(mediaOptions) {
+  var allowPixelResizing = Boolean(mediaOptions && mediaOptions.allowPixelResizing);
+  var allowResizing = Boolean(mediaOptions && mediaOptions.allowResizing);
+  return (allowPixelResizing || !allowResizing) && isExperimentEnabled('platform_editor_reduce_forced_layout');
+};
 var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   function MediaSingleNodeView() {
     var _this;
@@ -104,6 +118,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     _defineProperty(_this, "forceViewUpdate", false);
     _defineProperty(_this, "selectionType", null);
     _defineProperty(_this, "hasResized", false);
+    _defineProperty(_this, "skipsOffsetLeftRead", null);
     _defineProperty(_this, "checkAndUpdateSelectionType", function () {
       var getPos = _this.getPos;
       var selection = _this.view.state.selection;
@@ -316,6 +331,13 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "ignoreMutation",
     value: function ignoreMutation() {
+      if (this.skipsOffsetLeftRead === null) {
+        this.skipsOffsetLeftRead = shouldSkipOffsetLeftRead(this.reactComponentProps.mediaOptions);
+      }
+      if (this.skipsOffsetLeftRead) {
+        return true;
+      }
+
       // DOM has changed; recalculate if we need to re-render
       if (this.dom) {
         // Ignored via go/ees005

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

@@ -18,6 +18,7 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     selectionType: number | null;
     unsubscribeToViewModeChange: (() => void) | undefined;
     hasResized: boolean;
+    skipsOffsetLeftRead: boolean | null;
     createDomRef(): HTMLElement;
     getContentDOM(): {
         dom: HTMLDivElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "24.0.4",
+	"version": "24.0.6",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -61,7 +61,7 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^213.0.0",
+		"@atlaskit/tmp-editor-statsig": "^215.0.0",
 		"@atlaskit/tokens": "^20.1.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -74,7 +74,7 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^126.2.0",
+		"@atlaskit/editor-common": "^126.3.0",
 		"@atlaskit/media-core": "^39.0.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",