Add auto-save functionality to LearningMapEditor

[Copilot]

Overview

Implements automatic saving for the LearningMapEditor component. Changes are now automatically persisted after 1 second of inactivity, eliminating the need to manually press Ctrl+S or click the save button.

Problem

Previously, users had to remember to manually save their work using:

• Ctrl+S keyboard shortcut
• Save button in the toolbar menu
• Preview mode toggle (which also triggers a save)

This led to potential data loss if users forgot to save before closing or refreshing the page.

Solution

Added a useEffect hook that monitors the saved state and automatically triggers handleSave() after 1 second of inactivity. The implementation uses debouncing to prevent excessive saves during rapid editing.

// Auto-save when changes are made
useEffect(() => {
  if (!saved) {
    const timeoutId = setTimeout(() => {
      handleSave();
    }, 1000); // Auto-save after 1 second of inactivity

    return () => clearTimeout(timeoutId);
  }
}, [saved, handleSave]);

How It Works

1. Change Detection: Any modification (adding/moving/editing nodes, connecting edges, etc.) sets saved = false
2. Debounce Timer: The useEffect detects the unsaved state and starts a 1-second countdown
3. Auto-Save: If no new changes occur within 1 second, handleSave() is called automatically
4. Smart Debouncing: If new changes occur before the timeout, the timer resets, preventing excessive saves
5. Data Persistence: handleSave() persists data via the onChange callback or CustomEvent dispatch

Benefits

• 🎯 Automatic persistence: Changes saved without user intervention
• 🛡️ Data safety: Significantly reduces risk of data loss
• ⚡ Smart debouncing: Prevents performance issues during rapid editing
• ✅ Backward compatible: All existing save methods continue to work
• 🎨 Non-intrusive: Happens seamlessly in the background

Preserved Functionality

All existing save mechanisms remain fully functional:

• Ctrl+S keyboard shortcut works instantly (bypasses auto-save timer)
• Save button in toolbar works as before
• Save indicator still shows asterisk (*) for unsaved changes
• Preview mode toggle still triggers immediate save
• onChange callback receives correct data
• CustomEvent dispatch for web components works as expected

Example Usage

Web Platform

The onChange callback is now triggered automatically:

const handleChange: LearningMapEditorProps["onChange"] = (state) => {
  localStorage.setItem("learningmap-editor-state", JSON.stringify(state));
}

<LearningMapEditor onChange={handleChange} roadmapData={roadmapData} />

Web Component

The change event is dispatched automatically:

<hyperbook-learningmap-editor id="editor"></hyperbook-learningmap-editor>

<script>
  editor.addEventListener('change', (event) => {
    console.log('Auto-saved:', event.detail);
  });
</script>

Technical Details

• Lines changed: 11 lines added to 1 file
• Debounce delay: 1000ms (1 second)
• Dependencies: [saved, handleSave]
• Cleanup: Timeout properly cleared on unmount or new changes
• Type safety: All TypeScript types maintained

Testing

• ✅ TypeScript compilation successful
• ✅ Build successful (all packages)
• ✅ Linting passes
• ✅ No breaking changes

Fixes the user request for automatic saving functionality while maintaining full backward compatibility with existing features.

Original prompt

I want to auto-save the roadmap data in my LearningMapEditor component. Currently you have to press Ctrl+s or the save button. This should happen behind the scenes.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
learningmap	Ready	Preview	Comment	Oct 12, 2025 2:26pm

[mikebarkmin]

Remove the save indicator and the save button. Everything should work seamlesly