[design-studio] Prettier JSON preview

packages/design-studio/documentViews/jsonPreview.css

@@ -2,7 +2,6 @@
 
 .root {
   font-family: var(--font-family-monospace);
-  background: var(--code-bg);
   color: var(--code-color);
   padding: var(--medium-padding);
   margin: 0;

packages/design-studio/documentViews/jsonPreview.tsx

@@ -1,7 +1,21 @@
 import React from 'react'
-
+import schema from 'part:@sanity/base/schema'
+import {JasonTheme, ReactJason, sanityItemKeyGenerator} from 'react-jason'
+import github from 'react-jason/themes/github'
+import {sanityKeySort} from './keySorter'
 import styles from './jsonPreview.css'
 
+const theme: JasonTheme = {...github, classes: {root: styles.root}}
+const keySorter = sanityKeySort(schema)
+
 export function JSONPreviewDocumentView(props: any) {
-  return <pre className={styles.root}>{JSON.stringify(props.document.displayed, null, 2)}</pre>
+  return (
+    <ReactJason
+      value={props.document.displayed}
+      theme={theme}
+      itemKeyGenerator={sanityItemKeyGenerator}
+      quoteAttributes={false}
+      sortKeys={keySorter}
+    />
+  )
 }

packages/design-studio/documentViews/keySorter.ts

@@ -0,0 +1,48 @@
+import {ObjectKeySorter} from 'react-jason'
+import {isObjectSchemaType, isTypedObject, Schema} from '@sanity/types'
+
+const reservedKeys = ['_id', '_type', '_key', '_ref', '_weak', '_rev', '_createdAt', '_updatedAt']
+
+export function sanityKeySort(schema: Schema): ObjectKeySorter {
+  let lastParent: Record<string, unknown>
+  let lastFieldOrder: string[]
+
+  // Cache field order for hot path
+  function getFieldOrder(parent: Record<string, unknown>): string[] | undefined {
+    if (lastParent === parent) {
+      return lastFieldOrder
+    }
+
+    if (!isTypedObject(parent) || !schema.has(parent._type)) {
+      return undefined
+    }
+
+    const type = schema.get(parent._type)
+    if (!isObjectSchemaType(type)) {
+      return undefined
+    }
+
+    if (!type.fields) {
+      return []
+    }
+
+    lastParent = parent
+    lastFieldOrder = type.fields.map(field => field.name)
+    return lastFieldOrder
+  }
+
+  return (keyA: string, keyB: string, parent: Record<string, unknown>): number => {
+    const indexA = reservedKeys.indexOf(keyA)
+    const indexB = reservedKeys.indexOf(keyB)
+    if (indexA !== -1 && indexB !== -1) {
+      return indexA - indexB
+    }
+
+    const fieldOrder = getFieldOrder(parent)
+    if (!fieldOrder) {
+      return keyA.localeCompare(keyB)
+    }
+
+    return fieldOrder.indexOf(keyA) - fieldOrder.indexOf(keyB)
+  }
+}

packages/design-studio/package.json

@@ -22,10 +22,12 @@
     "@sanity/desk-tool": "1.150.7",
     "@sanity/google-maps-input": "1.150.1",
     "@sanity/react-hooks": "1.150.7",
+    "@sanity/types": "1.150.7",
     "@sanity/vision": "1.150.6",
     "prop-types": "^15.6.0",
     "react": "16.9.0",
-    "react-dom": "^16.9.0"
+    "react-dom": "^16.9.0",
+    "react-jason": "^1.1.0"
   },
   "devDependencies": {
     "typescript": "^4.0.2",

packages/design-studio/tsconfig.json

@@ -12,6 +12,5 @@
       }
     ]
   },
-  "include": ["../@sanity/base/src/@types/*.d.ts", "./typings/*.d.ts"],
-  "files": ["./schemas/index.ts"]
+  "include": ["./typings/*.d.ts", "../@sanity/base/src/@types/*.d.ts", "./**/*.tsx", "./**/*.ts"]
 }