Repository: graphql-markdown/graphql-markdown
Pull request #1382 (2024-04-02 15:42:18)

:bug:  fix mdx special chars escaped in code section
# Description

Fix issue when mdx special chars are escaped in code section.

Example:
```
`{MDX}` <special> characters
```

Before fix:  
```
`&#x007B;MDX&#x007D;` &#x003C;special&#x003E; characters
```

After fix:
```
`{MDX}` &#x003C;special&#x003E; characters
```


# Checklist

- [x] My changes follow the [contributing guidelines](https://github.com/graphql-markdown/graphql-markdown/blob/main/CONTRIBUTING.md) of this project.
- [x] I have performed a self-review of my code.
- [ ] I have made corresponding changes to the documentation.
- [x] I have added tests that prove my fix is effective or that my changes work.
- [x] New and existing unit tests pass locally with my changes.


sonarcloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_graphql-markdown&pullRequest=1382) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_graphql-markdown&pullRequest=1382&resolved=false&inNewCodePeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/component_measures?id=graphql-markdown_graphql-markdown&pullRequest=1382&metric=new_accepted_issues&view=list)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [1 Security Hotspot](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_graphql-markdown&pullRequest=1382&resolved=false&inNewCodePeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/no-data-16px.png '') No data about Coverage  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_graphql-markdown&pullRequest=1382&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarCloud](https://sonarcloud.io/dashboard?id=graphql-markdown_graphql-markdown&pullRequest=1382)


coveralls: 
[![Coverage Status](https://coveralls.io/builds/66666662/badge)](https://coveralls.io/builds/66666662)

coverage: 94.684%. remained the same
when pulling **4709a45f01f731b9df09b960426693800e26f82b on fix/do-not-escape-char-in-code**
into **7d90a3ce87b697bba00a93f566dde9a0b2c46cee on main**.

sonarcloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_graphql-markdown&pullRequest=1382) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_graphql-markdown&pullRequest=1382&resolved=false&inNewCodePeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/component_measures?id=graphql-markdown_graphql-markdown&pullRequest=1382&metric=new_accepted_issues&view=list)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [1 Security Hotspot](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_graphql-markdown&pullRequest=1382&resolved=false&inNewCodePeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/no-data-16px.png '') No data about Coverage  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_graphql-markdown&pullRequest=1382&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarCloud](https://sonarcloud.io/dashboard?id=graphql-markdown_graphql-markdown&pullRequest=1382)


sonarcloud[bot]: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=graphql-markdown_graphql-markdown&pullRequest=1382) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=graphql-markdown_graphql-markdown&pullRequest=1382&resolved=false&inNewCodePeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/component_measures?id=graphql-markdown_graphql-markdown&pullRequest=1382&metric=new_accepted_issues&view=list)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [1 Security Hotspot](https://sonarcloud.io/project/security_hotspots?id=graphql-markdown_graphql-markdown&pullRequest=1382&resolved=false&inNewCodePeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/no-data-16px.png '') No data about Coverage  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=graphql-markdown_graphql-markdown&pullRequest=1382&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarCloud](https://sonarcloud.io/dashboard?id=graphql-markdown_graphql-markdown&pullRequest=1382)



Patch:
diff --git a/packages/utils/src/string.ts b/packages/utils/src/string.ts
index fcdb15f9..49141e38 100644
--- a/packages/utils/src/string.ts
+++ b/packages/utils/src/string.ts
@@ -153,6 +153,8 @@ export const toHTMLUnicode = (char: Maybe<string>): string => {
 
 /**
  * Returns a string with MDX special characters converted to HTML unicode using {@link toHTMLUnicode}.
+ * Characters within code notation should not be converted.
+ * List of special characters: `{`, `<`, `>`, `}`
  *
  * @internal
  *
@@ -166,11 +168,17 @@ export const toHTMLUnicode = (char: Maybe<string>): string => {
  *
  * escapeMDX("{MDX} <special> characters");
  * // Expected result: "&#x007B;MDX&#x007D; &#x003C;special&#x003E; characters"
+ *
+ * escapeMDX("`{MDX}` `<special>` characters");
+ * // Expected result: "`{MDX}` `<special>` characters"
  * ```
  *
  */
 export const escapeMDX = (str: unknown): string => {
-  return `${String(str)}`.replace(/[<>{}]/g, toHTMLUnicode);
+  return `${String(str)}`.replace(
+    /(?<!`)([{<>}])(?=(?:[^`]*`[^`]*`)*[^`]*$)/g,
+    toHTMLUnicode,
+  );
 };
 
 /**


Test patch:
diff --git a/packages/utils/tests/unit/string.test.ts b/packages/utils/tests/unit/string.test.ts
index 17013aac..34e490c6 100644
--- a/packages/utils/tests/unit/string.test.ts
+++ b/packages/utils/tests/unit/string.test.ts
@@ -138,6 +138,14 @@ describe("string", () => {
       );
     });
 
+    test("does not transform MDX special characters enclosed as code", () => {
+      expect.hasAssertions();
+
+      expect(escapeMDX(">`{MDX}` `<special>` characters")).toBe(
+        "&#x003E;`{MDX}` `<special>` characters",
+      );
+    });
+
     test.each([
       [5, "5"],
       [{ five: 5 }, "[object Object]"],