- 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
Install CodeJar ๐ฏ ย via npm:
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)
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.
- react-codejar - a React wrapper for CodeJar.
- ngx-codejar - an Angular wrapper for CodeJar.
- codejar-linenumbers - an JS library for line numbers.
Every line of code in my repositories ๐ signifies my unwavering commitment to open source ๐ก. Your support ๐ค ensures these projects keep thriving, innovating, and benefiting all ๐ผ. If my work has ever resonated ๐ต or helped you, kindly consider showing love โค๏ธ by sponsoring. ๐ Sponsor Me Today! ๐