highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-03-29 11:11:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

update markdown

Browse Source
This commit is contained in:
Ren Amamiya 2023-07-15 21:01:27 +07:00
parent f154d8f5f4
commit e0a14ce6cf
10 changed files with 85 additions and 153 deletions

54
src/shared/notes/content.tsx Normal file

@ -0,0 +1,54 @@
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
ImagePreview,
LinkPreview,
MentionNote,
MentionUser,
VideoPreview,
} from '@shared/notes';
export function NoteContent({
content,
}: {
content: {
original: string;
parsed: string;
notes: string[];
images: string[];
videos: string[];
links: string[];
};
}) {
return (
<>
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const key = children[0] as string;
if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
if (key.startsWith('tag'))
return (
<button
type="button"
className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-orange-100 hover:text-orange-500"
>
{key.slice(3)}
</button>
);
},
}}
>
{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} />)}
</>
);
}

1
src/shared/notes/index.tsx

@ -20,3 +20,4 @@ export * from './kinds/repost';
export * from './kinds/sub';
export * from './skeleton';
export * from './actions';
export * from './content';

42
src/shared/notes/kinds/kind1.tsx

@ -1,16 +1,6 @@
import { useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
LinkPreview,
MentionUser,
NoteActions,
NoteMetadata,
VideoPreview,
} from '@shared/notes';
import { MentionNote } from '@shared/notes/mentions/note';
import { ImagePreview } from '@shared/notes/preview/image';
import { NoteActions, NoteContent, NoteMetadata } from '@shared/notes';
import { User } from '@shared/user';
import { parser } from '@utils/parser';
@ -30,36 +20,10 @@ export function NoteKind_1({
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
<div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-5 flex items-start gap-3">
<div className="relative z-20 -mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const key = children[0] as string;
if (key.startsWith('pub'))
return <MentionUser pubkey={key.slice(3)} />;
if (key.startsWith('tag'))
return (
<button
type="button"
className="font-normal text-orange-400 no-underline hover:text-orange-500"
>
{key.slice(3)}
</button>
);
},
}}
>
{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} />)}
<NoteContent content={content} />
<NoteActions
id={event.event_id}
rootID={event.parent_id}

2
src/shared/notes/kinds/kind1063.tsx

@ -16,7 +16,7 @@ export function NoteKind_1063({ event }: { event: LumeEvent }) {
<div className="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
<div className="flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-5 flex items-start gap-3">
<div className="relative z-20 -mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
{isImage(url) && (

33
src/shared/notes/kinds/repost.tsx

@ -1,16 +1,9 @@
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
ImagePreview,
LinkPreview,
MentionNote,
MentionUser,
NoteActions,
NoteContent,
NoteMetadata,
NoteSkeleton,
RepostUser,
VideoPreview,
} from '@shared/notes';
import { User } from '@shared/user';
@ -49,29 +42,7 @@ export function Repost({ event }: { event: LumeEvent }) {
<div className="relative z-20 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const pubkey = children[0] as string;
return <MentionUser pubkey={pubkey.slice(3)} />;
},
}}
>
{data.content.parsed}
</ReactMarkdown>
{data.content.images.length > 0 && (
<ImagePreview urls={data.content.images} />
)}
{data.content.videos.length > 0 && (
<VideoPreview urls={data.content.videos} />
)}
{data.content.links.length > 0 && <LinkPreview urls={data.content.links} />}
{data.content.notes.length > 0 &&
data.content.notes.map((note: string) => (
<MentionNote key={note} id={note} />
))}
<NoteContent content={data.content} />
<NoteActions
id={event.event_id}
rootID={event.parent_id}

39
src/shared/notes/kinds/sub.tsx

