fix: allow copying message stream text

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -38,7 +38,7 @@ export function AlbumBubble({ post }: { post: Post }) {
           </button>
         ))}
         {text ? (
-          <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+          <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
             {autolink(text)}
           </div>
         ) : null}
@@ -80,7 +80,7 @@ export function AlbumBubble({ post }: { post: Post }) {
         })}
       </div>
       {text ? (
-        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
           {autolink(text)}
         </div>
       ) : null}

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -63,7 +63,7 @@ export function FileDocBubble({ post }: { post: Post }) {
         <AttachmentRow key={att.id} postId={post.id} att={att} />
       ))}
       {text ? (
-        <div className="mt-1 whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+        <div className="message-stream-copyable-text mt-1 select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
           {text}
         </div>
       ) : null}

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -31,7 +31,7 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
       </button>
       {text ? (
         <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/55 to-transparent px-4 pb-4 pt-16 text-[14px] leading-snug text-neutral-100">
-          <div className="whitespace-pre-wrap break-words">
+          <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words">
             {autolink(text)}
           </div>
         </div>

src/components/messageStream/bubbles/TextBubble.tsx

@@ -6,7 +6,7 @@ import { postDisplayText } from "../utils/postText";
 export function TextBubble({ post }: { post: Post }) {
   const { lang } = useI18n();
   return (
-    <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+    <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
       {autolink(postDisplayText(post, lang))}
     </div>
   );

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -112,7 +112,7 @@ export function VideoBubble({ post }: { post: Post }) {
         )}
       </div>
       {text ? (
-        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
           {autolink(text)}
         </div>
       ) : null}

src/components/messageStream/overlays/ImageLightbox.tsx

@@ -210,7 +210,7 @@ function LightboxView({
         />
         {caption ? (
           <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent px-4 pb-4 pt-12 text-sm leading-snug text-white sm:px-5 sm:pb-5">
-            <div className="max-h-[32vh] overflow-y-auto whitespace-pre-wrap break-words">
+            <div className="message-stream-copyable-text max-h-[32vh] overflow-y-auto whitespace-pre-wrap break-words">
               {autolink(caption)}
             </div>
           </div>

src/components/messageStream/utils/autolink.tsx

@@ -24,7 +24,7 @@ export function autolink(text: string): ReactNode[] {
         href={url}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-ark-gold underline underline-offset-2 break-all hover:text-ark-gold2"
+        className="message-stream-copyable-text select-text break-all text-ark-gold underline underline-offset-2 hover:text-ark-gold2"
       >
         {url}
       </a>,

src/index.css

@@ -41,3 +41,19 @@ header button {
 .gold-underline {
   box-shadow: inset 0 -2px 0 #eeb726;
 }
+
+.message-stream-copyable-text,
+.message-stream-copyable-text * {
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+.message-stream-copyable-text {
+  -webkit-touch-callout: default;
+  cursor: text;
+}
+
+.message-stream-copyable-text::selection,
+.message-stream-copyable-text *::selection {
+  background: rgba(238, 183, 38, 0.35);
+}