@atlaskit/renderer 109.31.3 → 109.32.1

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

@@ -2,8 +2,10 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { fontFamily, fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
 import { getGlobalTheme } from '@atlaskit/tokens';
 import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
@@ -388,6 +390,23 @@ const getShadowOverrides = () => {
 		}
 	`;
 };
+function getAnnotationStyles({
+  allowAnnotations
+}) {
+  if (!getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+    return '';
+  }
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {
+      background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+      borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
+      boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+      cursor: 'pointer',
+      padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"}`
+    }
+  });
+}
 export const rendererStyles = wrapperProps => theme => {
   const {
     colorMode
@@ -483,9 +502,10 @@ export const rendererStyles = wrapperProps => theme => {
 		${shadowSharedStyle};
 		${dateSharedStyle};
 		${textColorStyles};
-		${backgroundColorStyles(colorMode)};
+		${backgroundColorStyles};
 		${tasksAndDecisionsStyles};
 		${smartCardSharedStyles}
+		${getAnnotationStyles(wrapperProps)}
 
 		& .UnknownBlock {
 			font-family: ${fontFamily()};

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

@@ -42,11 +42,21 @@ export const MarkComponent = ({
     if (event.defaultPrevented || state !== AnnotationMarkStates.ACTIVE) {
       return;
     }
-
-    // prevents from opening link URL inside webView in Safari
-    event.preventDefault();
     if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
-      event.stopPropagation();
+      // We only want to interfere with click events if the click is on some ui inside the renderer document
+      // This is to prevent the click events from portaled content (such as link previews and mention profiles)
+      if (event.target instanceof HTMLElement && event.target.closest('.ak-renderer-document')) {
+        if (event.target.closest('[data-mention-id]')) {
+          // don't prevent default for mentions
+        } else {
+          // prevents from opening link URL inside webView in Safari
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      }
+    } else {
+      // prevents from opening link URL inside webView in Safari
+      event.preventDefault();
     }
     onClick({
       eventTarget: event.target,
@@ -69,7 +79,7 @@ export const MarkComponent = ({
     ...accessibility,
     ...overriddenData,
     ...(!useBlockLevel && {
-      css: markStyles
+      css: [markStyles]
     })
   }, children);
 };

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

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { AnnotationsDraftContext } from '../context';
+export function useInlineAnnotationProps(props, {
+  isInlineCard
+}) {
+  const draftPosition = useContext(AnnotationsDraftContext);
+  if (!isInlineCard && !getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return {};
+  }
+  if (!getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+    return {};
+  }
+  if (!props.dataAttributes) {
+    // the inlineCard component is currently used by the block card, embed card and card error boundary components
+    // when used via these components, no dataAttributes are passed (and we don't want it setup for inline comments)
+    return {};
+  }
+  const inlineCardPosition = props.dataAttributes['data-renderer-start-pos'] - 1;
+  const hasDraft = draftPosition && (draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) <= inlineCardPosition && (draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.to) >= inlineCardPosition + 1;
+  if (hasDraft) {
+    return {
+      'data-renderer-mark': true,
+      'data-annotation-draft-mark': true,
+      'data-annotation-inline-node': true,
+      'data-renderer-start-pos': inlineCardPosition
+    };
+  }
+  return {
+    'data-annotation-inline-node': true,
+    'data-annotation-mark': true,
+    'data-renderer-start-pos': inlineCardPosition
+  };
+}

package/dist/esm/react/index.js

@@ -198,7 +198,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var path = parentInfo ? parentInfo.path : undefined;
       switch (node.type.name) {
         case 'date':
-          return this.getDateProps(node, parentInfo);
+          return this.getDateProps(node, parentInfo, path);
         case 'hardBreak':
           return this.getHardBreakProps(node, path);
         case 'heading':
@@ -362,9 +362,15 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getDateProps",
     value: function getDateProps(node, parentInfo) {
+      var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
       return {
         timestamp: node.attrs && node.attrs.timestamp,
-        parentIsIncompleteTask: parentInfo && parentInfo.parentIsIncompleteTask
+        parentIsIncompleteTask: parentInfo && parentInfo.parentIsIncompleteTask,
+        dataAttributes: {
+          // We need to account for depth (path.length gives up depth) here
+          // but depth doesnt increment the pos, only accounted for.
+          'data-renderer-start-pos': this.startPos + path.length
+        }
       };
     }
   }, {

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

@@ -1,49 +1,32 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { PureComponent } from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { memo } from 'react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { isPastDate, timestampToString, timestampToTaskContext } from '@atlaskit/editor-common/utils';
 import { injectIntl } from 'react-intl-next';
 import { useTaskItemsFormatContext } from '../../ui/TaskItemsFormatContext';
-var Date = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Date, _PureComponent);
-  var _super = _createSuper(Date);
-  function Date() {
-    _classCallCheck(this, Date);
-    return _super.apply(this, arguments);
-  }
-  _createClass(Date, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        timestamp = _this$props.timestamp,
-        parentIsIncompleteTask = _this$props.parentIsIncompleteTask,
-        intl = _this$props.intl;
-      var className = !!parentIsIncompleteTask && isPastDate(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        React.createElement("span", {
-          className: DateSharedCssClassName.DATE_WRAPPER
-        }, /*#__PURE__*/React.createElement("span", {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-          className: className,
-          "data-node-type": "date",
-          "data-timestamp": timestamp
-        }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)))
-      );
-    }
-  }]);
-  return Date;
-}(PureComponent);
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+var Date = /*#__PURE__*/memo(function Date(props) {
+  var inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: false
+  });
+  var timestamp = props.timestamp,
+    parentIsIncompleteTask = props.parentIsIncompleteTask,
+    intl = props.intl;
+  var className = !!parentIsIncompleteTask && isPastDate(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement("span", _extends({
+      className: DateSharedCssClassName.DATE_WRAPPER
+    }, inlineAnnotationProps), /*#__PURE__*/React.createElement("span", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: className,
+      "data-node-type": "date",
+      "data-timestamp": timestamp
+    }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)))
+  );
+});
 export var DateComponent = injectIntl(Date);
 function DateWithFormatContext(props) {
   var _useTaskItemsFormatCo = useTaskItemsFormatContext(),

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

@@ -1,41 +1,42 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { PureComponent } from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { memo } from 'react';
 import { Emoji } from '@atlaskit/editor-common/emoji';
-var EmojiItem = /*#__PURE__*/function (_PureComponent) {
-  _inherits(EmojiItem, _PureComponent);
-  var _super = _createSuper(EmojiItem);
-  function EmojiItem() {
-    _classCallCheck(this, EmojiItem);
-    return _super.apply(this, arguments);
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+function EmojiItem(props) {
+  var id = props.id,
+    providers = props.providers,
+    shortName = props.shortName,
+    text = props.text,
+    fitToHeight = props.fitToHeight,
+    resourceConfig = props.resourceConfig;
+  var inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: false
+  });
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return jsx("span", inlineAnnotationProps, jsx(Emoji, {
+      allowTextFallback: true,
+      id: id,
+      shortName: shortName,
+      fallback: text,
+      providers: providers,
+      fitToHeight: fitToHeight,
+      resourceConfig: resourceConfig
+    }));
   }
-  _createClass(EmojiItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        id = _this$props.id,
-        providers = _this$props.providers,
-        shortName = _this$props.shortName,
-        text = _this$props.text,
-        fitToHeight = _this$props.fitToHeight,
-        resourceConfig = _this$props.resourceConfig;
-      return /*#__PURE__*/React.createElement(Emoji, {
-        allowTextFallback: true,
-        id: id,
-        shortName: shortName,
-        fallback: text,
-        providers: providers,
-        fitToHeight: fitToHeight,
-        resourceConfig: resourceConfig
-      });
-    }
-  }]);
-  return EmojiItem;
-}(PureComponent);
-export { EmojiItem as default };
+  return jsx(Emoji, {
+    allowTextFallback: true,
+    id: id,
+    shortName: shortName,
+    fallback: text,
+    providers: providers,
+    fitToHeight: fitToHeight,
+    resourceConfig: resourceConfig
+  });
+}
+
+// Working around an issue with pre existing tests using react-test-renderer
+// https://github.com/facebook/react/issues/17301#issuecomment-557765213
+EmojiItem.defaultProps = {};
+export default /*#__PURE__*/memo(EmojiItem);

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

