fix: escape heading on user message item (janhq#4301)

johnny-rice · Dec 19, 2024 · 7140978 · 7140978
1 parent c7a5cb5
commit 7140978
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
@@ -19,9 +19,15 @@ import { useClipboard } from '@/hooks/useClipboard'
 import { getLanguageFromExtension } from '@/utils/codeLanguageExtension'
 
 export const MarkdownTextMessage = memo(
-  ({ text }: { id: string; text: string }) => {
+  ({ text, isUser }: { id: string; text: string; isUser: boolean }) => {
     const clipboard = useClipboard({ timeout: 1000 })
 
+    // Escapes headings
+    function preprocessMarkdown(text: string): string {
+      if (!isUser) return text
+      return text.replace(/^#{1,6} /gm, (match) => `\\${match}`)
+    }
+
     function extractCodeLines(node: { children: { children: any[] }[] }) {
       const codeLines: any[] = []
 
@@ -204,7 +210,7 @@ export const MarkdownTextMessage = memo(
             wrapCodeBlocksWithoutVisit,
           ]}
         >
-          {text}
+          {preprocessMarkdown(text)}
         </Markdown>
       </>
     )

diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -144,7 +144,11 @@ const MessageContainer: React.FC<
                 )}
                 dir="ltr"
               >
-                <MarkdownTextMessage id={props.id} text={text} />
+                <MarkdownTextMessage
+                  id={props.id}
+                  text={text}
+                  isUser={isUser}
+                />
               </div>
             )}
           </>