From 6ca2bf7b1b9fa9484ff2ccb812ace32fcdd025de Mon Sep 17 00:00:00 2001
From: Timothy Lim <tim@thewheatfield.org>
Date: Thu, 2 Sep 2021 04:17:15 +0800
Subject: [PATCH] Prevent GraphQL non breaking space (#2770)

Co-authored-by: Timothy Lim <tim.lim@intercom.io>
Co-authored-by: gatzjames <jamesgatzos@gmail.com>
Co-authored-by: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
---
 .../ui/components/codemirror/code-editor.tsx  | 17 ++++++----
 .../normalizeIrregularWhitespace.ts           | 33 +++++++++++++++++++
 2 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 packages/insomnia-app/app/ui/components/codemirror/normalizeIrregularWhitespace.ts

diff --git a/packages/insomnia-app/app/ui/components/codemirror/code-editor.tsx b/packages/insomnia-app/app/ui/components/codemirror/code-editor.tsx
index 77f69361fb..ce4eb47333 100644
--- a/packages/insomnia-app/app/ui/components/codemirror/code-editor.tsx
+++ b/packages/insomnia-app/app/ui/components/codemirror/code-editor.tsx
@@ -28,6 +28,7 @@ import DropdownButton from '../base/dropdown/dropdown-button';
 import DropdownItem from '../base/dropdown/dropdown-item';
 import FilterHelpModal from '../modals/filter-help-modal';
 import { showModal } from '../modals/index';
+import { normalizeIrregularWhitespace } from './normalizeIrregularWhitespace';
 
 const TAB_KEY = 9;
 const TAB_SIZE = 4;
@@ -990,7 +991,7 @@ class CodeEditor extends Component<Props, State> {
     }
   }
 
-  _codemirrorValueBeforeChange(doc, change) {
+  _codemirrorValueBeforeChange(doc: CodeMirror.Editor, change: CodeMirror.EditorChangeCancellable) {
     const value = this.codeMirror?.getDoc().getValue();
 
     // If we're in single-line mode, merge all changed lines into one
@@ -999,7 +1000,14 @@ class CodeEditor extends Component<Props, State> {
         .join('') // join all changed lines into one
         .replace(/\n/g, ' ');
       // Convert all whitespace to spaces
-      change.update(change.from, change.to, [text]);
+      change.update?.(change.from, change.to, [text]);
+    }
+
+    // Don't allow non-breaking spaces because they break the GraphQL syntax
+    if (doc.getOption('mode') === 'graphql') {
+      const text = change.text.map(normalizeIrregularWhitespace);
+
+      change.update?.(change.from, change.to, text);
     }
 
     // Suppress lint on empty doc or single space exists (default value)
@@ -1007,11 +1015,6 @@ class CodeEditor extends Component<Props, State> {
       this._codemirrorSmartSetOption('lint', false);
     } else {
       this._codemirrorSmartSetOption('lint', this.props.lintOptions || true);
-
-      // Don't allow non-breaking spaces because they break the GraphQL syntax
-      if (doc.options.mode === 'graphql' && change.text && change.text.length > 1) {
-        change.text = change.text.map(text => text.replace(/\u00A0/g, ' '));
-      }
     }
   }
 
diff --git a/packages/insomnia-app/app/ui/components/codemirror/normalizeIrregularWhitespace.ts b/packages/insomnia-app/app/ui/components/codemirror/normalizeIrregularWhitespace.ts
new file mode 100644
index 0000000000..f754596bdb
--- /dev/null
+++ b/packages/insomnia-app/app/ui/components/codemirror/normalizeIrregularWhitespace.ts
@@ -0,0 +1,33 @@
+// List of irregular whitespace characters adopted from https://eslint.org/docs/rules/no-irregular-whitespace#rule-details
+const irregularWhitespaceCharacters = [
+  '\u000B',
+  '\u000C',
+  '\u00A0',
+  '\u0085',
+  '\u1680',
+  '\u180E',
+  '\ufeff',
+  '\u2000',
+  '\u2001',
+  '\u2002',
+  '\u2003',
+  '\u2004',
+  '\u2005',
+  '\u2006',
+  '\u2007',
+  '\u2008',
+  '\u2009',
+  '\u200A',
+  '\u200B',
+  '\u2028',
+  '\u2029',
+  '\u202F',
+  '\u205f',
+  '\u3000',
+];
+
+const irregularWhitespaceCharactersRegex = new RegExp(`[${irregularWhitespaceCharacters.join('')}]`);
+
+export function normalizeIrregularWhitespace(text: string) {
+  return text.replace(irregularWhitespaceCharactersRegex, ' ');
+}