fix(anchor-nav): use correct scroll container for sub-page bookmark navigation

goToAnchor was scrolling the visibleHost element which has overflow:visible
and cannot scroll. Now uses #scrollContainer (the first scrollable ancestor)
and computes precise Y offsets from layout fragment positions for sub-page
scroll precision.

SD-2186

Author: caio-pizzol

packages/super-editor/src/core/presentation-editor/PresentationEditor.ts

@@ -4997,6 +4997,7 @@ export class PresentationEditor extends EventEmitter {
         bookmarks: this.#layoutState.bookmarks,
         pageGeometryHelper: this.#pageGeometryHelper ?? undefined,
         painterHost: this.#painterHost,
+        scrollContainer: this.#scrollContainer ?? this.#visibleHost,
         scrollPageIntoView: (pageIndex) => this.#scrollPageIntoView(pageIndex),
         waitForPageMount: (pageIndex, timeoutMs) => this.#waitForPageMount(pageIndex, { timeout: timeoutMs }),
         getActiveEditor: () => this.getActiveEditor(),

packages/super-editor/src/core/presentation-editor/utils/AnchorNavigation.ts

@@ -85,6 +85,7 @@ export type GoToAnchorDeps = {
   bookmarks: Map<string, number>;
   pageGeometryHelper?: PageGeometryHelper;
   painterHost: HTMLElement;
+  scrollContainer: Element | Window;
   scrollPageIntoView: (pageIndex: number) => void;
   waitForPageMount: (pageIndex: number, timeoutMs: number) => Promise<boolean>;
   getActiveEditor: () => Editor;
@@ -99,6 +100,7 @@ export async function goToAnchor({
   bookmarks,
   pageGeometryHelper,
   painterHost,
+  scrollContainer,
   scrollPageIntoView,
   waitForPageMount,
   getActiveEditor,
@@ -117,14 +119,16 @@ export async function goToAnchor({
   const rects = selectionToRects(layout, blocks, measures, pmPos, pmPos + 1, pageGeometryHelper) ?? [];
   const rect = rects[0];
 
-  // Find the page containing this position by scanning fragments
-  // Bookmarks often fall in gaps between fragments (e.g., at page/section breaks),
-  // so we also track the first fragment starting after the position as a fallback
+  // Find the page and fragment Y offset for the bookmark position.
+  // selectionToRects often returns empty for bookmarks (zero-width inline nodes),
+  // so we scan layout fragments to find the precise Y coordinate within the page.
   let pageIndex: number | null = rect?.pageIndex ?? null;
+  let fragmentY: number | null = rect?.top ?? null;
 
   if (pageIndex == null) {
     let nextFragmentPage: number | null = null;
     let nextFragmentStart: number | null = null;
+    let nextFragmentY: number | null = null;
 
     for (const page of layout.pages) {
       for (const fragment of page.fragments) {
@@ -136,13 +140,15 @@ export async function goToAnchor({
         // Exact match: position is within this fragment
         if (pmPos >= fragStart && pmPos < fragEnd) {
           pageIndex = page.number - 1;
+          fragmentY = fragment.y;
           break;
         }
 
         // Track the first fragment that starts after our position
         if (fragStart > pmPos && (nextFragmentStart === null || fragStart < nextFragmentStart)) {
           nextFragmentPage = page.number - 1;
           nextFragmentStart = fragStart;
+          nextFragmentY = fragment.y;
         }
       }
       if (pageIndex != null) break;
@@ -151,6 +157,7 @@ export async function goToAnchor({
     // Use the page of the next fragment if bookmark is in a gap
     if (pageIndex == null && nextFragmentPage != null) {
       pageIndex = nextFragmentPage;
+      fragmentY = nextFragmentY;
     }
   }
 
@@ -160,9 +167,25 @@ export async function goToAnchor({
   scrollPageIntoView(pageIndex);
   await waitForPageMount(pageIndex, timeoutMs);
 
-  // Scroll the page element into view
+  // Scroll to the precise position within the page using the fragment Y offset.
+  // We use the passed-in scrollContainer rather than discovering it via DOM traversal,
+  // because intermediate elements (like painterHost) may have overflow CSS but are
+  // not the actual scroll viewport.
   const pageEl = getPageElementByIndex(painterHost, pageIndex);
-  if (pageEl) {
+
+  if (pageEl && fragmentY != null) {
+    if (scrollContainer instanceof Element) {
+      const pageRect = pageEl.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const targetY = pageRect.top - containerRect.top + scrollContainer.scrollTop + fragmentY;
+      scrollContainer.scrollTo({ top: targetY, behavior: 'instant' });
+    } else {
+      // Window scroll
+      const pageRect = pageEl.getBoundingClientRect();
+      const targetY = pageRect.top + scrollContainer.scrollY + fragmentY;
+      scrollContainer.scrollTo({ top: targetY, behavior: 'instant' });
+    }
+  } else if (pageEl) {
     pageEl.scrollIntoView({ behavior: 'instant', block: 'start' });
   }
 
@@ -171,8 +194,6 @@ export async function goToAnchor({
   if (activeEditor?.commands?.setTextSelection) {
     activeEditor.commands.setTextSelection({ from: pmPos, to: pmPos });
   } else {
-    // Navigation succeeded visually (page scrolled), but caret positioning is unavailable
-    // This is not an error - log a warning for debugging
     console.warn(
       '[PresentationEditor] goToAnchor: Navigation succeeded but could not move caret (editor commands unavailable)',
     );