@atlaskit/renderer 111.0.1 → 111.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/renderer
 
+## 111.1.0
+
+### Minor Changes
+
+- [#147660](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147660)
+  [`a407a8fbc874b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a407a8fbc874b) -
+  ED-24365 Support commenting inside bodied extension content in the Renderer
+
+### Patch Changes
+
+- Updated dependencies
+
+## 111.0.2
+
+### Patch Changes
+
+- [#147547](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147547)
+  [`46defc30fb9dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/46defc30fb9dd) -
+  Cleanup of a FF for comments on media bug fix
+- Updated dependencies
+
 ## 111.0.1
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -281,7 +281,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
     }
   }, {
     key: "applyAnnotation",
-    value: function applyAnnotation(pos, annotation, isCommentsOnMediaBugFixEnabled) {
+    value: function applyAnnotation(pos, annotation) {
       if (!this.doc || !pos || !this.schema) {
         return false;
       }
@@ -291,13 +291,10 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
         annotationType = annotation.annotationType;
       var step;
       var targetNodeType;
-      var beforeNodePos = isCommentsOnMediaBugFixEnabled ?
+
       // As part of fix for RAP, `from` points to the position right before media node
       // hence, -1 is not needed
-      from :
-      // If from points to a node position,
-      // we need to 1 position before it for nodeAt to return the node itself
-      Math.max(from - 1, 0);
+      var beforeNodePos = from;
       var possibleNode = this.doc.nodeAt(beforeNodePos);
       if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
         targetNodeType = 'media';
@@ -340,7 +337,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
         numMatches: numMatches,
         matchIndex: matchIndex,
         pos: blockNodePos
-      }, isCommentsOnMediaBugFixEnabled && {
+      }, {
         targetNodeType: targetNodeType
       });
     }

package/dist/cjs/react/index.js

@@ -13,6 +13,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _links = require("./utils/links");
 var _nodes = require("./nodes");
 var _textWrapper = _interopRequireDefault(require("./nodes/text-wrapper"));
@@ -57,7 +58,6 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "allowWrapCodeBlock", false);
     (0, _defineProperty2.default)(this, "allowPlaceholderText", true);
     (0, _defineProperty2.default)(this, "allowCustomPanels", false);
-    (0, _defineProperty2.default)(this, "startPos", 1);
     (0, _defineProperty2.default)(this, "surroundTextNodesWithTextWrapper", false);
     (0, _defineProperty2.default)(this, "allowAnnotations", false);
     (0, _defineProperty2.default)(this, "serializeFragmentChild", function (node, _ref) {
@@ -161,6 +161,13 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       });
       return props;
     });
+    if ((0, _experiments.editorExperiment)('comment_on_bodied_extensions', true)) {
+      this.initStartPos = init.startPos || 1;
+      this.startPos = init.startPos || 1;
+    } else {
+      this.initStartPos = 1;
+      this.startPos = 1;
+    }
     this.providers = init.providers;
     this.eventHandlers = init.eventHandlers;
     this.extensionHandlers = init.extensionHandlers;
@@ -198,7 +205,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     value: function resetState() {
       this.headingIds = [];
       this.expandHeadingIds = [];
-      this.startPos = 1;
+      this.startPos = this.initStartPos;
     }
   }, {
     key: "getNodeProps",
@@ -531,6 +538,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     key: "getProps",
     value: function getProps(node) {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var startPos = this.startPos + path.length;
       return _objectSpread({
         text: node.text,
         providers: this.providers,
@@ -553,8 +561,9 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         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
+          'data-renderer-start-pos': startPos
         },
+        startPos: startPos,
         path: path
       }, node.attrs);
     }

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

