diff --git a/src/components/messageStream/bubbles/AlbumBubble.tsx b/src/components/messageStream/bubbles/AlbumBubble.tsx index c747ea0..0040cc5 100644 --- a/src/components/messageStream/bubbles/AlbumBubble.tsx +++ b/src/components/messageStream/bubbles/AlbumBubble.tsx @@ -38,7 +38,7 @@ export function AlbumBubble({ post }: { post: Post }) { ))} {text ? ( -
+
{autolink(text)}
) : null} @@ -80,7 +80,7 @@ export function AlbumBubble({ post }: { post: Post }) { })}
{text ? ( -
+
{autolink(text)}
) : null} diff --git a/src/components/messageStream/bubbles/FileDocBubble.tsx b/src/components/messageStream/bubbles/FileDocBubble.tsx index 8bfee8c..0988555 100644 --- a/src/components/messageStream/bubbles/FileDocBubble.tsx +++ b/src/components/messageStream/bubbles/FileDocBubble.tsx @@ -63,7 +63,7 @@ export function FileDocBubble({ post }: { post: Post }) { ))} {text ? ( -
+
{text}
) : null} diff --git a/src/components/messageStream/bubbles/ImageWithTextBubble.tsx b/src/components/messageStream/bubbles/ImageWithTextBubble.tsx index 62e45d2..af4669d 100644 --- a/src/components/messageStream/bubbles/ImageWithTextBubble.tsx +++ b/src/components/messageStream/bubbles/ImageWithTextBubble.tsx @@ -31,7 +31,7 @@ export function ImageWithTextBubble({ post }: { post: Post }) { {text ? (
-
+
{autolink(text)}
diff --git a/src/components/messageStream/bubbles/TextBubble.tsx b/src/components/messageStream/bubbles/TextBubble.tsx index 22da71f..bfb8523 100644 --- a/src/components/messageStream/bubbles/TextBubble.tsx +++ b/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 ( -
+
{autolink(postDisplayText(post, lang))}
); diff --git a/src/components/messageStream/bubbles/VideoBubble.tsx b/src/components/messageStream/bubbles/VideoBubble.tsx index 5b2fcb5..4720ba8 100644 --- a/src/components/messageStream/bubbles/VideoBubble.tsx +++ b/src/components/messageStream/bubbles/VideoBubble.tsx @@ -112,7 +112,7 @@ export function VideoBubble({ post }: { post: Post }) { )}
{text ? ( -
+
{autolink(text)}
) : null} diff --git a/src/components/messageStream/overlays/ImageLightbox.tsx b/src/components/messageStream/overlays/ImageLightbox.tsx index 9bcae66..92cb6a8 100644 --- a/src/components/messageStream/overlays/ImageLightbox.tsx +++ b/src/components/messageStream/overlays/ImageLightbox.tsx @@ -210,7 +210,7 @@ function LightboxView({ /> {caption ? (
-
+
{autolink(caption)}
diff --git a/src/components/messageStream/utils/autolink.tsx b/src/components/messageStream/utils/autolink.tsx index ba25da8..4ebebe0 100644 --- a/src/components/messageStream/utils/autolink.tsx +++ b/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} , diff --git a/src/index.css b/src/index.css index 37cbb7b..5b4e14d 100644 --- a/src/index.css +++ b/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); +}