componentEditor: Message accessories

(work check-in commit, I want to add text area stuff before releasing)

packages/core-extensions/src/componentEditor/index.ts

@@ -59,6 +59,14 @@ export const patches: Patch[] = [
           `children:require("componentEditor_messages").default._patchUsername(${elements},arguments[0])`
       }
     ]
+  },
+  {
+    find: '.provider&&"Discord"===',
+    replace: {
+      match: /(?<=\.container\),)children:(\[.+?this\.renderSuppressConfirmModal\(\),.+?\])}\)/,
+      replacement: (_, elements) =>
+        `children:require("componentEditor_messages").default._patchAccessories(${elements},this.props)})`
+    }
   }
 ];
 

packages/core-extensions/src/componentEditor/webpackModules/messages.tsx

@@ -12,6 +12,7 @@ import React from "@moonlight-mod/wp/react";
 const username: Record<string, MessageUsername> = {};
 const usernameBadges: Record<string, MessageUsernameBadge> = {};
 const badges: Record<string, MessageBadge> = {};
+const accessories: Record<string, React.FC<any>> = {};
 
 function addEntries(
   elements: React.ReactNode[],
@@ -43,6 +44,13 @@ function addEntries(
   }
 }
 
+function addComponents(elements: React.ReactNode[], components: Record<string, React.FC<any>>, props: any) {
+  for (const [id, Component] of Object.entries(components)) {
+    const component = <Component {...props} key={id} />;
+    elements.push(component);
+  }
+}
+
 export const messages: Messages = {
   addToUsername(id, component, anchor, before = false) {
     username[id] = {
@@ -65,6 +73,9 @@ export const messages: Messages = {
       before
     };
   },
+  addAccessory(id, component) {
+    accessories[id] = component;
+  },
   _patchUsername(elements, props) {
     addEntries(elements, username, MessageUsernameIndicies, props);
     return elements;
@@ -76,6 +87,10 @@ export const messages: Messages = {
   _patchBadges(elements, props) {
     addEntries(elements, badges, MessageBadgeIndicies, props);
     return elements;
+  },
+  _patchAccessories(elements, props) {
+    addComponents(elements, accessories, props);
+    return elements;
   }
 };
 

packages/types/src/coreExtensions/componentEditor.ts

@@ -121,14 +121,27 @@ export enum MessageBadgeIndicies {
 }
 
 export type Messages = {
+  /**
+   * Adds a component to the username of a message
+   */
   addToUsername: (id: string, component: React.FC<any>, anchor?: MessageUsernameAnchors, before?: boolean) => void;
+  /**
+   * Adds a component to the username badge area of a message (e.g. where role icons/new member badge is)
+   */
   addUsernameBadge: (
     id: string,
     component: React.FC<any>,
     anchor?: MessageUsernameBadgeAnchors,
     before?: boolean
   ) => void;
+  /**
+   * Adds a component to the end of a message header (e.g. silent indicator)
+   */
   addBadge: (id: string, component: React.FC<any>, anchor?: MessageBadgeAnchors, before?: boolean) => void;
+  /**
+   * Adds a component to message accessories (e.g. embeds)
+   */
+  addAccessory: (id: string, component: React.FC<any>) => void;
   /**
    * @private
    */
@@ -141,5 +154,9 @@ export type Messages = {
    * @private
    */
   _patchBadges: Patcher<any>;
+  /**
+   * @private
+   */
+  _patchAccessories: Patcher<any>;
 };
 //#endregion