A UI glitch? - Githubissues

laobubu / HyperMD

A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

MIT License

1.47k stars 137 forks source link

A UI glitch? #56

Open hifall opened 5 years ago

hifall commented 5 years ago

I notice this behavior of HyperMD:

When a document's first line is something like this #Some Title, and the page is first loaded, that line is first rendered as Markdown, then "collapses" into plain text. That is, the line is not rendered as Markdown, instead, it appears as plain "#Some Title".

This creates a flicker on the first load, which might not be the smoothest UX possible.

Actually this is reproducible on the official demo: simply navigate to that page, and you will notice that the first "#HyperMD" line is collapsed, right after the page is loaded.

Is there a way to disable this behavior, so that everything is rendered on the first load?

Thank you!

laobubu commented 5 years ago

Hello. Can you provide more details, eg. the browser and its version. And if you can provide a screen recording, that would be better.

hifall commented 5 years ago

Animation attached below.

hypermd

You can see HyperMD "collapses" to # HyperMD in the animation. This is captured directly from the official demo site.

Browser: Chrome 71.0.3578.98 OS: macOS Sierra 10.12

laobubu commented 5 years ago

That's weird... Have you installed any extension that changes style/appearance? I don't have Mac yet. @nasyxx can you reproduce this?

nasyxx commented 5 years ago

Nope, it works well.

When the page is loaded, the cursor could be in the first line, so you see # HyperMD instead of HyperMD. Have you tried to move your cursor to another line?

Google Chrome is up to date
Version 73.0.3664.3 (Official Build) dev (64-bit)

hifall commented 5 years ago

@nasyxx, Moving cursor to another line causes the original line to restored to "rendered" state.

Tried Firefox Quantum 63.0.3 (64-bit), and it has the same issue.

@laobubu, I tested this on Chrome Canary as well and saw the same issue. I had not installed any extension on my Chrome Canary. So, this issue is not caused by a 3rd-party extension.

hifall commented 5 years ago

More clarification on this matter: when this issue happens, there is no mouse/keyboard event whatsoever that could cause this. In other words, I don't click the mouse or use the keyboard.

laobubu commented 5 years ago

Can't reproduce on Firefox Quantum 64.0 (64-bit) & Chrome 72.0.3626.53 beta on Windows. Still have no idea.

hifall commented 5 years ago

I tried on Windows 10, and now I can confirm this also happens on: Windows 10/Chrome 71.0.3578.98 32 bit. With the official demo.

laobubu commented 5 years ago

222

hifall commented 5 years ago

Yup. The title collapse effect shown in the above animation is what I am talking about.

laobubu commented 5 years ago

The # appears because, as @nasyxx said, the caret (the blinking |) is on the first line.

You might not see the blinking caret because the editor is not focused, but it is actually there.

This can be fixed by modifying src/addon/hide-token.ts and handling focus-related events, but I'm not sure whether it will make more bug. I will try to implement this someday. Now I'm occupied with my ~~frustrating~~ graduation project...

hifall commented 5 years ago

Sounds cool.

Good luck with your graduation project then, and looking forward to the fix if possible.

Thanks!