# Markdown Support in msg.html

## Current State

### How messages render today
In [`msg.html`](../www/msg.html:779), the [`renderThread()`](../www/msg.html:756) function renders message content using **`textContent`**:

```js
const content = document.createElement('div');
content.textContent = msg.content || '';
```

This means all message text is displayed as plain text — no links, no bold, no formatting of any kind. Even URLs are not clickable.

### Existing assets in the project
1. **[`marked.min.js`](../www/js/marked.min.js:1)** — marked v9.0.3 is already bundled in the project. It is used by [`note.html`](../www/note.html:257) for rendering long-form note content as markdown into an iframe.
2. **[`htmlFormatText()`](../www/js/utilities.mjs:515)** — A simple utility that converts URLs to `<a>` links and image URLs to `<img>` tags. Used by [`post-interactions.mjs`](../www/js/post-interactions.mjs:300) for social feed posts.

---

## Industry Standard for Messaging Formatting

### What major messaging platforms do

| Platform | Formatting Approach |
|----------|-------------------|
| **Slack** | Custom markdown subset: `*bold*`, `_italic_`, `~strikethrough~`, `` `code` ``, ` ```code blocks``` `, `> blockquote`, links, emoji shortcodes |
| **Discord** | Full markdown subset: `**bold**`, `*italic*`, `~~strikethrough~~`, `` `code` ``, ` ```lang code blocks``` `, `> blockquote`, `\|\| spoiler \|\|`, links |
| **Telegram** | Markdown + HTML: `**bold**`, `__italic__`, `` `code` ``, ` ```code blocks``` `, `~~strikethrough~~`, `\|\| spoiler \|\|`, links |
| **WhatsApp** | Limited markdown: `*bold*`, `_italic_`, `~strikethrough~`, `` `code` `` |
| **Signal** | Limited markdown: `*bold*`, `_italic_`, `~~strikethrough~~`, `||spoiler||` |
| **Matrix/Element** | Full markdown rendering with HTML sanitization |
| **iMessage** | No markdown; rich text via attributed strings |

### Nostr ecosystem conventions
- **NIP-01** kind 1 notes and kind 14 DMs use **plain text content** — no official markdown NIP exists
- In practice, most Nostr clients render:
  - URLs as clickable links
  - Image URLs as inline images
  - `nostr:` URIs as profile/event links
  - Some clients like **Amethyst**, **Damus**, and **Coracle** render basic markdown in notes
- **NIP-23** long-form content (kind 30023) explicitly uses markdown

### Recommended approach for Nostr DMs
The industry consensus for chat/messaging is a **sanitized markdown subset** — not full markdown. The key principles:

1. **Render inline formatting**: bold, italic, strikethrough, inline code
2. **Render code blocks**: fenced code blocks with syntax highlighting optional
3. **Auto-link URLs**: make URLs clickable
4. **Render image URLs**: show inline image previews
5. **Blockquotes**: useful for quoting previous messages
6. **Sanitize HTML**: prevent XSS — never allow raw HTML tags
7. **Do NOT render**: headings, tables, horizontal rules, or complex block elements that don't make sense in chat bubbles

---

## Implementation Plan

### Architecture

```mermaid
flowchart TD
    A[Raw message content] --> B{Contains markdown?}
    B -->|Any content| C[DOMPurify sanitize raw text]
    C --> D[marked.parse with chat-safe options]
    D --> E[DOMPurify sanitize HTML output]
    E --> F[Set innerHTML on bubble]
    
    G[Reply input box] --> H[Get plaintext from contenteditable]
    H --> I[Send as plain text over NIP-04/NIP-44/NIP-17]
    
    style A fill:#1a1a2e,stroke:#e94560,color:#eee
    style F fill:#1a1a2e,stroke:#16c79a,color:#eee
    style I fill:#1a1a2e,stroke:#16c79a,color:#eee
```

### Steps

#### 1. Add marked.min.js script tag to msg.html
Include the existing [`marked.min.js`](../www/js/marked.min.js:1) in the `<head>` of [`msg.html`](../www/msg.html), just like [`note.html`](../www/note.html:257) does:

```html
<script src="./js/marked.min.js"></script>
```

