syncfusion-angular-markdown-converter

What this skill does

# Implementing Syncfusion Angular Markdown Converter

The Syncfusion Angular Markdown Converter is a lightweight utility that transforms Markdown-formatted text into clean, semantic HTML. It is typically used alongside the Syncfusion Rich Text Editor (in Markdown mode) to provide a live preview of rendered content.

## When to Use This Skill

- Convert Markdown text to HTML in an Angular application
- Display a live preview of Markdown content as the user types
- Configure conversion behavior (GFM support, line breaks, async mode, error suppression)
- Build a side-by-side Markdown editor and HTML preview layout
- Integrate `MarkdownConverter.toHtml()` with the Syncfusion Rich Text Editor

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Angular CLI setup and project creation
- Installing `@syncfusion/ej2-markdown-converter` and `@syncfusion/ej2-angular-richtexteditor`
- CSS imports for the material3 theme
- Required module injection (MarkdownEditor, Image, Link, Toolbar, Table)
- Running the application

### Convert Markdown to HTML — toHtml API
📄 **Read:** [references/tohtml-api.md](references/tohtml-api.md)
- `MarkdownConverter.toHtml()` method signature
- Basic usage example (standalone, no editor required)
- Supported Markdown elements (headings, lists, tables, links, images, inline styles)
- Using the return value in Angular templates

### Configurable Options
📄 **Read:** [references/configurable-options.md](references/configurable-options.md)
- `MarkdownConverterOptions` interface
- `async` — asynchronous conversion for large content
- `gfm` — GitHub Flavored Markdown support (default: true)
- `lineBreak` — convert single line breaks to `<br>` (default: false)
- `silence` — suppress errors on invalid Markdown (default: false)
- Full example passing options to `toHtml()`

### Rich Text Editor Integration
📄 **Read:** [references/richtexteditor-integration.md](references/richtexteditor-integration.md)
- Splitter-based side-by-side editor and preview layout
- Configuring `ejs-richtexteditor` in Markdown `editorMode`
- Real-time preview using `onChange` and `updateValue()`
- Toolbar configuration for Markdown editing
- `MarkdownFormatter` for custom Markdown syntax
- Custom preview toggle button (fullPreview pattern)
- Mobile/device orientation handling with `Browser.isDevice`

## Quick Start

Install packages and wire up the converter in three steps:

**1. Install packages:**
```bash
npm install @syncfusion/ej2-markdown-converter
npm install @syncfusion/ej2-angular-richtexteditor
```

**2. Import CSS in `src/styles.css`:**
```css
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material3.css';
```

**3. Convert Markdown to HTML:**
```typescript
import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';

const markdown = '# Hello World\nThis is **Markdown** text.';
const html = MarkdownConverter.toHtml(markdown);
console.log(html);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>
```

## Common Patterns

### Pattern 1: Standalone Conversion (No Editor)
When you only need to convert a Markdown string to HTML without an editor UI:
```typescript
import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';

const html = MarkdownConverter.toHtml(markdownString);
document.getElementById('preview')!.innerHTML = html as string;
```

### Pattern 2: Live Preview on Keyup
Convert on every keystroke inside a Rich Text Editor textarea:
```typescript
public markDownConversion(): void {
  const textarea = this.editorObj.contentModule.getEditPanel() as HTMLTextAreaElement;
  const previewEl = document.getElementById('html-view') as HTMLElement;
  previewEl.innerHTML = MarkdownConverter.toHtml(textarea.value) as string;
}
```

### Pattern 3: Conversion with Options
Disable GFM and enable line-break conversion:
```typescript
const html = MarkdownConverter.toHtml(markdownString, {
  gfm: false,
  lineBreak: true
});
```

### Pattern 4: Side-by-Side Preview with Splitter
For a full editor + preview experience, use the Syncfusion Splitter component alongside the Rich Text Editor in Markdown mode. The preview pane is updated via `updateValue()` on every change event.
📄 **Read:** [references/richtexteditor-integration.md](references/richtexteditor-integration.md) for the full implementation.

## Key Props / API

| API | Type | Default | Purpose |
|-----|------|---------|---------|
| `MarkdownConverter.toHtml(content, options?)` | static method | — | Converts Markdown string to HTML |
| `options.async` | boolean | `false` | Async conversion for large content |
| `options.gfm` | boolean | `true` | GitHub Flavored Markdown support |
| `options.lineBreak` | boolean | `false` | Single line breaks → `<br>` |
| `options.silence` | boolean | `false` | Suppress errors on invalid Markdown |