@atlaskit/renderer 128.5.0 → 128.6.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/renderer
 
+## 128.6.0
+
+### Minor Changes
+
+- [`13ec7df78a017`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13ec7df78a017) -
+  Editor-5664: Fix scroll position for block links
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 128.5.0
 
 ### Minor Changes

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

@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "128.4.1";
+var packageVersion = "128.5.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -440,7 +440,7 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       timeZone: props.timeZone
     });
   }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
-  (0, _useScrollToBlock.useScrollToBlock)(editorRef, props.document);
+  (0, _useScrollToBlock.useScrollToBlock)(editorRef, props.document, props.scrollToBlock);
   try {
     var _rendererContext$feat, _props$media;
     var schema = getSchema(props.schema, props.adfStage);

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

@@ -7,6 +7,7 @@ exports.useScrollToBlock = void 0;
 var _react = require("react");
 var _browserApis = require("@atlaskit/browser-apis");
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useStableScroll2 = require("./useStableScroll");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -25,7 +26,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * @param containerRef - Optional ref to the renderer container (RendererStyleContainer)
  * @param adfDoc - The ADF document to search for nodes and expand parents
  */
-var useScrollToBlock = exports.useScrollToBlock = function useScrollToBlock(containerRef, adfDoc) {
+var useScrollToBlock = exports.useScrollToBlock = function useScrollToBlock(containerRef, adfDoc, scrollToBlock) {
   var _useStableScroll = (0, _useStableScroll2.useStableScroll)({
       stabilityWaitTime: 750,
       maxStabilityWaitTime: 10000
@@ -120,7 +121,20 @@ var useScrollToBlock = exports.useScrollToBlock = function useScrollToBlock(cont
       // Element found and all parent expands are open! Use the utility to scroll.
       // (This will handle any final edge cases and do the actual scrolling).
       // Capture cleanup function to cancel pending timeouts.
-      cancelExpandAndScroll = (0, _blockMenu.expandAllParentsThenScroll)(element);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_4')) {
+        cancelExpandAndScroll = (0, _blockMenu.expandAllParentsThenScroll)(element, 0, function (el) {
+          if (scrollToBlock) {
+            scrollToBlock(el);
+          } else {
+            el.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start'
+            });
+          }
+        });
+      } else {
+        cancelExpandAndScroll = (0, _blockMenu.expandAllParentsThenScroll)(element);
+      }
       return true;
     };
     var performScroll = function performScroll() {
@@ -235,5 +249,5 @@ var useScrollToBlock = exports.useScrollToBlock = function useScrollToBlock(cont
     return cleanup;
     // Intentionally not including adfDoc in the dependency array to avoid unnecessary re-renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [containerRef, waitForStability, cleanupStability]);
+  }, [containerRef, waitForStability, cleanupStability, scrollToBlock]);
 };

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

@@ -57,7 +57,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "128.4.1";
+const packageVersion = "128.5.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -430,7 +430,7 @@ export const RendererFunctionalComponent = props => {
     ...createRendererContext(props.featureFlags, props.isTopLevelRenderer),
     timeZone: props.timeZone
   }), [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
-  useScrollToBlock(editorRef, props.document);
+  useScrollToBlock(editorRef, props.document, props.scrollToBlock);
   try {
     var _rendererContext$feat, _props$media;
     const schema = getSchema(props.schema, props.adfStage);

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

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { getDocument } from '@atlaskit/browser-apis';
 import { DEFAULT_BLOCK_LINK_HASH_PREFIX, expandAllParentsThenScroll, expandElement, isExpandCollapsed, findNodeWithExpandParents, getLocalIdSelector } from '@atlaskit/editor-common/block-menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useStableScroll } from './useStableScroll';
 
 /**
@@ -17,7 +18,7 @@ import { useStableScroll } from './useStableScroll';
  * @param containerRef - Optional ref to the renderer container (RendererStyleContainer)
  * @param adfDoc - The ADF document to search for nodes and expand parents
  */
-export const useScrollToBlock = (containerRef, adfDoc) => {
+export const useScrollToBlock = (containerRef, adfDoc, scrollToBlock) => {
   const {
     waitForStability,
     cleanup: cleanupStability
@@ -106,7 +107,20 @@ export const useScrollToBlock = (containerRef, adfDoc) => {
       // Element found and all parent expands are open! Use the utility to scroll.
       // (This will handle any final edge cases and do the actual scrolling).
       // Capture cleanup function to cancel pending timeouts.
-      cancelExpandAndScroll = expandAllParentsThenScroll(element);
+      if (fg('platform_editor_block_menu_v2_patch_4')) {
+        cancelExpandAndScroll = expandAllParentsThenScroll(element, 0, el => {
+          if (scrollToBlock) {
+            scrollToBlock(el);
+          } else {
+            el.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start'
+            });
+          }
+        });
+      } else {
+        cancelExpandAndScroll = expandAllParentsThenScroll(element);
+      }
       return true;
     };
     const performScroll = () => {
@@ -214,5 +228,5 @@ export const useScrollToBlock = (containerRef, adfDoc) => {
     return cleanup;
     // Intentionally not including adfDoc in the dependency array to avoid unnecessary re-renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [containerRef, waitForStability, cleanupStability]);
+  }, [containerRef, waitForStability, cleanupStability, scrollToBlock]);
 };

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

@@ -62,7 +62,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "128.4.1";
+var packageVersion = "128.5.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -431,7 +431,7 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
       timeZone: props.timeZone
     });
   }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
