autopair 1.2.1 → 1.2.2

package/cypress/e2e/autopair.cy.js

@@ -0,0 +1,192 @@
+describe('autopair', () => {
+  it('wraps selected text in parentheses when "(" is typed', () => {
+    cy.visit('/index.html');
+
+    // Type some text
+    cy.get('textarea').type('hello');
+
+    // Select all text
+    cy.get('textarea').then($el => {
+      $el[0].selectionStart = 0;
+      $el[0].selectionEnd = $el.val().length;
+    });
+
+    // Type "(" to wrap selection
+    cy.get('textarea').type('(');
+
+    // Check result
+    cy.get('textarea').should('have.value', '(hello)');
+  });
+
+  it('types through closing character', () => {
+    cy.visit('/index.html');
+
+    // Type a pair
+    cy.get('textarea').type('()');
+
+    // Move cursor between the parentheses
+    cy.get('textarea').then($el => {
+      $el[0].selectionStart = 1;
+      $el[0].selectionEnd = 1;
+    });
+
+    // Type ")" to test typethrough
+    cy.get('textarea').type(')');
+
+    // Value should be unchanged, cursor moves past
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq('()');
+      expect($el[0].selectionStart).to.eq(2); // cursor after )
+      expect($el[0].selectionEnd).to.eq(2);
+    });
+  });
+
+  it('atomically deletes a pair', () => {
+    cy.visit('/index.html');
+
+    // Type a pair
+    cy.get('textarea').type('()');
+
+    // Move cursor between the parentheses
+    cy.get('textarea').then($el => {
+      $el[0].selectionStart = 1;
+      $el[0].selectionEnd = 1;
+    });
+
+    // Press Backspace
+    cy.get('textarea').type('{backspace}');
+
+    // Both characters should be deleted
+    cy.get('textarea').should('have.value', '');
+  });
+
+  it('automatically inserts closing parenthesis when "(" is typed', () => {
+    cy.visit('/index.html');
+
+    // Type opening parenthesis
+    cy.get('textarea').type('(');
+
+    // Should insert closing parenthesis and place cursor between
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq('()');
+      expect($el[0].selectionStart).to.eq(1);
+      expect($el[0].selectionEnd).to.eq(1);
+    });
+  });
+
+  it('autopairs before a whitelisted character', () => {
+    cy.visit('/index.html');
+
+    // Type a semicolon
+    cy.get('textarea').type(';');
+
+    // Move cursor before the semicolon
+    cy.get('textarea').then($el => {
+      $el[0].selectionStart = 0;
+      $el[0].selectionEnd = 0;
+    });
+
+    // Type "("
+    cy.get('textarea').type('(');
+
+    // Should autopair
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq('();');
+      expect($el[0].selectionStart).to.eq(1);
+    });
+  });
+
+  it('does not autopair before a non-whitelisted character', () => {
+    cy.visit('/index.html');
+
+    // Type a period
+    cy.get('textarea').type('.');
+
+    // Move cursor before the period
+    cy.get('textarea').then($el => {
+      $el[0].selectionStart = 0;
+      $el[0].selectionEnd = 0;
+    });
+
+    // Type "("
+    cy.get('textarea').type('(');
+
+    // Should NOT autopair
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq('(.');
+      expect($el[0].selectionStart).to.eq(1);
+    });
+  });
+
+  it('autopairs multiple opening parentheses correctly', () => {
+    cy.visit('/index.html');
+
+    // Type three opening parentheses
+    cy.get('textarea').type('(((');
+
+    // Should result in three closing parentheses as well
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq('((()))');
+      expect($el[0].selectionStart).to.eq(3); // cursor inside the innermost pair
+    });
+  });
+
+  it('does not autopair symmetric characters after an existing pair', () => {
+    cy.visit('/index.html');
+
+    // Type a single 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
+    });
+
+    // Move cursor to the end
+    cy.get('textarea').then($el => {
+      $el[0].selectionStart = $el.val().length;
+      $el[0].selectionEnd = $el.val().length;
+    });
+
+    // Type another single quote
+    cy.get('textarea').type("'");
+
+    // Should NOT autopair again
+    cy.get('textarea').then($el => {
+      expect($el.val()).to.eq("'''");
+      expect($el[0].selectionStart).to.eq(3); // cursor after last '
+    });
+  });
+
+  it('handles custom pairing correctly', () => {
+    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);
+    });
+  });
+});

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/e2e.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

package/cypress.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autopair",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Automatically closes parentheses and similar characters.",
   "main": "src/autopair.js",
   "author": "Dennis Hackethal <engineering@dennishackethal.com>",
@@ -34,5 +34,11 @@
     "input",
     "javascript",
     "web"
-  ]
+  ],
+  "devDependencies": {
+    "cypress": "^15.9.0"
+  },
+  "scripts": {
+    "test": "npx cypress run"
+  }
 }

package/src/autopair.js

@@ -41,9 +41,6 @@ export default function autopair(textarea, pairs = {
     const closing = pairs[evt.key];
     if (!closing) return;
 
-    const isWordChar = /[\w]/;
-    const punctuation = /[;,.})\]]/;
-
     // Wrap selection if present
     if (start !== end) {
       evt.preventDefault();
@@ -55,28 +52,15 @@ export default function autopair(textarea, pairs = {
       return;
     }
 
+    const nextCharWhitelist = /[\s;})\]]/;
     const nextChar = value[end] || '';
     const prevChar = value[start - 1] || '';
-
     const insidePair = closing === nextChar;
-    const safeNext = !isWordChar.test(nextChar) || punctuation.test(nextChar);
+    const safeNext = nextChar === '' || nextCharWhitelist.test(nextChar);
     const isSymmetric = evt.key === closing;
 
     // Autoclose only when allowed
-    if (
-      !insidePair &&
-      (
-        !safeNext ||
-        (
-          isSymmetric &&
-          start === end &&
-          (
-            isWordChar.test(prevChar) || // end of word
-            prevChar === evt.key         // repeated quote
-          )
-        )
-      )
-    ) {
+    if (!insidePair && (!safeNext || (isSymmetric && start === end && prevChar === evt.key))) {
       return;
     }