minor fixes

This commit is contained in:
Ren Amamiya
2023-05-07 15:16:46 +07:00
parent c39987ff1c
commit 7a10d6a3d9
5 changed files with 25 additions and 20 deletions

View File

@@ -1,6 +1,7 @@
import { MentionNote } from '@lume/app/note/components/mentions/note';
import { MentionUser } from '@lume/app/note/components/mentions/user';
import ImagePreview from '@lume/app/note/components/preview/image'; import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video'; import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteMentionUser } from '@lume/app/note/components/user/mention';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
@@ -13,13 +14,18 @@ export const NoteContent = ({ content }: { content: any }) => {
linkTarget="_blank" linkTarget="_blank"
className="prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline hover:prose-a:text-fuchsia-600 hover:prose-a:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight" className="prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline hover:prose-a:text-fuchsia-600 hover:prose-a:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight"
components={{ components={{
em: ({ ...props }) => <NoteMentionUser {...props} />, em: ({ ...props }) => <MentionUser {...props} />,
}} }}
> >
{content.parsed} {content.parsed}
</ReactMarkdown> </ReactMarkdown>
{Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>} {Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
{Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>} {Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
{!Array.isArray(content.notes) && !content.notes.length ? (
<></>
) : (
content.notes.map((note: string) => <MentionNote key={note} id={note} />)
)}
</> </>
); );
}; };

View File

@@ -9,7 +9,7 @@ import { memo, useContext } from 'react';
import Skeleton from 'react-loading-skeleton'; import Skeleton from 'react-loading-skeleton';
import useSWRSubscription from 'swr/subscription'; import useSWRSubscription from 'swr/subscription';
export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) { export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const pool: any = useContext(RelayContext); const pool: any = useContext(RelayContext);
const { data, error } = useSWRSubscription(id ? id : null, (key, { next }) => { const { data, error } = useSWRSubscription(id ? id : null, (key, { next }) => {
@@ -38,10 +38,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
const content = !error && data ? noteParser(data) : null; const content = !error && data ? noteParser(data) : null;
return ( return (
<NoteWrapper <NoteWrapper href={`/app/note?id=${id}`} className="mt-3 rounded-lg border border-zinc-800 px-3 py-3">
href={`/app/note?id=${id}`}
className="mb-2 mt-3 flex flex-col rounded-lg border border-zinc-800 p-2 py-3"
>
{data ? ( {data ? (
<> <>
<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} /> <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />

View File

@@ -0,0 +1,11 @@
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
export const MentionUser = (props: { children: any[] }) => {
const pubkey = props.children[0];
const { user } = useProfile(pubkey);
return (
<span className="cursor-pointer text-fuchsia-500">@{user?.name || user?.display_name || shortenKey(pubkey)}</span>
);
};

View File

@@ -1,9 +0,0 @@
import { useProfile } from '@lume/utils/hooks/useProfile';
import { shortenKey } from '@lume/utils/shortenKey';
export const NoteMentionUser = (props: { children: any[] }) => {
const pubkey = props.children[0];
const { user } = useProfile(pubkey);
return <span className="cursor-pointer text-fuchsia-500">@{user?.username || user?.name || shortenKey(pubkey)}</span>;
};

View File

@@ -20,12 +20,12 @@ export const noteParser = (event: Event) => {
// make sure url is trimmed // make sure url is trimmed
const url = item.trim(); const url = item.trim();
if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/i)) { if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/)) {
// image url // image url
content.images.push(url); content.images.push(url);
// remove url from original content // remove url from original content
content.parsed = content.parsed.replace(url, ''); content.parsed = content.parsed.replace(url, '');
} else if (url.match(/\.(mp4|webm|mov)$/i)) { } else if (url.match(/\.(mp4|webm|mov|ogv|avi|mp3)$/)) {
// video // video
content.videos.push(url); content.videos.push(url);
// remove url from original content // remove url from original content
@@ -34,8 +34,8 @@ export const noteParser = (event: Event) => {
}); });
// map hashtag to em // map hashtag to em
content.original.match(/#(\w+)(?!:\/\/)/gi)?.forEach((item) => { content.original.match(/#(\w+)(?!:\/\/)/g)?.forEach((item) => {
content.parsed = content.parsed.replace(item, `[${item}](https://snort.social/search/#${item})`); content.parsed = content.parsed.replace(item, `[${item}](https://primal.net/search/${item})`);
}); });
// handle nostr mention // handle nostr mention