textarea-editor
Simple markdown editor for textareas, without a UI. Inspired by Github's comment editor.
Usage
;const textarea = document;const editor = textarea; editor;editor;editor;; editor;editor;;
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
textareavalue = 'Hello\nWorld'; const orderedList = block: true multiline: true prefix: `. ` pattern: '[0-9]+\\. ' ; editoreditor;;
Simple formats can be defined by giving .prefix
and .suffix
a string value.
textareavalue = 'Hello World';editor;editor;;
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;
italic
Italic text.
Examples
editor;
strikethrough
Strikethrough text.
Examples
editor;
link
Insert link.
Examples
editor;
image
Insert image.
Examples
editor;
header1
Header 1.
Examples
editor;
header2
Header 2.
Examples
editor;
header3
Header 3.
Examples
editor;
header4
Header 4.
Examples
editor;
header5
Header 5.
Examples
editor;
header6
Header 6.
Examples
editor;
code
Insert code block.
Examples
editor;
orderedList
Ordered list.
Examples
editor;
unorderedList
Unordered list.
Examples
editor;
taskList
Task list.
Examples
editor;
blockquote
Blockquote.
Examples
editor;
License
MIT