From 1a3cc64a7e7ba36eedf8de3c4d99085c12bca787 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 21 Apr 2025 09:43:42 +0700
Subject: [PATCH] fix: prevent curly quotes from mcp config

---
 web/screens/Settings/MCP/configuration.tsx | 31 +++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/web/screens/Settings/MCP/configuration.tsx b/web/screens/Settings/MCP/configuration.tsx
index c5593d528..e6cb959af 100644
--- a/web/screens/Settings/MCP/configuration.tsx
+++ b/web/screens/Settings/MCP/configuration.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 
 import { Button, TextArea } from '@janhq/joi'
 import { useAtomValue } from 'jotai'
@@ -12,6 +12,8 @@ const MCPConfiguration = () => {
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
 
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
   const readConfigFile = useCallback(async () => {
     try {
       // Read the file
@@ -76,14 +78,37 @@ const MCPConfiguration = () => {
           Configuration File (JSON)
         </label>
         <TextArea
-          // className="h-80 w-full rounded border border-gray-800 p-2 font-mono text-sm"
+          ref={textAreaRef}
           className="font-mono text-xs"
           value={configContent}
           rows={20}
           onChange={(e) => {
-            setConfigContent(e.target.value)
+            const input = e.target
+            const start = input.selectionStart
+            const end = input.selectionEnd
+
+            // Sanitize quotes
+            const originalValue = input.value
+            const sanitizedValue = originalValue
+              .replace(/[“”]/g, '"')
+              .replace(/[‘’]/g, "'")
+
+            // Update content
+            setConfigContent(sanitizedValue)
             setSuccess('')
+
+            // Restore cursor after DOM updates
+            requestAnimationFrame(() => {
+              if (textAreaRef.current) {
+                const offset = sanitizedValue.length - originalValue.length
+                textAreaRef.current.selectionStart = start + offset
+                textAreaRef.current.selectionEnd = end + offset
+              }
+            })
           }}
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck={false}
         />
       </div>