@atlaskit/editor-common 128.3.2 → 128.4.0

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

@@ -50,14 +50,12 @@ export let 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";
@@ -116,7 +114,6 @@ export let 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";
@@ -172,18 +169,9 @@ export let 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/es2019/block-node-badges.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+import { Box, xcss } from '@atlaskit/primitives';
+const BADGE_VISIBILITY_BREAKPOINT = 200;
+const containerStyles = 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.
+const hackedZIndexStyles = xcss({
+  zIndex: '1'
+});
+const resizeOffsetStyles = xcss({
+  right: 'space.150'
+});
+const getBadgeVisible = (width, height) => {
+  return width && width < BADGE_VISIBILITY_BREAKPOINT || height && height < BADGE_VISIBILITY_BREAKPOINT ? false : true;
+};
+export const BlockNodeBadges = ({
+  children,
+  element,
+  width,
+  height,
+  extendedResizeOffset,
+  useMinimumZIndex = false
+}) => {
+  const [visible, setVisible] = useState(getBadgeVisible(width, height));
+  useEffect(() => {
+    const observer = new ResizeObserver(debounce(entries => {
+      const [entry] = entries;
+      const {
+        width,
+        height
+      } = entry.contentRect;
+      setVisible(getBadgeVisible(width, height));
+    }));
+    if (element) {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      observer.observe(element);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [element]);
+  if (typeof children === 'function') {
+    children = children({
+      visible
+    });
+  }
+
+  // delete this block on cleanup of media-perf-uplift-mutation-fix
+  if (!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.Children.count(children) === 0) {
+      return null;
+    }
+  }
+  return /*#__PURE__*/React.createElement(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/es2019/extensibility/Extension/Extension/index.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -17,6 +17,7 @@ import { NodeViewContentHole } from '../../../react-node-view/NodeViewContentHol
 import { overflowShadow } from '../../../ui';
 import { calculateBreakoutStyles } from '../../../utils';
 import { shouldExtensionBreakout } from '../../utils/should-extension-breakout';
+import { ExtensionCommentBadge } from '../ExtensionCommentBadge';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { isEmptyBodiedMacro } from './extension-utils';
@@ -52,6 +53,13 @@ function ExtensionWithPluginState(props) {
     isLivePageViewMode,
     hideConfigureLabel
   } = props;
+  const [container, setContainer] = useState(null);
+  const handleContainerRef = useCallback(element => {
+    handleRef === null || handleRef === void 0 ? void 0 : handleRef(element);
+    if (fg('cc_maui_annotations_on_extensions')) {
+      setContainer(element);
+    }
+  }, [handleRef]);
   const {
     showMacroInteractionDesignUpdates
   } = macroInteractionDesignFeatureFlags || {};
@@ -156,7 +164,7 @@ function ExtensionWithPluginState(props) {
     hideConfigureLabel: hideConfigureLabel
   }), 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
     ,
@@ -216,7 +224,13 @@ function ExtensionWithPluginState(props) {
     className: contentClassNames
   }, jsx(NodeViewContentHole, {
     ref: handleContentDOMRef
-  }))))));
+  })))), fg('cc_maui_annotations_on_extensions') && node.type.name === 'extension' && container && (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.annotation) && jsx(ExtensionCommentBadge, {
+    api: pluginInjectionApi,
+    node: node,
+    getPos: getPos,
+    editorView: view,
+    container: container
+  })));
 }
 const Extension = props => {
   const {

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

@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo } from 'react';
+import { VIEW_METHOD } from '../../analytics';
+import { BlockNodeBadges } from '../../block-node-badges';
+import { useSharedPluginStateWithSelector } from '../../hooks';
+import { CommentBadgeNext } from '../../media-single/CommentBadgeNext';
+// 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.
+export const ExtensionCommentBadge = ({
+  api,
+  editorView,
+  node,
+  getPos,
+  container
+}) => {
+  var _api$annotation4;
+  const {
+    annotationState
+  } = useSharedPluginStateWithSelector(api, ['annotation'], states => ({
+    annotationState: states.annotationState
+  }));
+  const drafting = Boolean((annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting) && node.attrs.localId && node.attrs.localId === annotationState.targetNodeId);
+  const hasOpenDraft = Boolean(annotationState === null || annotationState === void 0 ? void 0 : annotationState.isDrafting);
+  const unresolvedIds = useMemo(() => node.marks.filter(mark => mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false).map(mark => mark.attrs.id), [node.marks, annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations]);
+  const onClick = useCallback(async event => {
+    var _api$annotation, _api$annotation2;
+    event.preventDefault();
+    event.stopPropagation();
+    if (drafting) {
+      return;
+    }
+    if (hasOpenDraft && !(await (api === null || api === void 0 ? void 0 : (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : _api$annotation.actions.requestCloseInlineComment()))) {
+      return;
+    }
+    // Resolve the current position after the asynchronous discard confirmation.
+    const pos = getPos();
+    if (typeof pos !== 'number' || !Number.isFinite(pos) || pos < 0 || pos >= editorView.state.doc.content.size) {
+      return;
+    }
+    const 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)) {
+      var _api$annotation3;
+      api === null || api === void 0 ? void 0 : (_api$annotation3 = api.annotation) === null || _api$annotation3 === void 0 ? void 0 : _api$annotation3.actions.showCommentForBlockNode(currentNode, VIEW_METHOD.BADGE)(editorView.state, editorView.dispatch);
+    }
+  }, [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;
+  }
+  const active = drafting || !annotationState.isInlineCommentViewClosed && annotationState.selectedAnnotations.some(({
+    id
+  }) => unresolvedIds.includes(id));
+  return /*#__PURE__*/React.createElement(BlockNodeBadges, {
+    element: container
+  }, /*#__PURE__*/React.createElement(CommentBadgeNext, {
+    onClick: onClick,
+    status: active ? 'active' : 'default'
+  }));
+};

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

@@ -1,84 +1,17 @@
-import React, { useEffect, useState } from 'react';
-import debounce from 'lodash/debounce';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Box, xcss } from '@atlaskit/primitives';
-const MEDIA_BADGE_VISIBILITY_BREAKPOINT = 200;
-const containerStyles = 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.
-const hackedZIndexStyles = xcss({
-  zIndex: '1'
-});
-const resizeOffsetStyles = xcss({
-  right: 'space.150'
-});
-const getBadgeVisible = (width, height) => {
-  return width && width < MEDIA_BADGE_VISIBILITY_BREAKPOINT || height && height < MEDIA_BADGE_VISIBILITY_BREAKPOINT ? false : true;
-};
+import React from 'react';
+import { BlockNodeBadges } from '../block-node-badges';
+/** Compatibility wrapper for existing media consumers of BlockNodeBadges. */
 export const MediaBadges = ({
-  children,
   mediaElement,
   mediaWidth,
   mediaHeight,
+  children,
   extendedResizeOffset,
-  useMinimumZIndex = false
-}) => {
-  const [visible, setVisible] = useState(getBadgeVisible(mediaWidth, mediaHeight));
-  useEffect(() => {
-    const observer = new ResizeObserver(debounce(entries => {
-      const [entry] = entries;
-      const {
-        width,
-        height
-      } = entry.contentRect;
-      setVisible(getBadgeVisible(width, height));
-    }));
-    if (mediaElement) {
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      observer.observe(mediaElement);
-    }
-    return () => {
-      observer.disconnect();
-    };
-  }, [mediaElement]);
-  if (typeof children === 'function') {
-    children = children({
-      visible
-    });
-  }
-
-  // delete this block on cleanup of media-perf-uplift-mutation-fix
-  if (!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.Children.count(children) === 0) {
-      return null;
-    }
-  }
-  return /*#__PURE__*/React.createElement(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);
-};
+  useMinimumZIndex
+}) => /*#__PURE__*/React.createElement(BlockNodeBadges, {
+  element: mediaElement,
+  width: mediaWidth,
+  height: mediaHeight,
+  extendedResizeOffset: extendedResizeOffset,
+  useMinimumZIndex: useMinimumZIndex
+}, children);

