Update flare-ui/src/app/shared/json-editor/json-editor.component.ts

flare-ui/src/app/shared/json-editor/json-editor.component.ts

@@ -1,451 +1,451 @@
-import { Component, Input, forwardRef, OnInit, ViewChild, ElementRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatIconModule } from '@angular/material/icon';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatExpansionModule } from '@angular/material/expansion';
-
-@Component({
-  selector: 'app-json-editor',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatIconModule,
-    MatChipsModule,
-    MatExpansionModule
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => JsonEditorComponent),
-      multi: true
-    }
-  ],
-  template: `
-    <mat-form-field appearance="outline" 
-                    class="full-width" 
-                    [class.json-valid]="isValidJson()"
-                    [class.json-invalid]="!isValidJson() && value">
-      <mat-label>{{ label }}</mat-label>
-      <textarea matInput 
-                #textareaRef
-                [(ngModel)]="value"
-                [rows]="rows"
-                [placeholder]="placeholder"
-                (keydown)="handleKeydown($event)"
-                (click)="handleCursorMove($event)"
-                (keyup)="handleCursorMove($event)"
-                (blur)="onTouched()"
-                class="code-editor"></textarea>
-      <mat-hint>{{ hint }}</mat-hint>
-      @if (!isValidJson() && value) {
-        <mat-error>Invalid JSON format</mat-error>
-      }
-    </mat-form-field>
-
-    <!-- JSON Validation Indicator -->
-    <div class="json-validation-status">
-      @if (isValidJson()) {
-        <mat-icon class="valid">check_circle</mat-icon>
-        <span class="valid">Valid JSON</span>
-      } @else if (value) {
-        <mat-icon class="invalid">error</mat-icon>
-        <span class="invalid">Invalid JSON</span>
-      }
-    </div>
-
-    <!-- Collapsible Variables Panel -->
-    @if (availableVariables && availableVariables.length > 0) {
-      <mat-expansion-panel class="variables-panel">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            <mat-icon>code</mat-icon>
-            Available Variables
-          </mat-panel-title>
-          <mat-panel-description>
-            Click to insert template variables
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-        
-        <mat-chip-set>
-          @for (variable of availableVariables; track variable) {
-            <mat-chip (click)="insertVariable(variable)">
-              {{ variable }}
-            </mat-chip>
-          }
-        </mat-chip-set>
-      </mat-expansion-panel>
-    }
-  `,
-  styles: [`
-    :host {
-      display: block;
-      margin-bottom: 16px;
-    }
-
-    .full-width {
-      width: 100%;
-    }
-
-    .code-editor {
-      font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
-      font-size: 13px;
-      line-height: 1.5;
-      tab-size: 2;
-      -moz-tab-size: 2;
-      white-space: pre;
-    }
-
-    .json-validation-status {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      margin-top: -12px;
-      margin-bottom: 16px;
-      font-size: 12px;
-      
-      mat-icon {
-        font-size: 16px;
-        width: 16px;
-        height: 16px;
-        
-        &.valid {
-          color: #4caf50;
-        }
-        
-        &.invalid {
-          color: #f44336;
-        }
-      }
-      
-      span {
-        &.valid {
-          color: #4caf50;
-        }
-        
-        &.invalid {
-          color: #f44336;
-        }
-      }
-    }
-
-    .variables-panel {
-      margin-bottom: 16px;
-      box-shadow: none;
-      border: 1px solid rgba(0, 0, 0, 0.12);
-      
-      .mat-expansion-panel-header {
-        padding: 0 16px;
-        height: 40px;
-        
-        .mat-panel-title {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          font-size: 13px;
-          color: #666;
-          
-          mat-icon {
-            font-size: 18px;
-            width: 18px;
-            height: 18px;
-          }
-        }
-        
-        .mat-panel-description {
-          font-size: 12px;
-          color: #999;
-        }
-      }
-      
-      .mat-expansion-panel-body {
-        padding: 8px 16px 16px;
-      }
-      
-      mat-chip-set {
-        mat-chip {
-          font-size: 12px;
-          min-height: 24px;
-          padding: 4px 8px;
-          cursor: pointer;
-          transition: all 0.2s;
-          
-          &:hover {
-            background-color: #e3f2fd;
-            color: #1976d2;
-          }
-        }
-      }
-    }
-
-    // JSON field background colors
-    .json-valid {
-      textarea {
-        background-color: rgba(76, 175, 80, 0.05) !important;
-      }
-    }
-    
-    .json-invalid {
-      textarea {
-        background-color: rgba(244, 67, 54, 0.05) !important;
-      }
-    }
-  `]
-})
-export class JsonEditorComponent implements ControlValueAccessor, OnInit {
-  @ViewChild('textareaRef') textareaRef!: ElementRef<HTMLTextAreaElement>;
-  
-  @Input() label = 'JSON Editor';
-  @Input() placeholder = '{}';
-  @Input() hint = 'Enter valid JSON';
-  @Input() rows = 8;
-  @Input() availableVariables: string[] = [];
-  @Input() variableReplacer?: (json: string) => string;
-
-  value = '';
-  onChange: (value: string) => void = () => {};
-  onTouched: () => void = () => {};
-
-  private bracketPairs: { [key: string]: string } = {
-    '{': '}',
-    '[': ']',
-    '(': ')'
-  };
-
-  private cursorPosition = 0;
-
-  ngOnInit() {}
-
-  writeValue(value: string): void {
-    this.value = value || '';
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState?(isDisabled: boolean): void {
-    // Handle disabled state if needed
-  }
-
-  isValidJson(): boolean {
-    if (!this.value || !this.value.trim()) return true;
-    
-    try {
-      let jsonStr = this.value;
-      
-      // If variableReplacer is provided, use it to replace variables for validation
-      if (this.variableReplacer) {
-        jsonStr = this.variableReplacer(jsonStr);
-      } else {
-        // Default variable replacement for validation
-        jsonStr = this.replaceVariablesForValidation(jsonStr);
-      }
-      
-      JSON.parse(jsonStr);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  private replaceVariablesForValidation(jsonStr: string): string {
-    let processed = jsonStr;
-  
-    processed = processed.replace(/\{\{([^}]+)\}\}/g, (match, variablePath) => {
-      if (variablePath.includes('variables.')) {
-        const varName = variablePath.split('.').pop()?.toLowerCase() || '';
-        
-        const numericVars = ['count', 'passenger_count', 'timeout_seconds', 'retry_count', 'amount', 'price', 'quantity', 'age', 'id'];
-        const booleanVars = ['enabled', 'published', 'is_active', 'confirmed', 'canceled', 'deleted', 'required'];
-        
-        if (numericVars.some(v => varName.includes(v))) {
-          return '1';
-        } else if (booleanVars.some(v => varName.includes(v))) {
-          return 'true';
-        } else {
-          return '"placeholder"';
-        }
-      }
-      
-      return '"placeholder"';
-    });
-  
-    return processed;
-  }
-
-  handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Tab') {
-      this.handleTabKey(event);
-    } else if (event.key === 'Enter') {
-      this.handleEnterKey(event);
-    } else if (event.key in this.bracketPairs || Object.values(this.bracketPairs).includes(event.key)) {
-      this.handleBracketInput(event);
-    }
-  }
-
-  handleTabKey(event: KeyboardEvent): void {
-    event.preventDefault();
-    
-    const textarea = event.target as HTMLTextAreaElement;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    
-    if (start !== end) {
-      this.handleBlockIndent(textarea, !event.shiftKey);
-    } else {
-      const newValue = this.value.substring(0, start) + '\t' + this.value.substring(end);
-      this.updateValue(newValue);
-      
-      setTimeout(() => {
-        textarea.selectionStart = textarea.selectionEnd = start + 1;
-        textarea.focus();
-      }, 0);
-    }
-  }
-
-  private handleBlockIndent(textarea: HTMLTextAreaElement, indent: boolean): void {
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const value = this.value;
-    
-    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
-    const lineEnd = value.indexOf('\n', end);
-    const actualEnd = lineEnd === -1 ? value.length : lineEnd;
-    
-    const selectedLines = value.substring(lineStart, actualEnd);
-    const lines = selectedLines.split('\n');
-    
-    let newLines: string[];
-    if (indent) {
-      newLines = lines.map(line => '\t' + line);
-    } else {
-      newLines = lines.map(line => line.startsWith('\t') ? line.substring(1) : line);
-    }
-    
-    const newText = newLines.join('\n');
-    const newValue = value.substring(0, lineStart) + newText + value.substring(actualEnd);
-    
-    this.updateValue(newValue);
-    
-    setTimeout(() => {
-      const lengthDiff = newText.length - selectedLines.length;
-      textarea.selectionStart = lineStart;
-      textarea.selectionEnd = actualEnd + lengthDiff;
-      textarea.focus();
-    }, 0);
-  }
-
-  handleEnterKey(event: KeyboardEvent): void {
-    event.preventDefault();
-    
-    const textarea = event.target as HTMLTextAreaElement;
-    const start = textarea.selectionStart;
-    const value = this.value;
-    
-    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
-    const currentLine = value.substring(lineStart, start);
-    const indent = currentLine.match(/^[\t ]*/)?.[0] || '';
-    
-    const prevChar = value[start - 1];
-    const nextChar = value[start];
-    
-    let newLineContent = '\n' + indent;
-    let cursorOffset = newLineContent.length;
-    
-    if (prevChar in this.bracketPairs) {
-      newLineContent = '\n' + indent + '\t';
-      cursorOffset = newLineContent.length;
-      
-      if (nextChar === this.bracketPairs[prevChar]) {
-        newLineContent += '\n' + indent;
-      }
-    }
-    
-    const newValue = value.substring(0, start) + newLineContent + value.substring(start);
-    this.updateValue(newValue);
-    
-    setTimeout(() => {
-      textarea.selectionStart = textarea.selectionEnd = start + cursorOffset;
-      textarea.focus();
-    }, 0);
-  }
-
-  handleBracketInput(event: KeyboardEvent): void {
-    const textarea = event.target as HTMLTextAreaElement;
-    const char = event.key;
-    
-    if (char in this.bracketPairs) {
-      event.preventDefault();
-      
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
-      const value = this.value;
-      
-      const selectedText = value.substring(start, end);
-      const closingBracket = this.bracketPairs[char];
-      
-      let newValue: string;
-      let cursorPos: number;
-      
-      if (selectedText) {
-        newValue = value.substring(0, start) + char + selectedText + closingBracket + value.substring(end);
-        cursorPos = start + 1 + selectedText.length;
-      } else {
-        newValue = value.substring(0, start) + char + closingBracket + value.substring(end);
-        cursorPos = start + 1;
-      }
-      
-      this.updateValue(newValue);
-      
-      setTimeout(() => {
-        textarea.selectionStart = textarea.selectionEnd = cursorPos;
-        textarea.focus();
-      }, 0);
-    } else if (Object.values(this.bracketPairs).includes(char)) {
-      const start = textarea.selectionStart;
-      const value = this.value;
-      const nextChar = value[start];
-      
-      if (nextChar === char) {
-        event.preventDefault();
-        textarea.selectionStart = textarea.selectionEnd = start + 1;
-      }
-    }
-  }
-
-  handleCursorMove(event: any): void {
-    this.cursorPosition = event.target.selectionStart;
-  }
-
-  insertVariable(variable: string): void {
-    const textarea = this.textareaRef.nativeElement;
-    const start = this.cursorPosition;
-    const variableText = `{{${variable}}}`;
-    
-    const newValue = this.value.substring(0, start) + variableText + this.value.substring(start);
-    this.updateValue(newValue);
-    
-    setTimeout(() => {
-      const newPos = start + variableText.length;
-      textarea.selectionStart = textarea.selectionEnd = newPos;
-      textarea.focus();
-    }, 0);
-  }
-
-  private updateValue(newValue: string): void {
-    this.value = newValue;
-    this.onChange(newValue);
-  }
+import { Component, Input, forwardRef, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+@Component({
+  selector: 'app-json-editor',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatChipsModule,
+    MatExpansionModule
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => JsonEditorComponent),
+      multi: true
+    }
+  ],
+  template: `
+    <mat-form-field appearance="outline" 
+                    class="full-width" 
+                    [class.json-valid]="isValidJson()"
+                    [class.json-invalid]="!isValidJson() && value">
+      <mat-label>{{ label }}</mat-label>
+      <textarea matInput 
+                #textareaRef
+                [(ngModel)]="value"
+                [rows]="rows"
+                [placeholder]="placeholder"
+                (keydown)="handleKeydown($event)"
+                (click)="handleCursorMove($event)"
+                (keyup)="handleCursorMove($event)"
+                (blur)="onTouched()"
+                class="code-editor"></textarea>
+      <mat-hint>{{ hint }}</mat-hint>
+      @if (!isValidJson() && value) {
+        <mat-error>Invalid JSON format</mat-error>
+      }
+    </mat-form-field>
+
+    <!-- JSON Validation Indicator -->
+    <div class="json-validation-status">
+      @if (isValidJson()) {
+        <mat-icon class="valid">check_circle</mat-icon>
+        <span class="valid">Valid JSON</span>
+      } @else if (value) {
+        <mat-icon class="invalid">error</mat-icon>
+        <span class="invalid">Invalid JSON</span>
+      }
+    </div>
+
+    <!-- Collapsible Variables Panel -->
+    @if (availableVariables && availableVariables.length > 0) {
+      <mat-expansion-panel class="variables-panel">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <mat-icon>code</mat-icon>
+            Available Variables
+          </mat-panel-title>
+          <mat-panel-description>
+            Click to insert template variables
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        
+        <mat-chip-set>
+          @for (variable of availableVariables; track variable) {
+            <mat-chip (click)="insertVariable(variable)">
+              {{ variable }}
+            </mat-chip>
+          }
+        </mat-chip-set>
+      </mat-expansion-panel>
+    }
+  `,
+  styles: [`
+    :host {
+      display: block;
+      margin-bottom: 16px;
+    }
+
+    .full-width {
+      width: 100%;
+    }
+
+    .code-editor {
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
+      font-size: 13px;
+      line-height: 1.5;
+      tab-size: 2;
+      -moz-tab-size: 2;
+      white-space: pre;
+    }
+
+    .json-validation-status {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-top: -6px;
+      margin-bottom: 16px;
+      font-size: 12px;
+      
+      mat-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 20px;
+        
+        &.valid {
+          color: #4caf50;
+        }
+        
+        &.invalid {
+          color: #f44336;
+        }
+      }
+      
+      span {
+        &.valid {
+          color: #4caf50;
+        }
+        
+        &.invalid {
+          color: #f44336;
+        }
+      }
+    }
+
+    .variables-panel {
+      margin-bottom: 16px;
+      box-shadow: none;
+      border: 1px solid rgba(0, 0, 0, 0.12);
+      
+      .mat-expansion-panel-header {
+        padding: 0 16px;
+        height: 40px;
+        
+        .mat-panel-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 13px;
+          color: #666;
+          
+          mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+          }
+        }
+        
+        .mat-panel-description {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+      
+      .mat-expansion-panel-body {
+        padding: 8px 16px 16px;
+      }
+      
+      mat-chip-set {
+        mat-chip {
+          font-size: 12px;
+          min-height: 24px;
+          padding: 4px 8px;
+          cursor: pointer;
+          transition: all 0.2s;
+          
+          &:hover {
+            background-color: #e3f2fd;
+            color: #1976d2;
+          }
+        }
+      }
+    }
+
+    // JSON field background colors
+    .json-valid {
+      textarea {
+        background-color: rgba(76, 175, 80, 0.05) !important;
+      }
+    }
+    
+    .json-invalid {
+      textarea {
+        background-color: rgba(244, 67, 54, 0.05) !important;
+      }
+    }
+  `]
+})
+export class JsonEditorComponent implements ControlValueAccessor, OnInit {
+  @ViewChild('textareaRef') textareaRef!: ElementRef<HTMLTextAreaElement>;
+  
+  @Input() label = 'JSON Editor';
+  @Input() placeholder = '{}';
+  @Input() hint = 'Enter valid JSON';
+  @Input() rows = 8;
+  @Input() availableVariables: string[] = [];
+  @Input() variableReplacer?: (json: string) => string;
+
+  value = '';
+  onChange: (value: string) => void = () => {};
+  onTouched: () => void = () => {};
+
+  private bracketPairs: { [key: string]: string } = {
+    '{': '}',
+    '[': ']',
+    '(': ')'
+  };
+
+  private cursorPosition = 0;
+
+  ngOnInit() {}
+
+  writeValue(value: string): void {
+    this.value = value || '';
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    // Handle disabled state if needed
+  }
+
+  isValidJson(): boolean {
+    if (!this.value || !this.value.trim()) return true;
+    
+    try {
+      let jsonStr = this.value;
+      
+      // If variableReplacer is provided, use it to replace variables for validation
+      if (this.variableReplacer) {
+        jsonStr = this.variableReplacer(jsonStr);
+      } else {
+        // Default variable replacement for validation
+        jsonStr = this.replaceVariablesForValidation(jsonStr);
+      }
+      
+      JSON.parse(jsonStr);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  private replaceVariablesForValidation(jsonStr: string): string {
+    let processed = jsonStr;
+  
+    processed = processed.replace(/\{\{([^}]+)\}\}/g, (match, variablePath) => {
+      if (variablePath.includes('variables.')) {
+        const varName = variablePath.split('.').pop()?.toLowerCase() || '';
+        
+        const numericVars = ['count', 'passenger_count', 'timeout_seconds', 'retry_count', 'amount', 'price', 'quantity', 'age', 'id'];
+        const booleanVars = ['enabled', 'published', 'is_active', 'confirmed', 'canceled', 'deleted', 'required'];
+        
+        if (numericVars.some(v => varName.includes(v))) {
+          return '1';
+        } else if (booleanVars.some(v => varName.includes(v))) {
+          return 'true';
+        } else {
+          return '"placeholder"';
+        }
+      }
+      
+      return '"placeholder"';
+    });
+  
+    return processed;
+  }
+
+  handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Tab') {
+      this.handleTabKey(event);
+    } else if (event.key === 'Enter') {
+      this.handleEnterKey(event);
+    } else if (event.key in this.bracketPairs || Object.values(this.bracketPairs).includes(event.key)) {
+      this.handleBracketInput(event);
+    }
+  }
+
+  handleTabKey(event: KeyboardEvent): void {
+    event.preventDefault();
+    
+    const textarea = event.target as HTMLTextAreaElement;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    
+    if (start !== end) {
+      this.handleBlockIndent(textarea, !event.shiftKey);
+    } else {
+      const newValue = this.value.substring(0, start) + '\t' + this.value.substring(end);
+      this.updateValue(newValue);
+      
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 1;
+        textarea.focus();
+      }, 0);
+    }
+  }
+
+  private handleBlockIndent(textarea: HTMLTextAreaElement, indent: boolean): void {
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const value = this.value;
+    
+    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+    const lineEnd = value.indexOf('\n', end);
+    const actualEnd = lineEnd === -1 ? value.length : lineEnd;
+    
+    const selectedLines = value.substring(lineStart, actualEnd);
+    const lines = selectedLines.split('\n');
+    
+    let newLines: string[];
+    if (indent) {
+      newLines = lines.map(line => '\t' + line);
+    } else {
+      newLines = lines.map(line => line.startsWith('\t') ? line.substring(1) : line);
+    }
+    
+    const newText = newLines.join('\n');
+    const newValue = value.substring(0, lineStart) + newText + value.substring(actualEnd);
+    
+    this.updateValue(newValue);
+    
+    setTimeout(() => {
+      const lengthDiff = newText.length - selectedLines.length;
+      textarea.selectionStart = lineStart;
+      textarea.selectionEnd = actualEnd + lengthDiff;
+      textarea.focus();
+    }, 0);
+  }
+
+  handleEnterKey(event: KeyboardEvent): void {
+    event.preventDefault();
+    
+    const textarea = event.target as HTMLTextAreaElement;
+    const start = textarea.selectionStart;
+    const value = this.value;
+    
+    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+    const currentLine = value.substring(lineStart, start);
+    const indent = currentLine.match(/^[\t ]*/)?.[0] || '';
+    
+    const prevChar = value[start - 1];
+    const nextChar = value[start];
+    
+    let newLineContent = '\n' + indent;
+    let cursorOffset = newLineContent.length;
+    
+    if (prevChar in this.bracketPairs) {
+      newLineContent = '\n' + indent + '\t';
+      cursorOffset = newLineContent.length;
+      
+      if (nextChar === this.bracketPairs[prevChar]) {
+        newLineContent += '\n' + indent;
+      }
+    }
+    
+    const newValue = value.substring(0, start) + newLineContent + value.substring(start);
+    this.updateValue(newValue);
+    
+    setTimeout(() => {
+      textarea.selectionStart = textarea.selectionEnd = start + cursorOffset;
+      textarea.focus();
+    }, 0);
+  }
+
+  handleBracketInput(event: KeyboardEvent): void {
+    const textarea = event.target as HTMLTextAreaElement;
+    const char = event.key;
+    
+    if (char in this.bracketPairs) {
+      event.preventDefault();
+      
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const value = this.value;
+      
+      const selectedText = value.substring(start, end);
+      const closingBracket = this.bracketPairs[char];
+      
+      let newValue: string;
+      let cursorPos: number;
+      
+      if (selectedText) {
+        newValue = value.substring(0, start) + char + selectedText + closingBracket + value.substring(end);
+        cursorPos = start + 1 + selectedText.length;
+      } else {
+        newValue = value.substring(0, start) + char + closingBracket + value.substring(end);
+        cursorPos = start + 1;
+      }
+      
+      this.updateValue(newValue);
+      
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = cursorPos;
+        textarea.focus();
+      }, 0);
+    } else if (Object.values(this.bracketPairs).includes(char)) {
+      const start = textarea.selectionStart;
+      const value = this.value;
+      const nextChar = value[start];
+      
+      if (nextChar === char) {
+        event.preventDefault();
+        textarea.selectionStart = textarea.selectionEnd = start + 1;
+      }
+    }
+  }
+
+  handleCursorMove(event: any): void {
+    this.cursorPosition = event.target.selectionStart;
+  }
+
+  insertVariable(variable: string): void {
+    const textarea = this.textareaRef.nativeElement;
+    const start = this.cursorPosition;
+    const variableText = `{{${variable}}}`;
+    
+    const newValue = this.value.substring(0, start) + variableText + this.value.substring(start);
+    this.updateValue(newValue);
+    
+    setTimeout(() => {
+      const newPos = start + variableText.length;
+      textarea.selectionStart = textarea.selectionEnd = newPos;
+      textarea.focus();
+    }, 0);
+  }
+
+  private updateValue(newValue: string): void {
+    this.value = newValue;
+    this.onChange(newValue);
+  }
 }