fix: preview component now uses v3 api correctly

Previously the code input preview did not appear in Portable Text Editor.
This fixes it.

Index also exports the underlying components now.

README.md

@@ -182,7 +182,7 @@ npm run link-watch
 In another shell, `cd` to your test studio and run:
 
 ```bash
-npx yalc add @sanity/code-input --link && yarn install
+npx yalc add @sanity/code-input && npx yalc link @sanity/code-input && npm install
 ```
 
 Now, changes in this repo will be automatically built and pushed to the studio,
@@ -191,4 +191,4 @@ triggering hotreload. Yalc avoids issues with react-hooks that are typical when
 ### About build & watch
 
 This plugin uses [@sanity/plugin-sdk](https://github.com/sanity-io/plugin-sdk)
-with default configuration for build & watch scripts.
+with default configuration for build & watch scripts.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/code-input",
-  "version": "3.0.0-v3-studio.1",
+  "version": "3.0.0-v3-studio.2",
   "description": "Ace editor for editing code",
   "source": "./src/index.ts",
   "exports": {
@@ -54,7 +54,7 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@parcel/packager-ts": "^2.6.0",
     "@parcel/transformer-typescript-types": "^2.6.0",
-    "@sanity/plugin-kit": "^0.0.1-studio-v3.3",
+    "@sanity/plugin-kit": "^0.0.1-studio-v3.4",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.12.0",
     "@typescript-eslint/parser": "^5.12.0",

src/schema.tsx

@@ -1,22 +1,19 @@
-import React from 'react'
 import {CodeBlockIcon} from '@sanity/icons'
 import {CodeInput} from './CodeInput'
 import PreviewCode, {PreviewCodeProps} from './PreviewCode'
 import {getMedia} from './getMedia'
+import {defineType} from 'sanity'
 
 export type {CodeInputProps, CodeSchemaType} from './CodeInput'
 
 export type {CodeInputLanguage, CodeInputValue} from './types'
+export type {PreviewCode, PreviewCodeProps, CodeInput}
 
-const Preview = (props: PreviewCodeProps) => {
-  return <PreviewCode {...props} />
-}
-
-export default {
+export default defineType({
   name: 'code',
   type: 'object',
   title: 'Code',
-  components: {input: CodeInput},
+  components: {input: CodeInput, preview: PreviewCode},
   icon: CodeBlockIcon,
   fields: [
     {
@@ -62,8 +59,7 @@ export default {
       return {
         title: value.filename || (value.language || 'unknown').toUpperCase(),
         media: getMedia(value?.language),
-        extendedPreview: <Preview value={value} />,
       }
     },
   },
-}
+})