Skip to content

feat(ui): image paste from clipboard in editor#76

Open
advancedresearcharray wants to merge 14 commits into
mainfrom
feat/issue-425-image-paste-clipboard
Open

feat(ui): image paste from clipboard in editor#76
advancedresearcharray wants to merge 14 commits into
mainfrom
feat/issue-425-image-paste-clipboard

Conversation

@advancedresearcharray

@advancedresearcharray advancedresearcharray commented Jul 3, 2026

Copy link
Copy Markdown
Owner

Summary

Closes kiwifs#425.

  • Paste or drag PNG/JPEG/GIF/WebP from the OS clipboard into KiwiEditor (visual BlockNote + source CodeMirror modes)
  • Uploads via POST /api/kiwi/assets, inserts ![name](relative-path) markdown
  • Shows ![Uploading...](kiwi-upload://uuid) placeholder during upload; error toast on failure (413 max size, etc.)
  • Save/autosave gated while uploads are in-flight or placeholders remain in source text
  • Dashed-border drag overlay in visual mode; wrapper dead-zone drops handled outside BlockNote surface

Peer-review fixes

  • onDocChange sync — CodeMirror programmatic paste/drop dispatches call handleSourceTextChange so controlled sourceText stays in sync (save gating, autosave, mode switch)
  • handleVisualImageDrop — Handles image drops on editor padding/dead zones BlockNote does not cover

Files changed

File Purpose
ui/src/lib/editorImagePaste.ts MIME allowlist, clipboard extraction, placeholder tokens, relative refs
ui/src/lib/editorImagePasteExtension.ts CodeMirror paste/drop + onDocChange React sync
ui/src/lib/editorVisualImageDrop.ts Visual-mode wrapper dead-zone drops
ui/src/components/EditorImageDropOverlay.tsx Drag overlay UI
ui/src/components/KiwiEditor.tsx Upload wiring, save gating, error toast, drop handlers
ui/src/components/editor/MarkdownSourceEditor.tsx Mounts paste extension
ui/src/lib/*.test.ts 19 targeted unit tests

Test plan

  • cd ui && npm test -- editorImagePaste editorVisualImageDrop — 19 passed
  • cd ui && npm test — 208 passed
  • Manual: paste screenshot in source mode → uploads → markdown image inserted
  • Manual: paste screenshot in visual mode → BlockNote image block with URL
  • Manual: drag image onto editor padding → image block inserted
  • Manual: upload > max size → error toast, placeholder removed

Array Fleet and others added 14 commits July 3, 2026 09:57
Enable clipboard paste and drag-and-drop image upload in both visual
(BlockNote) and source (CodeMirror) editor modes with loading placeholders,
standardized paste filenames, and error toasts.

Co-authored-by: Cursor <cursoragent@cursor.com>
CodeMirror upload already renames via uploadAssetForEditor; derive alt
text from the uploaded asset ref instead of pre-renaming the file twice.

Co-authored-by: Cursor <cursoragent@cursor.com>
…kiwifs#425)

Delegate file rename to the upload callback (same as CodeMirror path) and
derive alt text from the uploaded asset ref basename.

Co-authored-by: Cursor <cursoragent@cursor.com>
Block source-mode save while uploads are in-flight, fix Safari clipboard
extraction fallback, add paste/drop handler tests, and remove unused
ProseMirror plugin to avoid double-handling with BlockNote uploadFile.

Co-authored-by: Cursor <cursoragent@cursor.com>
…iwifs#425)

Include onUploadStart/onUploadEnd in MarkdownSourceEditor.imagePaste typing
so source-mode save gating receives upload lifecycle events. Add 2026-07-03
delivery episode log.

Co-authored-by: Cursor <cursoragent@cursor.com>
Track BlockNote uploadFile lifecycle with pending upload counter so
autosave and manual save wait for in-flight paste/drop uploads in both
editor modes.

Co-authored-by: Cursor <cursoragent@cursor.com>
)

Run upload-pending checks before setSaveStatus("saving") so autosave
and Cmd+S during paste uploads leave the dirty indicator unchanged.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Record hands-on test verification and PR publish for image paste from
clipboard after failed fleet delivery check.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Document peer-review pass and green test runs after fleet delivery check
failure.

Co-authored-by: Cursor <cursoragent@cursor.com>
Guard save gating while kiwi-upload:// placeholders remain in source
markdown; records final hands-on delivery verification.

Co-authored-by: Cursor <cursoragent@cursor.com>
Add onDocChange to CodeMirror paste extension so controlled sourceText
tracks upload placeholders, and handle visual-mode drops on wrapper dead
zones outside the BlockNote surface.

Co-authored-by: Cursor <cursoragent@cursor.com>
Record test verification (19 targeted, 208 full UI) after peer-review
fixes for source-mode onDocChange sync and visual wrapper drop handling.

Co-authored-by: Cursor <cursoragent@cursor.com>
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.

feat(ui): image paste from clipboard in editor

1 participant