Add option to show invisible chars in ace editor

src/i18n/en.json

@@ -62,6 +62,7 @@
     "invalid_filename": "Invalid filename given.",
     "invalid_params": "Invalid parameter given.",
     "invalid_url": "Invalid URL given.",
+    "invis_chars": "Invisible chars",
     "json_encode_error": "Could not format the response as JSON:",
     "last_modified": "Last Modified",
     "load_config_error": "Could not load configuration.",

src/i18n/ru.json

@@ -62,6 +62,7 @@
     "invalid_filename": "Неверное имя файла.",
     "invalid_params": "Неверный параметр.",
     "invalid_url": "Неверный URL.",
+    "invis_chars": "Невидимые символы",
     "json_encode_error": "Не удалось представить ответ в виде JSON:",
     "last_modified": "Изменено",
     "load_config_error": "Ошибка загрузки конфигурации.",

src/ifm.js

@@ -531,12 +531,14 @@ function IFM(params) {
 				// var ihatethisfuckingpopoverworkaround = $('#editoroptions').data('bs.popover');
 				// $(ihatethisfuckingpopoverworkaround.tip).find( '.popover-body' ).empty();
 
-				let aceSession = self.editor.getSession();
+				let aceEditor = self.editor;
+				let aceSession = aceEditor.getSession();
 				let content = self.getNodeFromString(
 					Mustache.render(
 						self.templates.file_editoroptions,
 						{
 							wordwrap: ( aceSession.getOption( 'wrap' ) == 'off' ? false : true ),
+							invischars: aceEditor.getOption( 'showInvisibles' ),
 							softtabs: aceSession.getOption( 'useSoftTabs' ),
 							tabsize: aceSession.getOption( 'tabSize' ),
 							ace_includes: self.ace,
@@ -552,6 +554,11 @@ function IFM(params) {
 						aceSession.setOption( 'wrap', e.srcElement.checked );
 					});
 				}
+				if( el = content.querySelector("#editor-invisible-chars")) {
+					el.addEventListener( 'change', function( e ) {
+						aceEditor.setOption( 'showInvisibles', e.srcElement.checked );
+					});
+				}
 				if( el = content.querySelector("#editor-softtabs" ))
 					el.addEventListener( 'change', function( e ) {
 						aceSession.setOption( 'useSoftTabs', e.srcElement.checked );
@@ -561,10 +568,11 @@ function IFM(params) {
 						aceSession.setOption( 'tabSize', e.srcElement.value );
 					});
 				}
-				if( el = content.querySelector("#editor-syntax" ))
+				if( el = content.querySelector("#editor-syntax" )) {
 					el.addEventListener( 'change', function( e ) {
 						aceSession.getSession().setMode( e.target.value );
 					});
+				}
 				return content;
 
 			}

src/templates/modal.file_editoroptions.html

@@ -8,6 +8,14 @@
 			>
 			<label class="form-check-label" for="editor-wordwrap">{{i18n.word_wrap}}</label>
 		</div>
+		<div class="form-check">
+			<input class="form-check-input" type="checkbox" id="editor-invisible-chars"
+				{{#invischars}}
+				checked="checked"
+				{{/invischars}}
+			>
+			<label class="form-check-label" for="editor-invisible-chars">{{i18n.invis_chars}}</label>
+		</div>
 		<div class="form-check">
 			<input class="form-check-input" type="checkbox" id="editor-softtabs"
 				{{#softtabs}}