Adding emojis, adding markdown see BT#8764

composer.json

@@ -3,6 +3,8 @@
         "php-ffmpeg/php-ffmpeg": "0.3.x-dev@dev",
         "sabre/vobject": "~3.1",
         "toin0u/digitalocean": "~1.4",
-        "twig/twig": "1.*"
+        "twig/twig": "1.*",
+        "michelf/php-markdown": "1.4.1",
+        "emojione/emojione": "1.3.0"
     }
 }

main/chat/chat.php

@@ -80,7 +80,7 @@ $url = api_get_path(WEB_CODE_PATH).'chat/';
 echo '<div class="page-chat">';
 echo '<iframe src="'.$url.'chat_whoisonline.php?cidReq='.$cidreq.'" name="chat_whoisonline" scrolling="no" style="height:500px; width:35%; border: 0px none; float:left"></iframe>';
 echo '<iframe src="'.$url.'chat_chat.php?origin='.$origin.'&target='.$target.'&amp;cidReq='.$cidreq.'" name="chat_chat" id="chat_chat" scrolling="auto" height="380" style="width:65%; border: 0px none; float:right"></iframe>';
-echo '<iframe src="'.$url.'chat_message.php?cidReq='.$cidreq.'" name="chat_message" scrolling="no" height="180" style="width:65%; border: 0px none; float:right"></iframe>';
+echo '<iframe src="'.$url.'chat_message.php?cidReq='.$cidreq.'" name="chat_message" scrolling="no" height="260px" style="width:65%; border: 0px none; float:right"></iframe>';
 echo '<iframe src="'.$url.'chat_hidden.php?cidReq='.$cidreq.'" name="chat_hidden" height="0" style="border: 0px none"></iframe>';
 echo '</div>';
 

main/chat/chat_chat.php

@@ -14,7 +14,6 @@ $language_file = array('chat');
 require_once '../inc/global.inc.php';
 require_once api_get_path(LIBRARY_PATH).'document.lib.php';
 require_once api_get_path(LIBRARY_PATH).'fileUpload.lib.php';
-require_once api_get_path(LIBRARY_PATH).'groupmanager.lib.php';
 
 $course = $_GET['cidReq'];
 $session_id = api_get_session_id();
@@ -45,9 +44,7 @@ if (!empty($course)) {
         $basepath_chat = '/chat_files';
     }
     $chat_path = $document_path.$basepath_chat.'/';
-
     $TABLEITEMPROPERTY = Database::get_course_table(TABLE_ITEM_PROPERTY);