package/dist/es2019/monitoring/error.js

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

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

@@ -5,7 +5,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { isSSR } from '../core-utils/is-ssr';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
-import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
+import { analyticsEventKey } from '../utils';
 import { getBrowserInfo } from '../utils/browser';
 import { ZERO_WIDTH_SPACE } from '../whitespace';
 import { generateUniqueNodeKey } from './generateUniqueNodeKey';
@@ -71,23 +71,9 @@ function createNodeView({
       extraComponentProps
     }), domRef, key);
   }
-  const {
-    samplingRate,
-    slowThreshold,
-    trackingEnabled
-  } = getPerformanceOptions(nodeViewParams.view);
-  trackingEnabled && startMeasureReactNodeViewRendered({
-    nodeTypeName: currentNode.type.name
-  });
 
   // We render the component while creating the node view
   renderComponent();
-  trackingEnabled && stopMeasureReactNodeViewRendered({
-    nodeTypeName: currentNode.type.name,
-    dispatchAnalyticsEvent,
-    samplingRate,
-    slowThreshold
-  });
   const extraNodeViewPropsWithStopEvent = {
     ...extraNodeViewProps
   };

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

@@ -8,7 +8,6 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { isSSR } from '../core-utils';
 import { createDispatch } from '../event-dispatcher';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
-import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
 import { analyticsEventKey } from '../utils/analytics';
 import { generateUniqueNodeKey } from './generateUniqueNodeKey';
 export { getInlineNodeViewProducer, inlineNodeViewClassname } from './getInlineNodeViewProducer';
@@ -79,14 +78,6 @@ export default class ReactNodeView {
     // 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(`${this.node.type.name}View-content-wrap`);
-    const {
-      samplingRate,
-      slowThreshold,
-      trackingEnabled
-    } = getPerformanceOptions(this.view);
-    trackingEnabled && startMeasureReactNodeViewRendered({
-      nodeTypeName: this.node.type.name
-    });
     if (!shouldSkipInitRender) {
       this.renderReactComponent(() => this.render(this.reactComponentProps, this.handleRef));
 
@@ -105,12 +96,6 @@ export default class ReactNodeView {
         }
       }
     }
