Extra line rendered to the end

[estevanmaito]

Every code editor rendered creates a new line in the end.

Code like this (the ` `` is just to avoid syntax breaking here):

```jsx live=true
<span class="inline-block w-2 h-2 mr-2 bg-red-600 rounded-full"></span>
<span class="inline-flex items-center justify-center px-2 py-1 mr-2 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">9</span>
<span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">99+</span>
` ``

Turns into this:

It can be seen live here

The important code for the live editor is below and the entire component code can be found here

return (
      <div className="overflow-hidden rounded-lg">
        <LiveProvider
          code={children}
          transformCode={(code) => '/** @jsx mdx */' + `<>${code}</>`}
          scope={{ mdx }}
          theme={theme}>
          <LivePreview className="p-4 border-t border-l border-r rounded-t-lg" />
          <LiveEditor
            className="overflow-x-auto break-normal"
            style={{
              fontFamily: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
            }}
          />
          <LiveError />
        </LiveProvider>
      </div>
    )

This is the Provider

import React from 'react'
import '../css/tailwind.css'
import { MDXProvider } from '@mdx-js/react'

import CodeBlock from '../components/CodeBlock'

const mdComponents = {
  pre: (props) => <div {...props} />,
  code: CodeBlock,
}

export default ({ Component, pageProps }) => (
  <MDXProvider components={mdComponents}>
    <Component {...pageProps} />
  </MDXProvider>
)

[andyeskridge]

I was running into this problem myself and have a simple workaround for now. Just .trim()ing the children when passing them to the LiveProvider code prop works for me.

[estevanmaito]

Wow, I tried trimming the transformed code, but didn't try the children. It solved the problem! Thank you.