fix: delay anchor line scrolling until layout settles

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: JohnMcLear

src/static/js/pad_editor.ts

@@ -210,49 +210,76 @@ const padeditor = (() => {
 
 exports.padeditor = padeditor;
 
-exports.focusOnLine = (ace) => {
-  // If a number is in the URI IE #L124 go to that line number
+const getHashedLineNumber = () => {
   const lineNumber = window.location.hash.substr(1);
-  if (lineNumber) {
-    if (lineNumber[0] === 'L') {
-      const $outerdoc = $('iframe[name="ace_outer"]').contents().find('#outerdocbody');
-      const lineNumberInt = parseInt(lineNumber.substr(1));
-      if (lineNumberInt) {
-        const $inner = $('iframe[name="ace_outer"]').contents().find('iframe')
-            .contents().find('#innerdocbody');
-        const line = $inner.find(`div:nth-child(${lineNumberInt})`);
-        if (line.length !== 0) {
-          let offsetTop = line.offset().top;
-          offsetTop += parseInt($outerdoc.css('padding-top').replace('px', ''));
-          const hasMobileLayout = $('body').hasClass('mobile-layout');
-          if (!hasMobileLayout) {
-            offsetTop += parseInt($inner.css('padding-top').replace('px', ''));
-          }
-          const $outerdocHTML = $('iframe[name="ace_outer"]').contents()
-              .find('#outerdocbody').parent();
-          $outerdoc.css({top: `${offsetTop}px`}); // Chrome
-          $outerdocHTML.animate({scrollTop: offsetTop}); // needed for FF
-          const node = line[0];
-          ace.callWithAce((ace) => {
-            const selection = {
-              startPoint: {
-                index: 0,
-                focusAtStart: true,
-                maxIndex: 1,
-                node,
-              },
-              endPoint: {
-                index: 0,
-                focusAtStart: true,
-                maxIndex: 1,
-                node,
-              },
-            };
-            ace.ace_setSelection(selection);
-          });
-        }
-      }
+  if (!lineNumber || lineNumber[0] !== 'L') return null;
+  const lineNumberInt = parseInt(lineNumber.substr(1));
+  return Number.isInteger(lineNumberInt) && lineNumberInt > 0 ? lineNumberInt : null;
+};
+
+const focusOnHashedLine = (ace, lineNumberInt) => {
+  const $aceOuter = $('iframe[name="ace_outer"]');
+  const $outerdoc = $aceOuter.contents().find('#outerdocbody');
+  const $inner = $aceOuter.contents().find('iframe').contents().find('#innerdocbody');
+  const line = $inner.find(`div:nth-child(${lineNumberInt})`);
+  if (line.length === 0) return false;
+
+  let offsetTop = line.offset().top;
+  offsetTop += parseInt($outerdoc.css('padding-top').replace('px', ''));
+  const hasMobileLayout = $('body').hasClass('mobile-layout');
+  if (!hasMobileLayout) offsetTop += parseInt($inner.css('padding-top').replace('px', ''));
+  const $outerdocHTML = $aceOuter.contents().find('#outerdocbody').parent();
+  $outerdoc.css({top: `${offsetTop}px`}); // Chrome
+  $outerdocHTML.scrollTop(offsetTop);
+  const node = line[0];
+  ace.callWithAce((ace) => {
+    const selection = {
+      startPoint: {
+        index: 0,
+        focusAtStart: true,
+        maxIndex: 1,
+        node,
+      },
+      endPoint: {
+        index: 0,
+        focusAtStart: true,
+        maxIndex: 1,
+        node,
+      },
+    };
+    ace.ace_setSelection(selection);
+  });
+  return true;
+};
+
+exports.focusOnLine = (ace) => {
+  const lineNumberInt = getHashedLineNumber();
+  if (lineNumberInt == null) return;
+  const getCurrentTargetOffset = () => {
+    const $aceOuter = $('iframe[name="ace_outer"]');
+    const $inner = $aceOuter.contents().find('iframe').contents().find('#innerdocbody');
+    const line = $inner.find(`div:nth-child(${lineNumberInt})`);
+    if (line.length === 0) return null;
+    return line.offset().top;
+  };
+
+  const maxSettleDuration = 10000;
+  const settleInterval = 250;
+  const startTime = Date.now();
+  let intervalId = null;
+
+  const focusUntilStable = () => {
+    if (Date.now() - startTime >= maxSettleDuration) {
+      window.clearInterval(intervalId);
+      return;
     }
-  }
+    const currentOffsetTop = getCurrentTargetOffset();
+    if (currentOffsetTop == null) return;
+
+    focusOnHashedLine(ace, lineNumberInt);
+  };
+
+  focusUntilStable();
+  intervalId = window.setInterval(focusUntilStable, settleInterval);
   // End of setSelection / set Y position of editor
 };

src/tests/frontend-new/specs/anchor_scroll.spec.ts

@@ -0,0 +1,50 @@
+import {expect, test} from "@playwright/test";
+import {clearPadContent, goToNewPad, writeToPad} from "../helper/padHelper";
+
+test.describe('anchor scrolling', () => {
+  test.beforeEach(async ({context}) => {
+    await context.clearCookies();
+  });
+
+  test('reapplies #L scroll after earlier content changes height', async ({page}) => {
+    await goToNewPad(page);
+    const padUrl = page.url();
+    await clearPadContent(page);
+    await writeToPad(page, Array.from({length: 30}, (_v, i) => `Line ${i + 1}`).join('\n'));
+    await page.waitForTimeout(1000);
+
+    await page.goto('about:blank');
+    await page.goto(`${padUrl}#L20`);
+    await page.waitForSelector('iframe[name="ace_outer"]');
+    await page.waitForSelector('#editorcontainer.initialized');
+    await page.waitForTimeout(2000);
+
+    const outerDoc = page.frameLocator('iframe[name="ace_outer"]').locator('#outerdocbody');
+    const firstLine = page.frameLocator('iframe[name="ace_outer"]')
+        .frameLocator('iframe')
+        .locator('#innerdocbody > div')
+        .first();
+    const targetLine = page.frameLocator('iframe[name="ace_outer"]')
+        .frameLocator('iframe')
+        .locator('#innerdocbody > div')
+        .nth(19);
+
+    const getScrollTop = async () => await outerDoc.evaluate(
+        (el) => el.parentElement?.scrollTop || 0);
+    const getTargetViewportTop = async () => await targetLine.evaluate((el) => el.getBoundingClientRect().top);
+
+    await expect.poll(getScrollTop).toBeGreaterThan(10);
+    const initialViewportTop = await getTargetViewportTop();
+
+    await firstLine.evaluate((el) => {
+      const filler = document.createElement('div');
+      filler.style.height = '400px';
+      el.appendChild(filler);
+    });
+
+    await expect.poll(async () => {
+      const currentViewportTop = await getTargetViewportTop();
+      return Math.abs(currentViewportTop - initialViewportTop);
+    }).toBeLessThanOrEqual(80);
+  });
+});

src/tests/frontend/specs/scrollTo.js

@@ -15,6 +15,20 @@ describe('scrollTo.js', function () {
         return (topOffset >= 100);
       });
     });
+
+    it('reapplies the scroll when earlier content changes height after load', async function () {
+      const chrome$ = helper.padChrome$;
+      const inner$ = helper.padInner$;
+      const getTopOffset = () => parseInt(chrome$('iframe').first('iframe')
+          .contents().find('#outerdocbody').css('top')) || 0;
+
+      await helper.waitForPromise(() => getTopOffset() >= 100);
+      const initialTopOffset = getTopOffset();
+
+      inner$('#innerdocbody > div').first().css('height', '400px');
+
+      await helper.waitForPromise(() => getTopOffset() > initialTopOffset + 200);
+    });
   });
 
   describe('doesnt break on weird hash input', function () {