[ES6] Text editor w/ text coloring

gistfile1.txt

const codeEditor = document.getElementById('codeEditor');

/**
 *  Insert html at the caret position
 */

const insertHTML = html => {
  const sel = window.getSelection();
  
  if (sel.getRangeAt && sel.rangeCount) {
      const el = document.createElement("div");
      const fragment = document.createDocumentFragment();
      let node;
      let lastNode;
      let range = sel.getRangeAt(0);

      range.deleteContents();

      el.innerHTML = html;

      while (node = el.firstChild) {
        lastNode = fragment.appendChild(node);
      }

      range.insertNode(fragment);

      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);

        sel.removeAllRanges();
        sel.addRange(range);
      }
  }
}

/**
 *  Keydown event handler
 */

codeEditor.addEventListener('keydown', e => {
  let color = '';
  
  switch(e.keyCode) {
  case 91: // meta (left)
  case 93: // meta (right)
  case 16: // shift
  case 18: // alt
  case 17: // control
  case 27: // esc
  case 37: // arrow left
  case 38: // arrow up
  case 39: // arrow right
  case 40: // arrow down
  case 13: // enter
  case 9: // tab
  case 8: // backspace
    {
      // default action
      return;
    }
  case 81: //q
    {
      color = 'red';
      break;
    }
  case 65: // a
    {
      color = 'green';
      break;
    }
  case 90: // z
    {
      color = 'blue';
      break;
    }
  default:
    {
      color = 'black';
      break;
    }
  }

  e.preventDefault();

  insertHTML(`<span style="color:${color}">${e.key}</span>`);
});

codeEditor.focus();