Release 4.0.0

Author: antonmedv

README.md

@@ -1,5 +1,3 @@
-<a href="https://webpod.dev/?from=codejar"><img src="https://webpod.dev/img/banner.png" alt="Webpod - deploy JavaScript apps" width="190" align="right"></a>
-
 <p align="center"><a href="https://medv.io/codejar/"><img src="https://medv.io/assets/codejar.svg" width="72"></a></p>
 <h3 align="center">CodeJar – an embeddable code editor for the browser</h3>
 <p align="center"><a href="https://medv.io/codejar/"><img src="https://medv.io/assets/codejar/screenshot.png" width="709"></a></p>
@@ -9,7 +7,7 @@
 
 ## Features
 
-* Lightweight (**2 kB** only)
+* Lightweight (**3 kB** only)
 * Preserves indentation on a new line
 * Adds closing brackets, quotes
 * Indents line with the **Tab** key
@@ -23,33 +21,25 @@ Install CodeJar 🍯 &nbsp; via npm:
 npm i codejar
 ```
 
-CodeJar 🍯 &nbsp; can be used via modules:
-
-```html
-<script type="module">
-  import {CodeJar} from 'https://medv.io/codejar/codejar.js'
-</script>
-```
-
 Create an element and init the CodeJar 🍯:
 
 ```html
 <div class="editor"></div>
 <script>
-  let jar = CodeJar(document.querySelector('.editor'), hljs.highlightElement)
+  let jar = CodeJar(document.querySelector('.editor'), highlight)
 </script>
 ```
 
-Second argument to `CodeJar` is a highlighting function (in this example [highlight.js](https://highlightjs.org)), but any function may be used:
+Second argument to `CodeJar` is a highlighting function (like Prism.js, highlight.js):
 
 ```ts
 const highlight = (editor: HTMLElement) => {
   const code = editor.textContent
-  // Do something with code and set html.
+  code = code.replace('foo', '<span style="color: red">foo</span>')
   editor.innerHTML = code
 }
 
-let jar = CodeJar(editor, highlight)
+const jar = CodeJar(editor, highlight)
 ```
 
 Third argument to `CodeJar` is options:
@@ -66,29 +56,12 @@ Third argument to `CodeJar` is options:
 
 
 ```js
-let options = {
+const 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;
-}
+const jar = CodeJar(editor, highlight, options)
 ```
 
 ## API
@@ -154,8 +127,8 @@ Removes event listeners from editor.
 
 ## Related
 
-* [react-codejar](https://github.com/guilhermelimak/react-codejar) - a react wrapper for CodeJar. 
-* [ngx-codejar](https://github.com/julianpoemp/ngx-codejar) - an angular wrapper for CodeJar. 
+* [react-codejar](https://github.com/guilhermelimak/react-codejar) - a React wrapper for CodeJar. 
+* [ngx-codejar](https://github.com/julianpoemp/ngx-codejar) - an Angular wrapper for CodeJar. 
 
 ## License
 

codejar.ts

@@ -321,22 +321,7 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P
   function handleSelfClosingCharacters(event: KeyboardEvent) {
     const open = `([{'"`
     const close = `)]}'"`
-    const codeAfter = afterCursor()
-    const codeBefore = beforeCursor()
-    const escapeCharacter = codeBefore.substr(codeBefore.length - 1) === '\\'
-    const charAfter = codeAfter.substr(0, 1)
-    if (close.includes(event.key) && !escapeCharacter && charAfter === event.key) {
-      // We already have closing char next to cursor.
-      // Move one char to right.
-      const pos = save()
-      preventDefault(event)
-      pos.start = ++pos.end
-      restore(pos)
-    } else if (
-      open.includes(event.key)
-      && !escapeCharacter
-      && (`"'`.includes(event.key) || ['', ' ', '\n'].includes(charAfter))
-    ) {
+    if (open.includes(event.key)) {
       preventDefault(event)
       const pos = save()
       const wrapText = pos.start == pos.end ? '' : getSelection().toString()
@@ -422,7 +407,7 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P
     const text = ((event as any).originalEvent || event)
       .clipboardData
       .getData('text/plain')
-      .replace(/\r/g, '')
+      .replace(/\r\n?/g, '\n')
     const pos = save()
     insert(text)
     highlight(editor)
@@ -450,18 +435,12 @@ export function CodeJar(editor: HTMLElement, highlight: (e: HTMLElement, pos?: P
 
   function visit(editor: HTMLElement, visitor: (el: Node) => 'stop' | undefined) {
     const queue: Node[] = []
-
     if (editor.firstChild) queue.push(editor.firstChild)
-
     let el = queue.pop()
-
     while (el) {
-      if (visitor(el) === 'stop')
-        break
-
+      if (visitor(el) === 'stop') break
       if (el.nextSibling) queue.push(el.nextSibling)
       if (el.firstChild) queue.push(el.firstChild)
-
       el = queue.pop()
     }
   }

demo.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CodeJar 🍯</title>
+  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      min-height: 100vh;
+      background: #F6F8F8;
+    }
+
+    main {
+      max-width: 800px;
+      margin: 40px auto;
+      padding: 20px;
+    }
+
+    .editor {
+      background: #fff;
+      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;
+      min-height: 240px;
+      letter-spacing: normal;
+      line-height: 20px;
+      padding: 10px;
+      tab-size: 4;
+    }
+  </style>
+</head>
+<body>
+<main>
+  <div class="editor" data-manual data-gramm="false"></div>
+</main>
+<script type="module">
+  import {CodeJar} from './dist/codejar.js'
+  const editor = document.querySelector('.editor')
+
+  const highlight = editor => {
+    editor.innerHTML = Prism.highlight(editor.textContent, Prism.languages.javascript, 'javascript')
+  }
+
+  const jar = CodeJar(editor, highlight, {
+    tab: '  ',
+  })
+
+  jar.updateCode(localStorage.getItem('code'))
+  jar.onUpdate(code => {
+    localStorage.setItem('code', code)
+  })
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
+</body>
+</html>