RenewCMS/features/editor_image_removal.qa.md

QA: Removing an inline image from the article

Automated (Vitest + Vue Test Utils, task test:web)

Mount EditorPage at /article/12/edit with the editor_core.qa.md fixture article and a body of <img src="/static/uploadedImages/1.jpg" data-image-id="1" alt="">. Seed the session's image record with id 1 ("north-wall.jpg", 3.9 MB). Spy on request and on XMLHttpRequest and assert they are never called by any step below.

1. Selecting reveals the button - click the image; assert a button named "Remove image" with a trash-2 icon renders at the corner; click elsewhere; assert it is gone.
2. No id, no button - an image without data-image-id: no button, and a Backspace keydown does not open the dialog.
3. Triggers, Examples-driven - button click, Backspace keydown and Delete keydown each open the dialog with the exact title, description, "Cancel" and a primary (not error) "Remove image"; assert the body shows the thumbnail, "north-wall.jpg" and "Stays in the library · 3.9 MB"; assert no request; assert the node is still in the document.
4. Unseen image - id 7 not in the record; assert the row shows the thumbnail and "Stays in the library" only.
5. Cancel changes nothing.
6. Confirm - click "Remove image"; assert the dialog closes, the node is gone, SaveStatus "Unsaved changes", Save enabled, the toast (color success, icon i-lucide-circle-check, "Image removed" / "It's still in your library."), and zero requests.
7. Backspace-opened confirm gives the same outcome as 6.
8. Removed image loses its tag - open the Library after step 6; assert "north-wall.jpg" has no "In this article" tag.

Visual: task visual:check -- media-picker

The states "Remove image: confirm" and "Removed" are in the media-picker group; the setups are in editor_media_picker.qa.md. The sample data is north-wall.jpg, image id 1, 3.9 MB. The "Remove image" button is visible in "Remove image: confirm" and "Inserted", so the setup must select the image node. The confirm's confirm button must not be error-coloured.

• Keyboard and focus: the button is reachable by Tab and activates with Enter or Space. Backspace or Delete with focus outside the editor does nothing. ConfirmDialog's focus trap and default focus on "Cancel" are unchanged.

Manual verification

• Real keyboard behaviour in a real browser, including an IME: Backspace or Delete on a selected image opens the confirm instead of deleting the node (jsdom doesn't exercise ProseMirror's keymap precedence).
• Save after removal against task dev: remove an image, save, reload; the image is gone from the article and still listed in /media.