update

ts_web/elements/wysiwyg/blocks/text/code.block.ts

@@ -5,13 +5,14 @@ import { WysiwygSelection } from '../../wysiwyg.selection.js';
 import hlight from 'highlight.js';
 
 /**
- * New CodeBlockHandler with improved architecture
+ * CodeBlockHandler with improved architecture
  * 
- * Key improvements:
- * 1. Simpler DOM structure
- * 2. Better line number handling
- * 3. Non-intrusive syntax highlighting
- * 4. Cleaner event handling
+ * Key features:
+ * 1. Simple DOM structure
+ * 2. Line number handling
+ * 3. Syntax highlighting only when not focused (grey text while editing)
+ * 4. Clean event handling
+ * 5. Copy button functionality
  */
 export class CodeBlockHandler extends BaseBlockHandler {
   type = 'code';
@@ -118,6 +119,23 @@ export class CodeBlockHandler extends BaseBlockHandler {
     editor.addEventListener('focus', () => {
       isEditing = true;
       container.classList.add('editing');
+      
+      // Remove all syntax highlighting when focused
+      const content = editor.textContent || '';
+      editor.textContent = content; // This removes all HTML formatting
+      
+      // Restore cursor position after removing highlighting
+      requestAnimationFrame(() => {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        if (editor.firstChild) {
+          range.setStart(editor.firstChild, 0);
+          range.collapse(true);
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+        }
+      });
+      
       handlers.onFocus();
     });
     
@@ -137,15 +155,8 @@ export class CodeBlockHandler extends BaseBlockHandler {
       // Update line numbers
       this.updateLineNumbers(element);
       
-      // Clear any pending highlight
+      // Clear any pending highlight timer (no highlighting while editing)
       clearTimeout(this.highlightTimer);
-      
-      // Schedule highlighting (only if not actively editing)
-      if (!isEditing) {
-        this.highlightTimer = setTimeout(() => {
-          this.applyHighlighting(element, block);
-        }, 500);
-      }
     });
     
     // Keydown handler
@@ -196,8 +207,8 @@ export class CodeBlockHandler extends BaseBlockHandler {
     editor.addEventListener('compositionstart', () => handlers.onCompositionStart());
     editor.addEventListener('compositionend', () => handlers.onCompositionEnd());
     
-    // Initial syntax highlighting if content exists
-    if (block.content && !isEditing) {
+    // Initial syntax highlighting if content exists and not focused
+    if (block.content && document.activeElement !== editor) {
       requestAnimationFrame(() => {
         this.applyHighlighting(element, block);
       });
@@ -504,6 +515,15 @@ export class CodeBlockHandler extends BaseBlockHandler {
         pointer-events: none;
       }
       
+      /* When editing (focused), show grey text without highlighting */
+      .code-block-container.editing .code-editor {
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')} !important;
+      }
+      
+      .code-block-container.editing .code-editor * {
+        color: inherit !important;
+      }
+      
       /* Syntax Highlighting - Muted colors */
       .code-editor .hljs-keyword {
         color: ${cssManager.bdTheme('#dc2626', '#f87171')};