Rich Text, HTML & Markdown Formatting

SnippetHub is built to handle everything from complex customer support emails with clickable links to syntax-highlighted code blocks and raw Markdown templates.

To support diverse workflows, SnippetHub features three specialized editor modes paired with an intelligent dual-MIME clipboard engine.

---

The Three Editor Modes

When creating or editing a snippet in the side panel or pop-out window, you can toggle between three authoring environments using the mode switcher tabs above the editor:

┌─────────────────┬─────────────────┬─────────────────┐
│ Visual WYSIWYG  │    Markdown     │    Raw HTML     │
└─────────────────┴─────────────────┴─────────────────┘

1. Visual WYSIWYG Mode (Default)

Powered by the Quill rich text engine, Visual mode provides a familiar word-processor experience:

• Hierarchy & Headings: H1, H2, and subheadings.
• Styling: Bold (⌘B), Italic (⌘I), Underline (⌘U), and Strikethrough.
• Lists: Bulleted lists and ordered numbered lists.
• Links: Clickable hyperlinks that automatically enforce target="_blank" and rel="noopener noreferrer" to protect against Reverse Tabnabbing.
• Blockquotes: Stylized callout quotes for email replies or documentation notes.
• Code Blocks: Formatted monospaced blocks for short terminal commands or code snippets.

2. Markdown Mode

If you live in Obsidian, Notion, GitHub, or static site generators, Markdown mode allows you to compose snippets using standard GitHub-Flavored Markdown (GFM):

# Meeting Notes: {{date}}

