fix: allow to override h1 to h6 through discovered components

fix: allow to override h1 to h6 through discovered components

Author: thetutlage

src/utils.ts

@@ -113,7 +113,9 @@ export function discoverMarkdownComponents(edge: Edge, prefix: string) {
      * Collect components with the tagName.
      */
     const tagName = componentName.replace(new RegExp(componentsBasePath), '')
-    result[string.dashCase(tagName)] = componentName
+    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/fixtures/views/components/markdown/h6.edge

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

tests/markdown.spec.ts

@@ -350,6 +350,38 @@ Here is a paragraph with a [link](./foo)\`
     assert.notInclude(result.content, 'Section content')
   })
 
+  test('use h6 component to override h6 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-h6"')
+    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'))