search

jgm / djot

A light markup language
https://djot.net
MIT License
1.73k stars 43 forks source link

Implement scroll-sync in playground #84

Closed jgm closed 1 year ago

jgm commented 1 year ago

We can copy what commonmark.js's dingus does.

jgm commented 1 year ago

Implemented left->right sync. Would also be good to have right->left sync.

waldyrious commented 1 year ago

I can't seem to be able to input line breaks in the editor now, not sure if it's related to this change. Pressing the enter key just generates a space 🤔. This happens only on Firefox, but not in (Chromium-based) Brave.

Also, I get double scrollbars in the preview pane (on both browsers) as soon as the rendered content is longer than the container's height.

jgm commented 1 year ago

Right, I just noticed these odd differences.

When I paste a document in, Safari puts in two blank lines for every one. Firefox collapses all of them. Chrome looks right.

jgm commented 1 year ago

The weird behavior seems linked to my adding the whitespace-nowrap tailwind class. But I don't want auto-wrapping because it defeats the scrollsync calculations.

jgm commented 1 year ago

It's fixed now, I think.

waldyrious commented 1 year ago

It's fixed now, I think.

Not quite, I'm afraid :(

Here's what I see in Firefox:

image

And in Brave:

image

jgm commented 1 year ago

Sorry, what's the problem you see there? There are slight differences in rendering, but the lines on the left look right.

waldyrious commented 1 year ago

Apologies, I assumed it would be more evident. The issue is the rendered content being cut off at around 182px of height (note the scrollbars).

It seems that this is due to the div wrapping the iframe not having height:100%, so it settles on the default iframe height (150px) plus the 1rem padding. The iframe then gets 100% of the available (182px) height.

jgm commented 1 year ago

OK, thanks. Try it now.

waldyrious commented 1 year ago

Looks better indeed. But the <pre id="result"> is shown under the <iframe> with a non-zero height (it seems to be roughly the same size as the iframe), which makes scrolling around in the page a little awkward. Shouldn't it be set to display:none if the output selection is set to "Preview"?

jgm commented 1 year ago

Done.

waldyrious commented 1 year ago

Nice! The linked-scrolling behavior isn't fully reliable on Firefox, and is a bit jerky on both Firefox and Brave, but it works, and there aren't any layout issues now.