-
     $course_id = api_get_course_int_id();
 
     if (!is_dir($chat_path)) {
@@ -137,22 +134,26 @@ if (!empty($course)) {
 	if (isset($_GET['origin']) && $_GET['origin'] == 'whoisonlinejoin') {
 	    //the joiner (we have to delete the chat request to him when he joins the chat)
 		$track_user_table = Database::get_main_table(TABLE_MAIN_USER);
-		$sql = "UPDATE $track_user_table set chatcall_user_id = '', chatcall_date = '', chatcall_text=''
+		$sql = "UPDATE $track_user_table SET
+                    chatcall_user_id = '',
+                    chatcall_date = '',
+                    chatcall_text=''
 		        WHERE (user_id = ".$userId.")";
 		$result = Database::query($sql);
 	}
 
-	echo '<div id="content-chat">';
+	echo '<div id="content-chat markdown-body">';
 	foreach ($content as & $this_line) {
-		echo strip_tags(api_html_entity_decode($this_line), '<div> <br> <span> <b> <i> <img> <font>');
+		//echo strip_tags(api_html_entity_decode($this_line), '<div> <br> <span> <b> <i> <img> <font>');
+        echo $this_line;
 	}
 	echo '</div>';
 	echo '<a name="bottom" style="text-decoration:none;">&nbsp;</a>';
 	if ($isMaster || $is_courseCoach) {
 		$rand = mt_rand(1, 1000);
 		echo '<div id="clear-chat">';
-		echo '<a href="'.api_get_self().'?rand='.$rand.'&reset=1&'.api_get_cidreq().'#bottom" onclick="javascript: if(!confirm(\''.addslashes(api_htmlentities(get_lang('ConfirmReset'), ENT_QUOTES)).'\')) return false;">'.
-            Display::return_icon('delete.png', get_lang('ClearList')).' '.get_lang('ClearList').
+		echo '<a class="btn btn-danger btn-small " href="'.api_get_self().'?rand='.$rand.'&reset=1&'.api_get_cidreq().'#bottom" onclick="javascript: if(!confirm(\''.addslashes(api_htmlentities(get_lang('ConfirmReset'), ENT_QUOTES)).'\')) return false;">'.
+            get_lang('ClearList').
             '</a>';
 		echo '</div>';
 	}

main/chat/chat_functions.lib.php

@@ -3,6 +3,8 @@
 /**
  *	@package chamilo.chat
  */
+use \Michelf\MarkdownExtra;
+use \Michelf\Markdown;
 
 /**
  * @author isaac flores paz
@@ -111,3 +113,124 @@ function users_list_in_chat()
  	}
  	return $list_users_in_chat;
 }
+
+/**
+ * @param string $message
+ * @param array $_course
+ * @param int $group_id
+ * @param int $session_id
+ * @param bool $preview
+ */
+function saveMessage($message, $userId, $_course, $session_id, $group_id, $preview = true)
+{
+    $userInfo = api_get_user_info($userId);
+    $fullName = $userInfo['complete_name'];
+    $isMaster = (bool)api_is_course_admin();
+
+    $document_path = api_get_path(SYS_COURSE_PATH).$_course['path'].'/document';
+    if (!empty($group_id)) {
+        $group_info = GroupManager :: get_group_properties($group_id);
+        $basepath_chat = $group_info['directory'].'/chat_files';
+    } else {
+        $basepath_chat = '/chat_files';
+    }
+    $chat_path = $document_path.$basepath_chat.'/';
+
+    if (!is_dir($chat_path)) {
+        if (is_file($chat_path)) {
+            @unlink($chat_path);
+        }
+    }
+
+    $date_now = date('Y-m-d');
+    $message = Security::remove_XSS(trim($message));
+    $timeNow = date('d/m/y H:i:s');
+
+    if (!empty($group_id)) {
+        $basename_chat = 'messages-'.$date_now.'_gid-'.$group_id;
+    } elseif (!empty($session_id)) {
+        $basename_chat = 'messages-'.$date_now.'_sid-'.$session_id;
+    } else {
+        $basename_chat = 'messages-'.$date_now;
+    }
+
+    if (!api_is_anonymous()) {
+        if (!empty($message)) {
+
+            Emojione\Emojione::$imagePathPNG = api_get_path(WEB_LIBRARY_PATH).'javascript/emojione/png/';
+            Emojione\Emojione::$imagePathSVG = api_get_path(WEB_LIBRARY_PATH).'javascript/emojione/svg/';
+            Emojione\Emojione::$ascii = true;
+            $message = Emojione\Emojione::toImage($message);
+            $message = MarkdownExtra::defaultTransform($message);
+
+            if ($preview == true) {
+                return $message;
+            }
+
+            if (!file_exists($chat_path.$basename_chat.'.log.html')) {
+                $doc_id = add_document(
+                    $_course,
+                    $basepath_chat . '/' . $basename_chat . '.log.html',
+                    'file',
+                    0,
+                    $basename_chat . '.log.html'
+                );
+                api_item_property_update(
+                    $_course,
+                    TOOL_DOCUMENT,
+                    $doc_id,
+                    'DocumentAdded',
+                    $userId,
+                    $group_id,
+                    null,
+                    null,
+                    null,
+                    $session_id
+                );
+                api_item_property_update(
+                    $_course,
+                    TOOL_DOCUMENT,
+                    $doc_id,
+                    'invisible',
+                    $userId,
+                    $group_id,
+                    null,
+                    null,
+                    null,
+                    $session_id
+                );
+                item_property_update_on_folder(
+                    $_course,
+                    $basepath_chat,
+                    $userId
+                );
+            } else {
+                $doc_id = DocumentManager::get_document_id($_course, $basepath_chat.'/'.$basename_chat.'.log.html');
+            }
+
+            $fp = fopen($chat_path.$basename_chat.'.log.html', 'a');
+            // view user picture
+            $userImage = UserManager::get_user_picture_path_by_id($userId, 'web', false, true);
+
+            if (substr($userImage['file'],0,7) != 'unknown') {
+                $userPhoto = $userImage['dir'].'medium_'.$userImage['file'];
+            } else {
+                $userPhoto = $userImage['dir'].$userImage['file'];
+            }
+
+            $filePhoto = '<img class="chat-image" src="'.$userPhoto.'"/>';
+
+            if ($isMaster) {
+                fputs($fp, '<div class="message-teacher"><div class="content-message"><div class="chat-message-block-name">'.$fullName.'</div><div class="chat-message-block-content">'.$message.'</div><div class="message-date">'.$timeNow.'</div></div><div class="icon-message"></div>'.$filePhoto.'</div>'."\n");
+            } else {
+                fputs($fp, '<div class="message-student">'.$filePhoto.'<div class="icon-message"></div><div class="content-message"><div class="chat-message-block-name">'.$fullName.'</div><div class="chat-message-block-content">'.$message.'</div><div class="message-date">'.$timeNow.'</div></div></div>'."\n");
+            }
+            fclose($fp);
+
+            $chat_size = filesize($chat_path.$basename_chat.'.log.html');
+
+            update_existing_document($_course, $doc_id, $chat_size);
+            item_property_update_on_folder($_course, $basepath_chat, $userId);
+        }
+    }
+}

main/chat/chat_message.php

@@ -8,280 +8,124 @@
  * 	Modified by Alex Aragón (BeezNest)
  *	@package chamilo.chat
  */
-
 define('FRAME', 'message');
+
 $language_file = array('chat');
 require_once '../inc/global.inc.php';
+require_once api_get_path(SYS_PATH).'vendor/autoload.php';
+require_once api_get_path(SYS_CODE_PATH).'chat/chat_functions.lib.php';
+
 $userId = api_get_user_id();
 $userInfo = api_get_user_info();
 $course = api_get_course_id();
 $session_id = api_get_session_id();
-$group_id 	= api_get_group_id();
+$group_id = api_get_group_id();
+$_course = api_get_course_info();
 
 // Juan Carlos Raña inserted smileys and self-closing window.
 ?>
-<script >
-function insert_smile(text) {
-	if (text.createTextRange) {
-		text.smile = document.selection.createRange().duplicate();
-	}
-}
-
-function insert(text) {
-	var chat = document.formMessage.message;
-	if (chat.createTextRange && chat.smile) {
-		var smile = chat.smile;
-		smile.text = smile.text.charAt(smile.text.length - 1) == ' ' ? text + ' ' : text;
-	}
-	else chat.value += text;
-	chat.focus(smile)
-}
-
+<script>
 function close_chat_window() {
-	var chat_window = top.window.self;
-	chat_window.opener = top.window.self;
-	chat_window.top.close();
+    var chat_window = top.window.self;
+    chat_window.opener = top.window.self;
+    chat_window.top.close();
 }
-
 </script>
-
 <?php
 
 // Mode open in a new window: close the window when there isn't an user login
-
 if (empty($userId)) {
-	echo '<script languaje="javascript" type="text/javascript"> close_chat_window(); </script>';
+    echo '<script languaje="javascript" type="text/javascript"> close_chat_window(); </script>';
 } else {
-	api_protect_course_script();
+    api_protect_course_script();
 }
 
-// if we have the session set up
-if (!empty($course) && !empty($userId)) {
-	require_once api_get_path(LIBRARY_PATH).'document.lib.php';
-	require_once api_get_path(LIBRARY_PATH).'fileUpload.lib.php';
-
-	/*	Constants and variables */
-
-    $tbl_user	= Database::get_main_table(TABLE_MAIN_USER);
-    $sent 		= isset($_REQUEST['sent']) ? $_REQUEST['sent'] : null;
-
-    /*	MAIN CODE */
-
-    $query = "SELECT user_id, lastname, firstname, username, picture_uri
-              FROM $tbl_user WHERE user_id='".$userId."'";
-    $result = Database::query($query);
-
-    list($pseudo_user) = Database::fetch_row($result);
-
-    $isAllowed = !(empty($pseudo_user) || !$_cid);
-    $isMaster = (bool)api_is_course_admin();
-
-    $user_id = Database::result($result, 0, 'user_id');
-    $firstname = Database::result($result, 0, 'firstname');
-    $lastname  = Database::result($result, 0, 'lastname');
-    $picture  = Database::result($result, 0, 'picture_uri');
-    $fullName = api_get_person_name($firstname, $lastname);
-
-    $date_now = date('Y-m-d');
-
-    $basepath_chat = '';
-    $document_path = api_get_path(SYS_COURSE_PATH).$_course['path'].'/document';
-    if (!empty($group_id)) {
-        $group_info = GroupManager :: get_group_properties($group_id);
-        $basepath_chat = $group_info['directory'].'/chat_files';
-    } else {
-        $basepath_chat = '/chat_files';
-    }
-    $chat_path = $document_path.$basepath_chat.'/';
-
-    if (!is_dir($chat_path)) {
-        if (is_file($chat_path)) {
-            @unlink($chat_path);
-        }
-    }
-
-    require 'header_frame.inc.php';
-    $chat_size = 0;
-
-	// Define emoticons
-    $emoticon_text1 = ':-)';
-    $emoticon_img1  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_smile.png" alt="'.get_lang('Smile').'" title="'.get_lang('Smile').'" />';
-    $emoticon_text2 = ':-D';
-    $emoticon_img2  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_biggrin.png" alt="'.get_lang('BigGrin').'" title="'.get_lang('BigGrin').'" />';
-    $emoticon_text3 = ';-)';
-    $emoticon_img3  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_wink.png" alt="'.get_lang('Wink').'" title="'.get_lang('Wink').'" />';
-    $emoticon_text4 = ':-P';
-    $emoticon_img4  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_razz.png" alt="'.get_lang('Avid').'" title="'.get_lang('Avid').'" />';
-    $emoticon_text5 = '8-)';
-    $emoticon_img5  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_cool.png" alt="'.get_lang('Cool').'" title="'.get_lang('Cool').'" />';
-    $emoticon_text6 = ':-o)';
-    $emoticon_img6  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_surprised.png" alt="'.get_lang('Surprised').'" title="'.get_lang('Surprised').'" />';
-    $emoticon_text7 = '=;';
-    $emoticon_img7  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_hand.png" alt="'.get_lang('Hand').'" title="'.get_lang('Hand').'" />';
-    $emoticon_text8 = '=8-o';
-    $emoticon_img8  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_eek.png" alt="'.get_lang('Amazing').'" title="'.get_lang('Amazing').'" />';
-	$emoticon_text9 = ':-|)';
-	$emoticon_img9  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_neutral.png" alt="'.get_lang('Neutral').'" title="'.get_lang('Neutral').'" />';
-	$emoticon_text10 = ':-k';
-	$emoticon_img10  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_think.png" alt="'.get_lang('Think').'" title="'.get_lang('Think').'" />';
-	$emoticon_text11 = ':-?';
-	$emoticon_img11  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_confused.png" alt="'.get_lang('Confused').'" title="'.get_lang('Confused').'" />';
-	$emoticon_text12 = ':-8';
-	$emoticon_img12  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_redface.png" alt="'.get_lang('Redface').'" title="'.get_lang('Redface').'" />';
-	$emoticon_text13 = ':-L';
-	$emoticon_img13  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_shhh.png" alt="'.get_lang('Silence').'" title="'.get_lang('Silence').'" />';
-	$emoticon_text14 = ':-#)';
-	$emoticon_img14  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_silenced.png" alt="'.get_lang('Silenced').'" title="'.get_lang('Silenced').'" />';
-	$emoticon_text15 = ':-(';
-	$emoticon_img15  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_sad.png" alt="'.get_lang('Sad').'" title="'.get_lang('Sad').'" />';
-	$emoticon_text16 = ';-(';
-	$emoticon_img16  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_mourn.png" alt="'.get_lang('Weep').'" title="'.get_lang('Weep').'" />';
-	$emoticon_text17 = ':-[8';
-	$emoticon_img17  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_angry.png" alt="'.get_lang('Angry').'" title="'.get_lang('Angry').'" />';
-	$emoticon_text18 = '--)';
-	$emoticon_img18  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_arrow.png" alt="'.get_lang('Arrow').'" title="'.get_lang('Arrow').'" />';
-	$emoticon_text19 = ':!:';
-	$emoticon_img19  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_exclaim.png" alt="'.get_lang('Exclamation').'" title="'.get_lang('Exclamation').'" />';
-	$emoticon_text20 = ':?:';
-	$emoticon_img20  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_question.png" alt="'.get_lang('Question').'" title="'.get_lang('Question').'" />';
-	$emoticon_text21 = '0-';
-	$emoticon_img21  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/icon_idea.png" alt="'.get_lang('Idea').'" title="'.get_lang('Idea').'" />';
-
-	$emoticon_text201 = '*';
-	$emoticon_img201  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/waiting.png" alt="'.get_lang('AskPermissionSpeak').'" title="'.get_lang('AskPermissionSpeak').'" />';
-	$emoticon_text202 = ':speak:';
-	$emoticon_img202  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/flag_green_small.png" alt="'.get_lang('GiveTheFloorTo').'" title="'.get_lang('GiveTheFloorTo').'" />';
-	$emoticon_text203 = ':pause:';
-	$emoticon_img203  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/flag_yellow_small.png" alt="'.get_lang('Pause').'" title="'.get_lang('Pause').'" />';
-	$emoticon_text204 = ':stop:';
-	$emoticon_img204  = '<img src="'.api_get_path(WEB_IMG_PATH).'emoticons/flag_red_small.png" alt="'.get_lang('Stop').'" title="'.get_lang('Stop').'" />';
-
-	if ($sent) {
-		$message = Security::remove_XSS(trim(htmlspecialchars(stripslashes($_POST['message']), ENT_QUOTES, $charset)));
-		$message = str_replace($emoticon_text1, $emoticon_img1, $message);
-		$message = str_replace($emoticon_text2, $emoticon_img2, $message);
-		$message = str_replace($emoticon_text3, $emoticon_img3, $message);
-		$message = str_replace($emoticon_text4, $emoticon_img4, $message);
-		$message = str_replace($emoticon_text5, $emoticon_img5, $message);
-		$message = str_replace($emoticon_text6, $emoticon_img6, $message);
-		$message = str_replace($emoticon_text7, $emoticon_img7, $message);
-		$message = str_replace($emoticon_text8, $emoticon_img8, $message);
-		$message = str_replace($emoticon_text9, $emoticon_img9, $message);
-		$message = str_replace($emoticon_text10, $emoticon_img10, $message);
-		$message = str_replace($emoticon_text11, $emoticon_img11, $message);
-		$message = str_replace($emoticon_text12, $emoticon_img12, $message);
-		$message = str_replace($emoticon_text13, $emoticon_img13, $message);
-		$message = str_replace($emoticon_text14, $emoticon_img14, $message);
-		$message = str_replace($emoticon_text15, $emoticon_img15, $message);
-		$message = str_replace($emoticon_text16, $emoticon_img16, $message);
-		$message = str_replace($emoticon_text17, $emoticon_img17, $message);
-		$message = str_replace($emoticon_text18, $emoticon_img18, $message);
- 		$message = str_replace($emoticon_text19, $emoticon_img19, $message);
-		$message = str_replace($emoticon_text20, $emoticon_img20, $message);
-		$message = str_replace($emoticon_text21, $emoticon_img21, $message);
-		//
-		$message = str_replace($emoticon_text201, $emoticon_img201, $message);
-		$message = str_replace($emoticon_text202, $emoticon_img202, $message);
-		$message = str_replace($emoticon_text203, $emoticon_img203, $message);
-		$message = str_replace($emoticon_text204, $emoticon_img204, $message);
-
-		$timeNow = date('d/m/y H:i:s');
-
-		$basename_chat = '';
-		if (!empty($group_id)) {
-			$basename_chat = 'messages-'.$date_now.'_gid-'.$group_id;
-		} elseif (!empty($session_id)) {
-			$basename_chat = 'messages-'.$date_now.'_sid-'.$session_id;
-		} else {
-			$basename_chat = 'messages-'.$date_now;
-		}
-
-		if (!api_is_anonymous()) {
-			if (!empty($message)) {
-				//$message = make_clickable($message);
-                if (!file_exists($chat_path.$basename_chat.'.log.html')) {
-					$doc_id = add_document($_course, $basepath_chat.'/'.$basename_chat.'.log.html', 'file', 0, $basename_chat.'.log.html');
-
-					api_item_property_update($_course, TOOL_DOCUMENT, $doc_id, 'DocumentAdded', $userId, $group_id, null, null, null, $session_id);
-					api_item_property_update($_course, TOOL_DOCUMENT, $doc_id, 'invisible', $userId, $group_id, null, null, null, $session_id);
-					item_property_update_on_folder($_course, $basepath_chat, $userId);
-				} else {
-					$doc_id = DocumentManager::get_document_id($_course, $basepath_chat.'/'.$basename_chat.'.log.html');
-				}
-
-				$fp = fopen($chat_path.$basename_chat.'.log.html', 'a');
-                // view user picture
-                $userImage = UserManager::get_user_picture_path_by_id($userId, 'web', false, true);
-
-                if (substr($userImage['file'],0,7) != 'unknown') {
-                    $userPhoto = $userImage['dir'].'medium_'.$userImage['file'];
-                } else {
-                    $userPhoto = $userImage['dir'].$userImage['file'];
-                }
-
-                $filePhoto = '<img class="chat-image" src="'.$userPhoto.'"/>';
-				if ($isMaster) {
-					fputs($fp, '<div class="message-teacher"><div class="content-message"><div class="chat-message-block-name">'.$fullName.'</div><div>'.$message.'</div><div class="message-date">'.$timeNow.'</div></div><div class="icon-message"></div>'.$filePhoto.'</div>'."\n");
-				} else {
-					fputs($fp, '<div class="message-student">'.$filePhoto.'<div class="icon-message"></div><div class="content-message"><div class="chat-message-block-name">'.$fullName.'</div><div>'.$message.'</div><div class="message-date">'.$timeNow.'</div></div></div>'."\n");
-				}
-				fclose($fp);
-
-				$chat_size = filesize($chat_path.$basename_chat.'.log.html');
+if (empty($course) || empty($userId)) {
+    exit;
+}
 
-				update_existing_document($_course, $doc_id, $chat_size);
-				item_property_update_on_folder($_course, $basepath_chat, $userId);
-			}
-		}
-	}
-	?>
-	<form name="formMessage" method="post" action="<?php echo api_get_self().'?'.api_get_cidreq(); ?>" onsubmit="javascript: if(document.formMessage.message.value == '') { alert('<?php echo addslashes(api_htmlentities(get_lang('TypeMessage'), ENT_QUOTES)); ?>'); document.formMessage.message.focus(); return false; }" autocomplete="off">
-	<input type="hidden" name="sent" value="1">
-	<div class="message-form-chat">
-	<table border="0" cellpadding="5" cellspacing="0" width="100%">
-	<tr>
-        <td width="320" valign="middle">
-		<?php $talkboxsize=(api_get_course_setting('allow_open_chat_window')) ? 'width: 350px; height: 80px' : 'width: 450px; height: 35px'; ?>
-        <textarea id="message" class="message-text" name="message" style=" <?php echo $talkboxsize; ?>" onkeydown="send_message(event);" onclick="javascript: insert_smile(this);"></textarea>
-        </td>
-        <td>
-        <button id="send" type="submit" value="<?php echo get_lang('Send'); ?>" class="btn-send"><?php echo get_lang('Send'); ?></button>
-        </td>
-	</tr>
-	</table>
-        <?php
-        echo  '<div class="emoticons-chat">';
-		echo  "<a href=\"javascript:insert('".$emoticon_text1."')\">".$emoticon_img1."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text2."')\">".$emoticon_img2."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text3."')\">".$emoticon_img3."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text4."')\">".$emoticon_img4."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text5."')\">".$emoticon_img5."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text6."')\">".$emoticon_img6."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text7."')\">".$emoticon_img7."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text8."')\">".$emoticon_img8."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text9."')\">".$emoticon_img9."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text10."')\">".$emoticon_img10."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text11."')\">".$emoticon_img11."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text12."')\">".$emoticon_img12."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text13."')\">".$emoticon_img13."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text14."')\">".$emoticon_img14."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text15."')\">".$emoticon_img15."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text16."')\">".$emoticon_img16."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text17."')\">".$emoticon_img17."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text18."')\">".$emoticon_img18."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text19."')\">".$emoticon_img19."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text20."')\">".$emoticon_img20."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text21."')\">".$emoticon_img21."</a>";
-		?>
-        <?php
-		echo  "<a href=\"javascript:insert('".$emoticon_text201."')\">".$emoticon_img201."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text202."')\">".$emoticon_img202."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text203."')\">".$emoticon_img203."</a>";
-		echo  "<a href=\"javascript:insert('".$emoticon_text204."')\">".$emoticon_img204."</a>";
-		echo '</div>';
-		?>
+require_once api_get_path(LIBRARY_PATH).'document.lib.php';
+require_once api_get_path(LIBRARY_PATH).'fileUpload.lib.php';
+
+/*	Constants and variables */
+$tbl_user = Database::get_main_table(TABLE_MAIN_USER);
+$sent = isset($_REQUEST['sent']) ? $_REQUEST['sent'] : null;
+
+require 'header_frame.inc.php';
+$chat_size = 0;
+
+if ($sent) {
+    saveMessage(
+        $_POST['message'],
+        $userId,
+        $_course,
+        $session_id,
+        $group_id,
+        false
+    );
+}
+?>
+<form
+    id="formMessage"
+    name="formMessage"
+    method="post"
+    action="<?php echo api_get_self().'?'.api_get_cidreq(); ?>" onsubmit="javascript: if(document.formMessage.message.value == '') { alert('<?php echo addslashes(api_htmlentities(get_lang('TypeMessage'), ENT_QUOTES)); ?>'); document.formMessage.message.focus(); return false; }"
+    autocomplete="off"
+>
+    <input type="hidden" name="sent" value="1">
+    <div class="message-form-chat">
+        <div class="tabbable">
+            <ul class="nav nav-tabs">
+                <li class="active">
+                    <a href="#tab1" data-toggle="tab"><?php echo get_lang('Write'); ?></a>
+                </li>
+                <li>
+                    <a href="#tab2" id="preview" data-toggle="tab"><?php echo get_lang('Preview'); ?></a>
+                </li>
+                <li>
+                    <a href="#tab3" id="emojis" data-toggle="tab"><?php echo get_lang('Emojis'); ?></a>
+                </li>
+            </ul>
+            <div class="tab-content">
+                <div class="tab-pane active" id="tab1">
+                    <table border="0" cellpadding="5" cellspacing="0" width="100%">
+                        <tr>
+                            <td width="320" valign="middle">
+                                <?php
+                                $talkboxsize=(api_get_course_setting('allow_open_chat_window')) ? 'width: 350px; height: 80px' : 'width: 450px; height: 35px';
+                                //onkeydown="send_message(event);"
+                                ?>
+                                <textarea id="message" class="message-text" name="message" style=" <?php echo $talkboxsize; ?>"></textarea>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="btn-group">
+                                    <button id="send" type="submit" value="<?php echo get_lang('Send'); ?>" class="btn btn-primary">
+                                        <?php echo get_lang('Send'); ?>
+                                    </button>
+                                    <button id="preview" type="submit" value="<?php echo get_lang('Preview'); ?>" class="btn  ">
+                                        <?php echo get_lang('Preview'); ?>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="tab-pane" id="tab2">
+                    <table border="0" cellpadding="5" cellspacing="0" width="100%">
+                        <tr>
+                            <td width="320" valign="middle">
+                                <div id="html-preview" class="emoji-wysiwyg-editor-preview">
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </div>
     </div>
     </form>
 <?php
