minor fixes
This commit is contained in:
@@ -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} />)
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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} />
|
||||||
11
src/app/note/components/mentions/user.tsx
Normal file
11
src/app/note/components/mentions/user.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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>;
|
|
||||||
};
|
|
||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user