feat: richer preview component

Author: SimeonGriggs

src/PreviewCode.tsx

@@ -1,6 +1,6 @@
 import {Suspense} from 'react'
 import styled from 'styled-components'
-import {Box, Card} from '@sanity/ui'
+import {Label, Box, Card, Flex, Text} from '@sanity/ui'
 import {CodeInputValue, CodeSchemaType} from './types'
 import {PreviewProps} from 'sanity'
 import {useCodeMirror} from './codemirror/useCodeMirror'
@@ -28,12 +28,31 @@ export default function PreviewCode(props: PreviewCodeProps) {
   return (
     <PreviewContainer>
       <Card padding={4}>
+        {selection?.filename || selection?.language ? (
+          <Card
+            paddingBottom={4}
+            marginBottom={selection.code ? 4 : 0}
+            borderBottom={!!selection.code}
+          >
+            <Flex align="center" justify="flex-end">
+              {selection?.filename ? (
+                <Box flex={1}>
+                  <Text>
+                    <code>{selection.filename}</code>
+                  </Text>
+                </Box>
+              ) : null}
+              {selection?.language ? <Label muted>{selection.language}</Label> : null}
+            </Flex>
+          </Card>
+        ) : null}
         {CodeMirror && (
           <Suspense fallback={<Card padding={2}>Loading code preview...</Card>}>
             <CodeMirror
               readOnly
               editable={false}
               value={selection?.code || ''}
+              highlightLines={selection?.highlightedLines || []}
               basicSetup={{
                 lineNumbers: false,
                 foldGutter: false,

src/__workshop__/index.ts

@@ -8,6 +8,11 @@ export default defineScope({
       title: 'Props',
       component: lazy(() => import('./props')),
     },
+    {
+      name: 'preview',
+      title: 'Preview',
+      component: lazy(() => import('./preview')),
+    },
     {
       name: 'lazy',
       title: 'Lazy',

src/__workshop__/preview.tsx

@@ -0,0 +1,24 @@
+import {Box, Container} from '@sanity/ui'
+import {useWorkshopSanity} from '@sanity/ui-workshop-plugin-sanity'
+import {isObjectSchemaType, useSchema} from 'sanity'
+import {DocumentFormProvider, SelectedInput} from 'sanity-extra'
+
+export default function PreviewStory() {
+  const {onPatchEvent} = useWorkshopSanity()
+  const schema = useSchema()
+  const schemaType = schema.get('test')
+
+  if (!isObjectSchemaType(schemaType)) {
+    return <>Not an object type</>
+  }
+
+  return (
+    <DocumentFormProvider documentId="test" onPatchEvent={onPatchEvent} schemaType={schemaType}>
+      <Container width={1}>
+        <Box paddingX={4} paddingY={[5, 6, 7]}>
+          <SelectedInput selectedPath={['content']} />
+        </Box>
+      </Container>
+    </DocumentFormProvider>
+  )
+}

test/schema.ts

@@ -15,6 +15,11 @@ const testType = defineType({
       name: 'code',
       title: 'Code',
     },
+    {
+      type: 'array',
+      name: 'content',
+      of: [{name: 'code', type: 'code', options: {withFilename: true}}],
+    },
   ],
 })