Feature: File uploads

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.2.0] - 2025-12-26
+
+### Added
+- File upload support with drag-and-drop and paste handling
+
+
+
 ## [2.1.1] - 2025-12-13
 
 ### Added

README.md

@@ -1,6 +1,6 @@
 # OverType
 
-A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~95KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~98KB minified with all features.
 
 ## Live Examples
 
@@ -19,7 +19,7 @@ A lightweight markdown editor library with perfect WYSIWYG alignment using an in
 - ⌨️ **Keyboard shortcuts** - Common markdown shortcuts (Cmd/Ctrl+B for bold, etc.)
 - 📱 **Mobile optimized** - Responsive design with mobile-specific styles
 - 🔄 **DOM persistence aware** - Recovers from existing DOM (perfect for HyperClay and similar platforms)
-- 🚀 **Lightweight** - ~95KB minified
+- 🚀 **Lightweight** - ~98KB minified
 - 🎯 **Optional toolbar** - Clean, minimal toolbar with all essential formatting
 - ✨ **Smart shortcuts** - Keyboard shortcuts with selection preservation
 - 📝 **Smart list continuation** - GitHub-style automatic list continuation on Enter
@@ -35,7 +35,7 @@ We overlap an invisible textarea on top of styled output, giving the illusion of
 
 | Feature | OverType | HyperMD | Milkdown | TUI Editor | EasyMDE |
 |---------|----------|---------|----------|------------|---------|
-| **Size** | ~95KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~98KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
 | **Dependencies** | Bundled | CodeMirror | ProseMirror + plugins | Multiple libs | CodeMirror |
 | **Setup** | Single file | Complex config | Build step required | Complex config | Moderate |
 | **Approach** | Invisible textarea | ContentEditable | ContentEditable | ContentEditable | CodeMirror |
@@ -355,6 +355,52 @@ function MarkdownEditor({ value, onChange }) {
 }
 ```
 
+### File Upload
+
+When enabled, users can paste or drag-and-drop files into the editor. A placeholder is inserted while the file is uploaded asynchronously.
+
+```javascript
+const [editor] = new OverType('#editor', {
+  fileUpload: {
+    enabled: true,
+    onInsertFile: async (file) => {
+      // Upload file to server here
+      const formData = new FormData();
+      formData.append('file', file);
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData
+      });
+      const data = await response.json();
+      // Return markdown to insert
+      return `![${file.name}](${data.url})`;
+    }
+  }
+});
+```
+
+Files can also be uploaded in batch mode by setting `fileUpload.batch` to `true`. In this mode, all files dropped or pasted at once are sent together in a single call to `onInsertFile`, which receives an array of files and should return an array of corresponding markdown strings.
+
+```javascript
+const [editor] = new OverType('#editor', {
+  fileUpload: {
+    enabled: true,
+    batch: true, // Enable batch upload
+    onInsertFile: async (files) => {
+      const formData = new FormData();
+      files.forEach(file => formData.append('file[]', file));
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData
+      });
+      const data = await response.json();
+      // Return array of markdown strings
+      return data.urls.map((url, index) => `![${files[index].name}](${url})`);
+    }
+  }
+});
+```
+
 ### Standalone Parser
 
 Import and use the markdown parser without the full editor for server-side rendering, static site generation, or browser extensions:
@@ -473,7 +519,22 @@ new OverType(target, options)
 
   // Callbacks
   onChange: (value, instance) => {},
-  onKeydown: (event, instance) => {}
+  onKeydown: (event, instance) => {},
+
+  // File Upload
+  fileUpload: {
+    enabled: false, // Enable/disable file upload
+    maxSize: 10 * 1024 * 1024, // Defaults to 10 MB
+    mimeTypes: [], // Allowed mime types. Default is all files allowed
+    onInsertFile: async (file) => {
+      // Callback when placeholder is inserted into editor
+      // Upload to server here
+      // (e.g await fetch('/api/upload'))
+
+      // Return the markdown that should replace the placeholder
+      return `![${file.name}](/uploads/${encodeURIComponent(file.name)})`;
+    },
+  }
 }
 ```
 
@@ -775,6 +836,7 @@ Special thanks to:
 - [1951FDG](https://github.com/1951FDG) - Reported unordered list rendering bug ([#74](https://github.com/panphora/overtype/issues/74)), suggested showStats() API improvement ([#77](https://github.com/panphora/overtype/issues/77))
 - [nodesocket](https://github.com/nodesocket) - Reported toolbarButtons export issues ([#73](https://github.com/panphora/overtype/issues/73), [#78](https://github.com/panphora/overtype/issues/78))
 - [Travis Bell](https://github.com/travisbell) - Reported keyboard shortcuts bug in ESM build ([#80](https://github.com/panphora/overtype/issues/80))
+- [Richard Leek](https://github.com/sorokya) - Added file upload feature ([#27](https://github.com/panphora/overtype/issues/27))
 
 ### TypeScript & Framework Support
 - [merlinz01](https://github.com/merlinz01) - Contributed TypeScript declaration file ([#20](https://github.com/panphora/overtype/pull/20))