feat: add shortcut to edit the previous memo (#3122)

* Add shortcut to edit the previous memo

* Fix compilation

* Update web/src/components/MemoEditor/index.tsx

Co-authored-by: boojack <stevenlgtm@gmail.com>

---------

Co-authored-by: boojack <stevenlgtm@gmail.com>
This commit is contained in:
Dubzer 2024-03-27 16:46:29 +03:00 committed by GitHub
parent 2ebea4dba9
commit a0846c2818
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 4 deletions

View file

@ -37,6 +37,7 @@ interface Props {
relationList?: MemoRelation[];
autoFocus?: boolean;
onConfirm?: (memoId: number) => void;
onEditPrevious?: () => void;
}
interface State {
@ -144,7 +145,7 @@ const MemoEditor = (props: Props) => {
const isMetaKey = event.ctrlKey || event.metaKey;
if (isMetaKey) {
if (event.key === "Enter") {
handleSaveBtnClick();
void handleSaveBtnClick();
return;
}
@ -161,6 +162,12 @@ const MemoEditor = (props: Props) => {
}
return;
}
if (!!props.onEditPrevious && event.key === "ArrowDown" && !state.isComposing && editorRef.current.getContent() === "") {
event.preventDefault();
props.onEditPrevious();
return;
}
};
const handleMemoVisibilityChange = (visibility: Visibility) => {

View file

@ -1,11 +1,12 @@
import { Button } from "@mui/joy";
import classNames from "classnames";
import { useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import Empty from "@/components/Empty";
import HomeSidebar from "@/components/HomeSidebar";
import HomeSidebarDrawer from "@/components/HomeSidebarDrawer";
import Icon from "@/components/Icon";
import MemoEditor from "@/components/MemoEditor";
import showMemoEditorDialog from "@/components/MemoEditor/MemoEditorDialog";
import MemoFilter from "@/components/MemoFilter";
import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader";
@ -14,7 +15,7 @@ import { getTimeStampByDate } from "@/helpers/datetime";
import useCurrentUser from "@/hooks/useCurrentUser";
import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams";
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
import { useMemoList, useMemoStore } from "@/store/v1";
import { extractMemoIdFromName, useMemoList, useMemoStore } from "@/store/v1";
import { RowStatus } from "@/types/proto/api/v2/common";
import { useTranslate } from "@/utils/i18n";
@ -60,6 +61,14 @@ const Home = () => {
nextPageTokenRef.current = data.nextPageToken;
};
const handleEditPrevious = useCallback(() => {
const lastMemo = memoList.value[memoList.value.length - 1];
showMemoEditorDialog({
memoId: extractMemoIdFromName(lastMemo.name),
cacheKey: `${lastMemo.name}-${lastMemo.updateTime}`,
});
}, [memoList]);
return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
{!md && (
@ -69,7 +78,7 @@ const Home = () => {
)}
<div className={classNames("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
<div className={classNames(md ? "w-[calc(100%-15rem)]" : "w-full")}>
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />
<MemoEditor className="mb-2" cacheKey="home-memo-editor" onEditPrevious={handleEditPrevious} />
<div className="flex flex-col justify-start items-start w-full max-w-full">
<MemoFilter className="px-2 pb-2" />
{sortedMemos.map((memo) => (