@atlaskit/renderer 118.6.4 → 118.6.6

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/renderer
 
+## 118.6.6
+
+### Patch Changes
+
+- [#163587](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163587)
+  [`59a3ee21507aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/59a3ee21507aa) -
+  EDITOR-835 - Can not start another draft after starting a draft in renderer
+- Updated dependencies
+
+## 118.6.5
+
+### Patch Changes
+
+- [#164058](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164058)
+  [`0d27c81dc4607`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d27c81dc4607) -
+  [ux] EDITOR-843 - remove focus style for renderer annotation comment mark element
+- [#164607](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164607)
+  [`e0b155ba0f97c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e0b155ba0f97c) -
+  EDITOR-857 - Click a selected comment should deselect it in renderer
+- [#163939](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163939)
+  [`c8320043adccd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c8320043adccd) -
+  Reducing children validation in RendererActions behind an FG and sending track analytics event
+- Updated dependencies
+
 ## 118.6.4
 
 ### Patch Changes

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

@@ -62,7 +62,7 @@ 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 = "118.6.4";
+var packageVersion = "118.6.6";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -8,17 +8,45 @@ Object.defineProperty(exports, "__esModule", {
 exports.RendererActionsContext = RendererActionsContext;
 exports.RendererContext = exports.RendererActionsContextConsumer = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analyticsListeners = require("@atlaskit/analytics-listeners");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _index = _interopRequireDefault(require("../../actions/index"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var RendererContext = exports.RendererContext = /*#__PURE__*/_react.default.createContext(new _index.default());
 function RendererActionsContext(_ref) {
   var children = _ref.children,
     context = _ref.context;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var actions = (0, _react.useMemo)(function () {
     return new _index.default(true);
   }, []);
+
+  // Remove this eventually when root cause is assessed
+  if (_react.default.Children.count(children) > 1 && (0, _platformFeatureFlags.fg)('confluence_frontend_fix_view_page_slo')) {
+    // Send event when we get more than 1 child
+
+    try {
+      throw new Error('Too many children');
+    } catch (e) {
+      var _ref2 = e,
+        stack = _ref2.stack;
+      createAnalyticsEvent({
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        action: 'rendered',
+        actionSubject: 'multipleChildren',
+        actionSubjectId: 'rendererActionsContext',
+        attributes: {
+          numChildren: _react.default.Children.count(children),
+          stackTrace: stack
+        }
+      }).fire(_analyticsListeners.FabricChannel.editor);
+    }
+  }
   return /*#__PURE__*/_react.default.createElement(RendererContext.Provider, {
     value: context || actions
-  }, _react.default.Children.only(children));
+  }, (0, _platformFeatureFlags.fg)('confluence_frontend_fix_view_page_slo') ? _react.default.Children.only(children) : children);
 }
 var RendererActionsContextConsumer = exports.RendererActionsContextConsumer = RendererContext.Consumer;

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

@@ -46,6 +46,9 @@ var MarkElement = exports.MarkElement = function MarkElement(_ref) {
       annotationIds = props.annotationIds;
     if (annotationManager) {
       if (hasFocus) {
+        dispatch({
+          type: 'resetSelectedAnnotation'
+        });
         return;
       }
       annotationManager.checkPreemptiveGate().then(function (canSelect) {

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

@@ -28,7 +28,7 @@ var markStyles = (0, _react2.css)((0, _defineProperty2.default)({
   background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
   borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, #B38600)"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&:focus, &[data-has-focus="true"]': {
+  '&[data-has-focus="true"]': {
     background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
     borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, #B38600)"),
     // TODO: DSP-4147 - Annotation shadow
@@ -43,7 +43,7 @@ var markStylesLayeringFix = (0, _react2.css)((0, _defineProperty2.default)({}, "
     backgroundColor: 'transparent'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.fabric-background-color-mark &[data-has-focus="true"], &:focus, &[data-has-focus="true"]': {
+  '.fabric-background-color-mark &[data-has-focus="true"], &[data-has-focus="true"]': {
     background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
     borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
     boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
@@ -51,7 +51,7 @@ var markStylesLayeringFix = (0, _react2.css)((0, _defineProperty2.default)({}, "
 }));
 var markStylesWithUpdatedShadow = (0, _react2.css)((0, _defineProperty2.default)({}, "&[data-mark-annotation-state='".concat(_adfSchema.AnnotationMarkStates.ACTIVE, "']"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&:focus, &[data-has-focus="true"]': {
+  '&[data-has-focus="true"]': {
     background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
     borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
     boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
@@ -75,7 +75,7 @@ var markStylesWithInlineComments = (0, _react2.css)((0, _defineProperty2.default
   background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
   borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&:focus, &[data-has-focus="true"]': {
+  '&[data-has-focus="true"]': {
     background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
     borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
     boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"

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

@@ -29,6 +29,9 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
         var sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
           lastRangeRef.current = null; // Clear last range if selection is invalid
+          if ((0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+            clearSelectionRange();
+          }
           return;
         }
         var _range = sel.getRangeAt(0);
@@ -66,6 +69,9 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
       selectionTimeoutRef.current = setTimeout(function () {
         var sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          if ((0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager')) {
+            clearSelectionRange();
+          }
           return;
         }
         var _range = sel.getRangeAt(0);
@@ -100,7 +106,7 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
         }
       }, 250);
     }
-  }, [rendererDOM, setSelectionRange]);
+  }, [rendererDOM, setSelectionRange, clearSelectionRange]);
   (0, _react.useEffect)(function () {
     if (!document || !rendererDOM) {
       return;

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

@@ -67,6 +67,7 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
   var onCreateCallback = (0, _react.useCallback)(function (annotationId) {
     // We want to support creation on a documentPosition if the user is only using ranges
     // but we want to prioritize draft positions if they are being used by consumers
+    // !!! at this point, the documentPosition can be the wrong position if the user select something else
     var positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation) {
       // TODO: EDITOR-595 - This analytic event is temporary and should be removed once the following issue
@@ -169,7 +170,12 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
         }
       }
     });
-    var positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
+
+    // at this point, the documentPosition is the position that the user has selected,
+    // not the selectionDraftDocumentPosition
+    // because the documentPosition is not promoted to selectionDraftDocumentPosition yet
+    // use platform_editor_comments_api_manager here so we can clear the code path when the flag is removed
+    var positionToAnnotate = (0, _platformFeatureFlags.fg)('platform_editor_comments_api_manager') ? documentPosition : selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
       return false;
     }
@@ -219,12 +225,9 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
     if (annotationManager) {
       var startDraft = function startDraft() {
         var _result$inlineNodeTyp;
-        if (isDrafting) {
-          return {
-            success: false,
-            reason: 'draft-in-progress'
-          };
-        }
+        // if there is a draft in progress, we ignore it and start a new draft
+        // this is because clearing the draft will remove the mark node from the DOM, which will cause the selection range to be invalid
+
         var id = (0, _v.default)();
         var result = applyDraftModeCallback({
           annotationId: id,

package/dist/cjs/ui/annotations/selection/range-validator.js

@@ -26,6 +26,8 @@ var SelectionRangeValidator = exports.SelectionRangeValidator = function Selecti
     draftRange = _useUserSelectionRang2[2],
     clearRange = _useUserSelectionRang2[3];
   var selectionRange = type === 'selection' ? range : null;
+
+  // !!! the draft range will become invalid after the mark DOM is inserted
   if (!selectionRange && !draftRange) {
     return null;
   }

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

@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "118.6.4";
+const packageVersion = "118.6.6";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -1,13 +1,43 @@
 import React, { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import RendererActions from '../../actions/index';
 export const RendererContext = /*#__PURE__*/React.createContext(new RendererActions());
 export function RendererActionsContext({
   children,
   context
 }) {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const actions = useMemo(() => new RendererActions(true), []);
+
+  // Remove this eventually when root cause is assessed
+  if (React.Children.count(children) > 1 && fg('confluence_frontend_fix_view_page_slo')) {
+    // Send event when we get more than 1 child
+
+    try {
+      throw new Error('Too many children');
+    } catch (e) {
+      const {
+        stack
+      } = e;
+      createAnalyticsEvent({
+        eventType: EVENT_TYPE.TRACK,
+        action: 'rendered',
+        actionSubject: 'multipleChildren',
+        actionSubjectId: 'rendererActionsContext',
+        attributes: {
+          numChildren: React.Children.count(children),
+          stackTrace: stack
+        }
+      }).fire(FabricChannel.editor);
+    }
+  }
   return /*#__PURE__*/React.createElement(RendererContext.Provider, {
     value: context || actions
-  }, React.Children.only(children));
+  }, fg('confluence_frontend_fix_view_page_slo') ? React.Children.only(children) : children);
 }
 export const RendererActionsContextConsumer = RendererContext.Consumer;

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

@@ -41,6 +41,9 @@ const MarkElement = ({
     } = props;
     if (annotationManager) {
       if (hasFocus) {
+        dispatch({
+          type: 'resetSelectedAnnotation'
+        });
         return;
       }
       annotationManager.checkPreemptiveGate().then(canSelect => {

package/dist/es2019/ui/annotations/element/mark.js

@@ -21,7 +21,7 @@ const markStyles = css({
     background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
     borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&:focus, &[data-has-focus="true"]': {
+    '&[data-has-focus="true"]': {
       background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
       borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
       // TODO: DSP-4147 - Annotation shadow
@@ -39,7 +39,7 @@ const markStylesLayeringFix = css({
       backgroundColor: 'transparent'
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.fabric-background-color-mark &[data-has-focus="true"], &:focus, &[data-has-focus="true"]': {
+    '.fabric-background-color-mark &[data-has-focus="true"], &[data-has-focus="true"]': {
       background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
       borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
       boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
@@ -50,7 +50,7 @@ const markStylesWithUpdatedShadow = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
   [`&[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}']`]: {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&:focus, &[data-has-focus="true"]': {
+    '&[data-has-focus="true"]': {
       background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
       borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
       boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
@@ -77,7 +77,7 @@ const markStylesWithInlineComments = css({
     background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
     borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '&:focus, &[data-has-focus="true"]': {
+    '&[data-has-focus="true"]': {
       background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
       borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
       boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"

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

@@ -29,6 +29,9 @@ export const useUserSelectionRange = props => {
         const sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
           lastRangeRef.current = null; // Clear last range if selection is invalid
+          if (fg('platform_editor_comments_api_manager')) {
+            clearSelectionRange();
+          }
           return;
         }
         let _range = sel.getRangeAt(0);
@@ -67,6 +70,9 @@ export const useUserSelectionRange = props => {
       selectionTimeoutRef.current = setTimeout(() => {
         const sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          if (fg('platform_editor_comments_api_manager')) {
+            clearSelectionRange();
+          }
           return;
         }
         const _range = sel.getRangeAt(0);
@@ -103,7 +109,7 @@ export const useUserSelectionRange = props => {
         }
       }, 250);
     }
-  }, [rendererDOM, setSelectionRange]);
+  }, [rendererDOM, setSelectionRange, clearSelectionRange]);
   useEffect(() => {
     if (!document || !rendererDOM) {
       return;

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

@@ -64,6 +64,7 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   const onCreateCallback = useCallback(annotationId => {
     // We want to support creation on a documentPosition if the user is only using ranges
     // but we want to prioritize draft positions if they are being used by consumers
+    // !!! at this point, the documentPosition can be the wrong position if the user select something else
     const positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation) {
       // TODO: EDITOR-595 - This analytic event is temporary and should be removed once the following issue
@@ -166,7 +167,12 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
         }
       }
     });
-    const positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
+
+    // at this point, the documentPosition is the position that the user has selected,
+    // not the selectionDraftDocumentPosition
+    // because the documentPosition is not promoted to selectionDraftDocumentPosition yet
+    // use platform_editor_comments_api_manager here so we can clear the code path when the flag is removed
+    const positionToAnnotate = fg('platform_editor_comments_api_manager') ? documentPosition : selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
       return false;
     }
@@ -216,12 +222,9 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
     if (annotationManager) {
       const startDraft = () => {
         var _result$inlineNodeTyp;
-        if (isDrafting) {
-          return {
-            success: false,
-            reason: 'draft-in-progress'
-          };
-        }
+        // if there is a draft in progress, we ignore it and start a new draft
+        // this is because clearing the draft will remove the mark node from the DOM, which will cause the selection range to be invalid
+
         const id = uuid();
         const result = applyDraftModeCallback({
           annotationId: id,

package/dist/es2019/ui/annotations/selection/range-validator.js

@@ -13,6 +13,8 @@ export const SelectionRangeValidator = props => {
     rendererRef
   });
   const selectionRange = type === 'selection' ? range : null;
+
+  // !!! the draft range will become invalid after the mark DOM is inserted
   if (!selectionRange && !draftRange) {
     return null;
   }

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

@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.6.4";
+var packageVersion = "118.6.6";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -1,14 +1,42 @@
 import React, { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import RendererActions from '../../actions/index';
 export var RendererContext = /*#__PURE__*/React.createContext(new RendererActions());
 export function RendererActionsContext(_ref) {
   var children = _ref.children,
     context = _ref.context;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var actions = useMemo(function () {
     return new RendererActions(true);
   }, []);
+
+  // Remove this eventually when root cause is assessed
+  if (React.Children.count(children) > 1 && fg('confluence_frontend_fix_view_page_slo')) {
+    // Send event when we get more than 1 child
+
+    try {
+      throw new Error('Too many children');
+    } catch (e) {
+      var _ref2 = e,
+        stack = _ref2.stack;
+      createAnalyticsEvent({
+        eventType: EVENT_TYPE.TRACK,
+        action: 'rendered',
+        actionSubject: 'multipleChildren',
+        actionSubjectId: 'rendererActionsContext',
+        attributes: {
+          numChildren: React.Children.count(children),
+          stackTrace: stack
+        }
+      }).fire(FabricChannel.editor);
+    }
+  }
   return /*#__PURE__*/React.createElement(RendererContext.Provider, {
     value: context || actions
-  }, React.Children.only(children));
+  }, fg('confluence_frontend_fix_view_page_slo') ? React.Children.only(children) : children);
 }
 export var RendererActionsContextConsumer = RendererContext.Consumer;

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

@@ -38,6 +38,9 @@ var MarkElement = function MarkElement(_ref) {
       annotationIds = props.annotationIds;
     if (annotationManager) {
       if (hasFocus) {
+        dispatch({
+          type: 'resetSelectedAnnotation'
+        });
         return;
       }
       annotationManager.checkPreemptiveGate().then(function (canSelect) {

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

@@ -24,7 +24,7 @@ var markStyles = css(_defineProperty({
   background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
   borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, #B38600)"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&:focus, &[data-has-focus="true"]': {
+  '&[data-has-focus="true"]': {
     background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
     borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, #B38600)"),
     // TODO: DSP-4147 - Annotation shadow
@@ -39,7 +39,7 @@ var markStylesLayeringFix = css(_defineProperty({}, "&[data-mark-annotation-stat
     backgroundColor: 'transparent'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.fabric-background-color-mark &[data-has-focus="true"], &:focus, &[data-has-focus="true"]': {
+  '.fabric-background-color-mark &[data-has-focus="true"], &[data-has-focus="true"]': {
     background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
     borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
     boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
@@ -47,7 +47,7 @@ var markStylesLayeringFix = css(_defineProperty({}, "&[data-mark-annotation-stat
 }));
 var markStylesWithUpdatedShadow = css(_defineProperty({}, "&[data-mark-annotation-state='".concat(AnnotationMarkStates.ACTIVE, "']"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&:focus, &[data-has-focus="true"]': {
+  '&[data-has-focus="true"]': {
     background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
     borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
     boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
@@ -71,7 +71,7 @@ var markStylesWithInlineComments = css(_defineProperty({}, "&[data-mark-annotati
   background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
   borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&:focus, &[data-has-focus="true"]': {
+  '&[data-has-focus="true"]': {
     background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
     borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
     boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"

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

@@ -23,6 +23,9 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
         var sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
           lastRangeRef.current = null; // Clear last range if selection is invalid
+          if (fg('platform_editor_comments_api_manager')) {
+            clearSelectionRange();
+          }
           return;
         }
         var _range = sel.getRangeAt(0);
@@ -60,6 +63,9 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
       selectionTimeoutRef.current = setTimeout(function () {
         var sel = document.getSelection();
         if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
+          if (fg('platform_editor_comments_api_manager')) {
+            clearSelectionRange();
+          }
           return;
         }
         var _range = sel.getRangeAt(0);
@@ -94,7 +100,7 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
         }
       }, 250);
     }
-  }, [rendererDOM, setSelectionRange]);
+  }, [rendererDOM, setSelectionRange, clearSelectionRange]);
   useEffect(function () {
     if (!document || !rendererDOM) {
       return;

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

@@ -58,6 +58,7 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
   var onCreateCallback = useCallback(function (annotationId) {
     // We want to support creation on a documentPosition if the user is only using ranges
     // but we want to prioritize draft positions if they are being used by consumers
+    // !!! at this point, the documentPosition can be the wrong position if the user select something else
     var positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation) {
       // TODO: EDITOR-595 - This analytic event is temporary and should be removed once the following issue
@@ -160,7 +161,12 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
         }
       }
     });
-    var positionToAnnotate = selectionDraftDocumentPosition || documentPosition;
+
+    // at this point, the documentPosition is the position that the user has selected,
+    // not the selectionDraftDocumentPosition
+    // because the documentPosition is not promoted to selectionDraftDocumentPosition yet
+    // use platform_editor_comments_api_manager here so we can clear the code path when the flag is removed
+    var positionToAnnotate = fg('platform_editor_comments_api_manager') ? documentPosition : selectionDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
       return false;
     }
@@ -210,12 +216,9 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
     if (annotationManager) {
       var startDraft = function startDraft() {
         var _result$inlineNodeTyp;
-        if (isDrafting) {
-          return {
-            success: false,
-            reason: 'draft-in-progress'
-          };
-        }
+        // if there is a draft in progress, we ignore it and start a new draft
+        // this is because clearing the draft will remove the mark node from the DOM, which will cause the selection range to be invalid
+
         var id = uuid();
         var result = applyDraftModeCallback({
           annotationId: id,

package/dist/esm/ui/annotations/selection/range-validator.js

@@ -17,6 +17,8 @@ export var SelectionRangeValidator = function SelectionRangeValidator(props) {
     draftRange = _useUserSelectionRang2[2],
     clearRange = _useUserSelectionRang2[3];
   var selectionRange = type === 'selection' ? range : null;
+
+  // !!! the draft range will become invalid after the mark DOM is inserted
   if (!selectionRange && !draftRange) {
     return null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "118.6.4",
+	"version": "118.6.6",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -56,7 +56,7 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.7.0",
+		"@atlaskit/tmp-editor-statsig": "^5.8.0",
 		"@atlaskit/tokens": "^5.0.0",
 		"@atlaskit/tooltip": "^20.2.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -259,6 +259,9 @@
 		},
 		"dst-a11y__replace-anchor-with-link__editor": {
 			"type": "boolean"
+		},
+		"confluence_frontend_fix_view_page_slo": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {