add emoji autosuggest

routes/_actions/emoji.js

@@ -25,3 +25,21 @@ export function insertEmoji (realm, emoji) {
   let newText = `${pre}:${emoji.shortcode}: ${post}`
   store.setComposeData(realm, {text: newText})
 }
+
+export function insertEmojiAtPosition (realm, emoji, startIndex, endIndex) {
+  let oldText = store.getComposeData(realm, 'text')
+  let pre = oldText ? substring(oldText, 0, startIndex) : ''
+  let post = oldText ? substring(oldText, endIndex) : ''
+  let newText = `${pre}:${emoji.shortcode}: ${post}`
+  store.setComposeData(realm, {text: newText})
+}
+
+export async function clickSelectedAutosuggestionEmoji (realm) {
+  let selectionStart = store.get('composeSelectionStart')
+  let searchText = store.get('composeAutosuggestionSearchText')
+  let selection = store.get('composeAutosuggestionSelected') || 0
+  let emoji = store.get('composeAutosuggestionSearchResults')[selection]
+  let startIndex = selectionStart - searchText.length
+  let endIndex = selectionStart
+  await insertEmojiAtPosition(realm, emoji, startIndex, endIndex)
+}

routes/_components/compose/ComposeAutosuggest.html

@@ -2,7 +2,8 @@
      aria-hidden="true" >
   <ComposeAutosuggestionList
     items="{{searchResults}}"
-    on:click="onUserSelected(event)"
+    on:click="onClick(event)"
+    :type
     :selected
   />
 </div>
@@ -32,6 +33,7 @@
   import { store } from '../../_store/store'
   import { database } from '../../_database/database'
   import { insertUsername } from '../../_actions/compose'
+  import { insertEmojiAtPosition } from '../../_actions/emoji'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { once } from '../../_utils/once'
   import ComposeAutosuggestionList from './ComposeAutosuggestionList.html'
@@ -39,7 +41,8 @@
   const SEARCH_RESULTS_LIMIT = 4
   const DATABASE_SEARCH_RESULTS_LIMIT = 30
   const MIN_PREFIX_LENGTH = 1
-  const SEARCH_REGEX = new RegExp(`(?:\\s|^)(@\\S{${MIN_PREFIX_LENGTH},})$`)
+  const ACCOUNT_SEARCH_REGEX = new RegExp(`(?:\\s|^)(@\\S{${MIN_PREFIX_LENGTH},})$`)
+  const EMOJI_SEARCH_REGEX = new RegExp(`(?:\\s|^)(:[^:]{${MIN_PREFIX_LENGTH},})$`)
 
   export default {
     oncreate() {
@@ -63,7 +66,7 @@
         } else {
           Promise.race([
             new Promise(resolve => setTimeout(resolve, 200)),
-            new Promise(resolve => this.once('userSelected', resolve))
+            new Promise(resolve => this.once('autosuggestItemSelected', resolve))
           ]).then(updateFocusedState)
         }
       })
@@ -71,11 +74,15 @@
         if (!searchText) {
           return
         }
