From b321986c40e59c463bae629c345d6fd953dbae3f Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Thu, 20 Feb 2025 02:13:33 +0100 Subject: [PATCH] fix: display complete notes in note list and save note drafts, closes #405 (#412) --- apps/readest-app/package.json | 2 +- .../reader/components/notebook/NoteEditor.tsx | 62 +++++++++++++++---- .../reader/components/notebook/Notebook.tsx | 2 + .../components/sidebar/BooknoteItem.tsx | 2 +- apps/readest-app/src/store/notebookStore.ts | 11 +++- apps/readest-app/src/styles/globals.css | 16 +++++ 6 files changed, 81 insertions(+), 14 deletions(-) diff --git a/apps/readest-app/package.json b/apps/readest-app/package.json index b23aa304..a188e2dc 100644 --- a/apps/readest-app/package.json +++ b/apps/readest-app/package.json @@ -1,6 +1,6 @@ { "name": "@readest/readest-app", - "version": "0.9.13", + "version": "0.9.14", "private": true, "scripts": { "dev": "dotenv -e .env.tauri -- next dev", diff --git a/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx b/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx index f0326bdd..b6058315 100644 --- a/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx +++ b/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useRef } from 'react'; import { useNotebookStore } from '@/store/notebookStore'; import { useTranslation } from '@/hooks/useTranslation'; import { TextSelection } from '@/utils/sel'; +import { md5Fingerprint } from '@/utils/md5'; import { BookNote } from '@/types/book'; import useShortcuts from '@/hooks/useShortcuts'; @@ -13,7 +14,14 @@ interface NoteEditorProps { const NoteEditor: React.FC = ({ onSave, onEdit }) => { const _ = useTranslation(); - const { notebookNewAnnotation, notebookEditAnnotation, setNotebookNewAnnotation, setNotebookEditAnnotation } = useNotebookStore(); + const { + notebookNewAnnotation, + notebookEditAnnotation, + setNotebookNewAnnotation, + setNotebookEditAnnotation, + saveNotebookAnnotationDraft, + getNotebookAnnotationDraft, + } = useNotebookStore(); const editorRef = useRef(null); const [note, setNote] = React.useState(''); @@ -21,13 +29,30 @@ const NoteEditor: React.FC = ({ onSave, onEdit }) => { if (editorRef.current) { editorRef.current.focus(); } - }, []); + }, [editorRef]); useEffect(() => { if (notebookEditAnnotation) { setNote(notebookEditAnnotation.note); + if (editorRef.current) { + editorRef.current.value = notebookEditAnnotation.note; + editorRef.current.focus(); + adjustHeight(); + } + } else if (notebookNewAnnotation) { + const noteText = getAnnotationText(); + if (noteText) { + const draftNote = getNotebookAnnotationDraft(md5Fingerprint(noteText)) || ''; + setNote(draftNote); + if (editorRef.current) { + editorRef.current.value = draftNote; + editorRef.current.focus(); + adjustHeight(); + } + } } - }, [notebookEditAnnotation]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [notebookNewAnnotation, notebookEditAnnotation]); const adjustHeight = () => { if (editorRef.current) { @@ -36,11 +61,24 @@ const NoteEditor: React.FC = ({ onSave, onEdit }) => { } }; - const handleChange = (e: React.ChangeEvent) => { + const getAnnotationText = () => { + return notebookEditAnnotation?.text || notebookNewAnnotation?.text || ''; + }; + + const handleOnChange = (e: React.ChangeEvent) => { adjustHeight(); setNote(e.currentTarget.value); }; + const handleOnBlur = () => { + if (editorRef.current && editorRef.current.value) { + const noteText = getAnnotationText(); + if (noteText) { + saveNotebookAnnotationDraft(md5Fingerprint(noteText), editorRef.current.value); + } + } + }; + const handleSaveNote = () => { if (editorRef.current && notebookNewAnnotation) { onSave(notebookNewAnnotation, editorRef.current.value); @@ -58,12 +96,13 @@ const NoteEditor: React.FC = ({ onSave, onEdit }) => { }, onCloseNote: () => { if (notebookNewAnnotation) { - setNotebookNewAnnotation(null) - } else if (notebookEditAnnotation) { - setNotebookEditAnnotation(null) + setNotebookNewAnnotation(null); } - } - }) + if (notebookEditAnnotation) { + setNotebookEditAnnotation(null); + } + }, + }); return (
@@ -79,7 +118,8 @@ const NoteEditor: React.FC = ({ onSave, onEdit }) => { value={note} rows={1} spellCheck={false} - onChange={handleChange} + onChange={handleOnChange} + onBlur={handleOnBlur} placeholder={_('Add your notes here...')} >
@@ -97,7 +137,7 @@ const NoteEditor: React.FC = ({ onSave, onEdit }) => {
- {notebookNewAnnotation?.text || notebookEditAnnotation?.text} + {getAnnotationText()}
diff --git a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx index fe624d50..a33b76b4 100644 --- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx +++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx @@ -77,6 +77,8 @@ const Notebook: React.FC = ({}) => { event.preventDefault(); event.stopPropagation(); setNotebookVisible(false); + setNotebookNewAnnotation(null); + setNotebookEditAnnotation(null); }; const handleDragMove = (e: MouseEvent) => { diff --git a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx index 36f2eb83..8e9cd825 100644 --- a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx +++ b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx @@ -81,7 +81,7 @@ const BooknoteItem: React.FC = ({ bookKey, item }) => { } as React.CSSProperties } > - {item.note && {item.note}} + {item.note && {item.note}}
{item.note && (
diff --git a/apps/readest-app/src/store/notebookStore.ts b/apps/readest-app/src/store/notebookStore.ts index c06ebeb5..be9b5b7c 100644 --- a/apps/readest-app/src/store/notebookStore.ts +++ b/apps/readest-app/src/store/notebookStore.ts @@ -8,6 +8,7 @@ interface NotebookState { isNotebookPinned: boolean; notebookNewAnnotation: TextSelection | null; notebookEditAnnotation: BookNote | null; + notebookAnnotationDrafts: { [key: string]: string }; toggleNotebook: () => void; toggleNotebookPin: () => void; setNotebookWidth: (width: string) => void; @@ -15,14 +16,17 @@ interface NotebookState { setNotebookPin: (pinned: boolean) => void; setNotebookNewAnnotation: (selection: TextSelection | null) => void; setNotebookEditAnnotation: (note: BookNote | null) => void; + saveNotebookAnnotationDraft: (key: string, note: string) => void; + getNotebookAnnotationDraft: (key: string) => string | undefined; } -export const useNotebookStore = create((set) => ({ +export const useNotebookStore = create((set, get) => ({ notebookWidth: '', isNotebookVisible: false, isNotebookPinned: false, notebookNewAnnotation: null, notebookEditAnnotation: null, + notebookAnnotationDrafts: {}, setNotebookWidth: (width: string) => set({ notebookWidth: width }), toggleNotebook: () => set((state) => ({ isNotebookVisible: !state.isNotebookVisible })), toggleNotebookPin: () => set((state) => ({ isNotebookPinned: !state.isNotebookPinned })), @@ -31,4 +35,9 @@ export const useNotebookStore = create((set) => ({ setNotebookNewAnnotation: (selection: TextSelection | null) => set({ notebookNewAnnotation: selection }), setNotebookEditAnnotation: (note: BookNote | null) => set({ notebookEditAnnotation: note }), + saveNotebookAnnotationDraft: (key: string, note: string) => + set((state) => ({ + notebookAnnotationDrafts: { ...state.notebookAnnotationDrafts, [key]: note }, + })), + getNotebookAnnotationDraft: (key: string) => get().notebookAnnotationDrafts[key], })); diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css index edf3f5bd..edb91707 100644 --- a/apps/readest-app/src/styles/globals.css +++ b/apps/readest-app/src/styles/globals.css @@ -28,6 +28,22 @@ html[data-page='reader'] { background: theme('colors.base-100'); } +html { + font-size: 16px; +} + +@media (max-width: 480px) { + html { + font-size: 20px; + } +} + +@media (min-width: 481px) and (max-width: 1024px) { + html { + font-size: 18.4px; + } +} + body { color: var(--foreground); background: var(--background);