Как сделать ячейку td редактируемой?

let table = document.getElementById('bagua-table');
let okButton = document.getElementById('ok');
let cancelButton = document.getElementById('cancel');

(() => {
  let trTarget = null;
  let savedState = null;
  let td = null;
  
  function clear () {
    trTarget = null;
    savedState = null;
    td = null;
  }

  table.addEventListener('click', function(e) {
    const closestTd = e.target.closest('td');
    if (td && td !== closestTd) {
      alert('Завершите форматирование!');
      return;
    }

    td = closestTd;
    savedState = td.innerHTML;

    td.contentEditable = true;
  });

  okButton.addEventListener('click', function(e) {
    if (td) {
      td.contentEditable = false;
    }
    
    clear();
  });

  cancelButton.addEventListener('click', function(e) {
    if (td) {
      td.innerHTML = savedState;
      td.contentEditable = false;
    }
    
    clear();
  });
})();

th {
  text-align: center;
  font-weight: bold;
}

td {
  width: 150px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.nw {
  background-color: #999;
}

.n {
  background-color: #03f;
  color: #fff;
}

.ne {
  background-color: #ff6;
}

.w {
  background-color: #ff0;
}

.c {
  background-color: #60c;
  color: #fff;
}

.e {
  background-color: #09f;
  color: #fff;
}

.sw {
  background-color: #963;
  color: #fff;
}

.s {
  background-color: #f60;
  color: #fff;
}

.se {
  background-color: #0c3;
  color: #fff;
}

<p>Кликните на ячейку таблицы, чтобы отредактировать её. Нажмите ОК или ОТМЕНА, когда закончите.</p>

<table id="bagua-table">
  <tr>
    <th colspan="3">Квадрат <em>Bagua</em>: Направление, Элемент, Цвет, Значение</th>
  </tr>
  <tr>
    <td class="nw"><strong>Северо-Запад</strong>
      <br>Металл
      <br>Серебро
      <br>Старейшины
    </td>
    <td class="n"><strong>Север</strong>
      <br>Вода
      <br>Синий
      <br>Перемены
    </td>
    <td class="ne"><strong>Северо-Восток</strong>
      <br>Земля
      <br>Жёлтый
      <br>Направление
    </td>
  </tr>
  <tr>
    <td class="w"><strong>Запад</strong>
      <br>Металл
      <br>Золото
      <br>Молодость
    </td>
    <td class="c"><strong>Центр</strong>
      <br>Всё
      <br>Пурпурный
      <br>Гармония
    </td>
    <td class="e"><strong>Восток</strong>
      <br>Дерево
      <br>Синий
      <br>Будущее
    </td>
  </tr>
  <tr>
    <td class="sw"><strong>Юго-Запад</strong>
      <br>Земля
      <br>Коричневый
      <br>Спокойствие
    </td>
    <td class="s"><strong>Юг</strong>
      <br>Огонь
      <br>Оранжевый
      <br>Слава
    </td>
    <td class="se"><strong>Юго-Восток</strong>
      <br>Дерево
      <br>Зеленый
      <br>Роман
    </td>
  </tr>
</table>

<button id="ok">Ok</button>
<button id="cancel">Отмена</button>