After the user selects "Yes" on the image inspector (T290045), they are taken to the caption step. This is a WYSIWYG "in context" experience.
* Animation on arrival
** While the image is loading, the user should see a gray placeholder for the image at the top of the article.
** The header should have a spinner and say, "Loading image preview..."
** Once loaded, the header has a back arrow that returns to the image inspector step.
** Ideally, the gray placeholder should be the same size and shape of the incoming image, but we want to inherit whatever Visual Editor does by default if possible.
** At this time, the image inspector also animates down and away.
** The focus should be such that the caption box is about a third of the way down the screen. The user should be able to see the bottom of the image preview, the caption box, and the top of the article.
* Onboarding
** As soon as is possible after the user has selected "Yes" on the image inspector, an onboarding dialog should appear.
** See {T292887}
* Caption adding experience
** After the user dismisses the onboarding (or if they don't get onboarding), the focus should be in the caption box with the device keyboard open.
** The article text should be shown at Base20 color here instead of black.
** The image preview should be at the top of the article.
** On the bottom of the image preview is a row of gray overlay, which on the righthand side says, "View details" with an "i" icon. Tapping anywhere on this row opens the image details dialog. See {T290782}.
** Below the image preview is the caption box.
*** It contains hint text: "Write a short caption describing how this image is relevant to "[ARTICLE]". The actual name of the article should be substituted in. The hint text should be in the UI language, not the content language, but the article title will be in the content language.
*** In the lower right, it contains a question mark icon, which brings up the onboarding dialog in T292887. When brought up from this interaction, the "don't show this again" checkbox should not be present.
*** As the user writes their captions, the caption area grows dynamically if the user writes a lot of text (as opposed to being a scrollable area).
** Caption validation
*** We will not include caption validation in the first iteration. It is tasked separately here: {T292888}
** Until the user puts text in the caption box, the Publish button in the upper right is not active.
** Once they have some text, the button turns blue and they are able to tap it. It takes them to the edit summary screen: {T290784}.
* If the user taps the back arrow in the header, they should return to the image inspector step without their selection chosen. In other words, it should look exactly as it did when they first arrived on the image inspector at the start of the task.
//Mockup as of 2021-10-08:// {F34680263}
Figma: https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=3043%3A10770