Cómo construir un editor de código en el navegador

Un editor web útil necesita mucho más que un <textarea> con colores. Debe representar archivos, conservar cambios, responder al teclado y coordinarse con un servidor que trate cada ruta y ejecución como una operación sensible.

Separar modelo y vista

El árbol de archivos es una proyección de una raíz autorizada. El estado del editor mantiene pestañas, archivo activo, versión leída, selección e indicador de cambios.

type OpenFile = {
  path: string;
  content: string;
  savedContent: string;
  version: string;
};

const dirty = file.content !== file.savedContent;

Separar content y savedContent evita depender de un icono optimista: el estado modificado siempre puede calcularse.

Guardar sin destruir cambios

El servidor normaliza la ruta, comprueba que permanezca dentro del workspace y escribe primero un archivo temporal. Además, cada lectura devuelve una versión o etag. Si alguien modificó el archivo, el guardado responde con conflicto en vez de sobrescribir.

PUT /api/files
If-Match: "sha256:abc123"

{ "path": "src/app.ts", "content": "..." }

Un autoguardado necesita debounce, estado visible y recuperación local. No debe ejecutarse mientras existe un conflicto pendiente.

Experiencia de edición

Para resaltado y lenguaje se puede integrar Monaco o CodeMirror. Sin embargo, la calidad también depende de búsqueda, navegación por teclado, deshacer/rehacer, archivos grandes, mensajes de error y accesibilidad.

Los atajos deben vivir cerca del editor y no capturar combinaciones globales cuando el foco está fuera. En móvil priorizo lectura, selección de archivo y cambios pequeños.

Ejecución y terminal

El código del usuario nunca se ejecuta dentro del proceso principal. Una solicitud crea una tarea en un runtime aislado con límites de CPU, memoria, red y tiempo.

{
  "workspaceId": "ws_42",
  "command": "npm test",
  "limits": { "cpu": 1, "memoryMb": 512, "timeoutSec": 60 }
}

La salida se transmite mediante WebSocket o Server-Sent Events, pero el servidor sigue controlando el proceso y puede cancelarlo.

De editor a workspace

iCode comenzó con edición y archivos; Kode añadió colaboración; iKode conecta proyectos, tareas, versiones y entornos reproducibles. Esa evolución muestra una regla importante: conviene resolver primero la integridad del archivo y después agregar terminales, colaboración o despliegues.

Un editor web se siente simple cuando sus límites complejos están bien diseñados. La sintaxis coloreada llama la atención; persistencia, conflictos y aislamiento son lo que permite confiar en él.