Editable HTML element

<style>
  #comment {
    min-height: 50px;
    max-height: 100px;
    width: 500px;
  }
  .edit {
    box-sizing: border-box;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  }
</style>

<div id="comment" contenteditable="false">Text for test editable element</div>
<button onClick="toggleEdit(event)">Edit</button>

<script>
  function toggleEdit(e){
    let comment = document.querySelector("#comment");
    if (comment.contentEditable == "true") {
      comment.contentEditable = "false";
      e.target.innerHTML = "Edit";
      comment.classList.remove("edit");
    } else {
      comment.contentEditable = "true";
      e.target.innerHTML = "Done";
      comment.classList.add("edit");
    }
  }
</script>