feat: editor image removal QOLs

web/src/components/ArticleEditor.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import type { EditorToolbarItem } from '@nuxt/ui'
 import type { Editor } from '@tiptap/core'
 import { ArticleIndent } from '@/lib/articleIndent'
+import { ArticleImage, findArticleImagePos } from '@/lib/articleImage'
 
 const props = withDefaults(
 	defineProps<{
@@ -18,10 +19,16 @@ const props = withDefaults(
 const emit = defineEmits<{
 	'update:modelValue': [value: string]
 	'request-image': []
+	'request-remove-image': [imageId: number]
 }>()
 
 const editorInstance = ref<Editor | null>(null)
-const extensions = [ArticleIndent]
+const extensions = [
+	ArticleIndent,
+	ArticleImage.configure({
+		onRequestRemove: (imageId: number) => emit('request-remove-image', imageId),
+	}),
+]
 
 function captureEditor(editor: Editor) {
 	editorInstance.value = editor
@@ -198,8 +205,22 @@ defineExpose({
 	focus() {
 		editorInstance.value?.commands.focus()
 	},
-	insertImage(src: string, alt: string) {
-		editorInstance.value?.commands.setImage({ src, alt })
+	insertImage(src: string, alt: string, imageId: number) {
+		editorInstance.value?.commands.setArticleImage({ src, alt, imageId })
+	},
+	removeImage(imageId: number) {
+		const editor = editorInstance.value
+		if (!editor) {
+			return
+		}
+		const pos = findArticleImagePos(editor, imageId)
+		if (pos === null) {
+			return
+		}
+		editor
+			.chain()
+			.deleteRange({ from: pos, to: pos + 1 })
+			.run()
 	},
 })
 </script>
@@ -209,6 +230,7 @@ defineExpose({
 		v-slot="{ editor }"
 		:model-value="props.modelValue"
 		:extensions="extensions"
+		:image="false"
 		content-type="html"
 		:editable="!props.disabled"
 		:ui="{ base: 'article-content' }"