eivindfjeldstad/textarea-editor

Simple markdown editor for textareas

textarea-editor

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

Usage

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.

Custom formats

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

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.

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

TextareaEditor

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

Formats

Default formats.

bold

Bold text.

Examples

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

italic

Italic text.

Examples

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

strikethrough

Strikethrough text.

Examples

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

link

Insert link.

Examples

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

image

Insert image.

Examples

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

header1

Header 1.

Examples

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

header2

Header 2.

Examples

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

header3

Header 3.

Examples

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

header4

Header 4.

Examples

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

header5

Header 5.

Examples

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

header6

Header 6.

Examples

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

code

Insert code block.

Examples

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

orderedList

Ordered list.

Examples

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

unorderedList

Unordered list.

Examples

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

taskList

Task list.

Examples

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

blockquote

Blockquote.

Examples

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

License

MIT