@@ -13,6 +13,7 @@ var _ErrorBoundary = require("../../ui/Renderer/ErrorBoundary");
 var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
 var _enums = require("../../analytics/enums");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _annotations = require("../../ui/annotations");
 var BodiedExtension = function BodiedExtension(props) {
   var children = props.children,
     _props$layout = props.layout,
@@ -31,6 +32,10 @@ var BodiedExtension = function BodiedExtension(props) {
     componentId: _analytics.ACTION_SUBJECT_ID.EXTENSION_BODIED,
     createAnalyticsEvent: createAnalyticsEvent,
     additionalInfo: "".concat(extensionType, ": ").concat(extensionKey, " ")
+  }, /*#__PURE__*/_react.default.createElement(_annotations.AnnotationsPositionContext.Provider, {
+    value: {
+      startPos: props.startPos + 1
+    }
   }, /*#__PURE__*/_react.default.createElement(_ExtensionRenderer.default, (0, _extends2.default)({}, props, {
     type: "bodiedExtension"
   }), function (_ref) {
@@ -51,6 +56,6 @@ var BodiedExtension = function BodiedExtension(props) {
     return (0, _extension.renderExtension)(children, layout, {
       isTopLevel: path.length < 1
     }, removeOverflow);
-  }));
+  })));
 };
 var _default = exports.default = BodiedExtension;

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

@@ -407,8 +407,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var draftPosition = _react.default.useContext(_context.AnnotationsDraftContext);
-  var providers = (0, _react.useContext)(_context.ProvidersContext);
-  var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
   var _useState9 = (0, _react.useState)(),
@@ -424,7 +422,7 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
     if (pos === undefined) {
       return;
     }
