feat(SPA): media field type

web/src/components/EntryForm.vue

@@ -5,14 +5,16 @@ import { computed, nextTick, watch } from 'vue'
 import EntryField from '@/components/EntryField.vue'
 import type { BuiltinField } from '@/lib/contentTypes'
 import type { EntryIssues, EntryValues } from '@/lib/entryForm'
+import type { MediaMap, MediaSummary } from '@/lib/mediaField'
 import { groupFields } from '@/lib/entryLayout'
 
 const FOCUSABLE =
-	'input:not([type="hidden"]), textarea, [role="spinbutton"], [role="switch"], [role="combobox"]'
+	'[data-field-focus], input:not([type="hidden"]), textarea, [role="spinbutton"], [role="switch"], [role="combobox"]'
 
 const props = defineProps<{
 	fields: BuiltinField[]
 	values: EntryValues
+	images: MediaMap
 	issues: EntryIssues
 	firstIssue: string | null
 	focusToken: number
@@ -25,7 +27,10 @@ const props = defineProps<{
 	updatedLine: string
 }>()
 
-const emit = defineEmits<{ update: [key: string, value: unknown]; submit: [] }>()
+const emit = defineEmits<{
+	update: [key: string, value: unknown, image?: MediaSummary | null]
+	submit: []
+}>()
 
 const rows = computed(() => groupFields(props.fields))
 
@@ -67,10 +72,11 @@ watch(() => props.focusToken, focusFirstIssue)
 				:key="field.key"
 				:field="field"
 				:value="values[field.key]"
+				:image="images[field.key] ?? null"
 				:issue="issues[field.key]"
 				:is-default="isDefault(field)"
 				:disabled="locked"
-				@update="(key, value) => emit('update', key, value)"
+				@update="(key, value, image) => emit('update', key, value, image)"
 			/>
 		</div>