diff --git a/apps/web/src/components/editor/index.tsx b/apps/web/src/components/editor/index.tsx index 51f6785b8a..875ceeb222 100644 --- a/apps/web/src/components/editor/index.tsx +++ b/apps/web/src/components/editor/index.tsx @@ -59,7 +59,7 @@ import { getFormattedDate } from "@notesnook/common"; const PDFPreview = React.lazy(() => import("../pdf-preview")); type PreviewSession = { - content: { data: string; type: string }; + content: { data: string; type: string; title: string }; dateCreated: number; dateEdited: number; }; @@ -108,6 +108,7 @@ export default function EditorManager({ const arePropertiesVisible = useStore((store) => store.arePropertiesVisible); const toggleProperties = useStore((store) => store.toggleProperties); const isReadonly = useStore((store) => store.session.readonly); + const setPreviewTitle = useStore((store) => store.setPreviewTitle); const isFocusMode = useAppStore((store) => store.isFocusMode); const isPreviewSession = !!previewSession.current; @@ -157,6 +158,7 @@ export default function EditorManager({ const openSession = useCallback(async (noteId: string | number) => { await editorstore.get().openSession(noteId); previewSession.current = undefined; + setPreviewTitle(undefined); lastSavedTime.current = Date.now(); setTimestamp(Date.now()); @@ -228,6 +230,7 @@ export default function EditorManager({ onOpenPreviewSession={async (session: PreviewSession) => { previewSession.current = session; setTimestamp(Date.now()); + setPreviewTitle(previewSession.current.content.title); }} /> )} diff --git a/apps/web/src/components/editor/title-box.tsx b/apps/web/src/components/editor/title-box.tsx index 91ba1fab86..d37ffc6152 100644 --- a/apps/web/src/components/editor/title-box.tsx +++ b/apps/web/src/components/editor/title-box.tsx @@ -37,6 +37,7 @@ function TitleBox(props: TitleBoxProps) { const { readonly } = props; const inputRef = useRef(null); const id = useStore((store) => store.session.id); + const previewTitle = useStore((store) => store.previewTitle); const isMobile = useMobile(); const isTablet = useTablet(); const { editorConfig } = useEditorConfig(); @@ -63,9 +64,9 @@ function TitleBox(props: TitleBoxProps) { useEffect(() => { if (!inputRef.current) return; const { title } = useStore.getState().session; - inputRef.current.value = title; + inputRef.current.value = previewTitle || title; updateFontSize(title.length); - }, [id, updateFontSize]); + }, [id, updateFontSize, previewTitle]); useEffect(() => { if (!inputRef.current) return; diff --git a/apps/web/src/components/properties/index.jsx b/apps/web/src/components/properties/index.jsx index a36161485b..0df3160949 100644 --- a/apps/web/src/components/properties/index.jsx +++ b/apps/web/src/components/properties/index.jsx @@ -352,7 +352,7 @@ function Properties(props) { title="Click to preview" onClick={async () => { toggleProperties(false); - const content = await db.noteHistory.content(session.id); + const content = await db.noteHistory.content(session.id); if (session.locked) { await Vault.askPassword(async (password) => { diff --git a/apps/web/src/stores/editor-store.js b/apps/web/src/stores/editor-store.js index 6fdbe1d83d..c2eca8fe3a 100644 --- a/apps/web/src/stores/editor-store.js +++ b/apps/web/src/stores/editor-store.js @@ -84,6 +84,7 @@ class EditorStore extends BaseStore { session = getDefaultSession(); arePropertiesVisible = false; editorMargins = Config.get("editor:margins", true); + previewTitle = undefined; init = () => { EV.subscribe(EVENTS.userLoggedOut, () => { @@ -316,7 +317,12 @@ class EditorStore extends BaseStore { */ saveSessionContent = (noteId, sessionId, ignoreEdit, content) => { const dateEdited = ignoreEdit ? this.get().session.dateEdited : undefined; - return this.saveSession(noteId, { sessionId, content, dateEdited }); + return this.saveSession(noteId, { + sessionId, + content, + dateEdited, + title: content.title + }); }; setTag = (tag) => { @@ -329,6 +335,12 @@ class EditorStore extends BaseStore { }); }; + setPreviewTitle = (previewTitle) => { + this.set((state) => { + state.previewTitle = previewTitle; + }); + }; + toggleProperties = (toggleState) => { this.set( (state) => diff --git a/packages/core/src/collections/content.js b/packages/core/src/collections/content.js index 564c175409..316212e0fe 100644 --- a/packages/core/src/collections/content.js +++ b/packages/core/src/collections/content.js @@ -70,7 +70,8 @@ export default class Content extends Collection { if (content.sessionId) { await this._db.noteHistory.add(contentItem.noteId, content.sessionId, { data: contentItem.data, - type: contentItem.type + type: contentItem.type, + title: content.title }); } return id; diff --git a/packages/core/src/collections/note-history.js b/packages/core/src/collections/note-history.js index ec101c6c28..a725771725 100644 --- a/packages/core/src/collections/note-history.js +++ b/packages/core/src/collections/note-history.js @@ -32,6 +32,7 @@ import SessionContent from "./session-content"; /** * @typedef Content + * @property {string} title * @property {string} data * @property {string} type */ @@ -91,6 +92,7 @@ export default class NoteHistory extends Collection { id: sessionId, sessionContentId: makeSessionContentId(sessionId), noteId, + title: content.title, dateCreated: oldSession ? oldSession.dateCreated : Date.now(), localOnly: true }; diff --git a/packages/core/src/collections/notes.js b/packages/core/src/collections/notes.js index 3e1644e400..cfa62572a0 100644 --- a/packages/core/src/collections/notes.js +++ b/packages/core/src/collections/notes.js @@ -88,6 +88,7 @@ export default class Notes extends Collection { note.contentId = await this._db.content.add({ noteId: id, + title: note.title, sessionId: note.sessionId, id: note.contentId, type, diff --git a/packages/core/src/collections/session-content.js b/packages/core/src/collections/session-content.js index fc2ca6dc77..ccac60348c 100644 --- a/packages/core/src/collections/session-content.js +++ b/packages/core/src/collections/session-content.js @@ -44,14 +44,15 @@ export default class SessionContent extends Collection { contentType: content.type, compressed: !locked, localOnly: true, - locked + locked, + title: content.title }); } /** * * @param {string} sessionId - * @returns {Promise<{content:string;data:string}>} + * @returns {Promise<{content:string;data:string;title:string}>} */ async get(sessionContentId) { if (!sessionContentId) return; @@ -69,7 +70,8 @@ export default class SessionContent extends Collection { data: session.compressed ? await this._db.compressor.decompress(session.data) : session.data, - type: session.contentType + type: session.contentType, + title: session.title }; }