@atlaskit/renderer 118.2.0 → 118.2.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/renderer
 
+## 118.2.2
+
+### Patch Changes
+
+- [#160385](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160385)
+  [`48d95956a007a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/48d95956a007a) -
+  EDITOR-788 - Renderer comment creation process is broken
+- Updated dependencies
+
+## 118.2.1
+
+### Patch Changes
+
+- [#158353](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158353)
+  [`f2bde4220539c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2bde4220539c) -
+  Fix smart card avatar override with padding and margin
+- [#148691](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148691)
+  [`8c8fad20db912`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c8fad20db912) -
+  Cleanup FG platform_editor_accessible_heading_copy_link
+- Updated dependencies
+
 ## 118.2.0
 
 ### Minor Changes

package/afm-jira/tsconfig.json

@@ -59,6 +59,9 @@
 		{
 			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/link/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../linking-platform/link-datasource/afm-jira/tsconfig.json"
 		},

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

@@ -17,11 +17,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _reactIntlNext = require("react-intl-next");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../messages");
 var _excluded = ["children"];
 /**
@@ -46,7 +44,7 @@ var copyAnchorButtonStyles = (0, _react2.css)({
   outline: 'none',
   backgroundColor: 'transparent',
   border: 'none',
-  color: "var(--ds-icon, ".concat(_colors.N500, ")"),
+  color: "var(--ds-icon, #44546F)",
   cursor: 'pointer',
   right: 0
 });
@@ -121,12 +119,12 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         "aria-hidden": hideFromScreenReader,
         tabIndex: hideFromScreenReader ? undefined : -1,
         "aria-label": hideFromScreenReader ? undefined : _this.state.tooltipMessage,
-        "aria-labelledby": (0, _platformFeatureFlags.fg)('platform_editor_accessible_heading_copy_link') ? hideFromScreenReader ? undefined : headingId : undefined,
+        "aria-labelledby": hideFromScreenReader ? undefined : headingId,
         type: "button"
       }, (0, _react2.jsx)(_link.default, {
         label: _this.getCopyAriaLabel(),
         LEGACY_size: _this.props.level > 3 ? 'small' : 'medium',
-        color: _this.state.isClicked ? "var(--ds-icon-selected, ".concat(_colors.B400, ")") : "var(--ds-icon-subtle, ".concat(_colors.N200, ")")
+        color: _this.state.isClicked ? "var(--ds-icon-selected, #0C66E4)" : "var(--ds-icon-subtle, #626F86)"
       }));
     });
     return _this;

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

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
-var _headingAnchor = _interopRequireDefault(require("./heading-anchor"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
 var _clipboard = require("../utils/clipboard");
+var _headingAnchor = _interopRequireDefault(require("./heading-anchor"));
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var url = new URL(window.location.href);
@@ -81,13 +80,13 @@ function Heading(props) {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
-    hideFromScreenReader: (0, _platformFeatureFlags.fg)('platform_editor_accessible_heading_copy_link')
+    hideFromScreenReader: true
   }), props.children, showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
-    hideFromScreenReader: (0, _platformFeatureFlags.fg)('platform_editor_accessible_heading_copy_link')
-  }))), (0, _platformFeatureFlags.fg)('platform_editor_accessible_heading_copy_link') && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+    hideFromScreenReader: true
+  }))), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
     testId: "visually-hidden-heading-anchor"
   }, showAnchorLink && headingId && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,

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

@@ -716,14 +716,14 @@ var smartCardStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".conc
   margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0 0"),
   maxWidth: "".concat(8 * 95, "px")
 }));
-var smartCardStylesAvatarFix = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.SmartCardSharedCssClassName.LOADER_WRAPPER), {
+var smartCardStylesAvatarFix = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), {
   /* EDM-11991: Fix list plugin adding padding to ADS AvatarGroup start */
   'ul, ol': {
     paddingLeft: 'inherit'
   }
   /* EDM-11991: Fix list plugin add padding to ADS AvatarGroup end */
 }));
-var smartCardStylesAvatarMarginFix = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.SmartCardSharedCssClassName.LOADER_WRAPPER), {
+var smartCardStylesAvatarMarginFix = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), {
   'ul, ol': {
     marginRight: 'inherit'
   }

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

@@ -63,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.2.0";
+var packageVersion = "118.2.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -13,6 +13,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../messages");
+var _AnnotationManagerContext = require("../contexts/AnnotationManagerContext");
 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
