- Lightweight (2 kB only)
- Preserves indentation on a new line
- Adds closing brackets, quotes
- Indents line with the Tab key
- Supports undo/redo
Install CodeJar 🍯 via npm:
npm i codejar
CodeJar 🍯 can be used via modules:
<script type="module">
import {CodeJar} from 'https://medv.io/codejar/codejar.js'
</script>
Create an element and init the CodeJar 🍯:
<div class="editor"></div>
<script>
let jar = CodeJar(document.querySelector('.editor'), Prism.highlightElement)
</script>
Second argument to CodeJar
is a highlighting function (in this example PrismJS), but any function may be used:
const highlight = (editor: HTMLElement) => {
const code = editor.textContent
// Do something with code and set html.
editor.innerHTML = code
}
let jar = CodeJar(editor, highlight)
Third argument to CodeJar
is options:
tab: string
replaces "tabs" with given string. Default:\t
.- Note: use css rule
tab-size
to customize size.
- Note: use css rule
indentOn: RegExp
allows auto indent rule to be customized. Default{$
.- Auto-tab if the text before cursor match the given regex while pressing Enter.
spellcheck: boolean
enables spellchecking on the editor. Defaultfalse
.catchTab: boolean
catches Tab keypress events and replaces it withtab
string. Default:true
.preserveIdent: boolean
keeps indent levels on new line. Defaulttrue
.addClosing: boolean
automatically adds closing brackets, quotes. Defaulttrue
.history
records history. Defaulttrue
.
let options = {
tab: ' '.repeat(4), // default is '\t'
indentOn: /[(\[]$/, // default is /{$/
}
let jar = CodeJar(editor, highlight, options)
Some styles may be applied to our editor to make it better looking:
.editor {
border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-family: 'Source Code Pro', monospace;
font-size: 14px;
font-weight: 400;
height: 340px;
letter-spacing: normal;
line-height: 20px;
padding: 10px;
tab-size: 4;
}
Updates the code.
jar.updateCode(`let foo = bar`)
Updates the options.
jar.updateOptions({tab: '\t'})
Calls callback on code updates.
jar.onUpdate(code => {
console.log(code)
})
Return current code.
let code = jar.toString()
Saves current cursor position.
let pos = jar.save()
Restore cursor position.
jar.restore(pos)
Saves current editor state to history.
Removes event listeners from editor.