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

[endiliey]

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

After

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit e7fd705

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

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit e7fd705

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

[yangshun]

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]

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

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]

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

[endiliey]

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

[yangshun]

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

[endiliey]

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]

Document this in #1578