Merge pull request #22 from github/use_key_length_in_query

Fix support for multiWord queries with activations keys longer than than 1 character

src/query.ts

@@ -34,12 +34,12 @@ export default function query(
       // If the current activation key is the same as last match
       // i.e. consecutive activation keys, then return.
       if (lastMatchPosition === keyIndex) return
-      keyIndex = lastMatchPosition - 1
+      keyIndex = lastMatchPosition - key.length
     }
 
     // Space immediately after activation key followed by the cursor
     const charAfterKey = text[keyIndex + 1]
-    if (charAfterKey === ' ' && cursor >= keyIndex + 2) return
+    if (charAfterKey === ' ' && cursor >= keyIndex + key.length + 1) return
 
     // New line the cursor and previous activation key.
     const newLineIndex = text.lastIndexOf('\n', cursor - 1)

test/text-expander-element-test.js

@@ -16,7 +16,7 @@ describe('text-expander element', function() {
     beforeEach(function() {
       const container = document.createElement('div')
       container.innerHTML = `
-        <text-expander keys=": @">
+        <text-expander keys=": @ [[">
           <textarea></textarea>
         </text-expander>
       `
@@ -32,7 +32,8 @@ describe('text-expander element', function() {
       assert.deepEqual(
         [
           {key: ':', multiWord: false},
-          {key: '@', multiWord: false}
+          {key: '@', multiWord: false},
+          {key: '[[', multiWord: false}
         ],
         expander.keys
       )
@@ -68,13 +69,34 @@ describe('text-expander element', function() {
       await waitForAnimationFrame()
       assert.isNull(expander.querySelector('ul'))
     })
+
+    it('dispatches change events for 2 char activation keys', async function() {
+      const expander = document.querySelector('text-expander')
+      const input = expander.querySelector('textarea')
+
+      const receivedText = []
+      const expectedText = ['', 'a', 'ab', 'abc', 'abcd']
+
+      expander.addEventListener('text-expander-change', event => {
+        const {key, text} = event.detail
+        assert.equal('[[', key)
+        receivedText.push(text)
+      })
+      triggerInput(input, '[[')
+      triggerInput(input, '[[a')
+      triggerInput(input, '[[ab')
+      triggerInput(input, '[[abc')
+      triggerInput(input, '[[abcd')
+
+      assert.deepEqual(receivedText, expectedText)
+    })
   })
 
   describe('multi-word scenarios', function() {
     beforeEach(function() {
       const container = document.createElement('div')
       container.innerHTML = `
-        <text-expander keys="@ #" multiword="#">
+        <text-expander keys="@ # [[" multiword="# [[">
           <textarea></textarea>
         </text-expander>
       `
@@ -90,7 +112,8 @@ describe('text-expander element', function() {
       assert.deepEqual(
         [
           {key: '@', multiWord: false},
-          {key: '#', multiWord: true}
+          {key: '#', multiWord: true},
+          {key: '[[', multiWord: true}
         ],
         expander.keys
       )
@@ -107,6 +130,28 @@ describe('text-expander element', function() {
       assert.equal('some text', text)
     })
 
+    it('dispatches change events for 2 char activation keys for multi-word', async function() {
+      const expander = document.querySelector('text-expander')
+      const input = expander.querySelector('textarea')
+
+      const receivedText = []
+      const expectedText = ['', 'a', 'ab', 'abc', 'abcd', 'abcd def']
+
+      expander.addEventListener('text-expander-change', event => {
+        const {key, text} = event.detail
+        assert.equal('[[', key)
+        receivedText.push(text)
+      })
+      triggerInput(input, '[[')
+      triggerInput(input, '[[a')
+      triggerInput(input, '[[ab')
+      triggerInput(input, '[[abc')
+      triggerInput(input, '[[abcd')
+      triggerInput(input, '[[abcd def')
+
+      assert.deepEqual(receivedText, expectedText)
+    })
+
     it('dispatches change event for single word match after multi-word', async function() {
       const expander = document.querySelector('text-expander')
       const input = expander.querySelector('textarea')