#### 2. Add DOMPurify for XSS protection
Since messages come from untrusted third parties, HTML sanitization is critical. Add DOMPurify via CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
```

Alternatively, download and bundle it locally like `marked.min.js`.

#### 3. Configure marked for chat-safe rendering
Create a chat-specific marked configuration that disables features inappropriate for chat bubbles:

```js
function configureMarkedForChat() {
    marked.setOptions({
        breaks: true,       // Convert \n to <br> - essential for chat
        gfm: true,          // GitHub Flavored Markdown - strikethrough, tables
        pedantic: false,
        silent: true         // Don't throw on bad markdown
    });

    // Custom renderer to limit what gets rendered
    const renderer = new marked.Renderer();
    
    // Disable headings in chat - render as bold text instead
    renderer.heading = function(text, level) {
        return `<strong>${text}</strong><br>`;
    };
    
    // Disable horizontal rules
    renderer.hr = function() {
        return '<br>';
    };
    
    // Make links open in new tab
    renderer.link = function(href, title, text) {
        const titleAttr = title ? ` title="${title}"` : '';
        return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
    };
    
    // Render images inline with max-width constraint
    renderer.image = function(href, title, text) {
        const titleAttr = title ? ` title="${title}"` : '';
        return `<img src="${href}" alt="${text}"${titleAttr} style="max-width:100%;border-radius:6px;">`;
    };

    marked.use({ renderer });
}
```

#### 4. Create a renderMessageContent helper function
Add a function that safely converts message text to formatted HTML:

```js
function renderMessageContent(text) {
    if (!text) return '';
    
    // Parse markdown to HTML
    let html = '';
    try {
        html = marked.parse(text);
    } catch (e) {
        // Fallback to escaped plain text
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    // Sanitize to prevent XSS
    if (window.DOMPurify) {
        html = DOMPurify.sanitize(html, {
            ALLOWED_TAGS: [
                'b', 'i', 'em', 'strong', 'a', 'code', 'pre',
                'br', 'p', 'ul', 'ol', 'li', 'blockquote',
                'del', 's', 'img', 'span'
            ],
            ALLOWED_ATTR: [
                'href', 'target', 'rel', 'title', 'alt', 'src', 'style'
            ],
            ALLOW_DATA_ATTR: false
        });
    }
    
    return html;
}
```

#### 5. Update renderThread to use innerHTML with sanitized markdown
Change the content rendering in [`renderThread()`](../www/msg.html:756) from `textContent` to `innerHTML`:

**Before** (line 779):
```js
content.textContent = msg.content || '';
```

**After**:
```js
content.innerHTML = renderMessageContent(msg.content || '');
```

#### 6. Add CSS styles for markdown inside chat bubbles
Add styles scoped to `.msgBubble` so markdown elements look appropriate in chat context:

```css
.msgBubble p {
    margin: 0 0 0.3em 0;
}
.msgBubble p:last-child {
    margin-bottom: 0;
}
.msgBubble code {
    background: rgba(128,128,128,0.2);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 85%;
}
.msgBubble pre {
    background: rgba(0,0,0,0.15);
    padding: 6px 8px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 4px 0;
}
.msgBubble pre code {
    background: none;
    padding: 0;
}
.msgBubble blockquote {
    border-left: 3px solid var(--muted-color);
    margin: 4px 0;
    padding: 2px 8px;
    color: var(--muted-color);
}
.msgBubble a {
    color: var(--accent-color);
    text-decoration: underline;
}
.msgBubble img {
    max-width: 100%;
    border-radius: 6px;
    margin: 4px 0;
}
.msgBubble ul, .msgBubble ol {
    margin: 4px 0;
    padding-left: 20px;
}
.msgBubble del, .msgBubble s {
    text-decoration: line-through;
    opacity: 0.7;
}
```

#### 7. Adjust white-space on msgBubble
The current [`msgBubble`](../www/msg.html:178) CSS has `white-space: pre-wrap` which will conflict with markdown-rendered HTML. Change it:

**Before**:
```css
.msgBubble {
    white-space: pre-wrap;
    ...
}
```

**After**:
```css
.msgBubble {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    ...
}
```

The `breaks: true` option in marked handles newline conversion to `<br>`, so `pre-wrap` is no longer needed.

---

## Security Considerations

- **DOMPurify is essential** — messages come from untrusted Nostr users. Without sanitization, a malicious user could inject `<script>` tags or event handlers via crafted markdown.
- The allowlist approach in DOMPurify config above is restrictive by design — only safe formatting tags are permitted.
- `target="_blank"` links must include `rel="noopener noreferrer"` to prevent tab-nabbing.
- Image rendering from arbitrary URLs has privacy implications — loading an image reveals the user's IP to the image host. Consider adding a click-to-load option for images in a future iteration.

## Summary of Files to Modify

| File | Change |
|------|--------|
| [`www/msg.html`](../www/msg.html) | Add `marked.min.js` + DOMPurify script tags, add `configureMarkedForChat()` + `renderMessageContent()` functions, update `renderThread()` to use `innerHTML`, add markdown CSS styles, adjust `white-space` on `.msgBubble` |

## Optional Future Enhancements

- **Markdown toolbar** in the reply input box with buttons for bold, italic, code, link
- **Markdown preview** toggle in the reply box showing formatted output before sending
- **Syntax highlighting** for code blocks using highlight.js or Prism
- **Click-to-load images** for privacy protection
- **nostr: URI handling** to render `nostr:npub...` and `nostr:note...` as clickable profile/event links
- **Emoji shortcode** support
