[WIP] Add real-time autosave for markdown editor

[Copilot]

Implementation Plan: Real-Time Autosave for Markdown Editor

• Create autosave utility functions with debouncing (2 seconds)
• Add error handling for localStorage quota and availability issues
• Update MarkdownEditor component to use autosave instead of immediate save
• Add autosave status indicator in the UI
• Ensure manual save button remains as fallback
• Add console logging for debugging autosave operations
• Test autosave functionality manually
• Verify content persists on page refresh
• Run linting and build to ensure no issues

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[SCRUM-20] Add Real-Time Autosave for Markdown Editor</issue_title>
<issue_description>## 🤖 Instructions for @copilot

Development Branch: jira/scrum-20

IMPORTANT: This issue has full project context available. Please:

1. Work on the linked branch: jira/scrum-20 (see Development section →)
2. Read the project documentation in the docs/ directory:
   • docs/architecture/overview.md - System architecture and tech stack
   • docs/api-standards/ - API naming conventions and CRUD specifications
   • docs/laravel/ - Laravel patterns, database access, error handling, testing
   • docs/react/ - React component structure, state management, API consumption, testing
3. Follow the established patterns defined in the documentation
4. Implement the requirements described below
5. Create a PR from jira/scrum-20 when ready

---

📋 Requirements

h2. User Story

As a user who is writing or editing markdown documents,
I want my changes to be autosaved in real-time,
so that I don’t lose my work if I accidentally refresh or close the browser.

---

h2. Acceptance Criteria

The editor must automatically save the markdown content to local storage every 2 seconds of inactivity.

Autosave must not cause noticeable UI lag.

If the user closes the browser or refreshes the page, the content must still be available.

Autosave must not overwrite content if local storage is full or unavailable; show a warning instead.

Manual Save button should still be available as a fallback.

---

h2. Non-Functional Requirements

• Autosave operations must be debounced to avoid performance issues.
• Local storage operations must be resilient against storage quota errors.
• Error handling must log failures to the console for debugging.
• Code should be written in TypeScript with proper typing.

✅ Acceptance Criteria

• Implementation follows patterns defined in project documentation
• Code adheres to naming conventions and API standards from docs/api-standards/
• Laravel code follows patterns from docs/laravel/core-patterns.md
• React components follow structure from docs/react/component-structure.md
• Tests are added following docs/laravel/unit-testing-standards.md or docs/react/testing-library-patterns.md
• Error handling follows docs/laravel/error-handling.md
• All changes are made on branch jira/scrum-20

🔗 Jira Reference

Jira Issue: SCRUM-20
Priority: Medium
Type: Story

📚 Project Context

This repository follows strict coding standards. All patterns, conventions, and architectural decisions are documented in the docs/ directory of the jira/scrum-20 branch.

Before implementing, please read:

• Architecture overview for system understanding
• API standards for endpoint and naming conventions
• Laravel patterns for backend implementation
• React patterns for frontend implementation
• Testing standards for test coverage

---

🌿 Development

Branch: jira/scrum-20

This issue is linked to the jira/scrum-20 branch. All implementation work should be done on this branch, and a PR should be created from this branch to the main branch when ready.

---

This issue was automatically created from Jira with full project context.
</issue_description>

Comments on the Issue (you are @copilot in this section)

@dineshh-m ## 🤖 @copilot - Implementation Instructions

Hi @copilot! This issue is linked to the development branch jira/scrum-20 (see Development section above).

Please work on this issue following these steps:

1️⃣ Work on the Linked Branch

The branch jira/scrum-20 has been created and linked to this issue.

git checkout jira/scrum-20

2️⃣ Read Project Documentation

Before implementing, please review the project standards in the docs/ directory:
- Fetch the jira issue description/details for the issue 12 to get more context.

Architecture & Standards:

• docs/architecture/overview.md - System architecture, tech stack, patterns
• docs/api-standards/naming-conventions.md - Naming conventions for APIs, URLs, fields
• docs/api-standards/crud-api-spec.md - CRUD API specification with examples

Laravel Backend:

• docs/laravel/core-patterns.md - MVC patterns, controllers, models
• docs/laravel/database-access-layer.md - Eloquent ORM, queries, migrations
• docs/laravel/error-handling.md - Error handling patterns
• docs/laravel/unit-testing-standards.md - PHPUnit testing patterns

React Frontend:

• docs/react/component-structure.md - Component organization and patterns
• docs/react/state-management.md - React Query, Context API, state patterns
• docs/react/api-consumption.md - Service layer, Axios configuration
• `docs/react/testing-library-patterns...

• Fixes dineshh-m/downtown#12

---

💡 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.