Repository files navigation

• Lightweight (2.45 kB only)
• No dependencies
• Preserves indentation on a new line
• Adds closing brackets, quotes
• Indents line with theTab key
• Supportsundo/redo

Install CodeJar 🍯   via npm:

npm i codejar

Create an element and init the CodeJar 🍯:

<divclass="editor"></div><script>letjar=CodeJar(document.querySelector('.editor'),highlight)</script>

Second argument toCodeJar is a highlighting function (like Prism.js, highlight.js):

consthighlight=(editor:HTMLElement)=>{constcode=editor.textContentcode=code.replace('foo','<span>foo</span>')editor.innerHTML=code}constjar=CodeJar(editor,highlight)

Third argument toCodeJar is options:

• tab: string replaces "tabs" with given string. Default:\t.
  • Note: use css ruletab-size to customize size.
• 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.
• autoclose object
  • open string characters that triggers the autoclose function
  • close string characters that correspond to the opening ones and close the object.

constoptions={tab:' '.repeat(4),// default is '\t'indentOn:/[(\[]$/,// default is /{$/autoclose:{open:`([{*`,// default is `([{'"`close:`)]}*`// default is `)]}'"`}}constjar=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.

letcode=jar.toString()

Saves current cursor position.

letpos=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.

MIT