fix: add flag to track encoding state of example lines

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Snyk Security - Code and Open Source Dependencies Changelog
 
+## [2.2.3]
+
+### Fixed
+
+- Snyk Code: Added `isExampleLineEncoded` boolean flag to `CommitChangeLine` type to prevent re-encoding strings in the UI of the example code blocks.
+
 ## [2.2.2]
 
 ### Fixed

src/snyk/common/languageServer/types.ts

@@ -58,6 +58,7 @@ type CommitChangeLine = {
   line: string;
   lineNumber: number;
   lineChange: 'removed' | 'added' | 'none';
+  isExampleLineEncoded?: boolean;
 };
 export type Marker = {
   msg: Point;

src/snyk/snykCode/utils/htmlEncoder.ts

@@ -2,14 +2,19 @@ import he from 'he';
 import { ExampleCommitFix } from '../../common/languageServer/types';
 
 export const encodeExampleCommitFixes = (exampleCommitFixes: ExampleCommitFix[]): ExampleCommitFix[] => {
-  return exampleCommitFixes.map(exampleCommitFixes => {
+  return exampleCommitFixes.map(example => {
     return {
-      ...exampleCommitFixes,
-      lines: exampleCommitFixes.lines.map(line => {
-        return {
-          ...line,
-          line: he.encode(line.line),
-        };
+      ...example,
+      lines: example.lines.map(commitLine => {
+        if (!commitLine.isExampleLineEncoded) {
+          return {
+            ...commitLine,
+            line: he.encode(commitLine.line),
+            isExampleLineEncoded: true,
+          };
+        }
+
+        return commitLine;
       }),
     };
   });

src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts

@@ -27,6 +27,7 @@
     line: string;
     lineNumber: number;
     lineChange: 'removed' | 'added' | 'none';
+    isExampleLineEncoded?: boolean;
   };
   type Marker = {
     msg: Point;
@@ -61,7 +62,7 @@
     text: string;
   };
 
   const vscode = acquireVsCodeApi();
 
   const elements = {
     readMoreBtnElem: document.querySelector('.read-more-btn') as HTMLElement,
@@ -97,7 +98,7 @@
   let exampleCount = 0;
 
   // Try to restore the previous state
   let lesson: Lesson | null = vscode.getState()?.lesson || null;
   fillLearnLink();
   let suggestion: Suggestion | null = vscode.getState()?.suggestion || null;
   showCurrentSuggestion();