[Reader] Add support to Prompt block

[thomashorta]

The "Prompt Block" is shown in posts made on the web as an answer to the Daily Prompts. The Loop team just implemented the CSS for it to work properly both on the web and on the mobile apps but a few minor issues still needed to be resolved on the app side:

• Add --color-neutral-5 CSS variable to the Reader Renderer (even though we are not currently using it)
• Add a 1-pixel margin-right to the body of the content because Android's Webview has a bug that cuts off 1 pixel from the right
• Intercept tag URLs inside the post to show them inside the app reader

The WebView 1-pixel issue

To test

Prompt Block UI

It seems the calypso CSS changes have been deployed, so it's possible to test the block UI.

1. Install Jetpack
2. Login with a WP.com account
3. Select a blog site (has a few posts)
4. Go to My Site > Home
5. Tap "View all responses" in the Prompts card
6. Find a post that has a preview starting with "Daily writing prompt" (those are posts answered from the web)
7. Verify the Prompt block is formatted as expected

Tag URL interception

1. Install Jetpack
2. Login with a WP.com account
3. Select a blog site (has a few posts)
4. Go to My Site > Home
5. Tap "View all responses" in the Prompts card
6. Find a post that has a preview starting with "Daily writing prompt" (those are posts answered from the web)
7. Tap the "View all responses" link inside the post
8. Verify the Reader topic page is opened

Demo

Demo of the CSS fix by using the proxy to also change the provided CSS to use --color-neutral-5 in the block border, just to test that change as well (using Map Local in Charles Proxy).

redaer-prompt-block-Android.mp4

Regression Notes

1. Potential unintended areas of impact
   Content being shifted because of the border. Wrong links being intercepted.

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Manual tests.

3. What automated tests I added (or what prevented me from doing so)
   Unit tests for the ViewModel.

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• Talkback.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• Large and small screen sizes. (Tablet and smaller phones)
• Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

Note: most changes here only affect the content inside a Webview so some of the items above do not apply.

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18323-95047a7
	Commit	95047a7
	Direct Download	jetpack-prototype-build-pr18323-95047a7.apk

Note: Google Login is not supported on these builds.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18323-95047a7
	Commit	95047a7
	Direct Download	wordpress-prototype-build-pr18323-95047a7.apk

Note: Google Login is not supported on these builds.

[RenanLukas]

Thanks for the changes, @thomashorta. It's working as expected.

I've left a suggestion for a unit test and I'm approving it.

LGTM