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.
This commit is contained in:
parent
b6854c2f88
commit
472abe532e
|
@ -17,7 +17,7 @@ import I18n from "I18n";
|
||||||
import ItsATrap from "@discourse/itsatrap";
|
import ItsATrap from "@discourse/itsatrap";
|
||||||
import { Promise } from "rsvp";
|
import { Promise } from "rsvp";
|
||||||
import { SKIP } from "discourse/lib/autocomplete";
|
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 deprecated from "discourse-common/lib/deprecated";
|
||||||
import discourseDebounce from "discourse-common/lib/debounce";
|
import discourseDebounce from "discourse-common/lib/debounce";
|
||||||
import { findRawTemplate } from "discourse-common/lib/raw-templates";
|
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 { loadOneboxes } from "discourse/lib/load-oneboxes";
|
||||||
import loadScript from "discourse/lib/load-script";
|
import loadScript from "discourse/lib/load-script";
|
||||||
import { resolveCachedShortUrls } from "pretty-text/upload-short-url";
|
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 { inject as service } from "@ember/service";
|
||||||
import showModal from "discourse/lib/show-modal";
|
import showModal from "discourse/lib/show-modal";
|
||||||
import { siteDir } from "discourse/lib/text-direction";
|
import { siteDir } from "discourse/lib/text-direction";
|
||||||
|
@ -463,27 +462,9 @@ export default Component.extend(TextareaTextManipulation, {
|
||||||
},
|
},
|
||||||
|
|
||||||
_applyCategoryHashtagAutocomplete() {
|
_applyCategoryHashtagAutocomplete() {
|
||||||
const siteSettings = this.siteSettings;
|
setupHashtagAutocomplete(this._$textarea, this.siteSettings, (value) => {
|
||||||
|
|
||||||
this._$textarea.autocomplete({
|
|
||||||
template: findRawTemplate("category-tag-autocomplete"),
|
|
||||||
key: "#",
|
|
||||||
afterComplete: (value) => {
|
|
||||||
this.set("value", value);
|
this.set("value", value);
|
||||||
schedule("afterRender", this, this.focusTextArea);
|
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);
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
|
@ -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>
|
|
@ -2021,6 +2021,10 @@ developer:
|
||||||
enable_experimental_sidebar_hamburger:
|
enable_experimental_sidebar_hamburger:
|
||||||
default: false
|
default: false
|
||||||
client: true
|
client: true
|
||||||
|
enable_experimental_hashtag_autocomplete:
|
||||||
|
default: false
|
||||||
|
client: true
|
||||||
|
hidden: true
|
||||||
enable_sidebar:
|
enable_sidebar:
|
||||||
default: true
|
default: true
|
||||||
client: true
|
client: true
|
||||||
|
|
Loading…
Reference in New Issue