autopair 1.2.2 → 1.2.4

package/README.md

@@ -63,6 +63,10 @@ npm install autopair
 </script>
 ```
 
+## Contributing
+
+Report issues on the [Veritula issue tracker](https://veritula.com/discussions/autopair-js). Do not submit issues on GitHub.
+
 ## Development
 
 Run a webserver and open `index.html`.

package/cypress/e2e/autopair.cy.js

@@ -15,7 +15,11 @@ describe('autopair', () => {
     cy.get('textarea').type('(');
 
     // Check result
-    cy.get('textarea').should('have.value', '(hello)');
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq('(hello)');
+      expect($el[0].selectionStart).to.eq(6); // cursor after )
+      expect($el[0].selectionEnd).to.eq(6);
+    });
   });
 
   it('types through closing character', () => {
@@ -93,6 +97,7 @@ describe('autopair', () => {
     cy.get('textarea').then($el => {
       expect($el.val()).to.eq('();');
       expect($el[0].selectionStart).to.eq(1);
+      expect($el[0].selectionEnd).to.eq(1);
     });
   });
 
@@ -115,6 +120,7 @@ describe('autopair', () => {
     cy.get('textarea').then($el => {
       expect($el.val()).to.eq('(.');
       expect($el[0].selectionStart).to.eq(1);
+      expect($el[0].selectionEnd).to.eq(1);
     });
   });
 
@@ -128,6 +134,7 @@ describe('autopair', () => {
     cy.get('textarea').then($el => {
       expect($el.val()).to.eq('((()))');
       expect($el[0].selectionStart).to.eq(3); // cursor inside the innermost pair
+      expect($el[0].selectionEnd).to.eq(3);
     });
   });
 
@@ -141,6 +148,7 @@ describe('autopair', () => {
     cy.get('textarea').then($el => {
       expect($el.val()).to.eq("''");
       expect($el[0].selectionStart).to.eq(1); // cursor inside
+      expect($el[0].selectionEnd).to.eq(1);
     });
 
     // Move cursor to the end
@@ -156,37 +164,92 @@ describe('autopair', () => {
     cy.get('textarea').then($el => {
       expect($el.val()).to.eq("'''");
       expect($el[0].selectionStart).to.eq(3); // cursor after last '
+      expect($el[0].selectionEnd).to.eq(3);
     });
   });
 
-  it('handles custom pairing correctly', () => {
+  it('autopairs existing custom quotes “ and ”', () => {
     cy.visit('/index.html');
 
-    // Inject autopair immediately
-    cy.document().then(doc => {
-      const script = doc.createElement('script');
-      script.type = 'module';
-      script.textContent = `
-        import autopair from './autopair.js';
-        autopair(document.querySelector('textarea'), {
-          '(': ')',
-          '[': ']',
-          '{': '}',
-          "'": "'",
-          '"': '"',
-          '<': '>'
-        });
-      `;
-      doc.body.appendChild(script);
-    });
-
-    // Type <
-    cy.get('textarea').type('<');
-
-    // Should autopair to <>
-    cy.get('textarea').then($el => {
-      expect($el.val()).to.eq('<>');
-      expect($el[0].selectionStart).to.eq(1);
+    // Type opening custom quote
+    cy.get('textarea').type('“');
+
+    // Should autopair to “”
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq('“”');
+      expect($el[0].selectionStart).to.eq(1); // cursor inside
+      expect($el[0].selectionEnd).to.eq(1);
+    });
+  });
+
+  it('supports undo and redo after typing a pair', () => {
+    cy.visit('/index.html');
+
+    // Type a pair
+    cy.get('textarea').type('()');
+
+    // Undo
+    cy.get('textarea').then($el => {
+      $el[0].ownerDocument.execCommand('undo');
+    });
+    cy.get('textarea').should('have.value', '');
+
+    // Redo
+    cy.get('textarea').then($el => {
+      $el[0].ownerDocument.execCommand('redo');
+    });
+    cy.get('textarea').should('have.value', '()');
+  });
+
+  it('does not autopair a symmetric character behind a word character', () => {
+    cy.visit('/index.html');
+
+    cy.get('textarea').type('hello');
+    cy.get('textarea').type("'");
+
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq("hello'");
+      expect($el[0].selectionStart).to.eq(6);
+      expect($el[0].selectionEnd).to.eq(6);
+    });
+  });
+
+  it('does autopair a symmetric character behind a non-word character', () => {
+    cy.visit('/index.html');
+
+    cy.get('textarea').type('hello.');
+    cy.get('textarea').type("'");
+
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq("hello.''");
+      expect($el[0].selectionStart).to.eq(7);
+      expect($el[0].selectionEnd).to.eq(7);
+    });
+  });
+
+  it('does autopair a symmetric character behind a newline', () => {
+    cy.visit('/index.html');
+
+    cy.get('textarea').type('\n');
+    cy.get('textarea').type("'");
+
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq("\n''");
+      expect($el[0].selectionStart).to.eq(2);
+      expect($el[0].selectionEnd).to.eq(2);
+    });
+  });
+
+  it('does autopair an asymmetric character behind a word character', () => {
+    cy.visit('/index.html');
+
+    cy.get('textarea').type('hello');
+    cy.get('textarea').type("(");
+
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq("hello()");
+      expect($el[0].selectionStart).to.eq(6);
+      expect($el[0].selectionEnd).to.eq(6);
     });
   });
-});
+ });

package/package.json

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

package/src/autopair.js

@@ -5,32 +5,38 @@ export default function autopair(textarea, pairs = {
   "'": "'",
   '"': '"'
 }) {
+  let openings = Object.keys(pairs);
+  let closings = Object.values(pairs);
+
+  let insertText = text => document.execCommand('insertText', false, text);
+  let setCursor = pos => {
+    textarea.selectionStart = textarea.selectionEnd = pos;
+  };
+
   let handler = evt => {
-    const { selectionStart: start, selectionEnd: end, value } = textarea;
+    let { selectionStart: start, selectionEnd: end, value } = textarea;
 
     // Typethrough
-    if (start === end) {
-      const next = value[end];
-      const isClosing = Object.values(pairs).includes(evt.key);
-
-      if (isClosing && next === evt.key) {
-        evt.preventDefault();
-        textarea.selectionStart = textarea.selectionEnd = end + 1;
-        return;
-      }
+    if (start === end && closings.includes(evt.key) && value[end] === evt.key) {
+      evt.preventDefault();
+      setCursor(end + 1);
+      return;
     }
 
     // Handle backspace inside a direct pair
     if (evt.key === 'Backspace' && start === end && start > 0) {
-      const left = value[start - 1];
-      const right = value[start];
-      const opening = Object.keys(pairs).find(k => pairs[k] === right);
+      let left = value[start - 1];
+      let right = value[start];
+      let opening = openings.find(k => pairs[k] === right);
+
       if (left === opening) {
         evt.preventDefault();
+
         // Select the pair and delete in one go
         textarea.selectionStart = start - 1;
         textarea.selectionEnd = start + 1;
-        document.execCommand('insertText', false, '');
+
+        insertText('');
 
         return;
       }
@@ -38,7 +44,7 @@ export default function autopair(textarea, pairs = {
       return; // normal backspace
     }
 
-    const closing = pairs[evt.key];
+    let closing = pairs[evt.key];
     if (!closing) return;
 
     // Wrap selection if present
@@ -46,28 +52,28 @@ export default function autopair(textarea, pairs = {
       evt.preventDefault();
       textarea.selectionStart = start;
       textarea.selectionEnd = end;
-      document.execCommand('insertText', false, evt.key + value.slice(start, end) + closing);
-      textarea.selectionStart = start + 1;
-      textarea.selectionEnd = end + 1;
+      insertText(evt.key + value.slice(start, end) + closing);
+      setCursor(end + 1);
+
       return;
     }
 
-    const nextCharWhitelist = /[\s;})\]]/;
-    const nextChar = value[end] || '';
-    const prevChar = value[start - 1] || '';
-    const insidePair = closing === nextChar;
-    const safeNext = nextChar === '' || nextCharWhitelist.test(nextChar);
-    const isSymmetric = evt.key === closing;
+    let nextCharWhitelist = /[\s;})\]]/;
+    let nextChar = value[end] || '';
+    let prevChar = value[start - 1] || '';
+    let insidePair = closing === nextChar;
+    let safeNext = nextChar === '' || nextCharWhitelist.test(nextChar);
+    let isSymmetric = evt.key === closing;
 
     // Autoclose only when allowed
-    if (!insidePair && (!safeNext || (isSymmetric && start === end && prevChar === evt.key))) {
+    if (!insidePair && (!safeNext || (isSymmetric && (start !== end || prevChar === evt.key || /\w/.test(prevChar))))) {
       return;
     }
 
     evt.preventDefault();
-    textarea.selectionStart = textarea.selectionEnd = start;
-    document.execCommand('insertText', false, evt.key + closing);
-    textarea.selectionStart = textarea.selectionEnd = start + 1;
+
+    insertText(evt.key + closing);
+    setCursor(start + 1);
   };
 
   textarea.addEventListener('keydown', handler);