Skip to content

Latest commit

 

History

History
135 lines (96 loc) · 3.09 KB

README.md

File metadata and controls

135 lines (96 loc) · 3.09 KB
Raw

CodeJar – an embeddable code editor for the browser

npm npm bundle size

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:

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

Create an element and init the CodeJar 🍯:

<div class="editor"></div>
<script>
  let jar = 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:

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
  • addClosing: boolean automatically adds closing brackets, quotes. Default true
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:

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

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

destroy()

Removes event listeners from editor.

Related

License

MIT