-    var posToCheck = isCommentsOnMediaBugFixEnabled ? ((_draftPosition$from = draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) !== null && _draftPosition$from !== void 0 ? _draftPosition$from : 0) + 1 : draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from;
+    var posToCheck = ((_draftPosition$from = draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) !== null && _draftPosition$from !== void 0 ? _draftPosition$from : 0) + 1;
     if (draftPosition !== null && posToCheck === pos) {
       setShouldApplyDraftAnnotation(true);
       setPosition(posToCheck);
@@ -432,7 +430,7 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
+  }, [draftPosition, pos, shouldApplyDraftAnnotation]);
   var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   var dataAttributesWithDraftAnnotation = (0, _react.useMemo)(function () {
     return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {

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

@@ -5,7 +5,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultNodeComponents = exports.default = exports.RendererWithAnalytics = exports.Renderer = exports.NORMAL_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = void 0;
+exports.NORMAL_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = void 0;
+exports.Renderer = Renderer;
+exports.defaultNodeComponents = exports.default = exports.__RendererClassComponent = exports.RendererWithAnalytics = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,6 +21,7 @@ var _react2 = require("@emotion/react");
 var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 var _traverse = require("@atlaskit/adf-utils/traverse");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ui = require("@atlaskit/editor-common/ui");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -63,14 +66,18 @@ 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 = "111.0.1";
+var packageVersion = "111.1.0";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
-var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(Renderer, _PureComponent);
-  var _super = _createSuper(Renderer);
-  function Renderer(props) {
+
+/**
+ * Exported due to enzyme test reliance on this component.
+ */
+var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(__RendererClassComponent, _PureComponent);
+  var _super = _createSuper(__RendererClassComponent);
+  function __RendererClassComponent(props) {
     var _this;
-    (0, _classCallCheck2.default)(this, Renderer);
+    (0, _classCallCheck2.default)(this, __RendererClassComponent);
     _this = _super.call(this, props);
     /**
      * This is used in measuring the Renderer Mount time and is then
@@ -169,7 +176,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
     }
     return _this;
   }
-  (0, _createClass2.default)(Renderer, [{
+  (0, _createClass2.default)(__RendererClassComponent, [{
     key: "anchorLinkAnalytics",
     value: function anchorLinkAnalytics() {
       var hash = window.location.hash && decodeURIComponent(window.location.hash.slice(1));
@@ -257,6 +264,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
       var _this$featureFlags = this.featureFlags(props.featureFlags),
         featureFlags = _this$featureFlags.featureFlags;
       return {
+        startPos: props.startPos,
         providers: this.providerFactory,
         eventHandlers: props.eventHandlers,
         extensionHandlers: props.extensionHandlers,
@@ -445,8 +453,21 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
       }
     }
   }]);
-  return Renderer;
+  return __RendererClassComponent;
 }(_react.PureComponent);
+function Renderer(props) {
+  var _React$useContext = _react.default.useContext(_annotations.AnnotationsPositionContext),
+    startPos = _React$useContext.startPos;
+
+  // eslint-disable-next-line react/jsx-pascal-case
+  return (0, _react2.jsx)(__RendererClassComponent, (0, _extends2.default)({}, props, {
+    startPos: startPos
+  }));
+}
+
+// Usage notes:
+// Used by Confluence for View page renderer
+// For the nested renderers - see RendererWithAnnotationSelection.
 var RendererWithAnalytics = exports.RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
   return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
     data: {
@@ -560,25 +581,54 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     })
   }, children))));
 });
+var RootRendererContext = /*#__PURE__*/_react.default.createContext(null);
 function RendererActionsInternalUpdater(_ref) {
   var children = _ref.children,
     doc = _ref.doc,
     schema = _ref.schema,
     onAnalyticsEvent = _ref.onAnalyticsEvent;
+  var rootRendererContextValue = _react.default.useContext(RootRendererContext);
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
   var rendererRef = (0, _react.useRef)(null);
+
+  // This doc is used by the renderer actions when applying comments to the document.
+  // (via hand crafted steps based on non prosemirror based position calculations)
+  // It is set to the root renderer's doc as otherwise the resulting document will
+  // be incorrect (nested renderers use a fake document which represents a subset
+  // of the actual document).
+  var _doc;
+  if ((0, _experiments.editorExperiment)('comment_on_bodied_extensions', true) && rootRendererContextValue) {
+    // If rootRendererContextValue is set -- we are inside a nested renderer
+    // and should always use the doc from the root renderer
+    _doc = rootRendererContextValue.doc;
+  } else {
+    // If rootRendererContextValue is not set -- we are in the root renderer
+    // and set the doc to the current doc.
+    _doc = doc;
+  }
   (0, _react.useLayoutEffect)(function () {
-    if (doc) {
-      actions._privateRegisterRenderer(rendererRef, doc, schema, onAnalyticsEvent);
+    if (_doc) {
+      actions._privateRegisterRenderer(rendererRef, _doc, schema, onAnalyticsEvent);
     } else {
       actions._privateUnregisterRenderer();
     }
     return function () {
       return actions._privateUnregisterRenderer();
     };
-  }, [actions, schema, doc, onAnalyticsEvent]);
+  }, [actions, schema, _doc, onAnalyticsEvent]);
+  if ((0, _experiments.editorExperiment)('comment_on_bodied_extensions', true)) {
+    return (0, _react2.jsx)(RootRendererContext.Provider, {
+      value: {
+        doc: _doc
+      }
+    }, children);
+  }
   return children;
 }
+
+// Usage notes:
+// Used by Confluence for nested renderers
+// For the View page renderer - see RendererWithAnalytics
 var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(props) {
   var allowAnnotations = props.allowAnnotations,
     adfDocument = props.document;

package/dist/cjs/ui/annotations/hover/mounter.js

@@ -13,7 +13,6 @@ var _draft = require("../draft");
 var _types = require("@atlaskit/analytics-listeners/types");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _RendererActionsContext = require("../../RendererActionsContext");
-var _context = require("../context");
 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 && {}.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; }
 var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props) {
@@ -34,8 +33,6 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
     draftDocumentPosition = _useState2[0],
     setDraftDocumentPosition = _useState2[1];
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
-  var providers = (0, _react.useContext)(_context.ProvidersContext);
-  var isCommentsOnMediaBugFixEnabled = Boolean(providers === null || providers === void 0 ? void 0 : providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var onCreateCallback = (0, _react.useCallback)(function (annotationId) {
     if (!isAnnotationAllowed || !documentPosition || !applyAnnotation) {
       return false;
@@ -53,8 +50,8 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
         eventType: _analytics.EVENT_TYPE.TRACK
       }).fire(_types.FabricChannel.editor);
     }
-    return applyAnnotation(draftDocumentPosition || documentPosition, annotation, isCommentsOnMediaBugFixEnabled);
-  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent, isCommentsOnMediaBugFixEnabled]);
+    return applyAnnotation(draftDocumentPosition || documentPosition, annotation);
+  }, [isAnnotationAllowed, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent]);
   var createIndexCallback = (0, _react.useCallback)(function () {
     if (!documentPosition || !generateIndexMatch) {
       return false;
@@ -110,8 +107,8 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
       annotationId: options.annotationId,
       annotationType: _adfSchema.AnnotationTypes.INLINE_COMMENT
     };
-    return applyAnnotation(positionToAnnotate, annotation, isCommentsOnMediaBugFixEnabled);
-  }, [documentPosition, isAnnotationAllowed, applyAnnotationDraftAt, createAnalyticsEvent, applyAnnotation, draftDocumentPosition, isCommentsOnMediaBugFixEnabled, actions, range]);
+    return applyAnnotation(positionToAnnotate, annotation);
+  }, [documentPosition, isAnnotationAllowed, applyAnnotationDraftAt, createAnalyticsEvent, applyAnnotation, draftDocumentPosition, actions, range]);
   var removeDraftModeCallback = (0, _react.useCallback)(function () {
     clearAnnotationDraft();
     setDraftDocumentPosition(null);

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "AnnotationMark", {
     return _element.MarkElement;
   }
 });
