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

[Overu]

Closed #2472

[gemini-code-assist]

Summary of Changes

Hello @Overu, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a specific rendering anomaly within the MarkdownView component where custom self-closing tags, when immediately followed by a line break and text, would lead to an incorrect merging of content. By introducing a new preprocessing step, preprocessInlineComponents, the system now correctly interprets and separates such content into distinct paragraphs, significantly improving the accuracy and predictability of Markdown rendering for custom components.

Highlights

• Markdown Preprocessing Logic: Introduced a new preprocessInlineComponents function to specifically handle and correct the rendering of custom self-closing tags followed by line breaks and text in Markdown. This ensures proper paragraph separation instead of unintended merging into a single HTML block.
• Enhanced Markdown Rendering: Fixed an issue where custom self-closing tags, when followed by a newline and text, would incorrectly merge the subsequent text into the same HTML block. The new logic ensures that such text is treated as a distinct paragraph.
• Comprehensive Test Coverage: Added a dedicated test suite for preprocessInlineComponents covering various scenarios, along with new integration tests for MarkdownView to validate the correct rendering behavior of custom self-closing tags.
• Minor Text Update: A small textual correction was made in a tutorial constraint message.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

The pull request introduces a new preprocessing step to correctly handle line breaks after custom self-closing tags in Markdown, which addresses the issue of merging line breaks. The new preprocessInlineComponents function and its integration into parseMarkdown are well-tested. A minor typo was found in a constraint description.

[xgopilot]

Critical: ReDoS Vulnerability & Performance Issue

This line has two critical issues:

1. ReDoS (Regular Expression Denial of Service): The pattern ([^\n]*\\S[^\n]*) can cause catastrophic backtracking on inputs with long sequences of whitespace.

2. Performance: Creating new RegExp() inside the forEach loop means the regex is recompiled for every tag name on every parse. During streaming updates, this causes significant overhead.

Recommended fix:

export function preprocessInlineComponents(value: string, tagNames: string[]): string {
  if (!value || tagNames.length === 0) return value
  
  // Precompile patterns once with bounded quantifiers to prevent ReDoS
  const patterns = tagNames.map(tagName => {
    const escaped = tagName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    return new RegExp(`(<${escaped}[^>]{0,500}/>)[ \\t]{0,100}\\r?\\n([^\\n]{0,1000}\\S[^\\n]{0,1000})`, 'g')
  })
  
  return patterns.reduce((acc, pattern) => acc.replace(pattern, '$1\n\n$2'), value)
}

This also adds regex escaping for tag names and input validation.

[Overu]

涉及到跨多行的处理，用正则不太合适，改为代码解析。

[xgopilot]

Code Review Summary

This PR successfully addresses issue #2472 with good test coverage and clear documentation. However, there are critical security and performance issues that must be addressed before merging.

Critical Issues:

• ReDoS vulnerability in regex pattern (line 158) - can freeze browser with malicious input
• Performance: Regex recompiled in loop during streaming causes significant overhead
• Typo: "frist" → "first" still present in tutorial-course-abandon.ts:14

Important Issues:

• Missing regex escaping for tag names (potential injection)
• Documentation example inconsistency (component name changes)
• Test descriptions say "merge" but function "separates"

The implementation is solid with excellent test coverage, but the regex pattern needs immediate attention for both security and performance. See inline comments for detailed recommendations.

[qiniu-ci]

This PR has been deployed to the preview environment. You can explore it using the preview URL.

Warning

Please note that deployments in the preview environment are temporary and will be automatically cleaned up after a certain period. Make sure to explore it before it is removed. For any questions, contact the XBuilder team.

[nighca]

这里注释好像要更新一下，现在的行为已经不是只针对“self-closing element followed by a line break”的问题了；而是支持 custom component 的 self-closing 写法会顺便解决这个问题？

[Overu]

done, bb85613#diff-d9cc187b3500f56dc0c8a08418a4faeb533f4db636e3e9b7732039de78dd2d1d