- **Client**: {{client:Company Name}}
- **Status**: [Active](https://example.com)

```bash
docker compose up -d

- **Live Mode Switching**: Toggling between Markdown and Visual mode automatically converts between Markdown syntax and rendered HTML using SnippetHub's built-in converter (`markdownToHtml` and `htmlToMarkdown`).
- **Markdown Preservation**: When you save in Markdown mode, the snippet retains its pure Markdown structure when inserted into standard text areas, code files, and terminals.

### 3. Raw HTML Mode

For advanced users and email designers who require exact control over tags and inline styles:

- **Source Inspection**: View and edit the exact HTML markup produced by the rich text editor.
- **Custom Tags**: Author tables (`<table>`, `<tr>`, `<td>`), semantic dividers (`<hr>`), and inline styled spans.
- **Built-in Sanitization**: Any HTML authored or pasted into Raw HTML mode is automatically verified against SnippetHub's strict tag allowlist to ensure safety and prevent broken layouts.

---

## Syntax Highlighting (Highlight.js)

When previewing snippets in the list or viewing them in **Quick Look (`Spacebar`)**, SnippetHub automatically detects and formats code blocks using **Highlight.js** with GitHub-Dark styling.

Supported languages include:
- **Web & Scripting**: JavaScript, TypeScript, HTML, CSS, PHP
- **Backend & Data**: Python, SQL, Go, Rust, Java, C/C++
- **DevOps & Config**: Shell/Bash, Dockerfile, YAML, JSON
- **Documentation**: Markdown, Plain Text

---

## How Copy & Paste Works (Multi-Format & Dual-MIME Pipeline)

SnippetHub supports **four copy & paste formats** across the entire application—both in the main snippet list and inside the snippet editor:

1. **✨ Rich Text (`rich`)**: Writes dual MIME payloads (`text/html` + `text/plain` fallback) via the modern `ClipboardItem` API so Google Docs, Word, Gmail, Outlook, Notion, and Slack preserve headings, bold/italic styling, clickable links, and lists while plain-text inputs receive clean fallback text.
2. **📄 Plain Text (`plain`)**: Strips all HTML markup and Markdown syntax, writing strictly unstyled `text/plain` to your clipboard—and automatically bypasses variable fill-in prompts and dynamic placeholder expansion so raw template tokens like `{{brand}}` or `{{date}}` are copied verbatim.
3. **📝 Markdown (`markdown`)**: Automatically converts rich HTML into clean GitHub-Flavored Markdown (`.md`) syntax (`# Headings`, `**bold**`, `[links](url)`, `- lists`) on the fly.
4. **🌐 HTML (`html`)**: Copies or pastes the raw HTML source code (`<h3>`, `<p>`, `<a href="...">`).

```text
SnippetHub Copy Action
       │
       ├── Rich Text (Dual-MIME) ──► text/html + text/plain fallback
       ├── Plain Text            ──► Strictly unstyled text/plain (all tags stripped)
       ├── Markdown              ──► Converted GFM syntax (.md)
       └── HTML                  ──► Raw HTML source markup (</>)

Selecting Your Copy or Paste Format

• Global Default Copy Format: Click the format indicator (✨ / 📄 / 📝 / 🌐 / ⚡) in the list controls bar—or use the Copy Format dropdown in the Avatar Settings menu—to set your default one-click copy behavior (Rich Text, Plain Text, Markdown, HTML, or Auto (Mode)).
• Per-Snippet “Copy As” Override:
  • Right-Click the Copy Icon: Right-click the clipboard button on any snippet card (or the Copy button in Quick Look) to open the quick Copy As… mini-menu (Rich Text, Plain Text, Markdown, HTML).
  • Card Menu (⋮): Open any snippet’s action menu and select Copy as Rich Text, Copy as Plain Text, Copy as Markdown, or Copy as HTML.
• Paste as New Snippet (From Main View):
  • Click the split chevron next to the + Add button at the bottom of the panel to Paste as Rich Text, Paste as Plain Text, Paste as Markdown, or Paste as HTML, or press ⌘V / Ctrl+V while browsing your list to instantly create a new snippet from your clipboard.
• In-Editor Copy & Paste Dropdowns:
  • Inside the snippet editor header bar, use the Copy ▾ dropdown (Copy as Rich Text, Copy as Plain Text, Copy as Markdown, Copy as HTML) and Paste ▾ dropdown (Paste as Rich Text, Paste as Plain Text, Paste as Markdown, Paste as HTML) to convert content on the fly without switching editor modes.

Destination App Behavior Matrix

Target Application	MIME Type Consumed	What Gets Pasted
Google Docs & Microsoft Word	text/html (or text/plain when copied as Plain Text)	Formatted bold/italic text, headings, clickable links, and lists—or unstyled text when using Copy as Plain Text.
Gmail & Outlook Web	text/html (or text/plain when copied as Plain Text)	Complete rich text email layout with working links and bullet points, or clean unformatted text.
Slack, Teams & Discord	text/html / text/plain	Rich message formatting including bold, quotes, and monospaced code.
VS Code, Sublime, IDEs	text/plain	Clean plain text, literal Markdown syntax, or raw HTML depending on chosen format.
macOS Terminal / Linux Bash	text/plain	Pure executable CLI commands without formatting artifacts.
Obsidian / Logseq / Notion	text/html or text/plain	Formatted blocks or clean Markdown syntax (Copy as Markdown).

---

How In-Page Text Expansion Behaves

When expanding snippets via keywords (e.g. typing ;sig followed by Space) or using the Insert Directly (I) button:

1. Rich ContentEditable Areas (Gmail, Outlook, Zendesk, Notion, Google Docs):
   • SnippetHub synthesizes native DOM insertion (insertHTML) to paste the formatted HTML directly at your cursor.
   • Any dynamic placeholders ({{date}}, {{clipboard}}) are resolved prior to injection.
2. Standard Text Inputs & Textareas (<input type="text">, <textarea>):
   • If the snippet was saved in Markdown or HTML mode, SnippetHub inserts the exact literal Markdown or HTML code.
   • If the snippet was authored in Visual WYSIWYG mode, SnippetHub cleanly strips all HTML tags and inserts clean plain text.

---

Tips for Copying & Pasting

One-Click Plain Text Copying

Need to paste a formatted snippet into Gmail, Google Docs, or Word without carrying over any fonts, bolding, or links? Right-click the snippet’s Copy icon and choose 📄 Plain Text (or set your default copy format to Plain Text in the toolbar). You can also use your OS shortcut (⌘ + Shift + Option + V on Mac or Ctrl + Shift + V on Windows/Linux).

Exporting Full Markdown Vaults

If you want to migrate your entire snippet library into Obsidian or Notion as individual .md files with YAML frontmatter, use the Export Vault (.zip) feature under the avatar menu. See the Cloud Sync & Vault Export guide for details.