From 2c2579ae2b6a4edc77d1fd11337f7e93d23bad03 Mon Sep 17 00:00:00 2001
From: Charlie Humphreys <ahumphreys3@gmail.com>
Date: Mon, 13 Dec 2021 20:49:32 -0600
Subject: [PATCH] Update usage of trailing space to include special chars for
 spaces

---
 shared/naturalcrit/codeEditor/codeEditor.jsx  | 15 +++++++++++----
 shared/naturalcrit/codeEditor/codeEditor.less |  7 ++-----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
index 2a1bc8f30..0956521f4 100644
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -161,10 +161,17 @@ const CodeEditor = createClass({
 					return `\u21A4 ${text} \u21A6`;
 				}
 			},
-			gutters           : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-			showTrailingSpace : true,
-			autoCloseTags     : true,
-			styleActiveLine   : true
+			gutters                : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+			autoCloseTags          : true,
+			styleActiveLine        : true,
+			showTrailingSpace      : true,
+			specialChars           : / /,
+			specialCharPlaceholder : function(char) {
+				const el = document.createElement('span');
+				el.className = 'cm-space';
+				el.innerHTML = ' ';
+				return el;
+			}
 		});
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
 
diff --git a/shared/naturalcrit/codeEditor/codeEditor.less b/shared/naturalcrit/codeEditor/codeEditor.less
index 5b1dc56d7..037a326bc 100644
--- a/shared/naturalcrit/codeEditor/codeEditor.less
+++ b/shared/naturalcrit/codeEditor/codeEditor.less
@@ -15,11 +15,8 @@
   }
 
   .cm-trailingspace {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) repeat-x left;
-    background-size: 7.16px 15px;
-
-    .cm-tab {
-      background: none;
+    .cm-space {
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
     }
   }
 }
\ No newline at end of file