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

Nested Callouts don't render paragraph breaks #1302

Open
Imoriarty opened this issue Jul 31, 2024 · 3 comments
Open

Nested Callouts don't render paragraph breaks #1302

Imoriarty opened this issue Jul 31, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@Imoriarty
Copy link

Describe the bug

When a callout is nested inside another callout, paragraph breaks aren't respected.

To Reproduce

  1. Create a Callout
  2. Nest a Callout inside it
  3. Place text within the second callout.
  4. Hard return the text twice in the middle to create a seperate paragraph.
  5. In Obsidian & Markdown, the second paragraph will be created.
  6. In Quartz / Browser rendering, the second paragraph is lost.

Expected behavior

The second paragraph is rendered.

Screenshots and Source

Example Code:

> [!info]- Lorem Ipsum
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur commodo mattis. Donec pretium fringilla ex in elementum. Aliquam convallis enim sed risus consequat tincidunt. In hac habitasse platea dictumst. Nulla et enim scelerisque, vestibulum purus sed, condimentum leo.
> 
> Praesent egestas ut enim quis vestibulum. Ut at molestie nibh. Proin interdum purus nisi, at aliquam nulla imperdiet in. Donec a ornare nunc, in sagittis est. Mauris vehicula pellentesque quam in interdum. Duis lobortis venenatis lorem vitae lacinia. Donec diam libero, bibendum sed eros iaculis, ullamcorper fermentum tellus.
> 
> > [!info]- Aliquam Erat
> > Aliquam erat volutpat. Sed neque ex, hendrerit a convallis id, aliquet eget nisl. Curabitur erat quam, mattis id lobortis at, ultrices sed turpis. Aenean ultricies suscipit risus vitae eleifend. Praesent luctus dictum nunc ut suscipit. Sed vitae eleifend massa. Etiam molestie ultrices felis sit amet eleifend. Proin dictum mollis massa, eu congue arcu lacinia nec. Nam lacus nisl, dictum vitae leo quis, vehicula malesuada libero. Duis placerat lacinia tincidunt.
> > 
> > Mauris vitae sodales magna. Vivamus bibendum nulla sit amet nibh placerat, in gravida sem malesuada. Nulla in velit eget est dignissim porttitor a quis urna. Nullam eleifend, erat id feugiat lacinia, leo turpis eleifend nisi, non lobortis nisi lectus vitae elit. Vivamus aliquet finibus diam a maximus. Praesent suscipit mi eget arcu laoreet consectetur. Cras ligula felis, placerat ut erat non, tristique sollicitudin mauris.

Obsidian

Obsidian_Render

Quartz 4.2.4 & Chrome

Browser_Render

Stack

  • Quartz Version: 4.2.4
  • node Version: v22.3.0
  • npm version: 10.8.1
  • OS: Win 10 - 22H2 - 19045.4717
  • Browser - Chrome - v 126.0.6478.185 (Official Build) (64-bit)
  • Browser - Edge - v 127.0.2651.74 (Official build) (64-bit)

Additional context

Rendered Html:

Note the second block of text isn't rendered into two <p> spans.

