Как написать подобное окно для ввода текста,в котором как в ворде можно будет выбирать тип шрифта

let mirror = document.getElementById("mirror"), 
  actual = document.getElementById("actual"), 
  buttons = document.getElementsByTagName("button"); 
 
mirror.addEventListener("click", e => { 
  mirror.classList.add("active"); 
  actual.focus(); 
}); 
 
actual.addEventListener("input", e => { 
  let value = e.data; 
  if (value) { 
    mirror.innerHTML = e.currentTarget.value; 
  } 
}); 
 
Array.from(buttons).forEach(item => { 
  item.addEventListener("click", e => { 
    let element = e.currentTarget; 
    switch (element.getAttribute("data-style")) { 
      case "bold": 
        actual.value = actual.value + "<b></b>"; 
        break; 
      case "italic": 
        actual.value = actual.value + "<i></i>"; 
        break; 
      case "underline": 
        actual.value = actual.value + "<u></u>"; 
        break; 
    } 
    actual.focus(); 
    actual.setSelectionRange(actual.value.length - 4, actual.value.length - 4); 
  }); 
});

body { 
  margin: 0; 
} 
 
#actual { 
  position: relative; 
  width: 80vw; 
  height: 30px; 
} 
 
#mirror { 
  position: relative; 
  border: 1px solid gray; 
  width: 80vw; 
  min-height: 30px; 
  cursor: text; 
} 
 
#mirror.active:after { 
  content: "|"; 
  margin-left: 1px; 
}

<button data-style="italic">Курсив</button> 
<button data-style="bold">Жирный</button> 
<button data-style="underline">Подчеркнутый</button> 
 
<br>Наше зеркало для ввода. Сюда нужно начать вводить текст. 
<div id="mirror"></div> 
Куда мы вводим текст на самом деле. Сюда нужно просто смотреть, но в конечном итоге вообще скрыть это поле от глаз. 
<textarea id="actual"></textarea>