feat(workspace): add syntax highlighting and language selector to /code blocks

frontend/src/features/workspace/WorkspaceView.tsx

@@ -51,6 +51,7 @@ import {
 } from 'lucide-react';
 import { BlockType, Document, DocumentBlock, DocLockInfo, DocShare, TagDetails, TagSummary, User } from '../../lib/types';
 import { api, getToken, triggerHaptic } from '../../lib/api';
+import { CodeBlockItem } from './CodeBlockItem';
 
 interface WorkspaceViewProps {
   currentUser?: User | null;
@@ -1377,7 +1378,12 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
         return;
       }
 
-      updateBlock(blockId, { type: cmd.type, content: cleanContent, checked: cmd.type === 'todo' ? false : undefined });
+      updateBlock(blockId, {
+        type: cmd.type,
+        content: cleanContent,
+        checked: cmd.type === 'todo' ? false : undefined,
+        lang: cmd.type === 'code' ? (block.lang || 'javascript') : block.lang,
+      });
       focusBlock(blockId);
     }
   };
@@ -2839,21 +2845,20 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
                           {/* TYPE: CODE */}
                           {block.type === 'code' && (
-                            <div className="p-2 code-block">
-                              <textarea
-                                ref={(el) => (blockInputRefs.current[block.id] = el)}
-                                readOnly={isReadOnly}
-                                rows={Math.max(2, (block.content || '').split('\n').length)}
-                                value={block.content}
-                                onFocus={handleBlockFocus}
-                                onBlur={handleBlockBlur}
-                                onChange={(e) => handleContentChange(block, e.target.value)}
-                                onKeyDown={(e) => handleKeyDown(e, block, originalIndex)}
-                                className={`w-full bg-transparent text-xs font-mono text-main focus:outline-none resize-none ${
-                                  isReadOnly ? 'cursor-default' : ''
-                                }`}
-                              />
-                            </div>
+                            <CodeBlockItem
+                              block={block}
+                              isReadOnly={isReadOnly}
+                              inputRef={(el) => (blockInputRefs.current[block.id] = el)}
+                              onFocus={handleBlockFocus}
+                              onBlur={handleBlockBlur}
+                              onChangeContent={(content) => handleContentChange(block, content)}
+                              onChangeLang={(lang) => {
+                                if (!isReadOnly) {
+                                  ensureLock();
+                                  updateBlock(block.id, { lang });
+                                }
+                              }}
+                            />
                           )}
 
                           {/* TYPE: TABLE */}