feat: image upload on articles

web/src/views/EditorView.vue

@@ -11,6 +11,7 @@ import SaveStatus from '@/components/SaveStatus.vue'
 import PublishControl from '@/components/PublishControl.vue'
 import CharacterCounter from '@/components/CharacterCounter.vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import ImageUploader from '@/components/ImageUploader.vue'
 import { ApiError, authRedirectPending, useApi } from '@/composables/useApi'
 import type { Article } from '@/composables/useArticles'
 import { useArticleDraft } from '@/composables/useArticleDraft'
@@ -35,6 +36,9 @@ const article = ref<Article | null>(null)
 const previewOn = ref(false)
 const detailsOpen = ref(false)
 const publishPending = ref<string | undefined>(undefined)
+const editorRef = ref<InstanceType<typeof ArticleEditor> | null>(null)
+const imageUploaderOpen = ref(false)
+const imageUploaderFile = ref<File | null>(null)
 let skeletonTimer: ReturnType<typeof setTimeout> | null = null
 
 function clearSkeletonTimer() {
@@ -73,15 +77,10 @@ const bodyLength = computed(() => draft.body.value.length)
 const overLimit = computed(() => bodyLength.value > BODY_MAX_LENGTH)
 
 const saveEnabled = computed(
-	() =>
-		draft.state.value === 'dirty' &&
-		!overLimit.value &&
-		loadState.value === 'loaded',
+	() => draft.state.value === 'dirty' && !overLimit.value && loadState.value === 'loaded',
 )
 
-const publishDisabled = computed(
-	() => overLimit.value || draft.state.value === 'offline',
-)
+const publishDisabled = computed(() => overLimit.value || draft.state.value === 'offline')
 
 async function runSave() {
 	const outcome = await draft.save()
@@ -205,6 +204,37 @@ async function handleDelete() {
 		.open()
 }
 
+function openImageUploader(file: File | null) {
+	imageUploaderFile.value = file
+	imageUploaderOpen.value = true
+}
+
+function onRequestImage() {
+	openImageUploader(null)
+}
+
+function onEditorDrop(event: DragEvent) {
+	const file = event.dataTransfer?.files?.[0]
+	if (!file) {
+		return
+	}
+	openImageUploader(file)
+}
+
+function onImageUploaded(location: string) {
+	editorRef.value?.insertImage(location, '')
+	toast.add({
+		color: 'success',
+		icon: 'i-lucide-circle-check',
+		title: 'Image added',
+		description: 'Save to keep it in the article.',
+	})
+}
+
+function onImageUploaderClosed() {
+	imageUploaderFile.value = null
+}
+
 function onKeydown(event: KeyboardEvent) {
 	if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
 		event.preventDefault()
@@ -248,21 +278,14 @@ onBeforeRouteLeave(async () => {
 	<DashboardShell mobile-title="Edit article" full-bleed>
 		<template v-if="loadState === 'loaded'" #breadcrumb>
 			<UBreadcrumb
-				:items="[
-					{ label: 'Articles', to: '/article' },
-					{ label: article?.title ?? '' },
-				]"
+				:items="[{ label: 'Articles', to: '/article' }, { label: article?.title ?? '' }]"
 				color="neutral"
 				class="hidden lg:block"
 			/>
 		</template>
 
 		<ErrorView v-if="loadState === 'notFound'" kind="article-not-found" />
-		<ErrorView
-			v-else-if="loadState === 'error'"
-			kind="error"
-			@retry="loadArticle"
-		/>
+		<ErrorView v-else-if="loadState === 'error'" kind="error" @retry="loadArticle" />
 
 		<div
 			v-else-if="loadState === 'loading' && showSkeleton"
@@ -281,10 +304,7 @@ onBeforeRouteLeave(async () => {
 						aria-label="Back to Articles"
 						@click="goBack"
 					/>
-					<USkeleton
-						class="h-5 w-80 rounded-none"
-						data-testid="skeleton-title"
-					/>
+					<USkeleton class="h-5 w-80 rounded-none" data-testid="skeleton-title" />
 					<USkeleton class="h-5.5 w-15 rounded-none" />
 				</div>
 				<div
@@ -309,10 +329,7 @@ onBeforeRouteLeave(async () => {
 			</div>
 		</div>
 
-		<div
-			v-else-if="loadState === 'loaded' && article"
-			class="flex min-h-0 flex-1 flex-col"
-		>
+		<div v-else-if="loadState === 'loaded' && article" class="flex min-h-0 flex-1 flex-col">
 			<div
 				class="flex flex-shrink-0 flex-wrap items-center gap-3 border-b border-default bg-default px-6 py-3.5"
 			>
@@ -324,9 +341,7 @@ onBeforeRouteLeave(async () => {
 					aria-label="Back to Articles"
 					@click="goBack"
 				/>
-				<div
-					class="flex min-w-50 flex-1 flex-wrap items-center gap-2.5"
-				>
+				<div class="flex min-w-50 flex-1 flex-wrap items-center gap-2.5">
 					<h1
 						class="text-[1.125rem]/6.5 font-semibold text-highlighted"
 						title="The title can't be changed after creation."
@@ -400,39 +415,42 @@ onBeforeRouteLeave(async () => {
 				<div
 					class="hidden w-70 flex-shrink-0 border-l border-default bg-default p-5 lg:block"
 				>
-					<ArticleDetails
-						:article="article"
-						v-model:open="detailsOpen"
-					/>
+					<ArticleDetails :article="article" v-model:open="detailsOpen" />
 				</div>
 			</div>
-			<ArticleEditor
-				v-else
-				class="min-h-0 flex-1"
-				:model-value="draft.body.value"
-				:article-id="articleId"
-				@update:model-value="draft.edit"
-			>
-				<template #footer>
-					<CharacterCounter
-						variant="footer"
-						:value="bodyLength"
-						:max="BODY_MAX_LENGTH"
-					/>
-				</template>
-				<template #aside>
-					<div class="h-full border-l border-default bg-default p-5">
-						<ArticleDetails
-							:article="article"
-							v-model:open="detailsOpen"
+			<div v-else class="min-h-0 flex-1" @dragover.prevent @drop.prevent="onEditorDrop">
+				<ArticleEditor
+					ref="editorRef"
+					class="h-full"
+					:model-value="draft.body.value"
+					:article-id="articleId"
+					@update:model-value="draft.edit"
+					@request-image="onRequestImage"
+				>
+					<template #footer>
+						<CharacterCounter
+							variant="footer"
+							:value="bodyLength"
+							:max="BODY_MAX_LENGTH"
 						/>
-					</div>
-				</template>
-			</ArticleEditor>
+					</template>
+					<template #aside>
+						<div class="h-full border-l border-default bg-default p-5">
+							<ArticleDetails :article="article" v-model:open="detailsOpen" />
+						</div>
+					</template>
+				</ArticleEditor>
+			</div>
 
-			<div
-				class="flex flex-shrink-0 gap-2 border-t border-default bg-default p-3 lg:hidden"
-			>
+			<ImageUploader
+				v-model:open="imageUploaderOpen"
+				:article-id="articleId"
+				:initial-file="imageUploaderFile"
+				@uploaded="onImageUploaded"
+				@close="onImageUploaderClosed"
+			/>
+
+			<div class="flex flex-shrink-0 gap-2 border-t border-default bg-default p-3 lg:hidden">
 				<UButton
 					icon="i-lucide-panel-right"
 					color="neutral"