JSFiddle - React, Tailwind, and code Playground

by lichangwei

HTML

<!-- html is the same -->
<div class="content-editable"
    placeholder="Type something here..." 
    contenteditable="true"
    strip-br="true" required></div>

CSS

/*simple style-reset*/
*{
	margin: 0;
	padding: 0;
}

/*default css that you provided*/
.content-editable {
    outline-width: 0;
    min-height: 1em;
    max-height: 300px;
    line-height: 1em;
    overflow-y: scroll;
    font-size: 44px;
    padding: 10px;
    border: 1px solid cyan;
}
.content-editable:empty:before {
    content: attr(placeholder);
}


/*my added css*/
.content-editable {
	/*hides ugly unneccessary scrollbars*/
	overflow: hidden;

	/*allows proper positioning of `before` area*/
	position: relative;
    
    /*breaks long words into multiple lines - firefox needs it*/
    word-wrap: break-word;
}

.content-editable:empty::before {
	/*useless - used to identify the `before` area*/
	/*background: red*/

	/*following css is used to make `before` element span the entire editable div*/
	position: absolute;
	top: 0;
	left: 0;

    padding: 10px;  /*must be as much as the editable div, so that text and placeholder appear at same height*/

    width: 100%;
	height: 100%;
}

JavaScript

// no js