Better scroll sync between the editor and the preview in the SplitEditor

[daiyam]

Description

This change implements better positioning between the editor and the preview in the SplitEditor (particularly with lot of images).

When scrolling, it calculates the position of the shown block (at 1/3 below the top) based on the previous blocks' heights.
When the cursor is active, the preview is moved at a position so we can see what we are typing.

Issue fixed

• View mode not aligned with edit mode because of images #2734
• render pane and editor pane have dislocation #2561

Type of changes

• 🔘 Bug fix (Change that fixed an issue)
• ⚪ Breaking change (Change that can cause existing functionality to change)
• 🔘 Improvement (Change that improves the code. Maybe performance or development improvement)
• ⚪ Feature (Change that adds new functionality)
• ⚪ Documentation change (Change that modifies documentation. Maybe typo fixes)

Checklist:

• 🔘 My code follows the project code style
• ⚪ I have written test for my code and it has been tested
• 🔘 All existing tests have been passed
• ⚪ I have attached a screenshot/video to visualize my change if possible

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #2734: View mode not aligned with edit mode because of images
• #2561: render pane and editor pane have dislocation

---

[daiyam]

I've tested it with the preferences scroll past the last line.
I've added the support to the preference When scrolling, synchronize preview with editor.

It's working fine.

[Shagon94]

Would love to see this be added, its really hard to navigate when viewing side by side due to inconsistency between the live preview and the text itself

[Aaron-Bird]

Was this pr abandoned?

[daiyam]

@Aaron-Bird not by me 😉

[ZeroX-DG]

Sorry for not being able to review this soon, I'll try to work on this when I have time.

[hzhangxyz]

is there any update for this pr?

[ZeroX-DG]

@daiyam sorry for the wait, can you resolve conflict for this PR please?

[daiyam]

@ZeroX-DG I've resolved the conflicts

[ZeroX-DG]

@daiyam the feature does work well but one bug that I found is if you don't separate the lines with an empty line. The whole thing will be rendered as a paragraph with each line separate with <br> and the data-line is 0. This will make the preview doesn't scroll at all when it encounter multiple sticky line.

[daiyam]

@ZeroX-DG I've pushed a fix. Can you test it?

[ZeroX-DG]

Very cool, I think everything looks good now 🎉

[arcturus140]

@daiyam i Think that this pull request is still maintained after almost 2 years deserves some mention. 😮
you're awesome!