Skip to content

Comments

fix(v2): handle case when <code> children is not a string#1584

Merged
yangshun merged 1 commit intomasterfrom
endiliey/fix-codeblock
Jun 7, 2019
Merged

fix(v2): handle case when <code> children is not a string#1584
yangshun merged 1 commit intomasterfrom
endiliey/fix-codeblock

Conversation

@endiliey
Copy link
Contributor

@endiliey endiliey commented Jun 7, 2019

Motivation

Fix #1581

We should only pass our codeblock component if it's content is a string.
Note that this bug is because MDX turns <div> or react component to real react element.

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

import BrowserWindow from '../components/BrowserWindow';

<pre><code>
  <BrowserWindow url="http://localhost:3000" >
    Lol bro
  </BrowserWindow>
</code></pre>

Before
before-error-codeblock

After
fix-reactchildren on codeblock

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jun 7, 2019
@endiliey endiliey requested review from wgao19 and yangshun June 7, 2019 11:25
@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Jun 7, 2019

Deploy preview for docusaurus-2 ready!

Built with commit e7fd705

https://deploy-preview-1584--docusaurus-2.netlify.com

@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented Jun 7, 2019

Deploy preview for docusaurus-preview ready!

Built with commit e7fd705

https://deploy-preview-1584--docusaurus-preview.netlify.com

yangshun
yangshun approved these changes Jun 7, 2019
View reviewed changes
Copy link
Contributor

@yangshun yangshun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems ok as a temporary fix but I don't think it's the most robust approach 🤔

Ideally we find out the reason for the extra newline and fix it, or trim() only when it's a string.

@endiliey
Copy link
Contributor Author

endiliey commented Jun 7, 2019

Hmm.. I feel this is the long term solution though.

Syntax highlighting doesnt work if the children is not a string.

Even mdxjs.com had error for this
mdxjs

Official mdxjs.com also use children.trim !
https://github.com/mdx-js/mdx/blob/deff36bebfedb3a9de0a0575ee9a1b55b9b8aa18/packages/gatsby-theme-mdx/src/components/code-block.js#L8-L32

@endiliey
Copy link
Contributor Author

endiliey commented Jun 7, 2019 •
edited
Loading

Even if trim is removed. It still error out (i tried locally) because Highlight expect a string, not react element

@endiliey
Copy link
Contributor Author

endiliey commented Jun 7, 2019

see https://github.com/FormidableLabs/prism-react-renderer#code

image

@yangshun yangshun merged commit 1aa0ea1 into master Jun 7, 2019
@yangshun yangshun deleted the endiliey/fix-codeblock branch June 7, 2019 15:54
@yangshun
Copy link
Contributor

yangshun commented Jun 7, 2019

I suppose it's not recommended to use <code> directly then. They should be using ``` instead.

@endiliey
Copy link
Contributor Author

endiliey commented Jun 7, 2019 •
edited
Loading

Yeah actually it was true. Why would someone use <code> and put <div> or something else after that .

But well, let's be the nice guy who handles even this kind of abuse

@wgao19
Copy link
Contributor

wgao19 commented Jun 8, 2019

Document this in #1578

@Josh-Cena Josh-Cena mentioned this pull request Dec 23, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@wgao19 wgao19 Awaiting requested review from wgao19

1 more reviewer

@yangshun yangshun yangshun approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

CLA Signed Signed Facebook CLA

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Using react children in code elements results in an error

5 participants

@endiliey @docusaurus-bot @yangshun @wgao19 @facebook-github-bot