textarea-editor
v2.1.1
Published
Simple markdown editor for textareas
Downloads
143
Readme
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
isfalse
, 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.
- Same properties as
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
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
Returns TextareaEditor
format
Format current selcetion with given format
.
Parameters
Returns TextareaEditor
unformat
Remove given format
from current selection.
Parameters
Returns TextareaEditor
hasFormat
Check if current seletion has given format.
Parameters
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