Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Don't scroll sync to elements inside collapsed details sections #176541

Merged
merged 2 commits into from Mar 8, 2023
Merged

Don't scroll sync to elements inside collapsed details sections #176541

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
71504b5
Don't scroll sync to elements inside collapsed details sections
mjbvz Mar 8, 2023
4fe3392
Merge branch 'main' into permanent-mackerel
mjbvz Mar 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
44 changes: 35 additions & 9 deletions extensions/markdown-language-features/preview-src/scroll-sync.ts
View file
Open in desktop
Expand Up @@ -8,10 +8,20 @@ import { SettingsManager } from './settings';
const codeLineClass = 'code-line';


export interface CodeLineElement {
element: HTMLElement;
line: number;
codeElement?: HTMLElement;
export class CodeLineElement {
private readonly _detailParentElements: readonly HTMLDetailsElement[];

constructor(
readonly element: HTMLElement,
readonly line: number,
readonly codeElement?: HTMLElement,
) {
this._detailParentElements = Array.from(getParentsWithTagName<HTMLDetailsElement>(element, 'DETAILS'));
}

get isVisible(): boolean {
return !this._detailParentElements.some(x => !x.open);
}
}

const getCodeLineElements = (() => {
Expand All @@ -20,21 +30,26 @@ const getCodeLineElements = (() => {
return (documentVersion: number) => {
if (!cachedElements || documentVersion !== cachedVersion) {
cachedVersion = documentVersion;
cachedElements = [{ element: document.body, line: -1 }];
cachedElements = [new CodeLineElement(document.body, -1)];
for (const element of document.getElementsByClassName(codeLineClass)) {
if (!(element instanceof HTMLElement)) {
continue;
}

const line = +element.getAttribute('data-line')!;
if (isNaN(line)) {
continue;
}


if (element.tagName === 'CODE' && element.parentElement && element.parentElement.tagName === 'PRE') {
// Fenced code blocks are a special case since the `code-line` can only be marked on
// the `<code>` element and not the parent `<pre>` element.
cachedElements.push({ element: element.parentElement as HTMLElement, line: line, codeElement: element as HTMLElement });
cachedElements.push(new CodeLineElement(element.parentElement, line, element));
} else if (element.tagName === 'UL' || element.tagName === 'OL') {
// Skip adding list elements since the first child has the same code line (and should be preferred)
} else {
cachedElements.push({ element: element as HTMLElement, line });
cachedElements.push(new CodeLineElement(element, line));
}
}
}
Expand Down Expand Up @@ -67,7 +82,7 @@ export function getElementsForSourceLine(targetLine: number, documentVersion: nu
* Find the html elements that are at a specific pixel offset on the page.
*/
export function getLineElementsAtPageOffset(offset: number, documentVersion: number): { previous: CodeLineElement; next?: CodeLineElement } {
const lines = getCodeLineElements(documentVersion);
const lines = getCodeLineElements(documentVersion).filter(x => x.isVisible);
const position = offset - window.scrollY;
let lo = -1;
let hi = lines.length - 1;
Expand Down Expand Up @@ -145,9 +160,12 @@ export function scrollToRevealSourceLine(line: number, documentVersion: number,
window.scroll(window.scrollX, Math.max(1, window.scrollY + scrollTo));
}

export function getEditorLineNumberForPageOffset(offset: number, documentVersion: number) {
export function getEditorLineNumberForPageOffset(offset: number, documentVersion: number): number | null {
const { previous, next } = getLineElementsAtPageOffset(offset, documentVersion);
if (previous) {
if (previous.line < 0) {
return 0;
}
const previousBounds = getElementBounds(previous);
const offsetFromPrevious = (offset - window.scrollY - previousBounds.top);
if (next) {
Expand All @@ -169,3 +187,11 @@ export function getLineElementForFragment(fragment: string, documentVersion: num
return element.element.id === fragment;
});
}

function* getParentsWithTagName<T extends HTMLElement>(element: HTMLElement, tagName: string): Iterable<T> {
for (let parent = element.parentElement; parent; parent = parent.parentElement) {
if (parent.tagName === tagName) {
yield parent as T;
}
}
}