mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-11 16:07:15 +02:00
c3b0eae4d8
Adds comprehensive file upload support via drag-and-drop and paste directly into the chat composer editor. Changes to MentionEditor: - Add FileDropHandler TipTap extension to intercept file drops/pastes - Filter for valid media types (image/video/audio) - Add onFileDrop callback prop to communicate with parent - Handle both drag-and-drop and clipboard paste events Changes to useBlossomUpload hook: - Update open() method to accept optional File[] parameter - Add initialFiles state to track pre-selected files - Clear initialFiles when dialog closes - Pass initialFiles to BlossomUploadDialog component Changes to BlossomUploadDialog: - Add initialFiles prop for pre-selecting files - Auto-select first file when initialFiles provided - Generate preview URL for images/video on initialization - Seamless UX: dropped files immediately appear in dialog Changes to ChatViewer: - Wire up onFileDrop callback to open upload dialog - Pass dropped files to upload dialog via open(files) - Fix onClick handler to properly call openUpload() User experience: - Drag image/video/audio file onto chat composer → upload dialog opens - Paste image from clipboard → upload dialog opens - File automatically selected and previewed - Click upload to complete (same as manual file selection) Technical details: - Uses ProseMirror Plugin API for drop/paste interception - File type validation: /^(image|video|audio)\// - Bonus: Also works with clipboard paste (Ctrl+V) - Clean state management with automatic cleanup
Grimoire
A Nostr protocol explorer and developer tool with a tiling window manager interface.
Features
- Tiling Windows - Each window is a Nostr "app" (profile viewer, event feed, NIP docs, etc.)
- Command Palette - Unix-style commands via
Cmd+Kto open apps and navigate - Multi-workspace - Virtual desktops with independent layouts
- Real-time - Reactive event subscriptions with automatic updates
Stack
React 19, TypeScript, Vite, TailwindCSS, Jotai, Dexie, Applesauce
Getting Started
npm install
npm run dev
Scripts
| Command | Description |
|---|---|
npm run dev |
Start dev server |
npm run build |
Build for production |
npm test |
Run tests in watch mode |
npm run lint |
Lint code |
npm run format |
Format code |
License
MIT