Scroll smoothly before focusing diagnostic locations

Co-authored-by: Codex <codex@openai.com>

Author: rcosta358

scripts/playground/editor-navigation.mjs

@@ -0,0 +1,32 @@
+function scrollTo(element, top, behavior) {
+  const target = Math.max(0, Math.min(top, element.scrollHeight - element.clientHeight));
+  if (Math.abs(target - element.scrollTop) < 1) return Promise.resolve();
+  return new Promise(resolve => {
+    const events = element === document.scrollingElement ? document : element;
+    if (behavior === 'smooth') events.addEventListener('scrollend', resolve, { once: true });
+    element.scrollTo({ top: target, behavior });
+    if (behavior === 'instant') resolve();
+  });
+}
+
+export function navigateTo(view, anchor) {
+  view.requestMeasure({
+    read: () => {
+      const line = view.lineBlockAt(anchor);
+      const editor = view.dom.getBoundingClientRect();
+      return {
+        editorTop: line.top + line.height / 2 - view.scrollDOM.clientHeight / 2,
+        pageTop: window.scrollY + editor.top + editor.height / 2 - window.innerHeight / 2
+      };
+    },
+    write: async ({ editorTop, pageTop }) => {
+      const behavior = matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth';
+      await Promise.all([
+        scrollTo(view.scrollDOM, editorTop, behavior),
+        scrollTo(document.scrollingElement, pageTop, behavior)
+      ]);
+      view.dispatch({ selection: { anchor } });
+      view.focus();
+    }
+  });
+}

scripts/playground/editor.js

@@ -4,6 +4,7 @@ import { examples } from './examples.mjs';
 import { diagnosticHtml, editorDiagnostic } from './diagnostics.mjs';
 import { editorJava, editorTheme } from './editor-theme.mjs';
 import { editorSetup } from './editor-setup.mjs';
+import { navigateTo } from './editor-navigation.mjs';
 
 const root = document.querySelector('#lj-playground');
 const example = document.querySelector('#lj-example');
@@ -67,9 +68,7 @@ function render(result) {
         const mark = issue && editorDiagnostic(issue, view.state.doc.length);
         const line = view.state.doc.line(lineNumber);
         const anchor = mark?.from ?? line.from + line.text.search(/\S|$/);
-        view.dom.scrollIntoView({ block: 'center', inline: 'nearest' });
-        view.dispatch({ selection: { anchor }, effects: EditorView.scrollIntoView(anchor, { y: 'center' }) });
-        view.focus();
+        navigateTo(view, anchor);
       };
     }
     pre.append(code);