Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle backslash escaping in template literals #366

Merged
merged 3 commits into from
Feb 28, 2019

Conversation

ChristopherBiscardi
Copy link
Member

There's a bug that exists when <code> children end in \ or have "unicode escape sequence-looking" values like \unlikely\.

I haven't been able to fix it yet, but here's a test that throws when these values are used in code blocks or inline.

It looks like these are the issue-causing sequences, which have been changed since ES2016, but only for tagged template literals. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates_and_escape_sequences

@vercel
Copy link

vercel bot commented Dec 24, 2018

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

@ChristopherBiscardi
Copy link
Member Author

It looks like changing renderWithReact to replace all \ with \\ works, but this would do it for all content and I assume there's valid cases for unicode escape sequences in markdown bodies.

const jsx = jsxa.replace(/\\/g, "\\\\")

Seems like the solution is to scope it down to happen just inside of code blocks and inline code, but for every \. Does anyone have an opinion on that?

@ghost
Copy link

ghost commented Jan 28, 2019

I had similar problem in my case I used Sometext \\ other text inside a markdown table in a markdown file and it was resulting with

<MDXTag>{`Some text `}{`\`}{` other text`}</MDXTag>

which obviously breaks because the {`\`} escapes the ` and so the string is not terminated. Temporarily I carted a md plugin js

const visit = require('unist-util-visit')
// custom plugin to fix mdx->jsx backslask escape {`\`} issue
function fixBasckslashMdPlugin() {
  return tree => visit(tree, 'text', node => {
    if (node.value === '\\') {
      node.value = '\\\\'
    }
  })
}

and put it in my mdx-js/loader in webpack

      {
        test: /.mdx?$/,
        use: [
          'babel-loader',
          {
            loader: '@mdx-js/loader',
            options: {
              mdPlugins: [
                fixBasckslashMdPlugin
              ]
            }
          }
        ]
      },

@vercel vercel bot temporarily deployed to staging February 28, 2019 19:12 Inactive
@johno johno changed the title include failing render test for backspace literal Handle backslash escaping in template literals Feb 28, 2019
@vercel vercel bot temporarily deployed to staging February 28, 2019 20:43 Inactive
@ChristopherBiscardi
Copy link
Member Author

this is looking good to me. I've been unable to get it to fail so far.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants