fix(editor): highlight tab characters in interactive editor

Coursemology · Jul 31, 2024 · 021438e · 021438e
1 parent 32cbd99
commit 021438e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/client/app/lib/components/core/fields/AceEditor.css 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
@@ -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
@@ -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'),
         ],
       },
       {
-Original file line number
+Diff line change
@@ Expand Up / @@ -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'),
             ],
           },
           {
@@ Expand Down @@