cleaned code after shift enter configuration

tests_hugo/chat_node/chat_client/chat.html

@@ -392,12 +392,7 @@
 			<!-- WRITE -->
 			<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
 				<!--
-				<div class="text_area" id="chat_msg_write" onkeypress="send_msg(event.key, event.shiftKey)" contenteditable="true"></div>
+				<textarea class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" placeholder="type here"></textarea>
-				<div class="text_area" id="chat_msg_write" onkeypress="" contenteditable="true"></div>
-				<div class="text_area" id="chat_msg_write" contenteditable="true"></div>
-				<textarea class="text_area" id="chat_msg_write" onkeypress="send_if_enter(event)" placeholder="type here"></textarea>
-				<textarea class="text_area" id="chat_msg_write" onkeyup="send_if_enter(event)" placeholder="type here"></textarea>
-				<div class="text_area" id="chat_msg_write" onkeydown="send_if_enter(event)" contenteditable="true"></div>
 				-->
 				<div      class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" contenteditable="true" ></div>
 			</div>

tests_hugo/chat_node/chat_client/chat_add_msg.js

@@ -2,10 +2,6 @@
 const add_message = (from, message ) => {
 	const div_thread = document.getElementById('chat_api_msg_thread');
 
-	//console.log("received message:");
-	//console.log(`[${message}]`);
-
-	// TODO : find the best and secure way to create element with svelte
 	div_thread.appendChild(build_new_message(from, message));
 }
 
@@ -20,9 +16,7 @@ const build_new_message = (from, message) => {
 	p_msg.classList.add("msg");
 
 	p_name.appendChild(document.createTextNode(from + " :"));
-	//p_msg.appendChild(document.createTextNode(message));
+	p_msg.appendChild(document.createTextNode(message));
-	// tmp, bad security practice :
-	p_msg.innerHTML = message;
 	div.appendChild(p_name);
 	div.appendChild(p_msg);
 

tests_hugo/chat_node/chat_client/chat_send_msg.js

@@ -1,12 +1,10 @@
 function send_msg()
 {
 	const div_msg = document.getElementById('chat_msg_write');
-//console.log(div_msg.innerHTML);
 	let msg = "";
 	if (div_msg.localName === "div")
 	{
-		//msg = div_msg.innerText.trim();
+		msg = div_msg.innerText.trim();
-		msg = div_msg.innerHTML;
 		div_msg.innerText = "";
 	}
 	else if (div_msg.localName === "textarea")
@@ -16,6 +14,8 @@ function send_msg()
 	}
 	div_msg.focus();
 
+	console.log(msg);
+
 	if (msg.length > 0) {
 		socket.emit('sendmsg', msg);
 		add_message("me", msg);
@@ -24,92 +24,9 @@ function send_msg()
 
 function send_msg_if(evt)
 {
-//console.log("evt:");
-//console.log(evt);
-	// https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events
-	/*
-	let test = new Event('test');
-	let test = new evt;
-	let test = new Event('keypress');
-console.log("test:");
-console.log(test);
-//	test = evt;
-	test = structuredClone(evt);
-console.log("test:");
-console.log(test);
-//	test = Object.setPrototypeOf(test, evt);
-//		test = Object.create(evt);
-//console.log("test:");
-//console.log(test);
-	Object.defineProperty(evt, 'shiftKey', {value: false});
-console.log("evt:");
-console.log(evt);
-	*/
-
-	// change height of textarea according to content
-	//evt.target.style.height = evt.target.scrollHeight + "px";
-
-/*
-	if (evt.key !== "Enter")
-		return;
-	evt.preventDefault();
-	if (evt.shiftKey === false)
-		send_msg();
-
-// alternative:
-	if (evt.shiftKey === true)
-		return;
-	evt.preventDefault();
-	send_msg();
-*/
-
 	if (evt.shiftKey && evt.key === "Enter")
 	{
 		evt.preventDefault();
 		send_msg();
 	}
-
-//	else
-//	{
-//		//console.log(evt.target);
-//		//console.log(evt.target.value);
-//		//console.log(evt.target.innerText);
-//		// https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript/20548330#20548330
-//		//evt.target.dispatchEvent(new Event('Enter'));
-//		//evt.target.dispatchEvent(new CustomEvent('keypress', {
-//		//	charCode: 13,
-//		//	key: "Enter",
-//		//	keyCode: 13,
-//		//}));
-//
-//		//let start = evt.target.selectionStart;
-//		//console.log("start:");
-//		//console.log(start);
-//		//let end = evt.target.selectionEnd;
-//		//console.log("end:");
-//		//console.log(end);
-//		//console.log("evt.selectionStart:");
-//		//console.log(evt.selectionStart);
-//
-//		//evt.preventDefault();
-//		//console.log("document.getSelection():");
-//		//console.log(document.getSelection());
-//		//document.getSelection().insertText('\n');
-//
-//		const range = document.getSelection().getRangeAt(0);
-//		const div = document.createElement('div');
-//		div.innerHTML = '<br>';
-//		range.insertNode(div);
-//		range.setStartAfter(div);
-//		range.setEndAfter(div);
-//		document.getSelection().removeAllRanges();
-//		document.getSelection().addRange(range);
-//
-//		/*
-//    document.execCommand('insertLineBreak');
-//    document.execCommand('insertHTML', false, '<div><br></div>');
-//		*/
-//
-//		return;
-//	}
 }

tests_hugo/chat_node/chat_client/style/chat_msg.css

@@ -1,3 +1,4 @@
+
 #chat_box #chat_panel_msg {
 	flex-direction: column-reverse;
 	overflow: scroll;
@@ -21,7 +22,6 @@
 /* * * * * * * * * * * * * *
 	ALL MSG
 */
-
 #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
 	margin-left: 0px;
 	background-color: rgb(210, 210, 210);
@@ -47,7 +47,6 @@
 /* * * * * * * * * * * * * *
 	MSG PERSO
 */
-
 #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me {
 	margin-right: 0px;
 	margin-left: auto;
@@ -61,7 +60,6 @@
 /* * * * * * * * * * * * * *
 	MSG SERVER
 */
-
 #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
 	margin-left: auto;
 	background-color: transparent;

tests_hugo/chat_node/chat_client/style/chat_write.css

@@ -15,18 +15,8 @@
 	border: 1px solid black;
 }
 #chat_box .chat_item#chat_panel_write .text_area * {
-	/*
-	margin-left: 0px;
-	*/
 	display: block ruby;
 }
-/*
-#chat_box .chat_item#chat_panel_write .text_area br {
-	margin-top: 10px;
-}
-#chat_box .chat_item#chat_panel_write .text_area div {
-}
-*/
 /* if .text_area is a contenteditable div
 */
 #chat_box .chat_item#chat_panel_write .text_area {