davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add drag & drop image support in editor

Browse Source 
Extract uploadImageFile to shared hook, add useImageDrop hook that
handles dragover/dragleave/drop events on the editor container.
Drops image files (jpg, png, gif, webp), uploads them via the existing
save_image flow, and inserts BlockNote image blocks at the drop position.
Visual feedback via drop overlay and dashed border.

Refactored Editor.tsx uploadFile to use the shared function.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-23 20:29:34 +01:00
parent e3e6114064
commit 8a5df707f5
4 changed files with 368 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Editor.css
View File

@@ -30,6 +30,35 @@
overflow-y: auto;
display: flex;
justify-content: center;
position: relative;
}
/* Drag-over state: subtle border highlight */
.editor__blocknote-container--drag-over {
outline: 2px dashed var(--primary, #155DFF);
outline-offset: -2px;
}
/* Drop overlay shown when dragging images over the editor */
.editor__drop-overlay {
position: absolute;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
background: rgba(21, 93, 255, 0.06);
pointer-events: none;
}
.editor__drop-overlay-label {
padding: 10px 20px;
border-radius: 8px;
background: var(--background, #fff);
color: var(--primary, #155DFF);
font-size: 14px;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.editor__blocknote-container .bn-container {