Adding Markdown support to Legend text #1279
Conversation
| // https://github.com/remarkjs/react-markdown/issues/635 | ||
| jest.mock('react-markdown', () => (props: { children: React.ReactNode }) => { | ||
| return <>{props.children}</>; | ||
| }); |
There was a problem hiding this comment.
This is unfortunately, I would have rather rendered this properly in our jest tests. However, the alternative approach seemed more frustrating to maintain than the value it would provide.
See: remarkjs/react-markdown#635
Example alternative:
|
Build succeeded and deployed at https://prism-1279.surge.sh |
|
@gislawill can you add a temp example in one oft the mozambique legends for this PR? |
Can do! Just added an example under INAM aggregate rainfall |
| </Typography> | ||
| ), | ||
| }} | ||
| allowedElements={['p', 'h5', 'strong', 'em', 'a']} |
There was a problem hiding this comment.
Is there a reason to limit elements here? If so, it might be useful to reference allowed elements somewhere else. In the readme maybe or next to the the legendText type?
There was a problem hiding this comment.
Many of the theoretically allowable elements would not have acceptable formatting here (thinking of examples like tables, lists, code, etc). Rather than try to build reasonably acceptable formatting for all of these elements, I decided to limit to the elements I believe this feature request is intended for.
Good idea, I'll add a note to the readme what exactly is supported
|
@wadhwamatic, added the following links. The CHIRPS update was applied in every legend text that had the hyperlink (including translation files) |
There was a problem hiding this comment.
Tested across multiple countries / scenarios. All looks good. Nice work @gislawill
wadhwamatic
deleted the
1233-feature-request-support-markdown-in-layer-legend-text
branch
Description
This addresses feature request #1233 by adding markdown support for the Legend text in the LegendItem component.
I chose to use the react-markdown library due to it's widespread usage and simple API. There are many more capabilities and customizations we can choose to adopt in the future.
This PR adds support for italics, bold, and links. There are many more elements we could add support for (i.e. an underline without link, strikethrough, headers, tables, lists, etc) — we'll just need to ensure the styling works for our needs.
Note: we're not using the latest version of react-markdown (v9) because it requires an updated version of react (v18 compared to our v16). I don't think we're missing out on much in v9 tbh.
Note 2: by default, links generated by markdown open in the current tab. We can override to open in a new tab if preferred (I do think that's what users would expect so I plan to add this).Updated ✅How to test the feature:
@wadhwamatic are there any immediate use-cases for this markdown? If so, I can update the json now so we can use real examples for QA.
Checklist - did you ...
Test your changes with
REACT_APP_COUNTRY=rbd yarn startREACT_APP_COUNTRY=cambodia yarn startREACT_APP_COUNTRY=mozambique yarn startScreenshot/video of feature:
Example usage:
Generated html:
