@atlaskit/editor-common 128.3.1 → 128.4.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @atlaskit/editor-common
 
+## 128.4.0
+
+### Minor Changes
+
+- [`950fcabdaee51`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/950fcabdaee51) -
+  Show comment markers for eligible Remix extension nodes in the editor behind
+  `cc_maui_annotations_on_extensions`. Highlight an open draft or selected unresolved thread, open
+  existing comments from the marker, and preserve the embedded iframe and unsaved drafts when
+  switching threads.
+
+  Render each badge from its extension node view, using its node and current position instead of
+  scanning the document. Both standard and referentiality extension node views render the shared
+  badge directly, using annotation state and logic-only actions. Expose the reusable badge container
+  as BlockNodeBadges, retaining MediaBadges as a compatibility wrapper for existing media consumers.
+
+  Preserve the existing Emotion styling for the shared badge container; defer its Compiled migration
+  with a file-scoped ratcheting exception.
+
+- [`be603fee7766f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be603fee7766f) -
+  Remove unused performance analytics code: ACTION enum members WITH_PLUGIN_STATE_CALLED,
+  DISPATCHED_VALID_TRANSACTION, EDITOR_CONTENT_RETRIEVAL_PERFORMED, ON_CHANGE_CALLBACK,
+  RENDERED_SAMPLED and REACT_NODEVIEW_RENDERED with their payload types, TransactionEventPayload,
+  PluginPerformanceReportData types, measureTTI / getTTISeverity and TTI threshold defaults,
+  reactNodeViewRendered tracking (getPerformanceOptions, start/stopMeasureReactNodeViewRendered,
+  PerformanceTracking.nodeViewTracking), and the `./performance/measure-tti`,
+  `./utils/get-performance-options` and `./analytics/types/performance-report` entry points
+
+### Patch Changes
+
+- Updated dependencies
+
+## 128.3.2
+
+### Patch Changes
+
+- [`7690092b13a84`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7690092b13a84) -
+  Clean up the fully rolled out nested MultiBodiedExtension frame styling feature gate.
+- [`042fa402a6460`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/042fa402a6460) -
+  Clean up experiment `platform_editor_august_a11y`
+- Updated dependencies
+
 ## 128.3.1
 
 ### Patch Changes

package/block-node-badges/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/editor-common/block-node-badges",
+  "main": "../dist/cjs/block-node-badges.js",
+  "module": "../dist/esm/block-node-badges.js",
+  "module:es2019": "../dist/es2019/block-node-badges.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/block-node-badges.d.ts"
+}

package/dist/cjs/analytics/types/enums.js

@@ -54,14 +54,12 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["DISPLAYED"] = "displayed";
   ACTION["DIVERGED"] = "diverged";
   ACTION["DISPATCHED_INVALID_TRANSACTION"] = "dispatchedInvalidTransaction";
-  ACTION["DISPATCHED_VALID_TRANSACTION"] = "dispatchedValidTransaction";
   ACTION["DOUBLE_CLICKED"] = "doubleClicked";
   ACTION["DRAGGED"] = "dragged";
   ACTION["EDITED"] = "edited";
   ACTION["EDITOR_CRASHED"] = "unhandledErrorCaught";
   ACTION["EDITOR_CRASHED_ADDITIONAL_INFORMATION"] = "unhandledErrorCaughtAdditionalInfov2";
   ACTION["EDITOR_MOUNTED"] = "mounted";
-  ACTION["EDITOR_CONTENT_RETRIEVAL_PERFORMED"] = "contentRetrievalPerformed";
   ACTION["RE_RENDERED"] = "reRendered";
   ACTION["ENDED"] = "ended";
   ACTION["ENTERED"] = "entered";
@@ -120,7 +118,6 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["PRESSED"] = "pressed";
   ACTION["QUICK_INSERT_INFORMATION"] = "quickInsertInformation";
   ACTION["PROSEMIRROR_RENDERED"] = "proseMirrorRendered";
-  ACTION["REACT_NODEVIEW_RENDERED"] = "reactNodeViewRendered";
   ACTION["REFERENCE_SYNCED_BLOCK_DELETE"] = "referenceSyncedBlockDelete";
   ACTION["REFERENCE_SYNCED_BLOCK_UPDATE"] = "referenceSyncedBlockUpdate";
   ACTION["REFERENCE_SYNCED_BLOCK_UNSYNC"] = "referenceSyncedBlockUnsync";
@@ -176,18 +173,9 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["UPLOAD_EXTERNAL_FAIL"] = "uploadExternalFailed";
   ACTION["VIEWED"] = "viewed";
   ACTION["VISITED"] = "visited";
-  ACTION["WITH_PLUGIN_STATE_CALLED"] = "withPluginStateCalled";
   ACTION["RENDERED"] = "rendered";
-  ACTION["RENDERED_SAMPLED"] = "renderedSampled";
   ACTION["REASONING_VIEWED"] = "reasoningViewed";
   ACTION["ON_EDITOR_READY_CALLBACK"] = "onEditorReadyCallback";
-  /**
-   * @private
-   * @deprecated
-   *
-   * This is no longer used and can be removed at a later date
-   */
-  ACTION["ON_CHANGE_CALLBACK"] = "onChangeCalled";
   ACTION["NESTED_TABLE_TRANSFORMED"] = "nestedTableTransformed";
   ACTION["CONTAINER_NODE_TRANSFORMED"] = "containerNodeTransformed";
   ACTION["NATIVE_EMBEDS_TRANSFORMED"] = "nativeEmbedsTransformed";

package/dist/cjs/block-node-badges.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockNodeBadges = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _primitives = require("@atlaskit/primitives");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+
+var BADGE_VISIBILITY_BREAKPOINT = 200;
+var containerStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  position: 'absolute',
+  top: 'space.0',
+  right: 'space.0',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: "var(--ds-space-200, 16px)",
+  gap: 'space.025',
+  zIndex: 'card',
+  height: 'fit-content',
+  width: 'fit-content',
+  margin: 'space.075'
+});
+
+// The above styles are used for both editor and renderer, and in renderer the
+// document body is the main scroll area. This means it overscrolls the primary
+// toolbar, where the z-index is "2". We have to hack in our own z-index less
+// than that to ensure our badge appears under the toolbar when scrolled.
+var hackedZIndexStyles = (0, _primitives.xcss)({
+  zIndex: '1'
+});
+var resizeOffsetStyles = (0, _primitives.xcss)({
+  right: 'space.150'
+});
+var getBadgeVisible = function getBadgeVisible(width, height) {
+  return width && width < BADGE_VISIBILITY_BREAKPOINT || height && height < BADGE_VISIBILITY_BREAKPOINT ? false : true;
+};
+var BlockNodeBadges = exports.BlockNodeBadges = function BlockNodeBadges(_ref) {
+  var children = _ref.children,
+    element = _ref.element,
+    width = _ref.width,
+    height = _ref.height,
+    extendedResizeOffset = _ref.extendedResizeOffset,
+    _ref$useMinimumZIndex = _ref.useMinimumZIndex,
+    useMinimumZIndex = _ref$useMinimumZIndex === void 0 ? false : _ref$useMinimumZIndex;
+  var _useState = (0, _react.useState)(getBadgeVisible(width, height)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var observer = new ResizeObserver((0, _debounce.default)(function (entries) {
+      var _entries = (0, _slicedToArray2.default)(entries, 1),
+        entry = _entries[0];
+      var _entry$contentRect = entry.contentRect,
+        width = _entry$contentRect.width,
+        height = _entry$contentRect.height;
+      setVisible(getBadgeVisible(width, height));
+    }));
+    if (element) {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      observer.observe(element);
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [element]);
+  if (typeof children === 'function') {
+    children = children({
+      visible: visible
+    });
+  }
+
+  // delete this block on cleanup of media-perf-uplift-mutation-fix
+  if (!(0, _fg.fg)('media-perf-uplift-mutation-fix')) {
+    // becuase it is wrapped in a fragment, React.Children.count(children) will always be 1.
+    // That makes this check a source of late mutations that we don't need.
+    if (!element || _react.default.Children.count(children) === 0) {
+      return null;
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: "div",
+    testId: "media-badges",
+    "data-media-badges": "true",
+    contentEditable: false
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    xcss: [containerStyles, useMinimumZIndex && hackedZIndexStyles, extendedResizeOffset && resizeOffsetStyles]
+  }, children);
+};

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -243,7 +243,7 @@ var ElementListSingleColumn = function ElementListSingleColumn(props) {
         focus: focusedItemIndex === index,
         setFocusedItemIndex: setFocusedItemIndex,
         onInsertItem: onInsertItem,
-        role: (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? 'option' : undefined
+        role: "option"
       })));
     };
   },
@@ -427,8 +427,7 @@ function ElementItem(_ref6) {
       title: title
     }),
     isSelected: selected,
-    "aria-describedby": (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? undefined : title,
-    "aria-label": (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? title : undefined,
+    "aria-label": title,
     ref: ref,
     testId: "element-item-".concat(index),
     id: "searched-item-".concat(index),

package/dist/cjs/element-browser/components/StatelessElementBrowser.js

@@ -351,7 +351,7 @@ function MobileBrowser(_ref) {
     searchTerm: searchTerm,
     items: items,
     selectedItemIndex: selectedItemIndex,
-    ariaControlsId: (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? _constants.ELEMENT_BROWSER_LIST_ID : undefined
+    ariaControlsId: _constants.ELEMENT_BROWSER_LIST_ID
   }), showCategories && (0, _react2.jsx)("nav", {
     css: mobileCategoryListWrapper,
     tabIndex: -1
@@ -365,7 +365,7 @@ function MobileBrowser(_ref) {
     setFocusOnSearch: setFocusOnSearch
   }))), (0, _react2.jsx)("div", {
     css: mobileMainContent,
-    id: (0, _expValEquals.expValEquals)('platform_editor_august_a11y', 'isEnabled', true) ? _constants.ELEMENT_BROWSER_LIST_ID : undefined
+    id: _constants.ELEMENT_BROWSER_LIST_ID
   }, (0, _react2.jsx)(_ElementList.default, {
     items: items,
     mode: mode,

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames2 = _interopRequireDefault(require("classnames"));
@@ -20,6 +21,7 @@ var _NodeViewContentHole = require("../../../react-node-view/NodeViewContentHole
 var _ui = require("../../../ui");
 var _utils = require("../../../utils");
 var _shouldExtensionBreakout = require("../../utils/should-extension-breakout");
+var _ExtensionCommentBadge = require("../ExtensionCommentBadge");
 var _Lozenge = _interopRequireDefault(require("../Lozenge"));
 var _styles = require("../styles");
 var _extensionUtils = require("./extension-utils");
@@ -62,6 +64,16 @@ function ExtensionWithPluginState(props) {
     pluginInjectionApi = props.pluginInjectionApi,
     isLivePageViewMode = props.isLivePageViewMode,
     hideConfigureLabel = props.hideConfigureLabel;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    container = _useState2[0],
+    setContainer = _useState2[1];
+  var handleContainerRef = (0, _react.useCallback)(function (element) {
+    handleRef === null || handleRef === void 0 || handleRef(element);
+    if ((0, _fg.fg)('cc_maui_annotations_on_extensions')) {
+      setContainer(element);
+    }
+  }, [handleRef]);
   var _ref = macroInteractionDesignFeatureFlags || {},
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   var isLegacyContentMacroExtension = function isLegacyContentMacroExtension(extensionNode) {
@@ -156,7 +168,7 @@ function ExtensionWithPluginState(props) {
     hideConfigureLabel: hideConfigureLabel
   }), (0, _react2.jsx)("div", {
     "data-testid": "extension-container",
-    ref: handleRef,
+    ref: handleContainerRef,
     "data-layout": node.attrs.layout
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
@@ -220,7 +232,13 @@ function ExtensionWithPluginState(props) {
     className: contentClassNames
   }, (0, _react2.jsx)(_NodeViewContentHole.NodeViewContentHole, {
     ref: handleContentDOMRef
-  }))))));
+  })))), (0, _fg.fg)('cc_maui_annotations_on_extensions') && node.type.name === 'extension' && container && (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.annotation) && (0, _react2.jsx)(_ExtensionCommentBadge.ExtensionCommentBadge, {
+    api: pluginInjectionApi,
+    node: node,
+    getPos: getPos,
+    editorView: view,
+    container: container
+  })));
 }
 var Extension = function Extension(props) {
   var pluginInjectionApi = props.pluginInjectionApi;

package/dist/cjs/extensibility/Extension/ExtensionCommentBadge.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExtensionCommentBadge = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("../../analytics");
+var _blockNodeBadges = require("../../block-node-badges");
+var _hooks = require("../../hooks");
+var _CommentBadgeNext = require("../../media-single/CommentBadgeNext");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+// Owned by the extension node view, like media's badge. Annotation updates only
+// render this sibling of the extension content; they never reparent its iframe.
+var ExtensionCommentBadge = exports.ExtensionCommentBadge = function ExtensionCommentBadge(_ref) {
+  var _api$annotation4;
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    node = _ref.node,
+    getPos = _ref.getPos,
+    container = _ref.container;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['annotation'], function (states) {
+      return {
+        annotationState: states.annotationState
+      };
+    }),
+    annotationState = _useSharedPluginState.annotationState;
+  var drafting = Boolean((annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting) && node.attrs.localId && node.attrs.localId === annotationState.targetNodeId);
+  var hasOpenDraft = Boolean(annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting);
+  var unresolvedIds = (0, _react.useMemo)(function () {
+    return node.marks.filter(function (mark) {
+      return mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false;
+    }).map(function (mark) {
+      return mark.attrs.id;
+    });
+  }, [node.marks, annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations]);
+  var onClick = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(event) {
+      var _api$annotation, _api$annotation2;
+      var pos, currentNode, _api$annotation3, _t;
+      return _regenerator.default.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            event.preventDefault();
+            event.stopPropagation();
+            if (!drafting) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            _t = hasOpenDraft;
+            if (!_t) {
+              _context.next = 3;
+              break;
+            }
+            _context.next = 2;
+            return api === null || api === void 0 || (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : _api$annotation.actions.requestCloseInlineComment();
+          case 2:
+            _t = !_context.sent;
+          case 3:
+            if (!_t) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return");
+          case 4:
+            // Resolve the current position after the asynchronous discard confirmation.
+            pos = getPos();
+            if (!(typeof pos !== 'number' || !Number.isFinite(pos) || pos < 0 || pos >= editorView.state.doc.content.size)) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return");
+          case 5:
+            currentNode = editorView.state.doc.nodeAt(pos);
+            if ((currentNode === null || currentNode === void 0 ? void 0 : currentNode.type) === node.type && currentNode.attrs.localId === node.attrs.localId && api !== null && api !== void 0 && (_api$annotation2 = api.annotation) !== null && _api$annotation2 !== void 0 && _api$annotation2.actions.isBlockNodeSupported(currentNode)) {
+              api === null || api === void 0 || (_api$annotation3 = api.annotation) === null || _api$annotation3 === void 0 || _api$annotation3.actions.showCommentForBlockNode(currentNode, _analytics.VIEW_METHOD.BADGE)(editorView.state, editorView.dispatch);
+            }
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [api, editorView, node, getPos, drafting, hasOpenDraft]);
+  if (!(annotationState !== null && annotationState !== void 0 && annotationState.isVisible) || node.type.name !== 'extension' || !(api !== null && api !== void 0 && (_api$annotation4 = api.annotation) !== null && _api$annotation4 !== void 0 && _api$annotation4.actions.isBlockNodeSupported(node))) {
+    return null;
+  }
+  if (!drafting && !unresolvedIds.length) {
+    return null;
+  }
+  var active = drafting || !annotationState.isInlineCommentViewClosed && annotationState.selectedAnnotations.some(function (_ref3) {
+    var id = _ref3.id;
+    return unresolvedIds.includes(id);
+  });
+  return /*#__PURE__*/_react.default.createElement(_blockNodeBadges.BlockNodeBadges, {
+    element: container
+  }, /*#__PURE__*/_react.default.createElement(_CommentBadgeNext.CommentBadgeNext, {
+    onClick: onClick,
+    status: active ? 'active' : 'default'
+  }));
+};

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -18,7 +18,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntl = require("react-intl");
 var _file = _interopRequireDefault(require("@atlaskit/icon/core/file"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _hooks = require("../../hooks");
 var _placeholderText = require("../../messages/placeholder-text");
@@ -37,23 +36,7 @@ var _excluded = ["url"];
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
-  if ((0, _fg.fg)('platform_editor_nested_mbe_frames')) {
-    return _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer;
-  }
-  var activeFrameSelector = ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")");
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  return (0, _react2.css)(_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, (0, _defineProperty2.default)({}, activeFrameSelector, (0, _react2.css)(
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.extensionFrameContent,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  showMacroInteractionDesignUpdates && _MultiBodiedExtension.removeMarginsAndBorder)));
-};
 var getFramesActiveFrameStyles = function getFramesActiveFrameStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
-  if (!(0, _fg.fg)('platform_editor_nested_mbe_frames')) {
-    return undefined;
-  }
   var activeFrameSelector = "& > .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1, ")");
   return (0, _react2.css)((0, _defineProperty2.default)({}, activeFrameSelector, (0, _react2.css)(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -360,10 +343,10 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2
     "data-testid": "multiBodiedExtension--overlay"
   }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: containerClassNames,
-    css: [/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
-    getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates)
-    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */],
+    className: containerClassNames
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    css: _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer,
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex

package/dist/cjs/media-single/MediaBadges.js

@@ -1,98 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MediaBadges = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _primitives = require("@atlaskit/primitives");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-
-var MEDIA_BADGE_VISIBILITY_BREAKPOINT = 200;
-var containerStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  position: 'absolute',
-  top: 'space.0',
-  right: 'space.0',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "var(--ds-space-200, 16px)",
-  gap: 'space.025',
-  zIndex: 'card',
-  height: 'fit-content',
-  width: 'fit-content',
-  margin: 'space.075'
-});
-
-// The above styles are used for both editor and renderer, and in renderer the
-// document body is the main scroll area. This means it overscrolls the primary
-// toolbar, where the z-index is "2". We have to hack in our own z-index less
-// than that to ensure our badge appears under the toolbar when scrolled.
-var hackedZIndexStyles = (0, _primitives.xcss)({
-  zIndex: '1'
-});
-var resizeOffsetStyles = (0, _primitives.xcss)({
-  right: 'space.150'
-});
-var getBadgeVisible = function getBadgeVisible(width, height) {
-  return width && width < MEDIA_BADGE_VISIBILITY_BREAKPOINT || height && height < MEDIA_BADGE_VISIBILITY_BREAKPOINT ? false : true;
-};
+var _react = _interopRequireDefault(require("react"));
+var _blockNodeBadges = require("../block-node-badges");
+/** Compatibility wrapper for existing media consumers of BlockNodeBadges. */
 var MediaBadges = exports.MediaBadges = function MediaBadges(_ref) {
-  var children = _ref.children,
-    mediaElement = _ref.mediaElement,
+  var mediaElement = _ref.mediaElement,
     mediaWidth = _ref.mediaWidth,
     mediaHeight = _ref.mediaHeight,
+    children = _ref.children,
     extendedResizeOffset = _ref.extendedResizeOffset,
-    _ref$useMinimumZIndex = _ref.useMinimumZIndex,
-    useMinimumZIndex = _ref$useMinimumZIndex === void 0 ? false : _ref$useMinimumZIndex;
-  var _useState = (0, _react.useState)(getBadgeVisible(mediaWidth, mediaHeight)),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var observer = new ResizeObserver((0, _debounce.default)(function (entries) {
-      var _entries = (0, _slicedToArray2.default)(entries, 1),
-        entry = _entries[0];
-      var _entry$contentRect = entry.contentRect,
-        width = _entry$contentRect.width,
-        height = _entry$contentRect.height;
-      setVisible(getBadgeVisible(width, height));
-    }));
-    if (mediaElement) {
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      observer.observe(mediaElement);
-    }
-    return function () {
-      observer.disconnect();
-    };
-  }, [mediaElement]);
-  if (typeof children === 'function') {
-    children = children({
-      visible: visible
-    });
-  }
-
-  // delete this block on cleanup of media-perf-uplift-mutation-fix
-  if (!(0, _fg.fg)('media-perf-uplift-mutation-fix')) {
-    // becuase it is wrapped in a fragment, React.Children.count(children) will always be 1.
-    // That makes this check a source of late mutations that we don't need.
-    if (!mediaElement || _react.default.Children.count(children) === 0) {
-      return null;
-    }
-  }
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    as: "div",
-    testId: "media-badges",
-    "data-media-badges": "true",
-    contentEditable: false
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    xcss: [containerStyles, useMinimumZIndex && hackedZIndexStyles, extendedResizeOffset && resizeOffsetStyles]
+    useMinimumZIndex = _ref.useMinimumZIndex;
+  return /*#__PURE__*/_react.default.createElement(_blockNodeBadges.BlockNodeBadges, {
+    element: mediaElement,
+    width: mediaWidth,
+    height: mediaHeight,
+    extendedResizeOffset: extendedResizeOffset,
+    useMinimumZIndex: useMinimumZIndex
   }, children);
 };

package/dist/cjs/monitoring/error.js

@@ -27,7 +27,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "128.3.0";
+var packageVersion = "128.3.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/react-node-view/getInlineNodeViewProducer.js

@@ -81,22 +81,9 @@ function createNodeView(_ref) {
       extraComponentProps: extraComponentProps
     }), domRef, key);
   }
-  var _getPerformanceOption = (0, _utils.getPerformanceOptions)(nodeViewParams.view),
-    samplingRate = _getPerformanceOption.samplingRate,
-    slowThreshold = _getPerformanceOption.slowThreshold,
-    trackingEnabled = _getPerformanceOption.trackingEnabled;
-  trackingEnabled && (0, _utils.startMeasureReactNodeViewRendered)({
-    nodeTypeName: currentNode.type.name
-  });
 
   // We render the component while creating the node view
   renderComponent();
-  trackingEnabled && (0, _utils.stopMeasureReactNodeViewRendered)({
-    nodeTypeName: currentNode.type.name,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    samplingRate: samplingRate,
-    slowThreshold: slowThreshold
-  });
   var extraNodeViewPropsWithStopEvent = _objectSpread({}, extraNodeViewProps);
 
   // https://prosemirror.net/docs/ref/#view.NodeView

package/dist/cjs/react-node-view/index.js

@@ -32,7 +32,6 @@ var _analytics = require("../analytics");
 var _coreUtils = require("../core-utils");
 var _eventDispatcher = require("../event-dispatcher");
 var _ErrorBoundary = require("../ui/ErrorBoundary");
-var _utils = require("../utils");
 var _analytics2 = require("../utils/analytics");
 var _generateUniqueNodeKey = require("./generateUniqueNodeKey");
 var _getInlineNodeViewProducer = require("./getInlineNodeViewProducer");
@@ -112,13 +111,6 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
       // nodeView if DOM structure has nested plain "div"s, it doesn't see the
       // difference between them and it kills the nodeView
       this.domRef.classList.add("".concat(this.node.type.name, "View-content-wrap"));
-      var _getPerformanceOption = (0, _utils.getPerformanceOptions)(this.view),
-        samplingRate = _getPerformanceOption.samplingRate,
-        slowThreshold = _getPerformanceOption.slowThreshold,
-        trackingEnabled = _getPerformanceOption.trackingEnabled;
-      trackingEnabled && (0, _utils.startMeasureReactNodeViewRendered)({
-        nodeTypeName: this.node.type.name
-      });
       if (!shouldSkipInitRender) {
         this.renderReactComponent(function () {
           return _this2.render(_this2.reactComponentProps, _this2.handleRef);
@@ -139,12 +131,6 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
           }
         }
       }
-      trackingEnabled && (0, _utils.stopMeasureReactNodeViewRendered)({
-        nodeTypeName: this.node.type.name,
-        dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-        samplingRate: samplingRate,
-        slowThreshold: slowThreshold
-      });
       return this;
     }
 

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

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "128.3.0";
+var packageVersion = "128.3.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({