From fd608c6dc0838634e0612001051959991417992b Mon Sep 17 00:00:00 2001
From: Alexander Zakharov <alex.zakharov@sanity.io>
Date: Thu, 18 Jul 2024 17:40:00 +0200
Subject: [PATCH] fix: add a layout component to provide tool options

---
 src/components/Tool/index.tsx       | 15 +++++---------
 src/contexts/ToolOptionsContext.tsx |  4 +---
 src/{index.ts => index.tsx}         | 32 +++++++++++++++++++++--------
 3 files changed, 29 insertions(+), 22 deletions(-)
 rename src/{index.ts => index.tsx} (57%)

diff --git a/src/components/Tool/index.tsx b/src/components/Tool/index.tsx
index 942aaa74..91adb7e6 100644
--- a/src/components/Tool/index.tsx
+++ b/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>
   )
 }
 
diff --git a/src/contexts/ToolOptionsContext.tsx b/src/contexts/ToolOptionsContext.tsx
index 69f3379e..d37a4b34 100644
--- a/src/contexts/ToolOptionsContext.tsx
+++ b/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
diff --git a/src/index.ts b/src/index.tsx
similarity index 57%
rename from src/index.ts
rename to src/index.tsx
index e9414345..a29f5200 100644
--- a/src/index.ts
+++ b/src/index.tsx
@@ -1,10 +1,11 @@
+import React from 'react'
 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'
+import {ToolOptionsProvider} from './contexts/ToolOptionsContext'
 
 const plugin = {
   icon: ImageIcon,
@@ -12,22 +13,36 @@ const plugin = {
   title: 'Media'
 }
 
-export const mediaAssetSource: AssetSource = {
-  ...plugin,
-  component: FormBuilderTool
-}
-
 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]
+        return [
+          ...prev,
+          {
+            ...plugin,
+            component: FormBuilderTool
+          }
+        ]
       }
     },
     image: {
       assetSources: prev => {
-        return [...prev, mediaAssetSource]
+        return [
+          ...prev,
+          {
+            ...plugin,
+            component: FormBuilderTool
+          }
+        ]
       }
     }
   },
@@ -39,7 +54,6 @@ export const media = definePlugin<MediaToolOptions | void>(options => ({
       ...prev,
       {
         ...plugin,
-        options,
         component: Tool
       }
     ]