[vision] Replace JSON viewer (#1020)

This replaces the JS(ON)-viewer in Vision with the [react-json-view](https://www.npmjs.com/package/react-json-view) component. The previous had formatting errors (strings in arrays). This also features a copy-function so that you can actually get sensible data out of vision. [vision] Fix visual hover bug
sanity-io · Oct 16, 2018 · 63c89eb · 63c89eb
1 parent 5cecffe
commit 63c89eb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 37 deletions.
diff --git a/packages/@sanity/vision/package.json b/packages/@sanity/vision/package.json
@@ -21,12 +21,11 @@
   ],
   "dependencies": {
     "classnames": "^2.2.5",
-    "json-lexer": "^1.1.1",
     "moment": "^2.19.1",
     "query-string": "^4.3.2",
     "react-codemirror2": "^1.0.0",
     "react-icon-base": "^2.1.2",
-    "react-json-inspector": "^7.1.1",
+    "react-json-view": "^1.19.1",
     "react-spinner": "^0.2.6",
     "react-split-pane": "^0.1.63"
   },

diff --git a/packages/@sanity/vision/src/components/JsonDump.js b/packages/@sanity/vision/src/components/JsonDump.js
@@ -1,41 +1,14 @@
 /* eslint-disable react/prop-types, react/no-multi-comp */
-import React from 'react'
+import React, {Fragment} from 'react'
 import PropTypes from 'prop-types'
-import tokenize from 'json-lexer'
+import ReactJson from 'react-json-view'
 
-const punctuator = token => <span className={token.className}>{token.raw}</span>
-const number = token => <span className={token.className}>{token.raw}</span>
-const string = token => <span className={token.className}>{token.raw}</span>
-const key = token => <span className={token.className}>{token.raw.slice(1, -1)}</span>
-const formatters = {punctuator, key, string, number}
-
-class JsonBlock extends React.PureComponent {
+class JsonBlock extends React.Component {
   render() {
     const styles = this.context.styles.jsonDump
-    const json = JSON.stringify(this.props.data, null, 2)
-    const tokens = tokenize(json).map((token, i, arr) => {
-      const prevToken = i === 0 ? token : arr[i - 1]
-      if (
-        token.type === 'string' &&
-        prevToken.type === 'whitespace' &&
-        /^\n\s+$/.test(prevToken.value)
-      ) {
-        token.type = 'key'
-      }
-
-      return token
-    })
-
     return (
       <pre className={styles.block}>
-        {tokens.map((token, i) => {
-          const Formatter = formatters[token.type]
-          return Formatter ? (
-            <Formatter key={i} className={styles[token.type]} raw={token.raw} />
-          ) : (
-            token.raw
-          )
-        })}
+        <ReactJson displayDataTypes={false} src={this.props.data} />
       </pre>
     )
   }
@@ -51,8 +24,10 @@ export default function JsonDump(props) {
   }
 
   return (
-    <code>
-      {props.data.map((row, i) => <JsonBlock key={row._id || row.eventId || i} data={row} />)}
-    </code>
+    <Fragment>
+      {props.data.map((row, i) => (
+        <JsonBlock key={row._id || row.eventId || i} data={row} />
+      ))}
+    </Fragment>
   )
 }
diff --git a/packages/@sanity/vision/src/css/jsonInspector.css b/packages/@sanity/vision/src/css/jsonInspector.css
@@ -59,7 +59,11 @@
   margin-left: -16px;
 }
 
-:global .sanity-vision .json-inspector__leaf_composite .json-inspector__leaf_expanded > .json-inspector__line::before {
+:global
+  .sanity-vision
+  .json-inspector__leaf_composite
+  .json-inspector__leaf_expanded
+  > .json-inspector__line::before {
   content: '▼ ';
 }
 
@@ -124,3 +128,7 @@
 :global .sanity-vision .json-inspector__show-original:hover::after {
   content: ' expand';
 }
+
+:global .sanity-vision .copy-icon svg {
+  font-size: 14px !important;
+}