CodeJar – an embeddable code editor for the browser
[](https://www.npmjs.com/package/codejar)
[](https://bundlephobia.com/result?p=codejar)
## 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:
```bash
npm i codejar
```
CodeJar 🍯 can be used via modules:
```html
```
Create an element and init the CodeJar 🍯:
```html
```
Second argument to `CodeJar` is a highlighting function (in this example [PrismJS](https://prismjs.com)), but any function may be used:
```ts
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.
- `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`.
```js
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:
```css
.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.
```js
jar.updateCode(`let foo = bar`)
```
#### `updateOptions(Partial)`
Updates the options.
```js
jar.updateOptions({tab: '\t'})
```
#### `onUpdate((code: string) => void)`
Calls callback on code updates.
```js
jar.onUpdate(code => {
console.log(code)
})
```
#### `toString(): string`
Return current code.
```js
let code = jar.toString()
```
#### `save(): string`
Saves current cursor position.
```js
let pos = jar.save()
```
#### `restore(pos: Position)`
Restore cursor position.
```js
jar.restore(pos)
```
#### `recordHistory()`
Saves current editor state to history.
#### `destroy()`
Removes event listeners from editor.
## Related
* [react-codejar](https://github.com/guilhermelimak/react-codejar)
## License
[MIT](LICENSE)