DEV: Add experimental setting for hashtag-autocomplete changes (#18537)

This initial PR just adds a enable_experimental_hashtag_autocomplete
setting, and related JS & HBR files, replacing direct setup of
the autocomplete within d-editor and instead using the new
lib/hashtag-autocomplete. This is the beginning of preparations
to allow other data sources to be added to this autocomplete,
as well as a redesign of the menu and rendered tags in the composer
preview and posts.

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -17,7 +17,7 @@ import I18n from "I18n";
 import ItsATrap from "@discourse/itsatrap";
 import { Promise } from "rsvp";
 import { SKIP } from "discourse/lib/autocomplete";
-import { categoryHashtagTriggerRule } from "discourse/lib/category-hashtags";
+import { setupHashtagAutocomplete } from "discourse/lib/hashtag-autocomplete";
 import deprecated from "discourse-common/lib/deprecated";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { findRawTemplate } from "discourse-common/lib/raw-templates";
@@ -28,7 +28,6 @@ import { linkSeenMentions } from "discourse/lib/link-mentions";
 import { loadOneboxes } from "discourse/lib/load-oneboxes";
 import loadScript from "discourse/lib/load-script";
 import { resolveCachedShortUrls } from "pretty-text/upload-short-url";
-import { search as searchCategoryTag } from "discourse/lib/category-tag-search";
 import { inject as service } from "@ember/service";
 import showModal from "discourse/lib/show-modal";
 import { siteDir } from "discourse/lib/text-direction";
@@ -463,27 +462,9 @@ export default Component.extend(TextareaTextManipulation, {
   },
 
   _applyCategoryHashtagAutocomplete() {
-    const siteSettings = this.siteSettings;
-
-    this._$textarea.autocomplete({
-      template: findRawTemplate("category-tag-autocomplete"),
-      key: "#",
-      afterComplete: (value) => {
-        this.set("value", value);
-        schedule("afterRender", this, this.focusTextArea);
-      },
-      transformComplete: (obj) => {
-        return obj.text;
-      },
-      dataSource: (term) => {
-        if (term.match(/\s/)) {
-          return null;
-        }
-        return searchCategoryTag(term, siteSettings);
-      },
-      triggerRule: (textarea, opts) => {
-        return categoryHashtagTriggerRule(textarea, opts);
-      },
+    setupHashtagAutocomplete(this._$textarea, this.siteSettings, (value) => {
+      this.set("value", value);
+      schedule("afterRender", this, this.focusTextArea);
     });
   },
 

app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js

@@ -0,0 +1,58 @@
+import { findRawTemplate } from "discourse-common/lib/raw-templates";
+
+// TODO: (martin) Make a more generic version of these functions.
+import { categoryHashtagTriggerRule } from "discourse/lib/category-hashtags";
+import { search as searchCategoryTag } from "discourse/lib/category-tag-search";
+
+export function setupHashtagAutocomplete(
+  $textArea,
+  siteSettings,
+  afterComplete
+) {
+  if (siteSettings.enable_experimental_hashtag_autocomplete) {
+    _setupExperimental($textArea, siteSettings, afterComplete);
+  } else {
+    _setup($textArea, siteSettings, afterComplete);
+  }
+}
+
+function _setupExperimental($textArea, siteSettings, afterComplete) {
+  $textArea.autocomplete({
+    template: findRawTemplate("hashtag-autocomplete"),
+    key: "#",
+    afterComplete,
+    treatAsTextarea: $textArea[0].tagName === "INPUT",
+    transformComplete: (obj) => {
+      return obj.text;
+    },
+    dataSource: (term) => {
+      if (term.match(/\s/)) {
+        return null;
+      }
+      return searchCategoryTag(term, siteSettings);
+    },
+    triggerRule: (textarea, opts) => {
+      return categoryHashtagTriggerRule(textarea, opts);
+    },
+  });
+}
+
+function _setup($textArea, siteSettings, afterComplete) {
+  $textArea.autocomplete({
+    template: findRawTemplate("category-tag-autocomplete"),
+    key: "#",
+    afterComplete,
+    transformComplete: (obj) => {
+      return obj.text;
+    },
+    dataSource: (term) => {
+      if (term.match(/\s/)) {
+        return null;
+      }
+      return searchCategoryTag(term, siteSettings);
+    },
+    triggerRule: (textarea, opts) => {
+      return categoryHashtagTriggerRule(textarea, opts);
+    },
+  });
+}

app/assets/javascripts/discourse/app/templates/hashtag-autocomplete.hbr

@@ -0,0 +1,13 @@
+<div class='autocomplete hashtag-autocomplete'>
+  <ul>
+    {{#each options as |option|}}
+      <li>
+        {{#if option.model}}
+          <a href>{{category-link option.model allowUncategorized="true" link="false"}}</a>
+        {{else}}
+          <a href>{{d-icon 'tag'}}{{option.name}} x {{option.count}}</a>
+        {{/if}}
+      </li>
+    {{/each}}
+  </ul>
+</div>

config/site_settings.yml

@@ -2021,6 +2021,10 @@ developer:
   enable_experimental_sidebar_hamburger:
     default: false
     client: true
+  enable_experimental_hashtag_autocomplete:
+    default: false
+    client: true
+    hidden: true
   enable_sidebar:
     default: true
     client: true