fix emoji

src/common/Portal.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+interface PortalProps {
+  children: React.ReactNode
+}
+
+const Portal: React.FC<PortalProps> = ({ children }) => {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+
+    return () => setMounted(false)
+  }, [])
+
+  return mounted
+    ? createPortal(
+        children,
+        document.querySelector('#modal-root') as HTMLElement
+      )
+    : null
+}
+
+export default Portal

src/components/Chat/MessageDisplay.tsx

@@ -4,11 +4,11 @@ import './styles.css';
 import { executeEvent } from '../../utils/events';
 
 const extractComponents = (url) => {
-  if (!url.startsWith("qortal://")) {
+  if (!url || !url.startsWith("qortal://")) { // Check if url exists and starts with "qortal://"
     return null;
   }
 
-  url = url.replace(/^(qortal\:\/\/)/, "");
+  url = url.replace(/^(qortal\:\/\/)/, ""); // Safe to use replace now
   if (url.includes("/")) {
     let parts = url.split("/");
     const service = parts[0].toUpperCase();
@@ -23,6 +23,7 @@ const extractComponents = (url) => {
   return null;
 };
 
+
 function processText(input) {
   const linkRegex = /(qortal:\/\/\S+)/g;
   function processNode(node) {
@@ -58,6 +59,8 @@ function processText(input) {
 
 export const MessageDisplay = ({ htmlContent, isReply }) => {
   const linkify = (text) => {
+    if (!text) return ""; // Return an empty string if text is null or undefined
+  
     let textFormatted = text;
     const urlPattern = /(\bhttps?:\/\/[^\s<]+|\bwww\.[^\s<]+)/g;
     textFormatted = text.replace(urlPattern, (url) => {
@@ -67,6 +70,7 @@ export const MessageDisplay = ({ htmlContent, isReply }) => {
     return processText(textFormatted);
   };
   
+
   const sanitizedContent = DOMPurify.sanitize(linkify(htmlContent), {
     ALLOWED_TAGS: [
       'a', 'b', 'i', 'em', 'strong', 'p', 'br', 'div', 'span', 'img', 

src/components/ReactionPicker.css

@@ -5,10 +5,23 @@
   .emoji-picker {
     position: absolute; /* Picker positioned absolutely relative to the parent */
     right: 0;
-    z-index: 1000; /* Ensure picker appears above other content */
+    z-index: 9000000000; /* Ensure picker appears above other content */
   }
   
   .message-container {
     overflow: visible; /* Ensure the message container doesn't cut off the picker */
   }
   
+
+  .reaction-container {
+    position: relative;
+  }
+  
+  .emoji-picker {
+    overflow: hidden;
+    width: auto
+  }
+
+  .EmojiPickerReact.epr-dark-theme {
+    --epr-emoji-size: 18px; /* Adjust emoji size for dark mode */
+  }

src/components/ReactionPicker.tsx

@@ -1,39 +1,65 @@
 import React, { useState, useRef, useEffect } from 'react';
-import Picker, { Theme } from 'emoji-picker-react';
-import './ReactionPicker.css'; // CSS for proper positioning
+import ReactDOM from 'react-dom';
+import Picker, { EmojiStyle, Theme } from 'emoji-picker-react';
+import './ReactionPicker.css';
 import { ButtonBase } from '@mui/material';
 import { isMobile } from '../App';
 
 export const ReactionPicker = ({ onReaction }) => {
-  const [showPicker, setShowPicker] = useState(false); // Manage picker visibility
-  const pickerRef = useRef(null); // Reference to the picker
+  const [showPicker, setShowPicker] = useState(false);
+  const [pickerPosition, setPickerPosition] = useState({ top: 0, left: 0 });
+  const pickerRef = useRef(null);
+  const buttonRef = useRef(null);
 
   const handleReaction = (emojiObject) => {
-    onReaction(emojiObject.emoji);  // Handle the selected emoji reaction
-    setShowPicker(false); // Close picker after selection
+    onReaction(emojiObject.emoji);
+    setShowPicker(false);
   };
-  const handlePicker = (emojiObject) => {
 
-    onReaction(emojiObject.emoji);  // Handle the selected emoji reaction
-    setShowPicker(false); // Close picker after selection
+  const handlePicker = (emojiObject) => {
+    onReaction(emojiObject.emoji);
+    setShowPicker(false);
+  };
+
+  const togglePicker = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (showPicker) {
+      setShowPicker(false);
+    } else {
+      // Get the button's position
+      const buttonRect = buttonRef.current.getBoundingClientRect();
+      const pickerWidth = isMobile ? 300 : 350; // Adjust based on picker width
+
+      // Calculate position to align the right edge of the picker with the button's right edge
+      setPickerPosition({
+        top: buttonRect.bottom + window.scrollY, // Position below the button
+        left: buttonRect.right + window.scrollX - pickerWidth, // Align right edges
+      });
+      setShowPicker(true);
+    }
   };
 
   // Close picker if clicked outside
   useEffect(() => {
     const handleClickOutside = (event) => {
-      if (pickerRef.current && !pickerRef.current.contains(event.target)) {
-        setShowPicker(false); // Close picker
+      if (
+        pickerRef.current &&
+        !pickerRef.current.contains(event.target) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target)
+      ) {
+        setShowPicker(false);
       }
     };
 
-    // Add event listener when picker is shown
     if (showPicker) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
 
-    // Clean up the event listener on unmount
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
@@ -42,30 +68,27 @@ export const ReactionPicker = ({ onReaction }) => {
   return (
     <div className="reaction-container">
       {/* Emoji CTA */}
-      <ButtonBase sx={{
-        fontSize: '22px'
-      }} 
-      // onTouchStart={(e) => {
-      //   e.preventDefault(); // Prevent mobile keyboard
-      //   e.stopPropagation(); 
-      //   if(!isMobile) return
-      //   setShowPicker(!showPicker);
-      // }}
-      onClick={(e) => {
-        e.preventDefault(); // Prevents any focus issues
-        e.stopPropagation(); 
-        // if(isMobile) return
-
-        setShowPicker(!showPicker);
-      }}
-      
+      <ButtonBase
+        sx={{ fontSize: '22px' }}
+        ref={buttonRef}
+        onClick={togglePicker}
       >
         😃
       </ButtonBase>
 
-      {/* Emoji Picker with dark theme */}
-      {showPicker && (
-        <div className="emoji-picker" ref={pickerRef} onClick={(e) => e.preventDefault()}>
+      {/* Emoji Picker rendered in a portal with calculated position */}
+      {showPicker &&
+        ReactDOM.createPortal(
+          <div
+            className="emoji-picker"
+            ref={pickerRef}
+            style={{
+              position: 'absolute',
+              top: pickerPosition.top,
+              left: pickerPosition.left,
+              zIndex: 1000,
+            }}
+          >
             <Picker
               height={isMobile ? 350 : 450}
               width={isMobile ? 300 : 350}
@@ -75,8 +98,10 @@ export const ReactionPicker = ({ onReaction }) => {
               allowExpandReactions={true}
               autoFocusSearch={false}
               theme={Theme.DARK}
+              emojiStyle={EmojiStyle.NATIVE}
             />
-        </div>
+          </div>,
+          document.body
         )}
     </div>
   );

src/index.css

@@ -108,3 +108,4 @@ html, body {
 .swiper {
   width: 100%;
 }
+