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 🍯 via npm:

npm i codejar

CodeJar 🍯 can be used via modules:

<scripttype="module">import{CodeJar}from'https://medv.io/codejar/codejar.js'</script>

Create an element and init the CodeJar 🍯:

<divclass="editor"></div><script>letjar=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:

consthighlight=(editor: HTMLElement)=>{constcode=editor.textContent// Do something with code and set html.editor.innerHTML=code}letjar=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.
• 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. Default false.
• catchTab: boolean catches Tab keypress events and replaces it with tab string. Default: true.
• preserveIdent: boolean keeps indent levels on new line. Default true.
• addClosing: boolean automatically adds closing brackets, quotes. Default true.
• history records history. Default true.
• window window object. Default: window.

letoptions={tab: ' '.repeat(4),// default is '\t'indentOn: /[(\[]$/,// default is /{$/}letjar=CodeJar(editor,highlight,options)

Some styles may be applied to our editor to make it better looking:

.editor {
border-radius:6px;
box-shadow:02px2px0rgba(0,0,0,0.14),01px5px0rgba(0,0,0,0.12),03px1px-2pxrgba(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.

letcode=jar.toString()

save(): string

Saves current cursor position.

letpos=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 weapper for CodeJar.
• ngx-codejar - an angular wrapper for CodeJar.

License

MIT