Usecase of contenteditable

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    
    <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
    
  </head>

  <body>
    
    <div class="item-wrapper">
      <div class="item-header">
        
        <div style="float: right">
          <button onclick="cleanTitle()">Clean Title</button>
          <button onclick="makeTitleRed()">Make Title Red</button>
        </div>
        
        <b >
          <div contenteditable="true" id="item-title" style="line-height: 161.8%">
            Let's say we have some long title here. See how it breaks?
          </div>
        </b>
        
        <div style="clear: both"></div>
      </div>
      <div class="item-body">
        Try to drag this image into the title. Hit "Clean Title" afterwards.
        <br><br>
        <img src="https://www.bersling.com/wp-content/uploads/2017/02/doge.jpeg" alt="">
      </div>
    </div>
    
  </body>

</html>

// Code goes here
function cleanTitle () {
  var title = document.getElementById('item-title');
  title.innerHTML = title.textContent || title.innerText;
}

function makeTitleRed() {
  var title = document.getElementById('item-title');
  title.innerHTML = "<span style='color: red'>" + title.innerHTML + "</span>"
}

/* Styles go here */

body {
  padding: 30px;
}

.item-wrapper {
  border: 1px solid gray;
}

.item-header {
  padding: 20px;
  background: #F0F8FF;
  border-bottom: 1px solid #ccc;
}

.item-body {
  padding: 20px;
}