add hashtag support in composer

src/shared/composer/composer.tsx

@@ -69,11 +69,23 @@ export function Composer() {
 
   const submit = async () => {
     setStatus('loading');
+
     try {
+      // get plaintext content
+      const html = editor.getHTML();
+      const serializedContent = convert(html, {
+        selectors: [
+          { selector: 'a', options: { linkBrackets: false } },
+          { selector: 'img', options: { linkBrackets: false } },
+        ],
+      });
+
+      // define tags
       let tags: string[][] = [];
 
+      // add reply to tags if present
       if (reply.id && reply.pubkey) {
-        if (reply.root) {
+        if (reply.root && reply.root.length > 1) {
           tags = [
             ['e', reply.root, FULL_RELAYS[0], 'root'],
             ['e', reply.id, FULL_RELAYS[0], 'reply'],
@@ -87,15 +99,16 @@ export function Composer() {
         }
       }
 
-      // get plaintext content
+      // add hashtag to tags if present
-      const html = editor.getHTML();
+      const hashtags = serializedContent
-      const serializedContent = convert(html, {
+        .split(/\s/gm)
-        selectors: [
+        .filter((s: string) => s.startsWith('#'));
-          { selector: 'a', options: { linkBrackets: false } },
+      hashtags?.forEach((tag: string) => {
-          { selector: 'img', options: { linkBrackets: false } },
+        tags.push(['t', tag.replace('#', '')]);
-        ],
       });
 
+      console.log(tags);
+
       // publish message
       await publish({ content: serializedContent, kind: 1, tags });
 

src/shared/notes/actions.tsx

@@ -14,10 +14,12 @@ export function NoteActions({
   id,
   pubkey,
   noOpenThread,
+  root,
 }: {
   id: string;
   pubkey: string;
   noOpenThread?: boolean;
+  root?: string;
 }) {
   const { add } = useBlock();
 
@@ -25,7 +27,7 @@ export function NoteActions({
     <Tooltip.Provider>
       <div className="-ml-1 mt-2 inline-flex w-full items-center">
         <div className="inline-flex items-center gap-2">
-          <NoteReply id={id} pubkey={pubkey} />
+          <NoteReply id={id} pubkey={pubkey} root={root} />
           <NoteReaction id={id} pubkey={pubkey} />
           <NoteRepost id={id} pubkey={pubkey} />
           <NoteZap id={id} />

src/shared/notes/actions/reply.tsx

@@ -4,7 +4,15 @@ import { ReplyIcon } from '@shared/icons';
 
 import { useComposer } from '@stores/composer';
 
-export function NoteReply({ id, pubkey }: { id: string; pubkey: string }) {
+export function NoteReply({
+  id,
+  pubkey,
+  root,
+}: {
+  id: string;
+  pubkey: string;
+  root?: string;
+}) {
   const setReply = useComposer((state) => state.setReply);
 
   return (
@@ -12,7 +20,7 @@ export function NoteReply({ id, pubkey }: { id: string; pubkey: string }) {
       <Tooltip.Trigger asChild>
         <button
           type="button"
-          onClick={() => setReply(id, pubkey)}
+          onClick={() => setReply(id, pubkey, root)}
           className="group inline-flex h-7 w-7 items-center justify-center"
         >
           <ReplyIcon className="h-5 w-5 text-zinc-300 group-hover:text-green-500" />

src/shared/notes/kinds/sub.tsx

@@ -3,7 +3,7 @@ import { User } from '@shared/user';
 
 import { useEvent } from '@utils/hooks/useEvent';
 
-export function SubNote({ id }: { id: string }) {
+export function SubNote({ id, root }: { id: string; root?: string }) {
   const { status, data } = useEvent(id);
 
   if (status === 'loading') {
@@ -31,7 +31,7 @@ export function SubNote({ id }: { id: string }) {
           <div className="w-11 shrink-0" />
           <div className="flex-1">
             <NoteContent content={data.content} />
-            <NoteActions id={data.event_id} pubkey={data.pubkey} />
+            <NoteActions id={data.event_id} pubkey={data.pubkey} root={root} />
           </div>
         </div>
       </div>

src/shared/notes/kinds/thread.tsx

@@ -21,7 +21,7 @@ export function NoteThread({
     <div className="h-min w-full px-3 py-1.5">
       <div className="overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
         <div className="relative">{root && <SubNote id={root} />}</div>
-        <div className="relative">{reply && <SubNote id={reply} />}</div>
+        <div className="relative">{reply && <SubNote id={reply} root={root} />}</div>
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
           <div className="relative z-20 -mt-6 flex items-start gap-3">

src/shared/notes/replies/item.tsx

@@ -6,7 +6,7 @@ import { User } from '@shared/user';
 import { parser } from '@utils/parser';
 import { LumeEvent } from '@utils/types';
 
-export function Reply({ event }: { event: LumeEvent }) {
+export function Reply({ event, root }: { event: LumeEvent; root?: string }) {
   const content = useMemo(() => parser(event), [event]);
 
   return (
@@ -18,7 +18,11 @@ export function Reply({ event }: { event: LumeEvent }) {
             <div className="w-11 shrink-0" />
             <div className="flex-1">
               <NoteContent content={content} />
-              <NoteActions id={event.event_id || event.id} pubkey={event.pubkey} />
+              <NoteActions
+                id={event.event_id || event.id}
+                pubkey={event.pubkey}
+                root={root}
+              />
             </div>
           </div>
           <div>

src/shared/notes/replies/list.tsx

@@ -1,4 +1,3 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 
 import { useNDK } from '@libs/ndk/provider';
@@ -68,7 +67,9 @@ export function RepliesList({ id }: { id: string }) {
             </div>
           </div>
         ) : (
-          data.reverse().map((event: NDKEvent) => <Reply key={event.id} event={event} />)
+          data
+            .reverse()
+            .map((event: LumeEvent) => <Reply key={event.id} event={event} root={id} />)
         )}
       </div>
     </div>

src/stores/composer.tsx

@@ -4,21 +4,21 @@ interface ComposerState {
   open: boolean;
   reply: { id: string; pubkey: string; root?: string };
   toggleModal: (status: boolean) => void;
-  setReply: (id: string, pubkey: string) => void;
+  setReply: (id: string, pubkey: string, root?: string) => void;
   clearReply: () => void;
 }
 
 export const useComposer = create<ComposerState>((set) => ({
   open: false,
-  reply: { id: null, root: null, pubkey: null },
+  reply: { id: null, pubkey: null, root: null },
   toggleModal: (status: boolean) => {
     set({ open: status });
   },
   setReply: (id: string, pubkey: string, root?: string) => {
-    set({ reply: { id: id, root: root, pubkey: pubkey } });
+    set({ reply: { id: id, pubkey: pubkey, root: root } });
     set({ open: true });
   },
   clearReply: () => {
-    set({ reply: { id: null, root: null, pubkey: null } });
+    set({ reply: { id: null, pubkey: null, root: null } });
   },
 }));

src/utils/parser.tsx

@@ -2,22 +2,15 @@ import getUrls from 'get-urls';
 import { Event, parseReferences } from 'nostr-tools';
 import ReactPlayer from 'react-player';
 
-import { LumeEvent } from '@utils/types';
+import { Content, LumeEvent } from '@utils/types';
 
 export function parser(event: LumeEvent) {
-  const references = parseReferences(event as Event);
+  const references = parseReferences(event as unknown as Event);
-  const urls = getUrls(event.content);
+  const urls = getUrls(event.content as unknown as string);
 
-  const content: {
+  const content: Content = {
-    original: string;
+    original: event.content as unknown as string,
-    parsed: string;
+    parsed: event.content as unknown as string,
-    notes: string[];
-    images: string[];
-    videos: string[];
-    links: string[];
-  } = {
-    original: event.content,
-    parsed: event.content,
     notes: [],
     images: [],
     videos: [],