From d86a053b37e5dd1fed6668d6fff47973f8620070 Mon Sep 17 00:00:00 2001
From: Chirag Sharma <150002431+v-sharmachir@users.noreply.github.com>
Date: Thu, 27 Jun 2024 22:30:42 +0530
Subject: [PATCH] fix: adding code to format nextline character (\r\n) (#7378)

#### Details

Adding code to format nextline character (\r\n)

##### Motivation

During feature work [Update to React 18 for Docs
Repo](https://dev.azure.com/mseng/1ES/_workitems/edit/2189969) analysis
and local testing, we found that there are multiple errors when we
refresh the info-example pages after the first render of the page

![image](https://github.com/microsoft/accessibility-insights-web/assets/150002431/57f49878-dc51-42b1-b5a7-2288550afd49)

These errors are related to difference in render in server and client
side. This error can be reproducible in main branch as well. While
debugging we found that a next line character available in server side
which was causing difference in render. UI package is used to render
info-example content and hence require a fix to avoid those errors in
consuming applications as well.

##### Context

<!-- Are there any parts that you've intentionally left out-of-scope for
a later PR to handle? -->

<!-- Were there any alternative approaches you considered? What
tradeoffs did you consider? -->

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [ ] Addresses an existing issue: #0000
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [ ] (UI changes only) Added screenshots/GIFs to description above
- [ ] (UI changes only) Verified usability with NVDA/JAWS
---
 .../__snapshots__/code-example.test.tsx.snap  | 28 +++++++++++++++++++
 .../content/markup/code-example.test.tsx      |  8 ++++++
 src/views/content/markup/code-example.tsx     |  3 +-
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/tests/unit/tests/views/content/markup/__snapshots__/code-example.test.tsx.snap b/src/tests/unit/tests/views/content/markup/__snapshots__/code-example.test.tsx.snap
index 0dc50c021a9..262e5eb38f5 100644
--- a/src/tests/unit/tests/views/content/markup/__snapshots__/code-example.test.tsx.snap
+++ b/src/tests/unit/tests/views/content/markup/__snapshots__/code-example.test.tsx.snap
@@ -247,3 +247,31 @@ exports[`<CodeExample> renders with unterminated highlighted region 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`<CodeExample> renders highlight and multiple line breaks using \\r\\n 1`] = `
+<DocumentFragment>
+  <div
+    class="code-example"
+  >
+    <div
+      class="code-example-code"
+    >
+      <mock-codeblock>
+        Line 1
+        <br />
+        Line 2 
+        <span
+          class="highlight"
+        >
+          HIGHLIGHT
+          <br />
+          HERE
+        </span>
+        Line 3
+        <br />
+        Line 4
+      </mock-codeblock>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/tests/unit/tests/views/content/markup/code-example.test.tsx b/src/tests/unit/tests/views/content/markup/code-example.test.tsx
index 0bf1f7597ee..0740def077f 100644
--- a/src/tests/unit/tests/views/content/markup/code-example.test.tsx
+++ b/src/tests/unit/tests/views/content/markup/code-example.test.tsx
@@ -80,4 +80,12 @@ describe('<CodeExample>', () => {
         const renderResult = render(<CodeExample>{`Line 1\nLine 2`}</CodeExample>);
         expect(renderResult.container.querySelector('br')).not.toBeNull();
     });
+
+    it('renders highlight and multiple line breaks using \\r\\n', () => {
+        const renderResult = render(
+            <CodeExample>{`Line 1\r\nLine 2 [HIGHLIGHT\r\nHERE]Line 3\r\nLine 4`}</CodeExample>,
+        );
+        expect(renderResult.container.querySelector('br')).not.toBeNull();
+        expect(renderResult.asFragment()).toMatchSnapshot();
+    });
 });
diff --git a/src/views/content/markup/code-example.tsx b/src/views/content/markup/code-example.tsx
index f980280d757..c84e6c3dc69 100644
--- a/src/views/content/markup/code-example.tsx
+++ b/src/views/content/markup/code-example.tsx
@@ -36,8 +36,9 @@ export function CodeExample(props: CodeExampleProps): JSX.Element {
     }
 
     function renderLineBreaks(str: string): React.ReactNode[] {
+        const newLineArray = str.includes('\r\n') ? str.split('\r\n') : str.split('\n');
         return flatten(
-            str.split('\n').map(s => [<br key={`line-breaker-${lineCount++}`} />, s]),
+            newLineArray.map(s => [<br key={`line-breaker-${lineCount++}`} />, s]),
         ).slice(1);
     }