` for larger blocks of code.
  - **• List:** Injects a `-` to start an unordered bulleted list.
  - **“ Quote:** Injects a `>` to begin a blockquote.
- **Synchronized Scrolling:** A calculation hook that ensures when you scroll the editor pane, the preview pane scrolls at the exact relative percentage, keeping your context aligned seamlessly. ⭐

### File Management & Export Tools
- **Upload File (File Picker):** An orange `Upload your file` button in the header that opens your system file browser to select and instantly inject any local `.md` or `.txt` file into the editor.
- **Drag & Drop Upload:** Seamlessly drag a `.md` or `.txt` file from your desktop anywhere onto the editor pane. A visual "Drop Markdown file here" overlay appears, and dropping the file parses and inputs it securely via HTML5 APIs. ⭐
- **MD Download Button:** A blue `MD` button in the header that takes your current raw markdown text, converts it to a standard `Blob`, and automatically downloads it as `readme.md`.
- **Word Document Download:** A dark blue `Word` button that processes your markdown out to HTML, maps it to a document skeleton, and triggers a `.docx` file download using `html-docx-js` (perfect for non-technical sharing).
- **Copy HTML Tool:** Located in the Preview header, this small button utilizes the Clipboard API to copy the fully compiled raw HTML markup of your document to your system clipboard for instant pasting anywhere.
- **Reset Editor Button:** A red `Reset` button in the header allowing you to clear out your workspace and revert to the default template. Includes a strict confirmation prompt to prevent accidental data erasure.

### System & UX Features
- **LocalStorage Auto-Save:** Every keystroke updates the browser's `localStorage` state running quietly in the background. If you accidentally close the tab or browser, your markdown draft is safely restored upon returning.
- **Interactive Cheat Sheet:** Clicking the `?` icon in the navigation opens an animated, dark-mode modal containing a comprehensive Markdown syntax guide (basic formatting, links, images, tables).
- **DOMPurify Security Sandboxing:** A background security feature where all parsed markdown HTML is aggressively filtered before rendering, completely preventing any XSS (Cross-Site Scripting) vulnerabilities if you drop a malicious file.
- **PrismJS Syntax Highlighting:** A background feature that automatically tokenizes and applies beautiful color-coding to any programming languages typed within code blocks.
- **Responsive Layout Changes:** On mobile or small screens below 768px (`App.css`), the split-pane automatically snaps into a stacked vertical format, maintaining usability across mobile devices.

---

## 5. Project Structure & Core Logic

Here is the complete folder and file tree of the project. A quick description is provided for the most critical files to help any developer navigate the codebase instantly:

text markdown-editor/ ├── build/ # Production-ready compiled app (generated via 'npm run build'). ├── nodemodules/ # Downloaded NPM dependencies and external libraries. ├── public/ # Static assets (HTML shell, favicons, manifest). │ └── index.html # The single HTML page where the React app mounts. │ ├── src/ # The primary source code folder containing all React logic. │ ├── App.css # Core stylesheets: flexbox layout, dark/light pane colors, and modal animations. │ ├── App.js # 🌟 The Main Engine: Handles the entire editor logic, state storage, drag-and-drop, and document exporting. │ ├── App.test.js # Basic fallback tests for component rendering. │ ├── HelpModal.js # The React component responsible for the slide-out Markdown Cheat Sheet overlay. │ ├── defaultMarkdown.js # Contains the large string of text that forms the default tutorial document on your first visit. │ ├── index.css # Base reset styles and CSS variables. │ ├── index.js # Application entry point: hooks App.js into public/index.html. │ ├── logo.svg # React logo asset. │ ├── reportWebVitals.js # Built-in performance and web-vitals measuring tool. │ └── setupTests.js # Jest DOM test initialization. │ ├── .gitignore # Tells Git which files/folders (like node_modules) to ignore during commits. ├── package-lock.json # Freezes exact version numbers of your dependencies. ├── package.json # Project configuration listing dependencies (marked, prismjs, react) and npm scripts. └── README.md # Detailed documentation mapping out the project (this file).

---

## 6. State Management & Data Flow

### Global Data Stores
State is managed locally at the top level of the component tree in `App.js`.
- The primary state `content` (`useState`) holds the single source of truth: the raw, unparsed markdown string for the entire application.
- The browser Native `localStorage` serves as a persistent replica, seeded lazily via the `useState` initialization method.
- Component elements rely on multiple `useRef` calls (`textAreaRef`, `previewRef`, `fileInputRef`) to access exact DOM positions without triggering additional React render lifecycles.

### Data Flow Walkthrough (User Writes Markdown)
1. **Trigger:** The user types a character into the `<textarea id="editor">` element.
2. **Action:** The `onChange` event listener triggers the `handleChange` function, which calls `setContent(e.target.value)`.
3. **Re-render:** React recognizes the state mutation and schedules a re-render of `App.js`.
4. **Side Effects:**
   - The `useEffect` hooked to `[content]` runs immediately after rendering.
   - It silently overwrites `localStorage.setItem("markdown-content")` with the new data.
   - It runs `Prism.highlightAll()` to forcibly trigger syntax highlighting re-parsing across any newly created `<pre><code>` nodes.
5. **UI Update:** The preview section resolves the `<div dangerouslySetInnerHTML={getMarkdownText()} />` node. `getMarkdownText()` invokes `marked(content)` to compile HTML, then `DOMPurify.sanitize()` filters it, safely injecting the rendered GUI.

---

## 7. Browser APIs & Technical Highlights

### Native Browser APIs Utilized
- **`localStorage`**: Found in the `App.js` initialization hook. Ensures zero data loss by recording strings silently. Selected over IndexedDB for its simplicity with single-key flat text schemas.
- **`FileReader` APi**: Found inside `readFile()`. Asynchronously parses local system `.md` files that are dropped/picked by reading the binary via `reader.readAsText(file)` directly in memory.
- **`Drag and Drop` Event Listeners**: Found on the editor pane (`onDragOver`, `onDragLeave`, `onDrop`). Maps to the visual hook `isDragging` for UI/UX feedback and captures the payload stream at `e.dataTransfer.files[0]`.
- **`URL.createObjectURL`**: Present in `handleDownload()`. Generates an ephemeral internal browser URL referencing a localized `Blob` map for forcing immediate `.md` saves.
- **`Clipboard API`**: `navigator.clipboard.writeText(rawMarkup)` connects directly to the "Copy HTML" button, letting users siphon source HTML dynamically natively.

### Technical Integrations & Security
- **Strict Configuration with Marked:** The `marked` engine is configured on launch via `marked.setOptions({ breaks: true, gfm: true })` forcing hard line returns and full GitHub Flavored Markdown (tables, checklists) to guarantee user continuity across platforms.
- **High Security DOMPurify Sandboxing:** The editor never implicitly trusts output code. The `marked()` output string is hard-wrapped in `DOMPurify.sanitize()` right before render. This guarantees malicious `<script>` or broken UI anchors are ripped out prior to mapping `dangerouslySetInnerHTML`.
- **Deferred Highlighting lifecycle:** `Prism.highlightAll()` is securely decoupled inside a `useEffect` dependency array, guaranteeing that React has fully painted the DOM before the expensive highlight tokenizer operates.
- **Synchronized Scroll Math:** Utilizes `scrollTop` boundaries matching `scrollHeight - clientHeight` to build a math ratio `scrollPercentage`. This elegantly forces both the text editor viewport and HTML rendered viewports to stay vertically aligned, even when content heights drastically differ.

---

## 8. Local Installation & Setup

# 📝 Markdown Studio

### Prerequisites
- Make sure you have **Node.js** (v14 or higher) installed on your machine.

### Installation Steps

1. **Clone the repository:**
   

bash git clone https://github.com/your-username/markdown-editor.git cd markdown-editor

2. **Install all dependencies:**
   

bash npm install

3. **Start the development server:**
   

bash npm start

   *The application will automatically open in your default browser at `http://localhost:3000`.*

4. **Build for Production (Optional):**