word-break issue when Text is too long

[ritwickdey]

Current behaviour

• When I enter long text to the editor, first it does not show full text, 2nd the cursor stop to work.

Expected behaviour

• Should show every text and cursor should work properly. Or may be one horizontal scroll (like GitHub does)

Code sample

Please paste the code to your official sample page

import React from "react";
import ReactDOM from "react-dom";

const a = `https://www.google.com/search?ei=ryKgXbvqOZio9QOZ_YHIAQ&q=This+should+be+long+url..+Long+text.++Long+text+Long+text+Long+text++Long+text++Long+text++Long+text&oq=This+should+be+long+url..+Long+text.++Long+text+Long+text+Long+text++Long+text++Long+text++Long+text&gs_l=psy-ab.3...5010.35688..36324...20.4..0.123.6390.31j34......0....1j2..gws-wiz.....6..0i71j0i362i308i154i357j0i273j0j0i131j0i273i70i249j0i67j0i131i273j0i10j0i22i30j33i22i29i30j33i160j33i21.z-O4QjX0nwE&ved=0ahUKEwj7_aTKy5PlAhUYVH0KHZl-ABkQ4dUDCAs&uact=5` 
function App() {
  return (
    <h1> 
    Change Url1 to Url {url1}
 </h1>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Screenshots (if applicable)

What have you tried

I forked the repo and the change the style for <pre>tag to wordBreak: 'break-all'. And it works. But The problem is now it's breaking to every word. But this solution works for my case as I need json editor and all json contains multiple long links.

Your Environment

software	version
react-simple-code-editor	latest (your official doc)
react	latest (your official doc)
npm or yarn	latest (your official doc)
node	latest (your official doc)
browser	latest (~your official doc~ My browser 😈 )

[Regaddi]

Alternatively the editor could be just horizontally scrollable. IMO it shouldn't wrap any code, unless the user enters a line break.