feat: image variants per image

web/src/views/EditorView.vue

@@ -20,7 +20,10 @@ import { useArticleDraft } from '@/composables/useArticleDraft'
 import type { MediaItem } from '@/composables/useMedia'
 import { bodyImageCount, bodyImageIds } from '@/lib/bodyImageIds'
 import { formatSize } from '@/lib/mediaFormat'
+import { useCanManageVariants } from '@/composables/useCanManageVariants'
+import { bodyHasVariantImage } from '@/lib/variants/blockVariant'
 import { useSeenImagesStore } from '@/stores/seenImages'
+import { useVariantCatalogStore } from '@/stores/variantCatalog'
 
 const SKELETON_DELAY_MS = 150
 const BODY_MAX_LENGTH = 10000
@@ -36,6 +39,8 @@ const toast = useLocalizedToast()
 const articleId = Number(route.params.id)
 const draft = useArticleDraft(articleId)
 const seenImages = useSeenImagesStore()
+const variantCatalog = useVariantCatalogStore()
+const canManageVariants = useCanManageVariants()
 
 const loadState = ref<LoadState>('loading')
 const showSkeleton = ref(false)
@@ -69,6 +74,9 @@ async function loadArticle() {
 		article.value = result
 		draft.load(result.body, new Date(result.updated_at))
 		loadState.value = 'loaded'
+		if (canManageVariants.value && bodyHasVariantImage(result.body)) {
+			variantCatalog.load()
+		}
 	} catch (err) {
 		if (err instanceof ApiError && err.status === 404) {
 			loadState.value = 'notFound'
@@ -284,9 +292,9 @@ function onImageUploaded(item: MediaItem) {
 	announceImageAdded()
 }
 
-function onImageInserted(item: MediaItem, alt: string) {
+function onImageInserted(item: MediaItem, alt: string, src: string) {
 	seenImages.remember([item])
-	editorRef.value?.insertImage(item.url, alt, item.id)
+	editorRef.value?.insertImage(src, alt, item.id)
 	announceImageAdded()
 }