add line numbers (press F1 to toggle visibility)
Hunter
Wednesday, August 6th, 2025 at 2:47 PM
7 <link rel="icon" href="resources/rollerskate.png">
8 <link rel="manifest" href="manifest.json">
9 <script type="module">
- import {EditorView, keymap, placeholder} from "https://esm.sh/@codemirror/view@6"
- import {EditorState} from "https://esm.sh/@codemirror/state@6"
10 + import {EditorView, keymap, placeholder, lineNumbers} from "https://esm.sh/@codemirror/view@6"
11 + import {EditorState, Compartment} from "https://esm.sh/@codemirror/state@6"
12 import {defaultKeymap, indentWithTab, undo, redo, undoDepth, redoDepth, history, historyKeymap} from "https://esm.sh/@codemirror/commands@6"
13 import {closeBrackets, closeBracketsKeymap} from "https://esm.sh/@codemirror/autocomplete@6"
14 import {html} from "https://esm.sh/@codemirror/lang-html@6"
16 import {indentUnit} from "https://esm.sh/@codemirror/language@6"
17 import {search, searchKeymap, closeSearchPanel, openSearchPanel} from "https://esm.sh/@codemirror/search@6"
18
- window.CodeMirror = {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel};
19 + window.CodeMirror = {EditorView, EditorState, Compartment, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel, lineNumbers};
20 </script>
21 <style>
22 :root {
180 const preview = document.getElementById('preview');
181 const storageKey = 'html-lab-content';
182 let isFullscreen = false;
183 + let showLineNumbers = false;
184 + let lineNumbersCompartment;
185
186 function toggleFullscreen() {
187 const previewPane = document.querySelector('.preview-pane');
363 }
364 }
365
366 + function loadEditorSettings() {
367 + try {
368 + showLineNumbers = localStorage.getItem('editor-line-numbers') === 'true';
369 + } catch (e) {
370 + console.warn('Could not load editor settings from localStorage:', e);
371 + showLineNumbers = false;
372 + }
373 + }
374 +
375 + function saveEditorSetting(key, value) {
376 + try {
377 + localStorage.setItem(key, value.toString());
378 + } catch (e) {
379 + console.warn('Could not save editor setting to localStorage:', e);
380 + }
381 + }
382 +
383 + function toggleLineNumbers() {
384 + const {lineNumbers} = window.CodeMirror;
385 + showLineNumbers = !showLineNumbers;
386 + saveEditorSetting('editor-line-numbers', showLineNumbers);
387 +
388 + editorView.dispatch({
389 + effects: lineNumbersCompartment.reconfigure(showLineNumbers ? lineNumbers() : [])
390 + });
391 + }
392 +
393 +
394 // File operations
395 window.saveFile = function() {
396 const blob = new Blob([editorView.state.doc.toString()], { type: 'text/html' });
430 return;
431 }
432
- const {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel} = window.CodeMirror;
433 + const {EditorView, EditorState, Compartment, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel, lineNumbers} = window.CodeMirror;
434
- // Load saved content
435 + // Load saved content and editor settings
436 const savedContent = loadFromStorage();
437 + loadEditorSettings();
438 +
439 + // Create compartments for dynamic extensions
440 + lineNumbersCompartment = new Compartment();
441
442 // Create CodeMirror editor
443 editorView = new EditorView({
453 {key: "Mod-Shift-z", run: redo},
454 {key: "Mod-o", run: () => { window.loadFile(); return true; }},
455 {key: "Mod-s", run: () => { window.saveFile(); return true; }},
456 + {key: "F1", run: () => { toggleLineNumbers(); return true; }},
457 indentWithTab,
458 ...searchKeymap.filter(binding => binding.key !== "Mod-f"),
459 ...defaultKeymap
475 'autocorrect': 'off',
476 'autocapitalize': 'off',
477 'spellcheck': 'false'
- })
478 + }),
479 + lineNumbersCompartment.of(showLineNumbers ? lineNumbers() : [])
480 ]
481 }),
482 parent: document.getElementById('editor')