🐛 Allow custom components for headings

Author: CollierCZ

src/headings.ts

@@ -58,20 +58,36 @@ export function collectHeadings(
   }
 
   // Handle single node
-  if (typeof node === "object" && node !== null && "name" in node) {
-    const tag = node as Tag;
-    if (tag.name.match(/^h\d$/)) {
+  if (typeof node === "object" && node !== null) {
+    // Handle headings passed as custom components
+    if (
+      node.attributes?.__collectHeading === true &&
+      typeof node.attributes?.level === "number"
+    ) {
       sections.push({
-        level: parseInt(tag.name[1]),
-        title: getTextContent(tag.children),
-        id: getSlug(tag.attributes, tag.children),
+        level: node.attributes?.level,
+        title: getTextContent(node.children),
+        id: getSlug(node.attributes, node.children),
       });
     }
 
-    // Handle node children
-    if (tag.children) {
-      for (const child of tag.children) {
-        collectHeadings(child, sections);
+    if ("name" in node) {
+      const tag = node as Tag;
+
+      // Handle basic headings
+      if (tag.name.match(/^h\d$/)) {
+        sections.push({
+          level: parseInt(tag.name[1]),
+          title: getTextContent(tag.children),
+          id: getSlug(tag.attributes, tag.children),
+        });
+      }
+
+      // Handle node children
+      if (tag.children) {
+        for (const child of tag.children) {
+          collectHeadings(child, sections);
+        }
       }
     }
   }
@@ -94,6 +110,8 @@ export const heading: Schema = {
     const render = config.nodes?.heading?.render ?? `h${level}`;
 
     /**
+     * TODO: THis doesn't work because render is a string even for custom components
+     * 
      * When the tag has a component as its render option,
      * add an attribute to collect it as a header
      * and also the level as a prop, not an HTML attribute.

test/__snapshots__/heading.test.ts.snap

@@ -5,7 +5,7 @@ exports[`Headings > adds IDs and exports headings even when a custom heading is
 	export const slug = "test";
 	export const headings = [{"level":1,"title":"This is some basic Markdoc","id":"this-is-some-basic-markdoc"},{"level":1,"title":"More fancy stuff","id":"more-fancy-stuff"}];
 </script>
-<article><h1 class="custom-heading" id="this-is-some-basic-markdoc">This is some basic Markdoc</h1><p>With a paragraph.</p><p>Some text <strong>in bold</strong> and <em>in italic</em>.</p><p>And a <a href="https://example.com">link</a>.</p><h1 class="custom-heading" id="more-fancy-stuff">More fancy stuff</h1><p>Some <code>&lt;p&gt;</code> inline code.</p><p>And a code block:</p><pre data-language="javascript"><code>&lcub;&lcub;% test %&rcub;&rcub;</code></pre><p>And even a table with a nested list:</p><table><thead><tr><th>Table header 1</th><th>Table header 2</th></tr></thead><tbody><tr><td><ul><li>Row 1 Cell 1 Item 1</li><li>Row 1 Cell 1 Item 2</li></ul></td><td>Row 1 Cell 2</td></tr><tr><td>Row 2 Cell 1</td><td>Row 2 cell 2</td></tr></tbody></table></article>"
+<article><h1 class="custom-heading" id="this-is-some-basic-markdoc">This is some basic Markdoc</h1><p>With a paragraph.</p><h1 class="custom-heading" id="more-fancy-stuff">More fancy stuff</h1><p>Content. Such great content.</p></article>"
 `;
 
 exports[`Headings > adds IDs and exports headings even when the custom heading is a custom component 1`] = `
@@ -15,5 +15,5 @@ exports[`Headings > adds IDs and exports headings even when the custom heading i
 <script>
 	import HeadingComponent from '$lib/components/HeadingComponent.svelte';
 </script>
-<article><HeadingComponent id="this-is-some-basic-markdoc">This is some basic Markdoc</HeadingComponent><p>With a paragraph.</p><p>Some text <strong>in bold</strong> and <em>in italic</em>.</p><p>And a <a href="https://example.com">link</a>.</p><HeadingComponent id="more-fancy-stuff">More fancy stuff</HeadingComponent><p>Some <code>&lt;p&gt;</code> inline code.</p><p>And a code block:</p><pre data-language="javascript"><code>&lcub;&lcub;% test %&rcub;&rcub;</code></pre><p>And even a table with a nested list:</p><table><thead><tr><th>Table header 1</th><th>Table header 2</th></tr></thead><tbody><tr><td><ul><li>Row 1 Cell 1 Item 1</li><li>Row 1 Cell 1 Item 2</li></ul></td><td>Row 1 Cell 2</td></tr><tr><td>Row 2 Cell 1</td><td>Row 2 cell 2</td></tr></tbody></table></article>"
+<article><HeadingComponent id="this-is-some-basic-markdoc">This is some basic Markdoc</HeadingComponent><p>With a paragraph.</p><HeadingComponent id="more-fancy-stuff">More fancy stuff</HeadingComponent><p>Content. Such great content.</p></article>"
 `;

test/constants.ts

@@ -188,6 +188,16 @@ keywords:
 Content. Such great content.
 `;
 
+export const markdocWithHeadings = `
+# This is some basic Markdoc
+
+With a paragraph.
+
+## More fancy stuff
+
+Content. Such great content.
+`;
+
 export const markdocWithTypography = `${basicMarkdoc}
 ## Typographic replacements
 

test/heading.test.ts

@@ -4,7 +4,7 @@ import { describe, it, expect } from "vitest";
 import type { Options } from "../src/types.ts";
 import type { Processed } from "svelte/compiler";
 
-import { basicMarkdoc } from "./constants.ts";
+import { markdocWithHeadings } from "./constants.ts";
 import basicHeadingNode from "./markdoc/heading-tests/basicHeading.ts";
 import customComponentNode from "./markdoc/heading-tests/customComponentHeading.ts";
 
@@ -14,7 +14,7 @@ describe("Headings", () => {
       headingIds: true,
       nodes: { heading: basicHeadingNode.heading },
     } as Options).markup!({
-      content: basicMarkdoc,
+      content: markdocWithHeadings,
       filename: "test.md",
     })) as Processed;
 
@@ -26,7 +26,7 @@ describe("Headings", () => {
       headingIds: true,
       nodes: { heading: customComponentNode.heading },
     } as Options).markup!({
-      content: basicMarkdoc,
+      content: markdocWithHeadings,
       filename: "test.md",
     })) as Processed;