MDArea

Github

MDArea is a textarea augmentation that adds a toolbar and keyboard shortcuts to any textarea to turn it into a lightweight markdown editor.

Installation

Install via NPM

npm install github:bemky/mdarea

Import and Initialize

import MDArea from 'mdarea';
    
new MDArea(document.querySelector('textarea'));

MDArea will also render it's own textarea if not given one. Instead it can take an object where each key is an attribute of the textarea.

import MDArea from 'mdarea';

const area = new MDArea({
    name: "building[details]",
    rows: 10,
    class: "uniformInput"
});
document.append(area.el);

Style

The MDArea will take on the style of the textarea. It reads the style attributes on render and applies attributes via CSS variables.

<textarea class="example-1" rows="8">Styled textarea</textarea>

.example-1 {
    background: rgba(240, 237, 255, 1.000);
    border-radius: 0.75em;
    border-color: rgba(223, 199, 255, 1.000);
    color: rgba(108, 51, 186, 1.000);
    width: 100%;
    padding: 2em;
}