-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use
remarkable
for Markdown formatting to support React Native (#283)
Contributes to #139 This PR uses the [`remarkable`][remarkable] library to transform Markdown into HTML instead of `marked`. While `marked` is a competent library, it uses regular expressions to parse Markdown which include a [syntax currently unsupported by the Hermes JS engine](facebook/hermes#1027). In contrast, `remarkable` does use any regular expressions to parse so it seems to work just fine in React Native. After switching to `remarkable`, using `<FhirValue>` in an Expo application to display Markdown content in HTML resulted in a new error. This turned to be a straightforward issue that the `dompurify` library cannot sanitize an HTML string with access to the DOM. Thus, this PR narrows HTML sanitizing to only be done when `dompurify` can do so. ## How can I test this change? Create a new Expo app using the bonfhir template for it. Add a `<FhirValue>` with some example Markdown content styled as HTML and validate that the HTML shows up literally on the Android screen. ```tsx const exampleMarkdown = "# Footer\n\nThis is a footer"; function ExampleScreen() { return <FhirValue options={{ style: "html" }} type="markdown" value={exampleMarkdown} /> } ``` The above should show something like: ```html <h1>Footer</h1> <p>This is a footer</p> ``` ## Caveat This helps make `@bonfhir/core` and `@bonfhir/react` more compatible with React Native configured with Hermes by addressing specific issues. Full Hermes compatibility is not confirmed yet however as testing the complete surface of Bonfhir libraries and APIs is out of scope of this fix. We welcome the community finding more compatibility issues however that we can prioritize and address as needed! [remarkable]: https://github.com/jonschlinkert/remarkable
- Loading branch information
Showing
9 changed files
with
91 additions
and
29 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@bonfhir/core": patch | ||
--- | ||
|
||
Use `remarkable` instead of `marked` to format Markdown content. This avoids using regular expression syntax that isn't yet supported by the Hermes JS engine, allowing `@bonfhir/core` to load without error in Expo / React Native applications. |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@bonfhir/react": patch | ||
--- | ||
|
||
Only sanitize HTML output from Markdown formatting when formatted where a DOM is available (browser, Deno, etc.). Platforms without a DOM (React Native) have other means of rendering and sanitizing a given Markdown or HTML string into a relatively safe and usable UI. |
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
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
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
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
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
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.