mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
add hashtag support in composer
This commit is contained in:
parent
8d761caf3e
commit
e30ca0ff82
@ -69,11 +69,23 @@ export function Composer() {
|
||||
|
||||
const submit = async () => {
|
||||
setStatus('loading');
|
||||
|
||||
try {
|
||||
// get plaintext content
|
||||
const html = editor.getHTML();
|
||||
const serializedContent = convert(html, {
|
||||
selectors: [
|
||||
{ selector: 'a', options: { linkBrackets: false } },
|
||||
{ selector: 'img', options: { linkBrackets: false } },
|
||||
],
|
||||
});
|
||||
|
||||
// define tags
|
||||
let tags: string[][] = [];
|
||||
|
||||
// add reply to tags if present
|
||||
if (reply.id && reply.pubkey) {
|
||||
if (reply.root) {
|
||||
if (reply.root && reply.root.length > 1) {
|
||||
tags = [
|
||||
['e', reply.root, FULL_RELAYS[0], 'root'],
|
||||
['e', reply.id, FULL_RELAYS[0], 'reply'],
|
||||
@ -87,15 +99,16 @@ export function Composer() {
|
||||
}
|
||||
}
|
||||
|
||||
// get plaintext content
|
||||
const html = editor.getHTML();
|
||||
const serializedContent = convert(html, {
|
||||
selectors: [
|
||||
{ selector: 'a', options: { linkBrackets: false } },
|
||||
{ selector: 'img', options: { linkBrackets: false } },
|
||||
],
|
||||
// add hashtag to tags if present
|
||||
const hashtags = serializedContent
|
||||
.split(/\s/gm)
|
||||
.filter((s: string) => s.startsWith('#'));
|
||||
hashtags?.forEach((tag: string) => {
|
||||
tags.push(['t', tag.replace('#', '')]);
|
||||
});
|
||||
|
||||
console.log(tags);
|
||||
|
||||
// publish message
|
||||
await publish({ content: serializedContent, kind: 1, tags });
|
||||
|
||||
|
@ -14,10 +14,12 @@ export function NoteActions({
|
||||
id,
|
||||
pubkey,
|
||||
noOpenThread,
|
||||
root,
|
||||
}: {
|
||||
id: string;
|
||||
pubkey: string;
|
||||
noOpenThread?: boolean;
|
||||
root?: string;
|
||||
}) {
|
||||
const { add } = useBlock();
|
||||
|
||||
@ -25,7 +27,7 @@ export function NoteActions({
|
||||
<Tooltip.Provider>
|
||||
<div className="-ml-1 mt-2 inline-flex w-full items-center">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<NoteReply id={id} pubkey={pubkey} />
|
||||
<NoteReply id={id} pubkey={pubkey} root={root} />
|
||||
<NoteReaction id={id} pubkey={pubkey} />
|
||||
<NoteRepost id={id} pubkey={pubkey} />
|
||||
<NoteZap id={id} />
|
||||
|
@ -4,7 +4,15 @@ import { ReplyIcon } from '@shared/icons';
|
||||
|
||||
import { useComposer } from '@stores/composer';
|
||||
|
||||
export function NoteReply({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
export function NoteReply({
|
||||
id,
|
||||
pubkey,
|
||||
root,
|
||||
}: {
|
||||
id: string;
|
||||
pubkey: string;
|
||||
root?: string;
|
||||
}) {
|
||||
const setReply = useComposer((state) => state.setReply);
|
||||
|
||||
return (
|
||||
@ -12,7 +20,7 @@ export function NoteReply({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
<Tooltip.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setReply(id, pubkey)}
|
||||
onClick={() => setReply(id, pubkey, root)}
|
||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||
>
|
||||
<ReplyIcon className="h-5 w-5 text-zinc-300 group-hover:text-green-500" />
|
||||
|
@ -3,7 +3,7 @@ import { User } from '@shared/user';
|
||||
|
||||
import { useEvent } from '@utils/hooks/useEvent';
|
||||
|
||||
export function SubNote({ id }: { id: string }) {
|
||||
export function SubNote({ id, root }: { id: string; root?: string }) {
|
||||
const { status, data } = useEvent(id);
|
||||
|
||||
if (status === 'loading') {
|
||||
@ -31,7 +31,7 @@ export function SubNote({ id }: { id: string }) {
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<NoteContent content={data.content} />
|
||||
<NoteActions id={data.event_id} pubkey={data.pubkey} />
|
||||
<NoteActions id={data.event_id} pubkey={data.pubkey} root={root} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -21,7 +21,7 @@ export function NoteThread({
|
||||
<div className="h-min w-full px-3 py-1.5">
|
||||
<div className="overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
|
||||
<div className="relative">{root && <SubNote id={root} />}</div>
|
||||
<div className="relative">{reply && <SubNote id={reply} />}</div>
|
||||
<div className="relative">{reply && <SubNote id={reply} root={root} />}</div>
|
||||
<div className="relative flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="relative z-20 -mt-6 flex items-start gap-3">
|
||||
|
@ -6,7 +6,7 @@ import { User } from '@shared/user';
|
||||
import { parser } from '@utils/parser';
|
||||
import { LumeEvent } from '@utils/types';
|
||||
|
||||
export function Reply({ event }: { event: LumeEvent }) {
|
||||
export function Reply({ event, root }: { event: LumeEvent; root?: string }) {
|
||||
const content = useMemo(() => parser(event), [event]);
|
||||
|
||||
return (
|
||||
@ -18,7 +18,11 @@ export function Reply({ event }: { event: LumeEvent }) {
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<NoteContent content={content} />
|
||||
<NoteActions id={event.event_id || event.id} pubkey={event.pubkey} />
|
||||
<NoteActions
|
||||
id={event.event_id || event.id}
|
||||
pubkey={event.pubkey}
|
||||
root={root}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
@ -1,4 +1,3 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
@ -68,7 +67,9 @@ export function RepliesList({ id }: { id: string }) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
data.reverse().map((event: NDKEvent) => <Reply key={event.id} event={event} />)
|
||||
data
|
||||
.reverse()
|
||||
.map((event: LumeEvent) => <Reply key={event.id} event={event} root={id} />)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -4,21 +4,21 @@ interface ComposerState {
|
||||
open: boolean;
|
||||
reply: { id: string; pubkey: string; root?: string };
|
||||
toggleModal: (status: boolean) => void;
|
||||
setReply: (id: string, pubkey: string) => void;
|
||||
setReply: (id: string, pubkey: string, root?: string) => void;
|
||||
clearReply: () => void;
|
||||
}
|
||||
|
||||
export const useComposer = create<ComposerState>((set) => ({
|
||||
open: false,
|
||||
reply: { id: null, root: null, pubkey: null },
|
||||
reply: { id: null, pubkey: null, root: null },
|
||||
toggleModal: (status: boolean) => {
|
||||
set({ open: status });
|
||||
},
|
||||
setReply: (id: string, pubkey: string, root?: string) => {
|
||||
set({ reply: { id: id, root: root, pubkey: pubkey } });
|
||||
set({ reply: { id: id, pubkey: pubkey, root: root } });
|
||||
set({ open: true });
|
||||
},
|
||||
clearReply: () => {
|
||||
set({ reply: { id: null, root: null, pubkey: null } });
|
||||
set({ reply: { id: null, pubkey: null, root: null } });
|
||||
},
|
||||
}));
|
||||
|
@ -2,22 +2,15 @@ import getUrls from 'get-urls';
|
||||
import { Event, parseReferences } from 'nostr-tools';
|
||||
import ReactPlayer from 'react-player';
|
||||
|
||||
import { LumeEvent } from '@utils/types';
|
||||
import { Content, LumeEvent } from '@utils/types';
|
||||
|
||||
export function parser(event: LumeEvent) {
|
||||
const references = parseReferences(event as Event);
|
||||
const urls = getUrls(event.content);
|
||||
const references = parseReferences(event as unknown as Event);
|
||||
const urls = getUrls(event.content as unknown as string);
|
||||
|
||||
const content: {
|
||||
original: string;
|
||||
parsed: string;
|
||||
notes: string[];
|
||||
images: string[];
|
||||
videos: string[];
|
||||
links: string[];
|
||||
} = {
|
||||
original: event.content,
|
||||
parsed: event.content,
|
||||
const content: Content = {
|
||||
original: event.content as unknown as string,
|
||||
parsed: event.content as unknown as string,
|
||||
notes: [],
|
||||
images: [],
|
||||
videos: [],
|
||||
|
Loading…
Reference in New Issue
Block a user