@atlaskit/renderer 148.1.0 → 149.0.1

package/dist/es2019/steps/index.js

@@ -219,6 +219,24 @@ export function resolvePos(node, offset, findEnd = false) {
   }
   return resolvedPos + offset;
 }
+function getSelectedCommentTargetPosition(range) {
+  const {
+    startContainer,
+    startOffset,
+    endContainer,
+    endOffset
+  } = range;
+  if (startContainer !== endContainer || endOffset !== startOffset + 1) {
+    return false;
+  }
+  const selectedNode = startContainer.childNodes[startOffset];
+  if (!selectedNode || !isElementNode(selectedNode) || selectedNode.dataset.inlineCommentsTarget !== 'true' || !isPositionPointer(selectedNode)) {
+    return false;
+  }
+
+  // Subtract 1 from the renderer start position to get the position before the extension node.
+  return getStartPos(selectedNode) - 1;
+}
 export function getPosFromRange(range) {
   const {
     startContainer,
@@ -226,6 +244,13 @@ export function getPosFromRange(range) {
     endContainer,
     endOffset
   } = range;
+  const selectedCommentTargetPosition = fg('cc_maui_annotations_on_extensions') && getSelectedCommentTargetPosition(range);
+  if (selectedCommentTargetPosition !== false) {
+    return {
+      from: selectedCommentTargetPosition,
+      to: selectedCommentTargetPosition
+    };
+  }
   const possibleMediaOrMediaSingleElement = findParent(startContainer);
 
   // Video hover targets return media single, not media, thus, the extra check in condition.

package/dist/es2019/ui/Renderer/RendererStyleContainer.js

@@ -2967,7 +2967,7 @@ export const RendererStyleContainer = props => {
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
-    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, fg('platform_renderer_ssr_block_margin_fix') && [blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles], appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, tableContentModeScopedStyles, tableContentModeExtensionContainmentStyles, tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, blockSsrMarginStyles, layoutBlockSsrMarginStyles, browser.safari && codeBlockInListSsrMarginSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max') && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -57,7 +57,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "148.0.4";
+const packageVersion = "149.0.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/ui/annotations/contexts/AnnotationRangeContext.js

@@ -1,4 +1,5 @@
-import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useReducer, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 
 // oxlint-disable-next-line eslint/no-redeclare
 
@@ -117,8 +118,10 @@ export const AnnotationRangeDispatchContext = /*#__PURE__*/createContext({
 });
 export const AnnotationRangeProviderInner = ({
   children,
-  allowCommentsOnMedia
+  allowCommentsOnMedia,
+  hasBlockNodeSupport
 }) => {
+  const extensionCommentsEnabled = !!hasBlockNodeSupport && fg('cc_maui_annotations_on_extensions');
   const [{
     selectionRange,
     hoverRange,
@@ -138,21 +141,32 @@ export const AnnotationRangeProviderInner = ({
     type: 'setSelection',
     range
   }), []);
+  const hoverDraftRangeRef = useRef(hoverDraftRange);
+  hoverDraftRangeRef.current = hoverDraftRange;
   const setHoverTarget = useCallback(target => {
-    // the HoverComponent expects an element deeply nested inside media, these classes work with the current implementation
-    const mediaNode = target.querySelector('.media-card-inline-player, .media-file-card-view');
-    if (!mediaNode) {
+    const draftRange = hoverDraftRangeRef.current;
+    const draftTarget = draftRange === null || draftRange === void 0 ? void 0 : draftRange.startContainer.childNodes[draftRange.startOffset];
+    if (extensionCommentsEnabled && draftTarget instanceof HTMLElement && draftTarget.matches('.ak-renderer-extension[data-inline-comments-target="true"]')) {
+      // Keep the composer callbacks bound to the chart chosen when its draft opened.
+      return;
+    }
+    // The HoverComponent expects an element deeply nested inside media or the eligible
+    // block node's wrapper. Each selector is only included when its comment type is
+    // supported, so hover targeting never activates on an ineligible block node.
+    const selectors = [allowCommentsOnMedia && '.media-card-inline-player, .media-file-card-view', extensionCommentsEnabled && '.ak-renderer-extension[data-inline-comments-target="true"]'].filter(selector => Boolean(selector)).join(', ');
+    const hoverableNode = extensionCommentsEnabled && target.matches('.ak-renderer-extension[data-inline-comments-target="true"]') ? target : selectors ? target.querySelector(selectors) : null;
+    if (!hoverableNode) {
       return;
     }
-    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- range for media hover highlight
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- range for media/extension hover highlight
     const range = document.createRange();
-    range.setStartBefore(mediaNode);
-    range.setEndAfter(mediaNode);
+    range.setStartBefore(hoverableNode);
+    range.setEndAfter(hoverableNode);
     dispatch({
       type: 'setHover',
       range
     });
-  }, []);
+  }, [allowCommentsOnMedia, extensionCommentsEnabled]);
   const promoteSelectionToDraft = useCallback(position => {
     dispatch({
       type: 'promoteSelectionToDraft',
@@ -191,12 +205,12 @@ export const AnnotationRangeProviderInner = ({
     clearSelectionRange,
     clearHoverRange,
     setSelectionRange,
-    setHoverTarget: !!allowCommentsOnMedia ? setHoverTarget : undefined,
+    setHoverTarget: allowCommentsOnMedia || extensionCommentsEnabled ? setHoverTarget : undefined,
     promoteSelectionToDraft,
     promoteHoverToDraft,
     clearSelectionDraft,
     clearHoverDraft
-  }), [allowCommentsOnMedia, clearSelectionRange, clearHoverRange, setSelectionRange, setHoverTarget, promoteSelectionToDraft, promoteHoverToDraft, clearSelectionDraft, clearHoverDraft]);
+  }), [allowCommentsOnMedia, extensionCommentsEnabled, clearSelectionRange, clearHoverRange, setSelectionRange, setHoverTarget, promoteSelectionToDraft, promoteHoverToDraft, clearSelectionDraft, clearHoverDraft]);
   return /*#__PURE__*/React.createElement(AnnotationRangeStateContext.Provider, {
     value: stateData
   }, /*#__PURE__*/React.createElement(AnnotationRangeDispatchContext.Provider, {
@@ -206,6 +220,7 @@ export const AnnotationRangeProviderInner = ({
 export const AnnotationRangeProvider = ({
   children,
   allowCommentsOnMedia,
+  hasBlockNodeSupport,
   isNestedRender
 }) => {
   /*
@@ -214,7 +229,8 @@ export const AnnotationRangeProvider = ({
    * and we need the original context to create annotations on extensions.
    */
   return isNestedRender ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(AnnotationRangeProviderInner, {
-    allowCommentsOnMedia: allowCommentsOnMedia
+    allowCommentsOnMedia: allowCommentsOnMedia,
+    hasBlockNodeSupport: hasBlockNodeSupport
   }, children);
 };
 export const useAnnotationRangeState = () => {

package/dist/es2019/ui/annotations/element/extension.compiled.css

@@ -0,0 +1,6 @@
+._154iidpf{top:0}
+._1ltvidpf{left:0}
+._1xi2idpf{right:0}
+._94n5idpf{bottom:0}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}

package/dist/es2019/ui/annotations/element/extension.js

@@ -0,0 +1,26 @@
+/* extension.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./extension.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const styles = {
+  anchor: "_kqswstnw _154iidpf _1xi2idpf _94n5idpf _1ltvidpf _lcxvglyw"
+};
+
+/** Full-chart anchors for comment navigation, without wrapping or intercepting the iframe. */
+export const ExtensionAnnotation = ({
+  id,
+  dataAttributes,
+  markRef
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  ref: markRef,
+  "data-id": dataAttributes['data-id'],
+  "data-mark-type": dataAttributes['data-mark-type'],
+  "data-mark-annotation-type": dataAttributes['data-mark-annotation-type'],
+  "data-mark-annotation-state": dataAttributes['data-mark-annotation-state'],
+  "data-block-mark": dataAttributes['data-block-mark'],
+  "data-renderer-mark": dataAttributes['data-renderer-mark'],
+  "data-has-focus": dataAttributes['data-has-focus'],
+  "data-is-hovered": dataAttributes['data-is-hovered'],
+  className: ax([styles.anchor])
+});

package/dist/es2019/ui/annotations/element/index.js

@@ -12,7 +12,8 @@ const MarkElement = ({
   children,
   dataAttributes,
   id,
-  useBlockLevel
+  useBlockLevel,
+  isExtension
 }) => {
   const updateSubscriber = useInlineCommentSubscriberContext();
   const states = useContext(InlineCommentsStateContext);
@@ -93,7 +94,8 @@ const MarkElement = ({
     hasFocus: hasFocus,
     isHovered: isHovered,
     state: states[id],
-    useBlockLevel: useBlockLevel
+    useBlockLevel: useBlockLevel,
+    isExtension: isExtension
   }, children);
 };
 export { MarkElement };

package/dist/es2019/ui/annotations/element/mark.js

@@ -12,6 +12,7 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema/annotation';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { inlineCommentMessages } from '../../../messages';
 import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
+import { ExtensionAnnotation } from './extension';
 const markStyles = css({
   color: 'inherit',
   backgroundColor: 'unset',
@@ -130,7 +131,8 @@ export const MarkComponent = ({
   hasFocus,
   isHovered,
   onClick,
-  useBlockLevel
+  useBlockLevel,
+  isExtension
 }) => {
   const intl = useIntl();
   const annotationIds = useMemo(() => [...new Set([...annotationParentIds, id])], [id, annotationParentIds]);
@@ -223,6 +225,14 @@ export const MarkComponent = ({
     'aria-details': annotationIds.join(', '),
     ...desktopAccessibilityAttributes
   };
+  if (isExtension && fg('cc_maui_annotations_on_extensions')) {
+    // The chart's badge owns interaction. Anchors only supply geometry and annotation state.
+    return jsx(ExtensionAnnotation, {
+      id: id,
+      dataAttributes: overriddenData,
+      markRef: id === currentSelectedAnnotationId ? markRef : undefined
+    });
+  }
   return jsx(useBlockLevel ? 'div' : 'mark', {
     ref: id === currentSelectedAnnotationId ? markRef : undefined,
     id,

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

@@ -30,7 +30,7 @@ export const AnnotationsPositionContext = /*#__PURE__*/React.createContext({
   startPos: 1
 });
 export const AnnotationsWrapperInner = props => {
-  var _providers$inlineComm, _providers$inlineComm2;
+  var _providers$inlineComm, _providers$inlineComm2, _providers$inlineComm3;
   const {
     children,
     rendererRef,
@@ -51,6 +51,7 @@ export const AnnotationsWrapperInner = props => {
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/React.createElement(AnnotationRangeProvider, {
     allowCommentsOnMedia: (_providers$inlineComm = providers === null || providers === void 0 ? void 0 : (_providers$inlineComm2 = providers.inlineComment) === null || _providers$inlineComm2 === void 0 ? void 0 : _providers$inlineComm2.allowCommentsOnMedia) !== null && _providers$inlineComm !== void 0 ? _providers$inlineComm : false,
+    hasBlockNodeSupport: Boolean(providers === null || providers === void 0 ? void 0 : (_providers$inlineComm3 = providers.inlineComment) === null || _providers$inlineComm3 === void 0 ? void 0 : _providers$inlineComm3.isBlockNodeSupported),
     isNestedRender: isNestedRender
   }, /*#__PURE__*/React.createElement(AnnotationHoverContext, null, /*#__PURE__*/React.createElement(AnnotationsContextWrapper, {
     createAnalyticsEvent: createAnalyticsEvent,

package/dist/esm/actions/index.js

@@ -87,9 +87,10 @@ var RendererActions = /*#__PURE__*/function () {
       var to;
       var nodePos;
       var step;
+      var schema = this.schema;
       this.doc.descendants(function (node, pos) {
         var found = mark.isInSet(node.marks);
-        if (found && node.type.name === 'media') {
+        if (found && isBlockAnnotationTarget(node, schema)) {
           nodePos = pos;
         }
         if (found && !from) {
@@ -184,13 +185,12 @@ var RendererActions = /*#__PURE__*/function () {
     key: "isRangeAnnotatable",
     value: function isRangeAnnotatable(range) {
       try {
-        var _startContainer$paren, _endContainer$parentE;
         if (!range) {
           return false;
         }
         var startContainer = range.startContainer,
           endContainer = range.endContainer;
-        if ((_startContainer$paren = startContainer.parentElement) !== null && _startContainer$paren !== void 0 && _startContainer$paren.closest('.ak-renderer-extension') || (_endContainer$parentE = endContainer.parentElement) !== null && _endContainer$parentE !== void 0 && _endContainer$parentE.closest('.ak-renderer-extension')) {
+        if (this.isInsideNestedExtensionRenderer(startContainer) || this.isInsideNestedExtensionRenderer(endContainer)) {
           return false;
         }
         return this.isValidAnnotationRange(range);
@@ -206,6 +206,38 @@ var RendererActions = /*#__PURE__*/function () {
       }
     }
 
+    /**
+     * A range only threatens a nested renderer's own document (e.g. a bodiedExtension's macro
+     * body, which renders its own nested `<Renderer>`) when it sits inside that nested renderer's
+     * `.ak-renderer-document`. Landing directly on the extension's own outer wrapper -- with no
+     * nested document in between -- must stay annotatable so the whole chart/extension can be
+     * targeted (MAUI-1256), rather than being rejected outright the way any range touching
+     * `.ak-renderer-extension` previously was.
+     *
+     * Behind `cc_maui_annotations_on_extensions` -- the same gate MAUI-1255 added for extension
+     * node-mark support -- to preserve the previous behaviour (reject anything touching
+     * `.ak-renderer-extension`) while the feature is off.
+     */
+  }, {
+    key: "isInsideNestedExtensionRenderer",
+    value: function isInsideNestedExtensionRenderer(container) {
+      // Preserve the legacy parent-based rejection while the gate is disabled.
+      if (!fg('cc_maui_annotations_on_extensions')) {
+        var _container$parentElem;
+        return !!((_container$parentElem = container.parentElement) !== null && _container$parentElem !== void 0 && _container$parentElem.closest('.ak-renderer-extension'));
+      }
+      var element = container instanceof Element ? container : container.parentElement;
+      if (!element) {
+        return false;
+      }
+      var extensionAncestor = element.closest('.ak-renderer-extension');
+      if (!extensionAncestor) {
+        return false;
+      }
+      var nestedDocument = element.closest('.ak-renderer-document');
+      return !!nestedDocument && extensionAncestor.contains(nestedDocument);
+    }
+
     // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
     /**
      * This is replaced by `isRangeAnnotatable`.

package/dist/esm/react/index.js

@@ -97,6 +97,11 @@ var ReactSerializer = /*#__PURE__*/function () {
         if (shouldSkipLinkMark(mark) || shouldSkipBorderMark(mark)) {
           return content;
         }
+        // Extension annotations are sibling anchors inside the stable extension shell.
+        // Wrapping the extension here would remount its iframe whenever marks change.
+        if (node.type.name === 'extension' && mark.type.name === 'annotation' && _this.allowAnnotations && fg('cc_maui_annotations_on_extensions')) {
+          return content;
+        }
         return _this.renderMark(markToReact(mark), _this.withMediaMarkProps(node, mark, _this.getMarkProps(mark, [], node)), "".concat(mark.type.name, "-").concat(index), content);
       }, serializedContent);
       return withExpandBodyBlock(node, currentPath, index, serialized);
@@ -549,6 +554,9 @@ var ReactSerializer = /*#__PURE__*/function () {
       var _this$getExtensionHei;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
+        allowAnnotations: this.allowAnnotations,
+        allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper,
+        extensionNode: node,
         extensionViewportSizes: this.extensionViewportSizes,
         hideExtensionKeysWhilePending: this.hideExtensionKeysWhilePending,
         nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node),

package/dist/esm/react/marks/annotation.js

@@ -17,6 +17,7 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
     annotationParentIds = _ref$annotationParent === void 0 ? [] : _ref$annotationParent,
     allowAnnotations = _ref.allowAnnotations,
     useBlockLevel = _ref.useBlockLevel,
+    isExtension = _ref.isExtension,
     isMediaInline = _ref.isMediaInline;
   var data = _objectSpread(_objectSpread({}, dataAttributes), buildAnnotationMarkDataAttributes({
     id: id,
@@ -36,7 +37,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
       dataAttributes: data,
       annotationParentIds: annotationParentIds,
       annotationType: annotationType,
-      useBlockLevel: useBlockLevel
+      useBlockLevel: useBlockLevel,
+      isExtension: isExtension
     }, children);
   }
   return (

package/dist/esm/react/nodes/extension-comments.compiled.css

@@ -0,0 +1,4 @@
+._154iu2gc{top:var(--ds-space-100,8px)}
+._1xi2u2gc{right:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/esm/react/nodes/extension-comments.js

@@ -0,0 +1,135 @@
+/* extension-comments.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./extension-comments.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { AnnotationMarkStates, AnnotationTypes } from '@atlaskit/adf-schema/annotation';
+import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
+import { CommentBadgeNext } from '@atlaskit/editor-common/media-single';
+import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
+import { useAnnotationManagerState } from '../../ui/annotations/contexts/AnnotationManagerContext';
+import { useAnnotationRangeState } from '../../ui/annotations/contexts/AnnotationRangeContext';
+import { useInlineCommentSubscriberContext } from '../../ui/annotations/hooks/use-inline-comment-subscriber';
+import { useInlineCommentsFilter } from '../../ui/annotations/hooks/use-inline-comments-filter';
+import AnnotationComponent from '../marks/annotation';
+var containerStyles = null;
+var annotationParentIds = [];
+var annotationDataAttributes = {
+  'data-renderer-mark': true,
+  'data-block-mark': true
+};
+var badgeStyles = null;
+var ExtensionCommentsEnabled = function ExtensionCommentsEnabled(_ref) {
+  var marks = _ref.marks,
+    children = _ref.children,
+    enabled = _ref.enabled,
+    allowAnnotations = _ref.allowAnnotations,
+    allowAnnotationsDraftMode = _ref.allowAnnotationsDraftMode,
+    startPos = _ref.startPos;
+  var _useAnnotationRangeSt = useAnnotationRangeState(),
+    hoverDraftDocumentPosition = _useAnnotationRangeSt.hoverDraftDocumentPosition;
+  var isDraft = Boolean(enabled && allowAnnotationsDraftMode && hoverDraftDocumentPosition && hoverDraftDocumentPosition.from + 1 === startPos);
+  var updateSubscriber = useInlineCommentSubscriberContext();
+  var annotationIds = useMemo(function () {
+    var _marks$filter$map;
+    return (_marks$filter$map = marks === null || marks === void 0 ? void 0 : marks.filter(function (mark) {
+      return mark.type.name === 'annotation';
+    }).map(function (mark) {
+      return mark.attrs.id;
+    })) !== null && _marks$filter$map !== void 0 ? _marks$filter$map : [];
+  }, [marks]);
+  var activeIds = useInlineCommentsFilter({
+    annotationIds: annotationIds,
+    filter: {
+      state: AnnotationMarkStates.ACTIVE
+    }
+  });
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedId = _useState2[0],
+    setFocusedId = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    entered = _useState4[0],
+    setEntered = _useState4[1];
+  var _useAnnotationManager = useAnnotationManagerState(),
+    currentSelectedAnnotationId = _useAnnotationManager.currentSelectedAnnotationId;
+  var active = activeIds.some(function (id) {
+    return id === focusedId || id === currentSelectedAnnotationId;
+  });
+  useEffect(function () {
+    if (!updateSubscriber) {
+      return;
+    }
+    var onFocus = function onFocus(payload) {
+      return setFocusedId(payload === null || payload === void 0 ? void 0 : payload.annotationId);
+    };
+    var onBlur = function onBlur() {
+      return setFocusedId(undefined);
+    };
+    updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, onFocus);
+    updateSubscriber.on(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, onBlur);
+    return function () {
+      updateSubscriber.off(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, onFocus);
+      updateSubscriber.off(AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, onBlur);
+    };
+  }, [updateSubscriber]);
+  var onClick = useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    // Anchor the thread to this chart, not an icon inside the badge or a nested renderer.
+    var extension = event.currentTarget.closest('.ak-renderer-extension');
+    if (extension && activeIds.length) {
+      updateSubscriber === null || updateSubscriber === void 0 || updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeIds,
+        eventTarget: extension,
+        eventTargetType: 'extension',
+        viewMethod: VIEW_METHOD.BADGE
+      });
+    }
+  }, [activeIds, updateSubscriber]);
+  var onMouseEnter = useCallback(function () {
+    return setEntered(true);
+  }, []);
+  var onMouseLeave = useCallback(function () {
+    return setEntered(false);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-annotation-draft-mark": isDraft || undefined,
+    "data-renderer-mark": isDraft || undefined,
+    "data-renderer-start-pos": isDraft ? startPos : undefined,
+    className: ax(["_kqswh2mm"])
+  }, children, allowAnnotations && annotationIds.map(function (id) {
+    return /*#__PURE__*/React.createElement(AnnotationComponent, {
+      key: id,
+      id: id,
+      annotationType: AnnotationTypes.INLINE_COMMENT,
+      annotationParentIds: annotationParentIds,
+      allowAnnotations: true,
+      useBlockLevel: true,
+      isExtension: true,
+      dataAttributes: annotationDataAttributes
+    });
+  }), enabled && activeIds.length > 0 && updateSubscriber && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154iu2gc _1xi2u2gc"])
+  }, /*#__PURE__*/React.createElement(CommentBadgeNext, {
+    status: active ? 'active' : entered ? 'entered' : 'default',
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  })));
+};
+
+/** Only node-aware provider-approved extensions receive comment visuals. */
+export var ExtensionComments = function ExtensionComments(props) {
+  if (!props.enabled && !props.allowAnnotations) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+  }
+  return /*#__PURE__*/React.createElement(ExtensionCommentsEnabled, {
+    enabled: props.enabled,
+    allowAnnotations: props.allowAnnotations,
+    allowAnnotationsDraftMode: props.allowAnnotationsDraftMode,
+    startPos: props.startPos,
+    marks: props.marks
+  }, props.children);
+};