-}
+
 require 'footer_frame.inc.php';

main/css/chat.css

@@ -19,8 +19,9 @@ body{
 }
 #clear-chat{
 	width:140px;
-    padding: 5px;
+    padding: 13px;
     font-size: 14px;
+    float:right;
 }
 #clear-chat img{
 	width: 20px;
@@ -28,8 +29,8 @@ body{
 	margin-right: 5px;
 }
 #clear-chat a{
-	color: #0088AA;
 	text-decoration: none;
+
 }
 #clear-chat a:hover{
 	opacity: 0.7;
@@ -41,14 +42,15 @@ body{
 	-moz-border-radius: 10px;
 	border-radius: 10px;
 }
+
 textarea {
-	width: 52%; 
+	width: 52%;
 	padding: 3%;
 	height: 100px;
 	float: left;
 	border: 0;
-	background-color: #ffffff; 
-	font-size: 0.75em;
+	background-color: #ffffff;
+
 	font-family: Helvetica, arial, sans-serif;
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
@@ -67,7 +69,7 @@ textarea {
 	-moz-border-radius: 10px;
 	border-radius: 10px;
 	border:2px solid #fff;
-	box-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
+	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  }
 .message-student .content-message{
 	background-color: #F9F2E0;
@@ -90,8 +92,8 @@ textarea {
 	display: inline-block;
 	margin-left: -6px;
 	margin-top: 10px;
-	width: 0; 
-	height: 0; 
+	width: 0;
+	height: 0;
 	border-top: 0px solid transparent;
 	border-bottom: 15px solid transparent;
 	border-left: 15px solid #EBEFF3;
@@ -100,8 +102,8 @@ textarea {
 	display: inline-block;
 	margin-right: -6px;
 	margin-top: 10px;
-	width: 0; 
-	height: 0; 
+	width: 0;
+	height: 0;
 	border-top: 0px solid transparent;
 	border-bottom: 15px solid transparent;
 	border-right: 15px solid #F9F2E0;
@@ -120,7 +122,7 @@ textarea {
 	font-size: 13px;
 	padding: 15px;
 	vertical-align: top;
-	width: 320px;
+	width: 360px;
 }
 .message-teacher .message-date{
 	color: #666;
@@ -206,14 +208,69 @@ li.list-group-item:hover a{
 	float: left;
 	margin-right: 5px;
 }
-#user-online-scroll .viewport { width: 260px; height: 450px; overflow: hidden; position: relative; }
-#user-online-scroll .overview { list-style: none; position: relative; left: 0; top: 0; padding: 0; margin: 0; }
-#user-online-scroll .scrollbar{ background: transparent url(bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
-#user-online-scroll .track { background: transparent url(bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
-#user-online-scroll .thumb { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
-#user-online-scroll .thumb .end { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
-#user-online-scroll .disable { display: none; }
-.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
+
+#user-online-scroll .viewport {
+    width: 260px;
+    height: 450px;
+    overflow: hidden;
+    position: relative;
+    padding-left: 8px;
+}
+
+#user-online-scroll .overview {
+    list-style: none;
+    position: relative;
+    left: 0;
+    top: 0;
+    padding: 0;
+    margin: 0;
+}
+
+#user-online-scroll .scrollbar {
+    background: transparent url(bg-scrollbar-track-y.png) no-repeat 0 0;
+    position: relative;
+    background-position: 0 0;
+    float: right;
+    width: 15px;
+}
+
+#user-online-scroll .track {
+    background: transparent url(bg-scrollbar-trackend-y.png) no-repeat 0 100%;
+    height: 100%;
+    width: 13px;
+    position: relative;
+    padding: 0 1px;
+}
+
+#user-online-scroll .thumb {
+    background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
+    height: 20px;
+    width: 25px;
+    cursor: pointer;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: -5px;
+}
+
+#user-online-scroll .thumb .end {
+    background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 0;
+    overflow: hidden;
+    height: 5px;
+    width: 25px;
+}
+
+#user-online-scroll .disable {
+    display: none;
+}
+
+.noSelect {
+    user-select: none;
+    -o-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+}
 
 .btn-send {
 	background: #87e0fd; /* Old browsers */
@@ -253,10 +310,34 @@ li.list-group-item:hover a{
   	border: none;
 }
 .message-form-chat{
-	margin-top: 20px;
-	padding: 10px;
+	margin-top: 10px;
+	padding: 5px;
 	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
 	border-radius: 10px;
 	background: #EEEEEE;
 }
+
+.emoji-menu {
+    margin-left: 0px;
+    width:468px;
+    left: 11px !important;
+}
+
+.emoji-wysiwyg-editor-preview,
+.emoji-wysiwyg-editor {
+    width: 454px;
+    padding: 3%;
+    height: 100px;
+    float: left;
+    border: 0;
+    background-color: #ffffff;
+
+    font-family: Helvetica, arial, sans-serif;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    border: 1px solid #EEEEEE;
+    color: #666;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) inset;
+}

main/css/markdown.css

@@ -0,0 +1,696 @@
+@font-face {
+    font-family: octicons-anchor;
+    src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
+}
+
+.markdown-body {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    color: #333;
+    overflow: hidden;
+    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    word-wrap: break-word;
+}
+
+.markdown-body a {
+    background: transparent;
+}
+
+.markdown-body a:active,
+.markdown-body a:hover {
+    outline: 0;
+}
+
+.markdown-body strong {
+    font-weight: bold;
+}
+
+.markdown-body h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+.markdown-body img {
+    border: 0;
+}
+
+.markdown-body hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+.markdown-body pre {
+    overflow: auto;
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+.markdown-body input {
+    color: inherit;
+    font: inherit;
+    margin: 0;
+}
+
+.markdown-body html input[disabled] {
+    cursor: default;
+}
+
+.markdown-body input {
+    line-height: normal;
+}
+
+.markdown-body input[type="checkbox"] {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0;
+}
+
+.markdown-body table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.markdown-body td,
+.markdown-body th {
+    padding: 0;
+}
+
+.markdown-body * {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.markdown-body input {
+    font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.markdown-body a {
+    color: #4183c4;
+    text-decoration: none;
+}
+
+.markdown-body a:hover,
+.markdown-body a:focus,
+.markdown-body a:active {
+    text-decoration: underline;
+}
+
+.markdown-body hr {
+    height: 0;
+    margin: 15px 0;
+    overflow: hidden;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid #ddd;
+}
+
+.markdown-body hr:before {
+    display: table;
+    content: "";
+}
+
+.markdown-body hr:after {
+    display: table;
+    clear: both;
+    content: "";
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    line-height: 1.1;
+}
+
+.markdown-body h1 {
+    font-size: 30px;
+}
+
+.markdown-body h2 {
+    font-size: 21px;
+}
+
+.markdown-body h3 {
+    font-size: 16px;
+}
+
+.markdown-body h4 {
+    font-size: 14px;
+}
+
+.markdown-body h5 {
+    font-size: 12px;
+}
+
+.markdown-body h6 {
+    font-size: 11px;
+}
+
+.markdown-body blockquote {
+    margin: 0;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+    list-style-type: lower-roman;
+}
+
+.markdown-body ul ul ol,
+.markdown-body ul ol ol,
+.markdown-body ol ul ol,
+.markdown-body ol ol ol {
+    list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+    margin-left: 0;
+}
+
+.markdown-body code {
+    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+.markdown-body pre {
+    margin-top: 0;
+    margin-bottom: 0;
+    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+}
+
+.markdown-body kbd {
+    background-color: #e7e7e7;
+    background-image: -webkit-linear-gradient(#fefefe, #e7e7e7);
+    background-image: linear-gradient(#fefefe, #e7e7e7);
+    background-repeat: repeat-x;
+    border-radius: 2px;
+    border: 1px solid #cfcfcf;
+    color: #000;
+    padding: 3px 5px;
+    line-height: 10px;
+    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    display: inline-block;
+}
+
+.markdown-body>*:first-child {
+    margin-top: 0 !important;
+}
+
+.markdown-body>*:last-child {
+    margin-bottom: 0 !important;
+}
+
+.markdown-body .anchor {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    padding-right: 6px;
+    padding-left: 30px;
+    margin-left: -30px;
+}
+
+.markdown-body .anchor:focus {
+    outline: none;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+    position: relative;
+    margin-top: 1em;
+    margin-bottom: 16px;
+    font-weight: bold;
+    line-height: 1.4;
+}
+
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+    display: none;
+    color: #000;
+    vertical-align: middle;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+    height: 1em;
+    padding-left: 8px;
+    margin-left: -30px;
+    line-height: 1;
+    text-decoration: none;
+}
+
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+    display: inline-block;
+}
+
+.markdown-body h1 {
+    padding-bottom: 0.3em;
+    font-size: 2.25em;
+    line-height: 1.2;
+    border-bottom: 1px solid #eee;
+}
+
+.markdown-body h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.75em;
+    line-height: 1.225;
+    border-bottom: 1px solid #eee;
+}
+
+.markdown-body h3 {
+    font-size: 1.5em;
+    line-height: 1.43;
+}
+
+.markdown-body h4 {
+    font-size: 1.25em;
+}
+
+.markdown-body h5 {
+    font-size: 1em;
+}
+
+.markdown-body h6 {
+    font-size: 1em;
+    color: #777;
+}
+
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+.markdown-body hr {
+    height: 4px;
+    padding: 0;
+    margin: 16px 0;
+    background-color: #e7e7e7;
+    border: 0 none;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+    padding-left: 2em;
+}
+
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ol,
+.markdown-body ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.markdown-body li>p {
+    margin-top: 16px;
+}
+
+.markdown-body dl {
+    padding: 0;
+}
+
+.markdown-body dl dt {
+    padding: 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+}
+
+.markdown-body dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+}
+
+.markdown-body blockquote {
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #ddd;
+}
+
+.markdown-body blockquote>:first-child {
+    margin-top: 0;
+}
+
+.markdown-body blockquote>:last-child {
+    margin-bottom: 0;
+}
+
+.markdown-body table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+    word-break: keep-all;
+}
+
+.markdown-body table th {
+    font-weight: bold;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+}
+
+.markdown-body table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+}
+
+.markdown-body table tr:nth-child(2n) {
+    background-color: #f8f8f8;
+}
+
+.markdown-body img {
+    max-width: 100%;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.markdown-body code {
+    padding: 0;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(0,0,0,0.04);
+    border-radius: 3px;
+}
+
+.markdown-body code:before,
+.markdown-body code:after {
+    letter-spacing: -0.2em;
+    content: "\00a0";
+}
+
+.markdown-body pre>code {
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+}
+
+.markdown-body .highlight {
+    margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #f7f7f7;
+    border-radius: 3px;
+}
+
+.markdown-body .highlight pre {
+    margin-bottom: 0;
+    word-break: normal;
+}
+
+.markdown-body pre {
+    word-wrap: normal;
+}
+
+.markdown-body pre code {
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+}
+
+.markdown-body pre code:before,
+.markdown-body pre code:after {
+    content: normal;
+}
+
+.markdown-body .highlight {
+    background: #fff;
+}
+
+.markdown-body .highlight .mf,
+.markdown-body .highlight .mh,
+.markdown-body .highlight .mi,
+.markdown-body .highlight .mo,
+.markdown-body .highlight .il,
+.markdown-body .highlight .m {
+    color: #945277;
+}
+
+.markdown-body .highlight .s,
+.markdown-body .highlight .sb,
+.markdown-body .highlight .sc,
+.markdown-body .highlight .sd,
+.markdown-body .highlight .s2,
+.markdown-body .highlight .se,
+.markdown-body .highlight .sh,
+.markdown-body .highlight .si,
+.markdown-body .highlight .sx,
+.markdown-body .highlight .s1 {
+    color: #df5000;
+}
+
+.markdown-body .highlight .kc,
+.markdown-body .highlight .kd,
+.markdown-body .highlight .kn,
+.markdown-body .highlight .kp,
+.markdown-body .highlight .kr,
+.markdown-body .highlight .kt,
+.markdown-body .highlight .k,
+.markdown-body .highlight .o {
+    font-weight: bold;
+}
+
+.markdown-body .highlight .kt {
+    color: #458;
+}
+
+.markdown-body .highlight .c,
+.markdown-body .highlight .cm,
+.markdown-body .highlight .c1 {
+    color: #998;
+    font-style: italic;
+}
+
+.markdown-body .highlight .cp,
+.markdown-body .highlight .cs {
+    color: #999;
+    font-weight: bold;
+}
+
+.markdown-body .highlight .cs {
+    font-style: italic;
+}
+
+.markdown-body .highlight .n {
+    color: #333;
+}
+
+.markdown-body .highlight .na,
+.markdown-body .highlight .nv,
+.markdown-body .highlight .vc,
+.markdown-body .highlight .vg,
+.markdown-body .highlight .vi {
+    color: #008080;
+}
+
+.markdown-body .highlight .nb {
+    color: #0086B3;
+}
+
+.markdown-body .highlight .nc {
+    color: #458;
+    font-weight: bold;
+}
+
+.markdown-body .highlight .no {
+    color: #094e99;
+}
+
+.markdown-body .highlight .ni {
+    color: #800080;
+}
+
+.markdown-body .highlight .ne {
+    color: #990000;
+    font-weight: bold;
+}
+
+.markdown-body .highlight .nf {
+    color: #945277;
+    font-weight: bold;
+}
+
+.markdown-body .highlight .nn {
+    color: #555;
+}
+
+.markdown-body .highlight .nt {
+    color: #000080;
+}
+
+.markdown-body .highlight .err {
+    color: #a61717;
+    background-color: #e3d2d2;
+}
+
+.markdown-body .highlight .gd {
+    color: #000;
+    background-color: #fdd;
+}
+
+.markdown-body .highlight .gd .x {
+    color: #000;
+    background-color: #faa;
+}
+
+.markdown-body .highlight .ge {
+    font-style: italic;
+}
+
+.markdown-body .highlight .gr {
+    color: #aa0000;
+}
+
+.markdown-body .highlight .gh {
+    color: #999;
+}
+
+.markdown-body .highlight .gi {
+    color: #000;
+    background-color: #dfd;
+}
+
+.markdown-body .highlight .gi .x {
+    color: #000;
+    background-color: #afa;
+}
+
+.markdown-body .highlight .go {
+    color: #888;
+}
+
+.markdown-body .highlight .gp {
+    color: #555;
+}
+
+.markdown-body .highlight .gs {
+    font-weight: bold;
+}
+
+.markdown-body .highlight .gu {
+    color: #800080;
+    font-weight: bold;
+}
+
+.markdown-body .highlight .gt {
+    color: #aa0000;
+}
+
+.markdown-body .highlight .ow {
+    font-weight: bold;
+}
+
+.markdown-body .highlight .w {
+    color: #bbb;
+}
+
+.markdown-body .highlight .sr {
+    color: #017936;
+}
+
+.markdown-body .highlight .ss {
+    color: #8b467f;
+}
+
+.markdown-body .highlight .bp {
+    color: #999;
+}
+
+.markdown-body .highlight .gc {
+    color: #999;
+    background-color: #EAF2F5;
+}
+
+.markdown-body .octicon {
+    font: normal normal 16px octicons-anchor;
+    line-height: 1;
+    display: inline-block;
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.markdown-body .octicon-link:before {
+    content: '\f05c';
+}
+
+.markdown-body .task-list-item {
+    list-style-type: none;
+}
+
+.markdown-body .task-list-item+.task-list-item {
+    margin-top: 3px;
+}
+
+.markdown-body .task-list-item input {
+    float: left;
+    margin: 0.3em 0 0.25em -1.6em;
+    vertical-align: middle;
+}

main/inc/ajax/chat.ajax.php

@@ -15,6 +15,22 @@ if (api_is_anonymous()) {
     exit;
 }
 
+// Course Chat
+if ($action == 'preview') {
+    require_once api_get_path(SYS_PATH).'vendor/autoload.php';
+    require_once api_get_path(SYS_CODE_PATH).'chat/chat_functions.lib.php';
+
+    echo saveMessage(
+        $_REQUEST['message'],
+        api_get_user_id(),
+        api_get_course_info(),
+        api_get_session_id(),
+        api_get_group_id(),
+        true
+    );
+}
+
+
 if (api_get_setting('allow_global_chat') == 'false') {
     exit;
 }

main/inc/lib/javascript/emojione/css/autocomplete.css

@@ -0,0 +1,69 @@
+/* AutoComplete styles for Emoji One */
+
+.dropdown-menu {
+    list-style: none;
+    padding: .3em 0 0;
+    margin: 0;
+    border: 1px solid #6E6E6E;
+    background-color: white;
+    border-radius: 5px;
+    overflow: hidden;
+    font-size: inherit;
+    letter-spacing: .025em;
+    box-shadow: 3px 3px 3px rgba(0,0,0,.2);
+}
+.dropdown-menu a:hover {
+    cursor: pointer;
+}
+.dropdown-menu li {
+    letter-spacing: 0;
+    display: block;
+    float: none;
+    margin: 0;
+    padding: 0;
+    border:none;
+}
+.dropdown-menu li:before {
+    display: none;
+}
+.dropdown-menu .textcomplete-footer {
+    margin-top: .3em;
+    background: #e6e6e6;
+}
+.dropdown-menu .textcomplete-footer a {
+    color: #999999;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: .05em;
+    line-height: 2.1818em;
+    padding-left: 1.8181em;
+    font-size: .84em;
+}
+.dropdown-menu .textcomplete-footer .arrow {
+    margin-left: .8em;
+    font-size: 1.3em;
+}
+.dropdown-menu li .emojione {
+    vertical-align: middle;
+    font-size: 1.23em;
+    width: 1em;
+    height: 1em;
+    top: -1px;
+    margin: 0 .3em 0 0;
+}
+.dropdown-menu li a {
+    display: block;
+    height: 100%;
+    line-height: 1.8em;
+    padding: 0 1.54em 0 .615em;
+    color: #4f4f4f;
+}
+.dropdown-menu .active,
+.dropdown-menu li:hover {
+    background: #6E6E6E;
+    color: white;
+}
+.dropdown-menu .active a,
+.dropdown-menu li:hover a {
+    color: inherit;
+}

main/inc/lib/javascript/emojione/css/emojione.css

@@ -0,0 +1,19 @@
+.emojione {
+  /* Emoji Sizing */
+  font-size: inherit;
+  height: 3ex;
+  width: 3.1ex;
+  min-height: 20px;
+  min-width: 20px;
+
+  /* Inline alignment adjust the margins  */
+  display: inline-block;
+  margin: -.4ex .15em .2ex;
+  line-height: normal;
+  vertical-align: sub;
+}
+
+img.emojione {
+  /* prevent img stretch */
+  width: auto;
+}

main/inc/lib/javascript/emojione/css/emojione.min.css

@@ -0,0 +1 @@
+.emojione{font-size:inherit;height:3ex;width:3.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle}img.emojione{width:auto}