autopair 1.0.2 → 1.1.0

package/README.md

@@ -5,9 +5,20 @@ Lightweight autopairing + typethrough behavior for HTML `input[type=text]` and `
 ## Features
 
 1. Automatically closes parentheses, brackets, curly braces, single quotes, and double quotes.
+
+   ![Automatically close parentheses](./images/autoclose.gif)
+
 2. Wraps selected text. For example, selecting a word and hitting `(` will wrap the word in parentheses.
+
+   ![Wrap selected text](./images/wrap.gif)
+
 3. Atomically removes pairings. For example, when hitting backspace inside `()`, both characters are removed.
-4. Types through closing characters. For example, hitting `]` in front of an already typed `]` simply moves the cursor past it.
+
+   ![Atomically remove pairings](./images/remove.gif)
+
+4. Types through closing characters. For example, hitting `)` in front of an already typed `)` simply moves the cursor past it.
+
+   ![Type through closing characters](./images/typethrough.gif)
 
 ## Installation
 
@@ -18,8 +29,12 @@ npm install autopair
 ## Usage
 
 ```html
-<script src="path/to/autopair.js"></script>
-<script>
+<textarea id="editor"></textarea>
+
+<script type="module">
+  import autopair from '/path/to/autopair.js';
+
+  // Use the autopair module
   const textarea = document.getElementById('editor');
 
   // Autopair with default pairings:
@@ -41,6 +56,10 @@ npm install autopair
     '“': '”',
     '*': '*' // For markdown italics
   });
+
+  // Teardown, ie remove autopair.js functionality
+  let teardown = autopair(textarea);
+  teardown();
 </script>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autopair",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Automatically closes parentheses and similar characters.",
   "main": "index.js",
   "author": "Dennis Hackethal <engineering@dennishackethal.com>",

package/src/autopair.js

@@ -5,7 +5,7 @@ export default function autopair(textarea, pairs = {
   "'": "'",
   '"': '"'
 }) {
-  textarea.addEventListener('keydown', (evt) => {
+  let handler = evt => {
     const { selectionStart: start, selectionEnd: end, value } = textarea;
 
     // Typethrough
@@ -65,5 +65,11 @@ export default function autopair(textarea, pairs = {
     textarea.selectionStart = textarea.selectionEnd = start;
     document.execCommand('insertText', false, evt.key + closing);
     textarea.selectionStart = textarea.selectionEnd = start + 1;
-  });
+  };
+
+  textarea.addEventListener('keydown', handler);
+
+  return () => {
+    textarea.removeEventListener('keydown', handler);
+  };
 }