@atlaskit/renderer 115.0.4 → 115.0.6

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

@@ -2,8 +2,9 @@ import React, { useCallback, useContext } from 'react';
 import { AnnotationsDraftContextWrapper, ProvidersContext } from './context';
 import { RangeValidator as HoverRangeValidator } from './hover/range-validator';
 import { SelectionRangeValidator } from './selection/range-validator';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from './contexts/AnnotationRangeContext';
-export const AnnotationsContextWrapper = props => {
+export const AnnotationsContextWrapperOld = props => {
   const providers = useContext(ProvidersContext);
   const {
     range,
@@ -62,4 +63,51 @@ export const AnnotationsContextWrapper = props => {
     clearDraftRange: clearRangeForDraft,
     isNestedRender: isNestedRender
   }, render);
+};
+export const AnnotationsContextWrapperNew = props => {
+  const providers = useContext(ProvidersContext);
+  const {
+    rendererRef,
+    createAnalyticsEvent,
+    children
+  } = props;
+  const inlineCommentProvider = providers && providers.inlineComment;
+  const selectionComponent = inlineCommentProvider && inlineCommentProvider.selectionComponent;
+  const hoverComponent = inlineCommentProvider && inlineCommentProvider.hoverComponent;
+  if (!selectionComponent && !hoverComponent) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children, !!hoverComponent && /*#__PURE__*/React.createElement(HoverRangeValidator, {
+    createAnalyticsEvent: createAnalyticsEvent,
+    rendererRef: rendererRef
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ,
+    component: hoverComponent
+  }), !!selectionComponent && /*#__PURE__*/React.createElement(SelectionRangeValidator, {
+    createAnalyticsEvent: createAnalyticsEvent,
+    rendererRef: rendererRef
+    // Ignored via go/ees005
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ,
+    selectionComponent: selectionComponent
+  }));
+};
+export const AnnotationsContextWrapper = props => {
+  if (fg('platform_renderer_annotation_draft_position_fix')) {
+    // IMPORTANT: Please make sure the AnnotationsDraftContextWrapper is not used anc cleaned up correctly.
+    // This code path completely removes all reliance on that wrapper. Also the applyAnnotationDraftAt & clearAnnotationDraft
+    // properties have been made optional and not used. This means when we cleanup we can also remove those properties.
+    return /*#__PURE__*/React.createElement(AnnotationsContextWrapperNew, {
+      rendererRef: props.rendererRef,
+      createAnalyticsEvent: props.createAnalyticsEvent,
+      isNestedRender: props.isNestedRender
+    }, props.children);
+  } else {
+    return /*#__PURE__*/React.createElement(AnnotationsContextWrapperOld, {
+      rendererRef: props.rendererRef,
+      createAnalyticsEvent: props.createAnalyticsEvent,
+      isNestedRender: props.isNestedRender
+    }, props.children);
+  }
 };

package/dist/esm/actions/index.js

