fix(string-inspector): fix input value vanish issue

GeekyShacklebolt · GeekyShacklebolt · commit f41bf2ffa1e2 · 2025-07-17T15:10:49.000+05:30
diff --git a/client/src/components/tools/string-inspector.tsx b/client/src/components/tools/string-inspector.tsx
@@ -37,10 +37,14 @@ export default function StringInspector() {
   };
 
   const loadExample = () => {
-    const example = `Hello, World!
+    const example = `Hello, World! 🌍
 This is a sample text for analysis.
 It contains multiple lines, words, and characters.
-Let's see what the inspector reveals!`;
+Let's see what the inspector reveals! 🚀
+
+Unicode characters: αβγδε, 你好世界, 🎉🎊🎈
+Special symbols: ©®™€£¥¢§¶†‡
+Emojis: 😀😃😄😁😆😅🤣😂🙂🙃😉😊😇`;
     updateState({ input: example });
   };
 
@@ -51,10 +55,10 @@ Let's see what the inspector reveals!`;
 Characters (no spaces): ${analysis.charactersNoSpaces}
 Words: ${analysis.words}
 Lines: ${analysis.lines}
-Paragraphs: ${analysis.paragraphs}
 Sentences: ${analysis.sentences}
 Average words per sentence: ${analysis.averageWordsPerSentence.toFixed(2)}
-Most frequent character: "${analysis.mostFrequentChar}"`;
+Most frequent character: "${analysis.mostFrequentChar}"
+Byte size: ${analysis.byteSize} bytes`;
   };
 
   return (
@@ -80,12 +84,11 @@ Most frequent character: "${analysis.mostFrequentChar}"`;
               value={input}
               onChange={(e) => {
                 const newValue = e.target.value;
-                updateState({ input: newValue });
                 if (newValue) {
                   const result = analyzeString(newValue);
-                  updateState({ analysis: result });
+                  updateState({ input: newValue, analysis: result });
                 } else {
-                  updateState({ analysis: null });
+                  updateState({ input: newValue, analysis: null });
                 }
               }}
               className="tool-textarea"
@@ -118,36 +121,20 @@ Most frequent character: "${analysis.mostFrequentChar}"`;
                   <div className="text-2xl font-bold">{analysis.lines}</div>
                 </div>
                 <div className="p-3 bg-muted rounded-md">
-                  <div className="text-sm font-medium text-muted-foreground">Paragraphs</div>
-                  <div className="text-2xl font-bold">{analysis.paragraphs}</div>
+                  <div className="text-sm font-medium text-muted-foreground">Byte Size</div>
+                  <div className="text-2xl font-bold">{analysis.byteSize}</div>
                 </div>
               </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <Label>Detailed Statistics</Label>
-                  <div className="p-3 bg-muted rounded-md font-mono text-sm mt-1">
-                    Characters (with spaces): {analysis.characters}<br/>
-                    Characters (without spaces): {analysis.charactersNoSpaces}<br/>
-                    Sentences: {analysis.sentences}<br/>
-                    Average words per sentence: {analysis.averageWordsPerSentence.toFixed(2)}<br/>
-                    Most frequent character: "{analysis.mostFrequentChar}"
-                  </div>
-                </div>
-
-                <div>
-                  <Label>Character Frequency (Top 10)</Label>
-                  <div className="p-3 bg-muted rounded-md font-mono text-sm mt-1 max-h-32 overflow-y-auto">
-                    {Object.entries(analysis.charFrequency)
-                      .sort(([,a], [,b]) => (b as number) - (a as number))
-                      .slice(0, 10)
-                      .map(([char, count]) => (
-                        <div key={char}>
-                          "{char === ' ' ? 'space' : char === '\n' ? '\\n' : char}": {count as number}
-                        </div>
-                      ))
-                    }
-                  </div>
+              <div>
+                <Label>Detailed Statistics</Label>
+                <div className="p-3 bg-muted rounded-md font-mono text-sm mt-1">
+                  Characters (with spaces): {analysis.characters}<br/>
+                  Characters (without spaces): {analysis.charactersNoSpaces}<br/>
+                  Sentences: {analysis.sentences}<br/>
+                  Average words per sentence: {analysis.averageWordsPerSentence.toFixed(2)}<br/>
+                  Most frequent character: "{analysis.mostFrequentChar}"<br/>
+                  Byte size (UTF-8): {analysis.byteSize} bytes
                 </div>
               </div>
             </>
diff --git a/client/src/lib/utils/advanced-converters.ts b/client/src/lib/utils/advanced-converters.ts
@@ -26,24 +26,24 @@ export function jsonToCsv(jsonString: string): string {
     if (!Array.isArray(data)) {
       throw new Error('JSON must be an array of objects');
     }
-    
+
     if (data.length === 0) {
       return '';
     }
-    
+
     const headers = Object.keys(data[0]);
     const csvRows = [headers.join(',')];
-    
+
     for (const row of data) {
       const values = headers.map(header => {
         const value = row[header];
-        return typeof value === 'string' && (value.includes(',') || value.includes('"')) 
-          ? `"${value.replace(/"/g, '""')}"` 
+        return typeof value === 'string' && (value.includes(',') || value.includes('"'))
+          ? `"${value.replace(/"/g, '""')}"`
           : value;
       });
       csvRows.push(values.join(','));
     }
-    
+
     return csvRows.join('\n');
   } catch (error) {
     throw new Error(`JSON to CSV conversion error: ${error instanceof Error ? error.message : 'Unknown error'}`);
@@ -56,21 +56,21 @@ export function csvToJson(csvString: string): string {
     if (lines.length < 2) {
       throw new Error('CSV must have at least a header row and one data row');
     }
-    
+
     const headers = lines[0].split(',').map(h => h.trim());
     const result = [];
-    
+
     for (let i = 1; i < lines.length; i++) {
       const values = lines[i].split(',').map(v => v.trim());
       const obj: any = {};
-      
+
       headers.forEach((header, index) => {
         obj[header] = values[index] || '';
       });
-      
+
       result.push(obj);
     }
-    
+
     return JSON.stringify(result, null, 2);
   } catch (error) {
     throw new Error(`CSV to JSON conversion error: ${error instanceof Error ? error.message : 'Unknown error'}`);
@@ -98,25 +98,25 @@ export function rgbToHsl(r: number, g: number, b: number): { h: number; s: numbe
   r /= 255;
   g /= 255;
   b /= 255;
-  
+
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
   let h = 0;
   let s = 0;
   const l = (max + min) / 2;
-  
+
   if (max !== min) {
     const d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    
+
     switch (max) {
       case r: h = (g - b) / d + (g < b ? 6 : 0); break;
       case g: h = (b - r) / d + 2; break;
       case b: h = (r - g) / d + 4; break;
     }
     h /= 6;
   }
-  
+
   return {
     h: Math.round(h * 360),
     s: Math.round(s * 100),
@@ -128,7 +128,7 @@ export function hslToRgb(h: number, s: number, l: number): { r: number; g: numbe
   h /= 360;
   s /= 100;
   l /= 100;
-  
+
   const hue2rgb = (p: number, q: number, t: number) => {
     if (t < 0) t += 1;
     if (t > 1) t -= 1;
@@ -137,9 +137,9 @@ export function hslToRgb(h: number, s: number, l: number): { r: number; g: numbe
     if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
     return p;
   };
-  
+
   let r, g, b;
-  
+
   if (s === 0) {
     r = g = b = l;
   } else {
@@ -149,7 +149,7 @@ export function hslToRgb(h: number, s: number, l: number): { r: number; g: numbe
     g = hue2rgb(p, q, h);
     b = hue2rgb(p, q, h - 1/3);
   }
-  
+
   return {
     r: Math.round(r * 255),
     g: Math.round(g * 255),
@@ -169,9 +169,9 @@ export function generateLoremIpsum(paragraphs: number, wordsPerParagraph: number
     'occaecat', 'cupidatat', 'non', 'proident', 'sunt', 'culpa', 'qui', 'officia',
     'deserunt', 'mollit', 'anim', 'id', 'est', 'laborum'
   ];
-  
+
   const result = [];
-  
+
   for (let p = 0; p < paragraphs; p++) {
     const paragraph = [];
     for (let w = 0; w < wordsPerParagraph; w++) {
@@ -180,7 +180,7 @@ export function generateLoremIpsum(paragraphs: number, wordsPerParagraph: number
     }
     result.push(paragraph.join(' ') + '.');
   }
-  
+
   return result.join('\n\n');
 }
 
@@ -190,24 +190,26 @@ export function analyzeString(text: string) {
   const words = text.trim().split(/\s+/).filter(w => w.length > 0);
   const characters = text.length;
   const charactersNoSpaces = text.replace(/\s/g, '').length;
-  const paragraphs = text.split(/\n\s*\n/).filter(p => p.trim().length > 0).length;
-  
+
+  // Calculate byte size (UTF-8 encoding)
+  const byteSize = new TextEncoder().encode(text).length;
+
   // Character frequency
   const charFreq: { [key: string]: number } = {};
   for (const char of text) {
     charFreq[char] = (charFreq[char] || 0) + 1;
   }
-  
+
   return {
     characters,
     charactersNoSpaces,
     words: words.length,
     lines: lines.length,
-    paragraphs,
     sentences: text.split(/[.!?]+/).filter(s => s.trim().length > 0).length,
     averageWordsPerSentence: words.length / text.split(/[.!?]+/).filter(s => s.trim().length > 0).length || 0,
     mostFrequentChar: Object.entries(charFreq).sort(([,a], [,b]) => b - a)[0]?.[0] || '',
-    charFrequency: charFreq
+    charFrequency: charFreq,
+    byteSize
   };
 }
 
@@ -252,13 +254,13 @@ export function htmlToJsx(html: string): string {
 // Cron expression parser
 export function parseCronExpression(expression: string): string {
   const parts = expression.trim().split(/\s+/);
-  
+
   if (parts.length !== 5 && parts.length !== 6) {
     throw new Error('Invalid cron expression. Expected 5 or 6 parts.');
   }
-  
+
   const [minute, hour, dayOfMonth, month, dayOfWeek, year] = parts;
-  
+
   const parseField = (value: string, fieldName: string, min: number, max: number): string => {
     if (value === '*') return `any ${fieldName}`;
     if (value.includes('/')) {
@@ -274,19 +276,19 @@ export function parseCronExpression(expression: string): string {
     }
     return `${fieldName} ${value}`;
   };
-  
+
   const minuteDesc = parseField(minute, 'minute', 0, 59);
   const hourDesc = parseField(hour, 'hour', 0, 23);
   const dayOfMonthDesc = parseField(dayOfMonth, 'day of month', 1, 31);
   const monthDesc = parseField(month, 'month', 1, 12);
   const dayOfWeekDesc = parseField(dayOfWeek, 'day of week', 0, 6);
-  
+
   let description = `At ${minuteDesc} of ${hourDesc}, on ${dayOfMonthDesc} of ${monthDesc}, and on ${dayOfWeekDesc}`;
-  
+
   if (year) {
     const yearDesc = parseField(year, 'year', 1970, 3000);
     description += `, in ${yearDesc}`;
   }
-  
+
   return description;
 }
