@atlaskit/renderer 111.0.2 → 111.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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

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/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.2";
+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/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/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/ui/Renderer/index.js

@@ -10,6 +10,7 @@ import { jsx } from '@emotion/react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, shouldForceTracking } from '@atlaskit/editor-common/utils';
@@ -33,7 +34,7 @@ import { Provider as SmartCardStorageProvider } from '../SmartCardStorage';
 import { BreakoutSSRInlineScript } from './breakout-ssr';
 import { RendererActionsContext, RendererContext as ActionsContext } from '../RendererActionsContext';
 import { ActiveHeaderIdProvider } from '../active-header-id-provider';
-import { AnnotationsWrapper } from '../annotations';
+import { AnnotationsPositionContext, AnnotationsWrapper } from '../annotations';
 import { getActiveHeadingId, isNestedHeaderLinksEnabled } from '../../react/utils/links';
 import { findInTree } from '../../utils';
 import { isInteractiveElement } from './click-to-edit';
@@ -45,9 +46,13 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "111.0.2";
+const packageVersion = "111.1.0";
 export const defaultNodeComponents = nodeToReact;
-export class Renderer extends PureComponent {
+
+/**
+ * Exported due to enzyme test reliance on this component.
+ */
+export class __RendererClassComponent extends PureComponent {
   constructor(props) {
     super(props);
     /**
@@ -236,6 +241,7 @@ export class Renderer extends PureComponent {
       featureFlags
     } = this.featureFlags(props.featureFlags);
     return {
+      startPos: props.startPos,
       providers: this.providerFactory,
       eventHandlers: props.eventHandlers,
       extensionHandlers: props.extensionHandlers,
@@ -422,6 +428,20 @@ export class Renderer extends PureComponent {
     }
   }
 }
+export function Renderer(props) {
+  const {
+    startPos
+  } = React.useContext(AnnotationsPositionContext);
+
+  // eslint-disable-next-line react/jsx-pascal-case
+  return jsx(__RendererClassComponent, _extends({}, props, {
+    startPos: startPos
+  }));
+}
+
+// Usage notes:
+// Used by Confluence for View page renderer
+// For the nested renderers - see RendererWithAnnotationSelection.
 export const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorAnalyticsContext, {
   data: {
     appearance: getAnalyticsAppearance(props.appearance),
@@ -533,24 +553,53 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     })
   }, children))));
 });
+const RootRendererContext = /*#__PURE__*/React.createContext(null);
 function RendererActionsInternalUpdater({
   children,
   doc,
   schema,
   onAnalyticsEvent
 }) {
+  const rootRendererContextValue = React.useContext(RootRendererContext);
   const actions = useContext(ActionsContext);
   const rendererRef = 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).
+  let _doc;
+  if (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;
+  }
   useLayoutEffect(() => {
-    if (doc) {
-      actions._privateRegisterRenderer(rendererRef, doc, schema, onAnalyticsEvent);
+    if (_doc) {
+      actions._privateRegisterRenderer(rendererRef, _doc, schema, onAnalyticsEvent);
     } else {
       actions._privateUnregisterRenderer();
     }
     return () => actions._privateUnregisterRenderer();
-  }, [actions, schema, doc, onAnalyticsEvent]);
+  }, [actions, schema, _doc, onAnalyticsEvent]);
+  if (editorExperiment('comment_on_bodied_extensions', true)) {
+    return jsx(RootRendererContext.Provider, {
+      value: {
+        doc: _doc
+      }
+    }, children);
+  }
   return children;
 }
+
+// Usage notes:
+// Used by Confluence for nested renderers
+// For the View page renderer - see RendererWithAnalytics
 const RendererWithAnnotationSelection = props => {
   const {
     allowAnnotations,

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

@@ -20,6 +20,14 @@ const LoadAnnotations = /*#__PURE__*/React.memo(({
   });
   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.
+export const AnnotationsPositionContext = /*#__PURE__*/React.createContext({
+  startPos: 1
+});
 export const AnnotationsWrapper = props => {
   var _annotationProvider$i, _annotationProvider$i2;
   const {

package/dist/esm/react/index.js

@@ -9,6 +9,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import 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';
@@ -50,7 +51,6 @@ var ReactSerializer = /*#__PURE__*/function () {
     _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", function (node, _ref) {
@@ -154,6 +154,13 @@ var ReactSerializer = /*#__PURE__*/function () {
       });
       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;
@@ -191,7 +198,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     value: function resetState() {
       this.headingIds = [];
       this.expandHeadingIds = [];
-      this.startPos = 1;
+      this.startPos = this.initStartPos;
     }
   }, {
     key: "getNodeProps",
@@ -524,6 +531,7 @@ var ReactSerializer = /*#__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,
@@ -546,8 +554,9 @@ var ReactSerializer = /*#__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/esm/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';
 var BodiedExtension = function BodiedExtension(props) {
   var children = props.children,
     _props$layout = props.layout,
@@ -24,6 +25,10 @@ var BodiedExtension = function BodiedExtension(props) {
     componentId: ACTION_SUBJECT_ID.EXTENSION_BODIED,
     createAnalyticsEvent: createAnalyticsEvent,
     additionalInfo: "".concat(extensionType, ": ").concat(extensionKey, " ")
+  }, /*#__PURE__*/React.createElement(AnnotationsPositionContext.Provider, {
+    value: {
+      startPos: props.startPos + 1
+    }
   }, /*#__PURE__*/React.createElement(ExtensionRenderer, _extends({}, props, {
     type: "bodiedExtension"
   }), function (_ref) {
@@ -44,6 +49,6 @@ var BodiedExtension = function BodiedExtension(props) {
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1
     }, removeOverflow);
-  }));
+  })));
 };
 export default BodiedExtension;

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

