fix: special characters in inline code

Author: cardoso

apps/meteor/client/components/MarkdownText.spec.tsx

@@ -38,13 +38,9 @@ const markdownText = `
   gabriel.engel@rocket.chat
   +55991999999
   \`Inline code\`
-  \`2 < 3 > 1 & 4 "Test"\`
   \`\`\`typescript
   const test = 'this is code'
   \`\`\`
-  \`\`\`
-  Two < Three > One & Four "Test"
-  \`\`\`
   **Bold text within __Italics__**
   *Bold text with single asterik and underscore within _Italics_*
   __Italics within **Bold** text__
@@ -82,9 +78,7 @@ it('should render html elements as expected using default parser', async () => {
 
 	expect(normalizedHtml).toContain('+55991999999');
 	expect(normalizedHtml).toContain('<code>Inline code</code>');
-	expect(normalizedHtml).toContain('<code>2 &lt; 3 &gt; 1 &amp; 4 "Test"</code>');
 	expect(normalizedHtml).toContain('<pre><code class="language-typescript">const test = \'this is code\' </code></pre>');
-	expect(normalizedHtml).toContain('<pre><code>Two &lt; Three &gt; One &amp; Four "Test" </code></pre>');
 	expect(normalizedHtml).toContain('<strong>Bold text within <em>Italics</em></strong>');
 	expect(normalizedHtml).toContain('<strong>Bold text with single asterik and underscore within <em>Italics</em></strong>');
 	expect(normalizedHtml).toContain('<em>Italics within <strong>Bold</strong> text</em>');
@@ -274,3 +268,33 @@ describe('links handling', () => {
 		else expect(anchorElement).not.toHaveAttribute('title');
 	});
 });
+
+describe('code handling', () => {
+	it.each([
+		{
+			caseName: 'inline code',
+			content: '`Inline code`',
+			expected: '<code>Inline code</code>',
+		},
+		{
+			caseName: 'inline code with special characters',
+			content: '`2 < 3 > 1 & 4 "Test"`',
+			expected: '<code>2 &lt; 3 &gt; 1 &amp; 4 "Test"</code>',
+		},
+		{
+			caseName: 'block code with language',
+			content: "```typescript\nconst test = 'this is code'\n```",
+			expected: '<code class="language-typescript">const test = \'this is code\' </code>',
+		},
+		{
+			caseName: 'block code without language',
+			content: '```\nTwo < Three > One & Four "Test"\n```',
+			expected: '<code>Two &lt; Three &gt; One &amp; Four "Test" </code>',
+		},
+	] as const)('should render $caseName', ({ content, expected }) => {
+		render(<MarkdownText content={`${content}`} variant='document' />, {
+			wrapper: mockAppRoot().build(),
+		});
+		expect(screen.getByRole('code').outerHTML).toEqual(expected);
+	});
+});

apps/meteor/client/components/MarkdownText.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { within, expect } from '@storybook/test';
 import outdent from 'outdent';
 
 import MarkdownText from './MarkdownText';
@@ -70,26 +69,6 @@ export const Document: Story = {
 		`,
 		variant: 'document',
 	},
-	play: async (test) => {
-		const canvas = within(test.context.canvasElement);
-		expect(await canvas.findByRole('heading', { level: 1 })).toHaveTextContent('Title');
-		expect(await canvas.findByRole('heading', { level: 2 })).toHaveTextContent('Subtitle');
-
-		const listItem1 = await canvas.findByText('List item 1');
-		expect(listItem1).toBeVisible();
-
-		const listItem2 = await canvas.findByText('List item 2');
-		expect(listItem2).toBeVisible();
-
-		const listItem3 = await canvas.findByText('List item 3');
-		expect(listItem3).toBeVisible();
-
-		const inlineCode = await canvas.findByText('2 < 3 > 1 & 4 "Test"');
-		expect(inlineCode).toBeVisible();
-
-		const blockCode = await canvas.findByText('Two < Three > One & Four "Test"');
-		expect(blockCode).toBeVisible();
-	},
 };
 
 export const Inline: Story = {

apps/meteor/client/components/MarkdownText.tsx

@@ -48,12 +48,14 @@ const codeMarked = (code: string, language: string | undefined, _isEscaped: bool
 	}
 	return `<pre><code>${code} </code></pre>`;
 };
+const codespanMarked = (code: string): string => {
+	return `<code>${code.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')}</code>`;
+};
 
 documentRenderer.link = linkMarked;
 documentRenderer.listitem = listItemMarked;
 documentRenderer.code = codeMarked;
-documentRenderer.codespan = (code: string): string =>
-	`<code>${code.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')}</code>`;
+documentRenderer.codespan = codespanMarked;
 
 inlineRenderer.link = linkMarked;
 inlineRenderer.paragraph = paragraphMarked;

apps/meteor/package.json

@@ -52,7 +52,6 @@
 		"set-version": "node .scripts/set-version.js",
 		"release": "meteor yarn set-version --silent",
 		"storybook": "storybook dev -p 6006 --no-version-updates",
-		"test-storybook": "npx concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --ci\" \"npx wait-on tcp:127.0.0.1:6006 && yarn exec test-storybook --includeTags=\"play-fn\"\"",
 		"prepare": "node playwright.prepare.mjs",
 		"docker:start": "docker-compose up"
 	},
@@ -85,8 +84,6 @@
 		"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
 		"@storybook/react": "^8.6.14",
 		"@storybook/react-webpack5": "^8.6.14",
-		"@storybook/test": "^8.6.14",
-		"@storybook/test-runner": "^0.22.0",
 		"@testing-library/react": "~16.0.1",
 		"@testing-library/user-event": "~14.5.2",
 		"@types/adm-zip": "^0.5.6",

yarn.lock

@@ -8407,7 +8407,7 @@ __metadata:
     storybook-dark-mode: "npm:^4.0.2"
     typescript: "npm:~5.7.2"
   peerDependencies:
-    "@rocket.chat/apps-engine": 1.51.0
+    "@rocket.chat/apps-engine": 1.52.0-rc.0
     "@rocket.chat/eslint-config": 0.7.0
     "@rocket.chat/fuselage": "*"
     "@rocket.chat/fuselage-hooks": "*"
@@ -8891,8 +8891,6 @@ __metadata:
     "@storybook/addon-webpack5-compiler-babel": "npm:^3.0.6"
     "@storybook/react": "npm:^8.6.14"
     "@storybook/react-webpack5": "npm:^8.6.14"
-    "@storybook/test": "npm:^8.6.14"
-    "@storybook/test-runner": "npm:^0.22.0"
     "@tanstack/react-query": "npm:~5.65.1"
     "@testing-library/react": "npm:~16.0.1"
     "@testing-library/user-event": "npm:~14.5.2"