Skip to content

Commit 38ded7b

Browse files
Vic-NasVic-Nas
committed
Fixing editor
1 parent fda9d8d commit 38ded7b

3 files changed

Lines changed: 65 additions & 71 deletions

File tree

‎index.html‎

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<title>Python Solutions - LeetCode, Kattis, AOC & VicUtils</title>
77
<link rel="icon" href="VN.ico">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
911
<link rel="stylesheet" href="styles.css">
1012
</head>
1113
<body>
@@ -34,46 +36,14 @@ <h1 id="folder-title"></h1>
3436
<div id="problem-view" style="display: none;"></div>
3537
</main>
3638

37-
<!-- NOUVEAU: Modal pour l'éditeur interactif -->
38-
<div id="code-editor-modal" class="modal">
39-
<div class="modal-content">
40-
<div class="modal-header">
41-
<h2 id="modal-title">Interactive Python Editor</h2>
42-
<div class="modal-actions">
43-
<button id="run-code-btn" class="action-btn run-btn">▶️ Run Code</button>
44-
<button id="reset-code-btn" class="action-btn">↺ Reset</button>
45-
<button id="download-code-btn" class="action-btn">⬇️ Download</button>
46-
<button id="close-modal-btn" class="action-btn close-btn">✕ Close</button>
47-
</div>
48-
</div>
49-
<div class="modal-body">
50-
<div class="editor-container">
51-
<div class="editor-section">
52-
<div class="section-header">Python Code</div>
53-
<textarea id="code-editor" spellcheck="false"></textarea>
54-
</div>
55-
<div class="editor-section">
56-
<div class="section-header">
57-
<span>Console Output</span>
58-
<button id="clear-output-btn" class="clear-btn">Clear</button>
59-
</div>
60-
<div id="code-output"></div>
61-
</div>
62-
</div>
63-
<div class="test-input-section">
64-
<div class="section-header">Test Input (optional - paste test data here)</div>
65-
<textarea id="test-input" placeholder="Paste your test input here..."></textarea>
66-
</div>
67-
</div>
68-
<div id="pyodide-loading" class="pyodide-status">
69-
<div class="loader-small"></div>
70-
<span>Loading Python environment...</span>
71-
</div>
72-
</div>
39+
<div id="pyodide-loading" class="pyodide-status" style="position: fixed; bottom: 20px; right: 20px; background: #2d2d30; padding: 1rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
40+
<div class="loader-small"></div>
41+
<span>Loading Python environment...</span>
7342
</div>
7443

75-
<!-- MODIFIÉ: Ajout de Pyodide -->
7644
<script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
45+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
46+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script>
7747
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
7848
<script src="script.js"></script>
7949
</body>

‎script.js‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ const state = {
99
currentItem: null,
1010
pyodide: null,
1111
pyodideLoading: false,
12-
originalCode: ''
12+
originalCode: '',
13+
codeMirrorEditor: null
1314
};
1415

1516
// Pyodide Management
@@ -47,7 +48,7 @@ async function initPyodide() {
4748
}
4849
}
4950

