fix: Non-printable character box missing when editing Cloud Config parameter (parse-community#3218)

Author: mtrezza

src/components/NonPrintableHighlighter/NonPrintableHighlighter.scss

@@ -105,7 +105,7 @@
 
 // Info badge styles for non-alphanumeric character detection
 .infoContainer {
-  margin-top: 8px;
+  margin-top: -4px;
 }
 
 .infoBadge {

src/dashboard/Data/Config/ConfigDialog.react.js

@@ -59,22 +59,26 @@ const EDITORS = {
   ),
   Date: (value, onChange) => <DateTimeInput fixed={true} value={value} onChange={onChange} />,
   Object: (value, onChange, wordWrap, syntaxColors) => (
-    <JsonEditor
-      value={value || ''}
-      onChange={onChange}
-      placeholder={'{\n  ...\n}'}
-      wordWrap={wordWrap}
-      syntaxColors={syntaxColors}
-    />
+    <NonPrintableHighlighter value={value} isJson={true} detectNonAlphanumeric={true}>
+      <JsonEditor
+        value={value || ''}
+        onChange={onChange}
+        placeholder={'{\n  ...\n}'}
+        wordWrap={wordWrap}
+        syntaxColors={syntaxColors}
+      />
+    </NonPrintableHighlighter>
   ),
   Array: (value, onChange, wordWrap, syntaxColors) => (
-    <JsonEditor
-      value={value || ''}
-      onChange={onChange}
-      placeholder={'[\n  ...\n]'}
-      wordWrap={wordWrap}
-      syntaxColors={syntaxColors}
-    />
+    <NonPrintableHighlighter value={value} isJson={true} detectNonAlphanumeric={true}>
+      <JsonEditor
+        value={value || ''}
+        onChange={onChange}
+        placeholder={'[\n  ...\n]'}
+        wordWrap={wordWrap}
+        syntaxColors={syntaxColors}
+      />
+    </NonPrintableHighlighter>
   ),
   GeoPoint: (value, onChange) => <GeoPointInput value={value} onChange={onChange} />,
   File: (value, onChange) => (