fix: better inline detection for buttons

Author: farnabaz

src/runtime/stringify/mdc-remark.ts

@@ -152,8 +152,7 @@ const mdcRemarkNodeHandlers = {
       return result
     }
 
-    const isInlineElement = (parent?.children || [])
-      .some(child => child.type === 'text') || ['p', 'li', 'strong', 'em', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(parent?.tagName)
+    const isInlineElement = isForcedToBeInlineByItsParent(node, parent)
     if (isInlineElement) {
       return {
         type: mdastTextComponentType,
@@ -287,20 +286,17 @@ const mdcRemarkHandlers: Record<string, (state: State, node: Parents, parent: Pa
       meta,
     }
   },
-  'button': (state: State, node: Parents) => {
-    if (
-      // @ts-expect-error: custom type
-      node.children?.find(child => child.type === mdcRemarkElementType)
-      || node.children?.find(child => child.type === 'text' && child.value.includes('\n'))
-    ) {
-      return {
-        type: 'containerComponent',
-        name: 'button',
-        children: state.all(node),
-        attributes: node.properties,
-      }
+  'button': (state: State, node: Parents, parent: Parents | undefined) => {
+    if (isInlineNode(node, parent)) {
+      return createTextComponent('button')(state, node)
+    }
+
+    return {
+      type: 'containerComponent',
+      name: 'button',
+      children: state.all(node),
+      attributes: node.properties,
     }
-    return createTextComponent('button')(state, node)
   },
   'span': createTextComponent('span'),
   'kbd': createTextComponent('kbd'),
@@ -390,3 +386,31 @@ function createTextComponent(name: string) {
     return result
   }
 }
+
+function isForcedToBeInlineByItsParent(node: Parents, parent: Parents | undefined) {
+  if (['p', 'li', 'strong', 'em', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(parent?.tagName || '')) {
+    return true
+  }
+
+  if (parent?.children?.some(child => child.type === 'text')) {
+    return true
+  }
+
+  return false
+}
+
+function isInlineNode(node: Parents, parent: Parents | undefined) {
+  if (
+    // @ts-expect-error: custom type
+    node.children?.find(child => child.type === mdcRemarkElementType)
+    || node.children?.find(child => child.type === 'text' && child.value.includes('\n'))
+  ) {
+    return false
+  }
+
+  if (!isForcedToBeInlineByItsParent(node, parent)) {
+    return false
+  }
+
+  return true
+}

test/stringify/format.test.ts

@@ -86,4 +86,43 @@ describe('stringify format', () => {
     const result = await stringifyMarkdown(body)
     expect(result).toBe(md)
   })
+
+  it('should stringify format correctly with yaml props and nested objects', async () => {
+    const md = [
+      '::page-section',
+      '  :::page-section',
+      '  #tagline',
+      '  {{ $doc.snippet.tagline }}',
+      '',
+      '  #title',
+      '  {{ $doc.snippet.title }}',
+      '',
+      '  #description',
+      '  {{ $doc.snippet.description }}',
+      '',
+      '    ::::button{:to="$doc.snippet.link" appearance="primary"}',
+      '    Button Text',
+      '    ::::',
+      '',
+      '    ::::button{:to="$doc.snippet.link" appearance="primary"}',
+      '    Button Text',
+      '    ::::',
+      '',
+      '    ::::button',
+      '    ---',
+      '    :data-testid: $doc.snippet.description',
+      '    external: true',
+      '    :to: $doc.snippet.link',
+      '    appearance: primary',
+      '    ---',
+      '    Button Text',
+      '    ::::',
+      '  :::',
+      '::',
+      '',
+    ].join('\n')
+    const { body } = await parseMarkdown(md)
+    const result = await stringifyMarkdown(body)
+    expect(result).toBe(md)
+  })
 })