From e08b9f992fd6622240c750f9a7ab97f101aac425 Mon Sep 17 00:00:00 2001
From: Rustom Yadav <vijayyadav.official@outlook.com>
Date: Sat, 23 May 2026 01:23:53 +0530
Subject: [PATCH] fix(client): add support for editable regions in TypeScript
 and TSX files (#67537)

---
 .../Challenges/redux/create-question-epic.js  |  5 ++++
 .../redux/create-question-epic.test.js        | 30 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/client/src/templates/Challenges/redux/create-question-epic.js b/client/src/templates/Challenges/redux/create-question-epic.js
index 745e8c4823b..4fa8d3ba1da 100644
--- a/client/src/templates/Challenges/redux/create-question-epic.js
+++ b/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';
       }
diff --git a/client/src/templates/Challenges/redux/create-question-epic.test.js b/client/src/templates/Challenges/redux/create-question-epic.test.js
index 8ba0a8f6aef..9588f849eba 100644
--- a/client/src/templates/Challenges/redux/create-question-epic.test.js
+++ b/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);
+    });
   });
 });