reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use markdown

Browse Source
This commit is contained in:
Ren Amamiya
2023-07-15 16:03:31 +07:00
parent 1f18d8bb44
commit f154d8f5f4
11 changed files with 760 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.css
View File

@@ -15,7 +15,7 @@ button {
}
.markdown {
@apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:leading-tight prose-p:last:mb-0 prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 hover:prose-a:text-fuchsia-600 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-hr:mx-0 prose-hr:my-2;
@apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mb-2 prose-p:mt-0 prose-p:last:mb-0 prose-a:break-words prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-400 hover:prose-a:text-fuchsia-500 prose-blockquote:m-0 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-hr:mx-0 prose-hr:my-2;
}
/* For Webkit-based browsers (Chrome, Safari and Opera) */

33
src/shared/notes/kinds/kind1.tsx
View File

@@ -1,6 +1,14 @@
import { useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { LinkPreview, NoteActions, NoteMetadata, VideoPreview } from '@shared/notes';
import {
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';
@@ -25,9 +33,28 @@ export function NoteKind_1({
<div className="relative z-20 -mt-5 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<div className="relative z-10 select-text whitespace-pre-line break-words text-base text-zinc-100">
<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}
</div>
</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} />}

17
src/shared/notes/kinds/repost.tsx
View File

@@ -1,7 +1,11 @@
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
ImagePreview,
LinkPreview,
MentionNote,
MentionUser,
NoteActions,
NoteMetadata,
NoteSkeleton,
@@ -45,9 +49,18 @@ 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">
<div className="relative z-10 select-text whitespace-pre-line break-all text-base text-zinc-100">
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const pubkey = children[0] as string;
return <MentionUser pubkey={pubkey.slice(3)} />;
},
}}
>
{data.content.parsed}
</div>
</ReactMarkdown>
{data.content.images.length > 0 && (
<ImagePreview urls={data.content.images} />
)}

17
src/shared/notes/kinds/sub.tsx
View File

@@ -1,7 +1,11 @@
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
ImagePreview,
LinkPreview,
MentionNote,
MentionUser,
NoteActions,
NoteSkeleton,
VideoPreview,
@@ -37,9 +41,18 @@ export function SubNote({ id }: { id: string }) {
<div className="relative z-20 -mt-5 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<div className="relative z-10 select-text whitespace-pre-line break-words text-base text-zinc-100">
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const pubkey = children[0] as string;
return <MentionUser pubkey={pubkey.slice(3)} />;
},
}}
>
{data.content.parsed}
</div>
</ReactMarkdown>
{data.content.images.length > 0 && (
<ImagePreview urls={data.content.images} />
)}

16
src/shared/notes/kinds/thread.tsx
View File

@@ -1,7 +1,10 @@
import { useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
LinkPreview,
MentionUser,
NoteActions,
NoteMetadata,
SubNote,
@@ -35,9 +38,18 @@ export function NoteThread({
<div className="relative z-20 -mt-5 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="flex-1">
<div className="relative z-10 select-text whitespace-pre-line break-words text-base text-zinc-100">
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const pubkey = children[0] as string;
return <MentionUser pubkey={pubkey.slice(3)} />;
},
}}
>
{content.parsed}
</div>
</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} />}

21
src/shared/notes/mentions/note.tsx
View File

@@ -1,5 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { memo } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { createBlock } from '@libs/storage';
@@ -8,6 +10,8 @@ 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);
@@ -43,7 +47,22 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
) : status === 'success' ? (
<>
<User pubkey={data.pubkey} time={data.created_at} size="small" />
<div className="mt-2 flex items-start gap-3">{data.content.parsed}</div>
<div className="mt-2">
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const pubkey = children[0] as string;
return <MentionUser pubkey={pubkey.slice(3)} />;
},
}}
>
{data.content.parsed.length > 200
? data.content.parsed.substring(0, 200) + '...'
: data.content.parsed}
</ReactMarkdown>
</div>
</>
) : (
<p>Failed to fetch event</p>

2
src/shared/notes/mentions/user.tsx
View File

@@ -9,7 +9,7 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
return (
<Link
to={`/app/user/${pubkey}`}
className="font-normal text-fuchsia-500 no-underline hover:text-fuchsia-600"
className="break-words font-normal !text-green-400 no-underline hover:!text-green-500"
>
@{user?.name || user?.displayName || shortenKey(pubkey)}
</Link>

2
src/shared/user.tsx
View File

@@ -71,7 +71,7 @@ export function User({
>
<h5
className={`truncate font-semibold leading-none text-zinc-100 ${
size === 'small' ? 'max-w-[8rem]' : 'max-w-[18rem]'
size === 'small' ? 'max-w-[10rem]' : 'max-w-[18rem]'
}`}
>
{user?.nip05?.toLowerCase() ||

49
src/utils/parser.tsx
View File

@@ -1,6 +1,5 @@
import getUrls from 'get-urls';
import { Event, parseReferences } from 'nostr-tools';
import { ReactNode } from 'react';
import { Link } from 'react-router-dom';
import reactStringReplace from 'react-string-replace';
@@ -14,14 +13,14 @@ export function parser(event: LumeEvent) {
const content: {
original: string;
parsed: ReactNode[];
parsed: string;
notes: string[];
images: string[];
videos: string[];
links: string[];
} = {
original: event.content,
parsed: [event.content],
parsed: event.content,
notes: [],
images: [],
videos: [],
@@ -34,62 +33,40 @@ export function parser(event: LumeEvent) {
// image url
content.images.push(url);
// remove url from original content
content.parsed = reactStringReplace(content.parsed, url, () => '');
content.parsed = content.parsed.replace(url, '');
} else if (url.match(/\.(mp4|webm|mov|ogv|avi|mp3)$/)) {
// video
content.videos.push(url);
// remove url from original content
content.parsed = reactStringReplace(content.parsed, url, () => '');
content.parsed = content.parsed.replace(url, '');
} else {
if (content.links.length < 1) {
// push to store
content.links.push(url);
// remove url from original content
content.parsed = reactStringReplace(content.parsed, url, () => '');
} else {
content.parsed = reactStringReplace(content.parsed, url, (match, i) => (
<Link
key={match + i}
to={match}
target="_blank"
className="font-normal text-fuchsia-500 no-underline hover:text-fuchsia-600"
>
{match}
</Link>
));
content.parsed = content.parsed.replace(url, '');
}
}
});
// parse hashtag
const hashtags = content.parsed.split(/\s/gm).filter((s) => s.startsWith('#'));
hashtags?.forEach((tag) => {
content.parsed = content.parsed.replace(tag, `~tag${tag}~`);
});
// parse nostr
references?.forEach((item) => {
const profile = item.profile;
const event = item.event;
if (event) {
content.notes.push(event.id);
content.parsed = reactStringReplace(content.parsed, item.text, () => null);
content.parsed = content.parsed.replace(item.text, '');
}
if (profile) {
content.parsed = reactStringReplace(content.parsed, item.text, (match, i) => (
<MentionUser key={match + i} pubkey={profile.pubkey} />
));
content.parsed = content.parsed.replace(item.text, `~pub${item.profile.pubkey}~`);
}
});
// parse hashtag
content.parsed = reactStringReplace(content.parsed, /#(\w+)/g, (match, i) => (
<span
key={match + i}
className="font-normal text-fuchsia-500 no-underline hover:text-fuchsia-600"
>
#{match}
</span>
));
// clean array
content.parsed = content.parsed.filter(
(el) => el !== '\n' && el !== '\n\n' && el !== '\n'
);
return content;
}