@atlaskit/renderer 148.1.0 → 149.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/renderer
 
+## 149.0.0
+
+### Patch Changes
+
+- [`6887d068f2246`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6887d068f2246) -
+  [ux] Add hover and keyboard-focus comment targeting and unresolved comment badges for eligible
+  extensions in the renderer behind cc_maui_annotations_on_extensions. Add the optional
+  isBlockNodeSupported provider predicate in editor-common. Convert renderer positions to node
+  positions so chart comments create node marks, and preserve the hover range when focus moves
+  between controls within a chart. Memoize extension comment eligibility by node and provider
+  predicate to avoid repeating manifest lookups on unrelated renders. Keep the hover-target callback
+  stable as draft ranges change. Explicitly gate extension range-to-position conversion so disabling
+  cc_maui_annotations_on_extensions preserves the previous text and media targeting behavior.
+
+  Keep chart draft anchors and local comment creation on the selected extension, and render saved
+  annotation anchors beside the chart contents so adding or removing comments does not remount the
+  iframe. These fixes remain behind cc_maui_annotations_on_extensions.
+
+  Use node-mark removal for eligible extension comments so deleting a chart comment removes its
+  annotation from the returned document and sends the correct removal step for persistence, behind
+  cc_maui_annotations_on_extensions.
+
+- Updated dependencies
+
 ## 148.1.0
 
 ### Minor Changes

package/dist/cjs/actions/index.js

@@ -94,9 +94,10 @@ var RendererActions = exports.default = /*#__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 && (0, _matchesUtils.isBlockAnnotationTarget)(node, schema)) {
           nodePos = pos;
         }
         if (found && !from) {
@@ -191,13 +192,12 @@ var RendererActions = exports.default = /*#__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);
@@ -213,6 +213,38 @@ var RendererActions = exports.default = /*#__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 (!(0, _fg.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/cjs/react/index.js

@@ -104,6 +104,11 @@ var ReactSerializer = exports.default = /*#__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 && (0, _fg.fg)('cc_maui_annotations_on_extensions')) {
+          return content;
+        }
         return _this.renderMark((0, _marks.toReact)(mark), _this.withMediaMarkProps(node, mark, _this.getMarkProps(mark, [], node)), "".concat(mark.type.name, "-").concat(index), content);
       }, serializedContent);
       return (0, _expandBody.withExpandBodyBlock)(node, currentPath, index, serialized);
@@ -556,6 +561,9 @@ var ReactSerializer = exports.default = /*#__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/cjs/react/marks/annotation.js

@@ -24,6 +24,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), (0, _annotation.buildDataAttributes)({
     id: id,
@@ -43,7 +44,8 @@ var AnnotationComponent = function AnnotationComponent(_ref) {
       dataAttributes: data,
       annotationParentIds: annotationParentIds,
       annotationType: annotationType,
-      useBlockLevel: useBlockLevel
+      useBlockLevel: useBlockLevel,
+      isExtension: isExtension
     }, children);
   }
   return (

package/dist/cjs/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/cjs/react/nodes/extension-comments.js

@@ -0,0 +1,144 @@
+/* extension-comments.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExtensionComments = void 0;
+require("./extension-comments.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _annotation = require("@atlaskit/adf-schema/annotation");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _types = require("@atlaskit/editor-common/types");
+var _AnnotationManagerContext = require("../../ui/annotations/contexts/AnnotationManagerContext");
+var _AnnotationRangeContext = require("../../ui/annotations/contexts/AnnotationRangeContext");
+var _useInlineCommentSubscriber = require("../../ui/annotations/hooks/use-inline-comment-subscriber");
+var _useInlineCommentsFilter = require("../../ui/annotations/hooks/use-inline-comments-filter");
+var _annotation2 = _interopRequireDefault(require("../marks/annotation"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var 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 = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
+    hoverDraftDocumentPosition = _useAnnotationRangeSt.hoverDraftDocumentPosition;
+  var isDraft = Boolean(enabled && allowAnnotationsDraftMode && hoverDraftDocumentPosition && hoverDraftDocumentPosition.from + 1 === startPos);
+  var updateSubscriber = (0, _useInlineCommentSubscriber.useInlineCommentSubscriberContext)();
+  var annotationIds = (0, _react.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 = (0, _useInlineCommentsFilter.useInlineCommentsFilter)({
+    annotationIds: annotationIds,
+    filter: {
+      state: _annotation.AnnotationMarkStates.ACTIVE
+    }
+  });
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    focusedId = _useState2[0],
+    setFocusedId = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    entered = _useState4[0],
+    setEntered = _useState4[1];
+  var _useAnnotationManager = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
+    currentSelectedAnnotationId = _useAnnotationManager.currentSelectedAnnotationId;
+  var active = activeIds.some(function (id) {
+    return id === focusedId || id === currentSelectedAnnotationId;
+  });
+  (0, _react.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(_types.AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, onFocus);
+    updateSubscriber.on(_types.AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, onBlur);
+    return function () {
+      updateSubscriber.off(_types.AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, onFocus);
+      updateSubscriber.off(_types.AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, onBlur);
+    };
+  }, [updateSubscriber]);
+  var onClick = (0, _react.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(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeIds,
+        eventTarget: extension,
+        eventTargetType: 'extension',
+        viewMethod: _analytics.VIEW_METHOD.BADGE
+      });
+    }
+  }, [activeIds, updateSubscriber]);
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    return setEntered(true);
+  }, []);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return setEntered(false);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-annotation-draft-mark": isDraft || undefined,
+    "data-renderer-mark": isDraft || undefined,
+    "data-renderer-start-pos": isDraft ? startPos : undefined,
+    className: (0, _runtime.ax)(["_kqswh2mm"])
+  }, children, allowAnnotations && annotationIds.map(function (id) {
+    return /*#__PURE__*/_react.default.createElement(_annotation2.default, {
+      key: id,
+      id: id,
+      annotationType: _annotation.AnnotationTypes.INLINE_COMMENT,
+      annotationParentIds: annotationParentIds,
+      allowAnnotations: true,
+      useBlockLevel: true,
+      isExtension: true,
+      dataAttributes: annotationDataAttributes
+    });
+  }), enabled && activeIds.length > 0 && updateSubscriber && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _154iu2gc _1xi2u2gc"])
+  }, /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadgeNext, {
+    status: active ? 'active' : entered ? 'entered' : 'default',
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  })));
+};
+
+/** Only node-aware provider-approved extensions receive comment visuals. */
+var ExtensionComments = exports.ExtensionComments = function ExtensionComments(props) {
+  if (!props.enabled && !props.allowAnnotations) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
+  }
+  return /*#__PURE__*/_react.default.createElement(ExtensionCommentsEnabled, {
+    enabled: props.enabled,
+    allowAnnotations: props.allowAnnotations,
+    allowAnnotationsDraftMode: props.allowAnnotationsDraftMode,
+    startPos: props.startPos,
+    marks: props.marks
+  }, props.children);
+};

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderExtension = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -14,16 +15,18 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("../../consts");
+var _context = require("../../ui/annotations/context");
+var _AnnotationHoverContext = require("../../ui/annotations/contexts/AnnotationHoverContext");
+var _AnnotationRangeContext = require("../../ui/annotations/contexts/AnnotationRangeContext");
 var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
 var _breakout = require("../utils/breakout");
