feat: image upload on articles

web/src/components/ArticleEditor.vue

@@ -42,9 +42,7 @@ function currentBlockLabel(editor: Editor) {
 }
 
 function isDefaultAlignment(editor: Editor) {
-	return !['center', 'right', 'justify'].some((align) =>
-		editor.isActive({ textAlign: align }),
-	)
+	return !['center', 'right', 'justify'].some((align) => editor.isActive({ textAlign: align }))
 }
 
 function buildItems(editor: Editor): EditorToolbarItem[][] {
@@ -72,8 +70,7 @@ function buildItems(editor: Editor): EditorToolbarItem[][] {
 					{
 						icon: 'i-lucide-pilcrow',
 						label: 'Paragraph',
-						onSelect: () =>
-							editor.chain().focus().setParagraph().run(),
+						onSelect: () => editor.chain().focus().setParagraph().run(),
 					},
 					{
 						kind: 'heading',
@@ -201,6 +198,9 @@ defineExpose({
 	focus() {
 		editorInstance.value?.commands.focus()
 	},
+	insertImage(src: string, alt: string) {
+		editorInstance.value?.commands.setImage({ src, alt })
+	},
 })
 </script>
 
@@ -226,9 +226,7 @@ defineExpose({
 		<div class="col-start-1 row-start-3">
 			<slot name="footer" />
 		</div>
-		<div
-			class="col-start-2 row-span-2 row-start-2 hidden min-h-0 lg:block"
-		>
+		<div class="col-start-2 row-span-2 row-start-2 hidden min-h-0 lg:block">
 			<slot name="aside" />
 		</div>
 	</UEditor>