[#162048444] Markdownviewer component #808
Conversation
Affected stories
New dependencies added: bufferAuthor: Feross Aboukhadijeh Description: Node.js Buffer API, for the browser Homepage: https://github.com/feross/buffer
path-browserifyAuthor: James Halliday Description: the path module from node core for browsers Homepage: https://github.com/substack/path-browserify
|
| Created | about 3 years ago |
| Last Updated | 3 days ago |
| License | MIT |
| Maintainers | 4 |
| Releases | 44 |
| Direct Dependencies | escape-string-regexp and fbjs |
README
React Native WebView - a Modern, Cross-Platform WebView for React Native
React Native WebView is a modern, well-supported, and cross-platform WebView for React Native. It is intended to be a replacement for the built-in WebView (which will be removed from core).
We just swapped out the React Native WebView in our app with the version from React Native Community. The swap took less than a day, required almost no code modifications, and is faster and CSS works better. Props to everyone in the community (including those at Infinite Red) that helped get that component split out.
Garrett McCullough, mobile engineer at Virta Health
Platforms Supported
- iOS (both UIWebView and WKWebView)
- Android
- Windows 10 (coming soon)
Note: React Native WebView is not currently supported by Expo unless you "eject".
Versioning
If you need the exact same WebView as the one from react-native, please use version 2.0.0. Future versions will follow semantic versioning.
Getting Started
$ yarn add react-native-webview
$ react-native link react-native-webview
Read our Getting Started Guide for more.
Usage
Import the WebView component from react-native-webview and use it like so:
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";
// ...
class MyWebComponent extends Component {
render() {
return (
<WebView
source={{ uri: "https://infinite.red/react-native" }}
style={{ marginTop: 20 }}
onLoadProgress={e => console.log(e.nativeEvent.progress)}
/>
);
}
}For more, read the API Reference and Guide. If you're interested in contributing, check out the Contributing Guide.
Migrate from React Native core WebView to React Native WebView
Simply install React Native WebView and then use it in place of the core WebView. Their APIs are currently identical, except that this package defaults useWebKit={true} unlike the built-in WebView.
Troubleshooting
- If you're getting
Invariant Violation: Native component for "RNCWKWebView does not exist"it likely means you forgot to runreact-native linkor there was some error with the linking process
Contributor Notes
- I've removed all PropTypes for now. Instead, we'll be using Flow types. TypeScript types will be added at a later date.
- UIWebView is not tested fully and you will encounter some yellow warning boxes. Since it is deprecated, we don't intend to put a lot of time into supporting it, but feel free to submit PRs if you have a special use case. Note that you will need to specify
useWebKit={false}to use UIWebView - After pulling this repo and installing all dependencies, you can run flow on iOS and Android-specific files using the commands:
yarn test:ios:flowfor iOSyarn test:android:flowfor Android
- If you want to add another React Native platform to this repository, you will need to create another
.flowconfigfor it. If your platform isexample, copy the main flowconfig and rename it to.flowconfig.example. Then edit the config to ignore other platforms, and add.*/*[.]example.jsto the ignore lists of the other platforms. Then add an entry topackage.jsonlike this:"test:example:flow": "flow check --flowconfig-name .flowconfig.example"
- Currently you need to install React Native 0.57 to be able to test these types -
flow checkwill not pass against 0.56.
Maintainers
- Jamon Holmgren (Twitter @jamonholmgren) from Infinite Red
- Thibault Malbranche (Twitter @titozzz) from Brigad
- Empyrical (Twitter @empyrical)
License
MIT
remark
Author: Titus Wormer
Description: Markdown processor powered by plugins
Homepage: https://remark.js.org
| Created | about 5 years ago |
| Last Updated | 16 days ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 35 |
| Direct Dependencies | remark-parse, remark-stringify and unified |
| Keywords | markdown, abstract, syntax, tree, ast, parse, stringify and process |
README
remark 
remark is a markdown processor powered by plugins part of the
unified collective.
- API by
unified - Parses markdown to the tree with
remark-parse - mdast syntax tree
- Plugins transform the tree
- Compiles the tree to markdown using
remark-stringify
Don’t need the parser? Or the compiler? That’s OK.
Announcing the unified collective! 🎉
Read more about it on Medium »
Sponsors
🥇 ZEIT |
🥇 Gatsby |
🥉 Compositor |
Holloway |
You? |
Installation
npm:
npm install remarkUsage
Common example
This example lints markdown and turns it into HTML.
var remark = require('remark')
var recommended = require('remark-preset-lint-recommended')
var html = require('remark-html')
var report = require('vfile-reporter')
remark()
.use(recommended)
.use(html)
.process('## Hello world!', function(err, file) {
console.error(report(err || file))
console.log(String(file))
})Yields:
1:1 warning Missing newline character at end of file final-newline remark-lint
⚠ 1 warning<h2>Hello world!</h2>Settings through data
This example prettifies markdown and configures remark-parse and
remark-stringify through data.
var remark = require('remark')
remark()
.data('settings', {commonmark: true, emphasis: '*', strong: '*'})
.process('_Emphasis_ and __importance__', function(err, file) {
if (err) throw err
console.log(String(file))
})Yields:
*Emphasis* and **importance**Settings through a preset
This example prettifies markdown and configures remark-parse and
remark-stringify through a preset.
var remark = require('remark')
remark()
.use({
settings: {commonmark: true, emphasis: '*', strong: '*'}
})
.process('_Emphasis_ and __importance__', function(err, file) {
if (err) throw err
console.log(String(file))
})Yields:
*Emphasis* and **importance**License
remark-custom-blocks
Author: Victor Felder
Description: This plugin parses custom Markdown syntax to create new custom blocks. It adds new nodes types to the [mdast][mdast] produced by [remark][remark]:
Homepage: http://npmjs.com/package/remark-custom-blocks
| Created | over 1 year ago |
| Last Updated | 16 days ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 34 |
| Direct Dependencies | space-separated-tokens |
| Keywords | remark |
README
remark-custom-blocks
This plugin parses custom Markdown syntax to create new custom blocks.
It adds new nodes types to the mdast produced by remark:
{yourType}CustomBlock
If you are using rehype, the stringified HTML result will be divs with configurable CSS classes.
It is up to you to have CSS rules producing the desired result for these classes.
The goal is to let you create blocks or panels somewhat similar to these.
Each custom block can specify CSS classes and whether users are allowed or required to add a custom title to the block.
Only inline Markdown will be parsed in titles.
Installation
npm:
npm install remark-custom-blocksUsage, Configuration, Syntax
Configuration:
The configuration object follows this pattern:
trigger: {
classes: String, space-separated classes, optional, default: ''
title: String, 'optional' | 'required', optional, default: custom titles not allowed
}
Dependencies:
const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')
const remarkCustomBlocks = require('remark-custom-blocks')Usage:
unified()
.use(remarkParse)
.use(remarkCustomBlocks, {
foo: {
classes: 'a-class another-class'
},
bar: {
classes: 'something',
title: 'optional'
},
qux: {
classes: 'qux-block',
title: 'required'
},
spoiler: {
classes: 'spoiler-block',
title: 'optional',
details: true
},
})
.use(remark2rehype)
.use(stringify)The sample configuration provided above would have the following effect:
-
Allows you to use the following Markdown syntax to create blocks:
[[foo]] | content [[bar]] | content [[bar | my **title**]] | content [[qux | my title]] | content [[spoiler | my title]] | content
- Block
foocannot have a title,[[foo | title]]will not result in a block. - Block
barcan have a title but does not need to. - Block
quxrequires a title,[[qux]]will not result in a block.
- Block
-
This Remark plugin would create mdast nodes for these two blocks, these nodes would be of type:
fooCustomBlock, content will be infooCustomBlockBlodybarCustomBlock, content inbarCustomBlockBody, optional title inbarCustomBlockHeadingquxCustomBlock, content inquxCustomBlockBody, required title inquxCustomBlockHeading
-
If you're using rehype, you will end up with these 4
divs and 1details:<div class="custom-block a-class another-class"> <div class="custom-block-body"><p>content</p></div> </div> <div class="custom-block something"> <div class="custom-block-body"><p>content</p></div> </div> <div class="custom-block something"> <div class="custom-block-heading">my <strong>title</strong></div> <div class="custom-block-body"><p>content</p></div> </div> <div class="custom-block qux-block"> <div class="custom-block-heading">my title</div> <div class="custom-block-body"><p>content</p></div> </div> <details class="custom-block spoiler-block"> <summary class="custom-block-heading">my title</summary> <div class="custom-block-body"><p>content</p></div> </details>
License
remark-html
Author: Titus Wormer
Description: Compile Markdown to HTML with remark
Homepage: https://github.com/remarkjs/remark-html#readme
| Created | about 3 years ago |
| Last Updated | 16 days ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 16 |
| Direct Dependencies | hast-util-sanitize, hast-util-to-html, mdast-util-to-hast and xtend |
| Keywords | markdown, html, stringify, compile and remark |
README
remark-html
Compile markdown to HTML with remark.
⚠️ This package essentially packsremark-rehypeand
rehype-stringify, and although it does support some
customisation, it isn’t very pluggable. It’s probably smarter to use
remark-rehypedirectly and benefit from the rehype
ecosystem.
Installation
npm:
npm install remark-htmlUsage
Say we have the following file, example.md:
# Hello & World
> A block quote.
* Some _emphasis_, **importance**, and `code`.And our script, example.js, looks as follows:
var fs = require('fs')
var unified = require('unified')
var markdown = require('remark-parse')
var html = require('remark-html')
unified()
.use(markdown)
.use(html)
.process(fs.readFileSync('example.md'), function(err, file) {
if (err) throw err
console.log(String(file))
})Now, running node example yields:
<h1>Hello & World</h1>
<blockquote>
<p>A block quote.</p>
</blockquote>
<ul>
<li>Some <em>emphasis</em>, <strong>importance</strong>, and <code>code</code>.</li>
</ul>API
remark.use(html[, options])
options
All options except for sanitize are passed to
hast-util-to-html.
options.sanitize
How to sanitise the output (Object or boolean, default: false).
If false, no HTML is sanitized, and dangerous HTML is left unescaped.
If true or an object, sanitation is done by hast-util-sanitize
If an object is passed in, it’s given as a schema to hast-util-sanitize.
If true, input is sanitised according to GitHub’s sanitation rules.
Note that raw HTML in markdown cannot be sanitized, so it’s removed.
A schema can still be used to allow certain values from integrations
though.
To support HTML in markdown, userehype-raw.
For example, to add strict sanitation but allowing classNames, use
something like:
// ...
var merge = require('deepmerge')
var github = require('hast-util-sanitize/lib/github')
var schema = merge(github, {attributes: {'*': ['className']}})
remark()
.use(html, {sanitize: schema})
.processSync(/* ... */)CommonMark
You still need to set
commonmark: truein
remark-parses options.
CommonMark support is a goal but not (yet) a necessity. There are
some (roughly 115 of 550, relating to inline precedence, lists, emphasis
and importance) issues which I’d like to cover in the future. Note that
this sounds like a lot, but they have to do with obscure differences
which do not often occur in the real world.
Integrations
remark-html works great with:
remark-autolink-headings
— Automatically add links to headings in Markdownremark-github
— Generate references to GitHub issues, PRs, users, and moreremark-highlight.js
— Highlight code blocksremark-html-emoji-image
— Transform emoji unicodes into html imagesremark-html-katex
— Transform math to HTML with KaTeXremark-math
— Math support for markdown (inline and block)remark-midas
— Highlight CSS code with midasremark-toc
— Generate a Tables of Contents- ...and more
All MDAST nodes can be compiled to HTML. Unknown MDAST
nodes are compiled to div nodes if they have children or text nodes
if they have value.
In addition, remark-html can be told how to compile nodes through
three data properties (more information):
hName— Tag-name to compile ashChildren— HTML content to add (instead ofchildrenandvalue),
inHASThProperties— Map of attributes to add
For example, the following node:
{
type: 'emphasis',
data: {
hName: 'i',
hProperties: {className: 'foo'},
hChildren: [{type: 'text', value: 'bar'}]
},
children: [{type: 'text', value: 'baz',}]
}...would yield:
<i class="foo">bar</i>Contribute
See contributing.md in remarkjs/remark for ways to get
started.
This organisation has a Code of Conduct. By interacting with this
repository, organisation, or community you agree to abide by its terms.
License
rn-nodeify
Author: Unknown
Description: Run after npm install and you can use node core modules and npm modules that use them in your React Native app.
Homepage: https://github.com/mvayngrib/rn-nodeify#readme
| Created | over 3 years ago |
| Last Updated | 16 days ago |
| License | MIT |
| Maintainers | 3 |
| Releases | 46 |
| Direct Dependencies | @yarnpkg/lockfile, deep-equal, findit, fs-extra, minimist, object.pick, run-parallel, semver and xtend |
README
rn-nodeify
Run after npm install and you can use node core modules and npm modules that use them in your React Native app.
What is solves
If your project has no non-React-Native dependencies, you don't need this module, and you should just check out './shims.js' for the core node modules to use individually.
However, with bigger projects that don't reimplement every wheel from scratch, somewhere in your dependency tree, something uses a core node module. I found myself building this because in my React Native app, I wanted to use bitcoinjs-lib, levelup, bittorrent-dht, and lots of fun crypto. If that sounds like you, keep reading.
What it does
rn-nodeify --install
installs shims for core node modules, see './shims.js' for the current mappings. It recurses down node_modules and modifies all the package.json's in there to add/update the browser and react-native fields. It sounds scary because it is. However, it does work.
rn-nodeify --hack
Now that you're scared, I should also mention that there are some package-specific hacks (see './pkg-hacks.js'), for when the React Native packager choked on something that Webpack and Browserify swallowed.
If you're looking for a saner approach, check out ReactNativify. I haven't tested it myself, but I think philikon will be happy to help.
Usage
rn-nodeify <options>Options
--install install node core shims (default: install all), fix the "browser"
and "react-native" fields in the package.json's of dependencies
--hack hack individual packages that are known to make the React Native packager choke
Examples
# install all shims and run package-specific hacks
rn-nodeify --install --hack# install specific shims
rn-nodeify --install "fs,dgram,process,path,console"# install specific shims and hack
rn-nodeify --install "fs,dgram,process,path,console" --hackIt is recommended to add this command to the "postinstall" script in your project's package.json
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"postinstall": "rn-nodeify --install fs,dgram,process,path,console --hack"
}rn-nodeify will create a shim.js file in your project root directory. The first line in index.ios.js / index.android.js should be to import it (NOT require it!)
import './shim'If you are using the crypto shim, you will need to manually uncomment the line to require('crypto') in shim.js, this is because as of react-native 0.49, dynamically requiring a library is no longer allowed.
Some shims may require linking libraries, be sure to run react-native link after installing new shims if you run into problems.
Example Apps / Workflows
- the react-native-crypto package has an example workflow for using crypto in a React Native app
- this example React Native app shows how you can use levelup in React Native
Example Workflow
copied from react-native-crypto
- Install and shim
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev mvayngrib/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --installrn-nodeifywill create ashim.jsin the project root directory
// index.ios.js or index.android.js
// make sure you use `import` and not `require`!
import './shim.js'
// ...the rest of your code
import crypto from 'crypto'
// use crypto
console.log(crypto.randomBytes(32).toString('hex'))Please note...
- rn-nodeify won't work with modules that are added using
npm link. - modules that contain a .babelrc will cause problems with the latest react-native version (0.20 at this time), remove them after installation (
rm node_modules/*/.babelrc) - when installing a package from git, the postinstall hook isn't triggered, run it manually instead (
npm run postinstall) - restart the react-native packager after installing a module!
- removing the packager cache helps as well sometimes (
rm -fr $TMPDIR/react-*) - rn-nodeify currently uses
npmto install shims. PRs are welcome to make it compatible withyarn - use
npm@3.npm@5has some issues that causenode_modulesto disappear. See:
Generated by 🚫 dangerJS
fpersico
changed the title
Codecov Report
@@ Coverage Diff @@
## master #808 +/- ##
==========================================
- Coverage 49.7% 49.42% -0.28%
==========================================
Files 189 194 +5
Lines 3595 3672 +77
Branches 664 672 +8
==========================================
+ Hits 1787 1815 +28
- Misses 1805 1854 +49
Partials 3 3 |
shim.js
Outdated
| @@ -0,0 +1,26 @@ | |||
| if (typeof __dirname === 'undefined') global.__dirname = '/' | |||
There was a problem hiding this comment.
is this file autogenerated? can we add either a comment here (or in the README) explaining what it is, where does it comes from?
There was a problem hiding this comment.
Yes file is autogenerated by rn-nodeify. There is already a comment on import of the file https://github.com/teamdigitale/italia-app/pull/808/files#diff-168726dbe96b3ce427e7fedce31bb0bcR4.
There was a problem hiding this comment.
then it shouldn't be committed
| ]; | ||
|
|
||
| function getInternalRoute(href: string): Option<string> { | ||
| const parsed = href.split(INTERNAL_TARGET_PREFIX); |
There was a problem hiding this comment.
return Option(href.split(INTERNAL_TARGET_PREFIX))
.filter(_ => _.length === 2 && _[0] === "")
.chain(_ => fromNullable(ALLOWED_ROUTE_NAMES.find(_.toUpperCase()));| } | ||
|
|
||
| export function handleInternalLink(dispatch: Dispatch, href: string) { | ||
| const maybeInternalRoute = getInternalRoute(href); |
There was a problem hiding this comment.
getInternalRoute(href).map(routeName => dispatch(
NavigationActions.navigate({
routeName
})
)));| @@ -0,0 +1,184 @@ | |||
| import React from "react"; | |||
There was a problem hiding this comment.
Please add a comment that explain the purpose of this
| } | ||
| }; | ||
|
|
||
| const COMPILE_ERROR_HTML = `<p>${I18n.t("global.markdown.decodeError")}<p>`; |
There was a problem hiding this comment.
avoid the dependency to I18n, instead of rendering a decoding error, provide an optional onError callback to the component
| htmlBodyClasses?: string | ||
| ) => { | ||
| InteractionManager.runAfterInteractions(() => { | ||
| remark() |
There was a problem hiding this comment.
it seems that
remark()
.use(remarkCustomBlocks, REMARK_CUSTOM_BLOCKS_CONFIG)
.use(remarkHtml)can be executed once and the result used across instances on the component?
| @@ -0,0 +1,51 @@ | |||
| /** | |||
There was a problem hiding this comment.
this file should probably to be a .ts, not a .tsx
| @@ -0,0 +1,24 @@ | |||
| /** | |||
| * Types used by the MarkdownViewer component. | |||
There was a problem hiding this comment.
Types of messages sent from inside the webview.
| @@ -2,16 +2,15 @@ import * as pot from "italia-ts-commons/lib/pot"; | |||
| import { H1, View } from "native-base"; | |||
| import * as React from "react"; | |||
| import { StyleSheet, TouchableOpacity } from "react-native"; | |||
| import { Col, Grid } from "react-native-easy-grid"; | |||
There was a problem hiding this comment.
can't use Grid anymore now?
There was a problem hiding this comment.
Reverted. Was not working but now with the webview "autoheight" function it works as expected.
| </View> | ||
| <MarkdownViewer | ||
| markdown={message.content.markdown} | ||
| htmlBodyClasses={"message--detail"} |
There was a problem hiding this comment.
could you document the usage of this parameter? I don't see message--detail defined anywhere
No description provided.