Add message right click context menu v2

res/css/views/context_menus/_MessageContextMenu.scss

@@ -90,6 +90,22 @@ limitations under the License.
         mask-image: url('$(res)/img/element-icons/room/pin.svg');
     }
 
+    .mx_MessageContextMenu_iconCopy::before {
+        mask-image: url($copy-button-url);
+    }
+
+    .mx_MessageContextMenu_iconEdit::before {
+        mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
+    }
+
+    .mx_MessageContextMenu_iconReply::before {
+        mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
+    }
+
+    .mx_MessageContextMenu_iconReact::before {
+        mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
+    }
+
     .mx_MessageContextMenu_iconViewInRoom::before {
         mask-image: url('$(res)/img/element-icons/view-in-room.svg');
     }

src/BasePlatform.ts

@@ -145,6 +145,13 @@ export default abstract class BasePlatform {
         return false;
     }
 
+    /**
+     * Returns true if platform allows overriding native context menus
+     */
+    public allowOverridingNativeContextMenus(): boolean {
+        return true; // TODO: Change to false before merge! True for live preview
+    }
+
     /**
      * Returns true if the platform supports displaying
      * notifications, otherwise false.

src/components/structures/ContextMenu.tsx

@@ -429,10 +429,10 @@ export type AboveLeftOf = IPosition & {
 // Placement method for <ContextMenu /> to position context menu right-aligned and flowing to the left of elementRect,
 // and either above or below: wherever there is more space (maybe this should be aboveOrBelowLeftOf?)
 export const aboveLeftOf = (
-    elementRect: DOMRect,
+    elementRect: Partial<DOMRect>,
     chevronFace = ChevronFace.None,
     vPadding = 0,
-): AboveLeftOf => {
+) => {
     const menuOptions: IPosition & { chevronFace: ChevronFace } = { chevronFace };
 
     const buttonRight = elementRect.right + window.pageXOffset;