Add ToolOptionsProvider in the Studio layout component

src/components/Tool/index.tsx

@@ -1,17 +1,12 @@
 import {Flex} from '@sanity/ui'
-import React, {ComponentProps} from 'react'
+import React from 'react'
 import Browser from '../Browser'
-import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
-import {Tool as SanityTool} from 'sanity'
-import {MediaToolOptions} from '@types'
 
-const Tool = ({tool: {options}}: ComponentProps<SanityTool<MediaToolOptions>['component']>) => {
+const Tool = () => {
   return (
-    <ToolOptionsProvider options={options}>
-      <Flex direction="column" height="fill" flex={1}>
-        <Browser />
-      </Flex>
-    </ToolOptionsProvider>
+    <Flex direction="column" height="fill" flex={1}>
+      <Browser />
+    </Flex>
   )
 }
 

src/contexts/ToolOptionsContext.tsx

@@ -9,7 +9,7 @@ type ContextProps = {
 const ToolOptionsContext = createContext<ContextProps | null>(null)
 
 type Props = {
-  options?: MediaToolOptions
+  options?: MediaToolOptions | void
 }
 
 export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props>) => {
@@ -30,5 +30,3 @@ export const useToolOptions = () => {
 
   return context
 }
-
-export default ToolOptionsContext

src/index.ts

@@ -1,47 +1,2 @@
-import {definePlugin} from 'sanity'
-import {ImageIcon} from '@sanity/icons'
-import type {AssetSource} from 'sanity'
-import FormBuilderTool from './components/FormBuilderTool'
-import Tool from './components/Tool'
-import mediaTag from './schemas/tag'
-import {MediaToolOptions} from '@types'
-
-const plugin = {
-  icon: ImageIcon,
-  name: 'media',
-  title: 'Media'
-}
-
-export const mediaAssetSource: AssetSource = {
-  ...plugin,
-  component: FormBuilderTool
-}
-
-export const media = definePlugin<MediaToolOptions | void>(options => ({
-  name: 'media',
-  form: {
-    file: {
-      assetSources: prev => {
-        return [...prev, mediaAssetSource]
-      }
-    },
-    image: {
-      assetSources: prev => {
-        return [...prev, mediaAssetSource]
-      }
-    }
-  },
-  schema: {
-    types: [mediaTag]
-  },
-  tools: prev => {
-    return [
-      ...prev,
-      {
-        ...plugin,
-        options,
-        component: Tool
-      }
-    ]
-  }
-}))
+export {media, mediaAssetSource} from './plugin'
+export type {MediaToolOptions} from '@types'

src/plugin.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import {AssetSource, Tool as SanityTool, definePlugin} from 'sanity'
+import {ImageIcon} from '@sanity/icons'
+import FormBuilderTool from './components/FormBuilderTool'
+import Tool from './components/Tool'
+import mediaTag from './schemas/tag'
+import {MediaToolOptions} from '@types'
+import {ToolOptionsProvider} from './contexts/ToolOptionsContext'
+
+const plugin = {
+  icon: ImageIcon,
+  name: 'media',
+  title: 'Media'
+}
+
+export const mediaAssetSource = {
+  ...plugin,
+  component: FormBuilderTool
+} satisfies AssetSource
+
+const tool = {
+  ...plugin,
+  component: Tool
+} satisfies SanityTool
+
+export const media = definePlugin<MediaToolOptions | void>(options => ({
+  name: 'media',
+  studio: {
+    components: {
+      layout: props => (
+        <ToolOptionsProvider options={options}>{props.renderDefault(props)}</ToolOptionsProvider>
+      )
+    }
+  },
+  form: {
+    file: {
+      assetSources: prev => {
+        return [...prev, mediaAssetSource]
+      }
+    },
+    image: {
+      assetSources: prev => {
+        return [...prev, mediaAssetSource]
+      }
+    }
+  },
+  schema: {
+    types: [mediaTag]
+  },
+  tools: prev => {
+    return [...prev, tool]
+  }
+}))