Backport PR #10632: Add show trailing whitespace option to Notebook a…

…nd Text Editor (#11131)
jupyterlab · Sep 23, 2021 · 0d17860 · 0d17860
1 parent 6f0dbe9
commit 0d17860
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/packages/codeeditor/src/editor.ts b/packages/codeeditor/src/editor.ts
@@ -791,6 +791,11 @@ export namespace CodeEditor {
      * Whether to allow code folding
      */
     codeFolding: boolean;
+
+    /**
+     * Whether to highlight trailing whitespace
+     */
+    showTrailingSpace: boolean;
   }
 
   /**
@@ -811,7 +816,8 @@ export namespace CodeEditor {
     autoClosingBrackets: false,
     handlePaste: true,
     rulers: [],
-    codeFolding: false
+    codeFolding: false,
+    showTrailingSpace: false
   };
 
   /**

diff --git a/packages/codemirror/src/editor.ts b/packages/codemirror/src/editor.ts
@@ -41,6 +41,7 @@ import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/selection/mark-selection';
 import 'codemirror/addon/selection/selection-pointer';
+import 'codemirror/addon/edit/trailingspace.js';
 import 'codemirror/keymap/emacs.js';
 import 'codemirror/keymap/sublime.js';
 import { CodemirrorBinding } from 'y-codemirror';
@@ -1603,6 +1604,9 @@ namespace Private {
         (editor.setOption as any)('foldGutter', value);
         editor.setOption('gutters', getActiveGutters(config));
         break;
+      case 'showTrailingSpace':
+        (editor.setOption as any)(option, value);
+        break;
       default:
         (editor.setOption as any)(option, value);
         break;

diff --git a/packages/codemirror/style/base.css b/packages/codemirror/style/base.css
@@ -87,6 +87,12 @@
   color: var(--jp-search-unselected-match-color) !important;
 }
 
+.cm-trailingspace {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAsElEQVQIHQGlAFr/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7+r3zKmT0/+pk9P/7+r3zAAAAAAAAAAABAAAAAAAAAAA6OPzM+/q9wAAAAAA6OPzMwAAAAAAAAAAAgAAAAAAAAAAGR8NiRQaCgAZIA0AGR8NiQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQyoYJ/SY80UAAAAASUVORK5CYII=);
+  background-position: center left;
+  background-repeat: repeat-x;
+}
+
 .CodeMirror-focused .CodeMirror-selected {
   background-color: var(--jp-editor-selected-focused-background);
 }

diff --git a/packages/fileeditor-extension/schema/plugin.json b/packages/fileeditor-extension/schema/plugin.json
@@ -205,6 +205,9 @@
           "type": "boolean",
           "default": false
         },
+        "showTrailingSpace": {
+          "type": "boolean"
+        },
         "tabSize": {
           "type": "number",
           "default": 4
@@ -236,6 +239,7 @@
         "matchBrackets": true,
         "readOnly": false,
         "rulers": [],
+        "showTrailingSpace": false,
         "tabSize": 4,
         "wordWrapColumn": 80
       }

diff --git a/packages/notebook-extension/schema/tracker.json b/packages/notebook-extension/schema/tracker.json
@@ -684,7 +684,8 @@
         "wordWrapColumn": 80,
         "rulers": [],
         "codeFolding": false,
-        "lineWiseCopyCut": true
+        "lineWiseCopyCut": true,
+        "showTrailingSpace": false
       }
     },
     "defaultCell": {
@@ -727,7 +728,8 @@
         "wordWrapColumn": 80,
         "rulers": [],
         "codeFolding": false,
-        "lineWiseCopyCut": true
+        "lineWiseCopyCut": true,
+        "showTrailingSpace": false
       }
     },
     "rawCellConfig": {
@@ -757,7 +759,8 @@
         "wordWrapColumn": 80,
         "rulers": [],
         "codeFolding": false,
-        "lineWiseCopyCut": true
+        "lineWiseCopyCut": true,
+        "showTrailingSpace": false
       }
     },
     "scrollPastEnd": {