@atlaskit/renderer 148.1.0 → 149.0.1

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

@@ -1,10 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
@@ -13,8 +16,12 @@ import { overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { RendererCssClassName } from '../../consts';
+import { ProvidersContext } from '../../ui/annotations/context';
+import { useAnnotationHoverDispatch } from '../../ui/annotations/contexts/AnnotationHoverContext';
+import { useAnnotationRangeDispatch } from '../../ui/annotations/contexts/AnnotationRangeContext';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { calcBreakoutWidthCss } from '../utils/breakout';
+import { ExtensionComments } from './extension-comments';
 var FORGE_EXTENSION_TYPE = 'com.atlassian.ecosystem';
 /**
  * Mirrors `FORGE_INLINE_BODIED_PARAM` in `@atlassian/xen-editor-provider`. Duplicated rather than
@@ -69,7 +76,7 @@ var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_re
   return null;
 };
 export var renderExtension = function renderExtension(content, layout) {
-  var _node$parameters, _node$parameters2;
+  var _node$parameters, _node$parameters2, _options$dataAttribut;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var removeOverflow = arguments.length > 3 ? arguments[3] : undefined;
   var extensionId = arguments.length > 4 ? arguments[4] : undefined;
@@ -157,11 +164,17 @@ export var renderExtension = function renderExtension(content, layout) {
     },
     "data-layout": layout,
     "data-local-id": localId,
+    "data-renderer-start-pos": (_options$dataAttribut = options.dataAttributes) === null || _options$dataAttribut === void 0 ? void 0 : _options$dataAttribut['data-renderer-start-pos'],
     "data-testid": "extension--wrapper",
     "data-node-type": "extension",
+    "data-inline-comments-target": options.isCommentTarget || undefined,
     "data-top-level": isTopLevel || undefined,
     "data-forge-inline": isNativeForgeInline || undefined,
-    "data-migrated-inline": isMigratedInlineBodied || undefined
+    "data-migrated-inline": isMigratedInlineBodied || undefined,
+    onBlur: options.onBlur,
+    onFocus: options.onFocus,
+    onMouseEnter: options.onMouseEnter,
+    onMouseLeave: options.onMouseLeave
   }, jsx("div", {
     tabIndex: options.tabIndex
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -175,6 +188,7 @@ export var renderExtension = function renderExtension(content, layout) {
   }, extensionDiv) : extensionDiv;
 };
 var Extension = function Extension(props) {
+  var _providers$inlineComm, _props$dataAttributes;
   var text = props.text,
     _props$layout = props.layout,
     layout = _props$layout === void 0 ? 'default' : _props$layout,
@@ -187,6 +201,57 @@ var Extension = function Extension(props) {
     nodeHeight = props.nodeHeight,
     localId = props.localId,
     isInsideOfInlineExtension = props.isInsideOfInlineExtension;
+  var providers = useContext(ProvidersContext);
+  var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
+    setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  var _useAnnotationHoverDi = useAnnotationHoverDispatch(),
+    cancelTimeout = _useAnnotationHoverDi.cancelTimeout,
+    initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
+    setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
+  var isBlockNodeSupported = providers === null || providers === void 0 || (_providers$inlineComm = providers.inlineComment) === null || _providers$inlineComm === void 0 ? void 0 : _providers$inlineComm.isBlockNodeSupported;
+  var isCommentTarget = useMemo(function () {
+    return Boolean(fg('cc_maui_annotations_on_extensions') && props.extensionNode && (isBlockNodeSupported === null || isBlockNodeSupported === void 0 ? void 0 : isBlockNodeSupported(props.extensionNode)) === true);
+  }, [props.extensionNode, isBlockNodeSupported]);
+  var isFullPageRenderer = props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width';
+  var onMouseEnter = useCallback(function (event) {
+    cancelTimeout();
+    if (event.buttons === 0) {
+      setHoverTarget === null || setHoverTarget === void 0 || setHoverTarget(event.currentTarget);
+      setIsWithinRange(true);
+    }
+  }, [cancelTimeout, setHoverTarget, setIsWithinRange]);
+  var onMouseLeave = useCallback(function () {
+    return initiateTimeout();
+  }, [initiateTimeout]);
+  var onFocus = useCallback(function (event) {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
+    cancelTimeout();
+    setHoverTarget === null || setHoverTarget === void 0 || setHoverTarget(event.currentTarget);
+    setIsWithinRange(true);
+  }, [cancelTimeout, setHoverTarget, setIsWithinRange]);
+  var onBlur = useCallback(function (event) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      initiateTimeout();
+    }
+  }, [initiateTimeout]);
+  var commentTargetOptions = isCommentTarget && isFullPageRenderer ? {
+    isCommentTarget: true,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  } : {
+    isCommentTarget: isCommentTarget
+  };
+  var commentProps = {
+    enabled: isCommentTarget,
+    allowAnnotations: props.allowAnnotations && fg('cc_maui_annotations_on_extensions'),
+    allowAnnotationsDraftMode: props.allowAnnotationsDraftMode,
+    startPos: (_props$dataAttributes = props.dataAttributes) === null || _props$dataAttributes === void 0 ? void 0 : _props$dataAttributes['data-renderer-start-pos'],
+    marks: props.marks
+  };
   return jsx(ExtensionRenderer
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -199,13 +264,20 @@ var Extension = function Extension(props) {
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/React.isValidElement(result)) {
-        return renderExtension(result, layout, {
+        return renderExtension(jsx(ExtensionComments, {
+          enabled: commentProps.enabled,
+          allowAnnotations: commentProps.allowAnnotations,
+          allowAnnotationsDraftMode: commentProps.allowAnnotationsDraftMode,
+          startPos: commentProps.startPos,
+          marks: commentProps.marks
+        }, result), layout, _objectSpread({
+          dataAttributes: props.dataAttributes,
           isTopLevel: path.length < 1,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
           tabIndex: props.tabIndex,
           rendererAppearance: props.rendererAppearance
-        }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
+        }, commentTargetOptions), undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (e) {
@@ -217,13 +289,20 @@ var Extension = function Extension(props) {
     }
 
     // Always return default content if anything goes wrong
-    return renderExtension(text || 'extension', layout, {
+    return renderExtension(jsx(ExtensionComments, {
+      enabled: commentProps.enabled,
+      allowAnnotations: commentProps.allowAnnotations,
+      allowAnnotationsDraftMode: commentProps.allowAnnotationsDraftMode,
+      startPos: commentProps.startPos,
+      marks: commentProps.marks
+    }, text || 'extension'), layout, _objectSpread({
+      dataAttributes: props.dataAttributes,
       isTopLevel: path.length < 1,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
       tabIndex: props.tabIndex,
       rendererAppearance: props.rendererAppearance
-    }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
+    }, commentTargetOptions), undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });
 };
 var _default_1 = overflowShadow(Extension, {

package/dist/esm/react/nodes/layoutColumn-compiled.js

@@ -9,7 +9,7 @@ import "./layoutColumn-compiled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { WidthProvider } from '@atlaskit/editor-common/ui';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
+
 // localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
 var clearNextSiblingMarginTopStyle = null;
 var verticalAlignMiddleStyles = null;
@@ -30,7 +30,7 @@ export var LayoutSectionCompiled = function LayoutSectionCompiled(props) {
     },
     className: ax([props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", "_1tihidpf _12kpidpf"])
   }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
-    "data-layout-column-start": fg('platform_renderer_ssr_block_margin_fix') ? 'true' : undefined,
+    "data-layout-column-start": "true",
     className: ax(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
   }), props.children));
 };

package/dist/esm/react/nodes/layoutColumn-emotion.js

@@ -14,7 +14,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
 import { css, jsx } from '@emotion/react';
 import { WidthProvider } from '@atlaskit/editor-common/ui';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
+
 // localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
 var clearNextSiblingMarginTopStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -61,7 +61,7 @@ export var LayoutSectionEmotion = function LayoutSectionEmotion(props) {
     // Keep separate: Compiled crashes on ternary/object lookup here.
     props.valign === 'middle' && verticalAlignMiddleStyles, props.valign === 'bottom' && verticalAlignBottomStyles, multipleWrappedImagesStyle]
   }, jsx(WidthProvider, null, jsx("div", {
-    "data-layout-column-start": fg('platform_renderer_ssr_block_margin_fix') ? 'true' : undefined,
+    "data-layout-column-start": "true",
     css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
   }), props.children));
 };

package/dist/esm/react/nodes/table/colgroup.js

@@ -6,7 +6,6 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth, akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useRendererContext } from '../../../renderer-context';
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
@@ -188,7 +187,7 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var skipMinWidth = !!(isInsideOfTable && isInsideOfSyncBlock);
   if (!columnWidths || columnWidths.every(function (width) {
     return width === 0;
-  }) && fg('platform_editor_numbered_column_in_include')) {
+  })) {
     return [];
   }
   var tableColumnResized = isTableColumnResized(columnWidths);

package/dist/esm/steps/index.js

@@ -216,11 +216,34 @@ export function resolvePos(node, offset) {
   }
   return resolvedPos + offset;
 }
+function getSelectedCommentTargetPosition(range) {
+  var startContainer = range.startContainer,
+    startOffset = range.startOffset,
+    endContainer = range.endContainer,
+    endOffset = range.endOffset;
+  if (startContainer !== endContainer || endOffset !== startOffset + 1) {
+    return false;
+  }
+  var 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) {
   var startContainer = range.startContainer,
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
+  var selectedCommentTargetPosition = fg('cc_maui_annotations_on_extensions') && getSelectedCommentTargetPosition(range);
+  if (selectedCommentTargetPosition !== false) {
+    return {
+      from: selectedCommentTargetPosition,
+      to: selectedCommentTargetPosition
+    };
+  }
   var possibleMediaOrMediaSingleElement = findParent(startContainer);
 
   // Video hover targets return media single, not media, thus, the extra check in condition.

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

@@ -2324,7 +2324,7 @@ export var RendererStyleContainer = function 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/esm/ui/Renderer/index.js

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

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

@@ -2,7 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-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
 
@@ -113,7 +114,9 @@ export var AnnotationRangeDispatchContext = /*#__PURE__*/createContext({
 });
 export var AnnotationRangeProviderInner = function AnnotationRangeProviderInner(_ref) {
   var children = _ref.children,
-    allowCommentsOnMedia = _ref.allowCommentsOnMedia;
+    allowCommentsOnMedia = _ref.allowCommentsOnMedia,
+    hasBlockNodeSupport = _ref.hasBlockNodeSupport;
+  var extensionCommentsEnabled = !!hasBlockNodeSupport && fg('cc_maui_annotations_on_extensions');
   var _useReducer = useReducer(reducer, initialState),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     _useReducer2$ = _useReducer2[0],
@@ -141,21 +144,34 @@ export var AnnotationRangeProviderInner = function AnnotationRangeProviderInner(
       range: range
     });
   }, []);
