add undo/redo shortcuts via codemirror extension

Hunter
Saturday, July 12th, 2025 at 3:08 PM


index.html+7-3


sw.js+1-1
index.html
  9  	<script type="module">
 10  		import {EditorView, keymap, placeholder} from "https://esm.sh/@codemirror/view@6"
 11  		import {EditorState} from "https://esm.sh/@codemirror/state@6"
    -		import {defaultKeymap, indentWithTab} from "https://esm.sh/@codemirror/commands@6"
 12 +		import {defaultKeymap, indentWithTab, undo, redo, undoDepth, redoDepth, history, historyKeymap} from "https://esm.sh/@codemirror/commands@6"
 13  		import {html} from "https://esm.sh/@codemirror/lang-html@6"
 14  		import {githubDark} from "https://esm.sh/@fsegurai/codemirror-theme-github-dark"
 15  		import {indentUnit} from "https://esm.sh/@codemirror/language@6"
 16  		
    -		window.CodeMirror = {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder};
 17 +		window.CodeMirror = {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap};
 18  	</script>
 19  	<style>
 20  		:root {

249  				return;
250  			}
251  
    -			const {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder} = window.CodeMirror;
252 +			const {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder, undo, redo, undoDepth, redoDepth, history, historyKeymap} = window.CodeMirror;
253  			
254  			// Load saved content
255  			const savedContent = loadFromStorage();

259  				state: EditorState.create({
260  					doc: savedContent,
261  					extensions: [
262 +						history(),
263  						keymap.of([
264 +							{key: "Mod-z", run: undo},
265 +							{key: "Mod-y", run: redo},
266 +							{key: "Mod-Shift-z", run: redo},
267  							{key: "Mod-o", run: () => { window.loadFile(); return true; }},
268  							{key: "Mod-s", run: () => { window.saveFile(); return true; }},
269  							indentWithTab,
sw.js
  -const CACHE_NAME = 'web-workshop-v5';
1 +const CACHE_NAME = 'web-workshop-v6';
2  const urlsToCache = [
3    '/web_workshop/',
4    '/web_workshop/index.html',