usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-21 02:01:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: handle esc keyboard event for editor (#288)

Browse Source
This commit is contained in:
Hyoban 2022-10-14 10:14:35 +08:00 committed by GitHub
parent 0d6114e25e
commit 5e7db4631e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/MemoEditor.tsx
View File

@ -239,6 +239,12 @@ const MemoEditor: React.FC = () => {
}); });
}; };
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Escape") {
state.fullscreen && handleFullscreenBtnClick();
}
};
const handleTagSeletorClick = useCallback((event: React.MouseEvent) => { const handleTagSeletorClick = useCallback((event: React.MouseEvent) => {
if (tagSeletorRef.current !== event.target && tagSeletorRef.current?.contains(event.target as Node)) { if (tagSeletorRef.current !== event.target && tagSeletorRef.current?.contains(event.target as Node)) {
editorRef.current?.insertText(`#${(event.target as HTMLElement).textContent} ` ?? ""); editorRef.current?.insertText(`#${(event.target as HTMLElement).textContent} ` ?? "");
@ -287,7 +293,10 @@ const MemoEditor: React.FC = () => {
); );
return ( return (
<div className={`memo-editor-container ${mobileEditorStyle} ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}> <div
className={`memo-editor-container ${mobileEditorStyle} ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}
onKeyDown={handleKeyDown}
>
<div className={`tip-container ${isEditing ? "" : "!hidden"}`}> <div className={`tip-container ${isEditing ? "" : "!hidden"}`}>
<span className="tip-text">{t("editor.editing")}</span> <span className="tip-text">{t("editor.editing")}</span>
<button className="cancel-btn" onClick={handleCancelEditing}> <button className="cancel-btn" onClick={handleCancelEditing}>