Chat system frontend

a markdown chatter

by Brenton Strine

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
<div class="chat">
<div class="chat-messages"></div>
<div class="chat-message-input" contenteditable="true"></div>
</div>

CSS

.chat-messages { height: 200px; 
overflow: scroll;}

textarea, 
div { 
border: solid 1px #ccc; padding: 5px; margin: 5px;
}

JavaScript

console.clear();
//var md = window.markdownit();
/* {
  breaks:       true,
  langPrefix:   'language-',
  linkify:      true,
  typographer:  false
}
*/
//var result = md.render('# markdown-it rulezz!');
var md = new Remarkable({
  html:         false,        // Enable HTML tags in source
  xhtmlOut:     false,        // Use '/' to close single tags (<br />)
  breaks:       true,        // Convert '\n' in paragraphs into <br>
  langPrefix:   'language-',  // CSS language prefix for fenced blocks
  linkify:      false,        // Autoconvert URL-like text to links

  // Enable some language-neutral replacement + quotes beautification
  typographer:  false,

  // Double + single quotes replacement pairs, when typographer enabled,
  // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
  quotes: '“”‘’',

  // Highlighter function. Should return escaped HTML,
  // or '' if the source string is not changed
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (err) {}
    }

    try {
      return hljs.highlightAuto(str).value;
    } catch (err) {}

    return ''; // use external default escaping
  }
});


$(function(){

$(".chat").on("keydown", ".chat-message-input", function(e){
        if (e.keyCode == 13) {
          if (e.shiftKey !== true) {

             e.preventDefault();
             var text = md.render(this.textContent);
            $(".chat-messages").append('<div class="message">' + text +  "</div>");
            this.innerHTML = "";
            chatScrollDown();
          }
        }
    });
    

  function chatScrollDown(){
     // if(!scrolled){
          var $chatContainer = $(".chat-messages");
          $chatContainer.scrollTop($chatContainer[0].scrollHeight);
      //}
  }

  //var scrolled = false;
  //$(".chat-messages").on('scroll', function(e){
  //  var scrolledPosition = this.scrollTop + $(this).innerHeight();
  //  var...