@@ -15,10 +15,6 @@ import { createAnnotationStep, getPosFromRange } from '../steps';
 import { getRendererRangeInlineNodeNames } from './get-renderer-range-inline-node-names';
 import { getIndexMatch } from './matches-utils';
 var RendererActions = /*#__PURE__*/function () {
-  // Any kind of refence is allowed
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
   function RendererActions() {
     var initFromContext = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     _classCallCheck(this, RendererActions);
@@ -26,6 +22,7 @@ var RendererActions = /*#__PURE__*/function () {
     // This module can only be used when wrapped with
     // the <RendererContext> component for now.
     _defineProperty(this, "initFromContext", false);
+    _defineProperty(this, "debugAnalyticLoggingEnabled", false);
     // TODO: EDITOR-595 - This method is temporary and should be removed once the following issue
     // has been identified and fixed: https://atlassian.slack.com/archives/C08JK0WSCH5/p1745902609966999
     // This is a copy of the original canApplyAnnotationOnRange. If that returns false this is run to figure out exactly why
@@ -108,7 +105,7 @@ var RendererActions = /*#__PURE__*/function () {
     key: "_privateValidatePositionsForAnnotation",
     value: function _privateValidatePositionsForAnnotation(from, to) {
       if (!this.doc || !this.schema) {
-        if (this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
+        if (this.debugAnalyticLoggingEnabled && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
           this.onAnalyticsEvent({
             // @ts-ignore
             action: 'failed',
@@ -130,7 +127,7 @@ var RendererActions = /*#__PURE__*/function () {
       }
       var currentSelection = TextSelection.create(this.doc, from, to);
       if (isEmptyTextSelection(currentSelection, this.schema)) {
-        if (this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
+        if (this.debugAnalyticLoggingEnabled && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
           this.onAnalyticsEvent({
             // @ts-ignore
             action: 'failed',
@@ -154,7 +151,7 @@ var RendererActions = /*#__PURE__*/function () {
         from: from,
         to: to
       }, this.doc, this.schema);
-      if (!result && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
+      if (this.debugAnalyticLoggingEnabled && !result && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
         this.onAnalyticsEvent({
           // @ts-ignore
           action: 'failed',
@@ -334,7 +331,7 @@ var RendererActions = /*#__PURE__*/function () {
     key: "isValidAnnotationPosition",
     value: function isValidAnnotationPosition(pos) {
       if (!pos || !this.doc) {
-        if (this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
+        if (this.debugAnalyticLoggingEnabled && this.onAnalyticsEvent && fg('platform_renderer_annotations_create_debug_logging')) {
           this.onAnalyticsEvent({
             // @ts-ignore
             action: 'failed',
@@ -541,6 +538,15 @@ var RendererActions = /*#__PURE__*/function () {
         schema: this.schema
       }, annotationId);
     }
+
+    /**
+     * This is a temporary method used for controlling when extra analytics shoulw be logged.
+     */
+  }, {
+    key: "_setDebugLogging",
+    value: function _setDebugLogging(enabled) {
+      this.debugAnalyticLoggingEnabled = enabled;
+    }
   }]);
 }();
 export { RendererActions as default };

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

@@ -40,6 +40,7 @@ import { injectIntl } from 'react-intl-next';
 import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inline-comments-filter';
 import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
+import { useAnnotationRangeState } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 var linkStyle = css({
   position: 'absolute',
   background: 'transparent',
@@ -421,7 +422,10 @@ var Media = /*#__PURE__*/function (_PureComponent) {
   }]);
 }(PureComponent);
 var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
-  var draftPosition = React.useContext(AnnotationsDraftContext);
+  var draftPositionOld = React.useContext(AnnotationsDraftContext);
+  var _useAnnotationRangeSt = useAnnotationRangeState(),
+    hoverDraftDocumentPosition = _useAnnotationRangeSt.hoverDraftDocumentPosition;
+  var draftPosition = fg('platform_renderer_annotation_draft_position_fix') ? hoverDraftDocumentPosition : draftPositionOld;
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
   var _useState9 = useState(),

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

@@ -380,11 +380,17 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         this.updatedLayout = layout;
       }
 
+      // defined in colgroup.tsx:
+      // appearance == comment && allowTableResizing && means it is a comment
+      // appearance == comment && !allowTableResizing && means it is a inline comment
+      // for inline comments, the table should inherit the width of the parent component rather than maintain its own size
+      var isInsideInlineComment = rendererAppearance === 'comment' && !allowTableResizing;
+
       // These styling removes extra padding for `comment` rendererAppearance.
       // This is especially relevant for Jira which only uses `comment` appearance and does not need padding.
       var resizerContainerPadding = rendererAppearance === 'comment' ? 0 : gutterPadding;
-      var resizerItemMaxWidth = rendererAppearance === 'comment' ? "min(100cqw, var(--ak-editor-table-max-width))" : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))";
-      var resizerItemWidth = rendererAppearance === 'comment' ? "min(100cqw, ".concat(tableWidthAttribute, ")") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")");
+      var resizerItemMaxWidth = rendererAppearance === 'comment' ? isInsideInlineComment ? 'inherit' : "min(100cqw, var(--ak-editor-table-max-width))" : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))";
+      var resizerItemWidth = rendererAppearance === 'comment' ? isInsideInlineComment ? 'inherit' : "min(100cqw, ".concat(tableWidthAttribute, ")") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")");
 
       // full width tables can have either left-aligned or centered layout despite looking centered in the renderer.
       // in these cases, keep the alignment unset
@@ -406,7 +412,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ,
         style: {
-          width: "min(calc(100cqw - ".concat(resizerContainerPadding, "px), ").concat(tableWidthAttribute, ")")
+          width: isInsideInlineComment ? '100%' : "min(calc(100cqw - ".concat(resizerContainerPadding, "px), ").concat(tableWidthAttribute, ")")
         }
       }, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

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

@@ -716,6 +716,11 @@ var smartCardStylesAvatarFix = css(_defineProperty({}, ".".concat(SmartCardShare
   }
   /* EDM-11991: Fix list plugin add padding to ADS AvatarGroup end */
 }));
+var smartCardStylesAvatarMarginFix = css(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER), {
+  'ul, ol': {
+    marginRight: 'inherit'
+  }
+}));
 var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1382,7 +1387,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
         '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
       },
-      css: [baseStyles, fg('platform_hide_heading_anchor_wrapper_before_hover') && hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, fg('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
+      css: [baseStyles, fg('platform_hide_heading_anchor_wrapper_before_hover') && hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, fg('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -50,11 +50,10 @@ import { useMemoFromPropsDerivative } from './useMemoFromPropsDerivative';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "115.0.4";
+var packageVersion = "115.0.6";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
-  containerType: 'inline-size',
-  contain: 'layout style inline-size'
+  containerType: 'inline-size'
 });
 var handleMouseTripleClickInTables = function handleMouseTripleClickInTables(event) {
   var _parentElement, _parentElement2;
@@ -593,10 +592,10 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
   // Otherwise when appearance is unspecified the renderer size is decided by the content.
   // In this case we can't set the container-type = inline-size as it will collapse width to 0.
-  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') &&
+  return appearance === 'comment' &&
   // In case of having excerpt-include on page there are multiple renderers nested.
   // Make sure only the root renderer is set to be query container.
-  isTopLevelRenderer && fg('platform-fix-table-ssr-resizing') ? jsx("div", {
+  isTopLevelRenderer && fg('platform-ssr-table-resize') ? jsx("div", {
     css: setAsQueryContainerStyles
   }, renderer) : renderer;
 });

package/dist/esm/ui/annotations/context.js

@@ -8,10 +8,23 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { createContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-export var AnnotationsDraftContext = /*#__PURE__*/createContext(null);
 export var ProvidersContext = /*#__PURE__*/createContext(null);
 export var InlineCommentsStateContext = /*#__PURE__*/createContext({});
 
+/**
+ * @private
+ * @deprecated The FG platform_renderer_annotation_draft_position_fix will make this context redundant as the draft position
+ * has been moved to the AnnotationRangeProvider in order to be more consistent with the hover and selection ranges.
+ * Once the FG is rolled out this context will be removed. Please ensure any changes are duplicated to the AnnotationRangeProvider.
+ */
+export var AnnotationsDraftContext = /*#__PURE__*/createContext(null);
+
+/**
+ * @private
+ * @deprecated The FG platform_renderer_annotation_draft_position_fix will make this context redundant as the draft position
+ * has been moved to the AnnotationRangeProvider in order to be more consistent with the hover and selection ranges.
+ * Once the FG is rolled out this context will be removed. Please ensure any changes are duplicated to the AnnotationRangeProvider.
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var AnnotationsDraftContextWrapper = /*#__PURE__*/function (_React$Component) {

package/dist/esm/ui/annotations/contexts/AnnotationRangeContext.js

@@ -3,17 +3,22 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _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, { createContext, useCallback, useContext, useMemo, useReducer } from 'react';
-function reducer(state, action) {
+import { fg } from '@atlaskit/platform-feature-flags';
+var initialState = {
+  range: null,
+  draftRange: null,
+  type: null,
+  selectionRange: null,
+  hoverRange: null,
+  selectionDraftRange: null,
+  hoverDraftRange: null,
+  selectionDraftDocumentPosition: null,
+  hoverDraftDocumentPosition: null
+};
+function reducerOld(state, action) {
   switch (action.type) {
     case 'clear':
-      if (!!state.range || !!state.type) {
-        return {
-          range: null,
-          draftRange: null,
-          type: null
-        };
-      }
-      return state;
+      return initialState;
     case 'clearSelection':
       if (state.type === 'selection') {
         return _objectSpread(_objectSpread({}, state), {}, {
@@ -38,11 +43,11 @@ function reducer(state, action) {
       return state;
     case 'clearHover':
       if (state.type === 'hover') {
-        return {
+        return _objectSpread(_objectSpread({}, state), {}, {
           range: null,
           draftRange: null,
           type: null
-        };
+        });
       }
       return state;
     case 'setSelection':
@@ -63,11 +68,11 @@ function reducer(state, action) {
       return state;
     case 'setDraftSelection':
       if (state.draftRange !== action.draftRange || state.type !== 'selection') {
-        return {
+        return _objectSpread(_objectSpread({}, state), {}, {
           range: null,
           draftRange: action.draftRange,
           type: null
-        };
+        });
       }
       return state;
     case 'setDraftHover':
@@ -78,33 +83,128 @@ function reducer(state, action) {
       }
       return state;
   }
+  return state;
+}
+function reducerNew(state, action) {
+  switch (action.type) {
+    case 'clear':
+      return initialState;
+    case 'clearSelection':
+      if (state.selectionRange !== null) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          selectionRange: null,
+          type: state.type === 'selection' ? null : state.type
+        });
+      }
+      return state;
+    case 'clearHover':
+      {
+        if (state.hoverRange !== null) {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            hoverRange: null,
+            type: state.type === 'hover' ? null : state.type
+          });
+        }
+        return state;
+      }
+    case 'setSelection':
+      if (state.selectionRange !== action.range) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          selectionRange: action.range,
+          type: 'selection'
+        });
+      }
+      return state;
+    case 'setHover':
+      if (state.hoverRange !== action.range) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          hoverRange: action.range,
+          type: 'hover'
+        });
+      }
+      return state;
+    case 'promoteSelectionToDraft':
+      // we should only promote the range to a draft if the current range type is a selection
+      // we should also store the promotion type, so that a clear will not accidently clear the draft of a
+      // different type
+      if (state.selectionDraftRange !== state.selectionRange) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          selectionRange: null,
+          type: state.type === 'selection' ? null : state.type,
+          selectionDraftRange: state.selectionRange,
+          selectionDraftDocumentPosition: action.position
+        });
+      }
+      return state;
+    case 'promoteHoverToDraft':
+      if (state.hoverDraftRange !== state.hoverRange) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          hoverRange: null,
+          type: state.type === 'hover' ? null : state.type,
+          hoverDraftRange: state.hoverRange,
+          hoverDraftDocumentPosition: action.position
+        });
+      }
+      return state;
+    case 'clearSelectionDraft':
+      if (state.selectionDraftRange !== null) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          selectionDraftRange: null,
+          selectionDraftDocumentPosition: null
+        });
+      }
+      return state;
+    case 'clearHoverDraft':
+      if (state.hoverDraftRange !== null) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          hoverDraftRange: null,
+          hoverDraftDocumentPosition: null
+        });
+      }
+      return state;
+  }
+  return state;
 }
 var AnnotationRangeStateContext = /*#__PURE__*/createContext({
   range: null,
-  draftRange: null,
-  type: null
+  type: null,
+  selectionDraftRange: null,
+  hoverDraftRange: null,
+  selectionDraftDocumentPosition: null,
+  hoverDraftDocumentPosition: null
 });
 var AnnotationRangeDispatchContext = /*#__PURE__*/createContext({
   clearRange: function clearRange() {},
   clearSelectionRange: function clearSelectionRange() {},
-  clearDraftRange: function clearDraftRange() {},
   clearHoverRange: function clearHoverRange() {},
-  setRange: function setRange() {},
-  setDraftRange: function setDraftRange() {}
+  setSelectionRange: function setSelectionRange() {},
+  // if platform_renderer_annotation_draft_position_fix is off; then
+  setDraftRange: function setDraftRange() {},
+  clearDraftRange: function clearDraftRange() {},
+  // end-if
+
+  // if platform_renderer_annotation_draft_position_fix is on; then
+  promoteSelectionToDraft: function promoteSelectionToDraft() {},
+  promoteHoverToDraft: function promoteHoverToDraft() {},
+  clearSelectionDraft: function clearSelectionDraft() {},
+  clearHoverDraft: function clearHoverDraft() {}
+  // end-if
 });
