Add copy button

.changeset/feat_add_copy_original_message.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add Copy Message button to copy unformatted version.

src/app/components/message/modals/Options.tsx

@@ -43,6 +43,7 @@ import { useRoomPinnedEvents } from '$hooks/useRoomPinnedEvents';
 import { EmojiBoard } from '$components/emoji-board';
 import { MemoizedBody, type ReactionHandler } from '$features/room/message';
 import { useRecentEmoji } from '$hooks/useRecentEmoji';
+import { CopyIcon } from '@phosphor-icons/react';
 
 function WrappedMessage({
   isModal,
@@ -134,6 +135,38 @@ const MessageCopyLinkItem = as<
   );
 });
 
+const MessageCopyTextItem = as<
+  'button',
+  {
+    room: Room;
+    mEvent: MatrixEvent;
+    onClose: () => void;
+  }
+>(({ room, mEvent, onClose, ...props }, ref) => {
+  const handleCopy = () => {
+    const content = mEvent.getContent();
+    const body = content?.body;
+
+    if (body) copyToClipboard(body);
+    onClose();
+  };
+
+  return (
+    <MenuItem
+      size="300"
+      after={menuIcon(CopyIcon)}
+      radii="300"
+      onClick={handleCopy}
+      {...props}
+      ref={ref}
+    >
+      <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
+        Copy Message
+      </Text>
+    </MenuItem>
+  );
+});
+
 export const MessagePinItem = as<
   'button',
   {
@@ -507,10 +540,7 @@ export function OptionMenu({
           escapeDeactivates: stopPropagation,
         }}
       >
-        <Menu
-          onContextMenu={(e) => e.preventDefault()}
-          className={isModal ? css.MessageOptionsMenu : ''}
-        >
+        <Menu className={isModal ? css.MessageOptionsMenu : ''}>
           {dragOpts?.dragHandle}
           {ActualMessage && !emojiBoardAnchor && (
             <>
@@ -519,13 +549,15 @@ export function OptionMenu({
             </>
           )}
           <Box
+            className={css.PreventSelect}
             direction="Column"
             grow="Yes"
             shrink="No"
             style={{ maxHeight: '75%' }}
             onTouchStart={dragOpts?.onTouchStart}
             onTouchMove={dragOpts?.onTouchMove}
             onTouchEnd={dragOpts?.onTouchEnd}
+            onContextMenu={(e) => e.preventDefault()}
           >
             {canSendReaction && onReactionToggle && setIsEmoji && (
               <MessageQuickReactions
@@ -569,7 +601,7 @@ export function OptionMenu({
                     }}
                   >
                     <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
-                      Add to User Sticker Pack
+                      Steal Sticker
                     </Text>
                   </MenuItem>
                 )}
@@ -634,6 +666,7 @@ export function OptionMenu({
                 <MessageSourceCodeItem room={room} mEvent={mEvent} closeMenu={closeMenu} />
               )}
               <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={onTotalClose} />
+              <MessageCopyTextItem room={room} mEvent={mEvent} onClose={onTotalClose} />
               {canForwardEvent(mEvent) && (
                 <MessageForwardItem room={room} mEvent={mEvent} onClose={closeMenu} />
               )}

src/app/features/room/message/styles.css.ts

@@ -41,6 +41,12 @@ export const MessageOptionsMenu = style({
   flexDirection: 'column',
 });
 
+export const PreventSelect = style({
+  WebkitUserSelect: 'none',
+  msUserSelect: 'none',
+  userSelect: 'none',
+  MozUserSelect: 'none',
+});
 //I have zero clue where these numbers and vars are from but they should be changed
 //I just copied the hardcoded value in a more correct place