[Admin Panel] Implement Live Video Embed & Markdown Curriculum Content Studio

[ayomideadeniran]

🚀 Feature Overview

Create a rich markdown and multimedia lesson editor supporting live preview, math equations (KaTeX), code execution sandboxes, and video timeline timestamp annotations.

🛠️ Implementation Requirements

* Build split-pane Monaco/Markdown editor with synchronized scroll positioning.
* Implement KaTeX mathematical rendering and Prism code syntax highlighting.
* Support custom shortcodes for interactive quiz embeds and Soroban contract sandbox widgets.
* Add auto-save debouncing with local storage recovery upon accidental tab closure.

🔧 Technical Specifications

* React 19, Next.js App Router, TypeScript, Error Boundary

✅ Acceptance Criteria

* Live preview updates with zero typing lag ($< 16\text{ms}$ latency).
* Custom shortcodes compile to interactive Web3 widgets seamlessly.
* Unsaved edits recover automatically after browser reload.

🎓 Difficulty Level

* Hard - Advanced knowledge of Next.js client-side hydration, state machines, and resilient UI error isolation

⏱️ Timeline

* ETA: 3-5 days