Display whitespace (#879)

* Display whitespace

resolve #877

* Update

* Update Settings.js

* hiddenCharacters

* tweak

* clean up a bit

components/Carbon.js

@@ -33,6 +33,7 @@ function searchLanguage(l) {
 }
 
 function noop() {}
+
 class Carbon extends React.PureComponent {
   static defaultProps = {
     onChange: noop,
@@ -158,7 +159,8 @@ class Carbon extends React.PureComponent {
       },
       readOnly: this.props.readOnly ? 'nocursor' : false,
       // needs to be able to refresh every 16ms to hit 60 frames / second
-      pollInterval: 16
+      pollInterval: 16,
+      showInvisibles: config.hiddenCharacters
     }
     const backgroundImage =
       (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
@@ -443,9 +445,14 @@ function useSelectedLines(props, editorRef) {
   }, [])
 }
 
+function useShowInvisibleLoader() {
+  React.useEffect(() => void require('cm-show-invisibles'), [])
+}
+
 function CarbonContainer(props, ref) {
   useModeLoader()
   useHighlightLoader()
+  useShowInvisibleLoader()
   const editorRef = React.createRef()
   const onGutterClick = useSelectedLines(props, editorRef)
 

components/Settings.js

@@ -31,6 +31,7 @@ function WindowSettings({
   windowControls,
   lineNumbers,
   firstLineNumber,
+  hiddenCharacters,
   widthAdjustment,
   watermark,
   onWidthChanging,
@@ -95,6 +96,11 @@ function WindowSettings({
           />
         </div>
       )}
+      <Toggle
+        label="Hidden characters"
+        enabled={hiddenCharacters}
+        onChange={onChange.bind(null, 'hiddenCharacters')}
+      />
       <Toggle
         label="Auto-adjust width"
         enabled={widthAdjustment}
@@ -346,6 +352,7 @@ class Settings extends React.PureComponent {
             windowControls={this.props.windowControls}
             lineNumbers={this.props.lineNumbers}
             firstLineNumber={this.props.firstLineNumber}
+            hiddenCharacters={this.props.hiddenCharacters}
             widthAdjustment={this.props.widthAdjustment}
             watermark={this.props.watermark}
           />

lib/constants.js

@@ -1052,6 +1052,7 @@ export const DEFAULT_SETTINGS = {
   exportSize: '2x',
   watermark: false,
   squaredImage: false,
+  hiddenCharacters: false,
   preset: 'preset:4'
 }
 

package.json

@@ -21,6 +21,7 @@
     "@reach/visually-hidden": "^0.3.0",
     "actionsack": "^0.0.13",
     "axios": "^0.19.0",
+    "cm-show-invisibles": "^2.0.2",
     "codemirror": "^5.49.2",
     "codemirror-graphql": "^0.11.2",
     "codemirror-mode-elixir": "^1.1.2",

yarn.lock

@@ -2609,6 +2609,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+cm-show-invisibles@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/cm-show-invisibles/-/cm-show-invisibles-2.0.2.tgz#017e9165ee2fd40b33446718aff97da55d7aeef4"
+  integrity sha512-TBGsnxLRUUjhVwOX7mY2hdrFlr1cAzG7UD2ote8FMi8ChubTbKItubdOpEtz+7emfv/v4xhQI1EBeA3ZzR3CGw==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"