fix: use keyboard smoothly while editing the MCP json

This commit is contained in:
Anish Sarkar 2026-01-20 11:49:24 +05:30
parent a536ad1590
commit 0c3307fabb
2 changed files with 30 additions and 0 deletions

View file

@ -175,6 +175,21 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
id="config"
value={configJson}
onChange={(e) => handleConfigChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Tab") {
e.preventDefault();
const target = e.target as HTMLTextAreaElement;
const start = target.selectionStart;
const end = target.selectionEnd;
const indent = " "; // 2 spaces for JSON
const newValue = configJson.substring(0, start) + indent + configJson.substring(end);
handleConfigChange(newValue);
// Set cursor position after the inserted tab
requestAnimationFrame(() => {
target.selectionStart = target.selectionEnd = start + indent.length;
});
}
}}
placeholder={DEFAULT_CONFIG}
rows={16}
className={`font-mono text-xs ${jsonError ? "border-red-500" : ""}`}

View file

@ -181,6 +181,21 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
id="config"
value={configJson}
onChange={(e) => handleConfigChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Tab") {
e.preventDefault();
const target = e.target as HTMLTextAreaElement;
const start = target.selectionStart;
const end = target.selectionEnd;
const indent = " "; // 2 spaces for JSON
const newValue = configJson.substring(0, start) + indent + configJson.substring(end);
handleConfigChange(newValue);
// Set cursor position after the inserted tab
requestAnimationFrame(() => {
target.selectionStart = target.selectionEnd = start + indent.length;
});
}
}}
rows={16}
className={`font-mono text-xs ${jsonError ? "border-red-500" : ""}`}
/>