new parser, faster than before 50%

src/app/chats/components/list.tsx

@@ -36,10 +36,6 @@ export function ChatsList() {
           <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
           <div className="h-4 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         </div>
-        <div className="inline-flex h-10 items-center gap-2.5 border-l-2 border-transparent pl-4">
-          <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-          <div className="h-4 w-full animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-        </div>
       </div>
     );
   }

src/app/notes/text.tsx

@@ -51,7 +51,7 @@ export function TextNoteScreen() {
   const renderKind = (event: NDKEvent) => {
     switch (event.kind) {
       case NDKKind.Text:
-        return <TextNote event={event} />;
+        return <TextNote content={event.content} />;
       case NDKKind.Article:
         return <ArticleNote event={event} />;
       case 1063:

src/app/users/index.tsx

@@ -56,7 +56,7 @@ export function UserScreen() {
               ref={virtualizer.measureElement}
             >
               <NoteWrapper event={event}>
-                <TextNote event={event} />
+                <TextNote content={event.content} />
               </NoteWrapper>
             </div>
           );

src/index.css

@@ -6,6 +6,11 @@ html {
   font-size: 14px;
 }
 
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
+
 a {
   @apply cursor-default no-underline !important;
 }
@@ -15,7 +20,7 @@ button {
 }
 
 .markdown {
-  @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
+  @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
 }
 
 .ProseMirror p.is-empty::before {

src/libs/storage/provider.tsx

@@ -1,5 +1,6 @@
 import { message } from '@tauri-apps/api/dialog';
 import { platform } from '@tauri-apps/api/os';
+import { appConfigDir } from '@tauri-apps/api/path';
 import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
 import Database from 'tauri-plugin-sql-api';
 
@@ -18,10 +19,13 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
 
   async function initLumeStorage() {
     try {
+      const dir = await appConfigDir();
       const sqlite = await Database.load('sqlite:lume.db');
       const platformName = await platform();
       const lumeStorage = new LumeStorage(sqlite, platformName);
 
+      console.log('App config dir: ', dir);
+
       if (!lumeStorage.account) await lumeStorage.getActiveAccount();
       setDB(lumeStorage);
     } catch (e) {

src/shared/notes/actions.tsx

@@ -28,7 +28,7 @@ export function NoteActions({
 
   return (
     <Tooltip.Provider>
-      <div className="-ml-1 mt-4 inline-flex w-full items-center">
+      <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} root={root} />
           <NoteReaction id={id} pubkey={pubkey} />

src/shared/notes/child.tsx

@@ -39,7 +39,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
   const renderKind = (event: NDKEvent) => {
     switch (event.kind) {
       case NDKKind.Text:
-        return <TextNote event={event} />;
+        return <TextNote content={event.content} />;
       case NDKKind.Article:
         return <ArticleNote event={event} />;
       case 1063:

src/shared/notes/content.tsx

@@ -1,47 +0,0 @@
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
-import {
-  Hashtag,
-  ImagePreview,
-  LinkPreview,
-  MentionNote,
-  MentionUser,
-  VideoPreview,
-} from '@shared/notes';
-
-import { RichContent } from '@utils/types';
-
-export function NoteContent({ content, long }: { content: RichContent; long?: boolean }) {
-  if (long) {
-    return (
-      <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
-        {content as unknown as string}
-      </ReactMarkdown>
-    );
-  }
-
-  return (
-    <>
-      <ReactMarkdown
-        className="markdown"
-        remarkPlugins={[remarkGfm]}
-        components={{
-          del: ({ children }) => {
-            const key = children[0] as string;
-            if (key.startsWith('pub') && key.length > 50 && key.length < 100)
-              return <MentionUser pubkey={key.replace('pub-', '')} />;
-            if (key.startsWith('tag')) return <Hashtag tag={key.replace('tag-', '')} />;
-          },
-        }}
-      >
-        {content?.parsed}
-      </ReactMarkdown>
-      {content?.images?.length > 0 && <ImagePreview urls={content.images} />}
-      {content?.videos?.length > 0 && <VideoPreview urls={content.videos} />}
-      {content?.links?.length > 0 && <LinkPreview urls={content.links} />}
-      {content?.notes?.length > 0 &&
-        content?.notes.map((note: string) => <MentionNote key={note} id={note} />)}
-    </>
-  );
-}

src/shared/notes/index.ts

@@ -24,7 +24,6 @@ export * from './kinds/repost';
 export * from './child';
 export * from './skeleton';
 export * from './actions';
-export * from './content';
 export * from './mentions/hashtag';
 export * from './stats';
 export * from './wrapper';

src/shared/notes/kinds/articleDetail.tsx

@@ -1,13 +1,9 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { Link } from 'react-router-dom';
 import remarkGfm from 'remark-gfm';
 
-import { Image } from '@shared/image';
-
 export function ArticleDetailNote({ event }: { event: NDKEvent }) {
-  const metadata = useMemo(() => {
+  /*const metadata = useMemo(() => {
     const title = event.tags.find((tag) => tag[0] === 'title')?.[1];
     const image = event.tags.find((tag) => tag[0] === 'image')?.[1];
     const summary = event.tags.find((tag) => tag[0] === 'summary')?.[1];
@@ -27,7 +23,7 @@ export function ArticleDetailNote({ event }: { event: NDKEvent }) {
       publishedAt,
       summary,
     };
-  }, [event.id]);
+  }, [event.id]);*/
 
   return (
     <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>

src/shared/notes/kinds/repost.tsx

@@ -16,22 +16,22 @@ import { useEvent } from '@utils/hooks/useEvent';
 
 export function Repost({ event }: { event: NDKEvent }) {
   const repostID = event.tags.find((el) => el[0] === 'e')[1] ?? '';
-  const { status, data } = useEvent(repostID, event.content as unknown as string);
+  const { status, data } = useEvent(repostID, event.content);
 
   const renderKind = useCallback(
-    (event: NDKEvent) => {
+    (repostEvent: NDKEvent) => {
-      switch (event.kind) {
+      switch (repostEvent.kind) {
         case NDKKind.Text:
-          return <TextNote event={event} />;
+          return <TextNote content={repostEvent.content} />;
         case NDKKind.Article:
-          return <ArticleNote event={event} />;
+          return <ArticleNote event={repostEvent} />;
         case 1063:
-          return <FileNote event={event} />;
+          return <FileNote event={repostEvent} />;
         default:
-          return <UnknownNote event={event} />;
+          return <UnknownNote event={repostEvent} />;
       }
     },
-    [event]
+    [data]
   );
 
   if (status === 'loading') {

src/shared/notes/kinds/text.tsx

@@ -1,5 +1,3 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
@@ -14,8 +12,24 @@ import {
 
 import { parser } from '@utils/parser';
 
-export function TextNote({ event }: { event: NDKEvent }) {
+export function TextNote({ content }: { content: string }) {
-  const content = useMemo(() => parser(event), [event.id]);
+  const richContent = parser(content) ?? null;
+
+  if (!richContent) {
+    return (
+      <div>
+        <ReactMarkdown
+          className="markdown"
+          remarkPlugins={[remarkGfm]}
+          disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}
+          unwrapDisallowed={true}
+          linkTarget={'_blank'}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
+    );
+  }
 
   return (
     <div>
@@ -38,13 +52,15 @@ export function TextNote({ event }: { event: NDKEvent }) {
         unwrapDisallowed={true}
         linkTarget={'_blank'}
       >
-        {content?.parsed}
+        {richContent.parsed}
       </ReactMarkdown>
-      {content?.images?.length > 0 && <ImagePreview urls={content.images} />}
+      <div>
-      {content?.videos?.length > 0 && <VideoPreview urls={content.videos} />}
+        {richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
-      {content?.links?.length > 0 && <LinkPreview urls={content.links} />}
+        {richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
-      {content?.notes?.length > 0 &&
+        {richContent.links.length > 0 && <LinkPreview urls={richContent.links} />}
-        content?.notes.map((note: string) => <MentionNote key={note} id={note} />)}
+        {richContent.notes.length > 0 &&
+          richContent.notes.map((note: string) => <MentionNote key={note} id={note} />)}
+      </div>
     </div>
   );
 }

src/shared/notes/mentions/note.tsx

@@ -31,6 +31,19 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
     }
   };
 
+  const renderKind = (event: NDKEvent) => {
+    switch (event.kind) {
+      case NDKKind.Text:
+        return <TextNote content={event.content} />;
+      case NDKKind.Article:
+        return <ArticleNote event={event} />;
+      case 1063:
+        return <FileNote event={event} />;
+      default:
+        return <UnknownNote event={event} />;
+    }
+  };
+
   if (status === 'loading') {
     return (
       <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
@@ -42,31 +55,18 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   if (status === 'error') {
     return (
       <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl">
-        <p>Can&apos;t get event from relay</p>
+        <p>Can&apos;t get event from relay, ID: {id}</p>
       </div>
     );
   }
 
-  const renderKind = (event: NDKEvent) => {
-    switch (event.kind) {
-      case NDKKind.Text:
-        return <TextNote event={event} />;
-      case NDKKind.Article:
-        return <ArticleNote event={event} />;
-      case 1063:
-        return <FileNote event={event} />;
-      default:
-        return <UnknownNote event={event} />;
-    }
-  };
-
   return (
     <div
       onClick={(e) => openThread(e, id)}
       onKeyDown={(e) => openThread(e, id)}
       role="button"
       tabIndex={0}
-      className="cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
+      className="mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
     >
       <User pubkey={data.pubkey} time={data.created_at} size="small" />
       <div className="mt-1">{renderKind(data)}</div>

src/shared/notes/preview/image.tsx

@@ -12,7 +12,7 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
   };
 
   return (
-    <div className="mb-2 mt-3 overflow-hidden">
+    <div className="mt-3 overflow-hidden">
       <div className="flex flex-col gap-2">
         {urls.map((url) => (
           <div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">

src/shared/notes/preview/link.tsx

@@ -7,7 +7,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
   const domain = new URL(urls[0]);
 
   return (
-    <div className="mb-2 mt-3 max-w-[420px] overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl">
+    <div className="mt-3 overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl">
       {status === 'loading' ? (
         <div className="flex flex-col">
           <div className="h-44 w-full animate-pulse bg-white/10 backdrop-blur-xl" />

src/shared/notes/preview/video.tsx

@@ -2,7 +2,7 @@ import ReactPlayer from 'react-player/es6';
 
 export function VideoPreview({ urls }: { urls: string[] }) {
   return (
-    <div className="relative mb-2 mt-3 flex w-full flex-col gap-2">
+    <div className="relative mt-3 flex w-full flex-col gap-2">
       {urls.map((url) => (
         <ReactPlayer
           key={url}

src/shared/notes/replies/item.tsx

@@ -15,7 +15,7 @@ export function Reply({ event, root }: { event: NDKEventWithReplies; root?: stri
           <div className="-mt-6 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
-              <TextNote event={event} />
+              <TextNote content={event.content} />
               <NoteActions id={event.id} pubkey={event.pubkey} root={root} />
             </div>
           </div>

src/shared/notes/replies/sub.tsx

@@ -10,7 +10,7 @@ export function SubReply({ event }: { event: NDKEvent }) {
       <div className="-mt-6 flex items-start gap-3">
         <div className="w-11 shrink-0" />
         <div className="flex-1">
-          <TextNote event={event} />
+          <TextNote content={event.content} />
           <NoteActions id={event.id} pubkey={event.pubkey} />
         </div>
       </div>

src/shared/widgets/global/hashtag.tsx

@@ -58,7 +58,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
               ref={virtualizer.measureElement}
             >
               <NoteWrapper event={event}>
-                <TextNote event={event} />
+                <TextNote content={event.content} />
               </NoteWrapper>
             </div>
           );

src/shared/widgets/local/feeds.tsx

@@ -60,7 +60,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
               ref={virtualizer.measureElement}
             >
               <NoteWrapper event={event} root={dbEvent.root_id} reply={dbEvent.reply_id}>
-                <TextNote event={event} />
+                <TextNote content={event.content} />
               </NoteWrapper>
             </div>
           );

src/shared/widgets/local/network.tsx

@@ -62,7 +62,7 @@ export function LocalNetworkWidget() {
               ref={virtualizer.measureElement}
             >
               <NoteWrapper event={event} root={dbEvent.root_id} reply={dbEvent.reply_id}>
-                <TextNote event={event} />
+                <TextNote content={event.content} />
               </NoteWrapper>
             </div>
           );
@@ -122,7 +122,7 @@ export function LocalNetworkWidget() {
   useEffect(() => {
     if (db.account && db.account.network) {
       const filter: NDKFilter = {
-        kinds: [1, 6],
+        kinds: [NDKKind.Text, NDKKind.Repost],
         authors: db.account.network,
         since: db.account.last_login_at ?? Math.floor(Date.now() / 1000),
       };

src/shared/widgets/local/thread.tsx

@@ -28,7 +28,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
     (event: NDKEvent) => {
       switch (event.kind) {
         case NDKKind.Text:
-          return <TextNote event={event} />;
+          return <TextNote content={event.content} />;
         case NDKKind.Article:
           return <ArticleNote event={event} />;
         case 1063:

src/shared/widgets/local/user.tsx

@@ -64,7 +64,7 @@ export function LocalUserWidget({ params }: { params: Widget }) {
               ref={virtualizer.measureElement}
             >
               <NoteWrapper event={event}>
-                <TextNote event={event} />
+                <TextNote content={event.content} />
               </NoteWrapper>
             </div>
           );

src/shared/widgets/nostrBand/trendingNotes.tsx

@@ -52,7 +52,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
           <div className="relative flex w-full flex-col">
             {data.map((item) => (
               <NoteWrapper key={item.event.id} event={item.event}>
-                <TextNote event={item.event} />
+                <TextNote content={item.event.content} />
               </NoteWrapper>
             ))}
           </div>

src/utils/hooks/useEvent.ts

@@ -23,7 +23,7 @@ export function useEvent(id: string, embed?: string) {
 
       // get event from relay if event in db not present
       const event = await ndk.fetchEvent(id);
-      if (!event) throw new Error(`Event not found: ${id}`);
+      if (!event) throw new Error(`Event not found: ${id.toString()}`);
 
       let root: string;
       let reply: string;
@@ -50,10 +50,8 @@ export function useEvent(id: string, embed?: string) {
     },
     {
       enabled: !!ndk,
-      staleTime: Infinity,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
     }
   );
 

src/utils/parser.ts

@@ -1,73 +1,87 @@
-import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { nip19 } from 'nostr-tools';
-import getUrls from 'get-urls';
+import { EventPointer } from 'nostr-tools/lib/nip19';
-import { Event, parseReferences } from 'nostr-tools';
 
 import { RichContent } from '@utils/types';
 
-export function parser(event: NDKEvent) {
+function isURL(str: string) {
-  const references = parseReferences(event as unknown as Event);
+  const pattern = new RegExp(
-  const urls = getUrls(event.content as unknown as string);
+    '^(https?:\\/\\/)?' + // protocol
-
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
-  const content: RichContent = {
+      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-    parsed: event.content as unknown as string,
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-    notes: [],
+      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-    images: [],
+      '(\\#[-a-z\\d_]*)?$', // fragment locator
-    videos: [],
+    'i'
-    links: [],
+  );
-  };
+  return !!pattern.test(str);
-
+}
-  // parse nostr references
+
-  references?.forEach((item) => {
+export function parser(eventContent: string) {
-    const profile = item.profile;
+  try {
-    const event = item.event;
+    const content: RichContent = {
-    const addr = item.address;
+      parsed: null,
-    if (event) {
+      images: [],
-      content.notes.push(event.id);
+      videos: [],
-      content.parsed = content.parsed.replace(item.text, '');
+      links: [],
-    }
+      notes: [],
-    if (profile) {
+    };
-      content.parsed = content.parsed.replace(item.text, `~pub-${item.profile.pubkey}~`);
+
-    }
+    const parse = eventContent.split(/\s/gm).map((word) => {
-    if (addr) {
+      // url
-      content.notes.push(addr.identifier);
+      if (isURL(word)) {
-      content.parsed = content.parsed.replace(item.text, '');
+        const url = new URL(word);
-    }
+        url.search = '';
-  });
+
-
+        if (url.toString().match(/\.(jpg|jpeg|gif|png|webp|avif)$/)) {
-  // parse urls
+          // image url
-  urls?.forEach((url: string) => {
+          content.images.push(word);
-    if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/)) {
+          // remove url from original content
-      // image url
+          return word.replace(word, '');
-      content.images.push(url);
+        }
-      // remove url from original content
+
-      content.parsed = content.parsed.replace(url, '');
+        if (url.toString().match(/\.(mp4|mov|webm|wmv|flv|mts|avi|ogv|mkv|mp3|m3u8)$/)) {
-    }
+          // video
-
+          content.videos.push(word);
-    if (url.match(/\.(mp4|mov|webm|wmv|flv|mts|avi|ogv|mkv|mp3|m3u8)$/)) {
+          // remove url from original content
-      // video
+          word = word.replace(word, '');
-      content.videos.push(url);
+        }
-      // remove url from original content
+      }
-      content.parsed = content.parsed.replace(url, '');
+
-    }
+      // hashtag
-
+      if (word.startsWith('#') && word.length > 1) {
-    /*
+        return word.replace(word, `~tag-${word}~`);
-    if (content.links.length < 1) {
+      }
-      // push to store
+
-      content.links.push(url);
+      // nostr account references
-      // remove url from original content
+      if (word.startsWith('nostr:npub1')) {
-      content.parsed = content.parsed.replace(url, '');
+        const npub = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
-    }
+        return word.replace(word, `~pub-${nip19.decode(npub).data}~`);
-    */
+      }
-  });
+
-
+      // nostr account references
-  // parse hashtag
+      if (word.startsWith('nostr:note1')) {
-  const hashtags = content.parsed.split(/\s/gm).filter((s) => s.startsWith('#'));
+        const note = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
-  if (hashtags) {
+        content.notes.push(nip19.decode(note).data as string);
-    const uniqTags = new Set(hashtags);
+        return word.replace(word, '');
-    uniqTags.forEach((tag) => {
+      }
-      content.parsed = content.parsed.replaceAll(tag, `~tag-${tag}~`);
+
-    });
+      // nostr event references
-  }
+      if (word.startsWith('nostr:nevent1')) {
-
+        const nevent = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');
-  return content;
+        const decoded = nip19.decode(nevent).data as EventPointer;
+        content.notes.push(decoded.id);
+        return word.replace(word, '');
+      }
+
+      // normal word
+      return word;
+    });
+
+    // update content with parsed version
+    content.parsed = parse.join(' ');
+
+    return content;
+  } catch (e) {
+    console.error('cannot parse content, error: ', e);
+  }
 }

src/utils/types.d.ts

@@ -2,10 +2,10 @@ import { NDKEvent, NDKUserProfile } from '@nostr-dev-kit/ndk';
 
 export interface RichContent {
   parsed: string;
-  notes: string[];
   images: string[];
   videos: string[];
   links: string[];
+  notes: string[];
 }
 
 export interface DBEvent {