Token lines displaying on a single line

Expected:

Actual:

This is what I’m seeing in a brand new create-react-app repo (https://github.com/jonmilner/react-live) with the following code:

import * as React from "react";
import { render } from "react-dom";

import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";

const code = `<div>
  <div>
    <h1>Hello World</h1>
  </div>
</div>`;

function App() {
  return (
    <LiveProvider code={code}>
      <LivePreview />
      <LiveError />
      <LiveEditor />
    </LiveProvider>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Interestingly, removing display: inline from the selector .npm__react-simple-code-editor__container > pre * in the browser dev tools fixes the issue. However, it doesn’t seem it can be fixed by overriding the style with any valid property.

I’m seeing this in Chrome (v73.0.3683.86) on macOS (10.14.3)

[sofiapoh]

This should be fixed by https://github.com/satya164/react-simple-code-editor/commit/a704a08c8a1727297aff2e32f70dfe97db1173c0, let me know if the problem persists!

[feychenie]

Yes, fixed with react-simple-code-editor@0.9.10 😃