DEV: Add emoji-picker-filter-container plugin outlet (#30976)

With the emoji picker unified
(https://github.com/discourse/discourse/pull/28277), there is no longer
a footer, including the previous plugin outlet.

This PR moves the plugin outlet at the top.

Usage example: [Emoji Fluff
TC](https://meta.discourse.org/t/emoji-fluff/339163)

Before: 

![image](https://github.com/user-attachments/assets/6274dfa6-386e-4387-9377-8ab13256528c)
After: 

![image](https://github.com/user-attachments/assets/f4f02ec1-797e-4066-837d-b436c7ad3061)
This commit is contained in:
Arkshine
2025-02-26 23:58:50 +01:00
committed by GitHub
parent d0c61f790a
commit c72922cfc7

View File

@ -11,6 +11,7 @@ import { emojiSearch } from "pretty-text/emoji";
import { eq, gt, includes, notEq } from "truth-helpers";
import DButton from "discourse/components/d-button";
import FilterInput from "discourse/components/filter-input";
import PluginOutlet from "discourse/components/plugin-outlet";
import concatClass from "discourse/helpers/concat-class";
import noop from "discourse/helpers/noop";
import replaceEmoji from "discourse/helpers/replace-emoji";
@ -449,25 +450,37 @@ export default class EmojiPicker extends Component {
...attributes
>
<div class="emoji-picker__filter-container">
<FilterInput
{{didInsert (if this.site.desktopView this.focusFilter (noop))}}
{{didInsert this.registerFilterInput}}
@value={{this.term}}
@filterAction={{withEventValue this.didInputFilter}}
@icons={{hash right="magnifying-glass"}}
@containerClass="emoji-picker__filter"
placeholder={{i18n "chat.emoji_picker.search_placeholder"}}
/>
<DiversityMenu />
{{#if this.site.mobileView}}
<DButton
@icon="xmark"
@action={{@close}}
class="btn-transparent emoji-picker__close-btn"
<PluginOutlet
@name="emoji-picker-filter-container"
@outletArgs={{hash
term=this.term
focusFilter=this.focusFilter
registerFilterInput=this.registerFilterInput
didInputFilter=this.didInputFilter
context=@context
close=@close
}}
>
<FilterInput
{{didInsert (if this.site.desktopView this.focusFilter (noop))}}
{{didInsert this.registerFilterInput}}
@value={{this.term}}
@filterAction={{withEventValue this.didInputFilter}}
@icons={{hash right="magnifying-glass"}}
@containerClass="emoji-picker__filter"
placeholder={{i18n "chat.emoji_picker.search_placeholder"}}
/>
{{/if}}
<DiversityMenu />
{{#if this.site.mobileView}}
<DButton
@icon="xmark"
@action={{@close}}
class="btn-transparent emoji-picker__close-btn"
/>
{{/if}}
</PluginOutlet>
</div>
<div class="emoji-picker__content">