A feature-rich online markdown editor with dual editing modes and advanced functionality.

1. Split Screen Mode: Live preview with synchronized scrolling
2. WYSIWYG Hybrid Mode: Rich text editing with markdown output

• RTL/LTR Support: Switch between right-to-left and left-to-right text direction
• Auto-persistence: Content automatically saved to localStorage
• URL Sharing: Share documents via compressed URLs (no database required)
• Synchronized Scrolling: Both panes scroll together in split mode
• Mode Switching: Seamlessly switch between editing modes while preserving content

├── backend/
│   └── index.ts           # Hono server for static file serving
├── frontend/
│   ├── index.html         # Main application template
│   ├── index.tsx          # React application entry point
│   ├── components/
│   │   ├── App.tsx        # Main application component
│   │   ├── SplitEditor.tsx # Split screen editor
│   │   ├── WysiwygEditor.tsx # WYSIWYG editor
│   │   └── Toolbar.tsx    # Editor toolbar
│   └── style.css          # Application styles
├── shared/
│   └── utils.ts           # Shared utilities for compression/decompression
└── README.md

• Frontend: React 18.2.0 with TypeScript
• Backend: Hono for static file serving
• Markdown: marked for parsing, DOMPurify for sanitization
• WYSIWYG: Quill.js for rich text editing
• Styling: TailwindCSS
• Compression: pako for gzip compression
• Storage: localStorage for persistence

1. Start writing markdown in either mode
2. Switch between split-screen and WYSIWYG modes using the toolbar
3. Toggle RTL/LTR text direction as needed
4. Share your work using the share button (generates compressed URL)
5. Content is automatically saved and restored on page reload