fix: inline content syntax

.github/workflows/ci.yml

@@ -85,3 +85,7 @@ jobs:
 
       - name: Test
         run: nr test
+
+      - name: Publish
+        if: runner.os == 'Linux'
+        run: pnpx pkg-pr-new publish --compact --no-template --pnpm

src/syntax/block.ts

@@ -47,10 +47,8 @@ export const MarkdownItMdcBlock: MarkdownIt.PluginSimple = (md) => {
 
           // Create inline container for the content
           const inline = state.push('inline', '', 0)
-          inline.content = ''
-          const text = new state.Token('text', '', 0)
-          text.content = content
-          inline.children = [text]
+          inline.content = content
+          inline.children = []
 
           const tokenClose = state.push('mdc_block_shorthand', name, -1)
           tokenClose.map = [startLine, startLine + 1]
@@ -235,6 +233,16 @@ export const MarkdownItMdcBlock: MarkdownIt.PluginSimple = (md) => {
         })
       }
 
+      // Add bracket content as first paragraph `::bloc[Content]\n::`
+      if (params.content !== undefined) {
+        const pOpen = state.push('paragraph_open', 'p', 1)
+        pOpen.map = [startLine, startLine + 1]
+        const inline = state.push('inline', '', 0)
+        inline.content = params.content
+        inline.children = []
+        state.push('paragraph_close', 'p', -1)
+      }
+
       // Parse content
       const blkIndent = state.blkIndent
       state.blkIndent = indent

src/syntax/inline-component.ts

@@ -23,7 +23,8 @@ export const MarkdownItInlineComponent: MarkdownIt.PluginWithOptions<MdcInlineCo
 
     let index = start + 1
     let nameEnd = -1
-    let content: string | undefined
+    let contentStart = -1
+    let contentEnd = -1
 
     // Parse component name
     while (index < state.src.length) {
@@ -32,7 +33,8 @@ export const MarkdownItInlineComponent: MarkdownIt.PluginWithOptions<MdcInlineCo
         nameEnd = index
         const result = parseBracketContent(state.src, index)
         if (result) {
-          content = result.content
+          contentStart = index + 1
+          contentEnd = result.endIndex - 1
           index = result.endIndex
         }
         break
@@ -57,10 +59,18 @@ export const MarkdownItInlineComponent: MarkdownIt.PluginWithOptions<MdcInlineCo
 
     const name = state.src.slice(start + 1, nameEnd)
 
-    if (content !== undefined) {
+    if (contentStart !== -1) {
       state.push('mdc_inline_component', name, 1)
-      const text = state.push('text', '', 0)
-      text.content = content
+
+      // Parse the content between brackets as inline markdown
+      const oldPos = state.pos
+      const oldPosMax = state.posMax
+      state.pos = contentStart
+      state.posMax = contentEnd
+      state.md.inline.tokenize(state)
+      state.pos = oldPos
+      state.posMax = oldPosMax
+
       state.push('mdc_inline_component', name, -1)
     }
     else {

test/fixtures.test.ts

@@ -37,7 +37,7 @@ describe('fixtures', () => {
           parser: 'html',
         })
 
-        await expect(formatted.trim())
+        await expect(formatted)
           .toMatchFileSnapshot(path.replace('input', 'output').replace('.md', '.html'))
       })
     })

test/input/17.markdonw-directive.md

