Batch of views getting replaceableComponent decorators

src/components/views/emojipicker/Category.tsx

@@ -21,6 +21,7 @@ import { CATEGORY_HEADER_HEIGHT, EMOJI_HEIGHT, EMOJIS_PER_ROW } from "./EmojiPic
 import LazyRenderList from "../elements/LazyRenderList";
 import {DATA_BY_CATEGORY, IEmoji} from "../../../emoji";
 import Emoji from './Emoji';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 const OVERFLOW_ROWS = 3;
 
@@ -47,6 +48,7 @@ interface IProps {
     onMouseLeave(emoji: IEmoji): void;
 }
 
+@replaceableComponent("views.emojipicker.Category")
 class Category extends React.PureComponent<IProps> {
     private renderEmojiRow = (rowIndex: number) => {
         const { onClick, onMouseEnter, onMouseLeave, selectedEmojis, emojis } = this.props;

src/components/views/emojipicker/Emoji.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 
 import {MenuItem} from "../../structures/ContextMenu";
 import {IEmoji} from "../../../emoji";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     emoji: IEmoji;
@@ -28,6 +29,7 @@ interface IProps {
     onMouseLeave(emoji: IEmoji): void;
 }
 
+@replaceableComponent("views.emojipicker.Emoji")
 class Emoji extends React.PureComponent<IProps> {
     render() {
         const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;

src/components/views/emojipicker/EmojiPicker.tsx

@@ -26,6 +26,7 @@ import Search from "./Search";
 import Preview from "./Preview";
 import QuickReactions from "./QuickReactions";
 import Category, {ICategory, CategoryKey} from "./Category";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 export const CATEGORY_HEADER_HEIGHT = 22;
 export const EMOJI_HEIGHT = 37;
@@ -47,6 +48,7 @@ interface IState {
     viewportHeight: number;
 }
 
+@replaceableComponent("views.emojipicker.EmojiPicker")
 class EmojiPicker extends React.Component<IProps, IState> {
     private readonly recentlyUsed: IEmoji[];
     private readonly memoizedDataByCategory: Record<CategoryKey, IEmoji[]>;

src/components/views/emojipicker/Header.tsx

@@ -21,12 +21,14 @@ import classNames from "classnames";
 import {_t} from "../../../languageHandler";
 import {Key} from "../../../Keyboard";
 import {CategoryKey, ICategory} from "./Category";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     categories: ICategory[];
     onAnchorClick(id: CategoryKey): void
 }
 
+@replaceableComponent("views.emojipicker.Header")
 class Header extends React.PureComponent<IProps> {
     private findNearestEnabled(index: number, delta: number) {
         index += this.props.categories.length;

src/components/views/emojipicker/Preview.tsx

@@ -18,11 +18,13 @@ limitations under the License.
 import React from 'react';
 
 import {IEmoji} from "../../../emoji";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     emoji: IEmoji;
 }
 
+@replaceableComponent("views.emojipicker.Preview")
 class Preview extends React.PureComponent<IProps> {
     render() {
         const {

src/components/views/emojipicker/QuickReactions.tsx

@@ -20,6 +20,7 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import {getEmojiFromUnicode, IEmoji} from "../../../emoji";
 import Emoji from "./Emoji";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 // We use the variation-selector Heart in Quick Reactions for some reason
 const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map(emoji => {
@@ -39,6 +40,7 @@ interface IState {
     hover?: IEmoji;
 }
 
+@replaceableComponent("views.emojipicker.QuickReactions")
 class QuickReactions extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);

src/components/views/emojipicker/ReactionPicker.tsx

@@ -21,6 +21,7 @@ import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 import EmojiPicker from "./EmojiPicker";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -32,6 +33,7 @@ interface IState {
     selectedEmojis: Set<string>;
 }
 
+@replaceableComponent("views.emojipicker.ReactionPicker")
 class ReactionPicker extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);

src/components/views/emojipicker/Search.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 
 import { _t } from '../../../languageHandler';
 import {Key} from "../../../Keyboard";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 interface IProps {
     query: string;
@@ -26,6 +27,7 @@ interface IProps {
     onEnter(): void;
 }
 
+@replaceableComponent("views.emojipicker.Search")
 class Search extends React.PureComponent<IProps> {
     private inputRef = React.createRef<HTMLInputElement>();