+
+
-
+
+
+
-
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
Output:
+
{{ output || 'Ejecuta el código para ver el resultado.' }}
+
-
-
-
Input:
-
-
-
+
+
+
+
Chat Input:
+
+
+
-
-
Output:
-
{{ outputChat }}
-
-
+
+
Chat Output:
+
{{ outputChat }}
+
+
+
\ No newline at end of file
diff --git a/frontend/angular/src/app/shared/editor/editor.component.scss b/frontend/angular/src/app/shared/editor/editor.component.scss
index 7ff6b81..05476e0 100644
--- a/frontend/angular/src/app/shared/editor/editor.component.scss
+++ b/frontend/angular/src/app/shared/editor/editor.component.scss
@@ -1,13 +1,62 @@
+.editor-container:not(.activity-mode) {
+ .editor {
+ display: flex;
+
+ max-width: 1000px;
+ margin: 0 auto;
+ }
+
+
+ .editor .cm-panel {
+ flex: 1 1 65%;
+ min-width: 0;
+ }
+
+
+ .editor .output-panel {
+ flex: 0 0 30%;
+ max-width: 30%;
+ display: flex;
+ flex-direction: column;
+ }
+}
.editor-container {
flex-direction: column;
gap: 10px;
height: 100%;
+
+ &.activity-mode {
+ background: #1e1e1e;
+ color: white;
+ padding: 1rem;
+ border-radius: 10px;
+ height: auto;
+ }
+
+ .instructions {
+ font-size: 1rem;
+ color: #dddddd;
+ margin-bottom: 1rem;
+ padding: 0.5rem;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 4px;
+ }
+
+
.editor {
display: flex;
flex-direction: row;
gap: 1rem;
- min-width: 100%;
height: 70vh;
+ min-width: 100%;
+ //overflow-x: hidden;
+ &.activity-layout {
+ height: 300px;
+ .cm-panel {
+ width: 100%;
+ }
+ }
+
.cm-panel {
border: 1px solid #ffffff32;
border-radius: 12px;
@@ -15,20 +64,24 @@
width: 70%;
height: 100%;
}
+
.output-panel {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
+
.section {
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
min-height: 0;
+
&:last-child {
margin-bottom: 0;
}
+
h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
@@ -36,11 +89,13 @@
color: #dddddd;
flex-shrink: 0;
}
+
.cm-panel {
flex: 1;
width: 100%;
min-height: 0;
}
+
pre {
background: #181335;
border: 1px solid #ffffff32;
@@ -55,6 +110,19 @@
}
}
}
+
+ .botones {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ margin: 30px auto;
+ flex-shrink: 0;
+
+ .activity-mode & {
+ margin: 1rem 0;
+ }
+ }
+
.btn-ejecutar {
align-items: center;
background-color: #df881d;
@@ -72,35 +140,288 @@
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
- margin: 30px auto;
flex-shrink: 0;
+
+ span {
+ background-color: #2e2143;
+ padding: 16px 24px;
+ border-radius: 6px;
+ width: 100%;
+ height: 100%;
+ transition: 300ms;
+ }
+
+ &:hover {
+ outline: 0;
+ color: white;
+
+ span {
+ background: none;
+ }
+ }
+
+ &:active {
+ transform: scale(0.9);
+ }
}
- button:active,
- button:hover {
- outline: 0;
- color: white;
+
+ .btn-actividad {
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background-color 0.3s;
+
+ &.btn-enviar {
+ background-color: #4CAF50;
+ color: white;
+
+ &:hover {
+ background-color: #45a049;
+ }
+ }
+
+ &.btn-restablecer {
+ background-color: #f44336;
+ color: white;
+
+ &:hover {
+ background-color: #da190b;
+ }
+ }
}
- button span {
- background-color: #2e2143;
- padding: 16px 24px;
- border-radius: 6px;
- width: 100%;
- height: 100%;
- transition: 300ms;
+
+ .resultado {
+ font-weight: bold;
+ padding: 0.5rem;
+ border-radius: 4px;
+ text-align: center;
+ margin-top: 1rem;
+ }
+
+ .chat-section {
+ margin-top: 2rem;
+
+ .section {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 1rem;
+
+ h3 {
+ font-size: 1.2rem;
+ margin-bottom: 0.5rem;
+ margin-top: 0;
+ color: #dddddd;
+ }
+
+ .cm-panel {
+ height: 150px;
+ width: 100%;
+ }
+
+ pre {
+ background: #181335;
+ border: 1px solid #ffffff32;
+ border-radius: 4px;
+ color: #98c379;
+ padding: 1rem;
+ margin: 0;
+ overflow-y: auto;
+ min-height: 150px;
+ }
+ }
+ }
+}
+
+
+.actividad-container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ background: #1e1e1e;
+ color: white;
+ padding: 1rem;
+ border-radius: 10px;
+}
+
+.editor-panel {
+ border-radius: 8px;
+}
+
+
+.intro-template {
+ height: 100%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-areas:
+ "left right"
+ "left right";
+ gap: 1rem;
+ background: #000;
+ color: white;
+}
+
+.intro-left {
+ grid-area: left;
+ padding: 1rem;
+ background: #000;
+
+ h1 {
+ color: #fff;
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ border-bottom: 2px solid #333;
+ padding-bottom: 0.5rem;
+ background: linear-gradient(135deg, #ff6ec4, #7873f5);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ }
+
+ h2 {
+ color: #ff6ec4;
+ font-size: 1.8rem;
+ margin: 1.5rem 0 1rem 0;
}
- button:hover span {
- background: none;
+ h3 {
+ color: #7873f5;
+ font-size: 1.3rem;
+ margin-bottom: 0.1rem;
}
- button:active {
- transform: scale(0.9);
+ p {
+ color: #ccc;
+ line-height: 1.6;
+ font-size: 1.1rem;
+ margin-bottom: 0.8rem;
+ }
+
+ .example-box {
+ background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+ border: 1px solid #444;
+ border-radius: 0.8rem;
+ padding: 1rem;
+ margin: 1rem 0;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+ border-left: 4px solid #ff6ec4;
+
+ h3 {
+ color: #ff6ec4;
+ margin-top: 0;
+ margin-bottom: 0.5rem;
+ }
+ }
+
+ .code-block {
+ background: #0d1117;
+ border: 1px solid #30363d;
+ border-radius: 0.5rem;
+ padding: 1.2rem;
+ margin: 0.5rem 0;
+ overflow-x: auto;
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(90deg, #ff6ec4, #7873f5);
+ border-radius: 0.5rem 0.5rem 0 0;
+ }
+
+ pre {
+ color: #c9d1d9;
+ font-family: "Courier New", monospace;
+ margin: 0;
+ white-space: pre-wrap;
+ font-size: 0.95rem;
+ line-height: 1.5;
+ }
}
}
+
+.intro-right {
+ grid-area: right;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ background: #000;
+
+ .buttons-field {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ margin-bottom: 1rem;
+ }
+
+ .editor-field {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ min-height: 0;
+ }
+
+ .verification-result {
+ padding: 0.8rem;
+ border-radius: 0.5rem;
+ border-left: 4px solid #ff6ec4;
+ background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
+ color: #ccc;
+ font-weight: 500;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+ p {
+ margin: 0;
+ font-size: 1rem;
+ }
+ }
+}
+
+.editor-block {
+ background: linear-gradient(135deg, #2c2c2c, #3a3a3a);
+ padding: 1.5rem;
+ border-radius: 8px;
+ border: 1px solid #444;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+
+ h3 {
+ color: #ff6ec4;
+ margin-top: 0;
+ margin-bottom: 0.8rem;
+ font-size: 1.2rem;
+ background: linear-gradient(135deg, #ff6ec4, #7873f5);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ }
+
+ p {
+ color: #ccc;
+ line-height: 1.6;
+ margin: 0;
+ font-size: 1rem;
+ }
+}
+
+.btn {
+ border: 1px solid white;
+ color: white !important;
+}
+
.cm-s-material.CodeMirror {
background: #181335;
color: #abb2bf;
}
+
::ng-deep .CodeMirror {
background-color: #181335 !important;
color: #abb2bf !important;
@@ -108,40 +429,143 @@
border-radius: 8px;
height: 100%;
}
+
::ng-deep .CodeMirror-gutters {
background-color: #181335 !important;
border-right: 1px solid #ffffff32;
}
+
::ng-deep .CodeMirror-linenumber {
color: #abb2bf !important;
}
+
::ng-deep .CodeMirror-cursor {
border-left: 2px solid #df881d !important;
}
+
::ng-deep .CodeMirror-placeholder {
color: #abb2bf !important;
}
-@media screen and (max-width: 768px) {
- .editor-container {
+// Estilos para el autocompletado
+::ng-deep .CodeMirror-hints {
+ position: absolute;
+ z-index: 10;
+ overflow: hidden;
+ list-style: none;
+ margin: 0;
+ padding: 2px;
+ border-radius: 4px;
+ border: 1px solid #ffffff32;
+ background: #181335;
+ font-size: 90%;
+ max-height: 20em;
+ overflow-y: auto;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.gradient-text {
+ background: linear-gradient(135deg, #ff6ec4, #7873f5);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.dark-panel {
+ background: #1e1e1e;
+ color: white;
+ padding: 1rem;
+ border-radius: 10px;
+}
+
+.highlight-border {
+ border-left: 4px solid #ff6ec4;
+}
+
+// Responsive design
+@media (max-width: 768px) {
+ .intro-template {
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "left"
+ "right";
height: auto;
+ }
+
+ .intro-left {
+ max-height: 50vh;
+
+ h1 {
+ font-size: 2rem;
+ }
+
h2 {
- font-size: 1.2rem;
+ font-size: 1.5rem;
}
- .editor {
+ }
+
+ .intro-right {
+ .buttons-field {
flex-direction: column;
- height: auto;
- .cm-panel {
+ gap: 0.5rem;
+
+ button, app-search {
width: 100%;
- height: 300px;
}
- .output-panel {
- width: 100%;
- height: auto;
- .section {
- margin-bottom: 1rem;
- }
+ }
+ }
+
+ .editor {
+ flex-direction: column;
+ height: auto;
+
+ .cm-panel {
+ width: 100%;
+ height: 300px;
+ }
+ }
+}
+.CodeMirror,
+ngx-codemirror,
+.cm-panel {
+ width: 100% !important;
+ max-width: 100% !important;
+}
+@media (max-width: 480px) {
+ .intro-left {
+ padding: 0.5rem;
+
+ h1 {
+ font-size: 1.8rem;
+ }
+
+ .example-box {
+ padding: 0.8rem;
+ margin: 0.8rem 0;
+ }
+
+ .code-block {
+ padding: 1rem;
+
+ pre {
+ font-size: 0.85rem;
}
}
}
+
+ .intro-right {
+ padding: 0.5rem;
+ }
+
+ .editor-block {
+ padding: 1rem;
+
+ h3 {
+ font-size: 1.1rem;
+ }
+
+ p {
+ font-size: 0.9rem;
+ }
+ }
}
diff --git a/frontend/angular/src/app/shared/editor/editor.component.ts b/frontend/angular/src/app/shared/editor/editor.component.ts
index 2b1e71f..02e89f3 100644
--- a/frontend/angular/src/app/shared/editor/editor.component.ts
+++ b/frontend/angular/src/app/shared/editor/editor.component.ts
@@ -1,20 +1,44 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-// EditorComponent.ts
-import { Component, OnInit } from '@angular/core';
+// EditorComponent.ts - Versión con límites usando Web Workers
+import { Component, OnInit, AfterViewInit, ViewChild, OnDestroy, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
-import { CodemirrorModule } from '@ctrl/ngx-codemirror';
+import { CodemirrorModule, CodemirrorComponent } from '@ctrl/ngx-codemirror';
import { HttpClient } from '@angular/common/http';
+import { PythonLSPService, LSPMessage, CompletionResponse } from '../../services/python-lsp.service';
+import { Subscription } from 'rxjs';
// Importacion de lint y modo python para CodeMirror
import * as CodeMirrorNS from 'codemirror';
import 'codemirror/addon/lint/lint';
-// import 'codemirror/addon/lint/lint.css';
import 'codemirror/mode/python/python';
import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/anyword-hint';
(window as any).CodeMirror = CodeMirrorNS;
declare const CodeMirror: any;
+// Keywords de Python para autocompletado
+const PYTHON_KEYWORDS = [
+ 'False', 'None', 'True', 'and', 'as', 'assert', 'async', 'await', 'break', 'class',
+ 'continue', 'def', 'del', 'elif', 'else', 'except', 'finally', 'for', 'from', 'global',
+ 'if', 'import', 'in', 'is', 'lambda', 'nonlocal', 'not', 'or', 'pass', 'raise',
+ 'return', 'try', 'while', 'with', 'yield', 'print', 'range', 'len', 'str', 'int', 'float',
+ 'list', 'dict', 'set', 'tuple', 'input', 'sum', 'min', 'max'
+];
+
+// Funciones built-in de Python para autocompletado
+const PYTHON_BUILTINS = [
+ 'abs', 'all', 'any', 'ascii', 'bin', 'bool', 'bytearray', 'bytes', 'callable', 'chr',
+ 'classmethod', 'compile', 'complex', 'delattr', 'dict', 'dir', 'divmod', 'enumerate',
+ 'eval', 'exec', 'filter', 'float', 'format', 'frozenset', 'getattr', 'globals',
+ 'hasattr', 'hash', 'help', 'hex', 'id', 'input', 'int', 'isinstance', 'issubclass',
+ 'iter', 'len', 'list', 'locals', 'map', 'max', 'memoryview', 'min', 'next', 'object',
+ 'oct', 'open', 'ord', 'pow', 'print', 'property', 'range', 'repr', 'reversed', 'round',
+ 'set', 'setattr', 'slice', 'sorted', 'staticmethod', 'str', 'sum', 'super', 'tuple',
+ 'type', 'vars', 'zip'
+];
+
// Lint global para CodeMirror y Pyodide
function pythonLint(code: string) {
const pyodide = (window as any).pyodideInstance;
@@ -58,30 +82,106 @@ function pythonLint(code: string) {
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.scss'],
})
-export class EditorComponent implements OnInit {
+export class EditorComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+ @ViewChild('codeEditor') private codeEditorComponent!: CodemirrorComponent;
+
+ // Inputs para hacer el componente reutilizable
+ @Input() mode: 'full' | 'activity' = 'full'; // Modo del editor
+ @Input() initialCode = ''; // Código inicial
+ @Input() correctSolution = ''; // Solución correcta (para modo actividad)
+ @Input() showChat = true; // Mostrar funcionalidad de chat
+ @Input() showInputOutput = true; // Mostrar paneles de input/output
+ @Input() height = '70vh'; // Altura del editor
+ @Input() placeholder = 'Escribe tu código…'; // Placeholder
+
+ // Nuevos inputs para límites de ejecución
+ @Input() timeoutSeconds = 5; // Límite de tiempo en segundos
+ @Input() memoryLimitMB = 50; // Límite de memoria en MB
+ @Input() maxOutputLines = 1000; // Límite de líneas de output
+
+ // Outputs para comunicación con el componente padre - CORREGIDOS
+ @Output() codeChange = new EventEmitter
();
+ @Output() codeOutput = new EventEmitter();
+ @Output() codeExecuted = new EventEmitter<{code: string, output: string}>();
+ @Output() solutionCheck = new EventEmitter<{correct: boolean, output: string}>();
+ @Output() executionTimeout = new EventEmitter();
+ @Output() memoryExceeded = new EventEmitter();
+ @Output() outputLimitExceeded = new EventEmitter();
+
codigo = '';
inputs = '';
output = '';
inputChat = '';
outputChat = '';
+ isExecuting = false;
cmOptions = {
mode: 'python',
theme: 'material',
lineNumbers: true,
indentUnit: 4,
+ lineWrapping: true,
+ viewportMargin: Infinity,
tabSize: 4,
styleActiveLine: true,
matchBrackets: true,
- viewportMargin: Infinity,
- placeholder: 'Escribe tu código…',
+ placeholder: this.placeholder,
gutters: ['CodeMirror-lint-markers'],
lint: {
getAnnotations: pythonLint,
async: false
},
extraKeys: {
- 'Ctrl-Space': 'autocomplete'
+ 'Ctrl-Space': (cm: any) => {
+ CodeMirror.showHint(cm, (cm: any) => {
+ const cursor = cm.getCursor();
+ const token = cm.getTokenAt(cursor);
+ const start = token.start;
+ const end = cursor.ch;
+ const line = cursor.line;
+ const currentWord = token.string;
+
+ const list = [...PYTHON_KEYWORDS, ...PYTHON_BUILTINS].filter(word =>
+ word.toLowerCase().startsWith(currentWord.toLowerCase()) &&
+ word !== currentWord
+ );
+
+ // Obtener palabras del documento actual
+ const words = new Set();
+ for (let i = 0; i < cm.lineCount(); i++) {
+ const lineText = cm.getLine(i);
+ const wordMatches = lineText.match(/[\w$]+/g);
+ if (wordMatches) {
+ wordMatches.forEach((word: string) => words.add(word));
+ }
+ }
+
+ // Agregar palabras del documento a las sugerencias
+ words.forEach(word => {
+ if (word.toLowerCase().startsWith(currentWord.toLowerCase()) &&
+ word !== currentWord &&
+ !list.includes(word)) {
+ list.push(word);
+ }
+ });
+
+ return {
+ list: list.sort(),
+ from: CodeMirror.Pos(line, start),
+ to: CodeMirror.Pos(line, end)
+ };
+ }, {
+ completeSingle: false
+ });
+ },
+ 'Tab': (cm: any) => {
+ if (cm.somethingSelected()) {
+ cm.indentSelection('add');
+ } else {
+ const spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
+ cm.replaceSelection(spaces);
+ }
+ }
}
};
@@ -96,6 +196,100 @@ export class EditorComponent implements OnInit {
pyodide: any;
pyodideReady = false;
codeMirrorInstance: any;
+ editorOptions: any;
+ codeEditor: any;
+ private lspSubscription: Subscription | null = null;
+ private completionItems: { label: string }[] = [];
+ private executionWorker: Worker | null = null;
+ private executionTimeoutHandle: any = null;
+
+ constructor(
+ private http: HttpClient,
+ private pythonLSP: PythonLSPService
+ ) {
+ // Función de autocompletado personalizada que combina LSP y palabras clave
+ const pythonHint = (cm: any) => {
+ const cursor = cm.getCursor();
+ const token = cm.getTokenAt(cursor);
+
+ // No mostrar sugerencias dentro de strings o comentarios
+ if (token.type === 'string' || token.type === 'comment') {
+ return null;
+ }
+
+ const words = new Set();
+
+ // Agregar palabras clave de Python
+ PYTHON_KEYWORDS.forEach(word => words.add(word));
+
+ // Agregar funciones built-in de Python
+ PYTHON_BUILTINS.forEach(word => words.add(word));
+
+ // Agregar sugerencias del LSP
+ this.completionItems.forEach(item => words.add(item.label));
+
+ // Agregar palabras del documento actual
+ for (let i = 0; i < cm.lineCount(); i++) {
+ const lineText = cm.getLine(i);
+ const wordMatches = lineText.match(/[\w$]+/g);
+ if (wordMatches) {
+ wordMatches.forEach((word: string) => words.add(word));
+ }
+ }
+
+ // Filtrar sugerencias basadas en el token actual
+ const filteredWords = Array.from(words).filter(word =>
+ word.toLowerCase().startsWith(token.string.toLowerCase()) &&
+ word !== token.string
+ ).sort();
+
+ return {
+ list: filteredWords,
+ from: CodeMirror.Pos(cursor.line, token.start),
+ to: CodeMirror.Pos(cursor.line, token.end)
+ };
+ };
+
+ this.editorOptions = {
+ mode: 'python',
+ theme: 'material',
+ lineNumbers: true,
+ lineWrapping: true,
+ styleActiveLine: true,
+ autoCloseBrackets: true,
+ matchBrackets: true,
+ lint: true,
+ extraKeys: {
+ 'Ctrl-Space': (cm: any) => {
+ // Solicitar sugerencias al LSP antes de mostrar el hint
+ const cursor = cm.getCursor();
+ this.requestCompletions(cm, cursor);
+ cm.showHint({
+ hint: pythonHint,
+ completeSingle: false,
+ closeOnUnfocus: false,
+ alignWithWord: true
+ });
+ },
+ 'Ctrl-B': false
+ },
+ hintOptions: {
+ hint: pythonHint,
+ completeSingle: false,
+ closeOnUnfocus: false,
+ alignWithWord: true
+ }
+ };
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes['initialCode'] && changes['initialCode'].currentValue !== undefined) {
+ this.codigo = this.initialCode;
+ }
+ if (changes['placeholder']) {
+ this.cmOptions.placeholder = this.placeholder;
+ }
+ }
async ngOnInit() {
// @ts-expect-error: loadPyodide no está definido en el contexto de TypeScript
@@ -103,6 +297,194 @@ export class EditorComponent implements OnInit {
this.pyodideReady = true;
(window as any).pyodideInstance = this.pyodide;
console.log('[Editor] Pyodide cargado desde CDN');
+
+ // Inicializar código si se proporciona
+ if (this.initialCode) {
+ this.codigo = this.initialCode;
+ }
+
+ // Suscribirse a los mensajes del LSP
+ this.lspSubscription = this.pythonLSP.onMessage().subscribe((message: LSPMessage) => {
+ if (message.method === 'textDocument/completion' && message.result) {
+ // Asegurarse de que el resultado sea del tipo esperado
+ const completionResult = message.result as CompletionResponse;
+ this.completionItems = completionResult.items || [];
+ }
+ });
+ }
+
+ ngAfterViewInit() {
+ setTimeout(() => {
+ if (this.codeEditorComponent) {
+ this.codeEditor = this.codeEditorComponent.codeMirror;
+
+ // Autocompletado en tiempo real al escribir
+ this.codeEditor.on('inputRead', (cm: any, change: any) => {
+ if (!change || !change.text) return;
+ const lastChar = change.text[change.text.length - 1];
+ // Solo dispara si el usuario escribe letra, número, punto o guion bajo
+ if (lastChar && /[\w.]/.test(lastChar)) {
+ const cursor = cm.getCursor();
+ const token = cm.getTokenAt(cursor);
+ if (token.type !== 'string' && token.type !== 'comment') {
+ // Solicita sugerencias al LSP y muestra el hint con la función unificada
+ this.requestCompletions(cm, cursor);
+ cm.showHint({
+ hint: this.editorOptions.hintOptions.hint,
+ completeSingle: false,
+ closeOnUnfocus: false,
+ alignWithWord: true
+ });
+ }
+ }
+ });
+
+ // Notificar cambios al LSP y emitir evento
+ this.codeEditor.on('change', (cm: any) => {
+ this.notifyLSPChanges(cm);
+ this.codigo = cm.getValue();
+ this.codeChange.emit(this.codigo);
+ });
+ }
+ }, 100);
+ }
+
+ ngOnDestroy() {
+ if (this.lspSubscription) {
+ this.lspSubscription.unsubscribe();
+ }
+ if (this.executionWorker) {
+ this.executionWorker.terminate();
+ }
+ if (this.executionTimeoutHandle) {
+ clearTimeout(this.executionTimeoutHandle);
+ }
+ }
+
+ private createSecurePythonCode(code: string): string {
+ // Código de seguridad que se inyecta para limitar ejecución
+ const secureWrapper = `
+import sys
+import time
+import threading
+from io import StringIO
+
+# Límites de seguridad
+MAX_OUTPUT_LINES = ${this.maxOutputLines}
+MAX_MEMORY_MB = ${this.memoryLimitMB}
+TIMEOUT_SECONDS = ${this.timeoutSeconds}
+
+# Variables de control
+_output_lines = 0
+_start_time = time.time()
+_original_stdout = sys.stdout
+_string_io = StringIO()
+_execution_stopped = False
+
+class LimitedStringIO(StringIO):
+ def write(self, s):
+ global _output_lines, _execution_stopped
+ if _execution_stopped:
+ return
+
+ # Contar líneas
+ _output_lines += s.count('\\n')
+ if _output_lines > MAX_OUTPUT_LINES:
+ _execution_stopped = True
+ super().write(f"\\n\\n Límite de output excedido ({MAX_OUTPUT_LINES} líneas)\\n")
+ raise Exception("Output limit exceeded")
+
+ # Verificar tiempo
+ if time.time() - _start_time > TIMEOUT_SECONDS:
+ _execution_stopped = True
+ super().write(f"\\n\\n Tiempo de ejecución excedido ({TIMEOUT_SECONDS}s)\\n")
+ raise Exception("Timeout exceeded")
+
+ return super().write(s)
+
+# Reemplazar stdout
+sys.stdout = LimitedStringIO()
+
+# Función de trace para monitorear ejecución línea por línea
+def trace_calls(frame, event, arg):
+ global _execution_stopped
+ if _execution_stopped:
+ raise Exception("Execution stopped")
+
+ # Verificar timeout en cada línea
+ if time.time() - _start_time > TIMEOUT_SECONDS:
+ _execution_stopped = True
+ raise Exception("Timeout exceeded")
+
+ return trace_calls
+
+# Activar trace
+sys.settrace(trace_calls)
+
+try:
+ # Ejecutar código del usuario
+${code.split('\n').map(line => ' ' + line).join('\n')}
+
+except KeyboardInterrupt:
+ print("\\n\\n Ejecución interrumpida")
+except Exception as e:
+ if "Timeout exceeded" in str(e):
+ print(f"\\n\\n Tiempo de ejecución excedido ({TIMEOUT_SECONDS}s)")
+ elif "Output limit exceeded" in str(e):
+ print(f"\\n\\n Límite de output excedido ({MAX_OUTPUT_LINES} líneas)")
+ elif "Execution stopped" in str(e):
+ print("\\n\\n Ejecución detenida")
+ else:
+ print(f"\\n\\nError: {e}")
+finally:
+ # Limpiar
+ sys.settrace(None)
+
+ # Obtener output
+ output_content = sys.stdout.getvalue() if hasattr(sys.stdout, 'getvalue') else ''
+
+ # Restaurar stdout
+ sys.stdout = _original_stdout
+
+ # Imprimir resultado
+ print(output_content, end='')
+`;
+ return secureWrapper;
+ }
+
+ private requestCompletions(cm: any, cursor: any) {
+ const documentUri = 'file:///workspace/main.py';
+ const position = {
+ line: cursor.line,
+ character: cursor.ch
+ };
+
+ this.pythonLSP.sendRequest({
+ jsonrpc: '2.0',
+ id: 2,
+ method: 'textDocument/completion',
+ params: {
+ textDocument: { uri: documentUri },
+ position: position
+ }
+ });
+ }
+
+ private notifyLSPChanges(cm: any) {
+ const documentUri = 'file:///workspace/main.py';
+ const content = cm.getValue();
+
+ this.pythonLSP.sendRequest({
+ jsonrpc: '2.0',
+ method: 'textDocument/didChange',
+ params: {
+ textDocument: {
+ uri: documentUri,
+ version: Date.now()
+ },
+ contentChanges: [{ text: content }]
+ }
+ });
}
// Vincular instancia de CodeMirror
@@ -117,45 +499,177 @@ export class EditorComponent implements OnInit {
}
}
- async ejecutarCodigo(): Promise {
- if (!this.pyodide) {
- this.output = 'Pyodide no está cargado correctamente.';
- return;
- }
+ // Método privado para configurar stdout de forma consistente
+ private setupStdout(): void {
+ this.pyodide.setStdout({
+ batched: (text: string) => {
+ this.output += text;
+ },
+ });
+ }
- try {
- const inputLines = this.inputs.split('\n');
- let inputIndex = 0;
+ // Método privado para configurar input de forma consistente
+ private setupInput(): void {
+ const inputLines = this.inputs.split('\n').filter(line => line.trim() !== '');
+ let inputIndex = 0;
- const inputFunction = () => {
- if (inputIndex >= inputLines.length) {
- throw new Error('No hay más inputs disponibles');
- }
- return inputLines[inputIndex++];
- };
+ const inputFunction = () => {
+ if (inputIndex >= inputLines.length) {
+ throw new Error('No hay más inputs disponibles');
+ }
+ return inputLines[inputIndex++];
+ };
- this.pyodide.globals.set('input', inputFunction);
+ this.pyodide.globals.set('input', inputFunction);
+ }
- this.output = '';
+ // Método para detener ejecución
+ stopExecution(): void {
+ if (this.executionWorker) {
+ this.executionWorker.terminate();
+ this.executionWorker = null;
+ }
+ if (this.executionTimeoutHandle) {
+ clearTimeout(this.executionTimeoutHandle);
+ this.executionTimeoutHandle = null;
+ }
+ this.isExecuting = false;
+ this.output += '\n\n⏹️ Ejecución detenida por el usuario';
+ this.codeOutput.emit(this.output);
+ }
+ // Método privado para ejecutar código Python con límites estrictos
+ private async executeCodeWithLimits(code: string): Promise {
+ return new Promise((resolve, reject) => {
+ this.isExecuting = true;
+ let output = '';
+
+ // Configurar captura de stdout
this.pyodide.setStdout({
batched: (text: string) => {
- this.output += text;
+ output += text;
},
});
- await this.pyodide.runPythonAsync(this.codigo);
- } catch (error) {
- this.output = `Error: ${String(error)}`;
+ // Configurar input si hay inputs disponibles
+ if (this.inputs.trim()) {
+ this.setupInput();
+ }
+
+ // Crear código seguro
+ const secureCode = this.createSecurePythonCode(code);
+
+ // Timeout de JavaScript como respaldo
+ this.executionTimeoutHandle = setTimeout(() => {
+ this.isExecuting = false;
+ this.executionTimeout.emit();
+ reject(new Error(`⏱️ Timeout de JavaScript: excedió ${this.timeoutSeconds} segundos`));
+ }, this.timeoutSeconds * 1000);
+
+ // Ejecutar código
+ this.pyodide.runPythonAsync(secureCode)
+ .then(() => {
+ clearTimeout(this.executionTimeoutHandle);
+ this.isExecuting = false;
+ resolve(output);
+ })
+ .catch((error: any) => {
+ clearTimeout(this.executionTimeoutHandle);
+ this.isExecuting = false;
+
+ const errorMessage = error.message || error.toString();
+
+ if (errorMessage.includes('Timeout exceeded') || errorMessage.includes('timeout')) {
+ this.executionTimeout.emit();
+ reject(new Error(`⏱️ Tiempo de ejecución excedido (${this.timeoutSeconds}s)`));
+ } else if (errorMessage.includes('Output limit exceeded')) {
+ this.outputLimitExceeded.emit();
+ reject(new Error(`⚠️ Límite de output excedido (${this.maxOutputLines} líneas)`));
+ } else if (errorMessage.includes('Memory limit') || errorMessage.includes('MemoryError')) {
+ this.memoryExceeded.emit();
+ reject(new Error(`💾 Límite de memoria excedido (${this.memoryLimitMB}MB)`));
+ } else {
+ reject(error);
+ }
+ });
+ });
+ }
+
+ async ejecutarCodigo(): Promise {
+ if (!this.pyodide) {
+ this.output = 'Pyodide no está cargado correctamente.';
+ this.codeOutput.emit(this.output);
+ return;
+ }
+
+ if (this.isExecuting) {
+ this.stopExecution();
+ return;
+ }
+
+ try {
+ this.output = '';
+ this.output = await this.executeCodeWithLimits(this.codigo);
+
+ // Emitir eventos
+ this.codeOutput.emit(this.output);
+ this.codeExecuted.emit({code: this.codigo, output: this.output});
+
+ } catch (error: any) {
+ const errorMessage = String(error.message || error);
+ this.output = `Error: ${errorMessage}`;
+ this.codeOutput.emit(this.output);
+ this.codeExecuted.emit({code: this.codigo, output: this.output});
}
}
+ // Nueva función para verificar solución (modo actividad) con límites
+ async verificarSolucion(): Promise {
+ if (!this.correctSolution) {
+ console.warn('No se ha proporcionado una solución correcta');
+ return;
+ }
+
+ if (!this.pyodide) {
+ this.output = 'Pyodide no está cargado correctamente.';
+ this.codeOutput.emit(this.output);
+ return;
+ }
+ try {
+ // Ejecutar el código del usuario con límites
+ this.output = '';
+ const userOutput = await this.executeCodeWithLimits(this.codigo);
+ this.output = userOutput;
+
+ // Ejecutar la solución correcta (también con límites por seguridad)
+ const correctOutput = await this.executeCodeWithLimits(this.correctSolution);
+
+ // Comparar salidas (normalizar espacios en blanco)
+ const normalizeOutput = (str: string) => str.trim().replace(/\s+/g, ' ');
+ const isCorrect = normalizeOutput(userOutput) === normalizeOutput(correctOutput);
+
+ // Emitir eventos
+ this.codeOutput.emit(this.output);
+ this.solutionCheck.emit({correct: isCorrect, output: this.output});
+
+ } catch (error: any) {
+ const errorMessage = String(error.message || error);
+ this.output = `Error: ${errorMessage}`;
+ this.codeOutput.emit(this.output);
+ this.solutionCheck.emit({correct: false, output: this.output});
+ }
+ }
-
- constructor(private http: HttpClient) {}
+ // Función para restablecer el código
+ restablecerCodigo(): void {
+ this.codigo = this.initialCode;
+ this.output = '';
+ this.codeChange.emit(this.codigo);
+ this.codeOutput.emit('');
+ }
- chat(): void{
+ chat(): void {
if (!this.inputChat.trim()) {
this.outputChat = 'Por favor, escribe un mensaje.';
return;