@@ -20,6 +20,7 @@ import { jsx } from '@emotion/react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, shouldForceTracking } from '@atlaskit/editor-common/utils';
@@ -43,7 +44,7 @@ import { Provider as SmartCardStorageProvider } from '../SmartCardStorage';
 import { BreakoutSSRInlineScript } from './breakout-ssr';
 import { RendererActionsContext, RendererContext as ActionsContext } from '../RendererActionsContext';
 import { ActiveHeaderIdProvider } from '../active-header-id-provider';
-import { AnnotationsWrapper } from '../annotations';
+import { AnnotationsPositionContext, AnnotationsWrapper } from '../annotations';
 import { getActiveHeadingId, isNestedHeaderLinksEnabled } from '../../react/utils/links';
 import { findInTree } from '../../utils';
 import { isInteractiveElement } from './click-to-edit';
@@ -55,14 +56,18 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "111.0.2";
+var packageVersion = "111.1.0";
 export var defaultNodeComponents = nodeToReact;
-export var Renderer = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Renderer, _PureComponent);
-  var _super = _createSuper(Renderer);
-  function Renderer(props) {
+
+/**
+ * Exported due to enzyme test reliance on this component.
+ */
+export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
+  _inherits(__RendererClassComponent, _PureComponent);
+  var _super = _createSuper(__RendererClassComponent);
+  function __RendererClassComponent(props) {
     var _this;
-    _classCallCheck(this, Renderer);
+    _classCallCheck(this, __RendererClassComponent);
     _this = _super.call(this, props);
     /**
      * This is used in measuring the Renderer Mount time and is then
@@ -161,7 +166,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
     }
     return _this;
   }
-  _createClass(Renderer, [{
+  _createClass(__RendererClassComponent, [{
     key: "anchorLinkAnalytics",
     value: function anchorLinkAnalytics() {
       var hash = window.location.hash && decodeURIComponent(window.location.hash.slice(1));
@@ -249,6 +254,7 @@ export var 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,
@@ -437,8 +443,21 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
       }
     }
   }]);
-  return Renderer;
+  return __RendererClassComponent;
 }(PureComponent);
+export function Renderer(props) {
+  var _React$useContext = React.useContext(AnnotationsPositionContext),
+    startPos = _React$useContext.startPos;
+
+  // eslint-disable-next-line react/jsx-pascal-case
+  return jsx(__RendererClassComponent, _extends({}, props, {
+    startPos: startPos
+  }));
+}
+
+// Usage notes:
+// Used by Confluence for View page renderer
+// For the nested renderers - see RendererWithAnnotationSelection.
 export var RendererWithAnalytics = /*#__PURE__*/React.memo(function (props) {
   return jsx(FabricEditorAnalyticsContext, {
     data: {
@@ -552,25 +571,54 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     })
   }, children))));
 });
