Add optional userSelect property to FunEmoji and enable in MessageTextRenderer. Allows user text selection to start on an emoji. Fixes #7206

Author: david12341235

ts/components/conversation/Emojify.tsx

@@ -23,6 +23,7 @@ export type Props = {
   isInvisible?: boolean;
   /** Allows you to customize now non-newlines are rendered. Simplest is just a <span>. */
   renderNonEmoji?: RenderTextCallbackType;
+  selectable?: boolean;
 };
 
 const defaultRenderNonEmoji: RenderTextCallbackType = ({ text }) => text;
@@ -31,6 +32,7 @@ export function Emojify({
   fontSizeOverride,
   text,
   renderNonEmoji = defaultRenderNonEmoji,
+  selectable = false,
 }: Props): JSX.Element {
   const emojiLocalizer = useFunEmojiLocalizer();
   return (
@@ -59,6 +61,7 @@ export function Emojify({
               aria-label={emojiLocalizer.getLocaleShortName(variantKey)}
               emoji={variant}
               size={fontSizeOverride}
+              selectable={selectable}
             />
           );
         }

ts/components/conversation/MessageTextRenderer.tsx

@@ -431,6 +431,7 @@ function renderText({
       )}
       fontSizeOverride={jumboEmojiSize}
       text={text}
+      selectable
     />
   );
 }

ts/components/fun/FunEmoji.tsx

@@ -137,6 +137,7 @@ export type FunInlineEmojiProps = FunImageAriaProps &
   Readonly<{
     size?: number | null;
     emoji: EmojiVariantData;
+    selectable?: boolean;
   }>;
 
 export function FunInlineEmoji(props: FunInlineEmojiProps): JSX.Element {
@@ -183,6 +184,7 @@ export function FunInlineEmoji(props: FunInlineEmojiProps): JSX.Element {
               '--fun-emoji-sheet-x': props.emoji.sheetX,
               '--fun-emoji-sheet-y': props.emoji.sheetY,
               '--fun-emoji-jumbo-image': jumboImage,
+              ...(props.selectable && { userSelect: 'text' }),
             } as CSSProperties
           }
         />