Fix to pass vfile to plugins

Closes GH-588.

Co-authored-by: Aslak Hellesøy <[email protected]>

Author: wooorm

package.json

@@ -86,7 +86,8 @@
     "space-separated-tokens": "^1.1.0",
     "style-to-object": "^0.3.0",
     "unified": "^9.0.0",
-    "unist-util-visit": "^2.0.0"
+    "unist-util-visit": "^2.0.0",
+    "vfile": "^4.0.0"
   },
   "peerDependencies": {
     "@types/react": ">=16",

src/react-markdown.js

@@ -1,6 +1,7 @@
 'use strict'
 
 const React = require('react')
+const vfile = require('vfile')
 const unified = require('unified')
 const parse = require('remark-parse')
 const remarkRehype = require('remark-rehype')
@@ -98,21 +99,24 @@ function ReactMarkdown(options) {
     .use(options.rehypePlugins || [])
     .use(filter, options)
 
-  let children = options.children
+  /** @type {vfile} */
+  let file
 
-  if (typeof children !== 'string') {
-    if (children !== undefined && children !== null) {
+  if (typeof options.children === 'string') {
+    file = vfile(options.children)
+  } else {
+    if (options.children !== undefined && options.children !== null) {
       console.warn(
-        `[react-markdown] Warning: please pass a string as \`children\` (not: \`${children}\`)`
+        `[react-markdown] Warning: please pass a string as \`children\` (not: \`${options.children}\`)`
       )
     }
 
-    children = ''
+    file = vfile()
   }
 
   /** @type {Root} */
   // @ts-ignore we’ll throw if it isn’t a root next.
-  const hastNode = processor.runSync(processor.parse(children))
+  const hastNode = processor.runSync(processor.parse(file), file)
 
   if (hastNode.type !== 'root') {
     throw new TypeError('Expected a `root` node')

test/__snapshots__/react-markdown.test.js.snap

@@ -2327,6 +2327,21 @@ Array [
 ]
 `;
 
+exports[`should pass on raw source position to non-tag components if rawSourcePos option is enabled and \`rehype-raw\` is used 1`] = `
+Object {
+  "end": Object {
+    "column": 6,
+    "line": 1,
+    "offset": 5,
+  },
+  "start": Object {
+    "column": 1,
+    "line": 1,
+    "offset": 0,
+  },
+}
+`;
+
 exports[`should render empty link references 1`] = `"<p>Stuff were changed in [][]. Check out the changelog for reference.</p>"`;
 
 exports[`should render image references 1`] = `"<p>Checkout out this ninja: <img src=\\"/assets/ninja.png\\" alt=\\"The Waffle Ninja\\"/>. Pretty neat, eh?</p>"`;

test/react-markdown.test.js

@@ -581,6 +581,27 @@ test('should pass on raw source position to non-tag components if rawSourcePos o
   expect(component.toJSON()).toMatchSnapshot()
 })
 
+test('should pass on raw source position to non-tag components if rawSourcePos option is enabled and `rehype-raw` is used', () => {
+  const input = '*Foo*'
+  /**
+   * @param {Object} props
+   * @param {Position} [props.sourcePosition]
+   */
+  const em = ({sourcePosition}) => {
+    expect(sourcePosition).toMatchSnapshot()
+    return ''
+  }
+
+  renderer.create(
+    <Markdown
+      children={input}
+      rawSourcePos
+      rehypePlugins={[raw]}
+      components={{em}}
+    />
+  )
+})
+
 test('should skip nodes that are not defined as allowed', () => {
   const input =
     '# Header\n\nParagraph\n## New header\n1. List item\n2. List item 2'