@atlaskit/renderer 123.1.1 → 123.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 123.2.1
+
+### Patch Changes
+
+- [`10f7cde204c1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10f7cde204c1e) -
+  Increase heading 1 ranking in block menu and add date-local-id on bodiedExtension and blockCard in
+  renderer
+- Updated dependencies
+
+## 123.2.0
+
+### Minor Changes
+
+- [`7d5ceec8d7064`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7d5ceec8d7064) -
+  Removed feature gates for cleanup
+
 ## 123.1.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -35,6 +35,9 @@
 		{
 			"path": "../../../analytics/analytics-next/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../helpers/browser-apis/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/button/afm-cc/tsconfig.json"
 		},

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

@@ -39,7 +39,8 @@ function BlockCard(props) {
     data = props.data,
     eventHandlers = props.eventHandlers,
     smartLinks = props.smartLinks,
-    isNodeNested = props.isNodeNested;
+    isNodeNested = props.isNodeNested,
+    localId = props.localId;
   var portal = (0, _PortalContext.usePortal)(props);
   var _ref = smartLinks || {},
     actionOptions = _ref.actionOptions;
@@ -107,6 +108,7 @@ function BlockCard(props) {
         return (0, _react.jsx)("div", {
           css: datasourceContainerStyle,
           "data-testid": "renderer-datasource-table",
+          "data-local-id": localId,
           style: {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
             width: isNodeNested ? '100%' : (0, _utils.calcBreakoutWidth)(layout, width)
@@ -155,7 +157,8 @@ function BlockCard(props) {
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
-    "data-card-url": url
+    "data-card-url": url,
+    "data-local-id": localId
   }, (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
     unsupportedComponent: _ui.UnsupportedBlock
     // Ignored via go/ees005

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

@@ -45,7 +45,8 @@ var BodiedExtension = function BodiedExtension(props) {
     extensionKey = props.extensionKey,
     extensionType = props.extensionType,
     parameters = props.parameters,
-    extensionViewportSizes = props.extensionViewportSizes;
+    extensionViewportSizes = props.extensionViewportSizes,
+    localId = props.localId;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = _react.default.Children.toArray(children)
@@ -75,7 +76,7 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return (0, _extension.renderExtension)(result, layout, {
           isTopLevel: path.length < 1
-        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
+        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
       }
     } catch (e) {
       /** We don't want this error to block renderer */
@@ -85,7 +86,7 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return (0, _extension.renderExtension)(children, layout, {
       isTopLevel: path.length < 1
-    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
+    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
   }))));
 };
 var _default = exports.default = BodiedExtension;

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

@@ -135,7 +135,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex,
-    "data-layout": layout
+    "data-layout": layout,
+    "data-local-id": localId
   }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref4) {
     var width = _ref4.width;
     return (0, _react.jsx)(MultiBodiedExtensionWrapper, {

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

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

package/dist/cjs/ui/annotations/hooks/use-events.js

@@ -12,7 +12,6 @@ var _types = require("@atlaskit/editor-common/types");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _types2 = require("@atlaskit/analytics-listeners/types");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AnnotationManagerContext = require("../contexts/AnnotationManagerContext");
 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; }
@@ -97,9 +96,6 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
     };
     var removeHoverEffect = function removeHoverEffect() {
       setIsHovered(false);
-      if (document.activeElement instanceof HTMLElement && !(0, _platformFeatureFlags.fg)('confluence_frontend_comments_panel_editor_focus')) {
-        document.activeElement.blur();
-      }
     };
     if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(_types.AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);

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

@@ -12,7 +12,6 @@ var _types = require("@atlaskit/analytics-listeners/types");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _RendererActionsContext = require("../../RendererActionsContext");
 var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props) {
   var Component = props.component,
@@ -102,20 +101,18 @@ var Mounter = exports.Mounter = /*#__PURE__*/_react.default.memo(function (props
     });
     var positionToAnnotate = hoverDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
-      if ((0, _platformFeatureFlags.fg)('cc_comments_improve_apply_draft_errors')) {
-        if (createAnalyticsEvent) {
-          createAnalyticsEvent({
-            action: _analytics.ACTION.CREATE_NOT_ALLOWED,
-            actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
-            actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
-            attributes: {
-              positionToAnnotate: positionToAnnotate,
-              applyAnnotationMissing: !applyAnnotation,
-              annotationId: options.annotationId
-            },
-            eventType: _analytics.EVENT_TYPE.TRACK
-          }).fire(_types.FabricChannel.editor);
-        }
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent({
+          action: _analytics.ACTION.CREATE_NOT_ALLOWED,
+          actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+          attributes: {
+            positionToAnnotate: positionToAnnotate,
+            applyAnnotationMissing: !applyAnnotation,
+            annotationId: options.annotationId
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        }).fire(_types.FabricChannel.editor);
       }
       return false;
     }

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

@@ -153,20 +153,18 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
     // 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) {
-      if ((0, _platformFeatureFlags.fg)('cc_comments_improve_apply_draft_errors')) {
-        if (createAnalyticsEvent) {
-          createAnalyticsEvent({
-            action: _analytics.ACTION.CREATE_NOT_ALLOWED,
-            actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
-            actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
-            attributes: {
-              positionToAnnotate: positionToAnnotate,
-              applyAnnotationMissing: !applyAnnotation,
-              annotationId: options.annotationId
-            },
-            eventType: _analytics.EVENT_TYPE.TRACK
-          }).fire(_types.FabricChannel.editor);
-        }
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent({
+          action: _analytics.ACTION.CREATE_NOT_ALLOWED,
+          actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+          attributes: {
+            positionToAnnotate: positionToAnnotate,
+            applyAnnotationMissing: !applyAnnotation,
+            annotationId: options.annotationId
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        }).fire(_types.FabricChannel.editor);
       }
       return false;
     }

package/dist/cjs/ui/hooks/useScrollToLocalId.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useScrollToLocalId = void 0;
 var _react = require("react");
+var _browserApis = require("@atlaskit/browser-apis");
 // Find editor node dom with localId - similar to confluence useScrollOnUrlChange.ts
 var getLocalIdSelector = function getLocalIdSelector(localId, container) {
   // Check if the element with data-local-id exists
@@ -38,6 +39,7 @@ var getLocalIdSelector = function getLocalIdSelector(localId, container) {
 };
 var useScrollToLocalId = exports.useScrollToLocalId = function useScrollToLocalId(containerRef, shouldScrollToLocalId) {
   (0, _react.useEffect)(function () {
+    var _getDocument;
     // Only run in browser environment
     if (typeof window === 'undefined' || !(containerRef !== null && containerRef !== void 0 && containerRef.current) || !shouldScrollToLocalId) {
       return;
@@ -46,14 +48,83 @@ var useScrollToLocalId = exports.useScrollToLocalId = function useScrollToLocalI
     // Parse URL parameters for block ID
     var urlParams = new URLSearchParams(window.location.search);
     var blockId = urlParams.get('block');
-    if (blockId) {
-      // Search within the renderer container using the selector function
-      var element = getLocalIdSelector(blockId, containerRef.current);
-      if (element) {
-        element.scrollIntoView({
-          behavior: 'smooth'
-        });
+    if (!blockId) {
+      return;
+    }
+    var retryCount = 0;
+    // 5 second timeout based on dashboard showing ~4.96s TTI load time
+    var maxRetries = 20; // Maximum 20 retries (5 seconds at 250ms intervals)
+    var retryInterval = 250; // Check every 250ms
+    var intervalId = null;
+    var scrollToElement = function scrollToElement() {
+      if (containerRef !== null && containerRef !== void 0 && containerRef.current) {
+        var element = getLocalIdSelector(blockId, containerRef.current);
+        if (element) {
+          element.scrollIntoView({
+            behavior: 'smooth'
+          });
+          return true;
+        }
+      }
+      return false;
+    };
+    var attemptScroll = function attemptScroll() {
+      retryCount++;
+
+      // Try to scroll to element
+      if (scrollToElement()) {
+        if (intervalId) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+        return true;
+      }
+
+      // Stop retrying if we've exceeded max retries
+      if (retryCount >= maxRetries) {
+        if (intervalId) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+        return false;
       }
+      return false;
+    };
+
+    // Try to scroll immediately
+    if (attemptScroll()) {
+      return;
+    }
+    if (((_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.readyState) === 'complete') {
+      // Document is already ready, try a few more times with delays
+      // This handles cases where elements are added after document ready
+      intervalId = setInterval(function () {
+        attemptScroll();
+      }, retryInterval);
+    } else {
+      // Document not ready yet, wait for it and then retry
+      intervalId = setInterval(function () {
+        var _getDocument2;
+        if (((_getDocument2 = (0, _browserApis.getDocument)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.readyState) === 'complete') {
+          attemptScroll();
+        } else if (retryCount >= maxRetries) {
+          // Stop retrying even if document isn't ready
+          if (intervalId) {
+            clearInterval(intervalId);
+            intervalId = null;
+          }
+        } else {
+          retryCount++;
+        }
+      }, retryInterval);
     }
+
+    // Cleanup function
+    return function () {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+    };
   }, [containerRef, shouldScrollToLocalId]);
 };

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

@@ -32,7 +32,8 @@ export default function BlockCard(props) {
     data,
     eventHandlers,
     smartLinks,
-    isNodeNested
+    isNodeNested,
+    localId
   } = props;
   const portal = usePortal(props);
   const {
@@ -95,6 +96,7 @@ export default function BlockCard(props) {
       }) => jsx("div", {
         css: datasourceContainerStyle,
         "data-testid": "renderer-datasource-table",
+        "data-local-id": localId,
         style: {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           width: isNodeNested ? '100%' : calcBreakoutWidth(layout, width)
@@ -142,7 +144,8 @@ export default function BlockCard(props) {
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
-    "data-card-url": url
+    "data-card-url": url,
+    "data-local-id": localId
   }, jsx(CardErrorBoundary, _extends({
     unsupportedComponent: UnsupportedBlock
     // Ignored via go/ees005

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

@@ -34,7 +34,8 @@ const BodiedExtension = props => {
     extensionKey,
     extensionType,
     parameters,
-    extensionViewportSizes
+    extensionViewportSizes,
+    localId
   } = props;
   const {
     createAnalyticsEvent
@@ -65,7 +66,7 @@ const BodiedExtension = props => {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1
-        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
+        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
       }
     } catch (e) {
       /** We don't want this error to block renderer */
@@ -75,7 +76,7 @@ const BodiedExtension = props => {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1
-    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
+    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
   }))));
 };
 export default BodiedExtension;

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

@@ -129,7 +129,8 @@ const MultiBodiedExtension = props => {
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex,
-    "data-layout": layout
+    "data-layout": layout,
+    "data-local-id": localId
   }, jsx(WidthConsumer, null, ({
     width
   }) => jsx(MultiBodiedExtensionWrapper, {

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

@@ -49,7 +49,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "123.1.1";
+const packageVersion = "0.0.0-development";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -3,7 +3,6 @@ import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
 export const useAnnotationStateByTypeEvent = ({
   type,
@@ -92,9 +91,6 @@ export const useHasFocusEvent = ({
     };
     const removeHoverEffect = () => {
       setIsHovered(false);
-      if (document.activeElement instanceof HTMLElement && !fg('confluence_frontend_comments_panel_editor_focus')) {
-        document.activeElement.blur();
-      }
     };
     if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);

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

@@ -5,7 +5,6 @@ import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
-import { fg } from '@atlaskit/platform-feature-flags';
 export const Mounter = /*#__PURE__*/React.memo(props => {
   const {
     component: Component,
@@ -98,20 +97,18 @@ export const Mounter = /*#__PURE__*/React.memo(props => {
     });
     const positionToAnnotate = hoverDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
-      if (fg('cc_comments_improve_apply_draft_errors')) {
-        if (createAnalyticsEvent) {
-          createAnalyticsEvent({
-            action: ACTION.CREATE_NOT_ALLOWED,
-            actionSubject: ACTION_SUBJECT.ANNOTATION,
-            actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
-            attributes: {
-              positionToAnnotate,
-              applyAnnotationMissing: !applyAnnotation,
-              annotationId: options.annotationId
-            },
-            eventType: EVENT_TYPE.TRACK
-          }).fire(FabricChannel.editor);
-        }
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent({
+          action: ACTION.CREATE_NOT_ALLOWED,
+          actionSubject: ACTION_SUBJECT.ANNOTATION,
+          actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+          attributes: {
+            positionToAnnotate,
+            applyAnnotationMissing: !applyAnnotation,
+            annotationId: options.annotationId
+          },
+          eventType: EVENT_TYPE.TRACK
+        }).fire(FabricChannel.editor);
       }
       return false;
     }

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

@@ -150,20 +150,18 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
     // 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) {
-      if (fg('cc_comments_improve_apply_draft_errors')) {
-        if (createAnalyticsEvent) {
-          createAnalyticsEvent({
-            action: ACTION.CREATE_NOT_ALLOWED,
-            actionSubject: ACTION_SUBJECT.ANNOTATION,
-            actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
-            attributes: {
-              positionToAnnotate,
-              applyAnnotationMissing: !applyAnnotation,
-              annotationId: options.annotationId
-            },
-            eventType: EVENT_TYPE.TRACK
-          }).fire(FabricChannel.editor);
-        }
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent({
+          action: ACTION.CREATE_NOT_ALLOWED,
+          actionSubject: ACTION_SUBJECT.ANNOTATION,
+          actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+          attributes: {
+            positionToAnnotate,
+            applyAnnotationMissing: !applyAnnotation,
+            annotationId: options.annotationId
+          },
+          eventType: EVENT_TYPE.TRACK
+        }).fire(FabricChannel.editor);
       }
       return false;
     }

package/dist/es2019/ui/hooks/useScrollToLocalId.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { getDocument } from '@atlaskit/browser-apis';
 
 // Find editor node dom with localId - similar to confluence useScrollOnUrlChange.ts
 const getLocalIdSelector = (localId, container) => {
@@ -33,6 +34,7 @@ const getLocalIdSelector = (localId, container) => {
 };
 export const useScrollToLocalId = (containerRef, shouldScrollToLocalId) => {
   useEffect(() => {
+    var _getDocument;
     // Only run in browser environment
     if (typeof window === 'undefined' || !(containerRef !== null && containerRef !== void 0 && containerRef.current) || !shouldScrollToLocalId) {
       return;
@@ -41,14 +43,83 @@ export const useScrollToLocalId = (containerRef, shouldScrollToLocalId) => {
     // Parse URL parameters for block ID
     const urlParams = new URLSearchParams(window.location.search);
     const blockId = urlParams.get('block');
-    if (blockId) {
-      // Search within the renderer container using the selector function
-      const element = getLocalIdSelector(blockId, containerRef.current);
-      if (element) {
-        element.scrollIntoView({
-          behavior: 'smooth'
-        });
+    if (!blockId) {
+      return;
+    }
+    let retryCount = 0;
+    // 5 second timeout based on dashboard showing ~4.96s TTI load time
+    const maxRetries = 20; // Maximum 20 retries (5 seconds at 250ms intervals)
+    const retryInterval = 250; // Check every 250ms
+    let intervalId = null;
+    const scrollToElement = () => {
+      if (containerRef !== null && containerRef !== void 0 && containerRef.current) {
+        const element = getLocalIdSelector(blockId, containerRef.current);
+        if (element) {
+          element.scrollIntoView({
+            behavior: 'smooth'
+          });
+          return true;
+        }
+      }
+      return false;
+    };
+    const attemptScroll = () => {
+      retryCount++;
+
+      // Try to scroll to element
+      if (scrollToElement()) {
+        if (intervalId) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+        return true;
+      }
+
+      // Stop retrying if we've exceeded max retries
+      if (retryCount >= maxRetries) {
+        if (intervalId) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+        return false;
       }
+      return false;
+    };
+
+    // Try to scroll immediately
+    if (attemptScroll()) {
+      return;
+    }
+    if (((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.readyState) === 'complete') {
+      // Document is already ready, try a few more times with delays
+      // This handles cases where elements are added after document ready
+      intervalId = setInterval(() => {
+        attemptScroll();
+      }, retryInterval);
+    } else {
+      // Document not ready yet, wait for it and then retry
+      intervalId = setInterval(() => {
+        var _getDocument2;
+        if (((_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.readyState) === 'complete') {
+          attemptScroll();
+        } else if (retryCount >= maxRetries) {
+          // Stop retrying even if document isn't ready
+          if (intervalId) {
+            clearInterval(intervalId);
+            intervalId = null;
+          }
+        } else {
+          retryCount++;
+        }
+      }, retryInterval);
     }
+
+    // Cleanup function
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+    };
   }, [containerRef, shouldScrollToLocalId]);
 };

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

@@ -31,7 +31,8 @@ export default function BlockCard(props) {
     data = props.data,
     eventHandlers = props.eventHandlers,
     smartLinks = props.smartLinks,
-    isNodeNested = props.isNodeNested;
+    isNodeNested = props.isNodeNested,
+    localId = props.localId;
   var portal = usePortal(props);
   var _ref = smartLinks || {},
     actionOptions = _ref.actionOptions;
@@ -99,6 +100,7 @@ export default function BlockCard(props) {
         return jsx("div", {
           css: datasourceContainerStyle,
           "data-testid": "renderer-datasource-table",
+          "data-local-id": localId,
           style: {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
             width: isNodeNested ? '100%' : calcBreakoutWidth(layout, width)
@@ -147,7 +149,8 @@ export default function BlockCard(props) {
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
-    "data-card-url": url
+    "data-card-url": url,
+    "data-local-id": localId
   }, jsx(CardErrorBoundary, _extends({
     unsupportedComponent: UnsupportedBlock
     // Ignored via go/ees005

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

@@ -36,7 +36,8 @@ var BodiedExtension = function BodiedExtension(props) {
     extensionKey = props.extensionKey,
     extensionType = props.extensionType,
     parameters = props.parameters,
-    extensionViewportSizes = props.extensionViewportSizes;
+    extensionViewportSizes = props.extensionViewportSizes,
+    localId = props.localId;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var removeOverflow = React.Children.toArray(children)
@@ -66,7 +67,7 @@ var BodiedExtension = function BodiedExtension(props) {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
           isTopLevel: path.length < 1
-        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
+        }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
       }
     } catch (e) {
       /** We don't want this error to block renderer */
@@ -76,7 +77,7 @@ var BodiedExtension = function BodiedExtension(props) {
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
       isTopLevel: path.length < 1
-    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes);
+    }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId);
   }))));
 };
 export default BodiedExtension;

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

@@ -127,7 +127,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     "data-testid": "multiBodiedExtension--container",
     "data-multiBodiedExtension-container": true,
     "data-active-child-index": activeChildIndex,
-    "data-layout": layout
+    "data-layout": layout,
+    "data-local-id": localId
   }, jsx(WidthConsumer, null, function (_ref4) {
     var width = _ref4.width;
     return jsx(MultiBodiedExtensionWrapper, {

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

@@ -54,7 +54,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "123.1.1";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/ui/annotations/hooks/use-events.js

@@ -7,7 +7,6 @@ import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnnotationManagerDispatch, useAnnotationManagerState } from '../contexts/AnnotationManagerContext';
 export var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEvent(_ref) {
   var type = _ref.type,
@@ -90,9 +89,6 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
     };
     var removeHoverEffect = function removeHoverEffect() {
       setIsHovered(false);
-      if (document.activeElement instanceof HTMLElement && !fg('confluence_frontend_comments_panel_editor_focus')) {
-        document.activeElement.blur();
-      }
     };
     if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);

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

@@ -5,7 +5,6 @@ import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
 import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
-import { fg } from '@atlaskit/platform-feature-flags';
 export var Mounter = /*#__PURE__*/React.memo(function (props) {
   var Component = props.component,
     range = props.range,
@@ -94,20 +93,18 @@ export var Mounter = /*#__PURE__*/React.memo(function (props) {
     });
     var positionToAnnotate = hoverDraftDocumentPosition || documentPosition;
     if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
-      if (fg('cc_comments_improve_apply_draft_errors')) {
-        if (createAnalyticsEvent) {
-          createAnalyticsEvent({
-            action: ACTION.CREATE_NOT_ALLOWED,
-            actionSubject: ACTION_SUBJECT.ANNOTATION,
-            actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
-            attributes: {
-              positionToAnnotate: positionToAnnotate,
-              applyAnnotationMissing: !applyAnnotation,
-              annotationId: options.annotationId
-            },
-            eventType: EVENT_TYPE.TRACK
-          }).fire(FabricChannel.editor);
-        }
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent({
+          action: ACTION.CREATE_NOT_ALLOWED,
+          actionSubject: ACTION_SUBJECT.ANNOTATION,
+          actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+          attributes: {
+            positionToAnnotate: positionToAnnotate,
+            applyAnnotationMissing: !applyAnnotation,
+            annotationId: options.annotationId
+          },
+          eventType: EVENT_TYPE.TRACK
+        }).fire(FabricChannel.editor);
       }
       return false;
     }

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

@@ -144,20 +144,18 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
     // 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) {
-      if (fg('cc_comments_improve_apply_draft_errors')) {
-        if (createAnalyticsEvent) {
-          createAnalyticsEvent({
-            action: ACTION.CREATE_NOT_ALLOWED,
-            actionSubject: ACTION_SUBJECT.ANNOTATION,
-            actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
-            attributes: {
-              positionToAnnotate: positionToAnnotate,
-              applyAnnotationMissing: !applyAnnotation,
-              annotationId: options.annotationId
-            },
-            eventType: EVENT_TYPE.TRACK
-          }).fire(FabricChannel.editor);
-        }
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent({
+          action: ACTION.CREATE_NOT_ALLOWED,
+          actionSubject: ACTION_SUBJECT.ANNOTATION,
+          actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+          attributes: {
+            positionToAnnotate: positionToAnnotate,
+            applyAnnotationMissing: !applyAnnotation,
+            annotationId: options.annotationId
+          },
+          eventType: EVENT_TYPE.TRACK
+        }).fire(FabricChannel.editor);
       }
       return false;
     }

package/dist/esm/ui/hooks/useScrollToLocalId.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { getDocument } from '@atlaskit/browser-apis';
 
 // Find editor node dom with localId - similar to confluence useScrollOnUrlChange.ts
 var getLocalIdSelector = function getLocalIdSelector(localId, container) {
@@ -33,6 +34,7 @@ var getLocalIdSelector = function getLocalIdSelector(localId, container) {
 };
 export var useScrollToLocalId = function useScrollToLocalId(containerRef, shouldScrollToLocalId) {
   useEffect(function () {
+    var _getDocument;
     // Only run in browser environment
     if (typeof window === 'undefined' || !(containerRef !== null && containerRef !== void 0 && containerRef.current) || !shouldScrollToLocalId) {
       return;
@@ -41,14 +43,83 @@ export var useScrollToLocalId = function useScrollToLocalId(containerRef, should
     // Parse URL parameters for block ID
     var urlParams = new URLSearchParams(window.location.search);
     var blockId = urlParams.get('block');
-    if (blockId) {
-      // Search within the renderer container using the selector function
-      var element = getLocalIdSelector(blockId, containerRef.current);
-      if (element) {
-        element.scrollIntoView({
-          behavior: 'smooth'
-        });
+    if (!blockId) {
+      return;
+    }
+    var retryCount = 0;
+    // 5 second timeout based on dashboard showing ~4.96s TTI load time
+    var maxRetries = 20; // Maximum 20 retries (5 seconds at 250ms intervals)
+    var retryInterval = 250; // Check every 250ms
+    var intervalId = null;
+    var scrollToElement = function scrollToElement() {
+      if (containerRef !== null && containerRef !== void 0 && containerRef.current) {
+        var element = getLocalIdSelector(blockId, containerRef.current);
+        if (element) {
+          element.scrollIntoView({
+            behavior: 'smooth'
+          });
+          return true;
+        }
+      }
+      return false;
+    };
+    var attemptScroll = function attemptScroll() {
+      retryCount++;
+
+      // Try to scroll to element
+      if (scrollToElement()) {
+        if (intervalId) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+        return true;
+      }
+
+      // Stop retrying if we've exceeded max retries
+      if (retryCount >= maxRetries) {
+        if (intervalId) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+        return false;
       }
+      return false;
+    };
+
+    // Try to scroll immediately
+    if (attemptScroll()) {
+      return;
+    }
+    if (((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.readyState) === 'complete') {
+      // Document is already ready, try a few more times with delays
+      // This handles cases where elements are added after document ready
+      intervalId = setInterval(function () {
+        attemptScroll();
+      }, retryInterval);
+    } else {
+      // Document not ready yet, wait for it and then retry
+      intervalId = setInterval(function () {
+        var _getDocument2;
+        if (((_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.readyState) === 'complete') {
+          attemptScroll();
+        } else if (retryCount >= maxRetries) {
+          // Stop retrying even if document isn't ready
+          if (intervalId) {
+            clearInterval(intervalId);
+            intervalId = null;
+          }
+        } else {
+          retryCount++;
+        }
+      }, retryInterval);
     }
+
+    // Cleanup function
+    return function () {
+      if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+      }
+    };
   }, [containerRef, shouldScrollToLocalId]);
 };

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

@@ -13,6 +13,7 @@ export default function BlockCard(props: {
     eventHandlers?: EventHandlers;
     isNodeNested?: boolean;
     layout?: string;
+    localId?: string;
     portal?: HTMLElement;
     rendererAppearance?: RendererAppearance;
     smartLinks?: SmartLinksOptions;

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

@@ -55,6 +55,7 @@ declare const BlockCard: React.ComponentType<{
     eventHandlers?: import("@atlaskit/editor-common/ui").EventHandlers;
     isNodeNested?: boolean;
     layout?: string;
+    localId?: string;
     portal?: HTMLElement;
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions;

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

@@ -13,6 +13,7 @@ export default function BlockCard(props: {
     eventHandlers?: EventHandlers;
     isNodeNested?: boolean;
     layout?: string;
+    localId?: string;
     portal?: HTMLElement;
     rendererAppearance?: RendererAppearance;
     smartLinks?: SmartLinksOptions;

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

@@ -55,6 +55,7 @@ declare const BlockCard: React.ComponentType<{
     eventHandlers?: import("@atlaskit/editor-common/ui").EventHandlers;
     isNodeNested?: boolean;
     layout?: string;
+    localId?: string;
     portal?: HTMLElement;
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "123.1.1",
+	"version": "123.2.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,6 +28,7 @@
 		"@atlaskit/analytics-listeners": "^9.0.0",
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.1.0",
+		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/code": "^17.2.0",
 		"@atlaskit/editor-json-transformer": "^8.29.0",
@@ -37,7 +38,7 @@
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/emoji": "^69.5.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-datasource": "^4.23.0",
 		"@atlaskit/media-card": "^79.5.0",
@@ -54,7 +55,7 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.21.0",
+		"@atlaskit/tmp-editor-statsig": "^12.22.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -68,7 +69,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.6.0",
+		"@atlaskit/editor-common": "^109.7.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -82,7 +83,7 @@
 		"@atlaskit/css-reset": "^7.3.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/link-test-helpers": "^8.3.0",
-		"@atlaskit/linking-common": "^9.5.0",
+		"@atlaskit/linking-common": "^9.6.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^39.0.0",
@@ -125,9 +126,6 @@
 		"confluence_frontend_table_scrollbar_ttvc_fix": {
 			"type": "boolean"
 		},
-		"cc_comments_improve_apply_draft_errors": {
-			"type": "boolean"
-		},
 		"cc_comments_create_inline_experience_entry_point": {
 			"type": "boolean"
 		},
@@ -242,9 +240,6 @@
 		"issue_table_single_line_row_height_fast_follows": {
 			"type": "boolean"
 		},
-		"confluence_frontend_comments_panel_editor_focus": {
-			"type": "boolean"
-		},
 		"platform_custom_number_column": {
 			"type": "boolean"
 		},