@ -1,15 +1,4 @@
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
ImagePreview,
LinkPreview,
MentionNote,
MentionUser,
NoteActions,
NoteSkeleton,
VideoPreview,
} from '@shared/notes';
import { NoteActions, NoteContent, NoteSkeleton } from '@shared/notes';
import { User } from '@shared/user';
import { useEvent } from '@utils/hooks/useEvent';
@ -38,32 +27,10 @@ export function SubNote({ id }: { id: string }) {
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
<div className="mb-5 flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} />
<div className="relative z-20 -mt-5 flex items-start gap-3">
<div className="relative z-20 -mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const pubkey = children[0] as string;
return <MentionUser pubkey={pubkey.slice(3)} />;
},
}}
>
{data.content.parsed}
</ReactMarkdown>
{data.content.images.length > 0 && (
<ImagePreview urls={data.content.images} />
)}
{data.content.videos.length > 0 && (
<VideoPreview urls={data.content.videos} />
)}
{data.content.links.length > 0 && <LinkPreview urls={data.content.links} />}
{data.content.notes.length > 0 &&
data.content.notes.map((note: string) => (
<MentionNote key={note} id={note} />
))}
<NoteContent content={data.content} />
<NoteActions id={data.id} eventPubkey={data.pubkey} />
</div>
</div>

33
src/shared/notes/kinds/thread.tsx

@ -1,17 +1,6 @@
import { useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
LinkPreview,
MentionUser,
NoteActions,
NoteMetadata,
SubNote,
VideoPreview,
} from '@shared/notes';
import { MentionNote } from '@shared/notes/mentions/note';
import { ImagePreview } from '@shared/notes/preview/image';
import { NoteActions, NoteContent, NoteMetadata, SubNote } from '@shared/notes';
import { User } from '@shared/user';
import { parser } from '@utils/parser';
@ -35,26 +24,10 @@ export function NoteThread({
<div className="relative">{reply && <SubNote id={reply} />}</div>
<div className="relative flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="relative z-20 -mt-5 flex items-start gap-3">
<div className="relative z-20 -mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const pubkey = children[0] as string;
return <MentionUser pubkey={pubkey.slice(3)} />;
},
}}
>
{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} />)}
<NoteContent content={content} />
<NoteActions
id={event.event_id}
rootID={event.parent_id}

17
src/shared/notes/mentions/note.tsx

@ -5,13 +5,11 @@ import remarkGfm from 'remark-gfm';
import { createBlock } from '@libs/storage';
import { NoteSkeleton } from '@shared/notes/skeleton';
import { MentionUser, NoteSkeleton } from '@shared/notes';
import { User } from '@shared/user';
import { useEvent } from '@utils/hooks/useEvent';
import { MentionUser } from './user';
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const { status, data } = useEvent(id);
@ -53,8 +51,17 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const pubkey = children[0] as string;
return <MentionUser pubkey={pubkey.slice(3)} />;
const key = children[0] as string;
if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
if (key.startsWith('tag'))
return (
<button
type="button"
className="font-normal text-orange-400 no-underline hover:text-orange-500"
>
{key.slice(3)}
</button>
);
},
}}
>

10
src/shared/notes/mentions/user.tsx

@ -1,5 +1,3 @@
import { Link } from 'react-router-dom';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
@ -7,11 +5,11 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
const { user } = useProfile(pubkey);
return (
<Link
to={`/app/user/${pubkey}`}
className="break-words font-normal !text-green-400 no-underline hover:!text-green-500"
<button
type="button"
className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-blue-100 hover:text-blue-500"
>
@{user?.name || user?.displayName || shortenKey(pubkey)}
</Link>
</button>
);
}

7
src/utils/parser.tsx

@ -1,9 +1,6 @@
import getUrls from 'get-urls';
import { Event, parseReferences } from 'nostr-tools';
import { Link } from 'react-router-dom';
import reactStringReplace from 'react-string-replace';
import { MentionUser } from '@shared/notes/mentions/user';
import ReactPlayer from 'react-player';
import { LumeEvent } from '@utils/types';
@ -34,7 +31,7 @@ export function parser(event: LumeEvent) {
content.images.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
} else if (url.match(/\.(mp4|webm|mov|ogv|avi|mp3)$/)) {
} else if (ReactPlayer.canPlay(url)) {
// video
content.videos.push(url);
// remove url from original content