feat: render delete syntax and generate correct header anchor for str…

…ong/em/del syntax (#1562)

.changeset/flat-spiders-complain.md

@@ -0,0 +1,6 @@
+---
+'@rspress/theme-default': minor
+'@rspress/core': minor
+---
+
+minor

e2e/fixtures/inline-markdown/doc/inline/_meta.json

@@ -1 +1 @@
-["index", "all", "str", "bold", "emphasis", "code", "escape"]
+["index", "all", "str", "bold", "emphasis", "code", "escape", "delete"]

e2e/fixtures/inline-markdown/doc/inline/all.mdx

@@ -13,3 +13,5 @@
 ## **bold**
 
 ## *emphasis*
+
+## ~~delete~~

e2e/fixtures/inline-markdown/doc/inline/delete.mdx

@@ -0,0 +1 @@
+# ~~delete~~

e2e/tests/inline-markdown.test.ts

@@ -28,7 +28,7 @@ test.describe('Inline markdown test', async () => {
     });
 
     const sidebar = await getSidebar(page);
-    expect(sidebar?.length).toBe(7);
+    expect(sidebar?.length).toBe(8);
 
     const sidebarTexts = await Promise.all(
       sidebar.map(element => element.textContent()),
@@ -42,6 +42,7 @@ test.describe('Inline markdown test', async () => {
         'emphasis',
         '<foo>',
         '-m <number>',
+        'delete',
       ].join(','),
     );
 
@@ -56,6 +57,7 @@ test.describe('Inline markdown test', async () => {
       '<span><em>emphasis</em></span>',
       '<span><code>&lt;foo&gt;</code></span>',
       '<span>-m &lt;number&gt;</span>',
+      '<span><del>delete</del></span>',
     ];
     for (const [index, html] of sidebarInnerHtml.entries()) {
       expect(html).toContain(expectedSidebarInnerHtml[index]);
@@ -79,6 +81,7 @@ test.describe('Inline markdown test', async () => {
         'emphasis',
         '<foo>',
         '-m <number>',
+        'delete',
       ].join(','),
     );
     const h2InnerHtml = await Promise.all(
@@ -92,6 +95,7 @@ test.describe('Inline markdown test', async () => {
         '<em>emphasis</em>',
         '<code>&lt;foo&gt;</code>',
         '-m &lt;number&gt;',
+        '<del>delete</del>',
       ].join(','),
     );
 
@@ -105,6 +109,7 @@ test.describe('Inline markdown test', async () => {
         'emphasis',
         '<foo>',
         '-m <number>',
+        'delete',
       ].join(','),
     );
     const h3InnerHtml = await Promise.all(
@@ -117,6 +122,7 @@ test.describe('Inline markdown test', async () => {
       '<em>emphasis</em></a>',
       '<code>&lt;foo&gt;</code></a>',
       '-m &lt;number&gt;</a>',
+      '<del>delete</del></a>',
     ];
     for (const [index, html] of h3InnerHtml.entries()) {
       expect(html).toContain(expectedH3InnerHtml[index]);
@@ -133,6 +139,7 @@ test.describe('Inline markdown test', async () => {
         'foo <bar> baz',
         'bold',
         'emphasis',
+        'delete',
       ].join(','),
     );
     const aInnerHtml = await Promise.all(a.map(element => element.innerHTML()));
@@ -144,6 +151,7 @@ test.describe('Inline markdown test', async () => {
       '<code>foo &lt;bar&gt; baz</code>',
       '<strong>bold</strong>',
       '<em>emphasis</em>',
+      '<del>delete</del>',
     ];
     for (const [index, html] of aInnerHtml.entries()) {
       expect(html).toContain(expectedAInnerHtml[index]);
@@ -168,6 +176,7 @@ test.describe('Inline markdown test', async () => {
         'foo <bar> baz',
         'bold',
         'emphasis',
+        'delete',
       ].join(','),
     );
     const asidesInnerHtml = await Promise.all(
@@ -182,7 +191,43 @@ test.describe('Inline markdown test', async () => {
         '<code>foo &lt;bar&gt; baz</code>',
         '<strong>bold</strong>',
         '<em>emphasis</em>',
+        '<del>delete</del>',
       ].join(','),
     );
   });
+
+  test('Should generate header anchor and id with inline markdown syntax correctly', async ({
+    page,
+  }) => {
+    await page.goto(`http://localhost:${appPort}/inline/all`, {
+      waitUntil: 'networkidle',
+    });
+
+    // Check h1 element
+    const h1 = await page.$('h1#class-componentp-s');
+    expect(h1).not.toBeNull();
+    const h1Anchor = await h1?.$('a.header-anchor');
+    expect(await h1Anchor?.getAttribute('href')).toBe('#class-componentp-s');
+
+    // Check h2 elements
+    const h2Selectors = [
+      'h2#class-componentp-s-1',
+      'h2#class-componentp-s-2',
+      'h2#-m-number',
+      'h2#foo',
+      'h2#foo-bar-baz',
+      'h2#bold',
+      'h2#emphasis',
+      'h2#delete',
+    ];
+
+    for (const selector of h2Selectors) {
+      const h2 = await page.$(selector);
+      expect(h2).not.toBeNull();
+      const h2Anchor = await h2?.$('a.header-anchor');
+      expect(await h2Anchor?.getAttribute('href')).toBe(
+        `#${selector.split('#')[1]}`,
+      );
+    }
+  });
 });

packages/core/package.json

@@ -48,7 +48,7 @@
     "@rsbuild/plugin-less": "~1.0.3",
     "@rsbuild/plugin-react": "~1.0.6",
     "@rsbuild/plugin-sass": "~1.0.4",
-    "@rspress/mdx-rs": "0.6.1",
+    "@rspress/mdx-rs": "0.6.3",
     "@rspress/plugin-auto-nav-sidebar": "workspace:*",
     "@rspress/plugin-container-syntax": "workspace:*",
     "@rspress/plugin-last-updated": "workspace:*",

packages/theme-default/src/logic/utils.ts

@@ -58,6 +58,7 @@ export function renderHtmlOrText(str?: string | number | null) {
 const CODE_TEXT_PATTERN = /`(.*?)`/g;
 const STRONG_TEXT_PATTERN = /\*{2}(?!\*)(.*?)\*{2}(?!\*)/g;
 const EMPHASIS_TEXT_PATTERN = /\*(?!\*)(.*?)\*(?!\*)/g;
+const DELETE_TEXT_PATTERN = /\~{2}(.*?)\~{2}/g;
 
 /**
  * In this method, we will render the markdown text to inline html and support basic markdown syntax, including the following:
@@ -72,6 +73,7 @@ export function renderInlineMarkdown(text: string) {
     .replace(/`[^`]+`/g, match => match.replace(/</g, '&lt;'))
     .replace(STRONG_TEXT_PATTERN, '<strong>$1</strong>')
     .replace(EMPHASIS_TEXT_PATTERN, '<em>$1</em>')
+    .replace(DELETE_TEXT_PATTERN, '<del>$1</del>')
     .replace(CODE_TEXT_PATTERN, '<code>$1</code>');
 
   return renderHtmlOrText(htmlText);
@@ -81,5 +83,6 @@ export function parseInlineMarkdownText(mdx: string) {
   return mdx
     .replace(STRONG_TEXT_PATTERN, '$1')
     .replace(EMPHASIS_TEXT_PATTERN, '$1')
+    .replace(DELETE_TEXT_PATTERN, '$1')
     .replace(CODE_TEXT_PATTERN, '$1');
 }