-        let results = await this.search(searchText)
+        let type = searchText.startsWith('@') ? 'account' : 'emoji'
+        let results = (type === 'account')
+          ? await this.searchAccounts(searchText)
+          : await this.searchEmoji(searchText)
         this.store.set({
           composeAutosuggestionSelected: 0,
           composeAutosuggestionSearchText: searchText,
-          composeAutosuggestionSearchResults: results
+          composeAutosuggestionSearchResults: results,
+          composeAutosuggestionType: type,
         })
       })
       this.observe('shown', shown => {
@@ -84,26 +91,41 @@
     },
     methods: {
       once: once,
-      onUserSelected(account) {
-        this.fire('userSelected')
+      onClick(item) {
+        this.fire('autosuggestItemSelected')
         let realm = this.get('realm')
         let selectionStart = this.store.get('composeSelectionStart')
         let searchText = this.store.get('composeAutosuggestionSearchText')
         let startIndex = selectionStart - searchText.length
         let endIndex = selectionStart
-        /* no await */ insertUsername(realm, account.acct, startIndex, endIndex)
+        if (item.acct) {
+          /* no await */ insertUsername(realm, item.acct, startIndex, endIndex)
+        } else {
+          /* no await */ insertEmojiAtPosition(realm, item, startIndex, endIndex)
+        }
+
       },
-      async search(searchText) {
+      async searchAccounts(searchText) {
+        searchText = searchText.substring(1)
         let currentInstance = this.store.get('currentInstance')
         let results = await database.searchAccountsByUsername(
-          currentInstance, searchText.substring(1), DATABASE_SEARCH_RESULTS_LIMIT)
+          currentInstance, searchText, DATABASE_SEARCH_RESULTS_LIMIT)
         return results.slice(0, SEARCH_RESULTS_LIMIT)
+      },
+      searchEmoji(searchText) {
+        searchText = searchText.toLowerCase().substring(1)
+        let customEmoji = this.store.get('currentCustomEmoji')
+        let results = customEmoji.filter(emoji => emoji.shortcode.toLowerCase().startsWith(searchText))
+          .sort((a, b) => a.shortcode.toLowerCase() < b.shortcode.toLowerCase() ? -1 : 1)
+          .slice(0, SEARCH_RESULTS_LIMIT)
+        return results
       }
     },
     computed: {
       composeSelectionStart: ($composeSelectionStart) => $composeSelectionStart,
       composeFocused: ($composeFocused) => $composeFocused,
       searchResults: ($composeAutosuggestionSearchResults) => $composeAutosuggestionSearchResults || [],
+      type: ($composeAutosuggestionType) => $composeAutosuggestionType || 'account',
       selected: ($composeAutosuggestionSelected) => $composeAutosuggestionSelected || 0,
       searchText: (text, composeSelectionStartDeferred) => {
         let selectionStart = composeSelectionStartDeferred || 0
@@ -111,7 +133,8 @@
           return
         }
 
-        let match = text.substring(0, selectionStart).match(SEARCH_REGEX)
+        let textUpToCursor = text.substring(0, selectionStart)
+        let match = textUpToCursor.match(ACCOUNT_SEARCH_REGEX) || textUpToCursor.match(EMOJI_SEARCH_REGEX)
         return match && match[1]
       },
       shown: (composeFocusedDeferred, searchText, searchResults) => {

routes/_components/compose/ComposeAutosuggestionList.html

@@ -1,61 +1,76 @@
-<ul class="generic-user-list">
-  {{#each items as account, i @id}}
-  <li class="generic-user-list-item">
-    <button class="generic-user-list-button {{i === selected ? 'selected' : ''}}"
+<ul class="compose-autosuggest-list">
+  {{#each items as item, i}}
+  <li class="compose-autosuggest-list-item">
+    <button class="compose-autosuggest-list-button {{i === selected ? 'selected' : ''}}"
             tabindex="0"
-            on:click="fire('click', account)">
-      <div class="generic-user-list-grid">
+            on:click="fire('click', item)">
+      <div class="compose-autosuggest-list-grid">
+        {{#if type === 'account'}}
         <Avatar
-          className="generic-user-list-item-avatar"
+          className="compose-autosuggest-list-item-avatar"
           size="small"
-          :account
+          account="{{item}}"
         />
-        <span class="generic-user-list-display-name">
-          {{account.display_name || account.acct}}
+        <span class="compose-autosuggest-list-display-name">
+            {{item.display_name || item.acct}}
         </span>
-        <span class="generic-user-list-username">
-          {{'@' + account.acct}}
+        <span class="compose-autosuggest-list-username">
+            {{'@' + item.acct}}
         </span>
+        {{else}}
+          <img src="{{$autoplayGifs ? item.url : item.static_url}}"
+               class="compose-autosuggest-list-item-icon"
+               alt="{{':' + item.shortcode + ':'}}"
+          />
+          <span class="compose-autosuggest-list-display-name">
+              {{':' + item.shortcode + ':'}}
+          </span>
+        {{/if}}
       </div>
     </button>
   </li>
   {{/each}}
 </ul>
 <style>
-  .generic-user-list {
+  .compose-autosuggest-list {
     list-style: none;
     width: 100%;
     border-radius: 2px;
     box-sizing: border-box;
     border: 1px solid var(--compose-autosuggest-outline);
   }
-  .generic-user-list-item {
+  .compose-autosuggest-list-item {
     border-bottom: 1px solid var(--compose-autosuggest-outline);
     display: flex;
   }
-  .generic-user-list-item:last-child {
+  .compose-autosuggest-list-item:last-child {
     border-bottom: none;
   }
-  .generic-user-list-button {
+  .compose-autosuggest-list-button {
     padding: 10px;
     background: var(--settings-list-item-bg);
     border: none;
     margin: 0;
     flex: 1;
   }
-  .generic-user-list-grid {
+  .compose-autosuggest-list-grid {
     display: grid;
     width: 100%;
-    grid-template-areas: "avatar     display-name"
-    "avatar     username";
+    grid-template-areas: "icon     display-name"
+                         "icon     username";
     grid-template-columns: min-content 1fr;
     grid-column-gap: 10px;
     grid-row-gap: 5px;
   }
-  :global(.generic-user-list-item-avatar) {
-    grid-area: avatar;
+  :global(.compose-autosuggest-list-item-avatar) {
+    grid-area: icon;
   }
-  .generic-user-list-display-name {
+  .compose-autosuggest-list-item-icon {
+    grid-area: icon;
+    width: 48px;
+    height: 48px;
+  }
+  .compose-autosuggest-list-display-name {
     grid-area: display-name;
     font-size: 1.1em;
     white-space: nowrap;
@@ -64,7 +79,7 @@
     min-width: 0;
     text-align: left;
   }
-  .generic-user-list-username {
+  .compose-autosuggest-list-username {
     grid-area: username;
     font-size: 1em;
     color: var(--deemphasized-text-color);
@@ -73,16 +88,19 @@
     text-overflow: ellipsis;
     text-align: left;
   }
-  .generic-user-list-button:hover, .generic-user-list-button.selected {
+  .compose-autosuggest-list-button:hover, .compose-autosuggest-list-button.selected {
     background: var(--compose-autosuggest-item-hover);
   }
-  .generic-user-list-button:active {
+  .compose-autosuggest-list-button:active {
     background: var(--compose-autosuggest-item-active);
   }
 </style>
 <script>
   import Avatar from '../Avatar.html'
+  import { store } from '../../_store/store'
+
   export default {
+    store: () => store,
     components: {
       Avatar
     }

routes/_components/compose/ComposeInput.html

@@ -34,6 +34,7 @@
   import { mark, stop } from '../../_utils/marks'
   import { selectionChange } from '../../_utils/events'
   import { clickSelectedAutosuggestionUsername } from '../../_actions/compose'
+  import { clickSelectedAutosuggestionEmoji } from '../../_actions/emoji'
 
   export default {
     oncreate() {
@@ -49,16 +50,19 @@
         let textarea = this.refs.textarea
         let firstTime = true
         this.observe('text', text => {
-          this.set({rawText: text})
+          if (this.get('rawText') !== text) {
+            this.set({rawText: text})
+            // this next autosize is required to resize after
+            // the user clicks the "toot" button
+            mark('autosize.update()')
+            autosize.update(textarea)
+            stop('autosize.update()')
+          }
           if (firstTime) {
             firstTime = false
             if (this.get('autoFocus')) {
               textarea.focus()
             }
-          } else {
-            mark('autosize.update()')
-            autosize.update(textarea)
-            stop('autosize.update()')
           }
         })
       },
@@ -116,7 +120,12 @@
         if (!autosuggestionShown) {
           return
         }
-        clickSelectedAutosuggestionUsername(this.get('realm'))
+        let type = this.store.get('composeAutosuggestionType')
+        if (type === 'account') {
+          /* no await */ clickSelectedAutosuggestionUsername(this.get('realm'))
+        } else { // emoji
+          /* no await */ clickSelectedAutosuggestionEmoji(this.get('realm'))
+        }
         event.preventDefault()
       },
       incrementAutosuggestSelected(increment, event) {

routes/_components/compose/ComposeToolbar.html

@@ -54,7 +54,6 @@
 <script>
   import IconButton from '../IconButton.html'
   import { store } from '../../_store/store'
-  import { updateCustomEmojiForInstance } from '../../_actions/emoji'
   import { importDialogs } from '../../_utils/asyncModules'
   import { doMediaUpload } from '../../_actions/media'
   import { toggleContentWarningShown } from '../../_actions/contentWarnings'
@@ -79,7 +78,6 @@
     store: () => store,
     methods: {
       async onEmojiClick() {
-        /* no await */ updateCustomEmojiForInstance(this.store.get('currentInstance'))
         let dialogs = await importDialogs()
         dialogs.showEmojiDialog(this.get('realm'))
       },

routes/_store/observers/instanceObservers.js

@@ -1,6 +1,7 @@
 import { updateInstanceInfo, updateVerifyCredentialsForInstance } from '../../_actions/instances'
 import { updateLists } from '../../_actions/lists'
 import { createStream } from '../../_actions/streaming'
+import { updateCustomEmojiForInstance } from '../../_actions/emoji'
 
 export function instanceObservers (store) {
   // stream to watch for home timeline updates and notifications
@@ -22,6 +23,7 @@ export function instanceObservers (store) {
     }
     updateVerifyCredentialsForInstance(currentInstance)
     updateInstanceInfo(currentInstance)
+    updateCustomEmojiForInstance(currentInstance)
     updateLists()
 
     await updateInstanceInfo(currentInstance)

tests/roles.js

@@ -10,7 +10,7 @@ function login (t, username, password) {
     .pressKey('enter')
     .expect(getUrl()).contains('/oauth/authorize')
     .click(authorizeInput)
-    .expect(getUrl()).eql('http://localhost:4002/')
+    .expect(getUrl()).eql('http://localhost:4002/', {timeout: 20000})
 }
 
 export const foobarRole = Role('http://localhost:4002/settings/instances/add', async t => {

tests/spec/018-compose-autosuggest.js

@@ -0,0 +1,46 @@
+import {
+  composeInput, getNthAutosuggestionResult
+} from '../utils'
+import { foobarRole } from '../roles'
+
+fixture`018-compose-autosuggest.js`
+  .page`http://localhost:4002`
+
+test('autosuggests user handles', async t => {
+  await t.useRole(foobarRole)
+    .hover(composeInput)
+    .typeText(composeInput, 'hey @qu')
+    .click(getNthAutosuggestionResult(1))
+    .expect(composeInput.value).eql('hey @quux ')
+    .typeText(composeInput, 'and also @adm')
+    .click(getNthAutosuggestionResult(1))
+    .expect(composeInput.value).eql('hey @quux and also @admin ')
+    .typeText(composeInput, 'and also @AdM')
+    .expect(getNthAutosuggestionResult(1).innerText).contains('@admin')
+    .pressKey('tab')
+    .expect(composeInput.value).eql('hey @quux and also @admin and also @admin ')
+    .typeText(composeInput, 'and @QU')
+    .expect(getNthAutosuggestionResult(1).innerText).contains('@quux')
+    .pressKey('enter')
+    .expect(composeInput.value).eql('hey @quux and also @admin and also @admin and @quux ')
+})
+
+test('autosuggests custom emoji', async t => {
+  await t.useRole(foobarRole)
+    .hover(composeInput)
+    .typeText(composeInput, ':blob')
+    .click(getNthAutosuggestionResult(1))
+    .expect(composeInput.value).eql(':blobnom: ')
+    .typeText(composeInput, 'and :blob')
+    .expect(getNthAutosuggestionResult(1).innerText).contains(':blobnom:')
+    .expect(getNthAutosuggestionResult(2).innerText).contains(':blobpats:')
+    .expect(getNthAutosuggestionResult(3).innerText).contains(':blobpeek:')
+    .pressKey('down')
+    .pressKey('down')
+    .pressKey('enter')
+    .expect(composeInput.value).eql(':blobnom: and :blobpeek: ')
+    .typeText(composeInput, 'and also :blobpa')
+    .expect(getNthAutosuggestionResult(1).innerText).contains(':blobpats:')
+    .pressKey('tab')
+    .expect(composeInput.value).eql(':blobnom: and :blobpeek: and also :blobpats: ')
+})

tests/utils.js

@@ -95,6 +95,10 @@ export const uploadKittenImage = i => (exec(() => {
   }
 }))
 
+export function getNthAutosuggestionResult (n) {
+  return $(`.compose-autosuggest-list-item:nth-child(${n}) button`)
+}
+
 export function getNthSearchResult (n) {
   return $(`.search-result:nth-child(${n}) a`)
 }