From 88984a21b2fd8b71e5c3ad2dca8d3153af25a8b1 Mon Sep 17 00:00:00 2001
From: sokol <sokol@HP>
Date: Wed, 18 Feb 2026 22:09:20 +0300
Subject: [PATCH] feat: Tab key inserts 2 spaces in template editor

---
 src/componets/content/ConfigTemplate.tsx | 22 +++++++++++++++++++++-
 src/componets/content/Content.css        |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/componets/content/ConfigTemplate.tsx b/src/componets/content/ConfigTemplate.tsx
index 0a503d1..f746908 100644
--- a/src/componets/content/ConfigTemplate.tsx
+++ b/src/componets/content/ConfigTemplate.tsx
@@ -61,6 +61,25 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
     }
   }
 
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const textarea = e.currentTarget;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const value = textarea.value;
+      
+      // Insert 2 spaces at cursor position
+      const newValue = value.substring(0, start) + '  ' + value.substring(end);
+      handleDraftChange(newValue);
+      
+      // Move cursor after the inserted spaces
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      }, 0);
+    }
+  }
+
   const isValidJson = jsonError === null;
 
   return (
@@ -105,8 +124,9 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
             className={`form-control font-monospace ${isValidJson ? 'border-success' : 'border-danger'}`}
             value={draftContent}
             onChange={(e) => handleDraftChange(e.target.value)}
+            onKeyDown={handleKeyDown}
             rows={20}
-            style={{ 
+            style={{
               fontFamily: 'monospace',
               whiteSpace: 'pre',
               overflowX: 'auto'
diff --git a/src/componets/content/Content.css b/src/componets/content/Content.css
index 25a4010..853e3e9 100644
--- a/src/componets/content/Content.css
+++ b/src/componets/content/Content.css
@@ -1,4 +1,4 @@
 .highlihgt-scrolled {
     overflow-x: auto;
-    max-width: 90%;
+/    max-width: 90%;
 }
\ No newline at end of file