CodeJar – an embeddable code editor for the browser
Features
- Lightweight (2.45 kB only)
- No dependencies
- Preserves indentation on a new line
- Adds closing brackets, quotes
- Indents line with the Tab key
- Supports undo/redo
Getting Started
Install CodeJar
npm i codejar
Create an element and init the CodeJar 🍯:
<div class="editor"></div>
<script>
let jar = CodeJar(document.querySelector('.editor'), highlight)
</script>
Second argument to CodeJar
is a highlighting function (like Prism.js, highlight.js):
const highlight = (editor: HTMLElement) => {
const code = editor.textContent
code = code.replace('foo', '<span style="color: red">foo</span>')
editor.innerHTML = code
}
const 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/[({\[]$/
. -
moveToNewLine: RegExp
checks in extra newline character need to be added. Default/^[)}\]]/
. -
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
. -
window
window object. Default:window
.
const options = {
tab: ' '.repeat(4), // default is '\t'
indentOn: /[(\[]$/, // default is /{$/
}
const jar = CodeJar(editor, highlight, options)
API
updateCode(string)
Updates the code.
jar.updateCode(`let foo = bar`)
updateOptions(Partial<Options>)
Updates the options.
jar.updateOptions({tab: '\t'})
onUpdate((code: string) => void)
Calls callback on code updates.
jar.onUpdate(code => {
console.log(code)
})
toString(): string
Return current code.
let code = jar.toString()
save(): string
Saves current cursor position.
let pos = jar.save()
restore(pos: Position)
Restore cursor position.
jar.restore(pos)
recordHistory()
Saves current editor state to history.
destroy()
Removes event listeners from editor.
Related
- react-codejar - a React wrapper for CodeJar.
- ngx-codejar - an Angular wrapper for CodeJar.