From 8d4734cb8a3f22f9530d195b6dbd4abc21a7abca Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 7 Nov 2024 16:08:56 +0700
Subject: [PATCH] fix: handle edge cases syntax highlight (#3969)

---
 .../LocalServerRightPanel/index.tsx           |  2 +-
 .../ChatInput/RichTextEditor.tsx              | 22 +++++++------------
 web/styles/components/code-block.scss         | 14 ++++++------
 web/styles/main.scss                          | 16 ++++++++++++++
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/web/screens/LocalServer/LocalServerRightPanel/index.tsx b/web/screens/LocalServer/LocalServerRightPanel/index.tsx
index 8cb2af350..a59e83e7e 100644
--- a/web/screens/LocalServer/LocalServerRightPanel/index.tsx
+++ b/web/screens/LocalServer/LocalServerRightPanel/index.tsx
@@ -95,7 +95,7 @@ const LocalServerRightPanel = () => {
         <div className="mt-2">
           <Input
             value={selectedModel?.id || ''}
-            className="cursor-pointer text-[hsla(var(--text-secondary))]"
+            className="cursor-pointer text-[hsla(var(--text-secondary))] hover:border-[hsla(var(--app-border))] focus-visible:outline-0 focus-visible:ring-0"
             readOnly
             onClick={() => {
               clipboard.copy(selectedModel?.id)
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
index 87ea4e08f..096ef51e0 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx
@@ -132,20 +132,6 @@ const RichTextEditor = ({
       if (Editor.isBlock(editor, node) && node.type === 'paragraph') {
         node.children.forEach((child: { text: any }, childIndex: number) => {
           const text = child.text
-          const { selection } = editor
-
-          if (selection) {
-            const selectedNode = Editor.node(editor, selection)
-
-            if (Editor.isBlock(editor, selectedNode[0] as CustomElement)) {
-              const isNodeEmpty = Editor.string(editor, selectedNode[1]) === ''
-
-              if (isNodeEmpty) {
-                // Reset language when a node is cleared
-                currentLanguage.current = 'plaintext'
-              }
-            }
-          }
 
           // Match code block start and end
           const startMatch = text.match(/^```(\w*)$/)
@@ -346,6 +332,14 @@ const RichTextEditor = ({
           .join('\n')
 
         setCurrentPrompt(combinedText)
+        if (combinedText.trim() === '') {
+          currentLanguage.current = 'plaintext'
+        }
+        const hasCodeBlockStart = combinedText.match(/^```(\w*)/m)
+        // Set language to plaintext if no code block with language identifier is found
+        if (!hasCodeBlockStart) {
+          currentLanguage.current = 'plaintext'
+        }
       }}
     >
       <Editable
diff --git a/web/styles/components/code-block.scss b/web/styles/components/code-block.scss
index e905e4b6c..fed56884b 100644
--- a/web/styles/components/code-block.scss
+++ b/web/styles/components/code-block.scss
@@ -1,6 +1,6 @@
 .hljs-comment,
 .hljs-quote {
-  color: #d4d0ab;
+  color: var(--hljs-comment);
 }
 
 /* Red */
@@ -12,7 +12,7 @@
 .hljs-selector-class,
 .hljs-regexp,
 .hljs-deletion {
-  color: #ffa07a;
+  color: var(--hljs-variable);
 }
 
 /* Orange */
@@ -24,12 +24,12 @@
 .hljs-params,
 .hljs-meta,
 .hljs-link {
-  color: #f5ab35;
+  color: var(--hljs-number);
 }
 
 /* Yellow */
 .hljs-attribute {
-  color: #ffd700;
+  color: var(--hljs-attribute);
 }
 
 /* Green */
@@ -37,19 +37,19 @@
 .hljs-symbol,
 .hljs-bullet,
 .hljs-addition {
-  color: #abe338;
+  color: var(--hljs-string);
 }
 
 /* Blue */
 .hljs-title,
 .hljs-section {
-  color: #00e0e0;
+  color: var(--hljs-title);
 }
 
 /* Purple */
 .hljs-keyword,
 .hljs-selector-tag {
-  color: #dcc6e0;
+  color: var(--hljs-keyword);
 }
 
 .hljs {
diff --git a/web/styles/main.scss b/web/styles/main.scss
index 8e952af5c..a7e85fcb0 100644
--- a/web/styles/main.scss
+++ b/web/styles/main.scss
@@ -40,6 +40,14 @@
   --text-secondary: 0, 0%, 0%, 0.6;
   --text-tertiary: 0, 0%, 0%, 0.4;
   --text-quaternary: 0, 0%, 0%, 0.2;
+
+  --hljs-comment: #6e7781;
+  --hljs-variable: #cf222e;
+  --hljs-number: #bc4c00;
+  --hljs-attribute: #b58407;
+  --hljs-string: #116329;
+  --hljs-title: #0550ae;
+  --hljs-keyword: #8250df;
 }
 
 html.dark {
@@ -68,4 +76,12 @@ html.dark {
   --text-secondary: 0, 0%, 68%, 1;
   --text-tertiary: 0, 0%, 68%, 0.4;
   --text-quaternary: 0, 0%, 68%, 0.2;
+
+  --hljs-comment: #8b949e;
+  --hljs-variable: #ff7b72;
+  --hljs-number: #f0883e;
+  --hljs-attribute: #ffa657;
+  --hljs-string: #7ee787;
+  --hljs-title: #79c0ff;
+  --hljs-keyword: #d2a8ff;
 }