+var RootRendererContext = /*#__PURE__*/React.createContext(null);
 function RendererActionsInternalUpdater(_ref) {
   var children = _ref.children,
     doc = _ref.doc,
     schema = _ref.schema,
     onAnalyticsEvent = _ref.onAnalyticsEvent;
+  var rootRendererContextValue = React.useContext(RootRendererContext);
   var actions = useContext(ActionsContext);
   var rendererRef = 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 (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;
+  }
   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 (editorExperiment('comment_on_bodied_extensions', true)) {
+    return 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/esm/ui/annotations/index.js

@@ -19,6 +19,14 @@ var LoadAnnotations = /*#__PURE__*/React.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.
+export var AnnotationsPositionContext = /*#__PURE__*/React.createContext({
+  startPos: 1
+});
 export var AnnotationsWrapper = function AnnotationsWrapper(props) {
   var _annotationProvider$i, _annotationProvider$i2;
   var children = props.children,

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

@@ -12,6 +12,12 @@ import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 export interface ReactSerializerInit {
+    /**
+     * Used for to set positions on nodes for annotations.
+     *
+     * When not provided defaults to 1.
+     */
+    startPos?: number;
     providers?: ProviderFactory;
     eventHandlers?: EventHandlers;
     extensionHandlers?: ExtensionHandlers;
@@ -79,6 +85,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private allowAltTextOnImages?;
     private stickyHeaders?;
     private allowMediaLinking?;
+    private initStartPos;
     private startPos;
     private surroundTextNodesWithTextWrapper;
     private media?;

package/dist/types/react/nodes/bodiedExtension.d.ts

@@ -19,6 +19,7 @@ interface Props {
     layout?: ExtensionLayout;
     localId?: string;
     marks?: PMMark[];
+    startPos: number;
 }
 declare const BodiedExtension: (props: React.PropsWithChildren<Props>) => JSX.Element;
 export default BodiedExtension;

package/dist/types/ui/Renderer/index.d.ts

@@ -9,7 +9,12 @@ import type { RendererProps } from '../renderer-props';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export declare const defaultNodeComponents: NodeComponentsProps;
-export declare class Renderer extends PureComponent<RendererProps> {
+/**
+ * Exported due to enzyme test reliance on this component.
+ */
+export declare class __RendererClassComponent extends PureComponent<RendererProps & {
+    startPos?: number;
+}> {
     private providerFactory;
     private serializer;
     private editorRef;
@@ -21,10 +26,14 @@ export declare class Renderer extends PureComponent<RendererProps> {
      * deleted once that measurement occurs.
      */
     private renderedMeasurementDistortedDurationMonitor?;
-    constructor(props: RendererProps);
+    constructor(props: RendererProps & {
+        startPos: number;
+    });
     private anchorLinkAnalytics;
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: RendererProps): void;
+    UNSAFE_componentWillReceiveProps(nextProps: RendererProps & {
+        startPos: number;
+    }): void;
     private deriveSerializerProps;
     private featureFlags;
     private fireAnalyticsEvent;
@@ -34,6 +43,7 @@ export declare class Renderer extends PureComponent<RendererProps> {
     render(): jsx.JSX.Element;
     componentWillUnmount(): void;
 }
+export declare function Renderer(props: RendererProps): jsx.JSX.Element;
 export declare const RendererWithAnalytics: React.MemoExoticComponent<(props: RendererProps) => jsx.JSX.Element>;
 declare const RendererWithAnnotationSelection: (props: RendererProps) => jsx.JSX.Element;
 export default RendererWithAnnotationSelection;

package/dist/types/ui/annotations/index.d.ts

@@ -1,5 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { type AnnotationsWrapperProps } from './types';
+export declare const AnnotationsPositionContext: React.Context<{
+    startPos: number;
+}>;
 export declare const AnnotationsWrapper: (props: AnnotationsWrapperProps) => JSX.Element;
 export { TextWithAnnotationDraft } from './draft';
 export { MarkElement as AnnotationMark } from './element';

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

@@ -15,10 +15,18 @@ export type AnnotationsWrapperProps = React.PropsWithChildren<{
     adfDocument: JSONDocNode;
     annotationProvider: AnnotationProviders | null | undefined;
     rendererRef: React.RefObject<HTMLDivElement>;
+    /**
+     * This is set (by consumers) for nested renderers when they are
+     * rendering bodied extension content.
+     */
     isNestedRender: boolean;
     onLoadComplete?: ({ numberOfUnresolvedInlineComments, }: {
         numberOfUnresolvedInlineComments: number;
     }) => void;
+    /**
+     * This is set internally -- and should not be set by consumers.
+     */
+    _startPos?: number;
 }>;
 export type TextPosition = {
     start: number;

package/dist/types-ts4.5/react/index.d.ts

@@ -12,6 +12,12 @@ import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 export interface ReactSerializerInit {
+    /**
+     * Used for to set positions on nodes for annotations.
+     *
+     * When not provided defaults to 1.
+     */
+    startPos?: number;
     providers?: ProviderFactory;
     eventHandlers?: EventHandlers;
     extensionHandlers?: ExtensionHandlers;
@@ -79,6 +85,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private allowAltTextOnImages?;
     private stickyHeaders?;
     private allowMediaLinking?;
+    private initStartPos;
     private startPos;
     private surroundTextNodesWithTextWrapper;
     private media?;

package/dist/types-ts4.5/react/nodes/bodiedExtension.d.ts

@@ -19,6 +19,7 @@ interface Props {
     layout?: ExtensionLayout;
     localId?: string;
     marks?: PMMark[];
+    startPos: number;
 }
 declare const BodiedExtension: (props: React.PropsWithChildren<Props>) => JSX.Element;
 export default BodiedExtension;

package/dist/types-ts4.5/ui/Renderer/index.d.ts

@@ -9,7 +9,12 @@ import type { RendererProps } from '../renderer-props';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export declare const defaultNodeComponents: NodeComponentsProps;
-export declare class Renderer extends PureComponent<RendererProps> {
+/**
+ * Exported due to enzyme test reliance on this component.
+ */
+export declare class __RendererClassComponent extends PureComponent<RendererProps & {
+    startPos?: number;
+}> {
     private providerFactory;
     private serializer;
     private editorRef;
@@ -21,10 +26,14 @@ export declare class Renderer extends PureComponent<RendererProps> {
      * deleted once that measurement occurs.
      */
     private renderedMeasurementDistortedDurationMonitor?;
-    constructor(props: RendererProps);
+    constructor(props: RendererProps & {
+        startPos: number;
+    });
     private anchorLinkAnalytics;
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: RendererProps): void;
+    UNSAFE_componentWillReceiveProps(nextProps: RendererProps & {
+        startPos: number;
+    }): void;
     private deriveSerializerProps;
     private featureFlags;
     private fireAnalyticsEvent;
@@ -34,6 +43,7 @@ export declare class Renderer extends PureComponent<RendererProps> {
     render(): jsx.JSX.Element;
     componentWillUnmount(): void;
 }
+export declare function Renderer(props: RendererProps): jsx.JSX.Element;
 export declare const RendererWithAnalytics: React.MemoExoticComponent<(props: RendererProps) => jsx.JSX.Element>;
 declare const RendererWithAnnotationSelection: (props: RendererProps) => jsx.JSX.Element;
 export default RendererWithAnnotationSelection;

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

@@ -1,5 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { type AnnotationsWrapperProps } from './types';
+export declare const AnnotationsPositionContext: React.Context<{
+    startPos: number;
+}>;
 export declare const AnnotationsWrapper: (props: AnnotationsWrapperProps) => JSX.Element;
 export { TextWithAnnotationDraft } from './draft';
 export { MarkElement as AnnotationMark } from './element';

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

@@ -15,10 +15,18 @@ export type AnnotationsWrapperProps = React.PropsWithChildren<{
     adfDocument: JSONDocNode;
     annotationProvider: AnnotationProviders | null | undefined;
     rendererRef: React.RefObject<HTMLDivElement>;
+    /**
+     * This is set (by consumers) for nested renderers when they are
+     * rendering bodied extension content.
+     */
     isNestedRender: boolean;
     onLoadComplete?: ({ numberOfUnresolvedInlineComments, }: {
         numberOfUnresolvedInlineComments: number;
     }) => void;
+    /**
+     * This is set internally -- and should not be set by consumers.
+     */
+    _startPos?: number;
 }>;
 export type TextPosition = {
     start: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "111.0.2",
+	"version": "111.1.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"