From fcde669685aa402e7668c9212ef4a0b989534b6d Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Thu, 4 Jan 2024 10:44:00 +0700
Subject: [PATCH] feat(editor): add hot key and update function

---
 packages/ark/src/provider.tsx   | 11 ++----
 packages/ui/package.json        |  1 +
 packages/ui/src/editor/form.tsx | 70 ++++++++++++++++++++++++++++++---
 packages/ui/src/editor/utils.ts |  6 +++
 packages/ui/src/navigation.tsx  |  2 +
 pnpm-lock.yaml                  | 13 ++++++
 6 files changed, 90 insertions(+), 13 deletions(-)

diff --git a/packages/ark/src/provider.tsx b/packages/ark/src/provider.tsx
index 800a4db4..69be7d34 100644
--- a/packages/ark/src/provider.tsx
+++ b/packages/ark/src/provider.tsx
@@ -108,8 +108,7 @@ const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 		}
 
 		const explicitRelayUrls = normalizeRelayUrlSet([
-			"wss://relay.damus.io",
-			"wss://relay.nostr.band/all",
+			"wss://bostr.nokotaro.com/",
 			"wss://nostr.mutinywallet.com",
 		]);
 
@@ -135,11 +134,9 @@ const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 			explicitRelayUrls,
 			outboxRelayUrls,
 			blacklistRelayUrls,
-			enableOutboxModel: storage.settings.lowPowerMode
-				? false
-				: storage.settings.outbox,
-			autoConnectUserRelays: storage.settings.lowPowerMode ? false : true,
-			autoFetchUserMutelist: storage.settings.lowPowerMode ? false : true,
+			enableOutboxModel: !storage.settings.lowPowerMode,
+			autoConnectUserRelays: !storage.settings.lowPowerMode,
+			autoFetchUserMutelist: !storage.settings.lowPowerMode,
 			// clientName: 'Lume',
 			// clientNip89: '',
 		});
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 10059b43..e912f3eb 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -24,6 +24,7 @@
 		"nostr-tools": "~1.17.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-hotkeys-hook": "^4.4.1",
 		"react-router-dom": "^6.21.1",
 		"slate": "^0.101.5",
 		"slate-react": "^0.101.5",
diff --git a/packages/ui/src/editor/form.tsx b/packages/ui/src/editor/form.tsx
index 2fc9e2df..f1008ef6 100644
--- a/packages/ui/src/editor/form.tsx
+++ b/packages/ui/src/editor/form.tsx
@@ -1,10 +1,18 @@
-import { MentionNote, useStorage } from "@lume/ark";
+import { MentionNote, useArk, useStorage } from "@lume/ark";
 import { TrashIcon } from "@lume/icons";
 import { NDKCacheUserProfile } from "@lume/types";
 import { cn, editorValueAtom } from "@lume/utils";
-import { useAtomValue } from "jotai";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { useAtom } from "jotai";
 import { useEffect, useRef, useState } from "react";
