fix: add a layout component to provide tool options

sanity-io · Jul 19, 2024 · fd608c6 · fd608c6
1 parent ae03251
commit fd608c6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git 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
@@ -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 → src/index.tsx b/src/index.ts → src/index.tsx
@@ -1,33 +1,48 @@
+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,
   name: 'media',
   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
       }
     ]