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.

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

Visual diff: scroll to diff chunks #518

Closed
humitos opened this issue Feb 3, 2025 · 0 comments · Fixed by #519
Closed

Visual diff: scroll to diff chunks #518

humitos opened this issue Feb 3, 2025 · 0 comments · Fixed by #519

Comments

@humitos
Copy link
Member

humitos commented Feb 3, 2025

I found myself wanting the "Show diff" to scroll to the first change when I click it. That way, I can immediately see the changes in the pages. Ideally, I'd like to have extra up/down arrows next to "Show diff" so I can jump between chunks.

Here is an example:

Peek.2025-02-03.15-05.webm
window.scrollTo(0, document.querySelectorAll("p:has(.doc-diff-removed), p:has(.doc-diff-added)").offsetTop - 150)

Note that we can't switch between each of the .doc-diff-removed and .doc-diff-added as-is because there is a bunch of them. It could even be one per word changed. So, we use p:has(.doc-diff-*) to detect "chunk of changes" inside the same paragraph.

humitos added a commit that referenced this issue Feb 3, 2025
Allow the user to click "up" or "down" arrows to jump between the diff chunks of
the page. I did it pretty quickly, so it may need some refactor polish.

Closes #518
@humitos humitos closed this as completed in 9f298b1 Feb 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant