refactor(spx-gui): convert self-closing components into explicit tags for simplified handling

Author: Overu

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

@@ -5,7 +5,7 @@ import { useSlotText } from '@/utils/vnode'
 import MarkdowView, {
   preprocessCustomRawComponents,
   preprocessIncompleteTags,
-  preprocessInlineComponents
+  preprocessSelfClosingComponents
 } from './MarkdownView'
 
 describe('preprocessCustomRawComponents', () => {
@@ -102,60 +102,61 @@ 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')
-  })
-  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('preprocessSelfClosingComponents', () => {
+  it('should convert self-closing tags to opening and closing tags', () => {
+    const value = '<custom-component />'
+    const tagNames = ['custom-component']
+    const result = preprocessSelfClosingComponents(value, tagNames)
+    expect(result).toBe('<custom-component></custom-component>')
+  })
+
+  it('should handle attributes', () => {
+    const value = '<custom-component attr="value" />'
+    const tagNames = ['custom-component']
+    const result = preprocessSelfClosingComponents(value, tagNames)
+    expect(result).toBe('<custom-component attr="value"></custom-component>')
+  })
+
+  it('should handle multiple attributes', () => {
+    const value = '<custom-component attr1="value1" attr2="value2" />'
+    const tagNames = ['custom-component']
+    const result = preprocessSelfClosingComponents(value, tagNames)
+    expect(result).toBe('<custom-component attr1="value1" attr2="value2"></custom-component>')
+  })
+
+  it('should handle spaces before closing slash', () => {
+    const value = '<custom-component   />'
+    const tagNames = ['custom-component']
+    const result = preprocessSelfClosingComponents(value, tagNames)
+    expect(result).toBe('<custom-component></custom-component>')
+  })
+
+  it('should handle multiple occurrences', () => {
+    const value = '<custom-component /> <custom-component />'
+    const tagNames = ['custom-component']
+    const result = preprocessSelfClosingComponents(value, tagNames)
+    expect(result).toBe('<custom-component></custom-component> <custom-component></custom-component>')
+  })
+
+  it('should not affect other tags', () => {
+    const value = '<other-component />'
+    const tagNames = ['custom-component']
+    const result = preprocessSelfClosingComponents(value, tagNames)
+    expect(result).toBe('<other-component />')
+  })
+
+  it('should handle empty value', () => {
+    const value = ''
+    const tagNames = ['custom-component']
+    const result = preprocessSelfClosingComponents(value, tagNames)
+    expect(result).toBe('')
+  })
+
+  it('should handle no tag names', () => {
+    const value = '<custom-component />'
+    const tagNames: string[] = []
+    const result = preprocessSelfClosingComponents(value, tagNames)
+    expect(result).toBe('<custom-component />')
   })
 })
 
@@ -331,7 +332,7 @@ After`,
         })
       }
     })
-    expect(result).toBe('<div><p>Before<div class="test-comp-1">hello world</div></p>\n<p>After</p></div>')
+    expect(result).toBe('<div><p>Before<div class="test-comp-1">hello world</div>\nAfter</p></div>')
   })
   it('should handle a custom self-closing tag when text follows immediately on the next line', async () => {
     const testComp1 = {

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

@@ -2,7 +2,7 @@ import { computed, defineComponent, h, type VNode, type Component } from 'vue'
 import { fromMarkdown } from 'mdast-util-from-markdown'
 import { html, find } from 'property-information'
 import type * as hast from 'hast'
-import { toHast, type Raw } from 'mdast-util-to-hast'
+import { toHast } from 'mdast-util-to-hast'
 import { raw } from 'hast-util-raw'
 import { defaultSchema, sanitize, type Schema as SanitizeSchema } from 'hast-util-sanitize'
 
@@ -129,20 +129,11 @@ 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,
- * 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.
+ * Preprocesses custom self-closing elements in a Markdown string.
+ * According to the Markdown specification, a custom self-closing element followed by a line break
+ * and subsequent text will be merged into a single html_block, which is standard behavior
+ * but not the desired result.
  *
  * For example:
  * ```markdown
@@ -151,90 +142,16 @@ function getTagName(line: string): string | null {
  * ```
  * will be preprocessed into:
  * ```markdown
- * <custom-component/>
- *
+ * <custom-component></custom-component>
  * Content1
  * ```
  * Refer to: https://github.com/goplus/builder/issues/2472
  */
-export function preprocessInlineComponents(value: string, tagNames: string[]) {
-  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|<)/
-
-function processSelfClosingForHastRawNode(node: Raw, tagNames: string[]) {
-  const value = node.value.trim()
-  if (!value.endsWith('/>')) return node
-  const match = value.match(tagHeaderPattern)
-  if (match == null) return node
-  const tagName = match[1]
-  if (!tagNames.includes(tagName)) return node
-  return {
-    ...node,
-    value: value.slice(0, -2) + `></${tagName}>`
-  }
-}
-
-function processSelfClosingForHastNode(node: hast.Node, tagNames: string[]): hast.Node {
-  switch (node.type) {
-    case 'raw':
-      return processSelfClosingForHastRawNode(node as Raw, tagNames)
-    case 'text':
-      return node
-    case 'element': {
-      const element = node as hast.Element
-      const processedElement = {
-        ...element,
-        children: element.children.map((child) => processSelfClosingForHastNode(child, tagNames))
-      }
-      return processedElement
-    }
-    default:
-      return node
-  }
-}
-
-/**
- * Process self-closing tags in the hast nodes.
- * This makes sure self-closing is supported for all custom components.
- */
-function processSelfClosingForHastNodes(nodes: hast.Nodes, tagNames: string[]): hast.Nodes {
-  if (nodes.type === 'root') {
-    return {
-      ...nodes,
-      children: nodes.children.map((child) => processSelfClosingForHastNode(child, tagNames))
-    } as hast.Root
-  }
-  return processSelfClosingForHastNode(nodes, tagNames) as hast.RootContent
+export function preprocessSelfClosingComponents(value: string, tagNames: string[]) {
+  tagNames.forEach((tagName) => {
+    value = value.replace(new RegExp(`<${tagName}([^>]*?)\\s*/>`, 'g'), `<${tagName}$1></${tagName}>`)
+  })
+  return value
 }
 
 /**
@@ -260,13 +177,12 @@ 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 = preprocessSelfClosingComponents(value, customTagNames)
   value = preprocessIncompleteTags(value, customTagNames)
   const mdast = fromMarkdown(value)
   const hast = toHast(mdast, { allowDangerousHtml: true })
-  const hastWithSelfClosingProcessed = processSelfClosingForHastNodes(hast, customTagNames)
-  const rawProcessed = raw(hastWithSelfClosingProcessed, { tagfilter: false })
+  const rawProcessed = raw(hast, { tagfilter: false })
   const sanitizeSchema = getSanitizeSchema(customComponents)
   return sanitize(rawProcessed, sanitizeSchema)
 }