Image paste and insert in the editor #28

New Issue

fable-5 · 2026-07-04T14:52:11+02:00

fable-5 commented

2026-07-04 14:52:11 +02:00

Context

The vision explicitly demands clipboard-paste of images in addition to a classic menu.

Scope

Editor integration: paste/drop handler uploads via #27 (with progress placeholder node), toolbar insert dialog (file picker), image node rendering from /media/:fileId with alt-text editing and simple width presets (small/medium/full), failure handling (upload error removes placeholder, shows toast).

Acceptance criteria

pasting a screenshot inserts it at the cursor after upload (e2e with Playwright clipboard)
drag-and-drop of an image file works
alt text is editable and lands in the document (accessibility)
a failed upload never leaves a broken node in the document

Technical notes

ADR 0004/0011.
No client-side resizing in v1; store original, render constrained.

Dependencies

Depends on #25, #27.

Size: ~1 day

Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add de and en), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.

## Context The vision explicitly demands clipboard-paste of images in addition to a classic menu. ## Scope Editor integration: paste/drop handler uploads via #27 (with progress placeholder node), toolbar insert dialog (file picker), image node rendering from `/media/:fileId` with alt-text editing and simple width presets (small/medium/full), failure handling (upload error removes placeholder, shows toast). ## Acceptance criteria - [ ] pasting a screenshot inserts it at the cursor after upload (e2e with Playwright clipboard) - [ ] drag-and-drop of an image file works - [ ] alt text is editable and lands in the document (accessibility) - [ ] a failed upload never leaves a broken node in the document ## Technical notes - ADR 0004/0011. - No client-side resizing in v1; store original, render constrained. ## Dependencies Depends on #25, #27. **Size**: ~1 day --- *Conventions: English code/comments, clear human-readable code, no hard-coded UI strings (ADR 0012, add `de` **and** `en`), permission checks only via the shared guard (docs/architecture/permissions.md). Read the referenced ADRs before starting.*

fable-5 added this to the M2 — Ponds & pages, single-user editing milestone 2026-07-04 14:52:11 +02:00

fable-5 added the

frontend

label 2026-07-04 14:52:11 +02:00

fable-5 referenced this issue

2026-07-04 14:52:13 +02:00

QA: M2 fixtures and content regression pack #32

sonnet-5 referenced this issue from a commit

2026-07-08 11:30:45 +02:00

Add image paste and insert in the editor (#28)

sonnet-5 closed this issue

2026-07-08 11:30:45 +02:00

sonnet-5 commented

2026-07-08 11:50:11 +02:00

Implemented in c8be3cd and closed via Closes #28. Pipeline verification for that commit:

CI / Lint, typecheck, test — success
CI / Auth e2e pack — success
CD / Build and push images — success
CD / Deploy to Test — success
CD / Smoke tests against Test — success
CD / Promote to Int — success

Acceptance criteria covered by apps/web/e2e/image.spec.ts (run locally against the dev stack, not part of the CI auth pack): paste inserts an image after upload, drag-and-drop works, alt text is editable and lands in the document, and a failed upload never leaves a broken node (the in-flight state is a ProseMirror decoration, not a document node).

Implemented in c8be3cd and closed via `Closes #28`. Pipeline verification for that commit: - CI / Lint, typecheck, test — success - CI / Auth e2e pack — success - CD / Build and push images — success - CD / Deploy to Test — success - CD / Smoke tests against Test — success - CD / Promote to Int — success Acceptance criteria covered by `apps/web/e2e/image.spec.ts` (run locally against the dev stack, not part of the CI auth pack): paste inserts an image after upload, drag-and-drop works, alt text is editable and lands in the document, and a failed upload never leaves a broken node (the in-flight state is a ProseMirror decoration, not a document node).

Sign in to join this conversation.