fix: handle h1 to h6 a special case when discovering components

Author: Xstoudi

package.json

@@ -52,6 +52,7 @@
     "typescript": "^6.0.2"
   },
   "dependencies": {
+    "@poppinss/string": "^1.7.1",
     "@shikijs/rehype": "^4.0.2",
     "@shikijs/transformers": "^4.0.2",
     "escape-goat": "^4.0.0",

src/utils.ts

@@ -9,6 +9,7 @@
 
 import { type VFile } from 'vfile'
 import { type Edge } from 'edge.js'
+import string from '@poppinss/string'
 import { htmlEscape } from 'escape-goat'
 import { find, html } from 'property-information'
 import { type VoidHtmlTags, voidHtmlTags } from 'html-tags'
@@ -111,8 +112,10 @@ export function discoverMarkdownComponents(edge: Edge, prefix: string) {
     /**
      * Collect components with the tagName.
      */
-    const tagName = componentName.replace(new RegExp(componentsBasePath), '').replace(/_/g, '-')
-    result[tagName] = componentName
+    const tagName = componentName.replace(new RegExp(componentsBasePath), '')
+    const lowerTagName = tagName.toLowerCase()
+    const isHeadingTag = /^h[1-6]$/.test(lowerTagName)
+    result[isHeadingTag ? lowerTagName : string.dashCase(tagName)] = componentName
     return result
   }, {})
 }

tests/fixtures/views/components/markdown/H5.edge

@@ -0,0 +1,4 @@
+<h2 class="custom-h5" id="{{ node.properties.id }}">
+  @markdownSlot()
+</h2>
+

tests/markdown.spec.ts

@@ -366,6 +366,22 @@ Here is a paragraph with a [link](./foo)\`
     assert.notMatch(result.content, /<h6(?! class="custom-h6")/)
   })
 
+  test('use h5 component saved as H5.edge to override h5 rendering', async ({ assert }) => {
+    const edge = new Edge()
+    edge.mount(join(import.meta.dirname, 'fixtures/views'))
+    edge.use(edgeMarkdown, {})
+
+    const renderer = edge.share({})
+    const result = await renderer.getState().$markdown.render({
+      content: dedent`
+        ##### Section title
+        `,
+    })
+
+    assert.include(result.content, 'class="custom-h5"')
+    assert.notMatch(result.content, /<h5(?! class="custom-h5")/)
+  })
+
   test('preview returns full content when there is no h2', async ({ assert }) => {
     const edge = new Edge()
     edge.mount(join(import.meta.dirname, 'fixtures/views'))