Feature request: File/image paste and drop support

[merlinz01]

It would be handy for my use case if support for pasting and dropping images and other files were built-in.

Here's what I would envision the API to look like. There would be a callback in the configuration object that takes a File object and returns (async, so we can use axios or fetch to upload it) the text to insert in the textarea.

const [editor] = new OverType('#editor', {
    ...
    onInsertFile: async (file: File): Promise<string> => {
        const url = await uploadFile(file)
        return file.type.startsWith('image/')
            ? `![${fileName}](${url})`
            : `[${fileName}](${url})`
    },
    ...
});

Here's some code of mine to do this on a plain textarea to get you started:

  const textAreaPaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
    const clipboardData = event.clipboardData
    // Let the default handler handle plain text
    if (!clipboardData || !clipboardData.files || clipboardData.files.length == 0) return
    event.preventDefault()
    const textarea = event.currentTarget as HTMLTextAreaElement
    textarea.focus()
    for (const file of clipboardData.files) {
      console.log('Pasted file:', file)
      uploadFile(file)
        .then((url) => {
          const fileName = file.name
          const text = file.type.startsWith('image/')
            ? `![${fileName}](${url})`
            : `[${fileName}](${url})`
          insertTextAtCursor(textarea, text)
        })
        .catch((error) => {
          console.error('Error uploading pasted file:', error)
        })
    }
  }

  const textAreaDrop = (event: React.DragEvent<HTMLTextAreaElement>) => {
    const dataTransfer = event.dataTransfer
    // Let the default handler handle plain text
    if (!dataTransfer || !dataTransfer.files || dataTransfer.files.length == 0) return
    event.preventDefault()
    const textarea = event.currentTarget as HTMLTextAreaElement
    textarea.focus()
    for (const file of dataTransfer.files) {
      console.log('Dropped file:', file)
      uploadFile(file)
        .then((url) => {
          const fileName = file.name
          const text = file.type.startsWith('image/')
            ? `![${fileName}](${url})`
            : `[${fileName}](${url})`
          insertTextAtCursor(textarea, text)
        })
        .catch((error) => {
          console.error('Error uploading dropped file:', error)
        })
    }
  }

  const insertTextAtCursor = (textarea: HTMLTextAreaElement, text: string) => {
    textarea.focus()
    if (document.queryCommandSupported && document.queryCommandSupported('insertText')) {
      document.execCommand('insertText', false, text)
    } else {
      const start = textarea.selectionStart
      const end = textarea.selectionEnd
      const value = textarea.value
      textarea.value = value.slice(0, start) + text + value.slice(end)
      textarea.setSelectionRange(start + text.length, start + text.length)
    }
  }

 <textarea
      onPaste={textAreaPaste}
      onDrop={textAreaDrop}
></textarea>

[panphora]

Oh this is neat. So it wouldn't display the file/image, it would just upload it in the background and then add the URL and file name into a link in OverType! Very cool, I like this.

[panphora]

This is a great idea! File/image paste and drop support would be a valuable addition to OverType. Your proposed API is clean and the implementation you provided is already really solid.

Proposed Implementation

Building on your code, here's a full specification for how this could work in OverType:

API Design

const editor = new OverType('#editor', {
  fileUpload: {
    enabled: true,
    maxSize: 10 * 1024 * 1024, // 10MB default
    onInsertFile: async (file) => {
      // User provides upload logic
      const url = await uploadFile(file)
      return file.type.startsWith('image/')
        ? `![${file.name}](${url})`
        : `[${file.name}](${url})`
    }
  }
});

Core Features

1. Progress Indication

   • Insert placeholder text immediately: ![Uploading filename.jpg...]()
   • Replace with actual link when upload completes
   • Replace with error message if upload fails: [Failed: filename.jpg]
   • Textarea remains editable during upload (non-blocking)

2. Visual Drag Feedback

   .overtype-input.drag-over {
     background: rgba(0, 100, 200, 0.05);
     outline: 2px dashed rgba(0, 100, 200, 0.3);
   }

3. File Validation

   • Check file size before upload
   • Log error if file exceeds maxSize
   • Continue processing other files

