fix: don't render content as title in callouts with empty titled para…

…graph (#150)

* fix: don't render content in title with empty titled paragraph

* fix: markdown for test

* test: remove console.log

* chore: changeset

.changeset/tidy-rats-hide.md

@@ -0,0 +1,5 @@
+---
+"@r4ai/remark-callout": minor
+---
+
+Fixed an issue where the body was rendered as the title in callouts with a title consisting only of line breaks

packages/remark-callout/src/plugin.test.ts

@@ -376,6 +376,31 @@ describe("remarkCallout", () => {
     );
   });
 
+  test("callout with empty titled paragraph", async () => {
+    const md = [
+      "> [!IMPORTANT]  ",
+      "> Crucial information necessary for users to succeed.",
+    ].join("\n");
+
+    const { html } = await process(md);
+
+    const doc = parser.parseFromString(html, "text/html");
+
+    const callout = doc.querySelector("[data-callout]");
+    expect(callout).not.toBe(null);
+    expect(callout?.getAttribute("data-callout-type")).toBe("important");
+    expect(callout?.tagName.toLowerCase()).toBe("div");
+    expect(callout?.getAttribute("open")).toBe(null);
+
+    const calloutTitle = callout?.querySelector("[data-callout-title]");
+    expect(calloutTitle?.innerHTML.trim()).toBe("Important<br>");
+
+    const calloutBody = callout?.querySelector("[data-callout-body]");
+    expect(calloutBody?.children[0].textContent).toBe(
+      "Crucial information necessary for users to succeed.",
+    );
+  });
+
   test("foldable callout (-)", async () => {
     const md = dedent`
       > [!warn]- title here \`inline code\`

packages/remark-callout/src/plugin.ts

@@ -409,6 +409,15 @@ export const remarkCallout: Plugin<[Options?], mdast.Root> = (_options) => {
       }
       if (calloutBodyText.length <= 0) {
         for (const [i, child] of paragraphNode.children.slice(1).entries()) {
+          // Add all nodes after the break as callout body
+          if (child.type === "break") {
+            titleInnerNode.children.push(child); // Add the line break as callout title
+            bodyNode[0].children.push(
+              ...paragraphNode.children.slice(i + 1 + 1),
+            ); // +1 for the callout type node, +1 for the break
+            break;
+          }
+
           // All inline node before the line break is added as callout title
           if (child.type !== "text") {
             titleInnerNode.children.push(child);