feat(editor): make image upload work via slash command

src/components/input/editor/EditorToolbar.vue

@@ -151,7 +151,7 @@
 		</div>
 
 		<div class="editor-toolbar__segment">
-			<BaseButton class="editor-toolbar__button" @click="uploadInputRef?.click()" title="Add image">
+			<BaseButton class="editor-toolbar__button" @click="openImagePicker" title="Add image">
 				<span class="icon">
 					<icon icon="fa-image"/>
 				</span>
@@ -369,7 +369,6 @@
 				</BaseButton>
 			</div>
 		</div>
-		<input type="file" ref="uploadInputRef" class="is-hidden" @change="addImage"/>
 	</div>
 </template>
 
@@ -388,40 +387,14 @@ const {
 	uploadCallback?: UploadCallback,
 }>()
 
-const emit = defineEmits(['imageAdded'])
-
 const tableMode = ref(false)
-const uploadInputRef = ref<HTMLInputElement | null>(null)
 
 function toggleTableMode() {
 	tableMode.value = !tableMode.value
 }
 
-function addImage() {
+function openImagePicker() {
-
+	document.getElementById('tiptap__image-upload').click()
-	if (typeof uploadCallback !== 'undefined') {
-		const files = uploadInputRef.value?.files
-
-		if (!files || files.length === 0) {
-			return
-		}
-
-		uploadCallback(files).then(urls => {
-			urls.forEach(url => {
-				editor?.chain().focus().setImage({src: url}).run()
-			})
-			emit('imageAdded')
-		})
-
-		return
-	}
-
-	const url = window.prompt('URL')
-
-	if (url) {
-		editor?.chain().focus().setImage({src: url}).run()
-		emit('imageAdded')
-	}
 }
 
 function setLink() {

src/components/input/editor/TipTap.vue

@@ -4,12 +4,18 @@
 			v-if="editor"
 			:editor="editor"
 			:upload-callback="uploadCallback"
-			@image-added="onImageAdded"
 		/>
 		<editor-content
 			class="tiptap__editor"
 			:editor="editor"
 		/>
+		<input
+			type="file"
+			id="tiptap__image-upload"
+			class="is-hidden"
+			ref="uploadInputRef"
+			@change="addImage"
+		/>
 	</div>
 </template>
 
@@ -205,7 +211,7 @@ const editor = useEditor({
 		// 		return VueNodeViewRenderer(CodeBlock)
 		// 	},
 		// }).configure({ lowlight }),
-		
+
 		Commands.configure({
 			suggestion: suggestionSetup(t),
 		}),
@@ -235,6 +241,39 @@ watch(inputHTML, (value) => {
 })
 
 onBeforeUnmount(() => editor.value?.destroy())
+
+const uploadInputRef = ref<HTMLInputElement | null>(null)
+
+function addImage() {
+
+	if (typeof uploadCallback !== 'undefined') {
+		const files = uploadInputRef.value?.files
+
+		if (!files || files.length === 0) {
+			return
+		}
+
+		uploadCallback(files).then(urls => {
+			urls.forEach(url => {
+				editor.value
+					.chain()
+					.focus()
+					.setImage({src: url})
+					.run()
+			})
+			onImageAdded()
+		})
+
+		return
+	}
+
+	const url = window.prompt('URL')
+
+	if (url) {
+		editor.value.chain().focus().setImage({src: url}).run()
+		onImageAdded()
+	}
+}
 </script>
 
 <style lang="scss">

src/components/input/editor/suggestion.ts

@@ -124,19 +124,19 @@ export default function suggestionSetup(t) {
                             .run()
                     },
                 },
-                // {
+                {
-                //     title: t('input.editor.')'Image',
+                    title: t('input.editor.image'),
-                //     description: t('input.editor.')'Upload an image from your computer',
+                    description: t('input.editor.imageTooltip'),
-                //     icon: 'fa-image',
+                    icon: 'fa-image',
-                //     command: ({editor, range}) => {
+                    command: ({editor, range}) => {
-                //         editor
+                        editor
-                //             .chain()
+                            .chain()
-                //             .focus()
+                            .focus()
-                //             .deleteRange(range)
+                            .deleteRange(range)
-                //             .toggle()
+                            .run()
-                //             .run()
+                        document.getElementById('tiptap__image-upload').click()
-                //     },
+                    },
-                // },
+                },
                 {
                     title: t('input.editor.horizontalRule'),
                     description: t('input.editor.horizontalRuleTooltip'),

src/i18n/lang/en.json

@@ -536,6 +536,7 @@
       "cleanBlock": "Clean Block",
       "link": "Link",
       "image": "Image",
+      "imageTooltip": "Upload an image from your computer.",
       "table": "Table",
       "horizontalRule": "Horizontal Rule",
       "horizontalRuleTooltip": "Divide a section.",