feat(spx-gui): fixed the issue of merging line breaks after using a custom self-closing tag

Author: Overu

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

@@ -2,7 +2,11 @@ import { defineComponent, h, markRaw } from 'vue'
 import { describe, expect, it } from 'vitest'
 import { renderToString } from '@vue/test-utils'
 import { useSlotText } from '@/utils/vnode'
-import MarkdowView, { preprocessCustomRawComponents, preprocessIncompleteTags } from './MarkdownView'
+import MarkdowView, {
+  preprocessCustomRawComponents,
+  preprocessIncompleteTags,
+  preprocessInlineComponents
+} from './MarkdownView'
 
 describe('preprocessCustomRawComponents', () => {
   it('should convert custom raw components to <pre> tags', () => {
@@ -98,6 +102,51 @@ describe('preprocessCustomRawComponents', () => {
   })
 })
 
+describe('preprocessInlineComponents', () => {
+  it('should separate self-closing tag from next line text with blank line', () => {
+    const value = '<x-comp />\nHello world'
+    const tagNames = ['x-comp']
+    const result = preprocessInlineComponents(value, tagNames)
+    expect(result).toBe('<x-comp />\n\nHello world')
+  })
+  it('should separate self-closing tag from next line text with blank line with attributes', () => {
+    const value = '<x-comp some="foo" />\nHello world'
+    const tagNames = ['x-comp']
+    const result = preprocessInlineComponents(value, tagNames)
+    expect(result).toBe('<x-comp some="foo" />\n\nHello world')
+  })
+  it('should preserve leading spaces of next line', () => {
+    const value = '<x-comp />\n   Hello'
+    const tagNames = ['x-comp']
+    const result = preprocessInlineComponents(value, tagNames)
+    expect(result).toBe('<x-comp />\n\n   Hello')
+  })
+  it('should ignore when there is a blank line', () => {
+    const value = '<x-comp />\n\nHello'
+    const tagNames = ['x-comp']
+    const result = preprocessInlineComponents(value, tagNames)
+    expect(result).toBe('<x-comp />\n\nHello')
+  })
+  it('should not change when inline already', () => {
+    const value = '<x-comp />Hello\nWorld'
+    const tagNames = ['x-comp']
+    const result = preprocessInlineComponents(value, tagNames)
+    expect(result).toBe('<x-comp />Hello\nWorld')
+  })
+  it('should match spaces before newline', () => {
+    const value = '<x-comp />  \nHello'
+    const tagNames = ['x-comp']
+    const result = preprocessInlineComponents(value, tagNames)
+    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')
+  })
+})
+
 describe('preprocessIncompleteTags', () => {
   it('should remove the last incomplete tag', () => {
     const value = 'Before<custom-incomplete-component>Content'
@@ -255,4 +304,38 @@ After`,
 <!--]--></div>
 <p><div class="test-comp-1"></div>aaa<div class="test-comp-2">bbb</div><div class="test-comp-2">ccc</div>ddd</p><div class="test-comp-3"><!--[--><p></p><!--]--></div></div>`)
   })
+  it('should handle a custom self-closing tag with text on the next line', async () => {
+    const testComp1 = {
+      template: '<div class="test-comp-1">hello world</div>'
+    }
+    const result = await renderToString(MarkdowView, {
+      props: {
+        value: `Before<test-comp-1 />
+After`,
+        components: markRaw({
+          custom: {
+            'test-comp-1': testComp1
+          }
+        })
+      }
+    })
+    expect(result).toBe('<div><p>Before<div class="test-comp-1">hello world</div></p>\n<p>After</p></div>')
+  })
+  it('should handle a custom self-closing tag when text follows immediately on the next line', async () => {
+    const testComp1 = {
+      template: '<div class="test-comp-1">hello world</div>'
+    }
+    const result = await renderToString(MarkdowView, {
+      props: {
+        value: `Before<test-comp-1 />middle
+After`,
+        components: markRaw({
+          custom: {
+            'test-comp-1': testComp1
+          }
+        })
+      }
+    })
+    expect(result).toBe('<div><p>Before<div class="test-comp-1">hello world</div>middle\nAfter</p></div>')
+  })
 })

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

@@ -129,6 +129,37 @@ export function preprocessCustomRawComponents(value: string, tagNames: string[])
   return value
 }
 
+/**
+ * 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,
+ * the line break, and the subsequent text being merged into a single html_block—is standard,
+ * but it is not the result we desire.
+ *
+ * We have addressed this situation while adhering to the Markdown specification.
+ * The text following the custom self-closing element and the line break is separated into two distinct paragraphs.
+ *
+ * For example:
+ * ```markdown
+ * <custom-component/>
+ * Content1
+ * ```
+ * will be preprocessed into:
+ * ```markdown
+ * <custom-component/>
+ *
+ * Content1
+ * ```
+ * 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 tagHeaderPattern = /<([a-zA-Z0-9-]+)(\s|<)/
 
 function processSelfClosingForHastRawNode(node: Raw, tagNames: string[]) {
@@ -200,6 +231,7 @@ export function preprocessIncompleteTags(value: string, tagNames: string[]) {
 function parseMarkdown({ value, components }: Props): hast.Nodes {
   const customComponents = { ...components?.custom, ...components?.customRaw }
   const customTagNames = Object.keys(customComponents)
+  value = preprocessInlineComponents(value, customTagNames)
   value = preprocessCustomRawComponents(value, Object.keys(components?.customRaw ?? {}))
   value = preprocessIncompleteTags(value, customTagNames)
   const mdast = fromMarkdown(value)

spx-gui/src/components/tutorials/tutorial-course-abandon.ts

@@ -11,7 +11,7 @@ const maxAbandonPredictionCount = 3
 
 const constraints = `
 **Constraints**:
-- MUST be placed at the **last line** of your message.
+- MUST be placed at the **first line** of your message.
 - Use at most ONCE per message.`
 
 const predictionTagName = 'tutorial-course-abandon-prediction'