diff --git a/web/src/components/MemoView/MemoView.tsx b/web/src/components/MemoView/MemoView.tsx index 549a0e215..2d8fad660 100644 --- a/web/src/components/MemoView/MemoView.tsx +++ b/web/src/components/MemoView/MemoView.tsx @@ -1,5 +1,5 @@ import { observer } from "mobx-react-lite"; -import { memo, useMemo, useRef, useState } from "react"; +import { memo, useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import type { Memo } from "@/types/proto/api/v1/memo_service_pb"; import MemoEditor from "../MemoEditor"; @@ -33,6 +33,7 @@ const MemoView: React.FC = observer((props: Props) => { const { memo: memoData, className } = props; const cardRef = useRef(null); const [reactionSelectorOpen, setReactionSelectorOpen] = useState(false); + const [shortcutActive, setShortcutActive] = useState(false); const creator = useMemoCreator(memoData.creator); const { commentAmount, relativeTimeFormat, isArchived, readonly, isInMemoDetailPage, parentPage } = useMemoViewDerivedState( @@ -59,6 +60,17 @@ const MemoView: React.FC = observer((props: Props) => { onArchive: archiveMemo, }); + useEffect(() => { + if (showEditor || readonly) { + setShortcutActive(false); + } + }, [showEditor, readonly]); + + const handleShortcutActivation = (active: boolean) => { + if (readonly) return; + setShortcutActive(active); + }; + const contextValue = useMemo( () => ({ memo: memoData, @@ -90,7 +102,13 @@ const MemoView: React.FC = observer((props: Props) => { return ( -
+
handleShortcutActivation(true)} + onBlur={() => handleShortcutActivation(false)} + >