Handle backslash escaping in template literals (#366)

* include failing render test for backspace literal * Add escaping for all '\' characters in template strings
mdx-js · Feb 28, 2019 · 271db5d · 271db5d
1 parent b57fd68
commit 271db5d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/packages/mdx/mdx-hast-to-jsx.js b/packages/mdx/mdx-hast-to-jsx.js
@@ -1,5 +1,6 @@
 const toStyleObject = require('to-style').object
 const {paramCase} = require('change-case')
+const {toTemplateLiteral} = require('./util')
 
 // eslint-disable-next-line complexity
 function toJSX(node, parentNode = {}, options = {}) {
@@ -175,7 +176,7 @@ MDXContent.isMDXComponent = true`
       return node.value
     }
 
-    return '{`' + node.value.replace(/`/g, '\\`').replace(/\$/g, '\\$') + '`}'
+    return toTemplateLiteral(node.value)
   }
 
   if (node.type === 'comment') {

diff --git a/packages/mdx/test/fixtures/ponylang.mdx b/packages/mdx/test/fixtures/ponylang.mdx
@@ -0,0 +1,20 @@
+some `\annotation\` for something \unlikely\ like this
+
+```pony
+if \likely\ cond then
+  foo
+end
+
+while \unlikely\ cond then
+  bar
+end
+
+repeat
+  baz
+until \likely\ cond end
+
+match obj
+| \likely\ expr => foo
+| \unlikely\ let capt: T => bar
+end
+```
diff --git a/packages/mdx/test/index.test.js b/packages/mdx/test/index.test.js
@@ -16,6 +16,10 @@ const fixtureBlogPost = fs.readFileSync(
   path.join(__dirname, './fixtures/blog-post.md')
 )
 
+const fixturePonylang = fs.readFileSync(
+  path.join(__dirname, './fixtures/ponylang.mdx')
+)
+
 const parse = code =>
   babel.parse(code, {
     plugins: [
@@ -145,13 +149,17 @@ it('Should preserve newlines in code blocks', async () => {
 # Add main script
 COPY start.sh /home/start.sh
 \`\`\`
-  `,
+    `,
     {hastPlugins: [prism]}
   )
 
   expect(result).toContain('{`# Add main script`}</MDXTag>{`\n`}')
 })
 
+it('Should not escape literals in code blocks or inline code', async () => {
+  await expect(() => renderWithReact(fixturePonylang)).not.toThrow()
+})
+
 it('Should preserve infostring in code blocks', async () => {
   const result = await mdx(
     `

diff --git a/packages/mdx/util.js b/packages/mdx/util.js
@@ -4,8 +4,17 @@ const EXPORT_DEFAULT_REGEX = /^export default/
 const BLOCKS_REGEX = '[a-z\\.]+(\\.){0,1}[a-z\\.]'
 const EMPTY_NEWLINE = '\n\n'
 
+const toTemplateLiteral = text => {
+  const escaped = text
+    .replace(/`/g, '\\`') // Escape "`"" since
+    .replace(/\\/g, '\\\\') // Escape all "\" to avoid unwanted escaping in text nodes
+
+  return '{`' + escaped + '`}'
+}
+
 module.exports.EMPTY_NEWLINE = EMPTY_NEWLINE
 module.exports.BLOCKS_REGEX = BLOCKS_REGEX
 module.exports.isImport = text => IMPORT_REGEX.test(text)
 module.exports.isExport = text => EXPORT_REGEX.test(text)
 module.exports.isExportDefault = text => EXPORT_DEFAULT_REGEX.test(text)
+module.exports.toTemplateLiteral = toTemplateLiteral