@@ -126,6 +127,22 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   var annotationIds = (0, _react.useMemo)(function () {
     return (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
+  var _useAnnotationManager = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
+    dispatch = _useAnnotationManager.dispatch;
+  var _useAnnotationManager2 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
+    currentSelectedAnnotationId = _useAnnotationManager2.currentSelectedAnnotationId;
+
+  // after creating a new annotation, we need to set the markRef to the new mark
+  var markRef = (0, _react.useCallback)(function (node) {
+    if (id === currentSelectedAnnotationId && node) {
+      dispatch({
+        type: 'setSelectedMarkRef',
+        data: {
+          markRef: node
+        }
+      });
+    }
+  }, [dispatch, id, currentSelectedAnnotationId]);
   var onMarkClick = (0, _react.useCallback)(function (event) {
     // prevent inline mark logic for media block marks
     if (event.currentTarget instanceof HTMLElement && event.currentTarget.getAttribute('data-block-mark')) {
@@ -193,6 +210,7 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
     'aria-details': annotationIds.join(', ')
   }, desktopAccessibilityAttributes);
   return (0, _react2.jsx)(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
+    ref: id === currentSelectedAnnotationId ? markRef : undefined,
     id: id
   }, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
     css: [markStyles, (0, _platformFeatureFlags.fg)('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, (0, _platformFeatureFlags.fg)('confluence-frontend-comments-panel') && markStylesWithCommentsPanel, !isMobile() && accessibilityStyles, markStylesWithUpdatedShadow],

package/dist/cjs/ui/annotations/hooks/use-events.js

@@ -124,6 +124,10 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
     };
   }
 };
+var NO_ANNOTATION_SELECTED = {
+  annotations: [],
+  clickElementTarget: undefined
+};
 var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnnotationClickEvent(props) {
   var _useState7 = (0, _react.useState)(null),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
@@ -142,10 +146,11 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
         type: _adfSchema.AnnotationTypes.INLINE_COMMENT
       }],
       clickElementTarget: currentSelectedMarkRef
-    } : {
-      annotations: [],
-      clickElementTarget: undefined
-    };
+    } :
+    // This is a constant to represent the case when no annotation is selected.
+    // When creating a new annotation, currentSelectedAnnotationId and currentSelectedMarkRef will be set one after another,
+    // if this isn't a const, it will cause useMemo to return two different "empty" objects and causes infinite re-renders.
+    NO_ANNOTATION_SELECTED;
   }, [currentSelectedAnnotationId, currentSelectedMarkRef]);
   (0, _react.useLayoutEffect)(function () {
     if (!updateSubscriber || isNestedRender) {

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

@@ -8,11 +8,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { N200, N500, B400 } from '@atlaskit/theme/colors';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { injectIntl } from 'react-intl-next';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import Tooltip from '@atlaskit/tooltip';
-import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
 export const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -31,7 +29,7 @@ const copyAnchorButtonStyles = css({
   outline: 'none',
   backgroundColor: 'transparent',
   border: 'none',
-  color: `var(--ds-icon, ${N500})`,
+  color: "var(--ds-icon, #44546F)",
   cursor: 'pointer',
   right: 0
 });
@@ -86,12 +84,12 @@ class HeadingAnchor extends React.PureComponent {
         "aria-hidden": hideFromScreenReader,
         tabIndex: hideFromScreenReader ? undefined : -1,
         "aria-label": hideFromScreenReader ? undefined : this.state.tooltipMessage,
-        "aria-labelledby": fg('platform_editor_accessible_heading_copy_link') ? hideFromScreenReader ? undefined : headingId : undefined,
+        "aria-labelledby": hideFromScreenReader ? undefined : headingId,
         type: "button"
       }, jsx(LinkIcon, {
         label: this.getCopyAriaLabel(),
         LEGACY_size: this.props.level > 3 ? 'small' : 'medium',
-        color: this.state.isClicked ? `var(--ds-icon-selected, ${B400})` : `var(--ds-icon-subtle, ${N200})`
+        color: this.state.isClicked ? "var(--ds-icon-selected, #0C66E4)" : "var(--ds-icon-subtle, #626F86)"
       }));
     });
   }

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
-import HeadingAnchor from './heading-anchor';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { copyTextToClipboard } from '../utils/clipboard';
+import HeadingAnchor from './heading-anchor';
 const getCurrentUrlWithHash = (hash = '') => {
   const url = new URL(window.location.href);
   url.search = ''; // clear any query params so that the page will correctly scroll to the anchor
@@ -73,13 +72,13 @@ function Heading(props) {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
-    hideFromScreenReader: fg('platform_editor_accessible_heading_copy_link')
+    hideFromScreenReader: true
   }), props.children, showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
