@arraypress/markdown-editor

Lightweight markdown editor toolkit. Two-way markdown↔HTML conversion, toolbar action helpers, and a React component with visual and source modes.

Installation

npm install @arraypress/markdown-editor

Quick Start

import { toHtml, toMarkdown, wrapSelection, toolbarActions } from '@arraypress/markdown-editor';

// Markdown → HTML
toHtml('## Hello **world**');
// '<h2>Hello <strong>world</strong></h2>'

// HTML → Markdown
toMarkdown('<h2>Hello <strong>world</strong></h2>');
// '## Hello **world**'

// Toolbar action: wrap selection in bold
wrapSelection('hello world', 6, 11, '**', '**');
// { text: 'hello **world**', selectionStart: 8, selectionEnd: 13 }

API

toHtml(markdown)

Convert markdown to HTML. Supports: headings (h1–h6), bold, italic, bold+italic, strikethrough, links, images, unordered lists, ordered lists, blockquotes, inline code, code blocks, and horizontal rules.

toMarkdown(html)

Convert HTML back to markdown. Designed for round-tripping — toMarkdown(toHtml(md)) produces equivalent markdown.

wrapSelection(text, start, end, before, after)

Wrap selected text with markdown syntax. Returns { text, selectionStart, selectionEnd }.

insertLinePrefix(text, cursorPos, prefix)

Insert a prefix at the start of the current line. Returns { text, cursorPos }.

toggleLinePrefix(text, cursorPos, prefix)

Toggle a line prefix on/off. If the line already starts with the prefix, remove it.

insertLink(text, start, end, url?)

Insert a markdown link. Wraps selected text as link text, or inserts a placeholder.

toolbarActions

Array of toolbar action definitions with id, label, shortcut, before/after (for wrap actions), prefix (for line prefix actions), or insert (for standalone insertions).

Supported Syntax

| Element | Markdown | HTML | |---------|----------|------| | Heading | ## Title | <h2>Title</h2> | | Bold | **text** | <strong>text</strong> | | Italic | *text* | <em>text</em> | | Strikethrough | ~~text~~ | <del>text</del> | | Link | [text](url) | <a href="url">text</a> | | Image | ![alt](url) | <img src="url" alt="alt"> | | Inline code | `code` | <code>code</code> | | Code block | ``` | <pre><code>...</code></pre> | | Bullet list | - item | <ul><li>item</li></ul> | | Numbered list | 1. item | <ol><li>item</li></ol> | | Blockquote | > text | <blockquote>text</blockquote> | | Horizontal rule | --- | <hr> |

License

MIT