-import { Editor, Range, Transforms, createEditor } from "slate";
+import {
+	Descendant,
+	Editor,
+	Node,
+	Range,
+	Transforms,
+	createEditor,
+} from "slate";
 import {
 	Editable,
 	ReactEditor,
@@ -14,6 +22,7 @@ import {
 	useSlateStatic,
 	withReact,
 } from "slate-react";
+import { toast } from "sonner";
 import { User } from "../user";
 import { EditorAddMedia } from "./addMedia";
 import {
@@ -177,10 +186,11 @@ const Element = (props) => {
 };
 
 export function EditorForm() {
+	const ark = useArk();
 	const storage = useStorage();
 	const ref = useRef<HTMLDivElement | null>();
-	const initialValue = useAtomValue(editorValueAtom);
 
+	const [editorValue, setEditorValue] = useAtom(editorValueAtom);
 	const [contacts, setContacts] = useState<NDKCacheUserProfile[]>([]);
 	const [target, setTarget] = useState<Range | undefined>();
 	const [index, setIndex] = useState(0);
@@ -193,6 +203,52 @@ export function EditorForm() {
 		?.filter((c) => c?.name?.toLowerCase().startsWith(search.toLowerCase()))
 		?.slice(0, 10);
 
+	const reset = () => {
+		// @ts-expect-error, backlog
+		editor.children = [{ type: "paragraph", children: [{ text: "" }] }];
+		setEditorValue([{ type: "paragraph", children: [{ text: "" }] }]);
+	};
+
+	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;
+
+				// @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(" ");
+				}
+
+				return Node.string(n);
+			})
+			.join("\n");
+	};
+
+	const submit = async () => {
+		const event = new NDKEvent(ark.ndk);
+		event.kind = NDKKind.Text;
+		event.content = serialize(editor.children);
+
+		const publish = await event.publish();
+
+		if (!publish) toast.error("Failed to publish event, try again later.");
+
+		toast.success(
+			`Event has been published successfully to ${publish.size} relays.`,
+		);
+
+		reset();
+	};
+
 	useEffect(() => {
 		async function loadContacts() {
 			const res = await storage.getAllCacheUsers();
@@ -216,7 +272,7 @@ export function EditorForm() {
 		<div className="w-full h-full flex flex-col justify-between rounded-xl overflow-hidden bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
 			<Slate
 				editor={editor}
-				initialValue={initialValue}
+				initialValue={editorValue}
 				onChange={() => {
 					const { selection } = editor;
 
@@ -246,6 +302,7 @@ export function EditorForm() {
 			>
 				<div className="py-6 overflow-y-auto px-7">
 					<Editable
+						key={JSON.stringify(editorValue)}
 						autoFocus={false}
 						autoCapitalize="none"
 						autoCorrect="none"
@@ -278,7 +335,7 @@ export function EditorForm() {
 						</Portal>
 					)}
 				</div>
-				<div className="flex items-center justify-between h-16 px-3 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
+				<div className="flex items-center justify-between h-16 px-3 border-t shrink-0 border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
 					<div />
 					<div className="flex items-center">
 						<div className="inline-flex items-center gap-2">
@@ -287,6 +344,7 @@ export function EditorForm() {
 						<div className="w-px h-6 mx-3 bg-neutral-200 dark:bg-neutral-800" />
 						<button
 							type="button"
+							onClick={submit}
 							className="inline-flex items-center justify-center w-20 pb-[2px] font-semibold border-t rounded-lg border-neutral-900 dark:border-neutral-800 h-9 bg-neutral-950 text-neutral-50 dark:bg-neutral-900 hover:bg-neutral-900 dark:hover:bg-neutral-800"
 						>
 							Post
diff --git a/packages/ui/src/editor/utils.ts b/packages/ui/src/editor/utils.ts
index 17c2caa7..8c9f7164 100644
--- a/packages/ui/src/editor/utils.ts
+++ b/packages/ui/src/editor/utils.ts
@@ -28,6 +28,8 @@ export const insertImage = (editor: ReactEditor | BaseEditor, url: string) => {
 			url,
 			children: [text],
 		},
+	];
+	const extraText = [
 		{
 			type: "paragraph",
 			children: [text],
@@ -35,6 +37,7 @@ export const insertImage = (editor: ReactEditor | BaseEditor, url: string) => {
 	];
 
 	Transforms.insertNodes(editor, image);
+	Transforms.insertNodes(editor, extraText);
 };
 
 export const insertMention = (
@@ -63,6 +66,8 @@ export const insertNostrEvent = (
 			eventId: `nostr:${eventId}`,
 			children: [text],
 		},
+	];
+	const extraText = [
 		{
 			type: "paragraph",
 			children: [text],
@@ -70,4 +75,5 @@ export const insertNostrEvent = (
 	];
 
 	Transforms.insertNodes(editor, event);
+	Transforms.insertNodes(editor, extraText);
 };
diff --git a/packages/ui/src/navigation.tsx b/packages/ui/src/navigation.tsx
index a72f027a..52f4cea8 100644
--- a/packages/ui/src/navigation.tsx
+++ b/packages/ui/src/navigation.tsx
@@ -11,11 +11,13 @@ import {
 } from "@lume/icons";
 import { cn, editorAtom } from "@lume/utils";
 import { useSetAtom } from "jotai";
+import { useHotkeys } from "react-hotkeys-hook";
 import { NavLink } from "react-router-dom";
 import { ActiveAccount } from "./account/active";
 
 export function Navigation() {
 	const setIsEditorOpen = useSetAtom(editorAtom);
+	useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
 
 	return (
 		<div className="flex flex-col justify-between w-20 h-full px-4 py-3 shrink-0">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cee5c296..3317d1d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -921,6 +921,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-hotkeys-hook:
+        specifier: ^4.4.1
+        version: 4.4.1(react-dom@18.2.0)(react@18.2.0)
       react-router-dom:
         specifier: ^6.21.1
         version: 6.21.1(react-dom@18.2.0)(react@18.2.0)
@@ -5145,6 +5148,16 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-hotkeys-hook@4.4.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-sClBMBioFEgFGYLTWWRKvhxcCx1DRznd+wkFHwQZspnRBkHTgruKIHptlK/U/2DPX8BhHoRGzpMVWUXMmdZlmw==}
+    peerDependencies:
+      react: '>=16.8.1'
+      react-dom: '>=16.8.1'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-remove-scroll-bar@2.3.4(@types/react@18.2.46)(react@18.2.0):
     resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
     engines: {node: '>=10'}