Bug: small rendering error with multi-paragraph quotes in live edit

[laurastephsmith]

To reproduce, create a note with the following content:

Paragraph before quote.

> First paragraph of quote.
> 
> Second paragraph of quote.

Paragraph after quote.

> One quote

> Another quote

The quote made of two paragraphs renders correctly in preview:

But in live edit the two paragraphs and the gap between them render as three boxes:

Two quotes with a blank line between them render correctly in both views: I have just included them to test that behaviour.

(The heading isn't a rendering error, I just managed to click the cursor into the heading before taking the screenshot!)

Thanks!

[hungsu]

This sadly is not fixable as of today. In order to fix this, one of two things would have to happen:

1. Licat and Silver would have to use a different element in Live Preview than just "div" for blockquotes. This would allow me to use the :first-of-type and :last-of-type selectors https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
2. CSS adds the first-of-class and last-of-class pseudo selectors, or the nth of s pseudo selector. https://www.w3.org/TR/selectors-4/#nth-child-pseudo

I'll leave this issue in the event the above happens. In the meantime I've pushed up a change to make live preview inner borders a bit thinner.

[laurastephsmith]

Thank you - definitely looks better with the thinner inner border.

You're over my head with Licat and Silver. But I'm curious: why doesn't this affect the default theme? Are those CSS frameworks you're using?

L

[hungsu]

Hi Laura,

This doesn't affect other themes because other themes make no attempt to add top and bottom border in Live Preview. Some themes, such as Primary by Cecilia May, go around this by having left border only in live preview, and borders all around in reading mode. I may go with that approach, I haven't decided what I'll do yet.

I'm not using a CSS framework, just Sass.

[laurastephsmith]

Oh I see - yes, so the default theme renders it as a grey box instead of a hollow box with borders. I definitely like your version better!

Just again out of curiosity... why are there such differences with the CSS between live edit and preview?

[laurastephsmith]

(May have just answered my own question). I see that in this instance, in live edit each section is in its own div, but not so on the preview rendering. I assume that's a requirement for the system they're using for live edit?

[hungsu]

Exactly - live preview uses divs with different classes. That said, I've thought of a pretty wild hack to fix this. I can slightly overlap each div like shingles on a roof to cover up the intermediate lines. This is extremely hacky and will break for blockquotes with many lines, but it works

[laurastephsmith]

That makes me feel better about my own hacks now! Genius though! :)

I've just updated and it's still the same. Does the built-in Obsidian theme updater pull straight from github, or is there a lag?

[hungsu]

Might have a cross browser thing. Noticed the blockquote not working on my Mac machine like you say, but it works fine on my Windows machine even after deleting and redownloading from the Theme store. Will investigate

[laurastephsmith]

I thought Electron used Chromium to render across everything? Wonder what the difference is... I'm on Linux. Shout if you want me to test anything.