# Wysimark Editor for Obsidian

A modern WYSIWYG Markdown editor plugin for Obsidian. Edit your notes with a rich text interface while keeping pure Markdown.

![Screenshot](screenshot.png)

## Features

### Rich Text Editing

Edit your Markdown files visually with a familiar word processor-like interface. The editor automatically converts between Markdown and rich text format.

### Text Formatting

- **Bold** (`Ctrl/Cmd + B`)
- *Italic* (`Ctrl/Cmd + I`)
- ~~Strikethrough~~ (`Ctrl/Cmd + K`)
- `Inline Code` (`Ctrl/Cmd + J`)
- <u>Underline</u> (`Ctrl/Cmd + U`)

### Headings

- Heading 1 (`Ctrl/Cmd + Alt + 1`)
- Heading 2 (`Ctrl/Cmd + Alt + 2`)
- Heading 3 (`Ctrl/Cmd + Alt + 3`)
- Normal paragraph (`Ctrl/Cmd + Alt + 0`)

### Lists

- Bullet lists (`Ctrl/Cmd + Alt + 8`)
- Numbered lists (`Ctrl/Cmd + Alt + 7`)
- Task/Check lists (`Ctrl/Cmd + Alt + 9`)
- Increase indent (`Tab`)
- Decrease indent (`Shift + Tab`)

### Block Elements

- Block quotes (`Ctrl/Cmd + Alt + .`)
- Code blocks with syntax highlighting
- HTML blocks (iframe, video embeds, etc.) - displayed as read-only blocks and preserved as raw HTML

### Tables

- Insert tables from toolbar
- Navigate cells with `Tab` / `Shift+Tab`
- `Enter`: Insert line break within cell
- `Shift+Enter`: Move to next cell (adds new row at end)
- `Tab` at last cell: Exit table

### Links and Images

- Insert links (`Ctrl/Cmd + K`) with text and tooltip
- Edit existing links (URL, text, and tooltip)
- Selected text becomes link text automatically
- Insert images from URL
- Insert images from local files (saved to vault)

### Other Features

- **Frontmatter Support**: YAML frontmatter (properties) at the beginning of files is preserved but hidden from the editor
- **Auto-save**: Changes are automatically saved with a 1-second debounce
- **Reload button**: Click the 📥 button to reload the file from Obsidian (useful when the file is modified externally)

## Installation

### BRAT (Recommended)

1. Install [BRAT](https://github.com/TfTHacker/obsidian42-brat) plugin
2. Open BRAT settings → "Add Beta plugin"
3. Enter: `https://github.com/takeshy/obsidian-wysimark`
4. Enable the plugin in Community plugins settings

### Manual

1. Download `main.js`, `manifest.json`, `styles.css` from [releases](https://github.com/takeshy/obsidian-wysimark/releases)
2. Create `wysimark-editor` folder in `.obsidian/plugins/`
3. Copy files and enable in Obsidian settings

## Usage

1. After enabling the plugin, a Wysimark panel will appear in the right sidebar
2. Click on any Markdown file in your vault to open it in the Wysimark editor
3. Edit your content using the toolbar or keyboard shortcuts
4. Changes are saved automatically

## Development

### Build Commands

```bash
# Development mode with watch (auto-rebuilds on changes)
npm run dev

# Production build with TypeScript type checking and minification
npm run build
```

### Technology Stack

- **Editor**: Wysimark (built on Slate.js + React)
- **UI Framework**: React 19 with Emotion for styling
- **Build**: esbuild

## Credits

This plugin is built using [Wysimark](https://github.com/portive/wysimark), an excellent open-source WYSIWYG Markdown editor. Special thanks to [@thesunny](https://github.com/thesunny) for creating and maintaining this fantastic library. Wysimark is licensed under the MIT License.

## License

MIT

## Author

takeshy