mdit - Markdown Editor

# Welcome to mdit by Ormind :rocket:

**mdit** is a powerful, real-time markdown editor designed for the modern web. Edit, collaborate, and share your documents with ease.

---

## Quick Start Guide

Get started in seconds:
1. **Type** your markdown in the left panel
2. **See** the live preview on the right
3. **Save** with Ctrl+S or the Save button
4. **Share** your document link with others

---

## Text Formatting

### Basic Styles

You can use **bold text**, *italic text*, ***bold and italic***, ~~strikethrough~~, and `inline code`.

Mix them together: **bold with *italic* inside** and *italic with **bold** inside*.

### Headings

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

---

## Links & Auto-linking

[Visit Ormind](https://ormind.ai) - A powerful AI agent platform

URLs are auto-linked: https://mdit.ormind.ai

Email addresses too: hello@ormind.ai

---

## Lists

### Unordered Lists

- First item
- Second item
  - Nested item 1
  - Nested item 2
    - Deeply nested item
- Third item

### Ordered Lists

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

### Task Lists

- [x] Design the interface
- [x] Implement core features
- [ ] Add advanced collaboration
- [ ] Mobile app version

---

## Code

### Inline Code

Use the `console.log()` function to debug, or install with `npm install package-name`.

### Code Blocks

Python example:
```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Calculate the 10th Fibonacci number
result = fibonacci(10)
print(f"The 10th Fibonacci number is: {result}")
```

JavaScript example:
```javascript
// Async function with error handling
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching user:', error);
        throw error;
    }
}
```

Bash example:
```bash
# Deploy script
npm run build
docker build -t myapp:latest .
docker push myapp:latest
kubectl apply -f deployment.yaml
```

---

## Images

### Basic Image Syntax

Images use the syntax: \`![alt text](image-url "optional title")\`

![Markdown Logo](https://markdown-here.com/img/icon256.png "Markdown")

### Responsive Images

Images automatically scale to fit the preview width. Try resizing your browser!

![Placeholder Image](https://picsum.photos/800/400 "Sample Image")

### Linked Images

You can make images clickable by wrapping them in a link:

[![Ormind Logo](https://picsum.photos/200/100)](https://ormind.ai)

### Using HTML for Advanced Control

For more control, you can use HTML \`<img>\` tags:

**Note:** Diagrams (like Mermaid or PlantUML) are not currently supported, but you can:
- Create diagrams externally and embed as images
- Use ASCII art in code blocks
- Use HTML/SVG for simple diagrams

---

## Tables

Tables are created using pipes `|` and dashes `-`:

```
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Row 1    | Data     | Data     |
| Row 2    | Data     | Data     |
```

### Simple Table

| Feature | Free | Pro | Enterprise |
|---------|------|-----|------------|
| Documents | 10 | Unlimited | Unlimited |
| Collaboration | No | Yes | Yes |
| Export PDF | No | Yes | Yes |
| Priority Support | No | No | Yes |
| Price | $0 | $9/mo | $49/mo |

### Column Alignment

Use colons `:` to align columns:
- `:---` = left aligned (default)
- `:---:` = center aligned
- `---:` = right aligned

| Left Aligned | Center Aligned | Right Aligned |
|:-------------|:--------------:|--------------:|
| Apple        | Red            | $1.20 |
| Banana       | Yellow         | $0.50 |
| Orange       | Orange         | $0.80 |

---

## Blockquotes

> "The best way to predict the future is to invent it."
> — Alan Kay

Nested blockquotes:

> This is the first level of quoting.
>
> > This is nested blockquote.
> >
> > > This is a third level quote.
>
> Back to the first level.

---

## Emojis :tada:

mdit supports emoji shortcodes! :rocket: :sparkles: :fire:

Here are some examples:
- :heart: Love it!
- :+1: Thumbs up!
- :thinking: Hmm, interesting...
- :bulb: Great idea!
- :warning: Be careful!
- :white_check_mark: Done!
- :x: Error!

---

## Typography

Smart quotes: "double quotes" and 'single quotes'

Dashes: en-dash (--) and em-dash (---)

Ellipsis: ...

Arrows: --> <-- <--> ==>

---

## HTML Support

mdit allows HTML tags for advanced formatting:

<div style="background: #f0f9ff; padding: 15px; border-radius: 8px; border-left: 4px solid #0ea5e9;">
  <strong>💡 Pro Tip:</strong> You can mix HTML with markdown for custom styling!
</div>

<br>

<details>
<summary>Click to expand advanced features</summary>

This content is hidden by default. Great for FAQs or optional information!

You can still use **markdown** inside HTML tags.

</details>

---

## Use Cases

### 1. Edit LLM Outputs :robot:

LLMs create great first drafts, but often need refinement.

> **mdit** lets you copy-paste AI-generated content and polish it to perfection with real-time preview.

### 2. Write Complex Prompts :memo:

When using AI agents like [Ormind](https://ormind.ai), structured prompts are essential.

> Markdown helps you create **well-organized prompts** that:
> 1. Are naturally understood by LLMs
> 2. Can be previewed in real-time
> 3. Are easy to iterate and improve

### 3. Technical Documentation :books:

Perfect for:
- API documentation
- User guides
- README files
- Project wikis
- Meeting notes

### 4. Collaboration :busts_in_silhouette:

Share your document link and collaborate in real-time:
- Changes sync automatically
- Multiple people can edit
- No account required

---

## Export Options

Export your documents in multiple formats:

- **Markdown** (.md) - Keep the raw format
- **HTML** (.html) - Styled web page
- **PDF** (.pdf) - Print-ready document

---

## Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Ctrl+S` | Save document |
| `Alt+E` | Fullscreen editor |
| `Alt+P` | Fullscreen preview |
| `Esc` | Exit fullscreen |
| `Tab` | Insert 4 spaces |

---

## Tips & Tricks :bulb:

1. **Table of Contents**: Click the "ToC" button to auto-generate a table of contents
2. **Layout Toggle**: Switch between horizontal and vertical layouts
3. **Fullscreen Mode**: Focus on writing or reading with fullscreen options
4. **Auto-Save**: Your work is automatically saved to your browser
5. **Shareable Links**: Every document gets a unique, shareable URL

---

## What's Next?

Start typing in the editor to see your markdown come to life! :sparkles:

Try editing this document to explore all the features, or clear it and start fresh with your own content.

**Happy writing!** :writing_hand: