JSFiddle - React, Tailwind, and code Playground

contenteditable and new paragraphs

by tonytlwu

HTML

<h4>Challenge</h4>
<p>Add a new line or paragraph after <button>Button 1</button></p>
<div contenteditable>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p><button>Button 1</button></p>
</div>
<hr />
<h4>Expected result</h4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p><button>Button 1</button><br>Here's a new line after a linebreak.</p>
<p>Here's a new paragraph.</p>

CSS

body {
  font-family: sans-serif;
}

hr {
  border-left: none;
  border-right: none;
  margin: 20px 0;
}

[contenteditable] {
  padding: 10px;
  border: 1px solid #e9e9e9;
}

[contenteditable]:hover {
  border-color: #d9d9d9;
}

button {
  -webkit-user-select: none;
}