fix: linkify href

src/common/component/LinkifyText.tsx

@@ -1,4 +1,5 @@
-// import React from 'react';
+// import { MouseEvent, useState } from 'react';
+// import { useTranslation } from 'react-i18next';
 import Linkify from "linkify-react";
 import 'linkify-plugin-mention';
 import URLPreview from './Message/URLPreview';
@@ -14,18 +15,23 @@ type Props = {
 }
 
 const LinkifyText = ({ url = true, mention = true, mentionTextOnly = false, mentionPopOver = true, text, cid }: Props) => {
-
+    // const { t } = useTranslation();
+    // const 
     return (
         <Linkify options={
             {
+                // attributes: {
+                //     onClick: handleLinkClick
+                // },
                 render: {
-                    url: ({ content }) => {
+                    url: ({ content, attributes: { href: link } }) => {
+                        console.log("attr", link);
                         if (!url) return <>{content}</>;
                         return <>
-                            <a className="link" target="_blank" href={content} rel="noreferrer">
+                            <a className="link" target="_blank" href={link} rel="noreferrer">
                                 {content}
                             </a>
-                            {!content.startsWith("mailto") && <URLPreview url={content} />}
+                            {!link.startsWith("mailto") && <URLPreview url={link} />}
                         </>;
                     },
                     mention: ({ content }) => {

src/common/component/Message/Mention.tsx

@@ -23,7 +23,7 @@ const Mention = ({ uid, popover = true, cid, textOnly = false }: Props) => {
   const usersData = useAppSelector((store) => store.users.byId);
   const user = usersData[uid];
   if (!user) return null;
-  if (textOnly) return `@${user.name}`;
+  if (textOnly) return <>{`@${user.name}`}</>;
   if (!popover) return <Styled>{`@${user.name}`}</Styled>;
   return (
     <Tippy

src/common/component/Message/URLPreview.tsx

@@ -99,12 +99,18 @@ export default function URLPreview({ url = "" }) {
   );
   useEffect(() => {
     const getMetaData = async (url: string) => {
+      let defaultFavIcon = "";
+      try {
+        defaultFavIcon = `${new URL(url).origin}/favicon.ico`;
+      } catch {
+        defaultFavIcon = `${location.origin}/favicon.ico`;
+      }
       // todo
       const { data } = await getInfo(url);
       const title = data?.title || data?.site_name || "";
       const description = data?.description || "";
       const ogImage = data?.images.find((i) => !!i.url)?.url || "";
-      const favicon = data?.favicon_url || `${new URL(url).origin}/favicon.ico`;
+      const favicon = data?.favicon_url || defaultFavIcon;
       setFavicon(favicon);
       setData({ title, description, ogImage });
       // console.log("wtf url", data);

src/common/component/styled/Modal.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 const StyledModal: FC<Props> = ({ compact = false, title = "", description = "", buttons, children, className }) => {
   return (
-    <div className={clsx("rounded-lg bg-white drop-shadow", compact ? "p-4 min-w-[406] text-left" : "p-8 min-w-[440px] text-center", className)} >
+    <div className={clsx("rounded-lg bg-white drop-shadow", compact ? "p-4 min-w-[406px] text-left" : "p-8 min-w-[440px] text-center", className)} >
       {title && <h3 className="text-xl text-gray-600 mb-4 font-semibold">{title}</h3>}
       {description && <p className="text-sm text-gray-400 mb-2">{description}</p>}
       {children}