4. Implementation Method

   class OverType {
     enableFileUpload(options = {}) {
       const { onInsertFile, maxSize = 10485760 } = options
       
       if (!onInsertFile) return
       
       // Paste handler
       this.textarea.addEventListener('paste', async (e) => {
         if (!e.clipboardData?.files?.length) return
         
         e.preventDefault()
         for (const file of e.clipboardData.files) {
           if (file.size > maxSize) {
             console.error(`File too large: ${file.name}`)
             continue
           }
           
           // Insert placeholder
           const placeholder = `![Uploading ${file.name}...]()`
           this.insertAtCursor(placeholder)
           
           try {
             const text = await onInsertFile(file)
             // Replace placeholder with actual link
             this.textarea.value = this.textarea.value.replace(placeholder, text)
           } catch (error) {
             // Replace with error message
             this.textarea.value = this.textarea.value.replace(
               placeholder, 
               `[Failed: ${file.name}]`
             )
           }
         }
       })
       
       // Drop handler (similar logic)
       this.textarea.addEventListener('drop', async (e) => {
         if (!e.dataTransfer?.files?.length) return
         
         e.preventDefault()
         this.textarea.classList.remove('drag-over')
         
         // Same upload logic as paste
         for (const file of e.dataTransfer.files) {
           // ... same as paste handler
         }
       })
       
       // Visual feedback for drag
       this.textarea.addEventListener('dragover', (e) => {
         e.preventDefault()
         this.textarea.classList.add('drag-over')
       })
       
       this.textarea.addEventListener('dragleave', () => {
         this.textarea.classList.remove('drag-over')
       })
     }
     
     insertAtCursor(text) {
       const start = this.textarea.selectionStart
       const end = this.textarea.selectionEnd
       
       // Try native method first (preserves undo history)
       if (!document.execCommand('insertText', false, text)) {
         // Fallback
         const before = this.textarea.value.slice(0, start)
         const after = this.textarea.value.slice(end)
         this.textarea.value = before + text + after
         this.textarea.setSelectionRange(start + text.length, start + text.length)
       }
       
       // Trigger input event to update preview
       this.textarea.dispatchEvent(new Event('input', { bubbles: true }))
     }
   }

Key Design Decisions

• Non-blocking: Textarea stays editable during uploads
• Visual progress: Placeholder text shows upload status inline
• Error handling: Failed uploads show clear error message
• Multiple files: Process files sequentially, each at cursor position
• Undo support: Uses document.execCommand when available to preserve undo history
• Simple API: Single callback handles all file types, user decides the output format

Would you be interested in submitting a PR for this feature? Your implementation is already most of the way there - it would just need to be integrated into the OverType class structure with the progress indication and drag feedback additions. This would be a fantastic addition to the library!

Let me know if you'd like to tackle this or if you have any questions about the integration. Happy to collaborate on getting this merged!

[merlinz01]

One question, does overtype provide its own undo/redo implementation? While somewhat tangential to this feature, I think it would make sense since programmatic editing by setting textarea.value clears the browser's builtin undo buffer. document.execCommand works for simple cases but is deprecated.

[bombledmonk]

I have nothing material to add, but after I discovered this library, this was the first feature I came looking for. I'd love to see it come to fruition.

[panphora]

@merlinz01 I think we want to continue to rely on document.execCommand. Can you document where it would break? I'd really rather not implement an undo/redo stack if we can keep it native. Also, if you do document this, please do it in a new issue.

[panphora]

Hi @merlinz01! This is a great feature request and I really appreciate the detailed API design and code examples you've provided. Your proposed API looks clean and well-thought-out.

I'd love to see this implemented! Would you be interested in creating a PR for this feature? Your code examples show you have a solid grasp of what's needed. Here are my thoughts on the implementation:

Suggested Implementation Details

1. API Design (your proposal looks perfect!)

onInsertFile: async (file: File) => {
    // User handles upload and returns markdown
    const url = await uploadFile(file);
    return file.type.startsWith('image/') 
        ? `![${file.name}](${url})`
        : `[${file.name}](${url})`;
}

2. Implementation Notes

• Add paste/drop listeners in setupEventListeners() (src/overtype.js)
• Use document.execCommand('insertText') for undo/redo support (as you did!)
• Handle both clipboard files and dropped files
• Preserve cursor position after insertion
• Show some loading state while async upload happens (maybe temporarily insert [Uploading...]?)

3. Testing Requirements

• Test paste event with files
• Test drag & drop with files
• Test with multiple files
• Test error handling (when upload fails)
• Test that regular text paste/drop still works
• Add example in demo.html showing file upload

4. Bonus Points

• Progress indicator for large files
• Support for pasting images from clipboard (e.g., screenshots)
• Configurable file type filtering

If you'd like to take this on, I'm happy to provide guidance and review! The core implementation should be pretty straightforward given your existing code. We'd just need to integrate it properly with OverType's event system and make sure it plays nice with all the other features.

What do you think? Would you be up for submitting a PR? 🚀

[merlinz01]

I'd be willing to submit a PR, but this isn't very high on my priorities right now. If someone else wants to do it they may.

[panphora]

Archiving this until someone wants to take it on