@atlaskit/renderer 109.31.3 → 109.32.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 109.32.0
+
+### Minor Changes
+
+- [#108459](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108459)
+  [`dff16b735e876`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dff16b735e876) -
+  [ED-23613] Avoid blending background color when inline comments overlap with highlights
+- [#108623](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108623)
+  [`5af1dca5d4168`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5af1dca5d4168) -
+  [ux] ED-23616 Introduces support in renderer for commenting on status, emoji, date and mention
+  nodes.
+
+### Patch Changes
+
+- [#108623](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108623)
+  [`2d2feeab0d09c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2d2feeab0d09c) -
+  [ux] ED-23420 Fix various issues with commenting on inline cards in renderer.
+- Updated dependencies
+
 ## 109.31.3
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -205,7 +205,7 @@ var ReactSerializer = exports.default = /*#__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':
@@ -369,9 +369,15 @@ var ReactSerializer = exports.default = /*#__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/cjs/react/nodes/date.js

@@ -6,53 +6,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DateComponent = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _reactIntlNext = require("react-intl-next");
 var _TaskItemsFormatContext = require("../../ui/TaskItemsFormatContext");
+var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var Date = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(Date, _PureComponent);
-  var _super = _createSuper(Date);
-  function Date() {
-    (0, _classCallCheck2.default)(this, Date);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(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 && (0, _utils.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.default.createElement("span", {
-          className: _styles.DateSharedCssClassName.DATE_WRAPPER
-        }, /*#__PURE__*/_react.default.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 ? (0, _utils.timestampToTaskContext)(timestamp, intl) : (0, _utils.timestampToString)(timestamp, intl)))
-      );
-    }
-  }]);
-  return Date;
-}(_react.PureComponent);
+var Date = /*#__PURE__*/(0, _react.memo)(function Date(props) {
+  var inlineAnnotationProps = (0, _useInlineAnnotationProps.useInlineAnnotationProps)(props, {
+    isInlineCard: false
+  });
+  var timestamp = props.timestamp,
+    parentIsIncompleteTask = props.parentIsIncompleteTask,
+    intl = props.intl;
+  var className = !!parentIsIncompleteTask && (0, _utils.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.default.createElement("span", (0, _extends2.default)({
+      className: _styles.DateSharedCssClassName.DATE_WRAPPER
+    }, inlineAnnotationProps), /*#__PURE__*/_react.default.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 ? (0, _utils.timestampToTaskContext)(timestamp, intl) : (0, _utils.timestampToString)(timestamp, intl)))
+  );
+});
 var DateComponent = exports.DateComponent = (0, _reactIntlNext.injectIntl)(Date);
 function DateWithFormatContext(props) {
   var _useTaskItemsFormatCo = (0, _TaskItemsFormatContext.useTaskItemsFormatContext)(),

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

@@ -1,49 +1,49 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _react2 = require("react");
 var _emoji = require("@atlaskit/editor-common/emoji");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var EmojiItem = exports.default = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiItem, _PureComponent);
-  var _super = _createSuper(EmojiItem);
-  function EmojiItem() {
-    (0, _classCallCheck2.default)(this, EmojiItem);
-    return _super.apply(this, arguments);
+var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
+/** @jsx jsx */
+
+function EmojiItem(props) {
+  var id = props.id,
+    providers = props.providers,
+    shortName = props.shortName,
+    text = props.text,
+    fitToHeight = props.fitToHeight,
+    resourceConfig = props.resourceConfig;
+  var inlineAnnotationProps = (0, _useInlineAnnotationProps.useInlineAnnotationProps)(props, {
+    isInlineCard: false
+  });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return (0, _react.jsx)("span", inlineAnnotationProps, (0, _react.jsx)(_emoji.Emoji, {
+      allowTextFallback: true,
+      id: id,
+      shortName: shortName,
+      fallback: text,
+      providers: providers,
+      fitToHeight: fitToHeight,
+      resourceConfig: resourceConfig
+    }));
   }
-  (0, _createClass2.default)(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.default.createElement(_emoji.Emoji, {
-        allowTextFallback: true,
-        id: id,
-        shortName: shortName,
-        fallback: text,
-        providers: providers,
-        fitToHeight: fitToHeight,
-        resourceConfig: resourceConfig
-      });
-    }
-  }]);
-  return EmojiItem;
-}(_react.PureComponent);
+  return (0, _react.jsx)(_emoji.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 = {};
+var _default = exports.default = /*#__PURE__*/(0, _react2.memo)(EmojiItem);

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

@@ -10,25 +10,14 @@ var _react = require("@emotion/react");
 var _smartCard = require("@atlaskit/smart-card");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _ui = require("@atlaskit/editor-common/ui");
-var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _fallback = require("./fallback");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
 /** @jsx jsx */
 
-var annotatedCard = (0, _react.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(_colors.Y75, ")"),
-    borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
-    boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")"),
-    cursor: 'pointer',
-    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
-  }
-});
 var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
@@ -55,21 +44,18 @@ var InlineCard = function InlineCard(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
+  var inlineAnnotationProps = (0, _useInlineAnnotationProps.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
-    (0, _platformFeatureFlags.getBooleanFF)('platform.editor.renderer-inline-card-ssr-fix_kqcwl') ||
-    // eslint-disable-next-line @atlaskit/platform/no-invalid-feature-flag-usage
     (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes')) {
-      return (0, _react.jsx)("span", {
+      return (0, _react.jsx)("span", (0, _extends2.default)({
         "data-inline-card": true,
         "data-card-data": data ? JSON.stringify(data) : undefined,
-        "data-card-url": url,
-        css: annotatedCard
-      }, (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
+        "data-card-url": url
+      }, inlineAnnotationProps), (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
         data: analyticsData
       }, (0, _react.jsx)(_ssr.CardSSR, {
         appearance: "inline",
@@ -101,12 +87,11 @@ var InlineCard = function InlineCard(props) {
   };
   return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
-  }, (0, _react.jsx)("span", {
+  }, (0, _react.jsx)("span", (0, _extends2.default)({
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
-    "data-card-url": url,
-    css: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? annotatedCard : undefined
-  }, (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
+    "data-card-url": url
+  }, inlineAnnotationProps), (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
     unsupportedComponent: _ui.UnsupportedInline
   }, cardProps), (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
     appearance: "inline",

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

@@ -1,48 +1,42 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireWildcard(require("react"));
 var _mention = require("@atlaskit/editor-common/mention");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var MentionItem = exports.default = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(MentionItem, _PureComponent);
-  var _super = _createSuper(MentionItem);
-  function MentionItem() {
-    (0, _classCallCheck2.default)(this, MentionItem);
-    return _super.apply(this, arguments);
+var _default = exports.default = /*#__PURE__*/(0, _react.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 = (0, _useInlineAnnotationProps.useInlineAnnotationProps)(props, {
+    isInlineCard: false
+  });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return /*#__PURE__*/_react.default.createElement("span", inlineAnnotationProps, /*#__PURE__*/_react.default.createElement(_mention.Mention, {
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      providers: providers,
+      localId: localId,
+      eventHandlers: eventHandlers && eventHandlers.mention
+    }));
   }
-  (0, _createClass2.default)(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.default.createElement(_mention.Mention, {
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        providers: providers,
-        localId: localId,
-        eventHandlers: eventHandlers && eventHandlers.mention
-      });
-    }
-  }]);
-  return MentionItem;
-}(_react.PureComponent);
+  return /*#__PURE__*/_react.default.createElement(_mention.Mention, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    providers: providers,
+    localId: localId,
+    eventHandlers: eventHandlers && eventHandlers.mention
+  });
+});

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

@@ -1,48 +1,44 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireWildcard(require("react"));
 var _element = require("@atlaskit/status/element");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var Status = exports.default = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(Status, _PureComponent);
-  var _super = _createSuper(Status);
-  function Status() {
-    (0, _classCallCheck2.default)(this, Status);
-    return _super.apply(this, arguments);
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(function Status(props) {
+  var text = props.text,
+    color = props.color,
+    localId = props.localId;
+  var inlineAnnotationProps = (0, _useInlineAnnotationProps.useInlineAnnotationProps)(props, {
+    isInlineCard: false
+  });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return /*#__PURE__*/_react.default.createElement("span", inlineAnnotationProps, /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
+      data: {
+        userContext: 'document'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_element.Status, {
+      text: text,
+      color: color,
+      localId: localId,
+      role: "presentation"
+    })));
   }
-  (0, _createClass2.default)(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.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
-        data: {
-          userContext: 'document'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_element.Status, {
-        text: text,
-        color: color,
-        localId: localId,
-        role: "presentation"
-      }));
+  return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
+    data: {
+      userContext: 'document'
     }
-  }]);
-  return Status;
-}(_react.PureComponent);
+  }, /*#__PURE__*/_react.default.createElement(_element.Status, {
+    text: text,
+    color: color,
+    localId: localId,
+    role: "presentation"
+  }));
+});

package/dist/cjs/steps/index.js

@@ -78,7 +78,7 @@ function isNodeInlineTextMark(node) {
    * inline text mark.
    **/
 
-  if (hasInlineCardDescendant(node)) {
+  if (hasInlineNodeDescendant(node)) {
     return false;
   }
   return true;
@@ -88,12 +88,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 ((0, _platformFeatureFlags.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;
 }
@@ -126,10 +132,23 @@ function isRoot(element) {
   return !!element && element.classList.contains('ak-renderer-document');
 }
 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 ((0, _platformFeatureFlags.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 = (0, _platformFeatureFlags.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;
   }
@@ -215,7 +234,8 @@ function getPosFromRange(range, isCommentsOnMediaBugFixEnabled, isCommentsOnMedi
     }
   }
   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/cjs/ui/Renderer/index.js

@@ -56,7 +56,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.31.3";
+var packageVersion = "109.32.0";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
@@ -297,6 +297,7 @@ var Renderer = exports.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,
@@ -379,6 +380,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(_providerFactory.ProviderFactoryProvider, {
           value: this.providerFactory
         }, (0, _react2.jsx)(RendererWrapper, {
+          allowAnnotations: allowAnnotations,
           appearance: appearance,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
@@ -417,6 +419,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
           onError(e);
         }
         return (0, _react2.jsx)(RendererWrapper, {
+          allowAnnotations: allowAnnotations,
           appearance: appearance,
           allowCopyToClipboard: allowCopyToClipboard,
           allowWrapCodeBlock: allowWrapCodeBlock,
@@ -545,12 +548,15 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   }, (0, _react2.jsx)("div", {
     ref: innerRef,
     onClick: onClick,
-    onMouseDown: onMouseDown,
+    onMouseDown: onMouseDown
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
     css: (0, _style.rendererStyles)({
       appearance: appearance,
       allowNestedHeaderLinks: allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
-      useBlockRenderForCodeBlock: useBlockRenderForCodeBlock
+      useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
+      allowAnnotations: props.allowAnnotations
     })
   }, children))));
 });