@atlaskit/renderer 142.0.0 → 142.1.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/renderer
 
+## 142.1.0
+
+### Minor Changes
+
+- [`1c57152f89627`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1c57152f89627) -
+  Add `RendererActions.getMediaNodeContext`, which resolves a media file id and optional occurrence
+  key to the matching file media node in the rendered document, returning its inline-comment
+  annotation ids, document position, display text and occurrence key. Also threads the existing
+  `mediaViewerExtensions` media option through the media node to the media card, and — behind the
+  `cc_comments_media_viewer_sidebar` experiment — keeps the media identifier map in document order
+  so the Media Viewer's previous/next list stays stable when a media card remounts.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 142.0.1
+
+### Patch Changes
+
+- [`da64bde78a78c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da64bde78a78c) -
+  Increase heading link targets to at least 24 by 24 pixels when
+  platform_editor_heading_link_target_size is enabled.
+
 ## 142.0.0
 
 ### Major Changes

package/dist/cjs/actions/index.js

@@ -286,6 +286,53 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
       });
       return Array.from(uniqueMarks.values());
     }
+  }, {
+    key: "getMediaNodeContext",
+    value: function getMediaNodeContext(identifier) {
+      if (!this.doc) {
+        return {
+          status: 'missing'
+        };
+      }
+      var candidates = [];
+      this.doc.descendants(function (node, position) {
+        if (node.type.name !== 'media' || node.attrs.type !== 'file' || node.attrs.id !== identifier.id) {
+          return true;
+        }
+        candidates.push({
+          fileId: identifier.id,
+          annotationIds: node.marks.filter(function (mark) {
+            return mark.type.name === 'annotation' && mark.attrs.annotationType === _annotation.AnnotationTypes.INLINE_COMMENT;
+          }).map(function (mark) {
+            return mark.attrs.id;
+          }).filter(function (id) {
+            return typeof id === 'string';
+          }),
+          position: position,
+          displayText: node.attrs.alt || node.attrs.__fileName || node.attrs.fileName || node.attrs.name,
+          occurrenceKey: typeof node.attrs.occurrenceKey === 'string' ? node.attrs.occurrenceKey : undefined
+        });
+        return false;
+      });
+      var exactMatches = identifier.occurrenceKey ? candidates.filter(function (candidate) {
+        return candidate.occurrenceKey === identifier.occurrenceKey;
+      }) : [];
+      var matches = exactMatches.length > 0 ? exactMatches : candidates;
+      if (matches.length === 0) {
+        return {
+          status: 'missing'
+        };
+      }
+      if (matches.length > 1) {
+        return {
+          status: 'ambiguous'
+        };
+      }
+      return {
+        status: 'resolved',
+        context: matches[0]
+      };
+    }
   }, {
     key: "getAnnotationsByPosition",
     value: function getAnnotationsByPosition(range) {

package/dist/cjs/react/nodes/heading-anchor-button.compiled.css

@@ -0,0 +1,16 @@
+._1dqoglyw{border-style:none}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._19bvidpf{padding-left:0}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._1e0c116y{display:inline-flex}
+._1qu2glyw{outline-style:none}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._80omtlke{cursor:pointer}
+._bfhk1j28{background-color:transparent}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._s7n4nkob{vertical-align:middle}
+._u5f3idpf{padding-right:0}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/react/nodes/heading-anchor-button.js

@@ -0,0 +1,24 @@
+/* heading-anchor-button.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.default = HeadingAnchorButton;
+require("./heading-anchor-button.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 buttonStyles = null;
+
+/** Heading link button with a minimum 24px pointer target. */
+function HeadingAnchorButton(props) {
+  // eslint-disable-next-line react/jsx-props-no-spreading -- Forward the existing heading anchor's accessibility and event props.
+  return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({}, props, {
+    type: "button",
+    className: (0, _runtime.ax)(["_12ji1r31 _1qu2glyw _12y31o36 _1dqoglyw _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1bsb1tcg _4t3i1tcg _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _s7n4nkob _bfhk1j28 _80omtlke"])
+  }));
+}

package/dist/cjs/react/nodes/heading-anchor.js

@@ -23,6 +23,7 @@ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-ex
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _messages = require("../../messages");
+var _headingAnchorButton = _interopRequireDefault(require("./heading-anchor-button"));
 var _excluded = ["children"];
 /**
  * @jsxRuntime classic
@@ -32,12 +33,22 @@ var _excluded = ["children"];
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var HeadingAnchorWrapperClassName = exports.HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
+var headingAnchorWrapperTargetSizeStyles = (0, _react2.css)({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '24px',
+  height: '24px',
+  verticalAlign: 'middle'
+});
 var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var children = props.children,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (0, _react2.jsx)("span", (0, _extends2.default)({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: HeadingAnchorWrapperClassName,
+    css: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_heading_link_target_size') ? headingAnchorWrapperTargetSizeStyles : undefined,
     ref: ref
   }), children);
 });
@@ -50,6 +61,11 @@ var copyAnchorButtonStyles = (0, _react2.css)({
   cursor: 'pointer',
   right: 0
 });
+var scaledLinkIconStyles = (0, _react2.css)({
+  display: 'inline-flex',
+  transform: 'scale(1.5)',
+  transformOrigin: 'center'
+});
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
@@ -128,6 +144,27 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         heading: headingId
       }) : headingId;
       var tabIndex = (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_heading_link_target_size')) {
+        return (0, _react2.jsx)(_headingAnchorButton.default, {
+          "data-testid": "anchor-button",
+          id: _this.copyLinkId,
+          onMouseLeave: _this.resetMessage,
+          onBlur: _this.resetMessage,
+          onClick: _this.copyToClipboard,
+          "aria-hidden": hideFromScreenReader,
+          tabIndex: tabIndex,
+          "aria-label": hideFromScreenReader ? undefined : _this.state.tooltipMessage,
+          "aria-labelledby": hideFromScreenReader ? undefined : labelledBy,
+          type: "button"
+        }, (0, _react2.jsx)("span", {
+          css: scaledLinkIconStyles,
+          "data-testid": "scaled-link-icon"
+        }, (0, _react2.jsx)(_link.default, {
+          label: _this.getCopyAriaLabel(),
+          size: "medium",
+          color: _this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
+        })));
+      }
       return (0, _react2.jsx)("button", {
         "data-testid": "anchor-button",
         id: _this.copyLinkId,

package/dist/cjs/react/nodes/media/index.js

@@ -298,7 +298,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         height = _this$props3.height,
         mediaSingleElement = _this$props3.mediaSingleElement,
         _this$props3$isDrafti = _this$props3.isDrafting,
-        isDrafting = _this$props3$isDrafti === void 0 ? false : _this$props3$isDrafti;
+        isDrafting = _this$props3$isDrafti === void 0 ? false : _this$props3$isDrafti,
+        mediaViewerExtensions = _this$props3.mediaViewerExtensions;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var dataConsumerMark = _this.getDataConsumerMark();
@@ -352,7 +353,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr,
         onError: _this.props.onMediaRenderEvent || _this.props.onError ? _this.onError : undefined,
-        onPreviewRender: _this.props.onMediaRenderEvent || _this.props.onPreviewRender ? _this.onPreviewRender : undefined
+        onPreviewRender: _this.props.onMediaRenderEvent || _this.props.onPreviewRender ? _this.onPreviewRender : undefined,
+        mediaViewerExtensions: mediaViewerExtensions
       }))))));
     });
     (0, _defineProperty2.default)(_this, "handleMediaLinkClick", function (event) {

package/dist/cjs/ui/MediaCard.js

@@ -15,6 +15,8 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _traverse = require("@atlaskit/adf-utils/traverse");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -24,6 +26,7 @@ var _cardLoader = _interopRequireDefault(require("@atlaskit/media-card/cardLoade
 var _cardLoading = require("@atlaskit/media-card/cardLoading");
 var _cardSync = _interopRequireDefault(require("@atlaskit/media-card/cardSync"));
 var _mediaClientProvider = require("@atlaskit/media-client-react/media-client-provider");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analyticsContext = _interopRequireDefault(require("../analytics/analyticsContext"));
 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 _t4 in e) "default" !== _t4 && {}.hasOwnProperty.call(e, _t4) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t4)) && (i.get || i.set) ? o(f, _t4, i) : f[_t4] = e[_t4]); return f; })(e, t); }
@@ -61,6 +64,38 @@ var getListOfIdentifiersFromDoc = exports.getListOfIdentifiersFromDoc = function
   }, []);
 };
 
+/**
+ * `mediaIdentifierMap` is the Media Viewer's nav list, but a `Map` can only append —
+ * a card that unmounts and re-registers lands last, scrambling nav order. Rebuild it
+ * in document order; entries from other renderers on the page keep their old order.
+ */
+var restoreDocumentOrder = function restoreDocumentOrder(docIdentifiers) {
+  var documentKeys = new Set(docIdentifiers.map(function (identifier) {
+    return identifier.mediaItemType === 'file' ? identifier.id : identifier.dataURI;
+  }).filter(function (key) {
+    return mediaIdentifierMap.has(key);
+  }));
+  var currentKeys = Array.from(mediaIdentifierMap.keys());
+  var orderedKeys = [].concat((0, _toConsumableArray2.default)(documentKeys), (0, _toConsumableArray2.default)(currentKeys.filter(function (key) {
+    return !documentKeys.has(key);
+  })));
+  if (orderedKeys.every(function (key, index) {
+    return key === currentKeys[index];
+  })) {
+    return;
+  }
+  var orderedEntries = orderedKeys.map(function (key) {
+    return [key, mediaIdentifierMap.get(key)];
+  });
+  mediaIdentifierMap.clear();
+  orderedEntries.forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      key = _ref2[0],
+      identifier = _ref2[1];
+    mediaIdentifierMap.set(key, identifier);
+  });
+};
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
@@ -73,7 +108,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
     _this = _callSuper(this, MediaCardView, [].concat(args));
     (0, _defineProperty2.default)(_this, "state", {});
     (0, _defineProperty2.default)(_this, "saveFileState", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(id) {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(id) {
         var _this$props, collectionName, mediaClient, options, fileState, _t;
         return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -107,7 +142,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         }, _callee, null, [[1, 4]]);
       }));
       return function (_x) {
-        return _ref.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }());
     (0, _defineProperty2.default)(_this, "onError", function (reason) {
@@ -174,7 +209,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _this$props6, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache, _t2, _t3;
+        var _this$props6, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache, docIdentifiers, _t2, _t3;
         return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -194,7 +229,8 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
             case 2:
               nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
               if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
-                getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(function (identifier) {
+                docIdentifiers = getListOfIdentifiersFromDoc(rendererContext.adDoc);
+                docIdentifiers.forEach(function (identifier) {
                   if (identifier.mediaItemType === 'file' && identifier.id === id) {
                     mediaIdentifierMap.set(identifier.id, _objectSpread(_objectSpread({}, identifier), {}, {
                       collectionName: collectionName
@@ -203,6 +239,11 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
                     mediaIdentifierMap.set(identifier.dataURI, identifier);
                   }
                 });
+                // Reordering affects prev/next nav in every overlay viewer on the page, so gate it
+                // to the media-comments sidebar experiment that needs it; otherwise keep legacy order.
+                if ((0, _isExperimentEnabled.isExperimentEnabled)('cc_comments_media_viewer_sidebar')) {
+                  restoreDocumentOrder(docIdentifiers);
+                }
               }
               if (id) {
                 this.saveFileState(id);
@@ -400,13 +441,13 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
   }]);
 }(_react.Component);
 // Needed for copy & paste
-var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_ref2) {
-  var id = _ref2.id,
-    alt = _ref2.alt,
-    collection = _ref2.collection,
-    contextIdentifierProvider = _ref2.contextIdentifierProvider,
-    originalDimensions = _ref2.originalDimensions,
-    fileState = _ref2.fileState;
+var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_ref4) {
+  var id = _ref4.id,
+    alt = _ref4.alt,
+    collection = _ref4.collection,
+    contextIdentifierProvider = _ref4.contextIdentifierProvider,
+    originalDimensions = _ref4.originalDimensions,
+    fileState = _ref4.fileState;
   var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
   var width = originalDimensions && originalDimensions.width;
   var height = originalDimensions && originalDimensions.height;
@@ -434,8 +475,8 @@ var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_
 };
 var MediaCardInternal = exports.MediaCardInternal = function MediaCardInternal(props) {
   var mediaClient = (0, _react.useContext)(_mediaClientProvider.MediaClientContext);
-  return /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref3) {
-    var fireAnalyticsEvent = _ref3.fireAnalyticsEvent;
+  return /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref5) {
+    var fireAnalyticsEvent = _ref5.fireAnalyticsEvent;
     return /*#__PURE__*/_react.default.createElement(MediaCardView
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -30,7 +30,7 @@ var _table2 = require("../../react/nodes/table");
 var _collapsibleHeadingsDom = require("../collapsible-headings-dom");
 var _getBaseFontSize = require("./get-base-font-size");
 var _style = require("./style");
-var _css9, _$concat3, _$concat5;
+var _css0, _$concat3, _$concat5;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -554,6 +554,16 @@ var headingWrapperInlineFlowStyles = (0, _react.css)((0, _defineProperty2.defaul
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginTop: '1.59091em'
 }));
+var headingAnchorWrapperTargetSizeStyles = (0, _react.css)((0, _defineProperty2.default)({
+  '& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
+    verticalAlign: 'middle'
+  }
+}, "& .renderer-heading-wrapper > .".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  verticalAlign: 'middle'
+}));
 var headingWithAlignmentStylesDuplicateAnchor = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
@@ -644,13 +654,13 @@ var paragraphStylesUGCScaledMargin = (0, _react.css)({
     marginBottom: 0
   }
 });
-var listsSharedStyles = (0, _react.css)((_css9 = {
+var listsSharedStyles = (0, _react.css)((_css0 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "px)")
   }
-}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css9, "".concat(_orderedList.orderedListSelector, ", ").concat(_bulletList.bulletListSelector), {
+}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css0, "".concat(_orderedList.orderedListSelector, ", ").concat(_bulletList.bulletListSelector), {
   /*
   Ensures list item content adheres to the list's margin instead
   of filling the entire block row. This is important to allow
@@ -682,7 +692,7 @@ var listsSharedStyles = (0, _react.css)((_css9 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css9, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css0, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -2313,7 +2323,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- CSS custom properties for UGC font tokens
       '--ak-renderer-editor-font-small-text': _ugcTokens.editorUGCTokensRefreshed['editor.font.body.small']
     },
-    css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max') && !(0, _table2.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
+    css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max') && !(0, _table2.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && ((0, _expValEquals.expValEquals)('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning

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

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

package/dist/es2019/actions/index.js

@@ -262,6 +262,43 @@ export default class RendererActions {
     });
     return Array.from(uniqueMarks.values());
   }
+  getMediaNodeContext(identifier) {
+    if (!this.doc) {
+      return {
+        status: 'missing'
+      };
+    }
+    const candidates = [];
+    this.doc.descendants((node, position) => {
+      if (node.type.name !== 'media' || node.attrs.type !== 'file' || node.attrs.id !== identifier.id) {
+        return true;
+      }
+      candidates.push({
+        fileId: identifier.id,
+        annotationIds: node.marks.filter(mark => mark.type.name === 'annotation' && mark.attrs.annotationType === AnnotationTypes.INLINE_COMMENT).map(mark => mark.attrs.id).filter(id => typeof id === 'string'),
+        position,
+        displayText: node.attrs.alt || node.attrs.__fileName || node.attrs.fileName || node.attrs.name,
+        occurrenceKey: typeof node.attrs.occurrenceKey === 'string' ? node.attrs.occurrenceKey : undefined
+      });
+      return false;
+    });
+    const exactMatches = identifier.occurrenceKey ? candidates.filter(candidate => candidate.occurrenceKey === identifier.occurrenceKey) : [];
+    const matches = exactMatches.length > 0 ? exactMatches : candidates;
+    if (matches.length === 0) {
+      return {
+        status: 'missing'
+      };
+    }
+    if (matches.length > 1) {
+      return {
+        status: 'ambiguous'
+      };
+    }
+    return {
+      status: 'resolved',
+      context: matches[0]
+    };
+  }
   getAnnotationsByPosition(range) {
     if (!this.doc || !this.schema) {
       return [];

package/dist/es2019/react/nodes/heading-anchor-button.compiled.css

@@ -0,0 +1,16 @@
+._1dqoglyw{border-style:none}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._19bvidpf{padding-left:0}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._1e0c116y{display:inline-flex}
+._1qu2glyw{outline-style:none}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._80omtlke{cursor:pointer}
+._bfhk1j28{background-color:transparent}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._s7n4nkob{vertical-align:middle}
+._u5f3idpf{padding-right:0}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/react/nodes/heading-anchor-button.js

@@ -0,0 +1,15 @@
+/* heading-anchor-button.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./heading-anchor-button.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const buttonStyles = null;
+
+/** Heading link button with a minimum 24px pointer target. */
+export default function HeadingAnchorButton(props) {
+  // eslint-disable-next-line react/jsx-props-no-spreading -- Forward the existing heading anchor's accessibility and event props.
+  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
+    type: "button",
+    className: ax(["_12ji1r31 _1qu2glyw _12y31o36 _1dqoglyw _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1bsb1tcg _4t3i1tcg _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _s7n4nkob _bfhk1j28 _80omtlke"])
+  }));
+}

package/dist/es2019/react/nodes/heading-anchor.js

@@ -15,7 +15,17 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { headingAnchorLinkMessages } from '../../messages';
+import HeadingAnchorButton from './heading-anchor-button';
 export const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
+const headingAnchorWrapperTargetSizeStyles = css({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '24px',
+  height: '24px',
+  verticalAlign: 'middle'
+});
 const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
@@ -24,6 +34,7 @@ const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
   return jsx("span", _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: HeadingAnchorWrapperClassName,
+    css: isExperimentEnabled('platform_editor_heading_link_target_size') ? headingAnchorWrapperTargetSizeStyles : undefined,
     ref: ref
   }), children);
 });
@@ -36,6 +47,11 @@ const copyAnchorButtonStyles = css({
   cursor: 'pointer',
   right: 0
 });
+const scaledLinkIconStyles = css({
+  display: 'inline-flex',
+  transform: 'scale(1.5)',
+  transformOrigin: 'center'
+});
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class HeadingAnchor extends React.PureComponent {
@@ -98,6 +114,27 @@ class HeadingAnchor extends React.PureComponent {
         heading: headingId
       }) : headingId;
       const tabIndex = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
+      if (isExperimentEnabled('platform_editor_heading_link_target_size')) {
+        return jsx(HeadingAnchorButton, {
+          "data-testid": "anchor-button",
+          id: this.copyLinkId,
+          onMouseLeave: this.resetMessage,
+          onBlur: this.resetMessage,
+          onClick: this.copyToClipboard,
+          "aria-hidden": hideFromScreenReader,
+          tabIndex: tabIndex,
+          "aria-label": hideFromScreenReader ? undefined : this.state.tooltipMessage,
+          "aria-labelledby": hideFromScreenReader ? undefined : labelledBy,
+          type: "button"
+        }, jsx("span", {
+          css: scaledLinkIconStyles,
+          "data-testid": "scaled-link-icon"
+        }, jsx(LinkIcon, {
+          label: this.getCopyAriaLabel(),
+          size: "medium",
+          color: this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
+        })));
+      }
       return jsx("button", {
         "data-testid": "anchor-button",
         id: this.copyLinkId,

package/dist/es2019/react/nodes/media/index.js

@@ -261,7 +261,8 @@ class Media extends PureComponent {
         width,
         height,
         mediaSingleElement,
-        isDrafting = false
+        isDrafting = false,
+        mediaViewerExtensions
       } = this.props;
       const annotationMarks = this.props.isAnnotationMark ? this.props.marks.filter(this.props.isAnnotationMark) : undefined;
       const borderMark = this.props.marks.find(this.props.isBorderMark);
@@ -317,7 +318,8 @@ class Media extends PureComponent {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr,
         onError: this.props.onMediaRenderEvent || this.props.onError ? this.onError : undefined,
-        onPreviewRender: this.props.onMediaRenderEvent || this.props.onPreviewRender ? this.onPreviewRender : undefined
+        onPreviewRender: this.props.onMediaRenderEvent || this.props.onPreviewRender ? this.onPreviewRender : undefined,
+        mediaViewerExtensions: mediaViewerExtensions
       }))))));
     });
     _defineProperty(this, "handleMediaLinkClick", event => {

package/dist/es2019/ui/MediaCard.js

@@ -9,6 +9,7 @@ import CardAsync from '@atlaskit/media-card/cardLoader';
 import { CardLoading } from '@atlaskit/media-card/cardLoading';
 import CardSync from '@atlaskit/media-card/cardSync';
 import { MediaClientContext } from '@atlaskit/media-client-react/media-client-provider';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import AnalyticsContext from '../analytics/analyticsContext';
 export const mediaIdentifierMap = new Map();
@@ -40,6 +41,25 @@ export const getListOfIdentifiersFromDoc = doc => {
   }, []);
 };
 
+/**
+ * `mediaIdentifierMap` is the Media Viewer's nav list, but a `Map` can only append —
+ * a card that unmounts and re-registers lands last, scrambling nav order. Rebuild it
+ * in document order; entries from other renderers on the page keep their old order.
+ */
+const restoreDocumentOrder = docIdentifiers => {
+  const documentKeys = new Set(docIdentifiers.map(identifier => identifier.mediaItemType === 'file' ? identifier.id : identifier.dataURI).filter(key => mediaIdentifierMap.has(key)));
+  const currentKeys = Array.from(mediaIdentifierMap.keys());
+  const orderedKeys = [...documentKeys, ...currentKeys.filter(key => !documentKeys.has(key))];
+  if (orderedKeys.every((key, index) => key === currentKeys[index])) {
+    return;
+  }
+  const orderedEntries = orderedKeys.map(key => [key, mediaIdentifierMap.get(key)]);
+  mediaIdentifierMap.clear();
+  orderedEntries.forEach(([key, identifier]) => {
+    mediaIdentifierMap.set(key, identifier);
+  });
+};
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class MediaCardView extends Component {
@@ -145,7 +165,8 @@ export class MediaCardView extends Component {
     }
     const nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
     if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
-      getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(identifier => {
+      const docIdentifiers = getListOfIdentifiersFromDoc(rendererContext.adDoc);
+      docIdentifiers.forEach(identifier => {
         if (identifier.mediaItemType === 'file' && identifier.id === id) {
           mediaIdentifierMap.set(identifier.id, {
             ...identifier,
@@ -155,6 +176,11 @@ export class MediaCardView extends Component {
           mediaIdentifierMap.set(identifier.dataURI, identifier);
         }
       });
+      // Reordering affects prev/next nav in every overlay viewer on the page, so gate it
+      // to the media-comments sidebar experiment that needs it; otherwise keep legacy order.
+      if (isExperimentEnabled('cc_comments_media_viewer_sidebar')) {
+        restoreDocumentOrder(docIdentifiers);
+      }
     }
     if (id) {
       this.saveFileState(id);

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

@@ -661,6 +661,17 @@ const headingWrapperInlineFlowStyles = css({
     marginTop: '1.59091em'
   }
 });
+const headingAnchorWrapperTargetSizeStyles = css({
+  '& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
+    verticalAlign: 'middle'
+  },
+  [`& .renderer-heading-wrapper > .${HeadingAnchorWrapperClassName}`]: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'middle'
+  }
+});
 const headingWithAlignmentStylesDuplicateAnchor = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
@@ -2948,7 +2959,7 @@ export const RendererStyleContainer = props => {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- CSS custom properties for UGC font tokens
       '--ak-renderer-editor-font-small-text': editorUGCTokensRefreshed['editor.font.body.small']
     },
-    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max') && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
+    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max') && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, isExperimentEnabled('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning

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

@@ -56,7 +56,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 = "141.0.7";
+const packageVersion = "142.0.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/actions/index.js

@@ -279,6 +279,53 @@ var RendererActions = /*#__PURE__*/function () {
       });
       return Array.from(uniqueMarks.values());
     }
+  }, {
+    key: "getMediaNodeContext",
+    value: function getMediaNodeContext(identifier) {
+      if (!this.doc) {
+        return {
+          status: 'missing'
+        };
+      }
+      var candidates = [];
+      this.doc.descendants(function (node, position) {
+        if (node.type.name !== 'media' || node.attrs.type !== 'file' || node.attrs.id !== identifier.id) {
+          return true;
+        }
+        candidates.push({
+          fileId: identifier.id,
+          annotationIds: node.marks.filter(function (mark) {
+            return mark.type.name === 'annotation' && mark.attrs.annotationType === AnnotationTypes.INLINE_COMMENT;
+          }).map(function (mark) {
+            return mark.attrs.id;
+          }).filter(function (id) {
+            return typeof id === 'string';
+          }),
+          position: position,
+          displayText: node.attrs.alt || node.attrs.__fileName || node.attrs.fileName || node.attrs.name,
+          occurrenceKey: typeof node.attrs.occurrenceKey === 'string' ? node.attrs.occurrenceKey : undefined
+        });
+        return false;
+      });
+      var exactMatches = identifier.occurrenceKey ? candidates.filter(function (candidate) {
+        return candidate.occurrenceKey === identifier.occurrenceKey;
+      }) : [];
+      var matches = exactMatches.length > 0 ? exactMatches : candidates;
+      if (matches.length === 0) {
+        return {
+          status: 'missing'
+        };
+      }
+      if (matches.length > 1) {
+        return {
+          status: 'ambiguous'
+        };
+      }
+      return {
+        status: 'resolved',
+        context: matches[0]
+      };
+    }
   }, {
     key: "getAnnotationsByPosition",
     value: function getAnnotationsByPosition(range) {

package/dist/esm/react/nodes/heading-anchor-button.compiled.css

@@ -0,0 +1,16 @@
+._1dqoglyw{border-style:none}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._19bvidpf{padding-left:0}
+._1bah1h6o{justify-content:center}
+._1bsb1tcg{width:24px}
+._1e0c116y{display:inline-flex}
+._1qu2glyw{outline-style:none}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._80omtlke{cursor:pointer}
+._bfhk1j28{background-color:transparent}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._s7n4nkob{vertical-align:middle}
+._u5f3idpf{padding-right:0}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/react/nodes/heading-anchor-button.js

@@ -0,0 +1,15 @@
+/* heading-anchor-button.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./heading-anchor-button.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var buttonStyles = null;
+
+/** Heading link button with a minimum 24px pointer target. */
+export default function HeadingAnchorButton(props) {
+  // eslint-disable-next-line react/jsx-props-no-spreading -- Forward the existing heading anchor's accessibility and event props.
+  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
+    type: "button",
+    className: ax(["_12ji1r31 _1qu2glyw _12y31o36 _1dqoglyw _1e0c116y _vchhusvi _4cvr1h6o _1bah1h6o _1bsb1tcg _4t3i1tcg _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _s7n4nkob _bfhk1j28 _80omtlke"])
+  }));
+}

package/dist/esm/react/nodes/heading-anchor.js

@@ -26,13 +26,24 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { headingAnchorLinkMessages } from '../../messages';
+import HeadingAnchorButton from './heading-anchor-button';
 export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
+var headingAnchorWrapperTargetSizeStyles = css({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '24px',
+  height: '24px',
+  verticalAlign: 'middle'
+});
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
   return jsx("span", _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: HeadingAnchorWrapperClassName,
+    css: isExperimentEnabled('platform_editor_heading_link_target_size') ? headingAnchorWrapperTargetSizeStyles : undefined,
     ref: ref
   }), children);
 });
@@ -45,6 +56,11 @@ var copyAnchorButtonStyles = css({
   cursor: 'pointer',
   right: 0
 });
+var scaledLinkIconStyles = css({
+  display: 'inline-flex',
+  transform: 'scale(1.5)',
+  transformOrigin: 'center'
+});
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
@@ -123,6 +139,27 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         heading: headingId
       }) : headingId;
       var tabIndex = expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? 0 : hideFromScreenReader ? undefined : -1;
+      if (isExperimentEnabled('platform_editor_heading_link_target_size')) {
+        return jsx(HeadingAnchorButton, {
+          "data-testid": "anchor-button",
+          id: _this.copyLinkId,
+          onMouseLeave: _this.resetMessage,
+          onBlur: _this.resetMessage,
+          onClick: _this.copyToClipboard,
+          "aria-hidden": hideFromScreenReader,
+          tabIndex: tabIndex,
+          "aria-label": hideFromScreenReader ? undefined : _this.state.tooltipMessage,
+          "aria-labelledby": hideFromScreenReader ? undefined : labelledBy,
+          type: "button"
+        }, jsx("span", {
+          css: scaledLinkIconStyles,
+          "data-testid": "scaled-link-icon"
+        }, jsx(LinkIcon, {
+          label: _this.getCopyAriaLabel(),
+          size: "medium",
+          color: _this.state.isClicked ? "var(--ds-icon-selected, #1868DB)" : "var(--ds-icon-subtle, #505258)"
+        })));
+      }
       return jsx("button", {
         "data-testid": "anchor-button",
         id: _this.copyLinkId,

package/dist/esm/react/nodes/media/index.js

@@ -291,7 +291,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         height = _this$props3.height,
         mediaSingleElement = _this$props3.mediaSingleElement,
         _this$props3$isDrafti = _this$props3.isDrafting,
-        isDrafting = _this$props3$isDrafti === void 0 ? false : _this$props3$isDrafti;
+        isDrafting = _this$props3$isDrafti === void 0 ? false : _this$props3$isDrafti,
+        mediaViewerExtensions = _this$props3.mediaViewerExtensions;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var dataConsumerMark = _this.getDataConsumerMark();
@@ -345,7 +346,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr,
         onError: _this.props.onMediaRenderEvent || _this.props.onError ? _this.onError : undefined,
-        onPreviewRender: _this.props.onMediaRenderEvent || _this.props.onPreviewRender ? _this.onPreviewRender : undefined
+        onPreviewRender: _this.props.onMediaRenderEvent || _this.props.onPreviewRender ? _this.onPreviewRender : undefined,
+        mediaViewerExtensions: mediaViewerExtensions
       }))))));
     });
     _defineProperty(_this, "handleMediaLinkClick", function (event) {

package/dist/esm/ui/MediaCard.js

@@ -6,6 +6,8 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
@@ -20,6 +22,7 @@ import CardAsync from '@atlaskit/media-card/cardLoader';
 import { CardLoading } from '@atlaskit/media-card/cardLoading';
 import CardSync from '@atlaskit/media-card/cardSync';
 import { MediaClientContext } from '@atlaskit/media-client-react/media-client-provider';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import AnalyticsContext from '../analytics/analyticsContext';
 export var mediaIdentifierMap = new Map();
@@ -52,6 +55,38 @@ export var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(do
   }, []);
 };
 
+/**
+ * `mediaIdentifierMap` is the Media Viewer's nav list, but a `Map` can only append —
+ * a card that unmounts and re-registers lands last, scrambling nav order. Rebuild it
+ * in document order; entries from other renderers on the page keep their old order.
+ */
+var restoreDocumentOrder = function restoreDocumentOrder(docIdentifiers) {
+  var documentKeys = new Set(docIdentifiers.map(function (identifier) {
+    return identifier.mediaItemType === 'file' ? identifier.id : identifier.dataURI;
+  }).filter(function (key) {
+    return mediaIdentifierMap.has(key);
+  }));
+  var currentKeys = Array.from(mediaIdentifierMap.keys());
+  var orderedKeys = [].concat(_toConsumableArray(documentKeys), _toConsumableArray(currentKeys.filter(function (key) {
+    return !documentKeys.has(key);
+  })));
+  if (orderedKeys.every(function (key, index) {
+    return key === currentKeys[index];
+  })) {
+    return;
+  }
+  var orderedEntries = orderedKeys.map(function (key) {
+    return [key, mediaIdentifierMap.get(key)];
+  });
+  mediaIdentifierMap.clear();
+  orderedEntries.forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      identifier = _ref2[1];
+    mediaIdentifierMap.set(key, identifier);
+  });
+};
+
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var MediaCardView = /*#__PURE__*/function (_Component) {
@@ -64,7 +99,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
     _this = _callSuper(this, MediaCardView, [].concat(args));
     _defineProperty(_this, "state", {});
     _defineProperty(_this, "saveFileState", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
         var _this$props, collectionName, mediaClient, options, fileState, _t;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -98,7 +133,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         }, _callee, null, [[1, 4]]);
       }));
       return function (_x) {
-        return _ref.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }());
     _defineProperty(_this, "onError", function (reason) {
@@ -165,7 +200,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _this$props6, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache, _t2, _t3;
+        var _this$props6, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache, docIdentifiers, _t2, _t3;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -185,7 +220,8 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
             case 2:
               nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
               if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
-                getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(function (identifier) {
+                docIdentifiers = getListOfIdentifiersFromDoc(rendererContext.adDoc);
+                docIdentifiers.forEach(function (identifier) {
                   if (identifier.mediaItemType === 'file' && identifier.id === id) {
                     mediaIdentifierMap.set(identifier.id, _objectSpread(_objectSpread({}, identifier), {}, {
                       collectionName: collectionName
@@ -194,6 +230,11 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
                     mediaIdentifierMap.set(identifier.dataURI, identifier);
                   }
                 });
+                // Reordering affects prev/next nav in every overlay viewer on the page, so gate it
+                // to the media-comments sidebar experiment that needs it; otherwise keep legacy order.
+                if (isExperimentEnabled('cc_comments_media_viewer_sidebar')) {
+                  restoreDocumentOrder(docIdentifiers);
+                }
               }
               if (id) {
                 this.saveFileState(id);
@@ -391,13 +432,13 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
   }]);
 }(Component);
 // Needed for copy & paste
-export var getClipboardAttrs = function getClipboardAttrs(_ref2) {
-  var id = _ref2.id,
-    alt = _ref2.alt,
-    collection = _ref2.collection,
-    contextIdentifierProvider = _ref2.contextIdentifierProvider,
-    originalDimensions = _ref2.originalDimensions,
-    fileState = _ref2.fileState;
+export var getClipboardAttrs = function getClipboardAttrs(_ref4) {
+  var id = _ref4.id,
+    alt = _ref4.alt,
+    collection = _ref4.collection,
+    contextIdentifierProvider = _ref4.contextIdentifierProvider,
+    originalDimensions = _ref4.originalDimensions,
+    fileState = _ref4.fileState;
   var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
   var width = originalDimensions && originalDimensions.width;
   var height = originalDimensions && originalDimensions.height;
@@ -425,8 +466,8 @@ export var getClipboardAttrs = function getClipboardAttrs(_ref2) {
 };
 export var MediaCardInternal = function MediaCardInternal(props) {
   var mediaClient = useContext(MediaClientContext);
-  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref3) {
-    var fireAnalyticsEvent = _ref3.fireAnalyticsEvent;
+  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref5) {
+    var fireAnalyticsEvent = _ref5.fireAnalyticsEvent;
     return /*#__PURE__*/React.createElement(MediaCardView
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css9, _$concat3, _$concat5;
+var _css0, _$concat3, _$concat5;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -547,6 +547,16 @@ var headingWrapperInlineFlowStyles = css(_defineProperty(_defineProperty(_define
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginTop: '1.59091em'
 }));
+var headingAnchorWrapperTargetSizeStyles = css(_defineProperty({
+  '& .renderer-heading-wrapper > h1, & .renderer-heading-wrapper > h2, & .renderer-heading-wrapper > h3, & .renderer-heading-wrapper > h4, & .renderer-heading-wrapper > h5, & .renderer-heading-wrapper > h6': {
+    verticalAlign: 'middle'
+  }
+}, "& .renderer-heading-wrapper > .".concat(HeadingAnchorWrapperClassName), {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  verticalAlign: 'middle'
+}));
 var headingWithAlignmentStylesDuplicateAnchor = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-block-mark.fabric-editor-alignment:not(:first-child)': {
@@ -637,13 +647,13 @@ var paragraphStylesUGCScaledMargin = css({
     marginBottom: 0
   }
 });
-var listsSharedStyles = css((_css9 = {
+var listsSharedStyles = css((_css0 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(listItemCounterPadding, "px)")
   }
-}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css9, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css0, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
   /*
   Ensures list item content adheres to the list's margin instead
   of filling the entire block row. This is important to allow
@@ -675,7 +685,7 @@ var listsSharedStyles = css((_css9 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), _defineProperty(_defineProperty(_defineProperty(_css9, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), _defineProperty(_defineProperty(_defineProperty(_css0, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -2306,7 +2316,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- CSS custom properties for UGC font tokens
       '--ak-renderer-editor-font-small-text': editorUGCTokensRefreshed['editor.font.body.small']
     },
-    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max') && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
+    css: [expValEquals('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, fontSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, headingAnchorButtonFocusVisibleStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max') && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, isExperimentEnabled('platform_editor_heading_link_target_size') && headingAnchorWrapperTargetSizeStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && extensionStyle, contentMode === 'compact' ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, listItemHiddenMarkerStyles, indentationSharedStyles, indentationSharedStylesWithMarginFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, !expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && highlightLinksUnsetStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning

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

@@ -61,7 +61,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 = "141.0.7";
+var packageVersion = "142.0.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/actions/index.d.ts

@@ -1,3 +1,4 @@
+import type { AnnotationId } from '@atlaskit/adf-schema/annotation';
 import { AnnotationTypes } from '@atlaskit/adf-schema/annotation';
 import type { AnnotationActionResult, AnnotationByMatches, SelectionContext } from '@atlaskit/editor-common/types';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer/types';
@@ -17,6 +18,21 @@ type Annotation = {
     annotationId: string;
     annotationType: AnnotationTypes;
 };
+export type MediaNodeContext = {
+    annotationIds: AnnotationId[];
+    displayText?: string;
+    fileId: string;
+    occurrenceKey?: string;
+    position: number;
+};
+export type MediaNodeContextResult = {
+    context: MediaNodeContext;
+    status: 'resolved';
+} | {
+    status: 'missing';
+} | {
+    status: 'ambiguous';
+};
 interface RendererActionsOptions {
     annotate: (range: Range, annotationId: string, annotationType: 'inlineComment') => ActionResult;
     deleteAnnotation: (annotationId: string, annotationType: 'inlineComment') => ActionResult;
@@ -68,6 +84,10 @@ export default class RendererActions implements RendererActionsOptions, Annotati
     getPositionFromRange(range: Range | null): Position | false;
     getSelectionContext(): SelectionContext | null;
     getAnnotationMarks(): Mark[];
+    getMediaNodeContext(identifier: {
+        id: string;
+        occurrenceKey?: string;
+    }): MediaNodeContextResult;
     getAnnotationsByPosition(range: Range): string[];
     applyAnnotation(pos: Position, annotation: Annotation): AnnotationActionResult;
     generateAnnotationIndexMatch(pos: Position): AnnotationByMatches | false;

package/dist/types/react/nodes/heading-anchor-button.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { ButtonHTMLAttributes, JSX } from 'react';
+/** Heading link button with a minimum 24px pointer target. */
+export default function HeadingAnchorButton(props: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;

package/dist/types/react/nodes/media/index.d.ts

@@ -12,6 +12,7 @@ import type { LinkDefinition } from '@atlaskit/adf-schema/link';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { MediaViewerExtensions } from '@atlaskit/media-viewer/types';
 import type { AnalyticsEventPayload } from '../../../analytics/events';
 import type { MediaRenderEvent } from '../../../types/mediaOptions';
 import type { MediaCardProps } from '../../../ui/MediaCard';
@@ -31,6 +32,8 @@ export type MediaProps = MediaCardProps & {
     isLinkMark: () => boolean;
     marks: Array<LinkDefinition | BorderMarkDefinition | AnnotationMarkDefinition | DataConsumerDefinition>;
     mediaSingleElement?: HTMLElement | null;
+    /** Extensions for the media viewer (e.g. sidebar with comment indicator). */
+    mediaViewerExtensions?: MediaViewerExtensions;
     onMediaRenderEvent?: (event: MediaRenderEvent) => void;
     providers?: ProviderFactory;
     width?: number;

package/dist/types/types/mediaOptions.d.ts

@@ -39,7 +39,9 @@ export interface MediaOptions {
      */
     fallbackMediaNameFetcher?: (id: string) => Promise<string>;
     featureFlags?: MediaFeatureFlags;
-    /** Extensions for the media viewer header (e.g. comment navigation button). */
+    /** Extensions for the media viewer (e.g. header action buttons, sidebar with comment indicator).
+     * When provided, the media viewer will use these extensions for all media items.
+     * Use headerActions.isVisible to control per-item header action visibility. */
     mediaViewerExtensions?: MediaViewerExtensions;
     /** Receives lifecycle events for each rendered media node. */
     onMediaRenderEvent?: (event: MediaRenderEvent) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "142.0.0",
+	"version": "142.1.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -53,7 +53,7 @@
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/link": "^5.1.0",
-		"@atlaskit/link-datasource": "^6.13.0",
+		"@atlaskit/link-datasource": "^6.14.0",
 		"@atlaskit/link-extractors": "^4.2.0",
 		"@atlaskit/linking-common": "^12.3.0",
 		"@atlaskit/media-card": "^81.12.0",
@@ -69,12 +69,12 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.13.0",
-		"@atlaskit/smart-card": "^45.25.0",
+		"@atlaskit/smart-card": "^45.28.0",
 		"@atlaskit/status": "^5.12.0",
 		"@atlaskit/task-decision": "^21.10.0",
 		"@atlaskit/theme": "^28.2.0",
 		"@atlaskit/tmp-editor-statsig": "^202.0.0",
-		"@atlaskit/tokens": "^18.2.0",
+		"@atlaskit/tokens": "^18.3.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -88,7 +88,7 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.6.0",
+		"@atlaskit/editor-common": "^123.7.0",
 		"@atlaskit/link-provider": "^5.7.0",
 		"@atlaskit/media-core": "^38.2.0",
 		"react": "^18.2.0 || ^19.2.0",