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

Fix MathJax inline fields flickering in Live Preview #2089

Merged
merged 4 commits into from
Oct 9, 2023
Merged

Fix MathJax inline fields flickering in Live Preview #2089

merged 4 commits into from
Oct 9, 2023

Conversation

RyotaUshio
Copy link
Contributor

@RyotaUshio RyotaUshio commented Oct 7, 2023

Hi, I noticed that when I used an inline math like $f(x)$ as the value of an inline field, it caused this annoying flickering for every keystroke in live preview.

Screen.Recording.2023-10-07.at.14.53.54.mov

I've identified the root cause of the vertical movement as the implementation of renderCompactMarkdown, so I've fixed it. Now the flickering is still there, but much less annoying:

Screen.Recording.2023-10-07.at.15.07.20.mov

I will try to eliminate the flickering entirely by reviewing the updating process of the decorations, but for now, this should help as a quick fix.

Please let me know if you have any concerns.

Thank you!

@RyotaUshio RyotaUshio changed the title Fix renderCompactMarkdown causing MathJax Flickering Fix renderCompactMarkdown causing MathJax inline fields flickering in Live Preview Oct 7, 2023
@RyotaUshio
Copy link
Contributor Author

This PR also fixes the bug where an inline query breaks the line number gutter when the field's value is a MathJax expression. Here's a demo:

Before (52fcd0b):

Screen.Recording.2023-10-07.at.18.33.46.mov

After (5789f9b):

Screen.Recording.2023-10-07.at.18.31.48.mov

@RyotaUshio RyotaUshio changed the title Fix renderCompactMarkdown causing MathJax inline fields flickering in Live Preview Fix MathJax inline fields flickering in Live Preview Oct 7, 2023
@RyotaUshio
Copy link
Contributor Author

Update: I've written the decoration updating process, inspired by lp-render.ts.

Now, there's no flickering MathJax inline field!

Screen.Recording.2023-10-08.at.2.01.41.mov

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 this pull request may close these issues.

2 participants