@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		<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