@atlaskit/editor-plugin-media 8.4.2 → 8.4.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 8.4.4
+
+### Patch Changes
+
+- [`dba0cb8c22976`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dba0cb8c22976) -
+  Cleans up FG platform_editor_fix_media_card_removal
+- Updated dependencies
+
+## 8.4.3
+
+### Patch Changes
+
+- [`da82d015556d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da82d015556d4) -
+  Fix a bug where repeatedly cloning the media plugin state would cause severe performance
+  degradation over time
+- Updated dependencies
+
 ## 8.4.2
 
 ### Patch Changes

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

@@ -28,6 +28,7 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaCommon = require("@atlaskit/media-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _helpers = _interopRequireWildcard(require("../pm-plugins/commands/helpers"));
 var helpers = _helpers;
 var _mediaCommon2 = require("../pm-plugins/utils/media-common");
@@ -484,11 +485,25 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     key: "clone",
     value: function clone() {
       var clonedAt = (performance || Date).now();
-      return new Proxy(this, {
+
+      // Prevent double wrapping
+      // If clone is repeatedly called, we want to proxy the underlying MediaPluginStateImplementation target, rather than the proxy itself
+      // If we proxy the proxy, then calling get in future will need to recursively unwrap proxies to find the original target, which causes performance issues
+      // Instead, we check if there is an original target stored on "this", and if so, we use that as the proxy target instead
+      // eslint-disable-next-line @typescript-eslint/no-this-alias -- This is required while this is behind a feature-gate. Once the feature-gate is removed, we can inline proxyTarget as "(this as unknown as { originalTarget?: typeof proxyTarget }).originalTarget ?? this"
+      var proxyTarget = this;
+      var originalTarget = this.originalTarget;
+      if (originalTarget !== undefined && (0, _expValEquals.expValEquals)('platform_editor_fix_clone_nesting_exp', 'isEnabled', true)) {
+        proxyTarget = originalTarget;
+      }
+      return new Proxy(proxyTarget, {
         get: function get(target, prop, receiver) {
           if (prop === 'singletonCreatedAt') {
             return clonedAt;
           }
+          if (prop === 'originalTarget') {
+            return target;
+          }
           return Reflect.get(target, prop, receiver);
         }
       });

package/dist/cjs/ui/toolbar/index.js

@@ -846,7 +846,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
         })
       }, hoverDecorationProps(nodeType, _editorSharedStyles.akEditorSelectedNodeClassName)), _objectSpread({
         title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(_messages.default.delete),
-        onClick: (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup && (0, _platformFeatureFlags.fg)('platform_editor_fix_media_card_removal') ? handleRemoveMediaGroupWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions) : removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions, selectedNodeType),
+        onClick: (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup ? handleRemoveMediaGroupWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions) : removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions, selectedNodeType),
         icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
           label: ""
         })

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

@@ -16,6 +16,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { updateMediaNodeAttrs } from '../pm-plugins/commands/helpers';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
@@ -461,11 +462,25 @@ export class MediaPluginStateImplementation {
   }
   clone() {
     const clonedAt = (performance || Date).now();
-    return new Proxy(this, {
+
+    // Prevent double wrapping
+    // If clone is repeatedly called, we want to proxy the underlying MediaPluginStateImplementation target, rather than the proxy itself
+    // If we proxy the proxy, then calling get in future will need to recursively unwrap proxies to find the original target, which causes performance issues
+    // Instead, we check if there is an original target stored on "this", and if so, we use that as the proxy target instead
+    // eslint-disable-next-line @typescript-eslint/no-this-alias -- This is required while this is behind a feature-gate. Once the feature-gate is removed, we can inline proxyTarget as "(this as unknown as { originalTarget?: typeof proxyTarget }).originalTarget ?? this"
+    let proxyTarget = this;
+    const originalTarget = this.originalTarget;
+    if (originalTarget !== undefined && expValEquals('platform_editor_fix_clone_nesting_exp', 'isEnabled', true)) {
+      proxyTarget = originalTarget;
+    }
+    return new Proxy(proxyTarget, {
       get(target, prop, receiver) {
         if (prop === 'singletonCreatedAt') {
           return clonedAt;
         }
+        if (prop === 'originalTarget') {
+          return target;
+        }
         return Reflect.get(target, prop, receiver);
       }
     });

package/dist/es2019/ui/toolbar/index.js

@@ -847,7 +847,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
         ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
       }, {
         title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(commonMessages.delete),
-        onClick: (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup && fg('platform_editor_fix_media_card_removal') ? handleRemoveMediaGroupWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions) : removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions, selectedNodeType),
+        onClick: (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup ? handleRemoveMediaGroupWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions) : removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions, selectedNodeType),
         icon: /*#__PURE__*/React.createElement(DeleteIcon, {
           label: ""
         }),

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

@@ -25,6 +25,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { updateMediaNodeAttrs } from '../pm-plugins/commands/helpers';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
@@ -476,11 +477,25 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     key: "clone",
     value: function clone() {
       var clonedAt = (performance || Date).now();
-      return new Proxy(this, {
+
+      // Prevent double wrapping
+      // If clone is repeatedly called, we want to proxy the underlying MediaPluginStateImplementation target, rather than the proxy itself
+      // If we proxy the proxy, then calling get in future will need to recursively unwrap proxies to find the original target, which causes performance issues
+      // Instead, we check if there is an original target stored on "this", and if so, we use that as the proxy target instead
+      // eslint-disable-next-line @typescript-eslint/no-this-alias -- This is required while this is behind a feature-gate. Once the feature-gate is removed, we can inline proxyTarget as "(this as unknown as { originalTarget?: typeof proxyTarget }).originalTarget ?? this"
+      var proxyTarget = this;
+      var originalTarget = this.originalTarget;
+      if (originalTarget !== undefined && expValEquals('platform_editor_fix_clone_nesting_exp', 'isEnabled', true)) {
+        proxyTarget = originalTarget;
+      }
+      return new Proxy(proxyTarget, {
         get: function get(target, prop, receiver) {
           if (prop === 'singletonCreatedAt') {
             return clonedAt;
           }
+          if (prop === 'originalTarget') {
+            return target;
+          }
           return Reflect.get(target, prop, receiver);
         }
       });

package/dist/esm/ui/toolbar/index.js

@@ -837,7 +837,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
         })
       }, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)), _objectSpread({
         title: intl === null || intl === void 0 ? void 0 : intl.formatMessage(commonMessages.delete),
-        onClick: (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup && fg('platform_editor_fix_media_card_removal') ? handleRemoveMediaGroupWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions) : removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions, selectedNodeType),
+        onClick: (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup ? handleRemoveMediaGroupWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a1 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a1 === void 0 ? void 0 : _pluginInjectionApi$a1.actions) : removeWithAnalytics(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions, selectedNodeType),
         icon: /*#__PURE__*/React.createElement(DeleteIcon, {
           label: ""
         })

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.4.2",
+	"version": "8.4.4",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/primitives": "^16.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.18.0",
+		"@atlaskit/tmp-editor-statsig": "^13.19.0",
 		"@atlaskit/tokens": "^7.0.0",
 		"@atlaskit/tooltip": "^20.6.0",
 		"@babel/runtime": "^7.0.0",
@@ -160,9 +160,6 @@
 		"platform_media_video_captions": {
 			"type": "boolean"
 		},
-		"platform_editor_fix_media_card_removal": {
-			"type": "boolean"
-		},
 		"jira_kuro-jjj_disable_auto_focus_after_img_upload": {
 			"type": "boolean"
 		}