-export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
+export var AnnotationRangeProviderInner = function AnnotationRangeProviderInner(_ref) {
   var children = _ref.children,
     allowCommentsOnMedia = _ref.allowCommentsOnMedia;
-  var _useReducer = useReducer(reducer, {
-      range: null,
-      draftRange: null,
-      type: null
-    }),
+  var _useReducer = useReducer(fg('platform_renderer_annotation_draft_position_fix') ? reducerNew : reducerOld, initialState),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     _useReducer2$ = _useReducer2[0],
     range = _useReducer2$.range,
     draftRange = _useReducer2$.draftRange,
+    selectionRange = _useReducer2$.selectionRange,
+    hoverRange = _useReducer2$.hoverRange,
     type = _useReducer2$.type,
+    selectionDraftRange = _useReducer2$.selectionDraftRange,
+    selectionDraftDocumentPosition = _useReducer2$.selectionDraftDocumentPosition,
+    hoverDraftRange = _useReducer2$.hoverDraftRange,
+    hoverDraftDocumentPosition = _useReducer2$.hoverDraftDocumentPosition,
     dispatch = _useReducer2[1];
   var clearRange = useCallback(function () {
     return dispatch({
@@ -132,7 +232,7 @@ export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
       type: 'clearHover'
     });
   }, []);
-  var setRange = useCallback(function (range) {
+  var setSelectionRange = useCallback(function (range) {
     return dispatch({
       type: 'setSelection',
       range: range
@@ -165,30 +265,94 @@ export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
       range: range
     });
   }, []);
+  var promoteSelectionToDraft = useCallback(function (position) {
+    dispatch({
+      type: 'promoteSelectionToDraft',
+      position: position
+    });
+  }, []);
+  var clearSelectionDraft = useCallback(function () {
+    dispatch({
+      type: 'clearSelectionDraft'
+    });
+  }, []);
+  var promoteHoverToDraft = useCallback(function (position) {
+    dispatch({
+      type: 'promoteHoverToDraft',
+      position: position
+    });
+  }, []);
+  var clearHoverDraft = useCallback(function () {
+    dispatch({
+      type: 'clearHoverDraft'
+    });
+  }, []);
   var stateData = useMemo(function () {
-    return {
-      range: range,
-      draftRange: draftRange,
-      type: type
-    };
-  }, [range, draftRange, type]);
+    if (fg('platform_renderer_annotation_draft_position_fix')) {
+      return {
+        // We techinically have two ranges, however we only want to expose one of them at a time, because only one draft
+        // can be active at a time. The type of range is used to determine which range is active.
+        range: type === 'selection' ? selectionRange : hoverRange,
+        type: type,
+        selectionDraftRange: selectionDraftRange,
+        hoverDraftRange: hoverDraftRange,
+        selectionDraftDocumentPosition: selectionDraftDocumentPosition,
+        hoverDraftDocumentPosition: hoverDraftDocumentPosition
+      };
+    } else {
+      return {
+        range: range,
+        draftRange: draftRange,
+        type: type,
+        // I've updated some refs to use the new selectionDraftRange, this is being add here to be fowards compatible
+        // with the new changes coming in platform_renderer_annotation_draft_position_fix.
+        selectionDraftRange: draftRange,
+        hoverDraftRange: draftRange,
+        selectionDraftDocumentPosition: null,
+        hoverDraftDocumentPosition: null
+      };
+    }
+  }, [range, draftRange, selectionRange, hoverRange, type, selectionDraftRange, selectionDraftDocumentPosition, hoverDraftRange, hoverDraftDocumentPosition]);
   var dispatchData = useMemo(function () {
     return {
       clearRange: clearRange,
       clearSelectionRange: clearSelectionRange,
       clearDraftRange: clearDraftRange,
       clearHoverRange: clearHoverRange,
-      setRange: setRange,
+      setSelectionRange: setSelectionRange,
       setDraftRange: setDraftRange,
-      setHoverTarget: !!allowCommentsOnMedia ? setHoverTarget : undefined
+      setHoverTarget: !!allowCommentsOnMedia ? setHoverTarget : undefined,
+      promoteSelectionToDraft: promoteSelectionToDraft,
+      promoteHoverToDraft: promoteHoverToDraft,
+      clearSelectionDraft: clearSelectionDraft,
+      clearHoverDraft: clearHoverDraft
     };
-  }, [allowCommentsOnMedia, clearRange, clearSelectionRange, clearDraftRange, clearHoverRange, setRange, setDraftRange, setHoverTarget]);
+  }, [allowCommentsOnMedia, clearRange, clearSelectionRange, clearDraftRange, clearHoverRange, setSelectionRange, setDraftRange, setHoverTarget, promoteSelectionToDraft, promoteHoverToDraft, clearSelectionDraft, clearHoverDraft]);
   return /*#__PURE__*/React.createElement(AnnotationRangeStateContext.Provider, {
     value: stateData
   }, /*#__PURE__*/React.createElement(AnnotationRangeDispatchContext.Provider, {
     value: dispatchData
   }, children));
 };