@@ -0,0 +1,17 @@
+:spoiler[it's a _happy_ ending]
+
+:ref[see **figure 1**]{target=myFigure}
+
+Hello :spoiler[it's a _happy_ ending]
+
+::: note
+The label contains inline content but the body has block content.
+:::
+
+::: note{type="info"}
+The label contains inline content but the body has block content.
+:::
+
+::: note[**Important** Notice]{type="info"}
+The label contains inline content but the body has block content.
+:::

test/output/1.basic.html

@@ -48,4 +48,4 @@ <h1>Hello</h1>
   .mdc-button {
     background-color: #ff0000;
   }
-</style>
+</style>

test/output/10.blocks-yaml.html

@@ -10,4 +10,4 @@ <h1>Hello World</h1>
   <template #slot="">
     <p>Hello <strong>World</strong></p>
   </template>
-</icon-card>
+</icon-card>

test/output/11.blocks-list.html

@@ -3,4 +3,4 @@
     <li>Hello</li>
     <li>World</li>
   </ul>
-</custom-list>
+</custom-list>

test/output/12.frontmatter.html

@@ -1 +1 @@
-<!-- Content of the page -->
+<!-- Content of the page -->

test/output/13.vue-template.html

@@ -1,4 +1,4 @@
 <h1>Foo {{ 1 + 1 }}</h1>
 <p>Hello {{ world }}</p>
 <p>${foo} {{ bar }} {{ <code>b ${a}</code> }}</p>
-<p><code>{foo}</code></p>
+<p><code>{foo}</code></p>

test/output/14.list-handling.html

@@ -19,4 +19,4 @@
 </ul>
 <blockquote>
   <p class="foo">Foo</p>
-</blockquote>
+</blockquote>

test/output/15.blocks-codeblock.html

@@ -6,4 +6,4 @@ <h1>Title</h1>
 
 This is a paragraph
 </code></pre>
-</code-group>
+</code-group>

test/output/16.blocks-headings-in-slots.html

@@ -3,4 +3,4 @@ <h3>Step 1</h3>
   <p>Content for step 1.</p>
   <h3>Step2</h3>
   <p>More content.</p>
-</step>
+</step>

test/output/17.markdonw-directive.html

@@ -0,0 +1,13 @@
+<spoiler>it's a <em>happy</em> ending</spoiler>
+<ref target="myFigure">see <strong>figure 1</strong></ref>
+<p>
+  Hello <spoiler>it's a <em>happy</em> ending</spoiler>
+</p>
+<note>The label contains inline content but the body has block content.</note>
+<note type="info"
+  >The label contains inline content but the body has block content.</note
+>
+<note type="info">
+  <p><strong>Important</strong> Notice</p>
+  <p>The label contains inline content but the body has block content.</p>
+</note>

test/output/2.blocks.html

@@ -14,4 +14,4 @@ <h1>Hello</h1>
     <five>Content</five>
   </two>
 </one>
-<my-component>content</my-component>
+<my-component>content</my-component>

test/output/3.blocks-slots.html

@@ -4,4 +4,4 @@ <h1>Title</h1>
   <template #description="">
     <p>This will be rendered inside the <code>description</code> slot.</p>
   </template>
-</hero>
+</hero>

test/output/4.blocks-nesting.html

@@ -8,4 +8,4 @@
 <pre><code>::hero
 Indent 4 spaces, should be treated as code block
 ::
-</code></pre>
+</code></pre>

test/output/5.blocks-props.html

@@ -1,2 +1,2 @@
 <h1>Hello</h1>
-<card title="Card title" class="red">The content of the card</card>
+<card title="Card title" class="red">The content of the card</card>

test/output/6.inline-props.html

@@ -10,4 +10,4 @@ <h1 class="text-red">Hello</h1>
 </p>
 <p><code style="color: red">code</code></p>
 <p><em style="color: blue">italic</em></p>
-<p><strong style="color: blue">bold</strong>!</p>
+<p><strong style="color: blue">bold</strong>!</p>

test/output/7.inline-components.html

@@ -23,4 +23,4 @@ <h1><another-component>Content</another-component></h1>
 </p>
 <p><shorthand /> inline component</p>
 <p><short-hand class="color" /> inline component</p>
-<p><short-hand class="color">content</short-hand> inline component</p>
+<p><short-hand class="color">content</short-hand> inline component</p>

test/output/8.inline-span.html

@@ -1,4 +1,4 @@
 <p>Hello <span>World</span></p>
 <p>Hello <span class="bg-blue-500">World</span>!</p>
 <p>Hello <span>World] Yes</span>!</p>
-<p>Hello <span style="">World</span>!</p>
+<p>Hello <span style="">World</span>!</p>

test/output/9.blocks-slots.html

@@ -13,4 +13,4 @@ <h1>Title</h1>
   <template #bar="">
     <baz>Baz <inline-component /></baz>
   </template>
-</foo>
+</foo>