@atlaskit/renderer 115.0.5 → 115.0.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/renderer
 
+## 115.0.6
+
+### Patch Changes
+
+- [#152081](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152081)
+  [`703ddc882eae5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/703ddc882eae5) -
+  The annotation draft position has been moved to a high-order context so it can persist across
+  unmounts. The Range context has also been update to support multiple active annotation drafts.
+  This is because currently both the media and selection comments can be opened
+
 ## 115.0.5
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -22,10 +22,6 @@ var _matchesUtils = require("./matches-utils");
 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) { (0, _defineProperty2.default)(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; }
 var RendererActions = exports.default = /*#__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;
     (0, _classCallCheck2.default)(this, RendererActions);
@@ -33,6 +29,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
     // This module can only be used when wrapped with
     // the <RendererContext> component for now.
     (0, _defineProperty2.default)(this, "initFromContext", false);
+    (0, _defineProperty2.default)(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
@@ -115,7 +112,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
     key: "_privateValidatePositionsForAnnotation",
     value: function _privateValidatePositionsForAnnotation(from, to) {
       if (!this.doc || !this.schema) {
-        if (this.onAnalyticsEvent && (0, _platformFeatureFlags.fg)('platform_renderer_annotations_create_debug_logging')) {
+        if (this.debugAnalyticLoggingEnabled && this.onAnalyticsEvent && (0, _platformFeatureFlags.fg)('platform_renderer_annotations_create_debug_logging')) {
           this.onAnalyticsEvent({
             // @ts-ignore
             action: 'failed',
@@ -137,7 +134,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
       }
       var currentSelection = _state.TextSelection.create(this.doc, from, to);
       if ((0, _utils.isEmptyTextSelection)(currentSelection, this.schema)) {
-        if (this.onAnalyticsEvent && (0, _platformFeatureFlags.fg)('platform_renderer_annotations_create_debug_logging')) {
+        if (this.debugAnalyticLoggingEnabled && this.onAnalyticsEvent && (0, _platformFeatureFlags.fg)('platform_renderer_annotations_create_debug_logging')) {
           this.onAnalyticsEvent({
             // @ts-ignore
             action: 'failed',
@@ -161,7 +158,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
         from: from,
         to: to
       }, this.doc, this.schema);
-      if (!result && this.onAnalyticsEvent && (0, _platformFeatureFlags.fg)('platform_renderer_annotations_create_debug_logging')) {
+      if (this.debugAnalyticLoggingEnabled && !result && this.onAnalyticsEvent && (0, _platformFeatureFlags.fg)('platform_renderer_annotations_create_debug_logging')) {
         this.onAnalyticsEvent({
           // @ts-ignore
           action: 'failed',
@@ -341,7 +338,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
     key: "isValidAnnotationPosition",
     value: function isValidAnnotationPosition(pos) {
       if (!pos || !this.doc) {
-        if (this.onAnalyticsEvent && (0, _platformFeatureFlags.fg)('platform_renderer_annotations_create_debug_logging')) {
+        if (this.debugAnalyticLoggingEnabled && this.onAnalyticsEvent && (0, _platformFeatureFlags.fg)('platform_renderer_annotations_create_debug_logging')) {
           this.onAnalyticsEvent({
             // @ts-ignore
             action: 'failed',
@@ -548,5 +545,14 @@ var RendererActions = exports.default = /*#__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;
+    }
   }]);
 }();

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

@@ -35,6 +35,7 @@ var _reactIntlNext = require("react-intl-next");
 var _useInlineCommentsFilter = require("../../../ui/annotations/hooks/use-inline-comments-filter");
 var _useInlineCommentSubscriber = require("../../../ui/annotations/hooks/use-inline-comment-subscriber");
 var _types = require("@atlaskit/editor-common/types");
+var _AnnotationRangeContext = require("../../../ui/annotations/contexts/AnnotationRangeContext");
 var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
   _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
 /**
@@ -430,7 +431,10 @@ var Media = /*#__PURE__*/function (_PureComponent) {
   }]);
 }(_react.PureComponent);
 var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
-  var draftPosition = _react.default.useContext(_context.AnnotationsDraftContext);
+  var draftPositionOld = _react.default.useContext(_context.AnnotationsDraftContext);
+  var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
+    hoverDraftDocumentPosition = _useAnnotationRangeSt.hoverDraftDocumentPosition;
+  var draftPosition = (0, _platformFeatureFlags.fg)('platform_renderer_annotation_draft_position_fix') ? hoverDraftDocumentPosition : draftPositionOld;
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
   var _useState9 = (0, _react.useState)(),

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

@@ -386,11 +386,17 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         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
@@ -412,7 +418,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         // 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.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

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

@@ -60,11 +60,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "115.0.5";
+var packageVersion = "115.0.6";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
-  containerType: 'inline-size',
-  contain: 'layout style inline-size'
+  containerType: 'inline-size'
 });
 var handleMouseTripleClickInTables = function handleMouseTripleClickInTables(event) {
   var _parentElement, _parentElement2;
@@ -603,10 +602,10 @@ var RendererWrapper = /*#__PURE__*/_react.default.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 && (0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing') ? (0, _react2.jsx)("div", {
+  isTopLevelRenderer && (0, _platformFeatureFlags.fg)('platform-ssr-table-resize') ? (0, _react2.jsx)("div", {
     css: setAsQueryContainerStyles
   }, renderer) : renderer;
 });

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

@@ -18,10 +18,23 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var AnnotationsDraftContext = exports.AnnotationsDraftContext = /*#__PURE__*/(0, _react.createContext)(null);
 var ProvidersContext = exports.ProvidersContext = /*#__PURE__*/(0, _react.createContext)(null);
 var InlineCommentsStateContext = exports.InlineCommentsStateContext = /*#__PURE__*/(0, _react.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.
+ */
+var AnnotationsDraftContext = exports.AnnotationsDraftContext = /*#__PURE__*/(0, _react.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
 var AnnotationsDraftContextWrapper = exports.AnnotationsDraftContextWrapper = /*#__PURE__*/function (_React$Component) {

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

@@ -5,25 +5,30 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useAnnotationRangeState = exports.useAnnotationRangeDispatch = exports.AnnotationRangeProvider = void 0;
+exports.useAnnotationRangeState = exports.useAnnotationRangeDispatch = exports.AnnotationRangeProviderInner = exports.AnnotationRangeProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 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) { (0, _defineProperty2.default)(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; }
-function reducer(state, action) {
+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), {}, {
@@ -48,11 +53,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':
@@ -73,11 +78,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':
@@ -88,33 +93,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__*/(0, _react.createContext)({
   range: null,
-  draftRange: null,
-  type: null
+  type: null,
+  selectionDraftRange: null,
+  hoverDraftRange: null,
+  selectionDraftDocumentPosition: null,
+  hoverDraftDocumentPosition: null
 });
 var AnnotationRangeDispatchContext = /*#__PURE__*/(0, _react.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
 });
-var AnnotationRangeProvider = exports.AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
+var AnnotationRangeProviderInner = exports.AnnotationRangeProviderInner = function AnnotationRangeProviderInner(_ref) {
   var children = _ref.children,
     allowCommentsOnMedia = _ref.allowCommentsOnMedia;
-  var _useReducer = (0, _react.useReducer)(reducer, {
-      range: null,
-      draftRange: null,
-      type: null
-    }),
+  var _useReducer = (0, _react.useReducer)((0, _platformFeatureFlags.fg)('platform_renderer_annotation_draft_position_fix') ? reducerNew : reducerOld, initialState),
     _useReducer2 = (0, _slicedToArray2.default)(_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 = (0, _react.useCallback)(function () {
     return dispatch({
@@ -142,7 +242,7 @@ var AnnotationRangeProvider = exports.AnnotationRangeProvider = function Annotat
       type: 'clearHover'
     });
   }, []);
-  var setRange = (0, _react.useCallback)(function (range) {
+  var setSelectionRange = (0, _react.useCallback)(function (range) {
     return dispatch({
       type: 'setSelection',
       range: range
@@ -175,30 +275,94 @@ var AnnotationRangeProvider = exports.AnnotationRangeProvider = function Annotat
       range: range
     });
   }, []);
+  var promoteSelectionToDraft = (0, _react.useCallback)(function (position) {
+    dispatch({
+      type: 'promoteSelectionToDraft',
+      position: position
+    });
+  }, []);
+  var clearSelectionDraft = (0, _react.useCallback)(function () {
+    dispatch({
+      type: 'clearSelectionDraft'
+    });
+  }, []);
+  var promoteHoverToDraft = (0, _react.useCallback)(function (position) {
+    dispatch({
+      type: 'promoteHoverToDraft',
+      position: position
+    });
+  }, []);
+  var clearHoverDraft = (0, _react.useCallback)(function () {
+    dispatch({
+      type: 'clearHoverDraft'
+    });
+  }, []);
   var stateData = (0, _react.useMemo)(function () {
-    return {
-      range: range,
-      draftRange: draftRange,
-      type: type
-    };
-  }, [range, draftRange, type]);
+    if ((0, _platformFeatureFlags.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 = (0, _react.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.default.createElement(AnnotationRangeStateContext.Provider, {
     value: stateData
   }, /*#__PURE__*/_react.default.createElement(AnnotationRangeDispatchContext.Provider, {
     value: dispatchData
   }, children));
 };
+var AnnotationRangeProvider = exports.AnnotationRangeProvider = function AnnotationRangeProvider(_ref2) {
+  var children = _ref2.children,
+    allowCommentsOnMedia = _ref2.allowCommentsOnMedia,
+    isNestedRender = _ref2.isNestedRender;
+  if ((0, _platformFeatureFlags.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.default.createElement(_react.default.Fragment, null, children) : /*#__PURE__*/_react.default.createElement(AnnotationRangeProviderInner, {
+      allowCommentsOnMedia: allowCommentsOnMedia
+    }, children);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(AnnotationRangeProviderInner, {
+      allowCommentsOnMedia: allowCommentsOnMedia
+    }, children);
+  }
+};
 var useAnnotationRangeState = exports.useAnnotationRangeState = function useAnnotationRangeState() {
   return (0, _react.useContext)(AnnotationRangeStateContext);
 };

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

@@ -9,6 +9,7 @@ exports.getAnnotationIndex = exports.applyAnnotationOnText = exports.TextWithAnn
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../types");
 var _context = require("../context");
 var _text = require("./text");
@@ -17,6 +18,7 @@ var _dom = require("./dom");
 var _segmentText = require("../../../react/utils/segment-text");
 var _renderTextSegments = require("../../../react/utils/render-text-segments");
 var _AnnotationManagerContext = require("../contexts/AnnotationManagerContext");
+var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
 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; }
 /**
@@ -120,7 +122,10 @@ var TextWithAnnotationDraft = exports.TextWithAnnotationDraft = function TextWit
       end: endPos
     };
   }, [endPos, startPos]);
-  var nextDraftPosition = _react.default.useContext(_context.AnnotationsDraftContext);
+  var nextDraftPositionOld = _react.default.useContext(_context.AnnotationsDraftContext);
+  var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
+    selectionDraftDocumentPosition = _useAnnotationRangeSt.selectionDraftDocumentPosition;
+  var nextDraftPosition = (0, _platformFeatureFlags.fg)('platform_renderer_annotation_draft_position_fix') ? selectionDraftDocumentPosition : nextDraftPositionOld;
   var shouldApplyAnnotationAt = _react.default.useMemo(function () {
     if (!nextDraftPosition) {
       return false;

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

@@ -7,8 +7,12 @@ exports.useInlineAnnotationProps = useInlineAnnotationProps;
 var _react = require("react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _context = require("../context");
+var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
 function useInlineAnnotationProps(props) {
-  var draftPosition = (0, _react.useContext)(_context.AnnotationsDraftContext);
+  var draftPositionOld = (0, _react.useContext)(_context.AnnotationsDraftContext);
+  var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
+    selectionDraftDocumentPosition = _useAnnotationRangeSt.selectionDraftDocumentPosition;
+  var draftPosition = (0, _platformFeatureFlags.fg)('platform_renderer_annotation_draft_position_fix') ? selectionDraftDocumentPosition : draftPositionOld;
   if (!(0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
     return {};
   }

package/dist/cjs/ui/annotations/hooks/user-selection.js

@@ -14,11 +14,12 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
   var selectionTimeoutRef = (0, _react.useRef)();
   var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
     clearRange = _useAnnotationRangeDi.clearRange,
-    setRange = _useAnnotationRangeDi.setRange;
+    clearSelectionRange = _useAnnotationRangeDi.clearSelectionRange,
+    setSelectionRange = _useAnnotationRangeDi.setSelectionRange;
   var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
     range = _useAnnotationRangeSt.range,
-    draftRange = _useAnnotationRangeSt.draftRange,
-    type = _useAnnotationRangeSt.type;
+    type = _useAnnotationRangeSt.type,
+    selectionDraftRange = _useAnnotationRangeSt.selectionDraftRange;
   var lastRangeRef = (0, _react.useRef)(null);
   var onSelectionChange = (0, _react.useCallback)(function (event) {
     if ((0, _platformFeatureFlags.fg)('platform_renderer_triple_click_selects_paragraph')) {
@@ -55,7 +56,7 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
               _range = sel.getRangeAt(0);
             }
           }
-          setRange(_range.cloneRange());
+          setSelectionRange(_range.cloneRange());
           lastRangeRef.current = _range;
         }
       }, 100);
@@ -96,11 +97,11 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
             var lastChild = parentNode !== null && parentNode !== void 0 && parentNode.lastChild && (parentNode === null || parentNode === void 0 || (_parentNode$lastChild = parentNode.lastChild) === null || _parentNode$lastChild === void 0 ? void 0 : _parentNode$lastChild.nodeType) === Node.TEXT_NODE ? parentNode === null || parentNode === void 0 ? void 0 : parentNode.lastChild : parentNode === null || parentNode === void 0 || (_parentNode$lastChild2 = parentNode.lastChild) === null || _parentNode$lastChild2 === void 0 ? void 0 : _parentNode$lastChild2.childNodes[0];
             _range.setEnd(lastChild, lastChild.length || 0);
           }
-          setRange(_range.cloneRange());
+          setSelectionRange(_range.cloneRange());
         }
       }, 250);
     }
-  }, [rendererDOM, setRange]);
+  }, [rendererDOM, setSelectionRange]);
   (0, _react.useEffect)(function () {
     if (!document || !rendererDOM) {
       return;
@@ -112,8 +113,12 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       document.removeEventListener('selectionchange', onSelectionChange);
-      clearRange();
+      if ((0, _platformFeatureFlags.fg)('platform_renderer_annotation_draft_position_fix')) {
+        clearSelectionRange();
+      } else {
+        clearRange();
+      }
     };
-  }, [rendererDOM, onSelectionChange, clearRange]);
-  return [type === 'selection' ? range : null, draftRange, clearRange];
+  }, [rendererDOM, onSelectionChange, clearSelectionRange, clearRange]);
+  return [type, range, selectionDraftRange, (0, _platformFeatureFlags.fg)('platform_renderer_annotation_draft_position_fix') ? clearSelectionRange : clearRange];
 };