+export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref2) {
+  var children = _ref2.children,
+    allowCommentsOnMedia = _ref2.allowCommentsOnMedia,
+    isNestedRender = _ref2.isNestedRender;
+  if (fg('platform_renderer_annotation_draft_position_fix')) {
+    /*
+     * If this is a nested render, we do not provide the context
+     * because it has already been provided higher up the component tree
+     * and we need the original context to create annotations on extensions.
+     */
+    return isNestedRender ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(AnnotationRangeProviderInner, {
+      allowCommentsOnMedia: allowCommentsOnMedia
+    }, children);
+  } else {
+    return /*#__PURE__*/React.createElement(AnnotationRangeProviderInner, {
+      allowCommentsOnMedia: allowCommentsOnMedia
+    }, children);
+  }
+};
 export var useAnnotationRangeState = function useAnnotationRangeState() {
   return useContext(AnnotationRangeStateContext);
 };

package/dist/esm/ui/annotations/draft/component.js

@@ -6,6 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { Fragment, useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { InsertDraftPosition } from '../types';
 import { AnnotationsDraftContext } from '../context';
 import { splitText, calcTextSplitOffset, findTextString } from './text';
@@ -14,6 +15,7 @@ import { dataAttributes } from './dom';
 import { segmentText } from '../../../react/utils/segment-text';
 import { renderTextSegments } from '../../../react/utils/render-text-segments';
 import { useAnnotationManagerDispatch } from '../contexts/AnnotationManagerContext';
+import { useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
 
 // Localized AnnotationSharedCSSByState().common and AnnotationSharedCSSByState().focus
 var markStyles = css({
@@ -109,7 +111,10 @@ export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
       end: endPos
     };
   }, [endPos, startPos]);
-  var nextDraftPosition = React.useContext(AnnotationsDraftContext);
+  var nextDraftPositionOld = React.useContext(AnnotationsDraftContext);
+  var _useAnnotationRangeSt = useAnnotationRangeState(),
+    selectionDraftDocumentPosition = _useAnnotationRangeSt.selectionDraftDocumentPosition;
+  var nextDraftPosition = fg('platform_renderer_annotation_draft_position_fix') ? selectionDraftDocumentPosition : nextDraftPositionOld;
   var shouldApplyAnnotationAt = React.useMemo(function () {
     if (!nextDraftPosition) {
       return false;

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

@@ -1,8 +1,12 @@
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { AnnotationsDraftContext } from '../context';
+import { useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
 export function useInlineAnnotationProps(props) {
-  var draftPosition = useContext(AnnotationsDraftContext);
+  var draftPositionOld = useContext(AnnotationsDraftContext);
+  var _useAnnotationRangeSt = useAnnotationRangeState(),
+    selectionDraftDocumentPosition = _useAnnotationRangeSt.selectionDraftDocumentPosition;
+  var draftPosition = fg('platform_renderer_annotation_draft_position_fix') ? selectionDraftDocumentPosition : draftPositionOld;
   if (!fg('editor_inline_comments_on_inline_nodes')) {
     return {};
   }