feat: new post editor

src/commands.gen.ts

@@ -160,6 +160,14 @@ async toggleContact(id: string, alias: string | null) : Promise<Result<string, s
     else return { status: "error", error: e  as any };
 }
 },
+async getMentionList() : Promise<Result<Mention[], string>> {
+    try {
+    return { status: "ok", data: await TAURI_INVOKE("get_mention_list") };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
 async getLumeStore(key: string) : Promise<Result<string, string>> {
     try {
     return { status: "ok", data: await TAURI_INVOKE("get_lume_store", { key }) };
@@ -466,6 +474,7 @@ subscription: "subscription"
 /** user-defined types **/
 
 export type Column = { label: string; url: string; x: number; y: number; width: number; height: number }
+export type Mention = { pubkey: string; avatar: string; display_name: string; name: string }
 export type Meta = { content: string; images: string[]; videos: string[]; events: string[]; mentions: string[]; hashtags: string[] }
 export type NewSettings = Settings
 export type Profile = { name: string; display_name: string; about: string | null; picture: string; banner: string | null; nip05: string | null; lud16: string | null; website: string | null }

src/commons.ts

@@ -15,8 +15,6 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import updateLocale from "dayjs/plugin/updateLocale";
 import { decode } from "light-bolt11-decoder";
-import { type BaseEditor, Transforms } from "slate";
-import { ReactEditor } from "slate-react";
 import { twMerge } from "tailwind-merge";
 import type { RichEvent, Settings } from "./commands.gen";
 import { LumeEvent } from "./system";
@@ -59,51 +57,6 @@ export const isImageUrl = (url: string) => {
 	}
 };
 
-export const insertImage = (editor: ReactEditor | BaseEditor, url: string) => {
-	const text = { text: "" };
-	const image = [
-		{
-			type: "image",
-			url,
-			children: [text],
-		},
-	];
-	const extraText = [
-		{
-			type: "paragraph",
-			children: [text],
-		},
-	];
-
-	// @ts-ignore, idk
-	ReactEditor.focus(editor);
-	Transforms.insertNodes(editor, image);
-	Transforms.insertNodes(editor, extraText);
-};
-
-export const insertNostrEvent = (
-	editor: ReactEditor | BaseEditor,
-	eventId: string,
-) => {
-	const text = { text: "" };
-	const event = [
-		{
-			type: "event",
-			eventId: `nostr:${eventId}`,
-			children: [text],
-		},
-	];
-	const extraText = [
-		{
-			type: "paragraph",
-			children: [text],
-		},
-	];
-
-	Transforms.insertNodes(editor, event);
-	Transforms.insertNodes(editor, extraText);
-};
-
 export function formatCreatedAt(time: number, message = false) {
 	let formated: string;
 
@@ -257,18 +210,16 @@ export async function upload(filePath?: string) {
 	];
 
 	const selected =
-		filePath ||
-		(
-			await open({
-				multiple: false,
-				filters: [
-					{
-						name: "Media",
-						extensions: allowExts,
-					},
-				],
-			})
-		).path;
+		filePath ??
+		(await open({
+			multiple: false,
+			filters: [
+				{
+					name: "Media",
+					extensions: allowExts,
+				},
+			],
+		}));
 
 	// User cancelled action
 	if (!selected) return null;
@@ -331,6 +282,7 @@ export const appSettings = new Store<Settings>({
 	image_resize_service: "https://wsrv.nl",
 	use_relay_hint: true,
 	content_warning: true,
+	trusted_only: true,
 	display_avatar: true,
 	display_zap_button: true,
 	display_repost_button: true,

src/routes/editor/-components/media.tsx

@@ -1,20 +1,31 @@
-import { insertImage, isImagePath, upload } from "@/commons";
+import { isImagePath, upload } from "@/commons";
 import { Spinner } from "@/components";
 import { Images } from "@phosphor-icons/react";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { message } from "@tauri-apps/plugin-dialog";
-import { useEffect, useTransition } from "react";
-import { useSlateStatic } from "slate-react";
+import {
+	type Dispatch,
+	type SetStateAction,
+	useEffect,
+	useTransition,
+} from "react";
 
-export function MediaButton() {
-	const editor = useSlateStatic();
+export function MediaButton({
+	setText,
+	setAttaches,
+}: {
+	setText: Dispatch<SetStateAction<string>>;
+	setAttaches: Dispatch<SetStateAction<string[]>>;
+}) {
 	const [isPending, startTransition] = useTransition();
 
 	const uploadMedia = () => {
 		startTransition(async () => {
 			try {
 				const image = await upload();
-				return insertImage(editor, image);
+				setText((prev) => `${prev}\n${image}`);
+				setAttaches((prev) => [...prev, image]);
+				return;
 			} catch (e) {
 				await message(String(e), { title: "Upload", kind: "error" });
 				return;
@@ -32,7 +43,8 @@ export function MediaButton() {
 				for (const item of items) {
 					if (isImagePath(item)) {
 						const image = await upload(item);
-						insertImage(editor, image);
+						setText((prev) => `${prev}\n${image}`);
+						setAttaches((prev) => [...prev, image]);
 					}
 				}
 

src/routes/editor/index.tsx

@@ -1,23 +1,20 @@
-import { cn, insertImage, insertNostrEvent, isImageUrl } from "@/commons";
+// @ts-nocheck
+import { type Mention, commands } from "@/commands.gen";
+import { cn } from "@/commons";
 import { Spinner } from "@/components";
 import { Note } from "@/components/note";
-import { MentionNote } from "@/components/note/mentions/note";
 import { User } from "@/components/user";
 import { LumeEvent, useEvent } from "@/system";
 import { Feather } from "@phosphor-icons/react";
 import { createFileRoute } from "@tanstack/react-router";
 import { nip19 } from "nostr-tools";
-import { useEffect, useState } from "react";
-import { type Descendant, Node, Transforms, createEditor } from "slate";
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
+import { createPortal } from "react-dom";
 import {
-	Editable,
-	ReactEditor,
-	Slate,
-	useFocused,
-	useSelected,
-	useSlateStatic,
-	withReact,
-} from "slate-react";
+	RichTextarea,
+	type RichTextareaHandle,
+	createRegexRenderer,
+} from "rich-textarea";
 import { MediaButton } from "./-components/media";
 import { PowButton } from "./-components/pow";
 import { WarningButton } from "./-components/warning";
@@ -27,11 +24,39 @@ type EditorSearch = {
 	quote: string;
 };
 
-type EditorElement = {
-	type: string;
-	children: Descendant[];
-	eventId?: string;
-};
+const MENTION_REG = /\B@([\-+\w]*)$/;
+const MAX_LIST_LENGTH = 5;
+
+const renderer = createRegexRenderer([
+	[
+		/https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+/g,
+		({ children, key, value }) => (
+			<a
+				key={key}
+				href={value}
+				target="_blank"
+				rel="noreferrer"
+				className="text-blue-500 !underline"
+			>
+				{children}
+			</a>
+		),
+	],
+	[
+		/(?:^|\W)nostr:(\w+)(?!\w)/g,
+		({ children, key, value }) => (
+			<a
+				key={key}
+				href={value}
+				target="_blank"
+				rel="noreferrer"
+				className="text-blue-500"
+			>
+				{children}
+			</a>
+		),
+	],
+]);
 
 export const Route = createFileRoute("/editor/")({
 	validateSearch: (search: Record<string, string>): EditorSearch => {
@@ -40,201 +65,295 @@ export const Route = createFileRoute("/editor/")({
 			quote: search.quote,
 		};
 	},
-	beforeLoad: ({ search }) => {
-		let initialValue: EditorElement[];
+	beforeLoad: async ({ search }) => {
+		let users: Mention[] = [];
+		let initialValue: string;
 
 		if (search?.quote?.length) {
-			const eventId = nip19.noteEncode(search.quote);
-			initialValue = [
-				{
-					type: "paragraph",
-					children: [{ text: "" }],
-				},
-				{
-					type: "event",
-					eventId: `nostr:${eventId}`,
-					children: [{ text: "" }],
-				},
-			];
+			initialValue = `\nnostr:${nip19.noteEncode(search.quote)}`;
 		} else {
-			initialValue = [
-				{
-					type: "paragraph",
-					children: [{ text: "" }],
-				},
-			];
+			initialValue = "";
 		}
 
-		return { initialValue };
+		const res = await commands.getMentionList();
+
+		if (res.status === "ok") {
+			users = res.data;
+		}
+
+		return { users, initialValue };
 	},
 	component: Screen,
 });
 
 function Screen() {
 	const { reply_to } = Route.useSearch();
-	const { initialValue } = Route.useRouteContext();
+	const { users, initialValue } = Route.useRouteContext();
 
-	const [editorValue, setEditorValue] = useState<EditorElement[]>(null);
-	const [loading, setLoading] = useState(false);
+	const [isPending, startTransition] = useTransition();
+	const [text, setText] = useState("");
+	const [attaches, setAttaches] = useState<string[]>(null);
 	const [warning, setWarning] = useState({ enable: false, reason: "" });
 	const [difficulty, setDifficulty] = useState({ enable: false, num: 21 });
-	const [editor] = useState(() =>
-		withMentions(withNostrEvent(withImages(withReact(createEditor())))),
+	const [index, setIndex] = useState<number>(0);
+	const [pos, setPos] = useState<{
+		top: number;
+		left: number;
+		caret: number;
+	} | null>(null);
+
+	const ref = useRef<RichTextareaHandle>(null);
+	const targetText = pos ? text.slice(0, pos.caret) : text;
+	const match = pos && targetText.match(MENTION_REG);
+	const name = match?.[1] ?? "";
+	const filtered = useMemo(
+		() =>
+			users
+				.filter((u) => u.name.toLowerCase().startsWith(name.toLowerCase()))
+				.slice(0, MAX_LIST_LENGTH),
+		[name],
 	);
 
-	const reset = () => {
-		// @ts-expect-error, backlog
-		editor.children = [{ type: "paragraph", children: [{ text: "" }] }];
-		setEditorValue([{ type: "paragraph", children: [{ text: "" }] }]);
-	};
+	const insert = (i: number) => {
+		if (!ref.current || !pos) return;
 
-	const serialize = (nodes: Descendant[]) => {
-		return nodes
-			.map((n) => {
-				// @ts-expect-error, backlog
-				if (n.type === "image") return n.url;
-				// @ts-expect-error, backlog
-				if (n.type === "event") return n.eventId;
+		const selected = filtered[i];
 
-				// @ts-expect-error, backlog
-				if (n.children.length) {
-					// @ts-expect-error, backlog
-					return n.children
-						.map((n) => {
-							if (n.type === "mention") return n.npub;
-							return Node.string(n).trim();
-						})
-						.join(" ");
-				}
+		ref.current.setRangeText(
+			`nostr:${selected.pubkey} `,
+			pos.caret - name.length - 1,
+			pos.caret,
+			"end",
+		);
 
-				return Node.string(n);
-			})
-			.join("\n");
+		setPos(null);
+		setIndex(0);
 	};
 
 	const publish = async () => {
-		try {
-			// start loading
-			setLoading(true);
+		startTransition(async () => {
+			try {
+				const content = text.trim();
 
-			const content = serialize(editor.children);
-			const eventId = await LumeEvent.publish(
-				content,
-				warning.enable && warning.reason.length ? warning.reason : null,
-				difficulty.enable && difficulty.num > 0 ? difficulty.num : null,
-				reply_to,
-			);
+				await LumeEvent.publish(
+					content,
+					warning.enable && warning.reason.length ? warning.reason : null,
+					difficulty.num,
+					reply_to,
+				);
 
-			if (eventId) {
-				// stop loading
-				setLoading(false);
-				// reset form
-				reset();
+				setText("");
+			} catch {
+				return;
 			}
-		} catch (e) {
-			setLoading(false);
-		}
+		});
 	};
 
 	useEffect(() => {
-		setEditorValue(initialValue);
+		if (initialValue?.length) {
+			setText(initialValue);
+		}
 	}, [initialValue]);
 
-	if (!editorValue) return null;
-
 	return (
 		<div className="flex flex-col w-full h-full">
-			<Slate editor={editor} initialValue={editorValue}>
-				<div data-tauri-drag-region className="h-11 shrink-0" />
-				<div className="flex flex-col flex-1 overflow-y-auto">
-					{reply_to?.length ? (
-						<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
-							<span className="text-sm font-semibold">Reply to:</span>
-							<ChildNote id={reply_to} />
-						</div>
-					) : null}
-					<div className="px-4 py-4 overflow-y-auto">
-						<Editable
-							key={JSON.stringify(editorValue)}
-							autoFocus={true}
-							autoCapitalize="none"
-							autoCorrect="none"
-							spellCheck={false}
-							renderElement={(props) => <Element {...props} />}
-							placeholder={
-								reply_to ? "Type your reply..." : "What're you up to?"
-							}
-							className="focus:outline-none"
-						/>
-					</div>
-				</div>
-				{warning.enable ? (
-					<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
-						<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
-							Reason:
-						</span>
-						<input
-							type="text"
-							placeholder="NSFW..."
-							value={warning.reason}
-							onChange={(e) =>
-								setWarning((prev) => ({ ...prev, reason: e.target.value }))
-							}
-							className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
-						/>
+			<div data-tauri-drag-region className="h-11 shrink-0" />
+			<div className="flex flex-col flex-1 overflow-y-auto">
+				{reply_to?.length ? (
+					<div className="flex flex-col gap-2 px-3.5 pb-3 border-b border-black/5 dark:border-white/5">
+						<span className="text-sm font-semibold">Reply to:</span>
+						<EmbedNote id={reply_to} />
 					</div>
 				) : null}
-				{difficulty.enable ? (
-					<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
-						<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
-							Difficulty:
-						</span>
-						<input
-							type="text"
-							inputMode="numeric"
-							pattern="[0-9]"
-							onKeyDown={(event) => {
-								if (!/[0-9]/.test(event.key)) {
-									event.preventDefault();
+				<div className="p-4 overflow-y-auto h-full">
+					<RichTextarea
+						ref={ref}
+						value={text}
+						placeholder={reply_to ? "Type your reply..." : "What're you up to?"}
+						style={{ width: "100%", height: "100%" }}
+						className="text-[15px] leading-normal resize-none border-none focus:outline-none focus:ring-0 placeholder:text-neutral-500 placeholder:pt-[1.5px] placeholder:pl-2"
+						onChange={(e) => setText(e.target.value)}
+						onKeyDown={(e) => {
+							if (!pos || !filtered.length) return;
+							switch (e.code) {
+								case "ArrowUp": {
+									e.preventDefault();
+									const nextIndex =
+										index <= 0 ? filtered.length - 1 : index - 1;
+									setIndex(nextIndex);
+									break;
 								}
-							}}
-							placeholder="21"
-							defaultValue={difficulty.num}
-							onChange={(e) =>
-								setWarning((prev) => ({ ...prev, num: Number(e.target.value) }))
+								case "ArrowDown": {
+									e.preventDefault();
+									const prevIndex =
+										index >= filtered.length - 1 ? 0 : index + 1;
+									setIndex(prevIndex);
+									break;
+								}
+								case "Enter":
+									e.preventDefault();
+									insert(index);
+									break;
+								case "Escape":
+									e.preventDefault();
+									setPos(null);
+									setIndex(0);
+									break;
+								default:
+									break;
 							}
-							className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
-						/>
-					</div>
-				) : null}
-				<div
-					data-tauri-drag-region
-					className="flex items-center w-full h-16 gap-4 px-4 border-t divide-x divide-black/5 dark:divide-white/5 shrink-0 border-black/5 dark:border-white/5"
-				>
-					<button
-						type="button"
-						onClick={() => publish()}
-						className="inline-flex items-center justify-center h-8 gap-1 px-2.5 text-sm font-medium rounded-lg bg-black/10 w-max hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+						}}
+						onSelectionChange={(r) => {
+							if (
+								r.focused &&
+								MENTION_REG.test(text.slice(0, r.selectionStart))
+							) {
+								setPos({
+									top: r.top + r.height,
+									left: r.left,
+									caret: r.selectionStart,
+								});
+								setIndex(0);
+							} else {
+								setPos(null);
+								setIndex(0);
+							}
+						}}
 					>
-						{loading ? (
-							<Spinner className="size-4" />
-						) : (
-							<Feather className="size-4" weight="fill" />
-						)}
-						Publish
-					</button>
-					<div className="inline-flex items-center flex-1 gap-2 pl-4">
-						<MediaButton />
-						<WarningButton setWarning={setWarning} />
-						<PowButton setDifficulty={setDifficulty} />
-					</div>
+						{renderer}
+					</RichTextarea>
+					{pos
+						? createPortal(
+								<Menu
+									top={pos.top}
+									left={pos.left}
+									users={filtered}
+									index={index}
+									insert={insert}
+								/>,
+								document.body,
+							)
+						: null}
 				</div>
-			</Slate>
+			</div>
+			{warning.enable ? (
+				<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
+					<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
+						Reason:
+					</span>
+					<input
+						type="text"
+						placeholder="NSFW..."
+						value={warning.reason}
+						onChange={(e) =>
+							setWarning((prev) => ({ ...prev, reason: e.target.value }))
+						}
+						className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
+					/>
+				</div>
+			) : null}
+			{difficulty.enable ? (
+				<div className="flex items-center w-full px-4 border-t h-11 shrink-0 border-black/5 dark:border-white/5">
+					<span className="text-sm shrink-0 text-black/50 dark:text-white/50">
+						Difficulty:
+					</span>
+					<input
+						type="text"
+						inputMode="numeric"
+						pattern="[0-9]"
+						onKeyDown={(event) => {
+							if (!/[0-9]/.test(event.key)) {
+								event.preventDefault();
+							}
+						}}
+						placeholder="21"
+						defaultValue={difficulty.num}
+						onChange={(e) =>
+							setWarning((prev) => ({ ...prev, num: Number(e.target.value) }))
+						}
+						className="flex-1 text-sm bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-black/50 dark:placeholder:text-white/50"
+					/>
+				</div>
+			) : null}
+			<div
+				data-tauri-drag-region
+				className="flex items-center w-full h-16 gap-4 px-4 border-t divide-x divide-black/5 dark:divide-white/5 shrink-0 border-black/5 dark:border-white/5"
+			>
+				<button
+					type="button"
+					onClick={() => publish()}
+					className="inline-flex items-center justify-center h-8 gap-1 px-2.5 text-sm font-medium rounded-lg bg-black/10 w-max hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+				>
+					{isPending ? (
+						<Spinner className="size-4" />
+					) : (
+						<Feather className="size-4" weight="fill" />
+					)}
+					Publish
+				</button>
+				<div className="inline-flex items-center flex-1 gap-2 pl-4">
+					<MediaButton setText={setText} setAttaches={setAttaches} />
+					<WarningButton setWarning={setWarning} />
+					<PowButton setDifficulty={setDifficulty} />
+				</div>
+			</div>
 		</div>
 	);
 }
 
-function ChildNote({ id }: { id: string }) {
+function Menu({
+	users,
+	index,
+	top,
+	left,
+	insert,
+}: {
+	users: Mention[];
+	index: number;
+	top: number;
+	left: number;
+	insert: (index: number) => void;
+}) {
+	return (
+		<div
+			style={{
+				top: top,
+				left: left,
+			}}
+			className="fixed w-[200px] text-sm bg-white dark:bg-black shadow-lg shadow-neutral-500/20 rounded-lg overflow-hidden"
+		>
+			{users.map((u, i) => (
+				<div
+					key={u.pubkey}
+					className={cn(
+						"flex items-center gap-1.5 p-2",
+						index === i ? "bg-neutral-100 dark:bg-neutral-900" : null,
+					)}
+					onMouseDown={(e) => {
+						e.preventDefault();
+						insert(i);
+					}}
+				>
+					<div className="size-7 shrink-0">
+						{u.avatar?.length ? (
+							<img
+								src={u.avatar}
+								className="size-7 rounded-full outline outline-1 -outline-offset-1 outline-black/15"
+								loading="lazy"
+								decoding="async"
+							/>
+						) : (
+							<div className="size-7 rounded-full bg-blue-500" />
+						)}
+					</div>
+					{u.name}
+				</div>
+			))}
+		</div>
+	);
+}
+
+function EmbedNote({ id }: { id: string }) {
 	const { isLoading, isError, data } = useEvent(id);
 
 	if (isLoading) {
@@ -258,142 +377,3 @@ function ChildNote({ id }: { id: string }) {
 		</Note.Provider>
 	);
 }
-
-const withNostrEvent = (editor: ReactEditor) => {
-	const { insertData, isVoid } = editor;
-
-	editor.isVoid = (element) => {
-		// @ts-expect-error, wtf
-		return element.type === "event" ? true : isVoid(element);
-	};
-
-	editor.insertData = (data) => {
-		const text = data.getData("text/plain");
-
-		if (text.startsWith("nevent") || text.startsWith("note")) {
-			insertNostrEvent(editor, text);
-		} else {
-			insertData(data);
-		}
-	};
-
-	return editor;
-};
-
-const withMentions = (editor: ReactEditor) => {
-	const { isInline, isVoid, markableVoid } = editor;
-
-	editor.isInline = (element) => {
-		// @ts-expect-error, wtf
-		return element.type === "mention" ? true : isInline(element);
-	};
-
-	editor.isVoid = (element) => {
-		// @ts-expect-error, wtf
-		return element.type === "mention" ? true : isVoid(element);
-	};
-
-	editor.markableVoid = (element) => {
-		// @ts-expect-error, wtf
-		return element.type === "mention" || markableVoid(element);
-	};
-
-	return editor;
-};
-
-const withImages = (editor: ReactEditor) => {
-	const { insertData, isVoid } = editor;
-
-	editor.isVoid = (element) => {
-		// @ts-expect-error, wtf
-		return element.type === "image" ? true : isVoid(element);
-	};
-
-	editor.insertData = (data) => {
-		const text = data.getData("text/plain");
-
-		if (isImageUrl(text)) {
-			insertImage(editor, text);
-		} else {
-			insertData(data);
-		}
-	};
-
-	return editor;
-};
-
-const Image = ({ attributes, element, children }) => {
-	const editor = useSlateStatic();
-	const selected = useSelected();
-	const focused = useFocused();
-	const path = ReactEditor.findPath(editor as ReactEditor, element);
-
-	return (
-		<div {...attributes}>
-			{children}
-			<img
-				src={element.url}
-				alt={element.url}
-				className={cn(
-					"my-2 h-auto w-1/2 rounded-lg object-cover ring-2 outline outline-1 -outline-offset-1 outline-black/15",
-					selected && focused ? "ring-blue-500" : "ring-transparent",
-				)}
-				onClick={() => Transforms.removeNodes(editor, { at: path })}
-				onKeyDown={() => Transforms.removeNodes(editor, { at: path })}
-			/>
-		</div>
-	);
-};
-
-const Mention = ({ attributes, element }) => {
-	const editor = useSlateStatic();
-	const path = ReactEditor.findPath(editor as ReactEditor, element);
-
-	return (
-		<span
-			{...attributes}
-			type="button"
-			contentEditable={false}
-			onClick={() => Transforms.removeNodes(editor, { at: path })}
-			className="inline-block text-blue-500 align-baseline hover:text-blue-600"
-		>{`@${element.name}`}</span>
-	);
-};
-
-const Event = ({ attributes, element, children }) => {
-	const editor = useSlateStatic();
-	const path = ReactEditor.findPath(editor as ReactEditor, element);
-
-	return (
-		<div {...attributes}>
-			{children}
-			<div
-				contentEditable={false}
-				className="relative my-2 user-select-none"
-				onClick={() => Transforms.removeNodes(editor, { at: path })}
-				onKeyDown={() => Transforms.removeNodes(editor, { at: path })}
-			>
-				<MentionNote eventId={element.eventId} />
-			</div>
-		</div>
-	);
-};
-
-const Element = (props) => {
-	const { attributes, children, element } = props;
-
-	switch (element.type) {
-		case "image":
-			return <Image {...props} />;
-		case "mention":
-			return <Mention {...props} />;
-		case "event":
-			return <Event {...props} />;
-		default:
-			return (
-				<p {...attributes} className="text-[15px]">
-					{children}
-				</p>
-			);
-	}
-};