How to Implement Markdown Mode in a WYSIWYG Editor (v2.0.10)

What Is Bidirectional Markdown Mode?

Bidirectional Markdown mode means the editor can convert content from rich HTML to Markdown and back — without losing any information. A user can write in visual rich text mode, switch to Markdown to see or edit the raw syntax, then switch back to rich text. The conversion is lossless for all supported element types.

This is different from editors that support only Markdown input (writing **bold** to get bold) — those do not let you see or edit raw Markdown at any point. True bidirectional mode requires a converter for both directions.

Enabling Markdown Mode in RayEditor

Add the three Markdown toolbar items to your options:

import { RayEditor } from '@rohanyeole/ray-editor';
import '@rohanyeole/ray-editor/dist/ray-editor.css';

const editor = new RayEditor(document.getElementById('editor'), {
  toolbar: [
    'bold', 'italic', 'heading', 'orderedList', 'unorderedList',
    'codeBlock', 'link', 'table',
    '|',
    'markdownToggle',   // click to toggle raw Markdown view
    'importMarkdown',   // opens file picker for .md files
    'exportMarkdown'    // downloads content as .md file
  ]
});

Using the JavaScript API

// Import Markdown string directly (e.g. from a CMS API)
editor.importMarkdown(`
# My Article

This is a paragraph with **bold** and _italic_ text.

## Features

- Task lists
- Tables
- Code blocks

```javascript
console.log('Hello world');
```
`);

// Export the current content as Markdown
const markdown = editor.exportMarkdown();
console.log(markdown); // returns clean Markdown string

// Listen for content changes (fires in both modes)
editor.on('content:change', ({ html }) => {
  saveToServer(html);
});

Supported Markdown Elements

Keyboard Shortcuts in Rich Text Mode

These Markdown shortcuts trigger in rich text mode on a blank line or at the start of text:

**text**    → bold
*text*      → italic
## space    → Heading 2
> space     → blockquote
- space     → unordered list item
[ ] space   → task list item
``` Enter   → fenced code block

React Integration

<RayEditor
  value={html}
  onChange={setHtml}
  options={{
    toolbar: ['bold','italic','markdownToggle','importMarkdown','exportMarkdown']
  }}
/>

Conclusion

RayEditor makes it straightforward to add bidirectional Markdown mode to any JavaScript project. Enable it by adding three toolbar items, then use importMarkdown() and exportMarkdown() for programmatic control. Full round-trip fidelity for all common Markdown elements is included in the free MIT-licensed package.