window.addComment = function (content, top, left) {
  const commentElm = $(`<div>${content}</div>`).addClass('comment').appendTo('body');
  commentElm.css({
    top: top,
    left: left,
  });

  // TODO: post new data to api
}

$(document).ready(() => {
  // TODO: fetch comments from api

  $(document).dblclick((event) => {
    const inputElm = $(`<input type="text"></input>`).addClass('comment-input').appendTo('body');
    inputElm.css({
      top: event.pageY,
      left: event.pageX,
    });
    inputElm.focus();
    inputElm.bind('keypress', function (event) {
      if (event.keyCode === 13) {
        window.addComment(inputElm.val(), inputElm.css('top'), inputElm.css('left'));
        inputElm.remove();
      }
    });
    inputElm.focusout(() => {
      inputElm.remove();
    });
  });
});

@@ -45,16 +45,35 @@
 left) %7B%0A
+  if (content) %7B%0A  
   const 
@@ -150,16 +150,18 @@
 body');%0A
+  
   commen
@@ -171,24 +171,26 @@
 m.css(%7B%0A    
+  
 top: top,%0A  
@@ -187,16 +187,18 @@
 p: top,%0A
+  
     left
@@ -205,21 +205,27 @@
 : left,%0A
+  
   %7D);
+%0A  %7D
 %0A%0A  // T

fix empty content bug