@@ -1,26 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { Card } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { UnsupportedInline } from '@atlaskit/editor-common/ui';
-import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-var annotatedCard = css({
-  // This is expected to be reworked as part of https://team.atlassian.com/project/ATLAS-61846/updates
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  "[data-mark-type='annotation'][data-mark-annotation-state='active'] &": {
-    background: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
-    borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(Y300, ")")),
-    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")"),
-    cursor: 'pointer',
-    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
-  }
-});
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
 var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
@@ -47,21 +36,18 @@ var InlineCard = function InlineCard(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
+  var inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: true
+  });
   if (ssr && url) {
-    // platform.editor.allow-inline-comments-for-inline-nodes requires this change to work -- however this feature flag is only intended to go to HELLO (and is expected to last for Q4).
-    // platform.editor.renderer-inline-card-ssr-fix_kqcwl is the feature flag that allows this change to be safely released more widely.
-    // Once platform.editor.renderer-inline-card-ssr-fix_kqcwl reaches 100% we can remove both checks
     if (
     // eslint-disable-next-line @atlaskit/platform/no-invalid-feature-flag-usage
-    getBooleanFF('platform.editor.renderer-inline-card-ssr-fix_kqcwl') ||
-    // eslint-disable-next-line @atlaskit/platform/no-invalid-feature-flag-usage
     getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
-      return jsx("span", {
+      return jsx("span", _extends({
         "data-inline-card": true,
         "data-card-data": data ? JSON.stringify(data) : undefined,
-        "data-card-url": url,
-        css: annotatedCard
-      }, jsx(AnalyticsContext, {
+        "data-card-url": url
+      }, inlineAnnotationProps), jsx(AnalyticsContext, {
         data: analyticsData
       }, jsx(CardSSR, {
         appearance: "inline",
@@ -93,12 +79,11 @@ var InlineCard = function InlineCard(props) {
   };
   return jsx(AnalyticsContext, {
     data: analyticsData
-  }, jsx("span", {
+  }, jsx("span", _extends({
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
-    "data-card-url": url,
-    css: getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? annotatedCard : undefined
-  }, jsx(CardErrorBoundary, _extends({
+    "data-card-url": url
+  }, inlineAnnotationProps), jsx(CardErrorBoundary, _extends({
     unsupportedComponent: UnsupportedInline
   }, cardProps), jsx(Card, _extends({
     appearance: "inline",

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

@@ -1,40 +1,33 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { memo } from 'react';
 import { Mention } from '@atlaskit/editor-common/mention';
-var MentionItem = /*#__PURE__*/function (_PureComponent) {
-  _inherits(MentionItem, _PureComponent);
-  var _super = _createSuper(MentionItem);
-  function MentionItem() {
-    _classCallCheck(this, MentionItem);
-    return _super.apply(this, arguments);
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+export default /*#__PURE__*/memo(function MentionItem(props) {
+  var eventHandlers = props.eventHandlers,
+    id = props.id,
+    providers = props.providers,
+    text = props.text,
+    accessLevel = props.accessLevel,
+    localId = props.localId;
+  var inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: false
+  });
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return /*#__PURE__*/React.createElement("span", inlineAnnotationProps, /*#__PURE__*/React.createElement(Mention, {
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      providers: providers,
+      localId: localId,
+      eventHandlers: eventHandlers && eventHandlers.mention
+    }));
   }
-  _createClass(MentionItem, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        eventHandlers = _this$props.eventHandlers,
-        id = _this$props.id,
-        providers = _this$props.providers,
-        text = _this$props.text,
-        accessLevel = _this$props.accessLevel,
-        localId = _this$props.localId;
-      return /*#__PURE__*/React.createElement(Mention, {
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        providers: providers,
-        localId: localId,
-        eventHandlers: eventHandlers && eventHandlers.mention
-      });
-    }
-  }]);
-  return MentionItem;
-}(PureComponent);
-export { MentionItem as default };
+  return /*#__PURE__*/React.createElement(Mention, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    providers: providers,
+    localId: localId,
+    eventHandlers: eventHandlers && eventHandlers.mention
+  });
+});

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

@@ -1,40 +1,35 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { memo } from 'react';
 import { Status as AkStatus } from '@atlaskit/status/element';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
-var Status = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Status, _PureComponent);
-  var _super = _createSuper(Status);
-  function Status() {
-    _classCallCheck(this, Status);
-    return _super.apply(this, arguments);
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+export default /*#__PURE__*/memo(function Status(props) {
+  var text = props.text,
+    color = props.color,
+    localId = props.localId;
+  var inlineAnnotationProps = useInlineAnnotationProps(props, {
+    isInlineCard: false
+  });
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return /*#__PURE__*/React.createElement("span", inlineAnnotationProps, /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+      data: {
+        userContext: 'document'
+      }
+    }, /*#__PURE__*/React.createElement(AkStatus, {
+      text: text,
+      color: color,
+      localId: localId,
+      role: "presentation"
+    })));
   }
-  _createClass(Status, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        text = _this$props.text,
-        color = _this$props.color,
-        localId = _this$props.localId;
-      return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
-        data: {
-          userContext: 'document'
-        }
-      }, /*#__PURE__*/React.createElement(AkStatus, {
-        text: text,
-        color: color,
-        localId: localId,
-        role: "presentation"
-      }));
+  return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+    data: {
+      userContext: 'document'
     }
-  }]);
-  return Status;
-}(PureComponent);
-export { Status as default };
+  }, /*#__PURE__*/React.createElement(AkStatus, {
+    text: text,
+    color: color,
+    localId: localId,
+    role: "presentation"
+  }));
+});

package/dist/esm/steps/index.js

@@ -70,7 +70,7 @@ function isNodeInlineTextMark(node) {
    * inline text mark.
    **/
 
-  if (hasInlineCardDescendant(node)) {
+  if (hasInlineNodeDescendant(node)) {
     return false;
   }
   return true;
@@ -80,12 +80,18 @@ function isNodeInlineTextMark(node) {
  * This checks all the descendents of a node and returns true if it reaches
  * a descendant with the data-inline-card attribute set to 'true'.
  */
-function hasInlineCardDescendant(node) {
+function hasInlineNodeDescendant(node) {
   if (isElementNode(node)) {
-    if (node.dataset.inlineCard === 'true') {
-      return true;
+    if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+      if (node.dataset.annotationInlineNode === 'true') {
+        return true;
+      }
+    } else {
+      if (node.dataset.inlineCard === 'true') {
+        return true;
+      }
     }
-    return Array.from(node.childNodes).some(hasInlineCardDescendant);
+    return Array.from(node.childNodes).some(hasInlineNodeDescendant);
   }
   return false;
 }
@@ -118,10 +124,23 @@ function isRoot(element) {
   return !!element && element.classList.contains('ak-renderer-document');
 }
 export function resolvePos(node, offset) {
+  var findEnd = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   // If the passed node doesn't exist, we should abort
   if (!node) {
     return false;
   }
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+    var _node$parentElement;
+    var startPosAncestor = (_node$parentElement = node.parentElement) === null || _node$parentElement === void 0 ? void 0 : _node$parentElement.closest('[data-renderer-start-pos');
+    var potentialParent = getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? 'data-annotation-mark' : 'data-inline-card';
+    if (startPosAncestor !== null && startPosAncestor !== void 0 && startPosAncestor.hasAttribute(potentialParent)) {
+      if (findEnd) {
+        return parseInt((startPosAncestor === null || startPosAncestor === void 0 ? void 0 : startPosAncestor.getAttribute('data-renderer-start-pos')) || '-1', 10) + 1;
+      } else {
+        return parseInt((startPosAncestor === null || startPosAncestor === void 0 ? void 0 : startPosAncestor.getAttribute('data-renderer-start-pos')) || '-1', 10);
+      }
+    }
+  }
   if (node instanceof HTMLElement && isPositionPointer(node)) {
     return getStartPos(node) + offset;
   }
@@ -207,7 +226,8 @@ export function getPosFromRange(range, isCommentsOnMediaBugFixEnabled, isComment
     }
   }
   var from = resolvePos(startContainer, startOffset);
-  var to = resolvePos(endContainer, endOffset);
+  var findEnd = true;
+  var to = resolvePos(endContainer, endOffset, findEnd);
   if (from === false || to === false) {
     return false;
   }

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

@@ -47,7 +47,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.31.3";
+var packageVersion = "109.32.1";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
@@ -288,6 +288,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         onComplete = _this$props.onComplete,
         onError = _this$props.onError,
         appearance = _this$props.appearance,
+        allowAnnotations = _this$props.allowAnnotations,
         adfStage = _this$props.adfStage,
         truncated = _this$props.truncated,
         maxHeight = _this$props.maxHeight,
@@ -370,6 +371,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         }, jsx(SmartCardStorageProvider, null, jsx(ProviderFactoryProvider, {
           value: this.providerFactory
         }, jsx(RendererWrapper, {
+          allowAnnotations: allowAnnotations,
           appearance: appearance,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
@@ -408,6 +410,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           onError(e);
         }
         return jsx(RendererWrapper, {
+          allowAnnotations: allowAnnotations,
           appearance: appearance,
           allowCopyToClipboard: allowCopyToClipboard,
           allowWrapCodeBlock: allowWrapCodeBlock,
@@ -536,12 +539,15 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   }, jsx("div", {
     ref: innerRef,
     onClick: onClick,
-    onMouseDown: onMouseDown,
+    onMouseDown: onMouseDown
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
     css: rendererStyles({
       appearance: appearance,
       allowNestedHeaderLinks: allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
-      useBlockRenderForCodeBlock: useBlockRenderForCodeBlock
+      useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
+      allowAnnotations: props.allowAnnotations
     })
   }, children))));
 });