From 021438e497269c6aeb547d54274161efb2724db7 Mon Sep 17 00:00:00 2001
From: adi-herwana-nus <adi.hwn@nus.edu.sg>
Date: Wed, 31 Jul 2024 12:55:45 +0800
Subject: [PATCH] fix(editor): highlight tab characters in interactive editor

---
 client/app/lib/components/core/fields/AceEditor.css   | 7 +++++++
 client/app/lib/components/core/fields/EditorField.tsx | 3 +++
 client/webpack.common.js                              | 1 +
 3 files changed, 11 insertions(+)
 create mode 100644 client/app/lib/components/core/fields/AceEditor.css

diff --git a/client/app/lib/components/core/fields/AceEditor.css b/client/app/lib/components/core/fields/AceEditor.css
new file mode 100644
index 00000000000..b79a83044c0
--- /dev/null
+++ b/client/app/lib/components/core/fields/AceEditor.css
@@ -0,0 +1,7 @@
+.ace_invisible {
+    opacity: 0;
+}
+
+.ace_invisible.ace_invisible_tab {
+    opacity: 1;
+}
diff --git a/client/app/lib/components/core/fields/EditorField.tsx b/client/app/lib/components/core/fields/EditorField.tsx
index cd4ce565749..3ec7ce92140 100644
--- a/client/app/lib/components/core/fields/EditorField.tsx
+++ b/client/app/lib/components/core/fields/EditorField.tsx
@@ -4,6 +4,8 @@ import { LanguageMode } from 'types/course/assessment/question/programming';
 
 import 'ace-builds/src-noconflict/theme-github';
 
+import './AceEditor.css';
+
 interface EditorProps extends ComponentProps<typeof AceEditor> {
   language: LanguageMode;
   value?: string;
@@ -52,6 +54,7 @@ const EditorField = forwardRef(
           readOnly: disabled,
           useWorker: false,
           fontFamily: DEFAULT_FONT_FAMILY,
+          showInvisibles: true,
         }}
       />
     );
diff --git a/client/webpack.common.js b/client/webpack.common.js
index e4273128dba..fcc8623d3d0 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -112,6 +112,7 @@ module.exports = {
             'node_modules/react-tooltip/dist/react-tooltip.min.css',
           ),
           resolve(__dirname, 'app/lib/components/core/fields/CKEditor.css'),
+          resolve(__dirname, 'app/lib/components/core/fields/AceEditor.css'),
         ],
       },
       {