-    trackingEnabled && stopMeasureReactNodeViewRendered({
-      nodeTypeName: this.node.type.name,
-      dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-      samplingRate,
-      slowThreshold
-    });
     return this;
   }
 

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "128.3.1";
+const packageVersion = "128.3.2";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/es2019/utils/index.js

@@ -86,9 +86,6 @@ getDistortedDurationMonitor,
  */
 measureRender } from './performance/measure-render';
 export { startMeasure, stopMeasure, clearMeasure } from './performance/measure';
-export { TTI_FROM_INVOCATION_SEVERITY_THRESHOLD_DEFAULTS } from './performance/TTI_FROM_INVOCATION_SEVERITY_THRESHOLD_DEFAULTS';
-export { TTI_SEVERITY_THRESHOLD_DEFAULTS } from './performance/TTI_SEVERITY_THRESHOLD_DEFAULTS';
-export { measureTTI, getTTISeverity } from './performance/measure-tti';
 /**
  * @private
  * @deprecated
@@ -121,8 +118,6 @@ export { isTextInput } from './is-text-input';
 export { ZERO_WIDTH_SPACE, ZERO_WIDTH_JOINER } from '../whitespace';
 export { shouldForceTracking } from './should-force-tracking';
 export { getModeFromTheme } from './getModeFromTheme';
-export { getPerformanceOptions, stopMeasureReactNodeViewRendered } from './get-performance-options';
-export { startMeasureReactNodeViewRendered } from './startMeasureReactNodeViewRendered';
 export { sniffUserBrowserExtensions } from './browser-extensions';
 export { RenderCountProfiler, PROFILER_KEY } from './profiler/render-count';
 export { validateADFEntity, validationErrorHandler } from './validate-using-spec';

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

@@ -50,14 +50,12 @@ export var 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";
@@ -116,7 +114,6 @@ export var 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";
@@ -172,18 +169,9 @@ export var 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/esm/block-node-badges.js

@@ -0,0 +1,88 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+import { Box, xcss } from '@atlaskit/primitives';
+var BADGE_VISIBILITY_BREAKPOINT = 200;
+var containerStyles = 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 = xcss({
+  zIndex: '1'
+});
+var resizeOffsetStyles = xcss({
+  right: 'space.150'
+});
+var getBadgeVisible = function getBadgeVisible(width, height) {
+  return width && width < BADGE_VISIBILITY_BREAKPOINT || height && height < BADGE_VISIBILITY_BREAKPOINT ? false : true;
+};
+export var 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 = useState(getBadgeVisible(width, height)),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  useEffect(function () {
+    var observer = new ResizeObserver(debounce(function (entries) {
+      var _entries = _slicedToArray(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 (!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.Children.count(children) === 0) {
+      return null;
+    }
+  }
+  return /*#__PURE__*/React.createElement(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/esm/extensibility/Extension/Extension/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["type"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -9,7 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -22,6 +23,7 @@ import { NodeViewContentHole } from '../../../react-node-view/NodeViewContentHol
 import { overflowShadow } from '../../../ui';
 import { calculateBreakoutStyles } from '../../../utils';
 import { shouldExtensionBreakout } from '../../utils/should-extension-breakout';
+import { ExtensionCommentBadge } from '../ExtensionCommentBadge';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { isEmptyBodiedMacro } from './extension-utils';
@@ -55,6 +57,16 @@ function ExtensionWithPluginState(props) {
     pluginInjectionApi = props.pluginInjectionApi,
     isLivePageViewMode = props.isLivePageViewMode,
     hideConfigureLabel = props.hideConfigureLabel;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    container = _useState2[0],
+    setContainer = _useState2[1];
+  var handleContainerRef = useCallback(function (element) {
+    handleRef === null || handleRef === void 0 || handleRef(element);
+    if (fg('cc_maui_annotations_on_extensions')) {
+      setContainer(element);
+    }
+  }, [handleRef]);
   var _ref = macroInteractionDesignFeatureFlags || {},
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   var isLegacyContentMacroExtension = function isLegacyContentMacroExtension(extensionNode) {
@@ -149,7 +161,7 @@ function ExtensionWithPluginState(props) {
     hideConfigureLabel: hideConfigureLabel
   }), 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
     ,
@@ -213,7 +225,13 @@ function ExtensionWithPluginState(props) {
     className: contentClassNames
   }, jsx(NodeViewContentHole, {
     ref: handleContentDOMRef
-  }))))));
+  })))), fg('cc_maui_annotations_on_extensions') && node.type.name === 'extension' && container && (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.annotation) && jsx(ExtensionCommentBadge, {
+    api: pluginInjectionApi,
+    node: node,
+    getPos: getPos,
+    editorView: view,
+    container: container
+  })));
 }
 var Extension = function Extension(props) {
   var pluginInjectionApi = props.pluginInjectionApi;