textarea-editor

Simple markdown editor for textareas, without a UI. Inspired by Github's comment editor.


Usage

``js
import TextareaEditor from 'textarea-editor';
const textarea = document.querySelector('textarea');
const editor = new TextareaEditor(textarea);

editor.insert('Hello world!');
editor.range([0, 5]);
editor.format('bold');
assert(textarea.value == 'Hello world!');

editor.unformat('bold');
editor.format('italic');
assert(textarea.value == '_Hello_ world!');
`

For an example with a UI, see the example folder or run yarn start.

All default formats are exposed, and can easily be modified or extended.

$3

A format should be an object with the following properties:

- block - (Optional) A boolean indicating whether or not this is a block, and should be newline separated from the rest of the text (e.g. code block).
- multiline - (Optional) A boolean indicating whether or not this is a multiline format (e.g. ordered list).
- prefix
- value - A string or a function that generates a value (useful for prefixes that change based on line number, such as ordered lists). The function gets called for each line in the current selection (unless .multiline is false, in which case the entire selected text is passed), and is given the line, the line number, and any additional arguments passed to .format().
- pattern - A string containing a pattern that identifies the prefix when used in a regular expression (double escape special chars).
- antipattern - (Optional) A string containing a pattern that identifies prefixes that would be found by .pattern, but should be ignored because they are part of other prefixes (e.g ## would match parts of ###). This is a very ugly hack, should find a better way to solve this in the future.
- suffix
- Same properties as .prefix, but gets inserted after the current selection.

#### Example

`js
textarea.value = 'Hello\nWorld';

const orderedList = {
block: true,
multiline: true,
prefix: {
value: (line, no) => ${no}. ,
pattern: '[0-9]+\\. '
}
};

editor.range([0, textarea.value.length])
editor.format(orderedList);
assert(textarea.value == '1. Hello\n2. World');
`

Simple formats can be defined by giving .prefix and .suffix a string value.

`js
textarea.value = 'Hello World';
editor.range([0, textarea.value.length]);
editor.format({ prefix: '#{', suffix: '}' });
assert(textarea.value == '#{Hello World}');
`

API

#### Table of Contents

- TextareaEditor
- range
- insert
- focus
- toggle
- format
- unformat
- hasFormat
- Formats
- bold
- italic
- strikethrough
- link
- image
- header1
- header2
- header3
- header4
- header5
- header6
- code
- orderedList
- unorderedList
- taskList
- blockquote

$3

TextareaEditor class.

Parameters

- el HTMLElement the textarea element to wrap around

#### range

Set or get selection range.

Parameters

- range Array?

Returns (Array \| TextareaEditor)

#### insert

Insert given text at the current cursor position.

Parameters

- text String text to insert

Returns TextareaEditor

#### focus

Set foucs on the TextareaEditor's element.

Returns TextareaEditor

#### toggle

Toggle given format on current selection.
Any additional arguments are passed on to .format().

Parameters

- format (String \| Object) name of format or an object
- args ...any

Returns TextareaEditor

#### format

Format current selcetion with given format.

Parameters

- name (String \| Object) name of format or an object
- args ...any

Returns TextareaEditor

#### unformat

Remove given format from current selection.

Parameters

- name (String \| Object) name of format or an object

Returns TextareaEditor

#### hasFormat

Check if current seletion has given format.

Parameters

- name (String \| Object) name of format or an object

Returns Boolean

$3

Default formats.

#### bold

Bold text.

Examples

`javascript
editor.format('bold');
assert(textarea.value == 'Hello World')
`

#### italic

Italic text.

Examples

`javascript
editor.format('italic');
assert(textarea.value == '_Hello World_')
`

#### strikethrough

Strikethrough text.

Examples

`javascript
editor.format('strikethrough');
assert(textarea.value == '~~Hello World~~')
`

#### link

Insert link.

Examples

`javascript
editor.format('link', '/example');
assert(textarea.value == 'Hello World')
`

#### image

Insert image.

Examples

`javascript
editor.format('image', '/example.png');
assert(textarea.value == '!Hello World')
`

#### header1

Header 1.

Examples

`javascript
editor.format('header1');
assert(textarea.value == '# Hello World')
`

#### header2

Header 2.

Examples

`javascript
editor.format('header2');
assert(textarea.value == '## Hello World')
`

#### header3

Header 3.

Examples

`javascript
editor.format('header3');
assert(textarea.value == '### Hello World')
`

#### header4

Header 4.

Examples

`javascript
editor.format('header4');
assert(textarea.value == '#### Hello World')
`

#### header5

Header 5.

Examples

`javascript
editor.format('header5');
assert(textarea.value == '##### Hello World')
`

#### header6

Header 6.

Examples

`javascript
editor.format('header6');
assert(textarea.value == '###### Hello World')
`

#### code

Insert code block.

Examples

``javascript
editor.format('code');
assert(textarea.value == '`\nHello World\n`')
``

#### orderedList

Ordered list.

Examples

`javascript
editor.format('orderedList');
assert(textarea.value == '1. Hello World')
`

#### unorderedList

Unordered list.

Examples

`javascript
editor.format('unorderedList');
assert(textarea.value == '- Hello World')
`

#### taskList

Task list.

Examples

`javascript
editor.format('taskList');
assert(textarea.value == '- [ ] Hello World')
`

#### blockquote

Blockquote.

Examples

`javascript
editor.format('blockquote');
assert(textarea.value == '> Hello World')
``

License

MIT