50-
// Open Interactive Editor - Replace code section instead of modal
51+
// Open Interactive Editor - Replace code section
5152
function openEditor(pythonCode, problemTitle) {
5253
state.originalCode = pythonCode;
5354

@@ -74,10 +75,10 @@ function openEditor(pythonCode, problemTitle) {
7475
<button id="close-editor-btn-inline" class="inline-action-btn">✕ Close</button>
7576
</div>
7677
</div>
77-
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; height: 500px;">
78+
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; height: 700px;">
7879
<div style="display: flex; flex-direction: column; border: 1px solid #3e3e42; border-radius: 4px; overflow: hidden;">
79-
<div style="padding: 0.5rem; background: #2d2d30; border-bottom: 1px solid #3e3e42; font-size: 0.85rem; color: #fff;">Code</div>
80-
<textarea id="code-editor-inline" spellcheck="false" style="flex: 1; background: #1e1e1e; color: #d4d4d4; border: none; padding: 1rem; font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; resize: none; outline: none;">${escapeHtml(pythonCode)}</textarea>
80+
<div style="padding: 0.5rem; background: #2d2d30; border-bottom: 1px solid #3e3e42; font-size: 0.85rem; color: #fff;">Code Editor</div>
81+
<div id="codemirror-container" style="flex: 1; overflow: hidden;"></div>
8182
</div>
8283
<div style="display: flex; flex-direction: column; border: 1px solid #3e3e42; border-radius: 4px; overflow: hidden;">
8384
<div style="padding: 0.5rem; background: #2d2d30; border-bottom: 1px solid #3e3e42; font-size: 0.85rem; color: #fff; display: flex; justify-content: space-between;">
@@ -91,10 +92,29 @@ function openEditor(pythonCode, problemTitle) {
9192
<div style="padding: 0.5rem; background: #2d2d30; border-bottom: 1px solid #3e3e42; font-size: 0.85rem; color: #fff;">
9293
Test Input <span style="color: #888; font-weight: normal; margin-left: 0.5rem;">(available as input.txt or via input())</span>
9394
</div>
94-
<textarea id="test-input-inline" placeholder="Paste test data here..." style="width: 100%; height: 100px; background: #1e1e1e; color: #d4d4d4; border: none; padding: 1rem; font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; resize: none; outline: none;"></textarea>
95+
<textarea id="test-input-inline" placeholder="Paste test data here..." style="width: 100%; height: 120px; background: #1e1e1e; color: #d4d4d4; border: none; padding: 1rem; font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; resize: none; outline: none;"></textarea>
9596
</div>
9697
`;
9798

99+
// Initialize CodeMirror
100+
const container = document.getElementById('codemirror-container');
101+
if (container && typeof CodeMirror !== 'undefined') {
102+
state.codeMirrorEditor = CodeMirror(container, {
103+
value: pythonCode,
104+
mode: 'python',
105+
theme: 'monokai',
106+
lineNumbers: true,
107+
indentUnit: 4,
108+
tabSize: 4,
109+
indentWithTabs: false,
110+
lineWrapping: true,
111+
autofocus: true
112+
});
113+
114+
// Set height
115+
state.codeMirrorEditor.setSize('100%', '100%');
116+
}
117+
98118
// Attach event listeners
99119
document.getElementById('run-code-btn-inline')?.addEventListener('click', runCodeInline);
100120
document.getElementById('reset-code-btn-inline')?.addEventListener('click', resetCodeInline);
@@ -111,13 +131,19 @@ function openEditor(pythonCode, problemTitle) {
111131

112132
// Close inline editor and restore original view
113133
function closeEditorInline() {
134+
// Cleanup CodeMirror
135+
if (state.codeMirrorEditor) {
136+
state.codeMirrorEditor.toTextArea();
137+
state.codeMirrorEditor = null;
138+
}
139+
114140
// Reload the problem view to restore everything
115141
renderProblem();
116142
}
117143

118144
// Run Code (inline version)
119145
async function runCodeInline() {
120-
const code = document.getElementById('code-editor-inline').value;
146+
const code = state.codeMirrorEditor ? state.codeMirrorEditor.getValue() : '';
121147
const testInput = document.getElementById('test-input-inline').value;
122148
const output = document.getElementById('code-output-inline');
123149
const runBtn = document.getElementById('run-code-btn-inline');
@@ -210,26 +236,13 @@ __builtins__.input = mock_input
210236

211237
// Reset Code (inline version)
212238
function resetCodeInline() {
213-
document.getElementById('code-editor-inline').value = state.originalCode;
239+
if (state.codeMirrorEditor) {
240+
state.codeMirrorEditor.setValue(state.originalCode);
241+
}
214242
document.getElementById('code-output-inline').innerHTML = '';
215243
document.getElementById('test-input-inline').value = '';
216244
}
217245

218-
// Download Code
219-
function downloadCode() {
220-
const editor = document.getElementById('code-editor-inline');
221-
if (!editor) return;
222-
223-
const code = editor.value;
224-
const blob = new Blob([code], { type: 'text/plain' });
225-
const url = URL.createObjectURL(blob);
226-
const a = document.createElement('a');
227-
a.href = url;
228-
a.download = 'solution.py';
229-
a.click();
230-
URL.revokeObjectURL(url);
231-
}
232-
233246
// Utility
234247
function getRepoPath() {
235248
const parts = window.location.pathname.split('/');
@@ -717,17 +730,6 @@ window.addEventListener('hashchange', () => {
717730
window.runCodeInline = runCodeInline;
718731
window.closeEditorInline = closeEditorInline;
719732
window.resetCodeInline = resetCodeInline;
720-
window.downloadCode = downloadCode;
721-
722-
// Setup modal event listeners (legacy - not used anymore but kept for safety)
723-
const modal = document.getElementById('code-editor-modal');
724-
if (modal) {
725-
modal.addEventListener('click', (e) => {
726-
if (e.target.id === 'code-editor-modal') {
727-
modal.style.display = 'none';
728-
}
729-
});
730-
}
731733

732734
await loadPlatforms();
733735

‎styles.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,28 @@ body {
389389
}
390390

391391

392+
/* ========================================
393+
CODEMIRROR OVERRIDES
394+
======================================== */
395+
396+
.CodeMirror {
397+
height: 100% !important;
398+
font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
399+
font-size: 14px !important;
400+
line-height: 1.6 !important;
401+
}
402+
403+
.CodeMirror-gutters {
404+
background: #272822 !important;
405+
border-right: 1px solid #3e3e42 !important;
406+
}
407+
408+
.CodeMirror-linenumber {
409+
color: #75715e !important;
410+
}
411+
412+
413+
392414
/* ========================================
393415
INLINE EDITOR STYLES
394416
======================================== */

0 commit comments

Comments
 (0)