-  useScrollToBlock(editorRef, props.document);
+  useScrollToBlock(editorRef, props.document, props.scrollToBlock);
   try {
     var _rendererContext$feat, _props$media;
     var schema = getSchema(props.schema, props.adfStage);

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

@@ -4,6 +4,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import { useEffect } from 'react';
 import { getDocument } from '@atlaskit/browser-apis';
 import { DEFAULT_BLOCK_LINK_HASH_PREFIX, expandAllParentsThenScroll, expandElement, isExpandCollapsed, findNodeWithExpandParents, getLocalIdSelector } from '@atlaskit/editor-common/block-menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useStableScroll } from './useStableScroll';
 
 /**
@@ -20,7 +21,7 @@ import { useStableScroll } from './useStableScroll';
  * @param containerRef - Optional ref to the renderer container (RendererStyleContainer)
  * @param adfDoc - The ADF document to search for nodes and expand parents
  */
-export var useScrollToBlock = function useScrollToBlock(containerRef, adfDoc) {
+export var useScrollToBlock = function useScrollToBlock(containerRef, adfDoc, scrollToBlock) {
   var _useStableScroll = useStableScroll({
       stabilityWaitTime: 750,
       maxStabilityWaitTime: 10000
@@ -115,7 +116,20 @@ export var useScrollToBlock = function useScrollToBlock(containerRef, adfDoc) {
       // Element found and all parent expands are open! Use the utility to scroll.
       // (This will handle any final edge cases and do the actual scrolling).
       // Capture cleanup function to cancel pending timeouts.
-      cancelExpandAndScroll = expandAllParentsThenScroll(element);
+      if (fg('platform_editor_block_menu_v2_patch_4')) {
+        cancelExpandAndScroll = expandAllParentsThenScroll(element, 0, function (el) {
+          if (scrollToBlock) {
+            scrollToBlock(el);
+          } else {
+            el.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start'
+            });
+          }
+        });
+      } else {
+        cancelExpandAndScroll = expandAllParentsThenScroll(element);
+      }
       return true;
     };
     var performScroll = function performScroll() {
@@ -230,5 +244,5 @@ export var useScrollToBlock = function useScrollToBlock(containerRef, adfDoc) {
     return cleanup;
     // Intentionally not including adfDoc in the dependency array to avoid unnecessary re-renders.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [containerRef, waitForStability, cleanupStability]);
+  }, [containerRef, waitForStability, cleanupStability, scrollToBlock]);
 };

package/dist/types/ui/hooks/useScrollToBlock.d.ts

@@ -13,4 +13,4 @@ import type { DocNode } from '@atlaskit/adf-schema';
  * @param containerRef - Optional ref to the renderer container (RendererStyleContainer)
  * @param adfDoc - The ADF document to search for nodes and expand parents
  */
-export declare const useScrollToBlock: (containerRef?: React.RefObject<HTMLDivElement>, adfDoc?: DocNode) => void;
+export declare const useScrollToBlock: (containerRef?: React.RefObject<HTMLDivElement>, adfDoc?: DocNode, scrollToBlock?: (element: HTMLElement) => void) => void;

package/dist/types/ui/renderer-props.d.ts

@@ -136,6 +136,12 @@ export interface RendererProps {
     portal?: HTMLElement;
     rendererContext?: RendererContext;
     schema?: Schema;
+    /**
+     * Optional callback to scroll an element into view when using block links (#block-xxx).
+     * When provided, this is used instead of the default scrollIntoView for accurate positioning
+     * in product-specific scroll containers (e.g. Confluence view page).
+     */
+    scrollToBlock?: (element: HTMLElement) => void;
     /**
      * Determines if the extension should be displayed as inline based on the extension parameters.
      * @param extensionParams - The extension parameters.

package/dist/types-ts4.5/ui/hooks/useScrollToBlock.d.ts

@@ -13,4 +13,4 @@ import type { DocNode } from '@atlaskit/adf-schema';
  * @param containerRef - Optional ref to the renderer container (RendererStyleContainer)
  * @param adfDoc - The ADF document to search for nodes and expand parents
  */
-export declare const useScrollToBlock: (containerRef?: React.RefObject<HTMLDivElement>, adfDoc?: DocNode) => void;
+export declare const useScrollToBlock: (containerRef?: React.RefObject<HTMLDivElement>, adfDoc?: DocNode, scrollToBlock?: (element: HTMLElement) => void) => void;

package/dist/types-ts4.5/ui/renderer-props.d.ts

@@ -136,6 +136,12 @@ export interface RendererProps {
     portal?: HTMLElement;
     rendererContext?: RendererContext;
     schema?: Schema;
+    /**
+     * Optional callback to scroll an element into view when using block links (#block-xxx).
+     * When provided, this is used instead of the default scrollIntoView for accurate positioning
+     * in product-specific scroll containers (e.g. Confluence view page).
+     */
+    scrollToBlock?: (element: HTMLElement) => void;
     /**
      * Determines if the extension should be displayed as inline based on the extension parameters.
      * @param extensionParams - The extension parameters.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "128.5.0",
+	"version": "128.6.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -245,6 +245,9 @@
 		"platform_editor_media_border_radius_fix": {
 			"type": "boolean"
 		},
+		"platform_editor_block_menu_v2_patch_4": {
+			"type": "boolean"
+		},
 		"platform-dst-lozenge-tag-badge-visual-uplifts": {
 			"type": "boolean"
 		}