jotdown
JotDown is a light (< 20 kb bundled and minified), minimal Markdown editor for the web. It maintains a small size by modifying existing features such as textareas instead of completely reinventing the wheel. This also makes it simpler to customize, since the majority of the editor can be styled with CSS and customized with JavaScript.
See the hosted demo.
Installation
Get the library from NPM
npm install --save @kyleplo/jotdown
Importing
This library supports usage as both an ES6 module and a CommonJS module, as directly as in the browser.
ES6
import { JotDown, bold, italic } from "@kyleplo/jotdown"
CommonJS
const { JotDown, bold, italic } = require("@kyleplo/jotdown");
CSS
Whether you use ES modules or CommonJS, make sure you also include the CSS bundle.
<link rel="stylesheet" href="./node_modules/@kyleplo/jotdown/build/bundle.min.css">
Browser
<script src="https://gh.kyleplo.com/jotdown/bundle.min.js" defer></script>
<link rel="stylesheet" href="https://gh.kyleplo.com/jotdown/bundle.min.css">
Or host bundle.min.js and bundle.min.css yourself.
Usage
Initialize the editor
const editor = new JotDown(document.querySelector("#editor"), {
// formats and other configuration
inlineFormats: [bold, italic]
});
Get the Markdown value from the editor
const value = editor.value;
Configuration
-
readonly
-Boolean
- Prevents the user from editing the text in the editor - essentially converts into a Markdown viewer - does not prevent the editor from being modified programmatically -
mayBecomeWritable
-Boolean
- Whether a readonly editor should be prepared to become writable - defaults totrue
but can save memory if disabled -
inlineFormats
,blockFormats
-Array
- Array of format objects - See Formats section - defaults to empty -
seekMemory
-Number
- Maximum distance in characters between the beginning and end of a format - defaults to 1000 characters -
highlight
-Function
- Function for syntax highlighting - called with two parameters, the code and the language - defaults toundefined
- see Elucidate for a simple syntax highlighter -
linkTarget
-String
- Value of thetarget
attribute to be put on generated links - defaults to"\_blank"
Formats
All of these formats are included in the package, but can be enabled/disabled individually. Custom formats can also be created.
const { JotDown, bold, italic } = require("@kyleplo/jotdown");
Block Formats
-
blockquote
- Begin a line with>
to format the line as a blockquote - currently cannot be nested -
codeFenced
- Surround text with three `s on each side to format as code - optional syntax highlighting by putting the programming language name after the first three `s -
codeIndent
- Begin a line with four spaces or a tab to format as code -
heading.h1
- Begin a line with#
to format as a level 1 heading -
heading.h2
- Begin a line with##
to format as a level 2 heading -
heading.h3
- Begin a line with###
to format as a level 3 heading -
heading.h4
- Begin a line with####
to format as a level 4 heading -
heading.h5
- Begin a line with#####
to format as a level 5 heading -
heading.h6
- Begin a line with######
to format as a level 6 heading -
orderedList
- Begin a line with1.
,1.
,1)
, or1)
(with any number) to format as an ordered list -
rule
- Set a line to***
,---
, or+++
to format as a horizontal rule -
unorderedList
- Begin a line with*
,-
, or+
to format as an unordered list
Inline Formats
-
autoLink
- Automatically detect links -
bold
- Surround text with**
or__
to format as bold -
code
- Surround text with ` to format as code -
highlight
- Surround text with==
to format highlighted -
image
- Formatted like this:![alt text](link)
-
italic
- Surround text with*
or_
to format as italic -
link
- Formatted like this:[label](link)
-
spoiler
- Surround text with||
to hide except when hovered -
strike
- Surround text with~~
to format crossed out -
sub
- Surround text with~
to format as subscript - only shows in readonly mode -
sup
- Surround text with^
to format as superscript - only shows in readonly mode
Properties
value
The Markdown-formatted value of the editor
const value = editor.value;
Methods
applyInlineFormat(format)
Applies an inline format at the current caret position/selection
editor.applyInlineFormat(bold);
removeInlineFormat(format)
Removes an inline format from the current caret position/selection, and returns whether the operation was successful or not.
editor.removeInlineFormat(bold);
applyBlockFormat(format)
Applies a block format at the current caret position/selection
editor.applyBlockFormat(heading.h1);
removeBlockFormat(format)
Removes an block format from the current caret position/selection, and returns whether the operation was successful or not.
editor.removeInlineFormat(heading.h1);
detectFormat(format)
Detects if a format exists at the current caret position/selection.
const isBold = editor.detectFormat(bold);
Events
change
Fires whenever the text in the editor is modified.
editor.addEventListener("change", e => {
const value = e.target.value;
});
selectionchange
Fires whenever the caret position/selection within the editor changes.
editor.addEventListener("selectionchage", e => {
const value = e.target.value;
});