mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-30 00:41:00 +00:00
feat(editor): add hot key and update function
This commit is contained in:
parent
f4cbcee8b4
commit
fcde669685
@ -108,8 +108,7 @@ const LumeProvider = ({ children }: PropsWithChildren<object>) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const explicitRelayUrls = normalizeRelayUrlSet([
|
const explicitRelayUrls = normalizeRelayUrlSet([
|
||||||
"wss://relay.damus.io",
|
"wss://bostr.nokotaro.com/",
|
||||||
"wss://relay.nostr.band/all",
|
|
||||||
"wss://nostr.mutinywallet.com",
|
"wss://nostr.mutinywallet.com",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@ -135,11 +134,9 @@ const LumeProvider = ({ children }: PropsWithChildren<object>) => {
|
|||||||
explicitRelayUrls,
|
explicitRelayUrls,
|
||||||
outboxRelayUrls,
|
outboxRelayUrls,
|
||||||
blacklistRelayUrls,
|
blacklistRelayUrls,
|
||||||
enableOutboxModel: storage.settings.lowPowerMode
|
enableOutboxModel: !storage.settings.lowPowerMode,
|
||||||
? false
|
autoConnectUserRelays: !storage.settings.lowPowerMode,
|
||||||
: storage.settings.outbox,
|
autoFetchUserMutelist: !storage.settings.lowPowerMode,
|
||||||
autoConnectUserRelays: storage.settings.lowPowerMode ? false : true,
|
|
||||||
autoFetchUserMutelist: storage.settings.lowPowerMode ? false : true,
|
|
||||||
// clientName: 'Lume',
|
// clientName: 'Lume',
|
||||||
// clientNip89: '',
|
// clientNip89: '',
|
||||||
});
|
});
|
||||||
|
@ -24,6 +24,7 @@
|
|||||||
"nostr-tools": "~1.17.0",
|
"nostr-tools": "~1.17.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-hotkeys-hook": "^4.4.1",
|
||||||
"react-router-dom": "^6.21.1",
|
"react-router-dom": "^6.21.1",
|
||||||
"slate": "^0.101.5",
|
"slate": "^0.101.5",
|
||||||
"slate-react": "^0.101.5",
|
"slate-react": "^0.101.5",
|
||||||
|
@ -1,10 +1,18 @@
|
|||||||
import { MentionNote, useStorage } from "@lume/ark";
|
import { MentionNote, useArk, useStorage } from "@lume/ark";
|
||||||
import { TrashIcon } from "@lume/icons";
|
import { TrashIcon } from "@lume/icons";
|
||||||
import { NDKCacheUserProfile } from "@lume/types";
|
import { NDKCacheUserProfile } from "@lume/types";
|
||||||
import { cn, editorValueAtom } from "@lume/utils";
|
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 { useEffect, useRef, useState } from "react";
|
||||||
import { Editor, Range, Transforms, createEditor } from "slate";
|
import {
|
||||||
|
Descendant,
|
||||||
|
Editor,
|
||||||
|
Node,
|
||||||
|
Range,
|
||||||
|
Transforms,
|
||||||
|
createEditor,
|
||||||
|
} from "slate";
|
||||||
import {
|
import {
|
||||||
Editable,
|
Editable,
|
||||||
ReactEditor,
|
ReactEditor,
|
||||||
@ -14,6 +22,7 @@ import {
|
|||||||
useSlateStatic,
|
useSlateStatic,
|
||||||
withReact,
|
withReact,
|
||||||
} from "slate-react";
|
} from "slate-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
import { User } from "../user";
|
import { User } from "../user";
|
||||||
import { EditorAddMedia } from "./addMedia";
|
import { EditorAddMedia } from "./addMedia";
|
||||||
import {
|
import {
|
||||||
@ -177,10 +186,11 @@ const Element = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export function EditorForm() {
|
export function EditorForm() {
|
||||||
|
const ark = useArk();
|
||||||
const storage = useStorage();
|
const storage = useStorage();
|
||||||
const ref = useRef<HTMLDivElement | null>();
|
const ref = useRef<HTMLDivElement | null>();
|
||||||
const initialValue = useAtomValue(editorValueAtom);
|
|
||||||
|
|
||||||
|
const [editorValue, setEditorValue] = useAtom(editorValueAtom);
|
||||||
const [contacts, setContacts] = useState<NDKCacheUserProfile[]>([]);
|
const [contacts, setContacts] = useState<NDKCacheUserProfile[]>([]);
|
||||||
const [target, setTarget] = useState<Range | undefined>();
|
const [target, setTarget] = useState<Range | undefined>();
|
||||||
const [index, setIndex] = useState(0);
|
const [index, setIndex] = useState(0);
|
||||||
@ -193,6 +203,52 @@ export function EditorForm() {
|
|||||||
?.filter((c) => c?.name?.toLowerCase().startsWith(search.toLowerCase()))
|
?.filter((c) => c?.name?.toLowerCase().startsWith(search.toLowerCase()))
|
||||||
?.slice(0, 10);
|
?.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(() => {
|
useEffect(() => {
|
||||||
async function loadContacts() {
|
async function loadContacts() {
|
||||||
const res = await storage.getAllCacheUsers();
|
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)]">
|
<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
|
<Slate
|
||||||
editor={editor}
|
editor={editor}
|
||||||
initialValue={initialValue}
|
initialValue={editorValue}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
const { selection } = editor;
|
const { selection } = editor;
|
||||||
|
|
||||||
@ -246,6 +302,7 @@ export function EditorForm() {
|
|||||||
>
|
>
|
||||||
<div className="py-6 overflow-y-auto px-7">
|
<div className="py-6 overflow-y-auto px-7">
|
||||||
<Editable
|
<Editable
|
||||||
|
key={JSON.stringify(editorValue)}
|
||||||
autoFocus={false}
|
autoFocus={false}
|
||||||
autoCapitalize="none"
|
autoCapitalize="none"
|
||||||
autoCorrect="none"
|
autoCorrect="none"
|
||||||
@ -278,7 +335,7 @@ export function EditorForm() {
|
|||||||
</Portal>
|
</Portal>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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 />
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div className="inline-flex items-center gap-2">
|
<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" />
|
<div className="w-px h-6 mx-3 bg-neutral-200 dark:bg-neutral-800" />
|
||||||
<button
|
<button
|
||||||
type="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"
|
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
|
Post
|
||||||
|
@ -28,6 +28,8 @@ export const insertImage = (editor: ReactEditor | BaseEditor, url: string) => {
|
|||||||
url,
|
url,
|
||||||
children: [text],
|
children: [text],
|
||||||
},
|
},
|
||||||
|
];
|
||||||
|
const extraText = [
|
||||||
{
|
{
|
||||||
type: "paragraph",
|
type: "paragraph",
|
||||||
children: [text],
|
children: [text],
|
||||||
@ -35,6 +37,7 @@ export const insertImage = (editor: ReactEditor | BaseEditor, url: string) => {
|
|||||||
];
|
];
|
||||||
|
|
||||||
Transforms.insertNodes(editor, image);
|
Transforms.insertNodes(editor, image);
|
||||||
|
Transforms.insertNodes(editor, extraText);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const insertMention = (
|
export const insertMention = (
|
||||||
@ -63,6 +66,8 @@ export const insertNostrEvent = (
|
|||||||
eventId: `nostr:${eventId}`,
|
eventId: `nostr:${eventId}`,
|
||||||
children: [text],
|
children: [text],
|
||||||
},
|
},
|
||||||
|
];
|
||||||
|
const extraText = [
|
||||||
{
|
{
|
||||||
type: "paragraph",
|
type: "paragraph",
|
||||||
children: [text],
|
children: [text],
|
||||||
@ -70,4 +75,5 @@ export const insertNostrEvent = (
|
|||||||
];
|
];
|
||||||
|
|
||||||
Transforms.insertNodes(editor, event);
|
Transforms.insertNodes(editor, event);
|
||||||
|
Transforms.insertNodes(editor, extraText);
|
||||||
};
|
};
|
||||||
|
@ -11,11 +11,13 @@ import {
|
|||||||
} from "@lume/icons";
|
} from "@lume/icons";
|
||||||
import { cn, editorAtom } from "@lume/utils";
|
import { cn, editorAtom } from "@lume/utils";
|
||||||
import { useSetAtom } from "jotai";
|
import { useSetAtom } from "jotai";
|
||||||
|
import { useHotkeys } from "react-hotkeys-hook";
|
||||||
import { NavLink } from "react-router-dom";
|
import { NavLink } from "react-router-dom";
|
||||||
import { ActiveAccount } from "./account/active";
|
import { ActiveAccount } from "./account/active";
|
||||||
|
|
||||||
export function Navigation() {
|
export function Navigation() {
|
||||||
const setIsEditorOpen = useSetAtom(editorAtom);
|
const setIsEditorOpen = useSetAtom(editorAtom);
|
||||||
|
useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col justify-between w-20 h-full px-4 py-3 shrink-0">
|
<div className="flex flex-col justify-between w-20 h-full px-4 py-3 shrink-0">
|
||||||
|
@ -921,6 +921,9 @@ importers:
|
|||||||
react-dom:
|
react-dom:
|
||||||
specifier: ^18.2.0
|
specifier: ^18.2.0
|
||||||
version: 18.2.0(react@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:
|
react-router-dom:
|
||||||
specifier: ^6.21.1
|
specifier: ^6.21.1
|
||||||
version: 6.21.1(react-dom@18.2.0)(react@18.2.0)
|
version: 6.21.1(react-dom@18.2.0)(react@18.2.0)
|
||||||
@ -5145,6 +5148,16 @@ packages:
|
|||||||
react: 18.2.0
|
react: 18.2.0
|
||||||
dev: false
|
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):
|
/react-remove-scroll-bar@2.3.4(@types/react@18.2.46)(react@18.2.0):
|
||||||
resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
|
resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
|
Loading…
Reference in New Issue
Block a user