feat: editor image removal QOLs

web/src/views/EditorView.vue

@@ -221,8 +221,8 @@ function onEditorDrop(event: DragEvent) {
 	openImageUploader(file)
 }
 
-function onImageUploaded(location: string) {
-	editorRef.value?.insertImage(location, '')
+function onImageUploaded(location: string, imageId: number) {
+	editorRef.value?.insertImage(location, '', imageId)
 	toast.add({
 		color: 'success',
 		icon: 'i-lucide-circle-check',
@@ -231,6 +231,37 @@ function onImageUploaded(location: string) {
 	})
 }
 
+async function performRemoveImage(imageId: number) {
+	try {
+		await request(`/v1/article/${articleId}/image/${imageId}`, { method: 'DELETE' })
+	} catch {
+		throw new Error("Couldn't remove the image, so it's still there. Try again in a moment.")
+	}
+	editorRef.value?.removeImage(imageId)
+	toast.add({
+		color: 'success',
+		icon: 'i-lucide-circle-check',
+		title: 'Image removed',
+		description: 'Save to keep this change.',
+	})
+}
+
+async function onRequestRemoveImage(imageId: number) {
+	await overlay
+		.create(ConfirmDialog, {
+			props: {
+				title: 'Remove this image?',
+				description: "This image will be removed from the article. This can't be undone.",
+				confirmLabel: 'Remove image',
+				cancelLabel: 'Cancel',
+				pendingLabel: 'Removing…',
+				tone: 'danger',
+				action: () => performRemoveImage(imageId),
+			},
+		})
+		.open()
+}
+
 function onImageUploaderClosed() {
 	imageUploaderFile.value = null
 }
@@ -426,6 +457,7 @@ onBeforeRouteLeave(async () => {
 					:article-id="articleId"
 					@update:model-value="draft.edit"
 					@request-image="onRequestImage"
+					@request-remove-image="onRequestRemoveImage"
 				>
 					<template #footer>
 						<CharacterCounter