feat: search UI/UX revamp (#3941)

* feat: first iteration

* chore: tweak

* feat: second iteration

* chore: incorrect code organization

* feat: gambit input suggestions

* feat: gambit keyboard navigation

* chore: bugs

* feat: negative gambits

* feat: improve gambit highlighting

* refactor: localize gambits

* feat: negative and positive gambit buttons

* fix: permissions

* chore: wat

* per: lazy load search modal

* fix: extensibility and bug fixes

* fix: bugs

* feat: reusable autocomplete dropdown

* chore: format

* fix: tag filter

extensions/mentions/js/src/forum/addComposerAutocomplete.js

@@ -2,6 +2,8 @@ import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import TextEditorButton from 'flarum/common/components/TextEditorButton';
 import KeyboardNavigatable from 'flarum/common/utils/KeyboardNavigatable';
+import AutocompleteReader from 'flarum/common/utils/AutocompleteReader';
+import { throttle } from 'flarum/common/utils/throttleDebounce';
 
 import AutocompleteDropdown from './fragments/AutocompleteDropdown';
 import MentionableModels from './mentionables/MentionableModels';
@@ -9,6 +11,7 @@ import MentionableModels from './mentionables/MentionableModels';
 export default function addComposerAutocomplete() {
   extend('flarum/common/components/TextEditor', 'onbuild', function () {
     this.mentionsDropdown = new AutocompleteDropdown();
+    this.searchMentions = throttle(250, (mentionables, buildSuggestions) => mentionables.search().then(buildSuggestions));
     const $editor = this.$('.TextEditor-editor').wrap('<div class="ComposerBody-mentionsWrapper"></div>');
 
     this.navigator = new KeyboardNavigatable();
@@ -24,21 +27,8 @@ export default function addComposerAutocomplete() {
   });
 
   extend('flarum/common/components/TextEditor', 'buildEditorParams', function (params) {
-    let relMentionStart;
-    let absMentionStart;
     let matchTyped;
 
-    let mentionables = new MentionableModels({
-      onmouseenter: function () {
-        this.mentionsDropdown.setIndex($(this).parent().index());
-      },
-      onclick: (replacement) => {
-        this.attrs.composer.editor.replaceBeforeCursor(absMentionStart - 1, replacement + ' ');
-
-        this.mentionsDropdown.hide();
-      },
-    });
-
     const suggestionsInputListener = () => {
       const selection = this.attrs.composer.editor.getSelectionRange();
 
@@ -46,30 +36,27 @@ export default function addComposerAutocomplete() {
 
       if (selection[1] - cursor > 0) return;
 
-      // Search backwards from the cursor for a mention triggering symbol. If we find one,
-      // we will want to show the correct autocomplete dropdown!
-      // Check classes implementing the IMentionableModel interface to see triggering symbols.
-      const lastChunk = this.attrs.composer.editor.getLastNChars(30);
-      absMentionStart = 0;
       let activeFormat = null;
-      for (let i = lastChunk.length - 1; i >= 0; i--) {
-        const character = lastChunk.substr(i, 1);
-        activeFormat = app.mentionFormats.get(character);
+      const autocompleteReader = new AutocompleteReader((character) => !!(activeFormat = app.mentionFormats.get(character)));
+      const autocompleting = autocompleteReader.check(this.attrs.composer.editor.getLastNChars(30), cursor, /\S+/);
 
-        if (activeFormat && (i === 0 || /\s/.test(lastChunk.substr(i - 1, 1)))) {
-          relMentionStart = i + 1;
-          absMentionStart = cursor - lastChunk.length + i + 1;
-          mentionables.init(activeFormat.makeMentionables());
-          break;
-        }
-      }
+      const mentionsDropdown = this.mentionsDropdown;
+      let mentionables = new MentionableModels({
+        onmouseenter: function () {
+          mentionsDropdown.setIndex($(this).parent().index());
+        },
+        onclick: (replacement) => {
+          this.attrs.composer.editor.replaceBeforeCursor(autocompleting.absoluteStart - 1, replacement + ' ');
+          this.mentionsDropdown.hide();
+        },
+      });
 
       this.mentionsDropdown.hide();
       this.mentionsDropdown.active = false;
 
-      if (absMentionStart) {
-        const typed = lastChunk.substring(relMentionStart).toLowerCase();
-        matchTyped = activeFormat.queryFromTyped(typed);
+      if (autocompleting) {
+        mentionables.init(activeFormat.makeMentionables());
+        matchTyped = activeFormat.queryFromTyped(autocompleting.typed);
 
         if (!matchTyped) return;
 
@@ -85,7 +72,7 @@ export default function addComposerAutocomplete() {
             m.render(this.$('.ComposerBody-mentionsDropdownContainer')[0], this.mentionsDropdown.render());
 
             this.mentionsDropdown.show();
-            const coordinates = this.attrs.composer.editor.getCaretCoordinates(absMentionStart);
+            const coordinates = this.attrs.composer.editor.getCaretCoordinates(autocompleting.absoluteStart);
             const width = this.mentionsDropdown.$().outerWidth();
             const height = this.mentionsDropdown.$().outerHeight();
             const parent = this.mentionsDropdown.$().offsetParent();
@@ -118,7 +105,7 @@ export default function addComposerAutocomplete() {
         this.mentionsDropdown.setIndex(0);
         this.mentionsDropdown.$().scrollTop(0);
 
-        mentionables.search()?.then(buildSuggestions);
+        this.searchMentions(mentionables, buildSuggestions);
       }
     };
 

extensions/mentions/js/src/forum/mentionables/MentionableModels.tsx

@@ -2,7 +2,6 @@ import type MentionableModel from './MentionableModel';
 import type Model from 'flarum/common/Model';
 import type Mithril from 'mithril';
 import MentionsDropdownItem from '../components/MentionsDropdownItem';
-import { throttle } from 'flarum/common/utils/throttleDebounce';
 
 export default class MentionableModels {
   protected mentionables?: MentionableModel[];
@@ -33,7 +32,7 @@ export default class MentionableModels {
    * Don't send API calls searching for models until at least 2 characters have been typed.
    * This focuses the mention results on models already loaded.
    */
-  public readonly search = throttle(250, async (): Promise<void> => {
+  public readonly search = async (): Promise<void> => {
     if (!this.typed || this.typed.length <= 1) return;
 
     const typedLower = this.typed.toLowerCase();
@@ -51,7 +50,7 @@ export default class MentionableModels {
     this.searched.push(typedLower);
 
     return Promise.resolve();
-  });
+  };
 
   public matches(mentionable: MentionableModel, model: Model): boolean {
     return mentionable.matches(model, this.typed?.toLowerCase() || '');