mirror of
https://github.com/lumehq/lume.git
synced 2025-03-18 05:41:53 +01:00
added content parser
This commit is contained in:
Ren Amamiya
parent
3aeb70f234
commit
00e28529dd
@ -1,75 +1,24 @@
|
||||
import NoteMetadata from '@components/note/metadata';
|
||||
import { NoteParent } from '@components/note/parent';
|
||||
import { ImagePreview } from '@components/note/preview/image';
|
||||
import { VideoPreview } from '@components/note/preview/video';
|
||||
import { NoteQuote } from '@components/note/quote';
|
||||
import { UserExtend } from '@components/user/extend';
|
||||
import { UserMention } from '@components/user/mention';
|
||||
|
||||
import destr from 'destr';
|
||||
import { contentParser } from '@utils/parser';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { memo, useMemo } from 'react';
|
||||
import reactStringReplace from 'react-string-replace';
|
||||
import { memo } from 'react';
|
||||
|
||||
export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
|
||||
const router = useRouter();
|
||||
const content = contentParser(event.content, event.tags);
|
||||
|
||||
const content = useMemo(() => {
|
||||
let parsedContent = event.content;
|
||||
// get data tags
|
||||
const tags = destr(event.tags);
|
||||
// handle urls
|
||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
||||
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
|
||||
// image url
|
||||
return <ImagePreview key={match + i} url={match} />;
|
||||
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
|
||||
// youtube
|
||||
return <VideoPreview key={match + i} url={match} />;
|
||||
} else if (match.match(/\.(mp4|webm)$/i)) {
|
||||
// video
|
||||
return <VideoPreview key={match + i} url={match} />;
|
||||
} else {
|
||||
return (
|
||||
<a key={match + i} href={match} target="_blank" rel="noreferrer">
|
||||
{match}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
// handle #-hashtags
|
||||
parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
|
||||
<span key={match + i} className="cursor-pointer text-fuchsia-500">
|
||||
#{match}
|
||||
</span>
|
||||
));
|
||||
// handle mentions
|
||||
if (tags.length > 0) {
|
||||
parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match) => {
|
||||
if (tags[match][0] === 'p') {
|
||||
// @-mentions
|
||||
return <UserMention key={tags[match][1]} pubkey={tags[match][1]} />;
|
||||
} else if (tags[match][0] === 'e') {
|
||||
// note-quotes
|
||||
return <NoteQuote key={tags[match][1]} id={tags[match][1]} />;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return parsedContent;
|
||||
}, [event.content, event.tags]);
|
||||
|
||||
const parentNote = useMemo(() => {
|
||||
const parentNote = () => {
|
||||
if (event.parent_id) {
|
||||
if (event.parent_id !== event.eventId && !event.content.includes('#[0]')) {
|
||||
return <NoteParent key={event.parent_id} id={event.parent_id} />;
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
}, [event.content, event.eventId, event.parent_id]);
|
||||
return <></>;
|
||||
};
|
||||
|
||||
const openUserPage = (e) => {
|
||||
e.stopPropagation();
|
||||
@ -90,14 +39,14 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
|
||||
onClick={(e) => openThread(e)}
|
||||
className="relative z-10 m-0 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
|
||||
>
|
||||
{parentNote}
|
||||
{parentNote()}
|
||||
<div className="relative z-10 flex flex-col">
|
||||
<div onClick={(e) => openUserPage(e)}>
|
||||
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
||||
</div>
|
||||
<div className="-mt-5 pl-[52px]">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
||||
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,29 +1,24 @@
|
||||
import NoteMetadata from '@components/note/metadata';
|
||||
import { ImagePreview } from '@components/note/preview/image';
|
||||
import { VideoPreview } from '@components/note/preview/video';
|
||||
import { NoteQuote } from '@components/note/quote';
|
||||
import { RelayContext } from '@components/relaysProvider';
|
||||
import { UserExtend } from '@components/user/extend';
|
||||
import { UserMention } from '@components/user/mention';
|
||||
|
||||
import { contentParser } from '@utils/parser';
|
||||
import { getParentID } from '@utils/transform';
|
||||
|
||||
import useLocalStorage from '@rehooks/local-storage';
|
||||
import destr from 'destr';
|
||||
import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import reactStringReplace from 'react-string-replace';
|
||||
import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
||||
|
||||
export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
||||
const [pool, relays]: any = useContext(RelayContext);
|
||||
|
||||
const [activeAccount]: any = useLocalStorage('activeAccount', {});
|
||||
const [event, setEvent] = useState(null);
|
||||
|
||||
const unsubscribe = useRef(null);
|
||||
|
||||
const content = event ? contentParser(event?.content, event.tags) : '';
|
||||
|
||||
const fetchEvent = useCallback(async () => {
|
||||
const { createNote } = await import('@utils/bindings');
|
||||
|
||||
unsubscribe.current = pool.subscribe(
|
||||
[
|
||||
{
|
||||
@ -50,7 +45,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
||||
account_id: activeAccount.id,
|
||||
}).catch(console.error);
|
||||
},
|
||||
100,
|
||||
undefined,
|
||||
undefined,
|
||||
{
|
||||
unsubscribeOnEose: true,
|
||||
@ -81,56 +76,6 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
||||
};
|
||||
}, [checkNoteExist]);
|
||||
|
||||
const content = useMemo(() => {
|
||||
let parsedContent = event ? event.content : null;
|
||||
|
||||
if (parsedContent !== null) {
|
||||
// get data tags
|
||||
const tags = destr(event.tags);
|
||||
// handle urls
|
||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
||||
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
|
||||
// image url
|
||||
return <ImagePreview key={match + i} url={match} />;
|
||||
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
|
||||
// youtube
|
||||
return <VideoPreview key={match + i} url={match} />;
|
||||
} else if (match.match(/\.(mp4|webm)$/i)) {
|
||||
// video
|
||||
return <VideoPreview key={match + i} url={match} />;
|
||||
} else {
|
||||
return (
|
||||
<a key={match + i} href={match} target="_blank" rel="noreferrer">
|
||||
{match}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
// handle #-hashtags
|
||||
parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
|
||||
<span key={match + i} className="cursor-pointer text-fuchsia-500">
|
||||
#{match}
|
||||
</span>
|
||||
));
|
||||
// handle mentions
|
||||
if (tags.length > 0) {
|
||||
parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
|
||||
if (tags[match][0] === 'p') {
|
||||
// @-mentions
|
||||
return <UserMention key={tags[match][1]} pubkey={tags[match][1]} />;
|
||||
} else if (tags[match][0] === 'e') {
|
||||
// note-quotes
|
||||
return <NoteQuote key={tags[match][1]} id={tags[match][1]} />;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return parsedContent;
|
||||
}, [event]);
|
||||
|
||||
if (event) {
|
||||
return (
|
||||
<div className="relative pb-5">
|
||||
@ -139,7 +84,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
|
||||
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
||||
<div className="-mt-5 pl-[52px]">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
||||
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import { memo } from 'react';
|
||||
|
||||
export const Placeholder = memo(function Placeholder() {
|
||||
export const Placeholder = () => {
|
||||
return (
|
||||
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-5 px-3">
|
||||
<div className="relative z-10 flex h-min animate-pulse select-text flex-col px-3 py-5">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
|
||||
<div className="flex w-full flex-1 items-start justify-between">
|
||||
@ -27,4 +25,4 @@ export const Placeholder = memo(function Placeholder() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import { RelayContext } from '@components/relaysProvider';
|
||||
import { UserExtend } from '@components/user/extend';
|
||||
import { UserMention } from '@components/user/mention';
|
||||
|
||||
import { contentParser } from '@utils/parser';
|
||||
import { getParentID } from '@utils/transform';
|
||||
|
||||
import useLocalStorage from '@rehooks/local-storage';
|
||||
import destr from 'destr';
|
||||
import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import reactStringReplace from 'react-string-replace';
|
||||
import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
||||
|
||||
export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
|
||||
const [pool, relays]: any = useContext(RelayContext);
|
||||
|
||||
const [activeAccount]: any = useLocalStorage('activeAccount', {});
|
||||
const [event, setEvent] = useState(null);
|
||||
|
||||
const unsubscribe = useRef(null);
|
||||
|
||||
const content = contentParser(event.content, event.tags);
|
||||
|
||||
const fetchEvent = useCallback(async () => {
|
||||
const { createNote } = await import('@utils/bindings');
|
||||
|
||||
@ -46,7 +45,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
|
||||
account_id: activeAccount.id,
|
||||
}).catch(console.error);
|
||||
},
|
||||
100,
|
||||
undefined,
|
||||
undefined,
|
||||
{
|
||||
unsubscribeOnEose: true,
|
||||
@ -77,40 +76,6 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
|
||||
};
|
||||
}, [checkNoteExist]);
|
||||
|
||||
const content = useMemo(() => {
|
||||
let parsedContent = event ? event.content : null;
|
||||
|
||||
if (parsedContent !== null) {
|
||||
// get data tags
|
||||
const tags = destr(event.tags);
|
||||
// handle urls
|
||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => (
|
||||
<a key={match + i} href={match} target="_blank" rel="noreferrer">
|
||||
{match}
|
||||
</a>
|
||||
));
|
||||
// handle #-hashtags
|
||||
parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
|
||||
<span key={match + i} className="cursor-pointer text-fuchsia-500">
|
||||
#{match}
|
||||
</span>
|
||||
));
|
||||
// handle mentions
|
||||
if (tags.length > 0) {
|
||||
parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
|
||||
if (tags[match][0] === 'p') {
|
||||
// @-mentions
|
||||
return <UserMention key={match + i} pubkey={tags[match][1]} />;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return parsedContent;
|
||||
}, [event]);
|
||||
|
||||
if (event) {
|
||||
return (
|
||||
<div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
|
||||
@ -118,7 +83,7 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
|
||||
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
||||
<div className="-mt-5 pl-[52px]">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
||||
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,64 +1,14 @@
|
||||
import NoteMetadata from '@components/note/metadata';
|
||||
import { ImagePreview } from '@components/note/preview/image';
|
||||
import { VideoPreview } from '@components/note/preview/video';
|
||||
import { NoteQuote } from '@components/note/quote';
|
||||
import { UserExtend } from '@components/user/extend';
|
||||
import { UserMention } from '@components/user/mention';
|
||||
|
||||
import destr from 'destr';
|
||||
import { contentParser } from '@utils/parser';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { memo, useMemo } from 'react';
|
||||
import reactStringReplace from 'react-string-replace';
|
||||
import { memo } from 'react';
|
||||
|
||||
export const RootNote = memo(function RootNote({ event }: { event: any }) {
|
||||
const router = useRouter();
|
||||
|
||||
const content = useMemo(() => {
|
||||
let parsedContent = event.content;
|
||||
// get data tags
|
||||
const tags = destr(event.tags);
|
||||
// handle urls
|
||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
||||
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
|
||||
// image url
|
||||
return <ImagePreview key={match + i} url={match} />;
|
||||
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
|
||||
// youtube
|
||||
return <VideoPreview key={match + i} url={match} />;
|
||||
} else if (match.match(/\.(mp4|webm)$/i)) {
|
||||
// video
|
||||
return <VideoPreview key={match + i} url={match} />;
|
||||
} else {
|
||||
return (
|
||||
<a key={match + i} href={match} target="_blank" rel="noreferrer">
|
||||
{match}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
// handle #-hashtags
|
||||
parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
|
||||
<span key={match + i} className="cursor-pointer text-fuchsia-500">
|
||||
#{match}
|
||||
</span>
|
||||
));
|
||||
// handle mentions
|
||||
if (tags.length > 0) {
|
||||
parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match) => {
|
||||
if (tags[match][0] === 'p') {
|
||||
// @-mentions
|
||||
return <UserMention key={tags[match][1]} pubkey={tags[match][1]} />;
|
||||
} else if (tags[match][0] === 'e') {
|
||||
// note-quotes
|
||||
return <NoteQuote key={tags[match][1]} id={tags[match][1]} />;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return parsedContent;
|
||||
}, [event.content, event.tags]);
|
||||
const content = contentParser(event.content, event.tags);
|
||||
|
||||
const openUserPage = (e) => {
|
||||
e.stopPropagation();
|
||||
@ -68,7 +18,7 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
|
||||
const openThread = (e) => {
|
||||
const selection = window.getSelection();
|
||||
if (selection.toString().length === 0) {
|
||||
router.push(`/newsfeed/${event.parent_id}`);
|
||||
router.push(`/newsfeed/${event.id}`);
|
||||
} else {
|
||||
e.stopPropagation();
|
||||
}
|
||||
@ -77,21 +27,21 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
|
||||
return (
|
||||
<div onClick={(e) => openThread(e)} className="relative z-10 flex flex-col">
|
||||
<div onClick={(e) => openUserPage(e)}>
|
||||
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
|
||||
<UserExtend pubkey={event.pubkey} time={event.created_at} />
|
||||
</div>
|
||||
<div className="-mt-5 pl-[52px]">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
||||
<div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
|
||||
<NoteMetadata
|
||||
eventID={event.eventId}
|
||||
eventID={event.id}
|
||||
eventPubkey={event.pubkey}
|
||||
eventContent={event.content}
|
||||
eventTime={event.createdAt || event.created_at}
|
||||
eventTime={event.created_at}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
55
src/utils/parser.tsx
Normal file
55
src/utils/parser.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import { ImagePreview } from '@components/note/preview/image';
|
||||
import { VideoPreview } from '@components/note/preview/video';
|
||||
import { NoteQuote } from '@components/note/quote';
|
||||
import { UserMention } from '@components/user/mention';
|
||||
|
||||
import destr from 'destr';
|
||||
import reactStringReplace from 'react-string-replace';
|
||||
|
||||
export const contentParser = (noteContent, noteTags) => {
|
||||
let parsedContent = noteContent;
|
||||
|
||||
// get data tags
|
||||
const tags = destr(noteTags);
|
||||
// handle urls
|
||||
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
|
||||
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
|
||||
// image url
|
||||
return <ImagePreview key={match + i} url={match} />;
|
||||
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
|
||||
// youtube
|
||||
return <VideoPreview key={match + i} url={match} />;
|
||||
} else if (match.match(/\.(mp4|webm)$/i)) {
|
||||
// video
|
||||
return <VideoPreview key={match + i} url={match} />;
|
||||
} else {
|
||||
return (
|
||||
<a key={match + i} href={match} target="_blank" rel="noreferrer">
|
||||
{match}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
// handle #-hashtags
|
||||
parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
|
||||
<span key={match + i} className="cursor-pointer text-fuchsia-500">
|
||||
#{match}
|
||||
</span>
|
||||
));
|
||||
// handle mentions
|
||||
if (tags.length > 0) {
|
||||
parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match) => {
|
||||
if (tags[match][0] === 'p') {
|
||||
// @-mentions
|
||||
return <UserMention key={tags[match][1]} pubkey={tags[match][1]} />;
|
||||
} else if (tags[match][0] === 'e') {
|
||||
// note-quotes
|
||||
return <NoteQuote key={tags[match][1]} id={tags[match][1]} />;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return parsedContent;
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user