chore(react/note_title): add before unload listener

This commit is contained in:
Elian Doran 2025-08-21 12:55:33 +03:00
parent b93fa332d3
commit 945e180a6f
No known key found for this signature in database
4 changed files with 32 additions and 30 deletions

View File

@ -40,7 +40,7 @@ interface RootWidget extends Component {
render: () => JQuery<HTMLElement>; render: () => JQuery<HTMLElement>;
} }
interface BeforeUploadListener extends Component { export interface BeforeUploadListener extends Component {
beforeUnloadEvent(): boolean; beforeUnloadEvent(): boolean;
} }
@ -526,7 +526,7 @@ export type FilteredCommandNames<T extends CommandData> = keyof Pick<CommandMapp
export class AppContext extends Component { export class AppContext extends Component {
isMainWindow: boolean; isMainWindow: boolean;
components: Component[]; components: Component[];
beforeUnloadListeners: WeakRef<BeforeUploadListener>[]; beforeUnloadListeners: (WeakRef<BeforeUploadListener> | (() => boolean))[];
tabManager!: TabManager; tabManager!: TabManager;
layout?: Layout; layout?: Layout;
noteTreeWidget?: NoteTreeWidget; noteTreeWidget?: NoteTreeWidget;
@ -649,13 +649,17 @@ export class AppContext extends Component {
return $(el).closest(".component").prop("component"); return $(el).closest(".component").prop("component");
} }
addBeforeUnloadListener(obj: BeforeUploadListener) { addBeforeUnloadListener(obj: BeforeUploadListener | (() => boolean)) {
if (typeof WeakRef !== "function") { if (typeof WeakRef !== "function") {
// older browsers don't support WeakRef // older browsers don't support WeakRef
return; return;
} }
this.beforeUnloadListeners.push(new WeakRef<BeforeUploadListener>(obj)); if (typeof obj === "object") {
this.beforeUnloadListeners.push(new WeakRef<BeforeUploadListener>(obj));
} else {
this.beforeUnloadListeners.push(obj);
}
} }
} }
@ -665,18 +669,24 @@ const appContext = new AppContext(window.glob.isMainWindow);
$(window).on("beforeunload", () => { $(window).on("beforeunload", () => {
let allSaved = true; let allSaved = true;
appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => !!wr.deref()); appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => typeof wr === "function" || !!wr.deref());
for (const weakRef of appContext.beforeUnloadListeners) { for (const listener of appContext.beforeUnloadListeners) {
const component = weakRef.deref(); if (typeof listener === "object") {
const component = listener.deref();
if (!component) { if (!component) {
continue; continue;
} }
if (!component.beforeUnloadEvent()) { if (!component.beforeUnloadEvent()) {
console.log(`Component ${component.componentId} is not finished saving its state.`); console.log(`Component ${component.componentId} is not finished saving its state.`);
allSaved = false; allSaved = false;
}
} else {
if (!listener()) {
allSaved = false;
}
} }
} }

View File

@ -1,13 +1,8 @@
import { t } from "../services/i18n.js";
import NoteContextAwareWidget from "./note_context_aware_widget.js"; import NoteContextAwareWidget from "./note_context_aware_widget.js";
import protectedSessionHolder from "../services/protected_session_holder.js";
import server from "../services/server.js";
import SpacedUpdate from "../services/spaced_update.js"; import SpacedUpdate from "../services/spaced_update.js";
import appContext, { type EventData } from "../components/app_context.js"; import appContext, { type EventData } from "../components/app_context.js";
import branchService from "../services/branches.js"; import branchService from "../services/branches.js";
import shortcutService from "../services/shortcuts.js"; import shortcutService from "../services/shortcuts.js";
import utils from "../services/utils.js";
import type FNote from "../entities/fnote.js";
export default class NoteTitleWidget extends NoteContextAwareWidget { export default class NoteTitleWidget extends NoteContextAwareWidget {
@ -19,16 +14,11 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
super(); super();
this.deleteNoteOnEscape = false; this.deleteNoteOnEscape = false;
appContext.addBeforeUnloadListener(this);
} }
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$noteTitle = this.$widget.find(".note-title"); this.$noteTitle = this.$widget.find(".note-title");
this.$noteTitle.on("input", () => this.spacedUpdate.scheduleUpdate());
this.$noteTitle.on("blur", () => { this.$noteTitle.on("blur", () => {
this.spacedUpdate.updateNowIfNecessary(); this.spacedUpdate.updateNowIfNecessary();
@ -71,8 +61,4 @@ export default class NoteTitleWidget extends NoteContextAwareWidget {
this.deleteNoteOnEscape = isNewNote; this.deleteNoteOnEscape = isNewNote;
} }
} }
beforeUnloadEvent() {
return this.spacedUpdate.isAllSavedAndTriggerUpdate();
}
} }

View File

@ -1,11 +1,12 @@
import { useEffect, useRef, useState } from "preact/hooks"; import { useEffect, useRef, useState } from "preact/hooks";
import { t } from "../services/i18n"; import { t } from "../services/i18n";
import FormTextBox from "./react/FormTextBox"; import FormTextBox from "./react/FormTextBox";
import { useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks"; import { useBeforeUnload, useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks";
import protected_session_holder from "../services/protected_session_holder"; import protected_session_holder from "../services/protected_session_holder";
import server from "../services/server"; import server from "../services/server";
import "./note_title.css"; import "./note_title.css";
import { isLaunchBarConfig } from "../services/utils"; import { isLaunchBarConfig } from "../services/utils";
import appContext from "../components/app_context";
export default function NoteTitleWidget() { export default function NoteTitleWidget() {
const { note, noteId, componentId, viewScope, noteContext } = useNoteContext(); const { note, noteId, componentId, viewScope, noteContext } = useNoteContext();
@ -39,6 +40,10 @@ export default function NoteTitleWidget() {
await server.put<void>(`notes/${noteId}/title`, { title: newTitle.current }, componentId); await server.put<void>(`notes/${noteId}/title`, { title: newTitle.current }, componentId);
}); });
useEffect(() => {
appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate());
}, []);
return ( return (
<div className="note-title-widget"> <div className="note-title-widget">
{note && <FormTextBox {note && <FormTextBox

View File

@ -1,5 +1,5 @@
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
import { EventData, EventNames } from "../../components/app_context"; import appContext, { BeforeUploadListener, EventData, EventNames } from "../../components/app_context";
import { ParentComponent } from "./react_utils"; import { ParentComponent } from "./react_utils";
import SpacedUpdate from "../../services/spaced_update"; import SpacedUpdate from "../../services/spaced_update";
import { OptionNames } from "@triliumnext/commons"; import { OptionNames } from "@triliumnext/commons";
@ -10,6 +10,7 @@ import NoteContext from "../../components/note_context";
import { ReactWrappedWidget } from "../basic_widget"; import { ReactWrappedWidget } from "../basic_widget";
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import froca from "../../services/froca"; import froca from "../../services/froca";
import toast from "../../services/toast";
type TriliumEventHandler<T extends EventNames> = (data: EventData<T>) => void; type TriliumEventHandler<T extends EventNames> = (data: EventData<T>) => void;
const registeredHandlers: Map<Component, Map<EventNames, TriliumEventHandler<any>[]>> = new Map(); const registeredHandlers: Map<Component, Map<EventNames, TriliumEventHandler<any>[]>> = new Map();
@ -302,4 +303,4 @@ export function useNoteProperty<T extends keyof FNote>(note: FNote | null | unde
}); });
return note[property]; return note[property];
} }