Add Markdown for banner description and warning #366
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ewoerner
requested changes
Apr 4, 2024
This commit introduces react-markdown and allows a small subset of basic markdown syntax to be used in banner descriptions and warnings. It also adds a new tooltip during banner creation that explains which parts of markdown are allowed. We explicitly only allow a small number of things. Images and headings are not allowed, as they could break our page layout.
ewoerner
approved these changes
Apr 7, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds Markdown support for both the banner description and banner warning. I've put a bit of detail into #310 already. Here's a summary.
We use react-markdown, which seems to be the most popular choice in the React ecosystem for rendering markdown. It offers XSS protection and can be extended, should we want it.
We only allow basic formatting in Markdown:
I've opted not to support links and images. I think images are too disruptive for the flow of the website. I think we should discuss whether we want links to be allowed. It's possible at the moment to put URLs in, but they would just not be turned into a clickable link.
Markup that is not allowed will be removed, leading to images and headings being stripped out completely.
I've also added a tooltip to the banner creation screen that includes a short explanation of what's allowed. This is available in all three languages, with the Spanish provided by a native speaker from Argentina.
I've also fixed a console error I noticed for the banner editing buttons on the banner screen.The banner
london-skyline-830fin the test environment has example data for this to be tried out.Here's a screen recording of it working on the desktop site.
Closes #310.