jon.recoil.org
this repo has no description
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CodeMirror 6 Editor</title>
7
8 <style>
9 body {
10 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
11 margin: 0;
12 padding: 0;
13 height: 100vh;
14 display: flex;
15 flex-direction: column;
16 background-color: #1e1e1e;
17 color: #e0e0e0;
18 }
19
20 .header {
21 background-color: #2d2d2d;
22 padding: 15px 20px;
23 display: flex;
24 align-items: center;
25 gap: 20px;
26 box-shadow: 0 2px 5px rgba(0,0,0,0.3);
27 }
28
29 .header h1 {
30 margin: 0;
31 font-size: 24px;
32 font-weight: 600;
33 color: #ffffff;
34 }
35
36 .controls {
37 display: flex;
38 gap: 15px;
39 align-items: center;
40 margin-left: auto;
41 }
42
43 .controls label {
44 font-size: 14px;
45 color: #b0b0b0;
46 }
47
48 .controls select {
49 background-color: #3c3c3c;
50 color: #e0e0e0;
51 border: 1px solid #555;
52 padding: 5px 10px;
53 border-radius: 4px;
54 font-size: 14px;
55 cursor: pointer;
56 }
57
58 .controls select:hover {
59 background-color: #4a4a4a;
60 }
61
62 .editor-container {
63 flex: 1;
64 position: relative;
65 overflow: hidden;
66 display: flex;
67 }
68
69 #editor {
70 flex: 1;
71 overflow: auto;
72 }
73
74 .cm-editor {
75 height: 100%;
76 font-size: 14px;
77 }
78
79 .cm-editor.cm-focused {
80 outline: none;
81 }
82
83 .footer {
84 background-color: #2d2d2d;
85 padding: 10px 20px;
86 display: flex;
87 justify-content: space-between;
88 align-items: center;
89 font-size: 13px;
90 color: #b0b0b0;
91 border-top: 1px solid #444;
92 }
93
94 .footer button {
95 background-color: #0e639c;
96 color: white;
97 border: none;
98 padding: 6px 16px;
99 border-radius: 4px;
100 font-size: 13px;
101 cursor: pointer;
102 transition: background-color 0.2s;
103 }
104
105 .footer button:hover {
106 background-color: #1177bb;
107 }
108
109 .footer button:active {
110 background-color: #0d5a8f;
111 }
112
113 #status {
114 color: #4ec9b0;
115 font-style: italic;
116 }
117 </style>
118</head>
119<body>
120 <div class="header">
121 <h1>CodeMirror 6 Editor</h1>
122 <div class="controls">
123 <label for="language">Language:</label>
124 <select id="language">
125 <option value="javascript">JavaScript</option>
126 <option value="html">HTML</option>
127 <option value="css">CSS</option>
128 <option value="python">Python</option>
129 <option value="xml">XML</option>
130 <option value="json">JSON</option>
131 </select>
132
133 <label for="theme">Theme:</label>
134 <select id="theme">
135 <option value="dark">Dark</option>
136 <option value="light">Light</option>
137 </select>
138 </div>
139 </div>
140
141 <div class="editor-container">
142 <div id="editor"></div>
143 </div>
144
145 <div class="footer">
146 <div>
147 <span id="cursor-pos">Line 1, Column 1</span> |
148 <span id="status">Ready</span>
149 </div>
150 <button id="clear-btn">Clear Editor</button>
151 </div>
152
153 <script type="module">
154 // Import from bundled CodeMirror
155 import {
156 EditorView,
157 EditorState,
158 Compartment,
159 basicSetup,
160 keymap,
161 indentWithTab,
162 javascript,
163 html,
164 css,
165 python,
166 xml,
167 json,
168 oneDark
169 } from './dist/codemirror-bundle.js';
170
171 // Language configurations
172 const languages = {
173 javascript: javascript(),
174 html: html(),
175 css: css(),
176 python: python(),
177 xml: xml(),
178 json: json()
179 };
180
181 // Initial content
182 const initialContent = `// Welcome to CodeMirror 6!
183// This is a modern, extensible code editor
184
185function hello() {
186 console.log("Hello, World!");
187 return "Edit this code or paste your own!";
188}
189
190// Features:
191// - Syntax highlighting
192// - Auto-indentation
193// - Bracket matching
194// - Multiple language support
195// - Modern architecture
196
197const result = hello();
198console.log(result);`;
199
200 // Sample content for different languages
201 const sampleContent = {
202 javascript: initialContent,
203 html: `<!DOCTYPE html>
204<html lang="en">
205<head>
206 <meta charset="UTF-8">
207 <meta name="viewport" content="width=device-width, initial-scale=1.0">
208 <title>My Page</title>
209</head>
210<body>
211 <h1>Hello, World!</h1>
212 <p>Welcome to CodeMirror 6!</p>
213</body>
214</html>`,
215 css: `/* Modern CSS with CodeMirror 6 */
216body {
217 font-family: Arial, sans-serif;
218 background-color: #f0f0f0;
219 margin: 0;
220 padding: 20px;
221}
222
223.container {
224 max-width: 1200px;
225 margin: 0 auto;
226}
227
228h1 {
229 color: #333;
230 font-size: 2em;
231}`,
232 python: `# Python code with CodeMirror 6
233def hello():
234 """A simple greeting function"""
235 print("Hello, World!")
236 return "Welcome to CodeMirror 6!"
237
238def factorial(n):
239 """Calculate factorial recursively"""
240 if n <= 1:
241 return 1
242 return n * factorial(n - 1)
243
244# Test the functions
245result = hello()
246print(f"Result: {result}")
247print(f"5! = {factorial(5)}")`,
248 xml: `<?xml version="1.0" encoding="UTF-8"?>
249<root>
250 <message>Hello, World!</message>
251 <info>
252 <editor>CodeMirror 6</editor>
253 <version>Latest</version>
254 </info>
255</root>`,
256 json: `{
257 "editor": "CodeMirror 6",
258 "version": "Latest",
259 "features": [
260 "Syntax highlighting",
261 "Auto-indentation",
262 "Modern architecture",
263 "Extensible"
264 ],
265 "languages": {
266 "javascript": true,
267 "python": true,
268 "html": true,
269 "css": true
270 }
271}`
272 };
273
274 // Create compartments for dynamic configuration
275 const languageConf = new Compartment();
276 const themeConf = new Compartment();
277
278 // Current settings
279 let currentLanguage = 'javascript';
280
281 // Create custom keymap
282 const customKeymap = keymap.of([
283 {
284 key: "Mod-s",
285 run: () => {
286 document.getElementById('status').textContent = 'Changes saved (in memory)';
287 setTimeout(() => {
288 document.getElementById('status').textContent = 'Ready';
289 }, 2000);
290 return true;
291 }
292 },
293 indentWithTab
294 ]);
295
296 // Initialize editor
297 const state = EditorState.create({
298 doc: initialContent,
299 extensions: [
300 basicSetup,
301 languageConf.of(languages[currentLanguage]),
302 themeConf.of(oneDark),
303 customKeymap,
304 EditorView.lineWrapping,
305 EditorView.updateListener.of((update) => {
306 if (update.selectionSet) {
307 const pos = update.state.selection.main.head;
308 const line = update.state.doc.lineAt(pos);
309 const col = pos - line.from + 1;
310 document.getElementById('cursor-pos').textContent =
311 `Line ${line.number}, Column ${col}`;
312 }
313 })
314 ]
315 });
316
317 const view = new EditorView({
318 state,
319 parent: document.getElementById('editor')
320 });
321
322 // Language selector
323 document.getElementById('language').addEventListener('change', function() {
324 currentLanguage = this.value;
325
326 // Update language
327 view.dispatch({
328 effects: languageConf.reconfigure(languages[currentLanguage])
329 });
330
331 // Optionally update content
332 if (view.state.doc.toString().trim() === '' ||
333 confirm('Replace current content with sample code?')) {
334 view.dispatch({
335 changes: {
336 from: 0,
337 to: view.state.doc.length,
338 insert: sampleContent[currentLanguage]
339 }
340 });
341 }
342 });
343
344 // Theme selector
345 document.getElementById('theme').addEventListener('change', function() {
346 const theme = this.value === 'dark' ? oneDark : [];
347 view.dispatch({
348 effects: themeConf.reconfigure(theme)
349 });
350 });
351
352 // Clear button
353 document.getElementById('clear-btn').addEventListener('click', function() {
354 if (confirm('Are you sure you want to clear the editor?')) {
355 view.dispatch({
356 changes: {from: 0, to: view.state.doc.length, insert: ''}
357 });
358 view.focus();
359 }
360 });
361
362 // Auto-focus
363 view.focus();
364 </script>
365</body>
366</html>