feat: add emoij to text

thuongtruong109 · Jul 22, 2024 · 3e7dfd2 · 3e7dfd2
1 parent 66a170e
commit 3e7dfd2
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@ I wanted to create a simple way to connect to peers via internal network without
 - 📹 **Camera sharing**: Share your camera with peers
 - 💬 **Chat**: Chat with peers
 - 🎧 **Audio sharing**: Share audio with peers
+- 📝 **Rich text editor**: Write notes with rich text editor
 
 ## Tech Stack
 
@@ -36,6 +37,7 @@ I wanted to create a simple way to connect to peers via internal network without
 - **FontAwesome**: Icon library
 - **JavaScript/Typescript**: Programming language
 - **HTML/CSS**: Markup and styling language
+- **Tinymce**: Rich text editor
 
 ## How to use
 
@@ -58,4 +60,6 @@ docker-compose up
 
 ## License
 
-[MIT](LICENSE) © Thuong Truong, 2024
+[MIT](LICENSE) © Thuong Truong, 2024
+
+<!-- https://github.com/miqrc/fastify-typescript-docker-rest-api/blob/master/src/controllers/main.service.ts -->
diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css
@@ -238,17 +238,16 @@ span {
 .chat form {
     display: flex;
     align-items: center;
-    padding: 8px 12px 8px 10px;
-    background: #f0ecec;
+    padding-top: 8px;
+    border-top: 1px solid #f0ecec;
     margin: 8px;
-    border-radius: 50px;
     gap: 0.25rem;
 }
 
 .chat form .upload-btn {
-    padding: 3px;
-    height: 2rem;
-    width: 2rem;
+    padding: 0.25rem;
+    height: 2.5rem;
+    width: 2.5rem;
     border-radius: 50%;
     background: transparent;
     box-shadow: none;
@@ -258,7 +257,7 @@ span {
 }
 
 .chat form .upload-btn:hover {
-    background: #bbe7ff;
+    background: #cfeeff;
 }
 
 .chat form input {
@@ -283,6 +282,10 @@ span {
     font-size: 20px;
 }
 
+.chat .send-btn {
+    background: none;
+}
+
 /* width */
 ::-webkit-scrollbar {
     width: 8px;
@@ -308,4 +311,27 @@ span {
 .disable-video img {
     width: 20px;
     height: 20px;
+}
+
+.tox-statusbar {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden;
+}
+
+.tox, .tox-tinymce, .tox-editor-container {
+    max-height: 50px !important;
+    height: 50px !important;
+    width: 230px !important;
+    position: relative !important;
+    padding: 0 !important;
+}
+
+.tox-editor-header {
+    position: absolute !important;
+    top: 0px !important;
+    right: -24px !important;
+    width: 80px !important;
+    height: 80px !important;
+    overflow: hidden !important;
 }
diff --git a/public/assets/js/call.js b/public/assets/js/call.js
@@ -263,19 +263,23 @@ const isURL = (str) => {
 function handleSendMessage(ws) {
     document.querySelector('.chat form').onsubmit = (e) => {
         e.preventDefault();
-        const message = e.target.message.value?.trim();
-        createMessageSection(YOU, message);
-        e.target.message.value = '';
-        ws.send(JSON.stringify({ type: 'message', message }));
+        const message = tinyMCE.activeEditor.getContent()
+        if (message !== '') {
+            createMessageSection(YOU, message);
+            ws.send(JSON.stringify({ type: 'message', message }));
+            tinymce.activeEditor.setContent("");
+        }
     };
 
-    document.querySelector('.chat form button').onclick = (e) => {
+    document.querySelector('.chat form .send-btn').onclick = (e) => {
         e.preventDefault();
-        const message = document.querySelector('.chat form input').value?.trim();
-        createMessageSection(YOU, message);
-        document.querySelector('.chat form input').value = '';
-        ws.send(JSON.stringify({ type: 'message', message }));
-    };
+        const message = tinyMCE.activeEditor.getContent()
+        if (message !== '') {
+            createMessageSection(YOU, message);
+            ws.send(JSON.stringify({ type: 'message', message }));
+            tinymce.activeEditor.setContent("");
+        }
+    }
 
     const cloudName = "hzxyensd5"; //dwfzid0gk
     const uploadPreset = "aoh4fpwm"; //ml_test
@@ -295,13 +299,11 @@ function handleSendMessage(ws) {
     );
 
     document.getElementById("upload_widget").addEventListener(
-        "click",
-        function () {
-          myWidget.open();
+        "click", function () {
+            myWidget.open();
         },
         false
-      );
-
+    );
 };
 
 document.querySelector('.call .control .copy-link').onclick = () => {
@@ -312,3 +314,11 @@ document.querySelector('.call .control .copy-link').onclick = () => {
         alert('Failed to copy: ' + error);
     });
 }
+
+tinymce.init({
+    selector: ".chat-form-input",
+    plugins: "emoticons",
+    toolbar: "emoticons",
+    toolbar_location: "bottom",
+    menubar: false,
+});
diff --git a/public/call.ejs b/public/call.ejs
@@ -4,6 +4,7 @@
         <%- include('./header.ejs') %>
         <link rel="stylesheet" href="/assets/css/video-grid.css" />
         <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
+        <script src="https://cdn.tiny.cloud/1/4u3y1qnz6drcugojz6fq4ll0epw682eqntfl591k30la1jsd/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
     </head>
     <body>
         <div class="join">
@@ -53,7 +54,7 @@
                         <img src="/assets/img/upload.png" width="28px" height="28px" alt="upload"/>
                     </div>
                     <input type="text" placeholder="Send Message" class="chat-form-input" name="message">
-                    <button type="submit" title="send">
+                    <button type="submit" title="send" class="send-btn">
                         <img src="/assets/img/send.png" width="26px" height="26px" alt="send"/>
                     </button>
                 </form>

diff --git a/test-upload.html b/test-upload.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
+<div id="imgTest"></div>
+<script type='text/javascript'>
+  function encodeImageFileAsURL() {
+
+    var filesSelected = document.getElementById("inputFileToLoad").files;
+    if (filesSelected.length > 0) {
+      var fileToLoad = filesSelected[0];
+
+      var fileReader = new FileReader();
+
+      fileReader.onload = function(fileLoadedEvent) {
+        var srcData = fileLoadedEvent.target.result; // <--- data: base64
+
+        var newImage = document.createElement('img');
+        newImage.src = srcData;
+
+        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
+        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
+        console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
+      }
+      fileReader.readAsDataURL(fileToLoad);
+    }
+  }
+</script>
+</body>
+</html>