mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
update markdown
This commit is contained in:
parent
f154d8f5f4
commit
e0a14ce6cf
54
src/shared/notes/content.tsx
Normal file
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} />)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
@ -20,3 +20,4 @@ export * from './kinds/repost';
|
|||||||
export * from './kinds/sub';
|
export * from './kinds/sub';
|
||||||
export * from './skeleton';
|
export * from './skeleton';
|
||||||
export * from './actions';
|
export * from './actions';
|
||||||
|
export * from './content';
|
||||||
|
@ -1,16 +1,6 @@
|
|||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import ReactMarkdown from 'react-markdown';
|
|
||||||
import remarkGfm from 'remark-gfm';
|
|
||||||
|
|
||||||
import {
|
import { NoteActions, NoteContent, NoteMetadata } from '@shared/notes';
|
||||||
LinkPreview,
|
|
||||||
MentionUser,
|
|
||||||
NoteActions,
|
|
||||||
NoteMetadata,
|
|
||||||
VideoPreview,
|
|
||||||
} from '@shared/notes';
|
|
||||||
import { MentionNote } from '@shared/notes/mentions/note';
|
|
||||||
import { ImagePreview } from '@shared/notes/preview/image';
|
|
||||||
import { User } from '@shared/user';
|
import { User } from '@shared/user';
|
||||||
|
|
||||||
import { parser } from '@utils/parser';
|
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 overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||||
<div className="relative flex flex-col">
|
<div className="relative flex flex-col">
|
||||||
<User pubkey={event.pubkey} time={event.created_at} />
|
<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="w-11 shrink-0" />
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<ReactMarkdown
|
<NoteContent content={content} />
|
||||||
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} />)}
|
|
||||||
<NoteActions
|
<NoteActions
|
||||||
id={event.event_id}
|
id={event.event_id}
|
||||||
rootID={event.parent_id}
|
rootID={event.parent_id}
|
||||||
|
@ -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="relative overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<User pubkey={event.pubkey} time={event.created_at} />
|
<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="w-11 shrink-0" />
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
{isImage(url) && (
|
{isImage(url) && (
|
||||||
|
@ -1,16 +1,9 @@
|
|||||||
import ReactMarkdown from 'react-markdown';
|
|
||||||
import remarkGfm from 'remark-gfm';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
ImagePreview,
|
|
||||||
LinkPreview,
|
|
||||||
MentionNote,
|
|
||||||
MentionUser,
|
|
||||||
NoteActions,
|
NoteActions,
|
||||||
|
NoteContent,
|
||||||
NoteMetadata,
|
NoteMetadata,
|
||||||
NoteSkeleton,
|
NoteSkeleton,
|
||||||
RepostUser,
|
RepostUser,
|
||||||
VideoPreview,
|
|
||||||
} from '@shared/notes';
|
} from '@shared/notes';
|
||||||
import { User } from '@shared/user';
|
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="relative z-20 flex items-start gap-3">
|
||||||
<div className="w-11 shrink-0" />
|
<div className="w-11 shrink-0" />
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<ReactMarkdown
|
<NoteContent content={data.content} />
|
||||||
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} />
|
|
||||||
))}
|
|
||||||
<NoteActions
|
<NoteActions
|
||||||
id={event.event_id}
|
id={event.event_id}
|
||||||
rootID={event.parent_id}
|
rootID={event.parent_id}
|
||||||
|
@ -1,15 +1,4 @@
|
|||||||
import ReactMarkdown from 'react-markdown';
|
import { NoteActions, NoteContent, NoteSkeleton } from '@shared/notes';
|
||||||
import remarkGfm from 'remark-gfm';
|
|
||||||
|
|
||||||
import {
|
|
||||||
ImagePreview,
|
|
||||||
LinkPreview,
|
|
||||||
MentionNote,
|
|
||||||
MentionUser,
|
|
||||||
NoteActions,
|
|
||||||
NoteSkeleton,
|
|
||||||
VideoPreview,
|
|
||||||
} from '@shared/notes';
|
|
||||||
import { User } from '@shared/user';
|
import { User } from '@shared/user';
|
||||||
|
|
||||||
import { useEvent } from '@utils/hooks/useEvent';
|
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="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">
|
<div className="mb-5 flex flex-col">
|
||||||
<User pubkey={data.pubkey} time={data.created_at} />
|
<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="w-11 shrink-0" />
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<ReactMarkdown
|
<NoteContent content={data.content} />
|
||||||
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} />
|
|
||||||
))}
|
|
||||||
<NoteActions id={data.id} eventPubkey={data.pubkey} />
|
<NoteActions id={data.id} eventPubkey={data.pubkey} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,17 +1,6 @@
|
|||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import ReactMarkdown from 'react-markdown';
|
|
||||||
import remarkGfm from 'remark-gfm';
|
|
||||||
|
|
||||||
import {
|
import { NoteActions, NoteContent, NoteMetadata, SubNote } from '@shared/notes';
|
||||||
LinkPreview,
|
|
||||||
MentionUser,
|
|
||||||
NoteActions,
|
|
||||||
NoteMetadata,
|
|
||||||
SubNote,
|
|
||||||
VideoPreview,
|
|
||||||
} from '@shared/notes';
|
|
||||||
import { MentionNote } from '@shared/notes/mentions/note';
|
|
||||||
import { ImagePreview } from '@shared/notes/preview/image';
|
|
||||||
import { User } from '@shared/user';
|
import { User } from '@shared/user';
|
||||||
|
|
||||||
import { parser } from '@utils/parser';
|
import { parser } from '@utils/parser';
|
||||||
@ -35,26 +24,10 @@ export function NoteThread({
|
|||||||
<div className="relative">{reply && <SubNote id={reply} />}</div>
|
<div className="relative">{reply && <SubNote id={reply} />}</div>
|
||||||
<div className="relative flex flex-col">
|
<div className="relative flex flex-col">
|
||||||
<User pubkey={event.pubkey} time={event.created_at} />
|
<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="w-11 shrink-0" />
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<ReactMarkdown
|
<NoteContent content={content} />
|
||||||
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} />)}
|
|
||||||
<NoteActions
|
<NoteActions
|
||||||
id={event.event_id}
|
id={event.event_id}
|
||||||
rootID={event.parent_id}
|
rootID={event.parent_id}
|
||||||
|
@ -5,13 +5,11 @@ import remarkGfm from 'remark-gfm';
|
|||||||
|
|
||||||
import { createBlock } from '@libs/storage';
|
import { createBlock } from '@libs/storage';
|
||||||
|
|
||||||
import { NoteSkeleton } from '@shared/notes/skeleton';
|
import { MentionUser, NoteSkeleton } from '@shared/notes';
|
||||||
import { User } from '@shared/user';
|
import { User } from '@shared/user';
|
||||||
|
|
||||||
import { useEvent } from '@utils/hooks/useEvent';
|
import { useEvent } from '@utils/hooks/useEvent';
|
||||||
|
|
||||||
import { MentionUser } from './user';
|
|
||||||
|
|
||||||
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
||||||
const { status, data } = useEvent(id);
|
const { status, data } = useEvent(id);
|
||||||
|
|
||||||
@ -53,8 +51,17 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
|||||||
remarkPlugins={[remarkGfm]}
|
remarkPlugins={[remarkGfm]}
|
||||||
components={{
|
components={{
|
||||||
del: ({ children }) => {
|
del: ({ children }) => {
|
||||||
const pubkey = children[0] as string;
|
const key = children[0] as string;
|
||||||
return <MentionUser pubkey={pubkey.slice(3)} />;
|
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>
|
||||||
|
);
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { useProfile } from '@utils/hooks/useProfile';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
import { shortenKey } from '@utils/shortenKey';
|
||||||
|
|
||||||
@ -7,11 +5,11 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
|
|||||||
const { user } = useProfile(pubkey);
|
const { user } = useProfile(pubkey);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<button
|
||||||
to={`/app/user/${pubkey}`}
|
type="button"
|
||||||
className="break-words font-normal !text-green-400 no-underline hover:!text-green-500"
|
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)}
|
@{user?.name || user?.displayName || shortenKey(pubkey)}
|
||||||
</Link>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,6 @@
|
|||||||
import getUrls from 'get-urls';
|
import getUrls from 'get-urls';
|
||||||
import { Event, parseReferences } from 'nostr-tools';
|
import { Event, parseReferences } from 'nostr-tools';
|
||||||
import { Link } from 'react-router-dom';
|
import ReactPlayer from 'react-player';
|
||||||
import reactStringReplace from 'react-string-replace';
|
|
||||||
|
|
||||||
import { MentionUser } from '@shared/notes/mentions/user';
|
|
||||||
|
|
||||||
import { LumeEvent } from '@utils/types';
|
import { LumeEvent } from '@utils/types';
|
||||||
|
|
||||||
@ -34,7 +31,7 @@ export function parser(event: LumeEvent) {
|
|||||||
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|ogv|avi|mp3)$/)) {
|
} else if (ReactPlayer.canPlay(url)) {
|
||||||
// video
|
// video
|
||||||
content.videos.push(url);
|
content.videos.push(url);
|
||||||
// remove url from original content
|
// remove url from original content
|
||||||
|
Loading…
Reference in New Issue
Block a user