feat(spx-gui): fix regex issue in preprocessInlineComponents used in MarkdownView

Author: Overu

spx-gui/src/components/common/markdown-vue/MarkdownView.test.ts

@@ -137,14 +137,26 @@ describe('preprocessInlineComponents', () => {
     const value = '<x-comp />  \nHello'
     const tagNames = ['x-comp']
     const result = preprocessInlineComponents(value, tagNames)
-    expect(result).toBe('<x-comp />\n\nHello')
+    expect(result).toBe('<x-comp />  \n\nHello')
   })
   it('should not change when not self-closing', () => {
     const value = '<x-comp></x-comp>\nHello'
     const tagNames = ['x-comp']
     const result = preprocessInlineComponents(value, tagNames)
     expect(result).toBe('<x-comp></x-comp>\nHello')
   })
+  it('should separate even when a self-closing tag is preceded by text', () => {
+    const value = 'before<x-comp />\nHello'
+    const tagNames = ['x-comp']
+    const result = preprocessInlineComponents(value, tagNames)
+    expect(result).toBe('before<x-comp />\n\nHello')
+  })
+  it('should insert a blank line before an inline component when preceded by text', () => {
+    const value = '<x-comp />\n<x-comp />\nHello\n<x-comp />'
+    const tagNames = ['x-comp']
+    const result = preprocessInlineComponents(value, tagNames)
+    expect(result).toBe('<x-comp />\n\n<x-comp />\n\nHello\n<x-comp />')
+  })
 })
 
 describe('preprocessIncompleteTags', () => {

spx-gui/src/components/common/markdown-vue/MarkdownView.ts

@@ -129,6 +129,12 @@ export function preprocessCustomRawComponents(value: string, tagNames: string[])
   return value
 }
 
+const tagNamePattern = /<([a-zA-Z0-9-]+)(\s[^>]*)?\/>$/
+function getTagName(line: string): string | null {
+  const m = line.match(tagNamePattern)
+  return m != null ? m[1] : null
+}
+
 /**
  * Preprocesses text immediately following custom self-closing elements and line breaks within a Markdown string.
  * According to the Markdown specification, this behavior—the custom self-closing element,
@@ -152,12 +158,35 @@ export function preprocessCustomRawComponents(value: string, tagNames: string[])
  * Refer to: https://github.com/goplus/builder/issues/2472
  */
 export function preprocessInlineComponents(value: string, tagNames: string[]) {
-  tagNames.forEach((tagName) => {
-    // This scenario only occurs with self-closing tags, so this processing currently only targets
-    // self-closing tags of custom elements.
-    value = value.replace(new RegExp(`(<${tagName}[^>]*/>)[ \t]*\r?\n([^\n]*\\S[^\n]*)`, 'g'), '$1\n\n$2')
-  })
-  return value
+  const tagSet = new Set(tagNames)
+  const lines = value.split(/\r?\n/)
+  const out: string[] = []
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const trimmed = line.trimEnd()
+
+    // Check if the line ends with a self-closing tag
+    if (trimmed.endsWith('/>')) {
+      const tag = getTagName(trimmed)
+      if (
+        // Tag name must be in the provided list
+        tag != null &&
+        tagSet.has(tag) &&
+        // There must be a following line
+        i + 1 < lines.length &&
+        // The next line must NOT be a blank line
+        lines[i + 1].trim() !== ''
+      ) {
+        out.push(line)
+        out.push('')
+        continue
+      }
+    }
+    out.push(line)
+  }
+
+  return out.join('\n')
 }
 
 const tagHeaderPattern = /<([a-zA-Z0-9-]+)(\s|<)/