Merge pull request #9 from Codeinwp/v1.3

rebase
Codeinwp · Oct 7, 2024 · e246afe · e246afe
2 parents 50e6000 + e6ecbf2
commit e246afe
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 5 deletions.
diff --git a/inc/Threads.php b/inc/Threads.php
@@ -145,7 +145,7 @@ public static function create_thread( $title, $data ) {
 			array(
 				'time'    => time(),
 				'sender'  => $data['sender'],
-				'message' => $data['message'],
+				'message' => wp_kses_post( $data['message'] ),
 			),
 		);
 
@@ -176,7 +176,7 @@ public static function add_message( $post_id, $data ) {
 		$thread_data[] = array(
 			'time'    => time(),
 			'sender'  => $data['sender'],
-			'message' => $data['message'],
+			'message' => wp_kses_post( $data['message'] ),
 		);
 
 		update_post_meta( $post_id, '_hyve_thread_data', $thread_data );

diff --git a/src/backend/parts/Messages.js b/src/backend/parts/Messages.js
@@ -163,9 +163,12 @@ const Messages = () => {
 													return (
 														<div
 															key={ index }
-															className="text-black max-w- max-w-[75%] min-w-[50%] flex flex-col items-start mr-auto my-3.5"
+															className="text-black max-w-[75%] min-w-[50%] flex flex-col items-start mr-auto my-3.5"
 														>
-															<p className="text-[13px] flex w-full break-words bg-[#ecf1fb] justify-start m-0 p-2.5 rounded-md">{ message.message }</p>
+															<p
+																className="hyve-chat-message text-[13px] flex flex-col w-full break-words bg-[#ecf1fb] justify-start m-0 p-2.5 rounded-md"
+																dangerouslySetInnerHTML={{ __html: message.message }}
+															/>
 															<time className="text-[10px] text-black p-1">{ date }</time>
 														</div>
 													);
@@ -177,7 +180,7 @@ const Messages = () => {
 															key={ index }
 															className="max-w-[75%] min-w-[50%] text-[white] flex flex-col items-end ml-auto my-3.5"
 														>
-															<p className="text-[13px] flex w-full break-words bg-[#1155cc] justify-end m-0 p-2.5 rounded-md">{ message.message }</p>
+															<p className="hyve-chat-message text-[13px] flex flex-col w-full break-words bg-[#1155cc] justify-end m-0 p-2.5 rounded-md">{ message.message }</p>
 															<time className="text-[10px] text-black p-1">{ date }</time>
 														</div>
 													);

diff --git a/src/backend/style.scss b/src/backend/style.scss
@@ -39,3 +39,57 @@
         height: 100%;
       }
 }
+
+.hyve-chat-message {
+	p {
+		font-size: 13px;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		font-size: 13px;
+		margin-bottom: 12px;
+	}
+
+	ol, ul {
+		padding-left: 12px;
+	}
+
+    pre {
+        background-color: #282c34;
+        color: #abb2bf;
+        padding: 1em;
+        border-radius: 0;
+        font-family: monospace;
+        line-height: 1.5;
+        overflow-x: auto;
+        white-space: pre;
+        word-spacing: normal;
+        margin: 20px -10px;
+
+        * {
+            color: #abb2bf;
+            word-break: normal;
+            word-wrap: normal;
+        }
+
+        ::selection {
+            background-color: #3e4451;
+        }
+
+        ::before {
+            content: attr(data-content);
+        }
+
+        ::before:has(+ :matches(function, const, return, let, var)) {
+            color: #c678dd;
+        }
+    }
+
+    code {
+        background: #d0effb;
+        border-radius: 5px;
+        border: none;
+        padding: 0 3px;
+        color: #333;
+    }
+}