cm-md-editor

A minimal, dependency-free markdown editor as a vanilla JavaScript ES6 module.

Demo

Key features

• Vanilla JavaScript module, zero dependencies
• Syntax highlighting for headings, bold, italic, strikethrough, code, lists, links, images, blockquotes, HTML tags, horizontal rules, front matter and more
• Modular toolbar built from composable tools
• Word wrap toggle with persistent state (localStorage)
• List mode: Tab/Shift-Tab to indent/outdent, auto-continuation on Enter
• Bold with Ctrl/Cmd+B, italic with Ctrl/Cmd+I (provided by tools)
• Native undo/redo support (Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z)
• Lightweight, fast, easy to use

Installation

npm install cm-md-editor

Usage

<textarea id="editor"></textarea>

<script type="module">
    import {MdEditor} from "cm-md-editor/src/MdEditor.js"

    const editor = new MdEditor(document.getElementById("editor"))
</script>

This creates an editor with the default toolbar: Headings (h1–h3), Bold, Italic, Strikethrough, Unordered List, Ordered List, Insert Link, Insert Image.

Custom toolbar

Compose your own toolbar by passing a tools array:

import {MdEditor} from "cm-md-editor/src/MdEditor.js"
import {Headings} from "cm-md-editor/src/tools/Headings.js"
import {Bold} from "cm-md-editor/src/tools/Bold.js"
import {Italic} from "cm-md-editor/src/tools/Italic.js"
import {Separator} from "cm-md-editor/src/tools/Separator.js"
import {InsertLink} from "cm-md-editor/src/tools/InsertLink.js"

new MdEditor(document.getElementById("editor"), {
    tools: [Headings, Separator, Bold, Italic, Separator, InsertLink]
})

Configuring tools

Tools that accept options can be passed as [ToolClass, props] tuples:

new MdEditor(document.getElementById("editor"), {
    tools: [[Headings, {minLevel: 2, maxLevel: 4}], Bold, Italic]
})

Configuration (props)

All props are optional. Pass them as the second argument to the constructor.

Prop	Type	Default	Description
tools	array	defaultTools	Array of tool classes (or [class, props] tuples). See Tools
wordWrap	boolean	true	Default word wrap state. Overridden by localStorage if the user has toggled it
colorHeading	string	"100,160,255"	RGB color for headings
colorCode	string	"130,170,200"	RGB color for code spans and fenced code blocks
colorComment	string	"128,128,128"	RGB color for HTML comments
colorLink	string	"100,180,220"	RGB color for links and images
colorBlockquote	string	"100,200,150"	RGB color for blockquote prefixes
colorList	string	"100,200,150"	RGB color for list markers
colorStrikethrough	string	"255,100,100"	RGB color for strikethrough
colorBold	string	"255,180,80"	RGB color for bold
colorItalic	string	"180,130,255"	RGB color for italic
colorHtmlTag	string	"200,120,120"	RGB color for HTML tags
colorHorizontalRule	string	"128,128,200"	RGB color for horizontal rules
colorEscape	string	"128,128,128"	RGB color for escape sequences
colorFrontMatter	string	"128,128,200"	RGB color for YAML front matter

Colors are specified as RGB strings (e.g. "255,180,80") and rendered at full opacity.

Tools

The toolbar is built entirely from tools. Each tool is a class that provides toolbar buttons, keyboard shortcuts, and/or syntax highlighting extensions.

Built-in tools

Tool	Buttons	Shortcut	Description
Headings	h1, h2, h3	—	Toggle heading levels. Props: {minLevel, maxLevel} (defaults: 1–3)
Bold	bold	Ctrl/Cmd+B	Toggle bold (**)
Italic	italic	Ctrl/Cmd+I	Toggle italic (_)
Strikethrough	strikethrough	—	Toggle strikethrough (~~)
UnorderedList	ul	—	Toggle unordered list prefix (- )
OrderedList	ol	—	Toggle ordered list prefix (1. )
InsertLink	link	—	Insert markdown link
InsertImage	image	—	Insert markdown image
Separator	—	—	Visual divider in the toolbar. Can be used multiple times

All built-in tools are exported from src/tools/DefaultTools.js:

import {defaultTools} from "cm-md-editor/src/tools/DefaultTools.js"

The default toolbar order is:

Headings | Bold, Italic, Strikethrough | UnorderedList, OrderedList | InsertLink, InsertImage

Writing a custom tool

A tool is a class that receives the editor instance (and optional props) in its constructor. It can implement any combination of three optional methods:

export class MyTool {
    constructor(editor, props = {}) {
        this.editor = editor
    }

    // Optional: add buttons to the toolbar
    toolbarButtons() {
        return [{
            name: 'mytool',
            title: 'My Tool',
            // Icon options (use one):
            icon: '<path d="..."/>',       // inline SVG path for a 16x16 viewBox
            iconFile: 'my-icon.svg',       // filename in src/tools/icons/
            iconUrl: 'https://...',        // full URL to an SVG file
            action: () => { /* ... */ }
        }]
    }

    // Optional: register keyboard shortcuts
    keyboardShortcuts() {
        return [{
            key: 'e',            // the key to match (KeyboardEvent.key)
            ctrlOrMeta: true,    // require Ctrl (Windows/Linux) or Cmd (Mac)
            action: (e) => { /* ... */ }
        }]
    }

    // Optional: extend syntax highlighting (receives already-escaped HTML)
    highlightInline(html) {
        return html.replace(...)
    }
}

For tools with co-located icons, use import.meta.url to resolve the icon path:

toolbarButtons() {
    return [{
        name: 'mytool',
        title: 'My Tool',
        iconUrl: new URL("my-icon.svg", import.meta.url).href,
        action: () => { /* ... */ }
    }]
}

Editor API available to tools

These public methods and properties are available via this.editor:

Method / Property	Description
editor.element	The textarea element (read value, selectionStart, selectionEnd)
editor.insertTextAtCursor(text)	Insert text at cursor, preserving native undo/redo
editor.getCurrentLineInfo()	Returns {lineStart, lineEnd, line} for the current line
editor.selectLineRange(start, end)	Set the textarea selection range
editor.toggleWrap(marker)	Toggle wrapping markers around the selection (e.g. ** for bold)
editor.escapeHtml(str)	Escape a string for use in the highlight layer
editor.colorSpan(colorProp, content)	Wrap content in a colored <span> using an RGB color prop

Example: DummyText tool

A tool that inserts lorem ipsum text (see example-addon-tools/DummyText.js):

import {MdEditor} from "cm-md-editor/src/MdEditor.js"
import {defaultTools} from "cm-md-editor/src/tools/DefaultTools.js"
import {Separator} from "cm-md-editor/src/tools/Separator.js"
import {DummyText} from "./example-addon-tools/DummyText.js"

new MdEditor(document.getElementById("editor"), {
    tools: [...defaultTools, Separator, DummyText]
})

Keyboard shortcuts

Shortcut	Action	Provided by
Ctrl/Cmd + B	Toggle bold	Bold tool
Ctrl/Cmd + I	Toggle italic	Italic tool
Tab	Indent list item or insert tab	Core editor
Shift + Tab	Outdent list item	Core editor
Enter	Auto-continue list (unordered and ordered)	Core editor

License

MIT