wip write msg now shift enter to send

tests_hugo/chat_node/chat_client/chat.html

@@ -395,10 +395,11 @@
 				<div class="text_area" id="chat_msg_write" onkeypress="send_msg(event.key, event.shiftKey)" contenteditable="true"></div>
 				<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)"></textarea>
+				<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)"></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_if_enter(event)" contenteditable="true"></div>
+				<div class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" contenteditable="true"></div>
 			</div>
 			<!-- send -->
 			<button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send"><p>send</p></button>

tests_hugo/chat_node/chat_client/chat_add_msg.js

@@ -5,6 +5,7 @@ const add_message = (from, message ) => {
 	//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));
 }
 
@@ -19,7 +20,9 @@ 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,50 +1,115 @@
-function send_msg(evt = null)
+function send_msg()
 {
 	const div_msg = document.getElementById('chat_msg_write');
-	const msg = div_msg.innerText.trim();
+//console.log(div_msg.innerHTML);
-
+	let msg = "";
-	div_msg.innerText = "";
+	if (div_msg.localName === "div")
+	{
+		//msg = div_msg.innerText.trim();
+		msg = div_msg.innerHTML;
+		div_msg.innerText = "";
+	}
+	else if (div_msg.localName === "textarea")
+	{
+		msg = div_msg.value.trim();
+		div_msg.value = "";
+	}
 	div_msg.focus();
 
-	/*
-	const div_msg = document.getElementById('chat_msg_write');
-	const msg = div_msg.value.trim();
-
-	div_msg.value = "";
-	div_msg.focus();
-	*/
-
 	if (msg.length > 0) {
 		socket.emit('sendmsg', msg);
 		add_message("me", msg);
 	}
 }
 
-function send_if_enter(evt)
+function send_msg_if(evt)
 {
-	//let test = new Event('test');
+//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;
-	test = evt;
+	let test = new Event('keypress');
-	console.log("evt:");
+console.log("test:");
-	console.log(evt);
+console.log(test);
-	console.log("test:");
+//	test = evt;
-	console.log(test);
+	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")
+/*
+	if (evt.key !== "Enter")
 		return;
-	if (evt.shiftKey == true)
+	evt.preventDefault();
-	{
+	if (evt.shiftKey === false)
-		console.log(evt.target);
+		send_msg();
-		console.log(evt.target.value);
+
-		console.log(evt.target.innerText);
+// alternative:
-		evt.preventDefault();
+	if (evt.shiftKey === true)
-		// https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript/20548330#20548330
-		evt.target.dispatchEvent(new Event('Enter'));
 		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

@@ -37,8 +37,10 @@
 	color: rgb(100, 100, 100);
 }
 #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
+	/*
 	margin: 5px 0px;
 	line-height: 8px;
+	*/
 }
 
 

tests_hugo/chat_node/chat_client/style/chat_write.css

@@ -9,17 +9,38 @@
 	bottom: 0px;
 	left: 0px;
 	width: 100%;
-	height: auto;
-	min-height: 100%;
-	max-height: 300px;
-	/*
-	resize: none;
-	*/
 	overflow-x: hidden;
 	overflow-y: scroll;
 	background-color: white;
 	border: 1px solid black;
 }
-#chat_box .chat_item#chat_panel_write .text_area div {
+#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 {
+	height: auto;
+	min-height: 100%;
+	max-height: 300px;
+}
+/* if .text_area is a textarea
+*/
+#chat_box .chat_item#chat_panel_write textarea.text_area {
+	resize: none;
+	height: 100px;
+}
+#chat_box .chat_item#chat_panel_write textarea.text_area:placeholder-shown {
+	height: 100%;
+}
+