feat: enable code editor highlight

src/components/code-editor.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useRef, useState, useCallback } from "react";
-import { debounce } from "@/lib/utils";
+import { debounce, highlightHTML } from "@/lib/utils";
 
 interface CodeEditorProps {
   code: string;
@@ -12,6 +12,7 @@ interface CodeEditorProps {
 export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const highlightRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
   const [localCode, setLocalCode] = useState(code);
 
@@ -34,66 +35,88 @@ export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditor
     debouncedSave(newCode);
   };
 
-  // Check if user is near bottom when scrolling
-  const handleScroll = () => {
-    if (!containerRef.current) return;
-    
-    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-    // Consider "at bottom" if within 30px of the bottom
+  // Sync scroll between textarea and highlight
+  const handleScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
+    if (highlightRef.current && textareaRef.current) {
+      highlightRef.current.scrollTop = textareaRef.current.scrollTop;
+      highlightRef.current.scrollLeft = textareaRef.current.scrollLeft;
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     const isNearBottom = scrollHeight - scrollTop - clientHeight < 30;
     setIsAtBottom(isNearBottom);
   };
 
   useEffect(() => {
-    const container = containerRef.current;
-    if (container) {
-      container.addEventListener('scroll', handleScroll);
-      return () => container.removeEventListener('scroll', handleScroll);
-    }
-  }, []);
-
-  useEffect(() => {
-    // Only auto-scroll if user was already at the bottom and not focused on textarea
-    if (isAtBottom && containerRef.current && document.activeElement !== textareaRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    if (isAtBottom && textareaRef.current && document.activeElement !== textareaRef.current) {
+      textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+      if (highlightRef.current) {
+        highlightRef.current.scrollTop = highlightRef.current.scrollHeight;
+      }
     }
   }, [localCode, isLoading, isAtBottom]);
 
-  // Auto-resize textarea
-  const adjustTextareaHeight = () => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+  // Handle tab key for indentation
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const textarea = e.currentTarget;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      
+      const newValue = localCode.substring(0, start) + '  ' + localCode.substring(end);
+      setLocalCode(newValue);
+      debouncedSave(newValue);
+      
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      }, 0);
     }
   };
 
-  useEffect(() => {
-    adjustTextareaHeight();
-  }, [localCode]);
+  const highlightedCode = highlightHTML(localCode);
 
   return (
-    <div className="flex-1 overflow-auto p-4 pr-2">
+    <div className="flex-1 overflow-hidden p-4 pr-2">
       <div 
         ref={containerRef} 
-        className="code-area p-4 rounded-md font-mono text-sm h-full overflow-auto border border-novita-gray/20 relative"
+        className="code-area rounded-md font-mono text-sm h-full border border-novita-gray/20 relative overflow-hidden"
       >
-        <textarea
-          ref={textareaRef}
-          value={localCode}
-          onChange={handleCodeChange}
-          disabled={isLoading}
-          className="w-full min-h-full bg-transparent text-white resize-none outline-none whitespace-pre-wrap font-mono text-sm leading-relaxed"
-          style={{ 
-            minHeight: '100%',
-            fontFamily: 'inherit',
-            fontSize: 'inherit',
-            lineHeight: 'inherit'
-          }}
-          placeholder="Your generated code will appear here..."
-          spellCheck={false}
-        />
+        <div className="relative h-full">
+          {/* Syntax highlighted background - always visible */}
+          <div 
+            ref={highlightRef}
+            className="absolute inset-0 overflow-auto p-4 pointer-events-none whitespace-pre-wrap font-mono text-sm leading-relaxed"
+            style={{ 
+              fontSize: '0.875rem',
+              lineHeight: '1.5',
+              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+              color: '#d4d4d4'
+            }}
+            dangerouslySetInnerHTML={{ __html: highlightedCode + '\n' }}
+          />
+
+          {/* Editable textarea - always transparent */}
+          <textarea
+            ref={textareaRef}
+            value={localCode}
+            onChange={handleCodeChange}
+            onScroll={handleScroll}
+            onKeyDown={handleKeyDown}
+            disabled={isLoading}
+            className="absolute inset-0 w-full h-full bg-transparent text-transparent caret-white resize-none outline-none whitespace-pre-wrap font-mono text-sm leading-relaxed p-4 selection:bg-blue-500/30"
+            style={{ 
+              fontSize: '0.875rem',
+              lineHeight: '1.5',
+              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
+            }}
+            placeholder="Your generated code will appear here..."
+            spellCheck={false}
+          />
+        </div>
+        
         {isLoading && (
-          <span className="absolute bottom-4 right-4 inline-block h-4 w-2 bg-white/70 animate-pulse"></span>
+          <span className="absolute bottom-4 right-4 inline-block h-4 w-2 bg-white/70 animate-pulse z-10"></span>
         )}
       </div>
     </div>

src/lib/utils.ts

@@ -15,3 +15,33 @@ export function debounce<T extends (...args: any[]) => any>(
     timeout = setTimeout(() => func(...args), wait);
   };
 }
+
+export function highlightHTML(code: string): string {
+  if (!code) return '';
+  
+  let result = code;
+  
+  result = result
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+  
+  result = result.replace(/(&lt;style[^&]*?&gt;)([\s\S]*?)(&lt;\/style&gt;)/gi, (match, openTag, cssContent, closeTag) => {
+    const highlighted = cssContent
+      .replace(/([a-zA-Z-]+)(\s*:\s*)([^;]+)(;?)/g, '<span style="color: #9cdcfe;">$1</span><span style="color: #d4d4d4;">$2</span><span style="color: #ce9178;">$3</span><span style="color: #d4d4d4;">$4</span>')
+      .replace(/(\{|\})/g, '<span style="color: #ffd700;">$1</span>');
+    return openTag + highlighted + closeTag;
+  });
+  
+  result = result
+    .replace(/(&lt;\/?)([a-zA-Z][a-zA-Z0-9-]*)([\s\S]*?)(&gt;)/g, 
+      '<span style="color: #569cd6;">$1</span><span style="color: #4ec9b0;">$2</span><span style="color: #9cdcfe;">$3</span><span style="color: #569cd6;">$4</span>')
+    .replace(/(\s)([a-zA-Z-]+)(=)(&quot;[^&quot;]*&quot;)/g, 
+      '$1<span style="color: #92c5f8;">$2</span><span style="color: #d4d4d4;">$3</span><span style="color: #ce9178;">$4</span>')
+    .replace(/(&lt;!--[\s\S]*?--&gt;)/g, '<span style="color: #6a9955; font-style: italic;">$1</span>')
+    .replace(/(&lt;!DOCTYPE[^&]*?&gt;)/gi, '<span style="color: #c586c0;">$1</span>');
+  
+  return result;
+};