use new note parser for channel message

src/app/channel/components/messages/item.tsx

@@ -2,10 +2,12 @@ import MessageHideButton from '@lume/app/channel/components/messages/hideButton'
 import MessageMuteButton from '@lume/app/channel/components/messages/muteButton';
 import MessageReplyButton from '@lume/app/channel/components/messages/replyButton';
 import ChannelMessageUser from '@lume/app/channel/components/messages/user';
-import { messageParser } from '@lume/utils/parser';
+import { noteParser } from '@lume/app/note/components/parser';
+
+import { useMemo } from 'react';
 
 export default function ChannelMessageItem({ data }: { data: any }) {
-  const content = messageParser(data.content);
+  const content = useMemo(() => noteParser(data), [data]);
 
   return (
     <div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
@@ -13,8 +15,8 @@ export default function ChannelMessageItem({ data }: { data: any }) {
         <ChannelMessageUser pubkey={data.pubkey} time={data.created_at} />
         <div className="-mt-[17px] pl-[48px]">
           <div className="flex flex-col gap-2">
-            <div className="whitespace-pre-line break-words break-words text-sm leading-tight">
+            <div className="whitespace-pre-line break-words text-sm leading-tight">
-              {data.hide ? <span className="italic text-zinc-400">[hided message]</span> : content}
+              {data.hide ? <span className="italic text-zinc-400">[hided message]</span> : content.parsed}
             </div>
           </div>
         </div>

src/app/chat/components/messages/item.tsx

@@ -19,7 +19,7 @@ export const ChatMessageItem = memo(function MessageListItem({
       <div className="flex flex-col">
         <ChatMessageUser pubkey={data.pubkey} time={data.created_at} />
         <div className="-mt-[17px] pl-[48px]">
-          <div className="whitespace-pre-line break-words break-words text-sm leading-tight">{content}</div>
+          <div className="whitespace-pre-line break-words text-sm leading-tight">{content}</div>
         </div>
       </div>
     </div>

src/app/note/components/parser.tsx

@@ -57,12 +57,5 @@ export const noteParser = (event: Event) => {
     }
   });
 
-  // make sure no unnessary spaces are left
-  content.parsed.forEach((item: string, index: string) => {
-    if (typeof item === 'string') {
-      content.parsed[index] = item.replace(/^\x20+|\x20+$/gm, '');
-    }
-  });
-
   return content;
 };

src/utils/broadcast.tsx

@@ -1,11 +0,0 @@
-import { WRITEONLY_RELAYS } from '@lume/stores/constants';
-
-import { getEventHash, signEvent } from 'nostr-tools';
-
-export const broadcast = ({ pool, data, privkey }: { pool: any; data: any; privkey: string }) => {
-  const event = data;
-  event.id = getEventHash(event);
-  event.sig = signEvent(event, privkey);
-
-  pool.publish(event, WRITEONLY_RELAYS);
-};

src/utils/parser.tsx

@@ -1,37 +0,0 @@
-import ImagePreview from '@lume/shared/preview/image';
-import VideoPreview from '@lume/shared/preview/video';
-import YoutubePreview from '@lume/shared/preview/youtube';
-
-import reactStringReplace from 'react-string-replace';
-
-export const messageParser = (noteContent: any) => {
-  let parsedContent = noteContent.trim();
-
-  // handle urls
-  parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
-    if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
-      // image url
-      return <ImagePreview key={match + i} url={match} size="small" />;
-    } else if (match.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
-      // youtube
-      return <YoutubePreview key={match + i} url={match} size="small" />;
-    } else if (match.match(/\.(mp4|webm)$/i)) {
-      // video
-      return <VideoPreview key={match + i} url={match} size="small" />;
-    } else {
-      return (
-        <a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
-          {match}
-        </a>
-      );
-    }
-  });
-  // handle #-hashtags
-  parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
-    <span key={match + i} className="cursor-pointer text-fuchsia-500">
-      #{match}
-    </span>
-  ));
-
-  return parsedContent;
-};