nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-29 16:30:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): add hot key and update function

Browse Source
This commit is contained in:
reya 2024-01-04 10:44:00 +07:00
parent f4cbcee8b4
commit fcde669685
6 changed files with 90 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/ark/src/provider.tsx
View File

@ -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: '',
});

1
packages/ui/package.json
View File

@ -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",

70
packages/ui/src/editor/form.tsx
View File

@ -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

6
packages/ui/src/editor/utils.ts
View File

@ -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);
};

2
packages/ui/src/navigation.tsx
View File

@ -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">

13
pnpm-lock.yaml
View File

@ -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'}