feat: upload and attach files

Author: codewec

app/components/editoro/MainContent.vue

@@ -23,6 +23,7 @@ const props = defineProps<{
   editorSuggestionItems: EditorSuggestionItems
   canUploadImage: boolean
   uploadImage: (file: File) => Promise<string | null>
+  uploadFile: (file: File) => Promise<string | null>
 }>()
 
 const emit = defineEmits<{
@@ -44,12 +45,15 @@ const isMarkdownFileSelected = computed(() => {
 
 const {
   imageInputRef,
+  fileInputRef,
   editorHandlers,
   bindEditor,
-  onImageInputChange
+  onImageInputChange,
+  onFileInputChange
 } = useEditoroMainContentMedia({
   canUploadImage: () => props.canUploadImage,
-  uploadImage: props.uploadImage
+  uploadImage: props.uploadImage,
+  uploadFile: props.uploadFile
 })
 
 const richEditorHandlers = computed(() => ({
@@ -238,6 +242,13 @@ const editorExtensions = [TaskList, TaskItem, ListKeymap]
       class="editoro-file-input"
       @change="onImageInputChange"
     >
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      class="editoro-file-input"
+      @change="onFileInputChange"
+    >
   </div>
 </template>
 
@@ -357,6 +368,30 @@ const editorExtensions = [TaskList, TaskItem, ListKeymap]
   line-height: 1.5;
 }
 
+.editoro-editor :deep(.tiptap a[href*='/api/files/file?path=']) {
+  position: relative;
+  padding-left: 1.1rem;
+}
+
+.editoro-editor :deep(.tiptap a[href*='/api/files/file?path=']::before) {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-8.49 8.49a5.5 5.5 0 0 1-7.78-7.78l8.49-8.48a3.5 3.5 0 1 1 4.95 4.95l-8.49 8.49a1.5 1.5 0 0 1-2.12-2.12l8.49-8.49'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 14px 14px;
+  pointer-events: none;
+}
+
+.editoro-editor :deep(.editoro-link-modifier a[href]) {
+  cursor: pointer;
+}
+
 .editoro-raw {
   height: 100%;
   width: 100%;

app/composables/api/buildEditorApi.ts

@@ -22,6 +22,7 @@ export function buildEditorApi(options: BuildEditoroApiOptions) {
     modeTooltip: editorRefs.editorModeTooltip,
     pinnedFilePaths: editorRefs.pinnedFilePaths,
     uploadImage: editorStore.uploadImage,
+    uploadFile: editorStore.uploadFile,
     toggleMode: editorStore.toggleEditorMode,
     isPinned: editorStore.isPinned,
     pinFile: editorStore.pinFile,

app/composables/editor/useEditoroEditorUploads.ts

@@ -4,7 +4,7 @@
  */
 import type { Ref } from 'vue'
 import type { Translator } from '~/types/editoro'
-import { uploadImageApi } from '~/services/files-api'
+import { uploadFileApi, uploadImageApi } from '~/services/files-api'
 
 type EditoroEditorUploadsOptions = {
   t: Translator
@@ -29,7 +29,24 @@ export function useEditoroEditorUploads(options: EditoroEditorUploadsOptions) {
     }
   }
 
+  async function uploadFile(file: File) {
+    if (!options.activeFilePath.value) {
+      options.notifyError(options.t('errors.openMarkdownFirst'))
+      return null
+    }
+
+    try {
+      const result = await uploadFileApi(options.activeFilePath.value, file)
+      return result.url
+    } catch (error) {
+      console.error(error)
+      options.notifyError(options.t('errors.uploadFile'))
+      return null
+    }
+  }
+
   return {
-    uploadImage
+    uploadImage,
+    uploadFile
   }
 }

app/composables/editor/useEditoroMainContentMedia.ts

@@ -18,7 +18,7 @@ type EditorLike = {
       setImage?: (payload: { src: string, alt?: string }) => {
         run: () => boolean
       }
-      insertContent?: (content: string) => {
+      insertContent?: (content: string | object) => {
         run: () => boolean
       }
     }
@@ -27,26 +27,30 @@ type EditorLike = {
 
 type EditorHandlerLike = {
   canExecute: (editor: EditorLike) => boolean
-  execute: (editor: EditorLike) => unknown
+  execute: (editor: EditorLike) => boolean
   isActive: (editor: EditorLike) => boolean
   isDisabled?: (editor: EditorLike) => boolean
 }
 
 type EditoroMainContentMediaOptions = {
   canUploadImage: () => boolean
   uploadImage: (file: File) => Promise<string | null>
+  uploadFile: (file: File) => Promise<string | null>
 }
 
 /**
- * Encapsulates image upload interactions for editor toolbar, DnD and paste flows.
+ * Encapsulates media/file upload interactions for editor toolbar, DnD and paste flows.
+ * Also handles Ctrl/Cmd+Click on links inside editor content.
  * Used by `app/components/editoro/MainContent.vue`.
  */
 export function useEditoroMainContentMedia(options: EditoroMainContentMediaOptions) {
   const imageInputRef = ref<HTMLInputElement>()
+  const fileInputRef = ref<HTMLInputElement>()
   const pendingEditor = ref<EditorLike>()
+  const pendingFileEditor = ref<EditorLike>()
   const currentEditor = ref<EditorLike>()
 
-  let detachEditorDnDListeners: (() => void) | null = null
+  let detachEditorListeners: (() => void) | null = null
 
   const editorHandlers: Record<string, EditorHandlerLike> = {
     uploadImage: {
@@ -57,6 +61,15 @@ export function useEditoroMainContentMedia(options: EditoroMainContentMediaOptio
       },
       isActive: () => false,
       isDisabled: () => !options.canUploadImage()
+    },
+    uploadFile: {
+      canExecute: () => options.canUploadImage(),
+      execute: (editor) => {
+        openFilePicker(editor)
+        return true
+      },
+      isActive: () => false,
+      isDisabled: () => !options.canUploadImage()
     }
   }
 
@@ -70,6 +83,16 @@ export function useEditoroMainContentMedia(options: EditoroMainContentMediaOptio
     imageInputRef.value?.click()
   }
 
+  function openFilePicker(editor: EditorLike) {
+    if (!options.canUploadImage()) {
+      return
+    }
+
+    pendingFileEditor.value = editor
+    currentEditor.value = editor
+    fileInputRef.value?.click()
+  }
+
   function isImageFile(file: File) {
     return file.type.startsWith('image/')
   }
@@ -95,6 +118,27 @@ export function useEditoroMainContentMedia(options: EditoroMainContentMediaOptio
     }
   }
 
+  function insertUploadedFileLink(editor: EditorLike, fileUrl: string, fileName: string) {
+    const content = {
+      type: 'text',
+      text: fileName,
+      marks: [
+        {
+          type: 'link',
+          attrs: { href: fileUrl }
+        }
+      ]
+    }
+
+    const chain = editor.chain().focus()
+    if (chain.insertContent) {
+      chain.insertContent(content).run()
+      return
+    }
+
+    editor.chain().focus().insertContent?.(`[${fileName}](${fileUrl})`).run()
+  }
+
   async function uploadAndInsertImages(editor: EditorLike, files: File[], position?: number) {
     for (const file of files) {
       const imageUrl = await options.uploadImage(file)
@@ -131,17 +175,48 @@ export function useEditoroMainContentMedia(options: EditoroMainContentMediaOptio
     input.value = ''
   }
 
+  async function onFileInputChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    const editor = pendingFileEditor.value
+    const file = input.files?.[0]
+
+    if (!file || !editor) {
+      input.value = ''
+      return
+    }
+
+    const fileUrl = await options.uploadFile(file)
+    if (fileUrl) {
+      insertUploadedFileLink(editor, fileUrl, file.name)
+    }
+
+    input.value = ''
+  }
+
+  function isExternalHref(href: string) {
+    try {
+      const url = new URL(href, window.location.href)
+      return url.origin !== window.location.origin
+    } catch {
+      return false
+    }
+  }
+
   watch(currentEditor, (editor) => {
-    if (detachEditorDnDListeners) {
-      detachEditorDnDListeners()
-      detachEditorDnDListeners = null
+    if (detachEditorListeners) {
+      detachEditorListeners()
+      detachEditorListeners = null
     }
 
     const target = editor?.view?.dom
     if (!target) {
       return
     }
 
+    const setModifierCursorState = (isPressed: boolean) => {
+      target.classList.toggle('editoro-link-modifier', isPressed)
+    }
+
     const onDrop = async (event: DragEvent) => {
       const files = getImageFilesFromDataTransfer(event.dataTransfer || null)
       if (files.length === 0) {
@@ -167,26 +242,81 @@ export function useEditoroMainContentMedia(options: EditoroMainContentMediaOptio
       await uploadAndInsertImages(editor, files)
     }
 
+    const onClick = (event: MouseEvent) => {
+      if (!event.ctrlKey && !event.metaKey) {
+        return
+      }
+
+      const targetNode = event.target
+      if (!(targetNode instanceof HTMLElement)) {
+        return
+      }
+
+      const anchor = targetNode.closest('a')
+      if (!anchor) {
+        return
+      }
+
+      const href = anchor.getAttribute('href') || ''
+      if (!href) {
+        return
+      }
+
+      event.preventDefault()
+      if (isExternalHref(href)) {
+        window.open(href, '_blank', 'noopener,noreferrer')
+      } else {
+        window.location.assign(href)
+      }
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.ctrlKey || event.metaKey) {
+        setModifierCursorState(true)
+      }
+    }
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (!event.ctrlKey && !event.metaKey) {
+        setModifierCursorState(false)
+      }
+    }
+
+    const onWindowBlur = () => {
+      setModifierCursorState(false)
+    }
+
     target.addEventListener('drop', onDrop)
     target.addEventListener('paste', onPaste)
+    target.addEventListener('click', onClick)
+    window.addEventListener('keydown', onKeyDown)
+    window.addEventListener('keyup', onKeyUp)
+    window.addEventListener('blur', onWindowBlur)
 
-    detachEditorDnDListeners = () => {
+    detachEditorListeners = () => {
       target.removeEventListener('drop', onDrop)
       target.removeEventListener('paste', onPaste)
+      target.removeEventListener('click', onClick)
+      window.removeEventListener('keydown', onKeyDown)
+      window.removeEventListener('keyup', onKeyUp)
+      window.removeEventListener('blur', onWindowBlur)
+      setModifierCursorState(false)
     }
   }, { flush: 'post' })
 
   onBeforeUnmount(() => {
-    if (detachEditorDnDListeners) {
-      detachEditorDnDListeners()
-      detachEditorDnDListeners = null
+    if (detachEditorListeners) {
+      detachEditorListeners()
+      detachEditorListeners = null
     }
   })
 
   return {
     imageInputRef,
+    fileInputRef,
     editorHandlers,
     bindEditor,
-    onImageInputChange
+    onImageInputChange,
+    onFileInputChange
   }
 }

app/composables/workspace/useEditoroMainContentBindings.ts

@@ -22,6 +22,7 @@ export function useEditoroMainContentBindings(options: WorkspaceBindingOptions)
     editorContent: state.editor.content.value,
     canUploadImage: !!state.editor.activeFilePath.value,
     uploadImage: state.editor.uploadImage,
+    uploadFile: state.editor.uploadFile,
     editorToolbarItems: options.editorToolbarItems.value,
     editorSuggestionItems: options.editorSuggestionItems.value
   }))

app/constants/editoro.ts

@@ -31,6 +31,7 @@ export function createEditorToolbarItems(t: Translator) {
       { 'kind': 'toggleRawMode', 'icon': 'i-lucide-file-text', 'label': 'Raw', 'tooltip': { text: t('toolbar.raw') }, 'aria-label': t('toolbar.raw') }
     ],
     [
+      { 'kind': 'uploadFile', 'icon': 'i-lucide-paperclip', 'tooltip': { text: t('toolbar.uploadFile') }, 'aria-label': t('toolbar.uploadFile') },
       { 'kind': 'uploadImage', 'icon': 'i-lucide-image-plus', 'tooltip': { text: t('toolbar.uploadImage') }, 'aria-label': t('toolbar.uploadImage') }
     ]
   ] satisfies EditorToolbarItems
@@ -53,6 +54,7 @@ export function createEditorSuggestionItems(t: Translator) {
     ],
     [
       { type: 'label', label: t('suggestion.insert') },
+      { kind: 'uploadFile', label: t('suggestion.file'), icon: 'i-lucide-paperclip' },
       { kind: 'uploadImage', label: t('suggestion.image'), icon: 'i-lucide-image-plus' },
       { kind: 'blockquote', label: t('toolbar.quote'), icon: 'i-lucide-text-quote' },
       { kind: 'codeBlock', label: t('toolbar.codeBlock'), icon: 'i-lucide-square-code' },