+  var hoverDraftRangeRef = useRef(hoverDraftRange);
+  hoverDraftRangeRef.current = hoverDraftRange;
   var setHoverTarget = useCallback(function (target) {
-    // the HoverComponent expects an element deeply nested inside media, these classes work with the current implementation
-    var mediaNode = target.querySelector('.media-card-inline-player, .media-file-card-view');
-    if (!mediaNode) {
+    var draftRange = hoverDraftRangeRef.current;
+    var 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;
     }
-    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- range for media hover highlight
+    // 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.
+    var selectors = [allowCommentsOnMedia && '.media-card-inline-player, .media-file-card-view', extensionCommentsEnabled && '.ak-renderer-extension[data-inline-comments-target="true"]'].filter(function (selector) {
+      return Boolean(selector);
+    }).join(', ');
+    var 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/extension hover highlight
     var range = document.createRange();
-    range.setStartBefore(mediaNode);
-    range.setEndAfter(mediaNode);
+    range.setStartBefore(hoverableNode);
+    range.setEndAfter(hoverableNode);
     dispatch({
       type: 'setHover',
       range: range
     });
-  }, []);
+  }, [allowCommentsOnMedia, extensionCommentsEnabled]);
   var promoteSelectionToDraft = useCallback(function (position) {
     dispatch({
       type: 'promoteSelectionToDraft',
@@ -195,13 +211,13 @@ export var AnnotationRangeProviderInner = function AnnotationRangeProviderInner(
       clearSelectionRange: clearSelectionRange,
       clearHoverRange: clearHoverRange,
       setSelectionRange: setSelectionRange,
-      setHoverTarget: !!allowCommentsOnMedia ? setHoverTarget : undefined,
+      setHoverTarget: allowCommentsOnMedia || extensionCommentsEnabled ? setHoverTarget : undefined,
       promoteSelectionToDraft: promoteSelectionToDraft,
       promoteHoverToDraft: promoteHoverToDraft,
       clearSelectionDraft: clearSelectionDraft,
       clearHoverDraft: 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, {
@@ -211,6 +227,7 @@ export var AnnotationRangeProviderInner = function AnnotationRangeProviderInner(
 export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref2) {
   var children = _ref2.children,
     allowCommentsOnMedia = _ref2.allowCommentsOnMedia,
+    hasBlockNodeSupport = _ref2.hasBlockNodeSupport,
     isNestedRender = _ref2.isNestedRender;
   /*
    * If this is a nested render, we do not provide the context
@@ -218,7 +235,8 @@ export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref2) {
    * 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 var useAnnotationRangeState = function useAnnotationRangeState() {

package/dist/esm/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/esm/ui/annotations/element/extension.js

@@ -0,0 +1,27 @@
+/* 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';
+var styles = {
+  anchor: "_kqswstnw _154iidpf _1xi2idpf _94n5idpf _1ltvidpf _lcxvglyw"
+};
+
+/** Full-chart anchors for comment navigation, without wrapping or intercepting the iframe. */
+export var ExtensionAnnotation = function ExtensionAnnotation(_ref) {
+  var id = _ref.id,
+    dataAttributes = _ref.dataAttributes,
+    markRef = _ref.markRef;
+  return /*#__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/esm/ui/annotations/element/index.js

@@ -12,7 +12,8 @@ var MarkElement = function MarkElement(_ref) {
     children = _ref.children,
     dataAttributes = _ref.dataAttributes,
     id = _ref.id,
-    useBlockLevel = _ref.useBlockLevel;
+    useBlockLevel = _ref.useBlockLevel,
+    isExtension = _ref.isExtension;
   var updateSubscriber = useInlineCommentSubscriberContext();
   var states = useContext(InlineCommentsStateContext);
   var _useHasFocusEvent = useHasFocusEvent({
@@ -90,7 +91,8 @@ var MarkElement = function MarkElement(_ref) {
     hasFocus: hasFocus,
     isHovered: isHovered,
     state: states[id],
-    useBlockLevel: useBlockLevel
+    useBlockLevel: useBlockLevel,
+    isExtension: isExtension
   }, children);
 };
 export { MarkElement };

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

@@ -16,6 +16,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';
 var markStyles = css(_defineProperty({
   color: 'inherit',
   backgroundColor: 'unset',
@@ -120,7 +121,8 @@ export var MarkComponent = function MarkComponent(_ref) {
     hasFocus = _ref.hasFocus,
     isHovered = _ref.isHovered,
     onClick = _ref.onClick,
-    useBlockLevel = _ref.useBlockLevel;
+    useBlockLevel = _ref.useBlockLevel,
+    isExtension = _ref.isExtension;
   var intl = useIntl();
   var annotationIds = useMemo(function () {
     return _toConsumableArray(new Set([].concat(_toConsumableArray(annotationParentIds), [id])));
@@ -210,6 +212,14 @@ export var MarkComponent = function MarkComponent(_ref) {
   } : _objectSpread({
     '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', _objectSpread(_objectSpread(_objectSpread(_defineProperty({
     ref: id === currentSelectedAnnotationId ? markRef : undefined,
     id: id

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

@@ -29,7 +29,7 @@ export var AnnotationsPositionContext = /*#__PURE__*/React.createContext({
   startPos: 1
 });
 export var AnnotationsWrapperInner = function AnnotationsWrapperInner(props) {
-  var _providers$inlineComm, _providers$inlineComm2;
+  var _providers$inlineComm, _providers$inlineComm2, _providers$inlineComm3;
   var children = props.children,
     rendererRef = props.rendererRef,
     adfDocument = props.adfDocument,
@@ -47,6 +47,7 @@ export var AnnotationsWrapperInner = function AnnotationsWrapperInner(props) {
     value: inlineCommentAnnotationsState
   }, /*#__PURE__*/React.createElement(AnnotationRangeProvider, {
     allowCommentsOnMedia: (_providers$inlineComm = providers === null || providers === 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 || (_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/types/actions/index.d.ts

@@ -71,6 +71,19 @@ export default class RendererActions implements RendererActionsOptions, Annotati
     annotate(range: Range, annotationId: string, _annotationType: 'inlineComment'): AnnotationActionResult;
     isValidAnnotationRange(range: Range | null): boolean;
     isRangeAnnotatable(range: Range | null): boolean;
+    /**
+     * 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.
+     */
+    private isInsideNestedExtensionRenderer;
     /**
      * This is replaced by `isRangeAnnotatable`.
      *

package/dist/types/react/marks/annotation.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import type { MarkProps, AnnotationMarkMeta } from '../types';
 export declare const isAnnotationMark: (mark: Mark) => boolean;
-declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, isMediaInline, }: MarkProps<AnnotationMarkMeta>) => React.JSX.Element;
+declare const AnnotationComponent: ({ id, annotationType, children, dataAttributes, annotationParentIds, allowAnnotations, useBlockLevel, isExtension, isMediaInline, }: MarkProps<AnnotationMarkMeta>) => React.JSX.Element;
 export default AnnotationComponent;

package/dist/types/react/nodes/extension-comments.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
+import React from 'react';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
+type Props = React.PropsWithChildren<{
+    allowAnnotations?: boolean;
+    allowAnnotationsDraftMode?: boolean;
+    enabled?: boolean;
+    marks?: readonly Mark[];
+    startPos?: number;
+}>;
+/** Only node-aware provider-approved extensions receive comment visuals. */
+export declare const ExtensionComments: (props: Props) => React.JSX.Element;
+export {};

package/dist/types/react/nodes/extension.d.ts

@@ -12,8 +12,14 @@ import type { AnalyticsEventPayload } from '../../analytics/events';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { RendererContext, ExtensionViewportSize } from '../types';
 interface Props {
+    allowAnnotations?: boolean;
+    allowAnnotationsDraftMode?: boolean;
+    dataAttributes?: {
+        'data-renderer-start-pos': number;
+    };
     extensionHandlers?: ExtensionHandlers;
     extensionKey: string;
+    extensionNode?: PMNode;
     extensionType: string;
     extensionViewportSizes?: ExtensionViewportSize[];
     /**
@@ -40,8 +46,14 @@ type AllOrNone<T> = T | {
     [K in keyof T]?: never;
 };
 type RenderExtensionOptions = {
+    dataAttributes?: Props['dataAttributes'];
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
+    isCommentTarget?: boolean;
     isTopLevel?: boolean;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     rendererAppearance?: RendererAppearance;
 } & AllOrNone<OverflowShadowProps>;
 export declare const renderExtension: (content: any, layout: ExtensionLayout, options?: RenderExtensionOptions, removeOverflow?: boolean, extensionId?: string, extensionViewportSizes?: ExtensionViewportSize[], nodeHeight?: string, localId?: string, shouldDisplayExtensionAsInline?: (extensionParams?: ExtensionParams<Parameters>) => boolean, node?: ExtensionParams<Parameters>, isInsideOfInlineExtension?: boolean) => React.JSX.Element;

package/dist/types/react/types.d.ts

@@ -79,6 +79,7 @@ export interface AnnotationMarkMeta extends MarkMeta {
     annotationParentIds: string[];
     annotationType: AnnotationTypes;
     id: AnnotationId;
+    isExtension?: boolean;
     isMediaInline?: boolean;
     useBlockLevel?: boolean;
 }

package/dist/types/ui/annotations/contexts/AnnotationRangeContext.d.ts

@@ -36,13 +36,15 @@ interface AnnotationRangeDispatchContext {
 }
 export declare const AnnotationRangeStateContext: React.Context<AnnotationRangeStateContext>;
 export declare const AnnotationRangeDispatchContext: React.Context<AnnotationRangeDispatchContext>;
-export declare const AnnotationRangeProviderInner: ({ children, allowCommentsOnMedia, }: {
+export declare const AnnotationRangeProviderInner: ({ children, allowCommentsOnMedia, hasBlockNodeSupport, }: {
     allowCommentsOnMedia?: boolean;
     children?: ReactNode;
+    hasBlockNodeSupport?: boolean;
 }) => React.JSX.Element;
-export declare const AnnotationRangeProvider: ({ children, allowCommentsOnMedia, isNestedRender, }: {
+export declare const AnnotationRangeProvider: ({ children, allowCommentsOnMedia, hasBlockNodeSupport, isNestedRender, }: {
     allowCommentsOnMedia?: boolean;
     children?: ReactNode;
+    hasBlockNodeSupport?: boolean;
     isNestedRender?: boolean;
 }) => React.JSX.Element;
 export declare const useAnnotationRangeState: () => AnnotationRangeStateContext;

package/dist/types/ui/annotations/element/extension.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { AnnotationDataAttributes } from '@atlaskit/adf-schema/annotation';
+/** Full-chart anchors for comment navigation, without wrapping or intercepting the iframe. */
+export declare const ExtensionAnnotation: ({ id, dataAttributes, markRef, }: {
+    dataAttributes: AnnotationDataAttributes & {
+        'data-block-mark'?: boolean;
+        'data-has-focus'?: boolean;
+        'data-is-hovered'?: boolean;
+        'data-renderer-mark'?: boolean;
+    };
+    id: string;
+    markRef?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/types/ui/annotations/element/index.d.ts

@@ -5,7 +5,8 @@ type MarkElementProps = React.PropsWithChildren<{
     annotationType: AnnotationTypes;
     dataAttributes: AnnotationDataAttributes;
     id: AnnotationId;
+    isExtension?: boolean;
     useBlockLevel?: boolean;
 }>;
-declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, useBlockLevel, }: MarkElementProps) => React.JSX.Element;
+declare const MarkElement: ({ annotationParentIds, children, dataAttributes, id, useBlockLevel, isExtension, }: MarkElementProps) => React.JSX.Element;
 export { MarkElement };