Allow to edit media details from document

src/components/EditAssetTool/index.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import {PortalProvider, ThemeProvider, ToastProvider, studioTheme} from '@sanity/ui'
+import {useEffect, useState} from 'react'
+import {AssetSourceComponentProps, SanityDocument, useColorScheme, useFormValue} from 'sanity'
+import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
+import useKeyPress from '../../hooks/useKeyPress'
+import useVersionedClient from '../../hooks/useVersionedClient'
+import GlobalStyle from '../../styled/GlobalStyles'
+import ReduxProvider from '../ReduxProvider'
+import {useDispatch} from 'react-redux'
+import {assetsActions} from '../../modules/assets'
+import {dialogActions} from '../../modules/dialog'
+import constructFilter from '../../utils/constructFilter'
+import Dialogs from '../Dialogs'
+
+/**
+ * Dialog for editing a single asset
+ */
+const EditAssetDialog = (props: AssetSourceComponentProps) => {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    const constructedFilter = constructFilter({
+      assetTypes: ['file', 'image'],
+      searchFacets: []
+    })
+    const params = {
+      documentId: props.selectedAssets[0]?._id
+    }
+    dispatch(
+      assetsActions.fetchRequest({
+        params,
+        queryFilter: constructedFilter
+      })
+    )
+    dispatch(dialogActions.showAssetEdit({assetId: props.selectedAssets[0]._id}))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return <Dialogs />
+}
+
+const EditAssetTool = (props: AssetSourceComponentProps) => {
+  const {onClose} = props
+
+  const portalElement = useRootPortalElement()
+
+  // Get current Sanity document
+  const currentDocument = useFormValue([]) as SanityDocument
+
+  // Close on escape key press
+  useKeyPress('escape', onClose)
+
+  const client = useVersionedClient()
+  const {scheme} = useColorScheme()
+
+  return (
+    <ReduxProvider
+      assetType={props?.assetType}
+      client={client}
+      document={currentDocument}
+      selectedAssets={props?.selectedAssets}
+    >
+      <ThemeProvider scheme={scheme} theme={studioTheme}>
+        <ToastProvider>
+          <AssetBrowserDispatchProvider onSelect={props?.onSelect}>
+            <GlobalStyle />
+            <PortalProvider element={portalElement}>
+              <EditAssetDialog {...props} />
+            </PortalProvider>
+          </AssetBrowserDispatchProvider>
+        </ToastProvider>
+      </ThemeProvider>
+    </ReduxProvider>
+  )
+}
+
+export default EditAssetTool
+
+const useRootPortalElement = () => {
+  const [container] = useState(() => document.createElement('div'))
+
+  useEffect(() => {
+    container.classList.add('media-portal')
+    document.body.appendChild(container)
+    return () => {
+      document.body.removeChild(container)
+    }
+  }, [container])
+
+  return container
+}

src/index.ts

@@ -1,6 +1,7 @@
-import {definePlugin, Tool as SanityTool} from 'sanity'
-import {ImageIcon} from '@sanity/icons'
+import {EditIcon, ImageIcon} from '@sanity/icons'
 import type {AssetSource} from 'sanity'
+import {definePlugin, Tool as SanityTool} from 'sanity'
+import EditAssetTool from './components/EditAssetTool'
 import FormBuilderTool from './components/FormBuilderTool'
 import Tool from './components/Tool'
 import mediaTag from './schemas/tag'
@@ -16,6 +17,13 @@ export const mediaAssetSource: AssetSource = {
   component: FormBuilderTool
 }
 
+const editMediaAssetSource: AssetSource = {
+  icon: EditIcon,
+  title: 'Edit Media',
+  name: 'edit-media',
+  component: EditAssetTool
+}
+
 const tool = {
   ...plugin,
   component: Tool
@@ -26,12 +34,12 @@ export const media = definePlugin({
   form: {
     file: {
       assetSources: prev => {
-        return [...prev, mediaAssetSource]
+        return [...prev, mediaAssetSource, editMediaAssetSource]
       }
     },
     image: {
       assetSources: prev => {
-        return [...prev, mediaAssetSource]
+        return [...prev, mediaAssetSource, editMediaAssetSource]
       }
     }
   },