code editor: ⌘+F to search
Hunter
Friday, July 25th, 2025 at 4:39 PM
14 import {html} from "https://esm.sh/@codemirror/lang-html@6"
15 import {githubDark} from "https://esm.sh/@fsegurai/codemirror-theme-github-dark"
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};
19 + window.CodeMirror = {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel};
20 </script>
21 <style>
22 :root {
312 return;
313 }
314
- const {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap} = window.CodeMirror;
315 + const {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap, closeBrackets, closeBracketsKeymap, search, searchKeymap, closeSearchPanel, openSearchPanel} = window.CodeMirror;
316
317 // Load saved content
318 const savedContent = loadFromStorage();
323 doc: savedContent,
324 extensions: [
325 history(),
326 + search(),
327 closeBrackets(),
328 keymap.of([
329 {key: "Mod-z", run: undo},
332 {key: "Mod-o", run: () => { window.loadFile(); return true; }},
333 {key: "Mod-s", run: () => { window.saveFile(); return true; }},
334 indentWithTab,
335 + ...searchKeymap.filter(binding => binding.key !== "Mod-f"),
336 ...defaultKeymap
337 ]),
338 html(),
363
364 // Focus the editor
365 editorView.focus();
366 +
367 + // Global keydown handler for Cmd+F toggle
368 + document.addEventListener('keydown', function(e) {
369 + if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
370 + e.preventDefault();
371 + closeSearchPanel(editorView) || openSearchPanel(editorView);
372 + }
373 + });
374 }
375
376 // Initialize when page loads
-const CACHE_NAME = 'web-workshop-v8';
1 +const CACHE_NAME = 'web-workshop-v9';
2 const urlsToCache = [
3 '/web_workshop/',
4 '/web_workshop/index.html',
10 'https://esm.sh/@codemirror/lang-html@6',
11 'https://esm.sh/@fsegurai/codemirror-theme-github-dark',
12 'https://esm.sh/@codemirror/language@6',
- 'https://esm.sh/@codemirror/autocomplete@6'
13 + 'https://esm.sh/@codemirror/autocomplete@6',
14 + 'https://esm.sh/@codemirror/search@6'
15 ];
16
17 // Function to discover and cache all files in directories