91 lines
5.6 KiB
Gherkin
91 lines
5.6 KiB
Gherkin
Feature: Removing an inline image from the article
|
||
|
||
As a verified RenewCMS owner writing an article
|
||
I want to take an image out of the article body, from a button or with Backspace or Delete
|
||
So that an unwanted image leaves the article without deleting the file from my library
|
||
|
||
Background:
|
||
Given this slice is SPA only for this file; the Go alias deletion is in
|
||
features/remove_legacy_article_image_alias.feature
|
||
And docs/design/screens/media-picker.md now covers this flow ("Remove image: confirm" and
|
||
"Removed"); it supersedes the earlier version of this feature, which had no design
|
||
coverage and used a red confirm that deleted through DELETE /v1/article/{id}/image/{imageId}
|
||
And removing an image is a body edit only: no API call of any kind is sent, before, during
|
||
or after the confirm, and the library and every other article are untouched
|
||
And ArticleEditor keeps its exposed insertImage(src, alt, imageId) and removeImage(imageId),
|
||
its "request-remove-image" event with the image id, and its Backspace and Delete handling,
|
||
which still intercepts the keys before Tiptap deletes the node
|
||
And an image already in a body from before data-image-id existed has no id, shows no
|
||
"Remove image" button and is not intercepted by Backspace or Delete (unchanged)
|
||
And selecting an image node that carries data-image-id shows a button "Remove image" at the
|
||
image's top-right corner (8 px from the top and right): trash-2 icon at 14 px, neutral,
|
||
28 px high, 12 px medium text, a 1 px accented border and the page background; deselecting
|
||
hides it
|
||
And EditorView reacts to "request-remove-image" by opening ConfirmDialog with tone "neutral",
|
||
title "Remove this image from the article?", description "It's removed from this article
|
||
only. The file stays in your library and in any other article that uses it.", confirmLabel
|
||
"Remove image" and cancelLabel "Cancel"; the confirm button is primary, not red
|
||
And the body of the confirm is a bordered row with a 56 × 42 px thumbnail of the image, its
|
||
filename, and "Stays in the library · {size}", for example "north-wall.jpg" and "Stays in
|
||
the library · 3.9 MB"
|
||
And the filename and size come from the images the SPA has seen this session, kept by image
|
||
id: those inserted from either tab and those loaded in the Library list
|
||
And confirming runs removeImage(imageId), moves useArticleDraft to "dirty", closes the
|
||
dialog and shows the toast; the action cannot fail, so there is no inline error
|
||
And a thumbnail uses the image's src from the node
|
||
|
||
Scenario: Selecting an inserted image reveals "Remove image"
|
||
Given the user is on /article/12/edit with an image in the body carrying data-image-id "1"
|
||
When the user clicks that image
|
||
Then a button "Remove image" with a trash-2 icon shows at the image's top-right corner
|
||
When the user clicks elsewhere in the editor
|
||
Then the button is no longer shown
|
||
|
||
Scenario: An image without data-image-id has no button
|
||
Given the body has an image with no data-image-id
|
||
When the user clicks it
|
||
Then no "Remove image" button shows and Backspace does nothing special to it
|
||
|
||
Scenario Outline: Either trigger opens the neutral confirm and sends nothing
|
||
Given the image with data-image-id "1" ("north-wall.jpg", 3.9 MB, inserted this session) is selected on /article/12/edit
|
||
When the user <triggers-removal>
|
||
Then a dialog titled "Remove this image from the article?" opens, with the description "It's removed from this article only. The file stays in your library and in any other article that uses it."
|
||
And its body shows the thumbnail, "north-wall.jpg" and "Stays in the library · 3.9 MB"
|
||
And its buttons read "Cancel" and a primary "Remove image"
|
||
And no request has been sent
|
||
And the image node is still in the editor's content (Tiptap's native deletion did not run)
|
||
|
||
Examples:
|
||
| triggers-removal |
|
||
| activates the "Remove image" button |
|
||
| presses Backspace with the image node selected |
|
||
| presses Delete with the image node selected |
|
||
|
||
Scenario: The confirm for an image the session has not seen
|
||
Given the image with data-image-id "7" was in the saved body and is not in the session's record
|
||
When the user activates "Remove image"
|
||
Then the body row shows the thumbnail and "Stays in the library" with no filename and no size
|
||
|
||
Scenario: Cancelling changes nothing
|
||
Given the confirm is open for image id 1
|
||
When the user activates "Cancel"
|
||
Then the dialog closes, no request has been sent, the image is still in the content, and the draft's dirty state is unchanged
|
||
|
||
Scenario: Confirming removes the image from the body only
|
||
Given the confirm is open for image id 1 on /article/12/edit, the draft in the Saved state
|
||
When the user activates "Remove image"
|
||
Then the dialog closes and the image leaves the editor's content
|
||
And SaveStatus reads "Unsaved changes" and Save is enabled
|
||
And a toast appears: color success, icon i-lucide-circle-check, title "Image removed", description "It's still in your library."
|
||
And no request of any kind has been sent
|
||
|
||
Scenario: A removal started by Backspace behaves like one started by the button
|
||
Given the confirm is open for image id 1, opened by Backspace, the draft in the Saved state
|
||
When the user activates "Remove image"
|
||
Then the outcome is the same as above
|
||
|
||
Scenario: The removed image can be picked again
|
||
Given image id 1 was removed from the body this session
|
||
When the user opens the Library tab
|
||
Then "north-wall.jpg" no longer carries "In this article"
|