Skip to content

feat(app): drag-and-drop images into meeting notes, remove image button#3873

Merged
louis030195 merged 3 commits into
mainfrom
note-drag-drop-images
Jun 6, 2026
Merged

feat(app): drag-and-drop images into meeting notes, remove image button#3873
louis030195 merged 3 commits into
mainfrom
note-drag-drop-images

Conversation

@louis030195

Copy link
Copy Markdown
Collaborator

what

the top-right image button in the meeting note view is gone. it opened a file picker to insert images — clunky and visually noisy. you now drag an image straight onto the note: a black drop zone appears while a file is dragged over the window, and dropping embeds the image(s) into the editor.

why

drag-and-drop is the expected way to get an image into a note. the picker button was redundant and didn't fit the obsidian-style editing the note view is going for.

how

  • removed the insert-image toolbar button + its handleInsertImages file-picker handler (and the now-unused ImageIcon / openFileDialog imports)
  • the editor already had ProseMirror paste/drop handlers, but tauri owns OS file drops at the webview level — native drags never surface as DOM drop events — so we listen on getCurrentWebview().onDragDropEvent, the same pattern standalone-chat already uses
  • enter/over → show the black drop overlay; drop → resize + data-url the dropped paths via the existing image-utils, then noteEditorRef.insertImages() (the exact insert path the picker used)
  • non-image drops are ignored

visual

note drag-drop

ascii fallback:

 before              after
 +-----------+       +------+
 | copy  img |  -->  | copy |
 +-----------+       +------+

 drag a file over the note:
 +----------------------------------+
 | untitled meeting                 |
 |      ####################        |
 |      # drop image to add #       |
 |      #      to note      #       |
 |      ####################        |
 +----------------------------------+

test plan

  • bun run build (next build) compiles; tsc --noEmit clean
  • smoke test (reviewer): drag a png/jpg onto an open meeting note → black "drop image to add to note" overlay appears, dropping embeds the image; toolbar no longer shows the image icon

drop handling mirrors the working standalone-chat drag-drop pattern; an OS-level file drag can't be synthesized in the wdio e2e, so the runtime drop is left for a manual smoke test.

🤖 Generated with Claude Code

Louis Beaumont and others added 3 commits June 5, 2026 15:11
…tton

the top-right image button opened a file picker to insert images — clunky
and visually noisy. drop images straight onto the note instead: while a
file is dragged over the window a black drop zone appears, and dropping
reads the image(s), resizes them, and embeds them in the editor.

- remove the insert-image toolbar button + its file-picker handler (and the
  now-unused ImageIcon / openFileDialog imports)
- tauri owns OS file drops at the webview level (native drags never surface
  as DOM drop events), so listen on getCurrentWebview().onDragDropEvent —
  same pattern standalone-chat already uses
- enter/over -> show a black drop overlay; drop -> resize + data-url the
  paths via the existing image-utils and call noteEditorRef.insertImages()
- non-image drops are ignored

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
the webview drag-drop event is window-global, so the first cut inserted a
dropped image into the open note no matter where in the window it landed,
and the always-mounted (hidden) chat also staged the same file into its
composer. now:

- hit-test the drop position against the note's own box; ignore drops that
  land elsewhere, and only show the black overlay while an image drag is
  actually over the note
- the embedded chat ignores the global drop while it is hidden
  (offsetParent null), killing the silent double-insert
- non-image drops now toast instead of failing silently
- images insert at the drop point (posAtCoords) instead of the stale caret

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@louis030195 louis030195 merged commit 8aa3c84 into main Jun 6, 2026
19 checks passed
@louis030195 louis030195 deleted the note-drag-drop-images branch June 6, 2026 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant