feat: add editor

packages/ark/src/components/note/buttons/reaction.tsx

@@ -66,7 +66,7 @@ export function NoteReaction() {
 							className="size-6"
 						/>
 					) : (
-						<ReactionIcon className="size-6 group-hover:text-blue-500" />
+						<ReactionIcon className="size-5 group-hover:text-blue-500" />
 					)}
 				</button>
 			</HoverCard.Trigger>

packages/ark/src/components/note/buttons/reply.tsx

@@ -1,15 +1,15 @@
 import { ReplyIcon } from "@lume/icons";
+import { editorAtom, editorValueAtom } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { createSearchParams, useNavigate } from "react-router-dom";
+import { useSetAtom } from "jotai";
+import { nip19 } from "nostr-tools";
 import { useNoteContext } from "../provider";
 
-export function NoteReply({
-	rootEventId,
-}: {
-	rootEventId?: string;
-}) {
+export function NoteReply() {
 	const event = useNoteContext();
-	const navigate = useNavigate();
+
+	const setEditorValue = useSetAtom(editorValueAtom);
+	const setIsEditorOpen = useSetAtom(editorAtom);
 
 	return (
 		<Tooltip.Provider>
@@ -17,18 +17,24 @@ export function NoteReply({
 				<Tooltip.Trigger asChild>
 					<button
 						type="button"
-						onClick={() =>
-							navigate({
-								pathname: "/new/",
-								search: createSearchParams({
-									replyTo: event.id,
-									rootReplyTo: rootEventId,
-								}).toString(),
-							})
-						}
+						onClick={() => {
+							setEditorValue([
+								{
+									type: "event",
+									// @ts-expect-error, useless
+									eventId: `nostr:${nip19.noteEncode(event.id)}`,
+									children: [{ text: "" }],
+								},
+								{
+									type: "paragraph",
+									children: [{ text: "" }],
+								},
+							]);
+							setIsEditorOpen(true);
+						}}
 						className="inline-flex items-center justify-center group h-7 w-7 text-neutral-600 dark:text-neutral-400"
 					>
-						<ReplyIcon className="size-6 group-hover:text-blue-500" />
+						<ReplyIcon className="size-5 group-hover:text-blue-500" />
 					</button>
 				</Tooltip.Trigger>
 				<Tooltip.Portal>

packages/ark/src/components/note/buttons/repost.tsx

@@ -33,7 +33,7 @@ export function NoteRepost() {
 					>
 						<RepostIcon
 							className={twMerge(
-								"size-6 group-hover:text-blue-600",
+								"size-5 group-hover:text-blue-600",
 								isRepost ? "text-blue-500" : "",
 							)}
 						/>

packages/ark/src/components/note/buttons/zap.tsx

@@ -109,7 +109,7 @@ export function NoteZap() {
 					type="button"
 					className="inline-flex items-center justify-center group h-7 w-7 text-neutral-600 dark:text-neutral-400"
 				>
-					<ZapIcon className="size-6 group-hover:text-blue-500" />
+					<ZapIcon className="size-5 group-hover:text-blue-500" />
 				</button>
 			</Dialog.Trigger>
 			<Dialog.Portal>

packages/ark/src/components/note/mentions/note.tsx

@@ -6,7 +6,8 @@ import { useEvent } from "../../../hooks/useEvent";
 
 export const MentionNote = memo(function MentionNote({
 	eventId,
-}: { eventId: string }) {
+	openable = true,
+}: { eventId: string; openable?: boolean }) {
 	const { isLoading, isError, data } = useEvent(eventId);
 
 	const renderKind = (event: NDKEvent) => {
@@ -24,7 +25,10 @@ export const MentionNote = memo(function MentionNote({
 
 	if (isLoading) {
 		return (
-			<div className="w-full p-3 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900">
+			<div
+				contentEditable={false}
+				className="w-full p-3 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900"
+			>
 				Loading
 			</div>
 		);
@@ -32,7 +36,10 @@ export const MentionNote = memo(function MentionNote({
 
 	if (isError) {
 		return (
-			<div className="w-full p-3 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900">
+			<div
+				contentEditable={false}
+				className="w-full p-3 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900"
+			>
 				Failed to fetch event
 			</div>
 		);
@@ -46,12 +53,14 @@ export const MentionNote = memo(function MentionNote({
 				</div>
 				<div className="px-3 pb-3 mt-1">
 					{renderKind(data)}
-					<Link
-						to={`/events/${data.id}`}
-						className="mt-2 text-blue-500 hover:text-blue-600"
-					>
-						Show more
-					</Link>
+					{openable ? (
+						<Link
+							to={`/events/${data.id}`}
+							className="mt-2 text-blue-500 hover:text-blue-600"
+						>
+							Show more
+						</Link>
+					) : null}
 				</div>
 			</Note.Root>
 		</Note.Provider>

packages/ark/src/components/note/root.tsx

@@ -14,6 +14,7 @@ export function NoteRoot({
 				"flex h-min w-full flex-col overflow-hidden rounded-xl bg-neutral-50 dark:bg-neutral-950",
 				className,
 			)}
+			contentEditable={false}
 		>
 			{children}
 		</div>