codejar
TypeScript icon, indicating that this package has built-in type declarations

4.2.0 • Public • Published

CodeJar – an embeddable code editor for the browser

npm npm bundle size

Features

  • 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

Getting Started

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.
  • 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. 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'
  indentOn: /[(\[]$/, // default is /{$/
}

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

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

License

MIT

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
4.2.07,687latest

Version History

VersionDownloads (Last 7 Days)Published
4.2.07,687
4.1.27
4.1.150
4.1.02
4.0.01
3.7.01,707
3.6.0195
3.5.041
3.4.09
3.3.04
3.2.386
3.2.250
3.2.11
3.2.02
3.1.01
3.0.04
2.0.09
1.0.15
1.0.03

Package Sidebar

Install

npm i codejar

Weekly Downloads

9,864

Version

4.2.0

License

MIT

Unpacked Size

25.3 kB

Total Files

7

Last publish

Collaborators

  • medv