-exports.AnnotationsWrapper = void 0;
+exports.AnnotationsWrapper = exports.AnnotationsPositionContext = void 0;
 Object.defineProperty(exports, "TextWithAnnotationDraft", {
   enumerable: true,
   get: function get() {
@@ -40,6 +40,14 @@ var LoadAnnotations = /*#__PURE__*/_react.default.memo(function (_ref) {
   });
   return null;
 });
+
+// This is used by renderers when setting the data-start-pos attribute on commentable nodes
+// By default it is 1 (the possible starting position of any document).
+// The bodied extension component then sets a new value for this context based on its on position
+// in the document.
+var AnnotationsPositionContext = exports.AnnotationsPositionContext = /*#__PURE__*/_react.default.createContext({
+  startPos: 1
+});
 var AnnotationsWrapper = exports.AnnotationsWrapper = function AnnotationsWrapper(props) {
   var _annotationProvider$i, _annotationProvider$i2;
   var children = props.children,

package/dist/cjs/ui/annotations/selection/mounter.js

@@ -15,7 +15,6 @@ var _types = require("@atlaskit/analytics-listeners/types");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _getRendererRangeInlineNodeNames = require("../../../actions/get-renderer-range-inline-node-names");
 var _RendererActionsContext = require("../../RendererActionsContext");
-var _context = require("../context");
 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 && {}.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; }
 var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#__PURE__*/_react.default.memo(function (props) {
@@ -36,8 +35,6 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
     draftDocumentPosition = _useState2[0],
     setDraftDocumentPosition = _useState2[1];
   var actions = (0, _react.useContext)(_RendererActionsContext.RendererContext);
-  var providers = (0, _react.useContext)(_context.ProvidersContext);
-  var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var inlineNodeTypes = (0, _react.useMemo)(function () {
     if ((0, _platformFeatureFlags.fg)('annotations_defensive_node_name_calculations')) {
       if (!actions.isRangeAnnotatable(range)) {
@@ -89,8 +86,8 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
         eventType: _analytics.EVENT_TYPE.TRACK
       }).fire(_types.FabricChannel.editor);
     }
-    return applyAnnotation(positionToAnnotate, annotation, isCommentsOnMediaBugFixEnabled);
-  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent, isCommentsOnMediaBugFixEnabled, inlineNodeTypes]);
+    return applyAnnotation(positionToAnnotate, annotation);
+  }, [actions, documentPosition, applyAnnotation, draftDocumentPosition, createAnalyticsEvent, inlineNodeTypes]);
   var createIndexCallback = (0, _react.useCallback)(function () {
     if (!documentPosition || !generateIndexMatch) {
       return false;
@@ -149,8 +146,8 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
       annotationId: options.annotationId,
       annotationType: _adfSchema.AnnotationTypes.INLINE_COMMENT
     };
-    return applyAnnotation(positionToAnnotate, annotation, isCommentsOnMediaBugFixEnabled);
-  }, [documentPosition, isAnnotationAllowed, applyAnnotationDraftAt, createAnalyticsEvent, applyAnnotation, draftDocumentPosition, isCommentsOnMediaBugFixEnabled, actions, range, inlineNodeTypes]);
+    return applyAnnotation(positionToAnnotate, annotation);
+  }, [documentPosition, isAnnotationAllowed, applyAnnotationDraftAt, createAnalyticsEvent, applyAnnotation, draftDocumentPosition, actions, range, inlineNodeTypes]);
   var removeDraftModeCallback = (0, _react.useCallback)(function () {
     clearAnnotationDraft();
     setDraftDocumentPosition(null);

package/dist/es2019/actions/index.js

@@ -253,7 +253,7 @@ export default class RendererActions {
     }
     return getAnnotationIdsFromRange(pos, this.doc, this.schema);
   }
-  applyAnnotation(pos, annotation, isCommentsOnMediaBugFixEnabled) {
+  applyAnnotation(pos, annotation) {
     if (!this.doc || !pos || !this.schema) {
       return false;
     }
@@ -267,13 +267,10 @@ export default class RendererActions {
     } = annotation;
     let step;
     let targetNodeType;
-    const beforeNodePos = isCommentsOnMediaBugFixEnabled ?
+
     // As part of fix for RAP, `from` points to the position right before media node
     // hence, -1 is not needed
-    from :
-    // If from points to a node position,
-    // we need to 1 position before it for nodeAt to return the node itself
-    Math.max(from - 1, 0);
+    const beforeNodePos = from;
     const possibleNode = this.doc.nodeAt(beforeNodePos);
     if ((possibleNode === null || possibleNode === void 0 ? void 0 : possibleNode.type.name) === 'media') {
       targetNodeType = 'media';
@@ -318,9 +315,9 @@ export default class RendererActions {
       numMatches,
       matchIndex,
       pos: blockNodePos,
-      ...(isCommentsOnMediaBugFixEnabled && {
+      ...{
         targetNodeType
-      })
+      }
     };
   }
   generateAnnotationIndexMatch(pos) {

package/dist/es2019/react/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { MarkType } from '@atlaskit/editor-prosemirror/model';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isNestedHeaderLinksEnabled } from './utils/links';
 import { Doc, DocWithSelectAllTrap, mergeTextNodes, isTextWrapper, isTextNode, toReact } from './nodes';
 import TextWrapperComponent from './nodes/text-wrapper';
@@ -41,7 +42,6 @@ export default class ReactSerializer {
     _defineProperty(this, "allowWrapCodeBlock", false);
     _defineProperty(this, "allowPlaceholderText", true);
     _defineProperty(this, "allowCustomPanels", false);
-    _defineProperty(this, "startPos", 1);
     _defineProperty(this, "surroundTextNodesWithTextWrapper", false);
     _defineProperty(this, "allowAnnotations", false);
     _defineProperty(this, "serializeFragmentChild", (node, {
@@ -147,6 +147,13 @@ export default class ReactSerializer {
       };
       return props;
     });
+    if (editorExperiment('comment_on_bodied_extensions', true)) {
+      this.initStartPos = init.startPos || 1;
+      this.startPos = init.startPos || 1;
+    } else {
+      this.initStartPos = 1;
+      this.startPos = 1;
+    }
     this.providers = init.providers;
     this.eventHandlers = init.eventHandlers;
     this.extensionHandlers = init.extensionHandlers;
@@ -182,7 +189,7 @@ export default class ReactSerializer {
   resetState() {
     this.headingIds = [];
     this.expandHeadingIds = [];
-    this.startPos = 1;
+    this.startPos = this.initStartPos;
   }
   getNodeProps(node, parentInfo) {
     const path = parentInfo ? parentInfo.path : undefined;
@@ -463,6 +470,7 @@ export default class ReactSerializer {
     };
   }
   getProps(node, path = []) {
+    const startPos = this.startPos + path.length;
     return {
       text: node.text,
       providers: this.providers,
@@ -485,8 +493,9 @@ export default class ReactSerializer {
       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
+        'data-renderer-start-pos': startPos
       },
+      startPos,
       path,
       ...node.attrs
     };

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

@@ -6,6 +6,7 @@ import { ErrorBoundary } from '../../ui/Renderer/ErrorBoundary';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { ACTION_SUBJECT } from '../../analytics/enums';
 import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { AnnotationsPositionContext } from '../../ui/annotations';
 const BodiedExtension = props => {
   const {
     children,
@@ -23,6 +24,10 @@ const BodiedExtension = props => {
     componentId: ACTION_SUBJECT_ID.EXTENSION_BODIED,
     createAnalyticsEvent: createAnalyticsEvent,
     additionalInfo: `${extensionType}: ${extensionKey} `
+  }, /*#__PURE__*/React.createElement(AnnotationsPositionContext.Provider, {
+    value: {
+      startPos: props.startPos + 1
+    }
   }, /*#__PURE__*/React.createElement(ExtensionRenderer, _extends({}, props, {
     type: "bodiedExtension"
   }), ({
@@ -44,6 +49,6 @@ const BodiedExtension = props => {
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1
     }, removeOverflow);
-  }));
+  })));
 };
 export default BodiedExtension;

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

@@ -6,7 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxFrag
  */
 
-import React, { PureComponent, Fragment, useEffect, useState, useMemo, useContext } from 'react';
+import React, { PureComponent, Fragment, useEffect, useState, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
@@ -20,7 +20,7 @@ import { getEventHandler } from '../../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
-import { AnnotationsDraftContext, ProvidersContext } from '../../../ui/annotations/context';
+import { AnnotationsDraftContext } from '../../../ui/annotations/context';
 import { CommentBadge as CommentBadgeComponent, CommentBadgeNext, ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
@@ -371,8 +371,6 @@ class Media extends PureComponent {
 }
 const MediaWithDraftAnnotation = props => {
   const draftPosition = React.useContext(AnnotationsDraftContext);
-  const providers = useContext(ProvidersContext);
-  const isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   const {
     dataAttributes
   } = props;
@@ -384,7 +382,7 @@ const MediaWithDraftAnnotation = props => {
     if (pos === undefined) {
       return;
     }
-    const posToCheck = isCommentsOnMediaBugFixEnabled ? ((_draftPosition$from = draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) !== null && _draftPosition$from !== void 0 ? _draftPosition$from : 0) + 1 : draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from;
+    const posToCheck = ((_draftPosition$from = draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from) !== null && _draftPosition$from !== void 0 ? _draftPosition$from : 0) + 1;
     if (draftPosition !== null && posToCheck === pos) {
       setShouldApplyDraftAnnotation(true);
       setPosition(posToCheck);
@@ -392,7 +390,7 @@ const MediaWithDraftAnnotation = props => {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
+  }, [draftPosition, pos, shouldApplyDraftAnnotation]);
   const applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   const dataAttributesWithDraftAnnotation = useMemo(() => applyDraftAnnotation ? {
     ...dataAttributes,