fix: 🐛 fix collapsed callout syntax rendering as blockquote

webapp/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [2022-08-07]
 
+- fix: 🐛 collapsed/uncollapsed callout syntax now correctly renders as a callout block instead of a block quote.
 - fix: 🐛 text highlights (`==highlight==` syntax) are now more legibile in dark mode.
 - fix: 🐛 code blocks no longer render as "undefined" for unregistered languages (e.g. Dataview or Toggl query blocks).
 

webapp/src/lib/components/Callout.svelte

@@ -12,10 +12,10 @@
 
 	$: if (content) {
 		const titleElement = content.getElementsByTagName('p')[0];
-		const match = titleElement.innerText.split('\n')[0].match(/\[!(.+)\](?:\s(.+))?/);
+		const match = titleElement.innerText.split('\n')[0].match(/\[!(.+)\]([+-]?)(?:\s(.+))?/);
 		if (match) {
 			type = match[1]?.trim();
-			title = match[2]?.trim() ?? type[0].toUpperCase() + type.substring(1).toLowerCase();
+			title = match[3]?.trim() ?? type[0].toUpperCase() + type.substring(1).toLowerCase();
 		}
 
 		color = `--${getCalloutColor(type)}`;

webapp/src/lib/marked/renderers/Blockquote.svelte

@@ -3,7 +3,7 @@
 
 	export let raw: string;
 
-	let isCallout: boolean = raw.split('\n')[0].match(/>\s?\[!(.+)\](\s.*|$)/) != null;
+	let isCallout: boolean = raw.split('\n')[0].match(/>\s?\[!(.+)\]([+-]?)(\s.*|$)/) != null;
 </script>
 
 {#if isCallout}

webapp/src/test/markdown/callout.test.ts

@@ -2,19 +2,52 @@ import { render, screen } from '@testing-library/svelte';
 import { readMd } from './util';
 import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
 
-describe('Rendering callouts', async () => {
+const testCases = [
-	const plaintext = await readMd('callout.md');
+	{
+		title: 'Don!t forget to account for non-letters! //fsd \\n',
+		content: 'Sample text.',
+		markdown: `
+> [!Warning] Don!t forget to account for non-letters! //fsd \\n
+> Sample text.
+	`
+	},
+	{
+		title: 'Regular callout',
+		content: 'Sample text.',
+		markdown: `
+> [!NOTE] Regular callout
+> Sample text.
+	`
+	},
+	{
+		title: 'Collapsed callout',
+		content: 'Sample text.',
+		markdown: `
+> [!NOTE]- Collapsed callout
+> Sample text.
+	`
+	},
+	{
+		title: 'Uncollapsed callout',
+		content: 'Sample text.',
+		markdown: `
+> [!NOTE]+ Uncollapsed callout
+> Sample text.
+`
+	}
+];
 
+describe.each(testCases)('Rendering callouts', async (testCase) => {
 	it('Renders callout title correctly ', async () => {
-		render(MarkdownRenderer, { plaintext: plaintext });
+		render(MarkdownRenderer, { plaintext: testCase.markdown });
-		const titleEl = await screen.findByText('Don!t forget to account for non-letters! //fsd \\n');
+		const titleEl = await screen.findByText(testCase.title);
 		expect(titleEl).toBeInTheDocument();
 		expect(titleEl).toHaveClass('callout-title');
 	});
 
 	it('Renders callout content correctly ', async () => {
-		render(MarkdownRenderer, { plaintext: plaintext });
+		render(MarkdownRenderer, { plaintext: testCase.markdown });
-		const contentEl = await screen.findByText('Sample text.');
+		const contentEl = await screen.findByText(testCase.content);
 		expect(contentEl).toBeInTheDocument();
 		expect(contentEl.parentElement).toHaveClass('callout-content');
 	});