+var _extensionComments = require("./extension-comments");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
+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) { (0, _defineProperty2.default)(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
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var FORGE_EXTENSION_TYPE = 'com.atlassian.ecosystem';
 /**
  * Mirrors `FORGE_INLINE_BODIED_PARAM` in `@atlassian/xen-editor-provider`. Duplicated rather than
@@ -78,7 +81,7 @@ var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_re
   return null;
 };
 var renderExtension = exports.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;
@@ -166,11 +169,17 @@ var renderExtension = exports.renderExtension = function renderExtension(content
     },
     "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
   }, (0, _react2.jsx)("div", {
     tabIndex: options.tabIndex
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -184,6 +193,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
   }, 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,
@@ -196,6 +206,57 @@ var Extension = function Extension(props) {
     nodeHeight = props.nodeHeight,
     localId = props.localId,
     isInsideOfInlineExtension = props.isInsideOfInlineExtension;
+  var providers = (0, _react.useContext)(_context.ProvidersContext);
+  var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
+    setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
+  var _useAnnotationHoverDi = (0, _AnnotationHoverContext.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 = (0, _react.useMemo)(function () {
+    return Boolean((0, _fg.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 = (0, _react.useCallback)(function (event) {
+    cancelTimeout();
+    if (event.buttons === 0) {
+      setHoverTarget === null || setHoverTarget === void 0 || setHoverTarget(event.currentTarget);
+      setIsWithinRange(true);
+    }
+  }, [cancelTimeout, setHoverTarget, setIsWithinRange]);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return initiateTimeout();
+  }, [initiateTimeout]);
+  var onFocus = (0, _react.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 = (0, _react.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 && (0, _fg.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 (0, _react2.jsx)(_ExtensionRenderer.default
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -208,13 +269,20 @@ var Extension = function Extension(props) {
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/_react.default.isValidElement(result)) {
-        return renderExtension(result, layout, {
+        return renderExtension((0, _react2.jsx)(_extensionComments.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) {
@@ -226,13 +294,20 @@ var Extension = function Extension(props) {
     }
 
     // Always return default content if anything goes wrong
-    return renderExtension(text || 'extension', layout, {
+    return renderExtension((0, _react2.jsx)(_extensionComments.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 = (0, _ui.overflowShadow)(Extension, {

package/dist/cjs/steps/index.js

@@ -226,11 +226,34 @@ 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;
+}
 function getPosFromRange(range) {
   var startContainer = range.startContainer,
     startOffset = range.startOffset,
     endContainer = range.endContainer,
     endOffset = range.endOffset;
+  var selectedCommentTargetPosition = (0, _fg.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/cjs/ui/Renderer/index.js

@@ -72,7 +72,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.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 = "148.1.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -9,6 +9,7 @@ exports.useAnnotationRangeState = exports.useAnnotationRangeDispatch = exports.A
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2.default)(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; }
@@ -121,7 +122,9 @@ var AnnotationRangeDispatchContext = exports.AnnotationRangeDispatchContext = /*
 });
 var AnnotationRangeProviderInner = exports.AnnotationRangeProviderInner = function AnnotationRangeProviderInner(_ref) {
   var children = _ref.children,
-    allowCommentsOnMedia = _ref.allowCommentsOnMedia;
+    allowCommentsOnMedia = _ref.allowCommentsOnMedia,
+    hasBlockNodeSupport = _ref.hasBlockNodeSupport;
+  var extensionCommentsEnabled = !!hasBlockNodeSupport && (0, _fg.fg)('cc_maui_annotations_on_extensions');
   var _useReducer = (0, _react.useReducer)(reducer, initialState),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
     _useReducer2$ = _useReducer2[0],
@@ -149,21 +152,34 @@ var AnnotationRangeProviderInner = exports.AnnotationRangeProviderInner = functi
       range: range
     });
   }, []);
+  var hoverDraftRangeRef = (0, _react.useRef)(hoverDraftRange);
+  hoverDraftRangeRef.current = hoverDraftRange;
   var setHoverTarget = (0, _react.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 = (0, _react.useCallback)(function (position) {
     dispatch({
       type: 'promoteSelectionToDraft',
@@ -203,13 +219,13 @@ var AnnotationRangeProviderInner = exports.AnnotationRangeProviderInner = functi
       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.default.createElement(AnnotationRangeStateContext.Provider, {
     value: stateData
   }, /*#__PURE__*/_react.default.createElement(AnnotationRangeDispatchContext.Provider, {
@@ -219,6 +235,7 @@ var AnnotationRangeProviderInner = exports.AnnotationRangeProviderInner = functi
 var AnnotationRangeProvider = exports.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
@@ -226,7 +243,8 @@ var AnnotationRangeProvider = exports.AnnotationRangeProvider = function Annotat
    * and we need the original context to create annotations on extensions.
    */
   return isNestedRender ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children) : /*#__PURE__*/_react.default.createElement(AnnotationRangeProviderInner, {
-    allowCommentsOnMedia: allowCommentsOnMedia
+    allowCommentsOnMedia: allowCommentsOnMedia,
+    hasBlockNodeSupport: hasBlockNodeSupport
   }, children);
 };
 var useAnnotationRangeState = exports.useAnnotationRangeState = function useAnnotationRangeState() {

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

@@ -0,0 +1,34 @@
+/* extension.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExtensionAnnotation = void 0;
+require("./extension.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var styles = {
+  anchor: "_kqswstnw _154iidpf _1xi2idpf _94n5idpf _1ltvidpf _lcxvglyw"
+};
+
+/** Full-chart anchors for comment navigation, without wrapping or intercepting the iframe. */
+var ExtensionAnnotation = exports.ExtensionAnnotation = function ExtensionAnnotation(_ref) {
+  var id = _ref.id,
+    dataAttributes = _ref.dataAttributes,
+    markRef = _ref.markRef;
+  return /*#__PURE__*/_react.default.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: (0, _runtime.ax)([styles.anchor])
+  });
+};