From fafa3f21252f6d7cd0020d846d33f585df74d39a Mon Sep 17 00:00:00 2001
From: Emile Bangma <ewjbangma@hotmail.com>
Date: Tue, 11 Jun 2024 14:38:26 +0000
Subject: [PATCH] Use BlockContent | FootnoteContent for callout body

---
 quartz/plugins/transformers/ofm.ts | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 7cd6d8bea..e15db3920 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -425,6 +425,8 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
               const [firstLine, ...remainingLines] = text.split("\n")
               const remainingText = remainingLines.join("\n")
 
+              const calloutContent = node.children.length > 1 ? node.children[1] : undefined
+
               const match = firstLine.match(calloutRegex)
               if (match && match.input) {
                 const [calloutDirective, typeString, calloutMetaData, collapseChar] = match
@@ -494,19 +496,14 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 }
 
                 // Add callout-content class to callout body if it has one.
-                if (node.children.length > 1) {
-                  const contentData = node.children[1]
-                  node.children[1] = {
-                    data: {
-                      hProperties: {
-                        ...(contentData.data?.hProperties ?? {}),
-                        className: "callout-content",
-                      },
-                      hName: "div",
-                    },
-                    type: "blockquote",
-                    children: [contentData],
+                if (calloutContent !== undefined) {
+                  const calloutContentWrapped: BlockContent | DefinitionContent = {
+                    type: "html",
+                    value: `<div class="callout-content">
+                      ${toHtml(toHast(calloutContent, { allowDangerousHtml: true }), { allowDangerousHtml: true })}
+                    </div>`,
                   }
+                  node.children.splice(1, 1, ...[calloutContentWrapped])
                 }
               }
             })