function startAddText(STATE) {
  STATE.setMode('add-text');
  STATE.maxZ += 1;

  var options = {
    size: STATE.currentTextSize,
    color: STATE.annotationDefaults.text,
    fontSize: STATE.textAnnotationDefaults.size,
  };
  document.body.style.cursor = 'crosshair';
  document.body.classList.add('show-crosshair');

  var itemID = Math.random();
  var textAnnotation = STATE.createTextAnnotation({
    id: itemID,
    color: options.color,
    fontSize: options.fontSize,
    size: options.size,
    text: 'Text goes here',
    zIndex: STATE.maxZ,
    preview: true,
  });
  var newElement = textAnnotation.element;

  // newElement.addEventListener('resize', function (e) {
  //   console.log(e);
  // });

  function setTranslate(xPos, yPos, el) {
    el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
  }

  newElement.addEventListener('blur', function (e) {
    if (newElement.classList.contains('preview')) {
      exit(true);
    }
  });

  newElement.addEventListener('keydown', function (e) {
    if (newElement.classList.contains('preview') && e.keyCode === 27) {
      STATE.skipNextCancelOperation = true;
      exit(true);
    }
  });

  var OFFSET = -8;

  setTranslate(
    STATE.mouse.clientX + OFFSET,
    STATE.mouse.clientY + OFFSET,
    newElement
  );
  document.querySelector('#draw-canvas').appendChild(newElement);

  function selectAll() {
    setTimeout(function () {
      var selection = window.getSelection();
      var range = document.createRange();
      range.selectNodeContents(newElement);
      selection.removeAllRanges();
      selection.addRange(range);
    }, 100);
  }

  function exit(remove) {
    STATE.setMode('free');
    removeHandlers();
    document.body.style.cursor = 'auto';
    document.body.classList.remove('show-crosshair');
    if (remove) {
      STATE.removeAnnotation(String(itemID));
    }
  }

  function handleMouseDown(e) {
    e.stopPropagation();
    e.preventDefault();

    // remove the event listeners
    exit(false);

    // reset element style
    newElement.classList.remove('preview');

    // Trigger a move so that the xOffset and yOffset is persisted
    handleMouseMove(e);

    if (STATE.selectAnnotation) {
      STATE.selectAnnotation(String(itemID));
    }
    STATE.markDocumentChanged(true);

    // select the text inside element
    selectAll();
  }

  function handleMouseMove(e) {
    STATE.xOffset[itemID] = e.clientX + OFFSET;
    STATE.yOffset[itemID] = e.clientY + OFFSET;
    setTranslate(STATE.xOffset[itemID], STATE.yOffset[itemID], newElement);
  }

  function handleKeydown(e) {
    // Key escape pressed
    if (e.keyCode === 27) {
      STATE.skipNextCancelOperation = true;
      exit(true);
    }
  }

  function removeHandlers() {
    document.removeEventListener('mousedown', handleMouseDown);
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('keydown', handleKeydown);
  }

  document.addEventListener('mousedown', handleMouseDown, false);
  document.addEventListener('mousemove', handleMouseMove, false);
  document.addEventListener('keydown', handleKeydown);

  return {
    cancel: function () {
      return exit(true);
    },
  };
}
