diff --git a/src/components/EmojiPickModal/EmojiPickPopover.tsx b/src/components/EmojiPickModal/EmojiPickPopover.tsx index c7345100..b7367148 100644 --- a/src/components/EmojiPickModal/EmojiPickPopover.tsx +++ b/src/components/EmojiPickModal/EmojiPickPopover.tsx @@ -22,6 +22,7 @@ const EmojiPickPopover: Component<{ const [showPreset, setShowPreset] = createSignal(true); const onKey = (e: KeyboardEvent) => { + e.stopPropagation(); if (e.code === 'Escape') { props.onClose(e); return; @@ -59,13 +60,13 @@ const EmojiPickPopover: Component<{ setEmojiSearchTerm(() => defaultTerm); setFocusInput(() => true); setFocusInput(() => false); - window.addEventListener('keydown', onKey); + window.addEventListener('keyup', onKey); window.addEventListener('click', onClickOutside); }, 10); }); onCleanup(() => { - window.removeEventListener('keydown', onKey); + window.removeEventListener('keyup', onKey); window.removeEventListener('click', onClickOutside); }); diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 2453fcac..a3d77a2a 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -13,6 +13,7 @@ const Modal: Component<{ }> = (props) => { const onKey = (e: KeyboardEvent) => { + e.stopPropagation(); if (e.code === 'Escape') { props.onClose && props.onClose(e); return; @@ -21,10 +22,10 @@ const Modal: Component<{ createEffect(() => { if (props.open) { - window.addEventListener('keydown', onKey); + window.addEventListener('keyup', onKey); } else { - window.removeEventListener('keydown', onKey); + window.removeEventListener('keyup', onKey); } }); diff --git a/src/components/NewNote/EditBox/EditBox.tsx b/src/components/NewNote/EditBox/EditBox.tsx index ea7df861..9a4301b8 100644 --- a/src/components/NewNote/EditBox/EditBox.tsx +++ b/src/components/NewNote/EditBox/EditBox.tsx @@ -434,22 +434,22 @@ const EditBox: Component<{ onMount(() => { // @ts-expect-error TODO: fix types here editWrap?.addEventListener('input', onExpandableTextareaInput); - editWrap?.addEventListener('keydown', onKeyDown); + editWrap?.addEventListener('keyup', onKeyDown); // editWrap?.addEventListener('drop', onDrop, false); }); onCleanup(() => { // @ts-expect-error TODO: fix types here editWrap?.removeEventListener('input', onExpandableTextareaInput); - editWrap?.removeEventListener('keydown', onKeyDown); + editWrap?.removeEventListener('keyup', onKeyDown); // editWrap?.removeEventListener('drop', onDrop, false); }); createEffect(() => { - editWrap?.removeEventListener('keydown', onEscape); + editWrap?.removeEventListener('keyup', onEscape); if (!isPickingEmoji()) { - editWrap?.addEventListener('keydown', onEscape); + editWrap?.addEventListener('keyup', onEscape); } }); @@ -493,8 +493,8 @@ const EditBox: Component<{ }); createEffect(() => { - if (props.open && !props.replyToNote) { - const draft = readNoteDraft(account?.publicKey); + if (props.open) { + const draft = readNoteDraft(account?.publicKey, props.replyToNote?.post.noteId); setMessage(draft); if (textArea) @@ -503,12 +503,18 @@ const EditBox: Component<{ }) const onEscape = (e: KeyboardEvent) => { + if (isConfirmEditorClose()) return; + + e.stopPropagation(); if (e.code === 'Escape') { if (isPickingEmoji()) return; - !isMentioning() && !isEmojiInput() ? - closeEditor() : + if (isMentioning() || isEmojiInput()) { closeEmojiAndMentions(); + return; + } + + closeEditor(); } }; @@ -525,17 +531,12 @@ const EditBox: Component<{ }; const closeEditor = () => { - if (props.replyToNote) { - clearEditor(); - return; - } - if (message().trim().length > 0) { setConfirmEditorClose(true); return; } - saveNoteDraft(account?.publicKey, ''); + saveNoteDraft(account?.publicKey, '', props.replyToNote?.post.noteId); clearEditor(); }; @@ -547,7 +548,7 @@ const EditBox: Component<{ }; const persistNote = (note: string) => { - saveNoteDraft(account?.publicKey, note); + saveNoteDraft(account?.publicKey, note, props.replyToNote?.post.noteId); clearEditor(); }; diff --git a/src/lib/localStore.ts b/src/lib/localStore.ts index 8f20d5de..561e24d4 100644 --- a/src/lib/localStore.ts +++ b/src/lib/localStore.ts @@ -18,7 +18,7 @@ export type LocalStore = { stats: Record, }, emojiHistory: EmojiOption[], - noteDraft: string, + noteDraft: Record, }; export const emptyStorage = { @@ -35,7 +35,7 @@ export const emptyStorage = { userProfile: undefined, recomended: { profiles: [], stats: {} }, emojiHistory: [], - noteDraft: '', + noteDraft: {}, } export const storageName = (pubkey?: string) => { @@ -204,26 +204,38 @@ export const readEmojiHistory = (pubkey: string | undefined) => { return emojis || []; } -export const saveNoteDraft = (pubkey: string | undefined, draft: string) => { +export const saveNoteDraft = (pubkey: string | undefined, draft: string, replyTo?: string) => { if (!pubkey) { return; } const store = getStorage(pubkey); - store.noteDraft = draft; + const key = replyTo || 'root'; + + if (!store.noteDraft || typeof store.noteDraft === 'string') { + store.noteDraft = {}; + } + + store.noteDraft[key] = draft; setStorage(pubkey, store); } -export const readNoteDraft = (pubkey: string | undefined) => { +export const readNoteDraft = (pubkey: string | undefined, replyTo?: string) => { if (!pubkey) { return ''; } const store = getStorage(pubkey); - return store.noteDraft || ''; + if (!store.noteDraft || typeof store.noteDraft === 'string') { + store.noteDraft = {}; + } + + const key = replyTo || 'root'; + + return store.noteDraft[key] || ''; } export const saveHomeSidebarSelection = (pubkey: string | undefined, selection: SelectionOption | undefined) => {