merge dev

README.md

@@ -1,3 +1,113 @@
 <p align="center"><a href="https://medv.io/codejar/"><img src="https://medv.io/assets/codejar.svg" width="72"></a></p>
-<h1 align="center">CodeJar</h1>
+<h3 align="center">CodeJar – a micro code editor</h3>
 <p align="center"><a href="https://medv.io/codejar/"><img src="https://medv.io/assets/codejar/screenshot.png" width="709"></a></p>
+
+## Getting Started
+
+Install CodeJar 🍯via npm:
+
+```bash
+npm i @medv/codejar
+```
+
+CodeJar 🍯 can be used via modules:
+
+```html
+<script type="module">
+  import {CodeJar} from 'https://medv.io/codejar/codejar.js'
+</script>
+```
+
+Create element and init:
+
+```html
+<div class="editor"></div>
+<script>
+  let jar = new CodeJar(document.querySelector('.editor'), Prism.highlightElement)
+</script>
+```
+
+Second argument to `CodeJar` is highligting 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 = new CodeJar(editor, highlight)
+```
+
+Third argument to `CodeJar` is options:
+
+```js
+let options = {
+  tab: ' '.repeat(4), // default is \t
+}
+
+let jar = new 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<Options>)`
+
+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()
+```
+
+#### `destroy()`
+
+Removes event listeners from editor.
+
+
+# License
+
+[MIT](LICENSE)

codejar.ts

@@ -5,6 +5,7 @@ type Options = {
 export class CodeJar {
   private readonly editor: HTMLElement
   private readonly highlight: (e: HTMLElement) => {}
+  private readonly listeners: [string, any][] = []
   private options: Options
   private history: HistoryRecord[] = []
   private historyPointer = -1
@@ -34,7 +35,12 @@ export class CodeJar {
       this.restore(pos)
     }, 30)
 
-    this.editor.addEventListener('keydown', event => {
+    const on = <K extends keyof HTMLElementEventMap>(type: K, fn: (event: HTMLElementEventMap[K]) => void) => {
+      this.listeners.push([type, fn])
+      this.editor.addEventListener(type, fn)
+    }
+
+    on('keydown', event => {
       if (event.key === 'Enter') {
         this.handleNewLine(event)
       } else if (event.key === 'Tab') {
@@ -47,29 +53,31 @@ export class CodeJar {
       }
     })
 
-    this.editor.addEventListener('keyup', event => {
+    on('keyup', event => {
       debounceHighlight()
       this.recordHistory()
+      if (this.callback) this.callback(this.toString())
     })
 
-    this.editor.addEventListener('focus', event => {
+    on('focus', event => {
       this.focus = true
       this.recordHistory()
     })
 
-    this.editor.addEventListener('blur', event => {
+    on('blur', event => {
       this.focus = false
     })
 
-    this.editor.addEventListener('paste', event => {
+    on('paste', event => {
       this.handlePaste(event)
+      if (this.callback) this.callback(this.toString())
     })
+  }
 
-    this.editor.addEventListener('input', event => {
-      if (this.callback) {
-        this.callback(this.toString())
-      }
-    })
+  destroy() {
+    for (let [type, fn] of this.listeners) {
+      this.editor.removeEventListener(type, fn)
+    }
   }
 
   private save(): Position {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "codejar",
+  "name": "@medv/codejar",
   "version": "1.0.0",
   "description": "Micro code editor",
   "license": "MIT",