-    hideFromScreenReader: fg('platform_editor_accessible_heading_copy_link')
-  }))), fg('platform_editor_accessible_heading_copy_link') && /*#__PURE__*/React.createElement(VisuallyHidden, {
+    hideFromScreenReader: true
+  }))), /*#__PURE__*/React.createElement(VisuallyHidden, {
     testId: "visually-hidden-heading-anchor"
   }, showAnchorLink && headingId && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,

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

@@ -841,7 +841,7 @@ const smartCardStyles = css({
   }
 });
 const smartCardStylesAvatarFix = css({
-  [`.${SmartCardSharedCssClassName.LOADER_WRAPPER}`]: {
+  [`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
     /* EDM-11991: Fix list plugin adding padding to ADS AvatarGroup start */
     'ul, ol': {
       paddingLeft: 'inherit'
@@ -850,7 +850,7 @@ const smartCardStylesAvatarFix = css({
   }
 });
 const smartCardStylesAvatarMarginFix = css({
-  [`.${SmartCardSharedCssClassName.LOADER_WRAPPER}`]: {
+  [`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
     'ul, ol': {
       marginRight: 'inherit'
     }

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

@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "118.2.0";
+const packageVersion = "118.2.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -10,6 +10,7 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIntl } from 'react-intl-next';
 import { inlineCommentMessages } from '../../../messages';
+import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
 const markStyles = css({
   color: 'inherit',
   backgroundColor: 'unset',
@@ -131,6 +132,24 @@ export const MarkComponent = ({
 }) => {
   const intl = useIntl();
   const annotationIds = useMemo(() => [...new Set([...annotationParentIds, id])], [id, annotationParentIds]);
+  const {
+    dispatch
+  } = useAnnotationManagerDispatch();
+  const {
+    currentSelectedAnnotationId
+  } = useAnnotationManagerState();
+
+  // after creating a new annotation, we need to set the markRef to the new mark
+  const markRef = useCallback(node => {
+    if (id === currentSelectedAnnotationId && node) {
+      dispatch({
+        type: 'setSelectedMarkRef',
+        data: {
+          markRef: node
+        }
+      });
+    }
+  }, [dispatch, id, currentSelectedAnnotationId]);
   const onMarkClick = useCallback(event => {
     // prevent inline mark logic for media block marks
     if (event.currentTarget instanceof HTMLElement && event.currentTarget.getAttribute('data-block-mark')) {
@@ -200,6 +219,7 @@ export const MarkComponent = ({
     ...desktopAccessibilityAttributes
   };
   return jsx(useBlockLevel ? 'div' : 'mark', {
+    ref: id === currentSelectedAnnotationId ? markRef : undefined,
     id,
     [fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick']: onMarkClick,
     ...accessibility,

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -118,6 +118,10 @@ export const useHasFocusEvent = ({
     };
   }
 };
+const NO_ANNOTATION_SELECTED = {
+  annotations: [],
+  clickElementTarget: undefined
+};
 export const useAnnotationClickEvent = props => {
   const [annotationClickEvent, setAnnotationClickEvent] = useState(null);
   const {
@@ -136,10 +140,11 @@ export const useAnnotationClickEvent = props => {
         type: AnnotationTypes.INLINE_COMMENT
       }],
       clickElementTarget: currentSelectedMarkRef
-    } : {
-      annotations: [],
-      clickElementTarget: undefined
-    };
+    } :
+    // This is a constant to represent the case when no annotation is selected.
+    // When creating a new annotation, currentSelectedAnnotationId and currentSelectedMarkRef will be set one after another,
+    // if this isn't a const, it will cause useMemo to return two different "empty" objects and causes infinite re-renders.
+    NO_ANNOTATION_SELECTED;
   }, [currentSelectedAnnotationId, currentSelectedMarkRef]);
   useLayoutEffect(() => {
     if (!updateSubscriber || isNestedRender) {

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

@@ -19,11 +19,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { N200, N500, B400 } from '@atlaskit/theme/colors';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { injectIntl } from 'react-intl-next';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import Tooltip from '@atlaskit/tooltip';
-import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
 export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -40,7 +38,7 @@ var copyAnchorButtonStyles = css({
   outline: 'none',
   backgroundColor: 'transparent',
   border: 'none',
-  color: "var(--ds-icon, ".concat(N500, ")"),
+  color: "var(--ds-icon, #44546F)",
   cursor: 'pointer',
   right: 0
 });
@@ -115,12 +113,12 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         "aria-hidden": hideFromScreenReader,
         tabIndex: hideFromScreenReader ? undefined : -1,
         "aria-label": hideFromScreenReader ? undefined : _this.state.tooltipMessage,
-        "aria-labelledby": fg('platform_editor_accessible_heading_copy_link') ? hideFromScreenReader ? undefined : headingId : undefined,
+        "aria-labelledby": hideFromScreenReader ? undefined : headingId,
         type: "button"
       }, jsx(LinkIcon, {
         label: _this.getCopyAriaLabel(),
         LEGACY_size: _this.props.level > 3 ? 'small' : 'medium',
-        color: _this.state.isClicked ? "var(--ds-icon-selected, ".concat(B400, ")") : "var(--ds-icon-subtle, ".concat(N200, ")")
+        color: _this.state.isClicked ? "var(--ds-icon-selected, #0C66E4)" : "var(--ds-icon-subtle, #626F86)"
       }));
     });
     return _this;

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
-import HeadingAnchor from './heading-anchor';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { copyTextToClipboard } from '../utils/clipboard';
+import HeadingAnchor from './heading-anchor';
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var url = new URL(window.location.href);
@@ -74,13 +73,13 @@ function Heading(props) {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
-    hideFromScreenReader: fg('platform_editor_accessible_heading_copy_link')
+    hideFromScreenReader: true
   }), props.children, showAnchorLink && headingId && !isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,
     headingId: headingId,
-    hideFromScreenReader: fg('platform_editor_accessible_heading_copy_link')
-  }))), fg('platform_editor_accessible_heading_copy_link') && /*#__PURE__*/React.createElement(VisuallyHidden, {
+    hideFromScreenReader: true
+  }))), /*#__PURE__*/React.createElement(VisuallyHidden, {
     testId: "visually-hidden-heading-anchor"
   }, showAnchorLink && headingId && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,

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

@@ -709,14 +709,14 @@ var smartCardStyles = css(_defineProperty({}, ".".concat(SmartCardSharedCssClass
   margin: "".concat(blockNodesVerticalMargin, " 0 0"),
   maxWidth: "".concat(8 * 95, "px")
 }));
-var smartCardStylesAvatarFix = css(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER), {
+var smartCardStylesAvatarFix = css(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), {
   /* EDM-11991: Fix list plugin adding padding to ADS AvatarGroup start */
   'ul, ol': {
     paddingLeft: 'inherit'
   }
   /* EDM-11991: Fix list plugin add padding to ADS AvatarGroup end */
 }));
-var smartCardStylesAvatarMarginFix = css(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER), {
+var smartCardStylesAvatarMarginFix = css(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), {
   'ul, ol': {
     marginRight: 'inherit'
   }

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

@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.2.0";
+var packageVersion = "118.2.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -14,6 +14,7 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIntl } from 'react-intl-next';
 import { inlineCommentMessages } from '../../../messages';
+import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
 var markStyles = css(_defineProperty({
   color: 'inherit',
   backgroundColor: 'unset',
@@ -122,6 +123,22 @@ export var MarkComponent = function MarkComponent(_ref) {
   var annotationIds = useMemo(function () {
     return _toConsumableArray(new Set([].concat(_toConsumableArray(annotationParentIds), [id])));
   }, [id, annotationParentIds]);
+  var _useAnnotationManager = useAnnotationManagerDispatch(),
+    dispatch = _useAnnotationManager.dispatch;
+  var _useAnnotationManager2 = useAnnotationManagerState(),
+    currentSelectedAnnotationId = _useAnnotationManager2.currentSelectedAnnotationId;
+
+  // after creating a new annotation, we need to set the markRef to the new mark
+  var markRef = useCallback(function (node) {
+    if (id === currentSelectedAnnotationId && node) {
+      dispatch({
+        type: 'setSelectedMarkRef',
+        data: {
+          markRef: node
+        }
+      });
+    }
+  }, [dispatch, id, currentSelectedAnnotationId]);
   var onMarkClick = useCallback(function (event) {
     // prevent inline mark logic for media block marks
     if (event.currentTarget instanceof HTMLElement && event.currentTarget.getAttribute('data-block-mark')) {
@@ -189,6 +206,7 @@ export var MarkComponent = function MarkComponent(_ref) {
     'aria-details': annotationIds.join(', ')
   }, desktopAccessibilityAttributes);
   return jsx(useBlockLevel ? 'div' : 'mark', _objectSpread(_objectSpread(_objectSpread(_defineProperty({
+    ref: id === currentSelectedAnnotationId ? markRef : undefined,
     id: id
   }, fg('editor_inline_comments_on_inline_nodes') ? 'onClickCapture' : 'onClick', onMarkClick), accessibility), overriddenData), !useBlockLevel && {
     css: [markStyles, fg('platform_renderer_nested_annotation_styling') && markStylesLayeringFix, fg('editor_inline_comments_on_inline_nodes') && markStylesWithInlineComments, fg('confluence-frontend-comments-panel') && markStylesWithCommentsPanel, !isMobile() && accessibilityStyles, markStylesWithUpdatedShadow],

package/dist/esm/ui/annotations/hooks/use-events.js

@@ -117,6 +117,10 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
     };
   }
 };
+var NO_ANNOTATION_SELECTED = {
+  annotations: [],
+  clickElementTarget: undefined
+};
 export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
@@ -135,10 +139,11 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
         type: AnnotationTypes.INLINE_COMMENT
       }],
       clickElementTarget: currentSelectedMarkRef
-    } : {
-      annotations: [],
-      clickElementTarget: undefined
-    };
+    } :
+    // This is a constant to represent the case when no annotation is selected.
+    // When creating a new annotation, currentSelectedAnnotationId and currentSelectedMarkRef will be set one after another,
+    // if this isn't a const, it will cause useMemo to return two different "empty" objects and causes infinite re-renders.
+    NO_ANNOTATION_SELECTED;
   }, [currentSelectedAnnotationId, currentSelectedMarkRef]);
   useLayoutEffect(function () {
     if (!updateSubscriber || isNestedRender) {

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

@@ -27,6 +27,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-id': string;
     'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
     'aria-disabled': boolean;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -41,6 +42,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'aria-disabled': boolean;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -58,6 +60,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -77,6 +80,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -94,6 +98,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded': boolean;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -113,6 +118,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded': boolean;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 }, string | React.JSXElementConstructor<any>>;
 export {};

package/dist/types-ts4.5/ui/annotations/element/mark.d.ts

@@ -27,6 +27,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-id': string;
     'data-mark-annotation-state'?: AnnotationMarkStates | undefined;
     'aria-disabled': boolean;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -41,6 +42,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'data-mark-annotation-type': import("@atlaskit/adf-schema").AnnotationTypes;
     'data-id': string;
     'aria-disabled': boolean;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -58,6 +60,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -77,6 +80,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded'?: undefined;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -94,6 +98,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded': boolean;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 } | {
     css?: (false | import("@emotion/react").SerializedStyles)[] | undefined;
@@ -113,6 +118,7 @@ export declare const MarkComponent: ({ annotationParentIds, children, dataAttrib
     'aria-expanded': boolean;
     'aria-details': string;
     'aria-disabled'?: undefined;
+    ref: ((node: HTMLElement | null) => void) | undefined;
     id: string;
 }, string | React.JSXElementConstructor<any>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "118.2.0",
+	"version": "118.2.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/editor-common": "^105.7.0",
+		"@atlaskit/editor-common": "^105.8.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -48,15 +48,15 @@
 		"@atlaskit/media-common": "^12.1.0",
 		"@atlaskit/media-filmstrip": "^50.1.0",
 		"@atlaskit/media-ui": "^28.2.0",
-		"@atlaskit/media-viewer": "^52.1.0",
+		"@atlaskit/media-viewer": "^52.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/react-ufo": "^3.13.0",
-		"@atlaskit/smart-card": "^38.3.0",
+		"@atlaskit/smart-card": "^38.5.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.22.0",
+		"@atlaskit/tmp-editor-statsig": "^4.25.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -70,7 +70,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/link-provider": "^3.0.0",
+		"@atlaskit/link-provider": "^3.1.0",
 		"@atlaskit/media-core": "^36.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
@@ -81,7 +81,7 @@
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/css-reset": "^7.3.0",
-		"@atlaskit/link-provider": "^3.0.0",
+		"@atlaskit/link-provider": "^3.1.0",
 		"@atlaskit/link-test-helpers": "^8.0.0",
 		"@atlaskit/linking-common": "^9.0.0",
 		"@atlaskit/media-core": "^36.1.0",
@@ -177,9 +177,6 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_editor_accessible_heading_copy_link": {
-			"type": "boolean"
-		},
 		"platform_editor_fix_vc90_bug_with_files": {
 			"type": "boolean"
 		},