fix(client): add support for editable regions in TypeScript and TSX files (#67537)

client/src/templates/Challenges/redux/create-question-epic.js

@@ -54,10 +54,15 @@ export function insertEditableRegions(challengeFiles = []) {
           return '\n/* User Editable Region */\n';
         case 'py':
           return '\n# User Editable Region\n';
+
         case 'js':
+        case 'ts':
           return '\n// User Editable Region\n';
+
         case 'jsx':
+        case 'tsx':
           return '\n{/* User Editable Region */}\n';
+
         default:
           return '\nUser Editable Region\n';
       }

client/src/templates/Challenges/redux/create-question-epic.test.js

@@ -89,5 +89,35 @@ describe('create-question-epic', () => {
         insertEditableRegions(multiCertChallengeFiles)
       ).not.toThrow();
     });
+    it.each([
+      ['html', '<!-- User Editable Region -->'],
+      ['css', '/* User Editable Region */'],
+      ['py', '# User Editable Region'],
+      ['js', '// User Editable Region'],
+      ['ts', '// User Editable Region'],
+      ['jsx', '{/* User Editable Region */}'],
+      ['tsx', '{/* User Editable Region */}'],
+      ['unknown', 'User Editable Region']
+    ])('should insert correct comment syntax for %s files', (ext, comment) => {
+      const challengeFiles = [
+        {
+          contents: 'line1\nline2\nline3\nline4',
+          editableRegionBoundaries: [1, 3],
+          ext,
+          fileKey: `file-${ext}`,
+          history: [`index.${ext}`],
+          head: '',
+          id: '',
+          name: 'index',
+          path: `index.${ext}`,
+          seed: 'line1\nline2\nline3\nline4',
+          tail: ''
+        }
+      ];
+
+      const result = insertEditableRegions(challengeFiles);
+
+      expect(result[0].contents).toContain(comment);
+    });
   });
 });