feat: Add attachment support to TextEditor (fixes #527)

src/components/TextEditor/InsertAttachment.vue

@@ -0,0 +1,34 @@
+<template>
+  <slot v-bind="{ onClick: openFileSelector }"></slot>
+  <input
+    ref="fileInput"
+    type="file"
+    class="hidden"
+    @change="onFileSelect"
+    multiple
+  />
+</template>
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import type { Editor } from '@tiptap/vue-3'
+
+const props = defineProps<{
+  editor: Editor
+}>()
+
+const fileInput = useTemplateRef<HTMLInputElement>('fileInput')
+
+function openFileSelector() {
+  fileInput.value?.click()
+}
+
+function onFileSelect(e: Event) {
+  const target = e.target as HTMLInputElement
+  const files = target.files
+  if (files && files.length > 0) {
+      Array.from(files).forEach(file => {
+          props.editor.chain().focus().uploadAttachment(file).run()
+      })
+  }
+}
+</script>

src/components/TextEditor/TextEditor.vue

@@ -69,6 +69,7 @@ import { TagNode, TagExtension } from './extensions/tag/tag-extension'
 import { Heading } from './extensions/heading/heading'
 import { ImageGroup } from './extensions/image-group/image-group-extension'
 import { ExtendedCode, ExtendedCodeBlock } from './extensions/code-block'
+import { AttachmentExtension } from './extensions/attachment'
 import { useFileUpload } from '../../utils/useFileUpload'
 import { TextEditorEmits, TextEditorProps } from './types'
 
@@ -204,6 +205,9 @@ onMounted(() => {
       ImageGroup.configure({
         uploadFunction: props.uploadFunction || defaultUploadFunction,
       }),
+      AttachmentExtension.configure({
+        uploadFunction: props.uploadFunction || defaultUploadFunction,
+      }),
       ImageViewerExtension,
       VideoExtension.configure({
         uploadFunction: props.uploadFunction || defaultUploadFunction,

src/components/TextEditor/TextEditorFixedMenu.vue

@@ -41,6 +41,7 @@ export default {
           'FontColor',
           'Separator',
           'Image',
+          'Attach',
           'Video',
           'Iframe',
           'Link',

src/components/TextEditor/commands.js

@@ -180,6 +180,12 @@ export default {
     isActive: (editor) => false,
     component: defineAsyncComponent(() => import('./InsertImage.vue')),
   },
+  Attach: {
+    label: 'Attach',
+    icon: defineAsyncComponent(() => import('./icons/attachment.vue')),
+    isActive: (editor) => false,
+    component: defineAsyncComponent(() => import('./InsertAttachment.vue')),
+  },
   Video: {
     label: 'Video',
     icon: Video,

src/components/TextEditor/extensions/attachment/AttachmentNodeView.vue

@@ -0,0 +1,63 @@
+<template>
+  <node-view-wrapper class="attachment-node-view my-2">
+    <div
+      class="flex items-center gap-3 p-3 border rounded-lg bg-surface-gray-1 hover:bg-surface-gray-2 transition-colors cursor-pointer group"
+      @click="download"
+    >
+      <div class="p-2 bg-white rounded-md border text-gray-500">
+        <!-- Paperclip icon -->
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="20"
+            height="20"
+        >
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+            d="M14.828 7.757l-5.656 5.657a1 1 0 0 1-1.414-1.414l5.656-5.657A3 3 0 1 1 17.656 10.586l-5.656 5.656A5 5 0 1 1 4.929 9.172l5.656-5.657 1.414 1.414-5.656 5.657a3 3 0 1 0 4.242 4.242l5.656-5.656a1 1 0 0 0-1.414-1.414z"
+            fill="currentColor"
+            />
+        </svg>
+      </div>
+      <div class="flex-1 overflow-hidden">
+        <div class="text-sm font-medium text-gray-900 truncate">
+          {{ node.attrs.filename || 'Uploading...' }}
+        </div>
+        <div class="text-xs text-gray-500 flex items-center gap-2">
+          <span v-if="node.attrs.size">{{ formatSize(node.attrs.size) }}</span>
+          <span v-if="node.attrs.uploadId" class="text-xs text-orange-500">Uploading...</span>
+        </div>
+      </div>
+       <div class="opacity-0 group-hover:opacity-100 transition-opacity">
+         <!-- Download Icon -->
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-500"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+       </div>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup lang="ts">
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+
+function formatSize(bytes: number) {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+function download() {
+    if (props.node.attrs.src) {
+        window.open(props.node.attrs.src, '_blank')
+    }
+}
+</script>
+
+<style scoped>
+.attachment-node-view {
+    user-select: none;
+}
+</style>

src/components/TextEditor/extensions/attachment/attachment-extension.ts

@@ -0,0 +1,121 @@
+import {
+    Node as NodeExtension,
+    mergeAttributes,
+} from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import AttachmentNodeView from './AttachmentNodeView.vue'
+import { UploadedFile } from '../../../../utils/useFileUpload'
+
+export interface AttachmentExtensionOptions {
+    uploadFunction: ((file: File) => Promise<UploadedFile>) | null
+    HTMLAttributes: Record<string, any>
+}
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        attachment: {
+            setAttachment: (options: { src: string; filename?: string; size?: number }) => ReturnType
+            uploadAttachment: (file: File) => ReturnType
+        }
+    }
+}
+
+export const AttachmentExtension = NodeExtension.create<AttachmentExtensionOptions>({
+    name: 'attachment',
+
+    group: 'block',
+    draggable: true,
+    selectable: true,
+
+    addAttributes() {
+        return {
+            src: { default: null },
+            filename: { default: null },
+            size: { default: null },
+            contentType: { default: null },
+            uploadId: { default: null },
+        }
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: 'a[data-type="attachment"]',
+            },
+        ]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return [
+            'a',
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { 'data-type': 'attachment', href: HTMLAttributes.src, target: '_blank' }),
+        ]
+    },
+
+    addNodeView() {
+        return VueNodeViewRenderer(AttachmentNodeView)
+    },
+
+    addOptions() {
+        return {
+            uploadFunction: null,
+            HTMLAttributes: {},
+        }
+    },
+
+    addCommands() {
+        return {
+            setAttachment:
+                (options) =>
+                    ({ commands }) => {
+                        return commands.insertContent({
+                            type: this.name,
+                            attrs: options,
+                        })
+                    },
+
+            uploadAttachment:
+                (file: File) =>
+                    ({ editor, view }) => {
+                        if (!this.options.uploadFunction) {
+                            console.error('uploadFunction option is not provided')
+                            return false
+                        }
+
+                        const uploadId = `upload-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+
+                        const node = view.state.schema.nodes.attachment.create({
+                            uploadId,
+                            filename: file.name,
+                            size: file.size,
+                            contentType: file.type
+                        })
+
+                        const tr = view.state.tr
+                        const insertPos = view.state.selection.from
+                        tr.insert(insertPos, node)
+                        view.dispatch(tr)
+
+                        this.options.uploadFunction(file).then((uploadedFile) => {
+                            const transaction = view.state.tr
+                            view.state.doc.descendants((node, pos) => {
+                                if (node.type.name === 'attachment' && node.attrs.uploadId === uploadId) {
+                                    transaction.setNodeMarkup(pos, undefined, {
+                                        ...node.attrs,
+                                        src: uploadedFile.file_url,
+                                        filename: uploadedFile.file_name || node.attrs.filename,
+                                        uploadId: null
+                                    })
+                                    return false
+                                }
+                            })
+                            view.dispatch(transaction)
+                        }).catch((error) => {
+                            console.error("Failed to upload attachment", error)
+                        })
+
+                        return true
+                    },
+        }
+    },
+})

src/components/TextEditor/extensions/attachment/index.ts

@@ -0,0 +1 @@
+export { AttachmentExtension } from './attachment-extension'

src/components/TextEditor/icons/attachment.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M14.828 7.757l-5.656 5.657a1 1 0 0 1-1.414-1.414l5.656-5.657A3 3 0 1 1 17.656 10.586l-5.656 5.656A5 5 0 1 1 4.929 9.172l5.656-5.657 1.414 1.414-5.656 5.657a3 3 0 1 0 4.242 4.242l5.656-5.656a1 1 0 0 0-1.414-1.414z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

src/env.d.ts

@@ -1,2 +1,8 @@
 /// <reference types="vite/client" />
 /// <reference types="@histoire/plugin-vue/components" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}