[field] Use Sanity preview component for fallback diffs

packages/@sanity/field/src/diff/changes/FieldChange.tsx

@@ -1,6 +1,7 @@
 import {useDocumentOperation} from '@sanity/react-hooks'
 import React, {useCallback, useContext} from 'react'
 import {FieldChangeNode, OperationsAPI} from '../../types'
+import {FallbackDiff} from '../fallback/FallbackDiff'
 import {ChangeHeader} from './ChangeHeader'
 import {DiffErrorBoundary} from './DiffErrorBoundary'
 import {DocumentChangeContext} from './DocumentChangeContext'
@@ -10,8 +11,6 @@ import {undoChange} from './undoChange'
 import styles from './FieldChange.css'
 import {ValueError} from './ValueError'
 
-const FallbackDiff = () => <div>Missing diff</div>
-
 export function FieldChange({change}: {change: FieldChangeNode}): React.ReactElement {
   const DiffComponent = change.diffComponent || FallbackDiff
   const {documentId, schemaType} = useContext(DocumentChangeContext)

packages/@sanity/field/src/diff/fallback/FallbackDiff.tsx

@@ -1,30 +1,19 @@
-import * as React from 'react'
+import React from 'react'
+import Preview from 'part:@sanity/base/preview'
 import {DiffComponent} from '../../types'
+import {Change} from '../components'
 
-import styles from './FallbackDiff.css'
+function FallbackPreview({value, schemaType}) {
+  return <Preview type={schemaType} value={value} layout="default" />
+}
 
-export const FallbackDiff: DiffComponent = ({diff}) => {
+export const FallbackDiff: DiffComponent<any> = ({diff, schemaType}) => {
   return (
-    <div className={styles.root}>
-      <div>
-        <strong>
-          Missing diff component (<code>{diff.type}</code>)
-        </strong>
-      </div>
-
-      <details>
-        <summary>JSON</summary>
-
-        <h2>From</h2>
-        <pre>
-          <code>{JSON.stringify(diff.fromValue, null, 2)}</code>
-        </pre>
-
-        <h2>To</h2>
-        <pre>
-          <code>{JSON.stringify(diff.toValue, null, 2)}</code>
-        </pre>
-      </details>
-    </div>
+    <Change
+      diff={diff}
+      schemaType={schemaType}
+      previewComponent={FallbackPreview}
+      layout="inline"
+    />
   )
 }