CodeJar โ an embeddable code editor for the browser
Features
- Lightweight (2 kB only)
- 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
CodeJar
<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'), hljs.highlightElement)
</script>
Second argument to CodeJar
is a highlighting function (in this example highlight.js), 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/[({\[]$/
.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
.
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;
}
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.