CodeJar – an embeddable code editor for the browser

CodeJar-Async is a fork of CodeJar with async highlighting support.

Features

• Lightweight (2.5 kB only)
• No dependencies
• Preserves indentation on a new line
• Adds closing brackets, quotes
• Indents line with the Tab key
• Supports undo/redo
• Async highlighting (${\color{red}NEW}$)

Getting Started

Install CodeJar-Async 🍯   via npm:

npm i codejar-async

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 an async highlighting function (like Prism.js, highlight.js):

const highlight = async (editor: HTMLElement): string => {
  const code = editor.textContent
  return code.replace('foo', '<span style="color: red">foo</span>')
}

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.
• 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.

const options = {
  tab: ' '.repeat(4), // default is '\t'
}

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)
})

onHighlight((editor: HTMLElement) => void)

Calls callback after the async highlighting is done.

jar.onHighlight(editor => {
  console.log(editor.innerHTML)
})

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.
• codejar-linenumbers - an JS library for line numbers.

License

MIT