(feat) Option to insert multiple images

.eslintignore

@@ -3,4 +3,5 @@ commitlint.config.js
 lib
 lint-staged.config.js
 package.config.ts
-*.js
+*.js
+dist

src/components/Browser/index.tsx

@@ -28,6 +28,7 @@ type Props = {
   onClose?: AssetSourceComponentProps['onClose']
   onSelect?: AssetSourceComponentProps['onSelect']
   selectedAssets?: AssetSourceComponentProps['selectedAssets']
+  selectionType?: AssetSourceComponentProps['selectionType'] | 'multiple'
 }
 
 const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose']}) => {
@@ -140,6 +141,7 @@ const Browser = (props: Props) => {
       client={client}
       document={props?.document}
       selectedAssets={props?.selectedAssets}
+      selectionType={props?.selectionType}
     >
       <ThemeProvider scheme={scheme} theme={studioTheme}>
         <ToastProvider>

src/components/CardAsset/index.tsx

@@ -97,6 +97,7 @@ const CardAsset = (props: Props) => {
   const dispatch = useDispatch()
   const lastPicked = useTypedSelector(state => state.assets.lastPicked)
   const item = useTypedSelector(state => selectAssetById(state, id))
+  const selectionType = useTypedSelector(state => state.selectionType)
 
   const asset = item?.asset
   const error = item?.error
@@ -115,7 +116,7 @@ const CardAsset = (props: Props) => {
   const handleAssetClick = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation()
 
-    if (onSelect) {
+    if (onSelect && selectionType !== 'multiple') {
       onSelect([
         {
           kind: 'assetDocumentId',
@@ -136,7 +137,7 @@ const CardAsset = (props: Props) => {
   const handleContextActionClick = (e: MouseEvent) => {
     e.stopPropagation()
 
-    if (onSelect) {
+    if (onSelect && selectionType !== 'multiple') {
       dispatch(dialogActions.showAssetEdit({assetId: asset._id}))
     } else if (shiftPressed.current && !picked) {
       dispatch(assetsActions.pickRange({startId: lastPicked || asset._id, endId: asset._id}))
@@ -224,7 +225,7 @@ const CardAsset = (props: Props) => {
           scheme={scheme}
           style={{opacity: opacityContainer}}
         >
-          {onSelect ? (
+          {onSelect && selectionType !== 'multiple' ? (
             <EditIcon
               style={{
                 flexShrink: 0,

src/components/PickedBar/index.tsx

@@ -1,15 +1,18 @@
 import {Box, Button, Flex, Label} from '@sanity/ui'
 import pluralize from 'pluralize'
-import React from 'react'
+import React, {Fragment} from 'react'
 import {useDispatch} from 'react-redux'
 import {useColorScheme} from 'sanity'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions, selectAssetsPicked} from '../../modules/assets'
 import {dialogActions} from '../../modules/dialog'
 import {getSchemeColor} from '../../utils/getSchemeColor'
+import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 
 const PickedBar = () => {
+  const selectionType = useTypedSelector(state => state.selectionType)
+  const {onSelect} = useAssetSourceActions()
   const {scheme} = useColorScheme()
 
   // Redux
@@ -25,6 +28,18 @@ const PickedBar = () => {
     dispatch(dialogActions.showConfirmDeleteAssets({assets: assetsPicked}))
   }
 
+  const handleInsertPicked = () => {
+    if (!onSelect) {
+      // This should never happen, since the rendering logic makes sure onSelect is defined
+      console.error('onSelect is not defined')
+      return
+    }
+
+    const assetIds = assetsPicked.map(({asset}) => asset._id)
+    const onSelectItems = assetIds.map(id => ({kind: 'assetDocumentId' as const, value: id}))
+    onSelect(onSelectItems)
+  }
+
   if (assetsPicked.length === 0) {
     return null
   }
@@ -48,27 +63,35 @@ const PickedBar = () => {
           </Label>
         </Box>
 
-        {/* Deselect button */}
-        <Button
-          mode="bleed"
-          onClick={handlePickClear}
-          padding={2}
-          style={{background: 'none', boxShadow: 'none'}}
-          tone="default"
-        >
-          <Label size={0}>Deselect</Label>
-        </Button>
+        {onSelect && selectionType === 'multiple' ? (
+          <Fragment>
+            <Button tone="primary" onClick={handleInsertPicked} padding={2}>
+              <Label size={0}>Insert images</Label>
+            </Button>
+          </Fragment>
+        ) : (
+          <Fragment>
+            <Button
+              mode="bleed"
+              onClick={handlePickClear}
+              padding={2}
+              style={{background: 'none', boxShadow: 'none'}}
+              tone="default"
+            >
+              <Label size={0}>Deselect</Label>
+            </Button>
 
-        {/* Delete button */}
-        <Button
-          mode="bleed"
-          onClick={handleDeletePicked}
-          padding={2}
-          style={{background: 'none', boxShadow: 'none'}}
-          tone="critical"
-        >
-          <Label size={0}>Delete</Label>
-        </Button>
+            <Button
+              mode="bleed"
+              onClick={handleDeletePicked}
+              padding={2}
+              style={{background: 'none', boxShadow: 'none'}}
+              tone="critical"
+            >
+              <Label size={0}>Delete</Label>
+            </Button>
+          </Fragment>
+        )}
       </Flex>
     </Flex>
   )

src/components/ReduxProvider/index.tsx

@@ -18,6 +18,7 @@ type Props = {
   client: SanityClient
   document?: SanityDocument
   selectedAssets?: AssetSourceComponentProps['selectedAssets']
+  selectionType?: AssetSourceComponentProps['selectionType'] | 'multiple'
 }
 
 class ReduxProvider extends Component<Props> {
@@ -59,7 +60,8 @@ class ReduxProvider extends Component<Props> {
           assets: props.selectedAssets || [],
           document: props.document,
           documentAssetIds: props.document ? getDocumentAssetIds(props.document) : []
-        }
+        },
+        selectionType: props?.selectionType || 'single'
       }
     })
     epicMiddleware.run(rootEpic)

src/modules/index.ts

@@ -30,6 +30,7 @@ import dialogReducer, {
   dialogTagDeleteEpic
 } from './dialog'
 import selectedReducer from './selected'
+import selectionTypeReducer from './selectionType'
 import notificationsReducer, {
   notificationsAssetsDeleteErrorEpic,
   notificationsAssetsDeleteCompleteEpic,
@@ -109,6 +110,7 @@ const reducers = {
   notifications: notificationsReducer,
   search: searchReducer,
   selected: selectedReducer,
+  selectionType: selectionTypeReducer,
   tags: tagsReducer,
   uploads: uploadsReducer
 }

src/modules/selectionType/index.ts

@@ -0,0 +1,14 @@
+import {createSlice} from '@reduxjs/toolkit'
+import {AssetSourceComponentProps} from 'sanity'
+
+type SelectionTypeReducerState = AssetSourceComponentProps['selectionType'] | 'multiple'
+
+const initialState = 'single' as SelectionTypeReducerState
+
+const selectionTypeSlice = createSlice({
+  name: 'selectionType',
+  initialState,
+  reducers: {}
+})
+
+export default selectionTypeSlice.reducer