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

Improper rendering of tables with escaped HTML entities #1219

Closed
akrantz01 opened this issue Aug 11, 2020 · 1 comment · Fixed by #1382
Closed

Improper rendering of tables with escaped HTML entities #1219

akrantz01 opened this issue Aug 11, 2020 · 1 comment · Fixed by #1382
Labels
🙉 open/needs-info This needs some more info 🐛 type/bug This is a problem

Comments

@akrantz01
Copy link

Subject of the issue

When I try to put an escaped HTML entity in a code block within a table, it throws an error. I ran across this when using Docusaurus and needed to use the pipe character in a code block in a table. When I try to use an escaped HTML entity in a code block in a table cell (i.e. <code>test with HTML and entities &amp; &#124;</code>) in the playground, it throws the error TypeError: e.trim is not a function.

Your environment

  • OS: Windows 10.0.18362
  • Packages: MDX 1.6.16, MDX React 1.6.16, Docusaurus v2.0.0-alpha61
  • Env: Node 12.18.2, NPM 6.14.5, Yarn 1.22.4

Steps to reproduce

For Docusaurus, I made an example gist with the config and markdown to use: https://gist.github.com/akrantz01/05a917f9dea75fb73d9991beddc58c84. (I had initially raised this issue in facebook/docusaurus#3246).

In the playground, trying to render/parse the following causes an error:

| Number | Test | Expected |
|-|-|-|
| 1 | `&amp` | Preformatted text w/o rendered entity |
| 2 | <code>&amp;</code> | Preformatted text w/ rendered entity |
| 3 | `test with backticks` | Preformatted text |
| 4 | `test with backticks and entities &amp; &#124;` | Preformatted text w/o rendering the entity |
| 5 | <code>test with HTML</code> | Preformatted text |
| 6 | <code>test with HTML and entities &amp; &#124;</code> | Preformatted text w/ rendering the entity |

However, if you remove the last line, it displays with no errors.

Expected behaviour

I expect for it to render the entire table with each of the HTML entities replaced as necessary.

expected

Actual behaviour

The parser throws an error and it does not get displayed.

actual

@akrantz01 akrantz01 added 🐛 type/bug This is a problem 🙉 open/needs-info This needs some more info labels Aug 11, 2020
@tnorlund
Copy link

I'm having this issue too. Can we get an update on this?

wooorm added a commit that referenced this issue Dec 15, 2020
This PR changes the internals of the core `@mdx-js/mdx` package to generate a
JavaScript syntax tree instead of a string.
This fixes escaping issues such as #1219.
It makes `mdx-hast-to-jsx` much more palatable.
It also prevents several Babel parses.
It paves the way for passing in Babel plugins, which is useful for users, but
also for us to compile to `React.createElement`, `_jsx`, or Vue’s `h` calls
directly and make MDX’s output directly usable.

* `babel-plugin-apply-mdx-type-props`: add `parentType`
* `mdx`: use `rehype-minify-whitespace` to remove superfluous whitespace
* `mdx`: use `hast-util-to-estree` to transform hast to estree
* `mdx`: use `estree-to-babel` to transform estree to Babel
* `mdx`: generate estree/Babel instead of strings
* `mdx`: use `@babel/generator` to serialize Babel AST
* `vue`: stop supporting the react transform: (it doesn’t make sense)
* `vue`: fix support for props to components

Related to GH-741.
Related to GH-1152.

Closes GH-606.
Closes GH-1028.
Closes GH-1219.
wooorm added a commit that referenced this issue Dec 18, 2020
This PR changes the internals of the core `@mdx-js/mdx` package to generate a
JavaScript syntax tree instead of a string.
This fixes escaping issues such as #1219.
It makes `mdx-hast-to-jsx` much more palatable.
It also prevents several Babel parses.
It paves the way for passing in Babel plugins, which is useful for users, but
also for us to compile to `React.createElement`, `_jsx`, or Vue’s `h` calls
directly and make MDX’s output directly usable.

* `babel-plugin-apply-mdx-type-props`: add `parentType`
* `mdx`: use `rehype-minify-whitespace` to remove superfluous whitespace
* `mdx`: use `hast-util-to-estree` to transform hast to estree
* `mdx`: use `estree-to-babel` to transform estree to Babel
* `mdx`: generate estree/Babel instead of strings
* `mdx`: use `@babel/generator` to serialize Babel AST
* `vue`: stop supporting the react transform: (it doesn’t make sense)
* `vue`: fix support for props to components

Related to GH-741.
Related to GH-1152.

Closes GH-606.
Closes GH-1028.
Closes GH-1219.
wooorm added a commit that referenced this issue Dec 18, 2020
This PR changes the internals of the core `@mdx-js/mdx` package to generate a
JavaScript syntax tree instead of a string.
This fixes escaping issues such as #1219.
It makes `mdx-hast-to-jsx` much more palatable.
It also prevents several Babel parses.
It paves the way for passing in Babel plugins, which is useful for users, but
also for us to compile to `React.createElement`, `_jsx`, or Vue’s `h` calls
directly and make MDX’s output directly usable.

* `babel-plugin-apply-mdx-type-props`: add `parentType`
* `mdx`: use `rehype-minify-whitespace` to remove superfluous whitespace
* `mdx`: use `hast-util-to-estree` to transform hast to estree
* `mdx`: use `estree-to-babel` to transform estree to Babel
* `mdx`: generate estree/Babel instead of strings
* `mdx`: use `@babel/generator` to serialize Babel AST
* `vue`: stop supporting the react transform: (it doesn’t make sense)
* `vue`: fix support for props to components

Related to GH-741.
Related to GH-1152.

Closes GH-606.
Closes GH-1028.
Closes GH-1219.
Closes GH-1382.

Reviewed-by: Christian Murphy <[email protected]>
wooorm added a commit that referenced this issue Dec 18, 2020
This PR changes the internals of the core `@mdx-js/mdx` package to generate a
JavaScript syntax tree instead of a string.
This fixes escaping issues such as #1219.
It makes `mdx-hast-to-jsx` much more palatable.
It also prevents several Babel parses.
It paves the way for passing in Babel plugins, which is useful for users, but
also for us to compile to `React.createElement`, `_jsx`, or Vue’s `h` calls
directly and make MDX’s output directly usable.

* `babel-plugin-apply-mdx-type-props`: add `parentType`
* `mdx`: use `rehype-minify-whitespace` to remove superfluous whitespace
* `mdx`: use `hast-util-to-estree` to transform hast to estree
* `mdx`: use `estree-to-babel` to transform estree to Babel
* `mdx`: generate estree/Babel instead of strings
* `mdx`: use `@babel/generator` to serialize Babel AST
* `vue`: stop supporting the react transform: (it doesn’t make sense)
* `vue`: fix support for props to components

Related to GH-741.
Related to GH-1152.

Closes GH-606.
Closes GH-1028.
Closes GH-1219.
Closes GH-1382.

Reviewed-by: Christian Murphy <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🙉 open/needs-info This needs some more info 🐛 type/bug This is a problem
Development

Successfully merging a pull request may close this issue.

2 participants