Add auto-save to localStorage for Playground editor (#16782)

Mossaka · claude · web-flow · commit 74b23f0d07c5 · 2026-02-19T00:04:38.000-08:00
Save editor content to localStorage on every change so users don't
lose their work when closing the tab. On page load, restore saved
content if available, falling back to the Hello World template.

Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/docs/public/editor/editor.js b/docs/public/editor/editor.js
@@ -129,6 +129,7 @@ const panels = $('panels');
 // ---------------------------------------------------------------
 // State
 // ---------------------------------------------------------------
+const STORAGE_KEY = 'gh-aw-playground-content';
 let compiler = null;
 let isReady = false;
 let isCompiling = false;
@@ -162,8 +163,11 @@ function applyCmTheme() {
 // ---------------------------------------------------------------
 // CodeMirror: Input Editor (Markdown with YAML frontmatter)
 // ---------------------------------------------------------------
+const savedContent = localStorage.getItem(STORAGE_KEY);
+const initialContent = savedContent || DEFAULT_CONTENT;
+
 const editorView = new EditorView({
-  doc: DEFAULT_CONTENT,
+  doc: initialContent,
   extensions: [
     basicSetup,
     markdown(),
@@ -176,6 +180,8 @@ const editorView = new EditorView({
     }]),
     EditorView.updateListener.of(update => {
       if (update.docChanged) {
+        try { localStorage.setItem(STORAGE_KEY, update.state.doc.toString()); }
+        catch (_) { /* localStorage full or unavailable */ }
         if (isReady) {
           scheduleCompile();
         } else {
@@ -187,6 +193,11 @@ const editorView = new EditorView({
   parent: editorMount,
 });
 
+// If restoring saved content, clear the dropdown since it may not match any sample
+if (savedContent) {
+  sampleSelect.value = '';
+}
+
 // ---------------------------------------------------------------
 // CodeMirror: Output View (YAML, read-only)
 // ---------------------------------------------------------------