<blockquote class="callout info is-collapsible" data-callout="info" data-callout-fold="" style="max-height: 494px;">
	<div class="callout-title">
		<div class="callout-icon"></div>
		<div class="callout-title-inner">
			<p>Lorem Ipsum </p>
		</div>
		<div class="fold-callout-icon"></div>
	</div>
	<div class="callout-content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur commodo mattis. Donec pretium
			fringilla ex in elementum. Aliquam convallis enim sed risus consequat tincidunt. In hac habitasse platea
			dictumst. Nulla et enim scelerisque, vestibulum purus sed, condimentum leo.</p>
		<p>Praesent egestas ut enim quis vestibulum. Ut at molestie nibh. Proin interdum purus nisi, at aliquam nulla
			imperdiet in. Donec a ornare nunc, in sagittis est. Mauris vehicula pellentesque quam in interdum. Duis
			lobortis venenatis lorem vitae lacinia. Donec diam libero, bibendum sed eros iaculis, ullamcorper fermentum
			tellus.</p>
		<blockquote class="callout info is-collapsible" data-callout="info" data-callout-fold=""
			style="max-height: 204px;">
			<div class="callout-title">
				<div class="callout-icon"></div>
				<div class="callout-title-inner">
					<p>Aliquam Erat </p>
				</div>
				<div class="fold-callout-icon"></div>
			</div>
			<div class="callout-content">
				<p>Mauris vitae sodales magna. Vivamus bibendum nulla sit amet nibh placerat, in gravida sem malesuada.
					Nulla in velit eget est dignissim porttitor a quis urna. Nullam eleifend, erat id feugiat lacinia,
					leo turpis eleifend nisi, non lobortis nisi lectus vitae elit. Vivamus aliquet finibus diam a
					maximus. Praesent suscipit mi eget arcu laoreet consectetur. Cras ligula felis, placerat ut erat
					non, tristique sollicitudin mauris.</p>
			</div>
		</blockquote>
	</div>
</blockquote>
@Imoriarty Imoriarty added the bug Something isn't working label Jul 31, 2024
@MasssiveJuice08
Copy link
Sponsor Contributor

Could you try adding a line break after the first line of each callout? See the example below.

I found that adding a linebreak after the callout title made these render correctly, without altering how it rendered in Obsidian.

If you wish to have linebreaks in Quartz treated identically as in Obsidian, you can enable Quartz's HardLineBreaks plugin


Example:

> [!info]- Lorem Ipsum
>
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur commodo mattis. Donec pretium fringilla ex in elementum. Aliquam convallis enim sed risus consequat tincidunt. In hac habitasse platea dictumst. Nulla et enim scelerisque, vestibulum purus sed, condimentum leo.
> 
> Praesent egestas ut enim quis vestibulum. Ut at molestie nibh. Proin interdum purus nisi, at aliquam nulla imperdiet in. Donec a ornare nunc, in sagittis est. Mauris vehicula pellentesque quam in interdum. Duis lobortis venenatis lorem vitae lacinia. Donec diam libero, bibendum sed eros iaculis, ullamcorper fermentum tellus.
> 
> > [!info]- Aliquam Erat
> >
> > Aliquam erat volutpat. Sed neque ex, hendrerit a convallis id, aliquet eget nisl. Curabitur erat quam, mattis id lobortis at, ultrices sed turpis. Aenean ultricies suscipit risus vitae eleifend. Praesent luctus dictum nunc ut suscipit. Sed vitae eleifend massa. Etiam molestie ultrices felis sit amet eleifend. Proin dictum mollis massa, eu congue arcu lacinia nec. Nam lacus nisl, dictum vitae leo quis, vehicula malesuada libero. Duis placerat lacinia tincidunt.
> > 
> > Mauris vitae sodales magna. Vivamus bibendum nulla sit amet nibh placerat, in gravida sem malesuada. Nulla in velit eget est dignissim porttitor a quis urna. Nullam eleifend, erat id feugiat lacinia, leo turpis eleifend nisi, non lobortis nisi lectus vitae elit. Vivamus aliquet finibus diam a maximus. Praesent suscipit mi eget arcu laoreet consectetur. Cras ligula felis, placerat ut erat non, tristique sollicitudin mauris.

@Imoriarty
Copy link
Author

Oh, hey, came back to this - yeah that works.

In the above example - does the parent callout fail to expand enough for the child callout, or is it just my busted instance?

@MasssiveJuice08
Copy link
Sponsor Contributor

Oh, hey, came back to this - yeah that works.

In the above example - does the parent callout fail to expand enough for the child callout, or is it just my busted instance?

Not that I have observed, no - it should be fine :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants