gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 15:49:00 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix(react/ribbon): saving from attribute dialog not working

Browse Source
This commit is contained in:
Elian Doran 2025-08-27 18:25:54 +03:00
parent 94fdc2beee
commit a4da002352
No known key found for this signature in database
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx
View File

@ -1,18 +1,28 @@
import { useTriliumEvents } from "../react/hooks"; import { useMemo, useRef } from "preact/hooks";
import AttributeEditor from "./components/AttributeEditor"; import { useLegacyImperativeHandlers, useTriliumEvents } from "../react/hooks";
import AttributeEditor, { AttributeEditorImperativeHandlers } from "./components/AttributeEditor";
import { TabContext } from "./ribbon-interface"; import { TabContext } from "./ribbon-interface";
export default function OwnedAttributesTab({ note, hidden, activate, ntxId, ...restProps }: TabContext) { export default function OwnedAttributesTab({ note, hidden, activate, ntxId, ...restProps }: TabContext) {
const api = useRef<AttributeEditorImperativeHandlers>(null);
useTriliumEvents([ "addNewLabel", "addNewRelation" ], ({ ntxId: eventNtxId }) => { useTriliumEvents([ "addNewLabel", "addNewRelation" ], ({ ntxId: eventNtxId }) => {
if (ntxId === eventNtxId) { if (ntxId === eventNtxId) {
activate(); activate();
} }
}); });
// Interaction with the attribute editor.
useLegacyImperativeHandlers(useMemo(() => ({
saveAttributesCommand: () => api.current?.save(),
reloadAttributesCommand: () => api.current?.refresh(),
updateAttributeListCommand: ({ attributes }) => api.current?.renderOwnedAttributes(attributes)
}), [ api ]));
return ( return (
<div className="attribute-list"> <div className="attribute-list">
{ note && ( { note && (
<AttributeEditor ntxId={ntxId} note={note} {...restProps} hidden={hidden} /> <AttributeEditor api={api} ntxId={ntxId} note={note} {...restProps} hidden={hidden} />
)} )}
</div> </div>
) )

27
apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState } from "preact/hooks"; import { MutableRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "preact/hooks";
import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5"; import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5";
import { t } from "../../../services/i18n"; import { t } from "../../../services/i18n";
import server from "../../../services/server"; import server from "../../../services/server";
@ -15,7 +15,7 @@ import { escapeQuotes, getErrorMessage } from "../../../services/utils";
import link from "../../../services/link"; import link from "../../../services/link";
import froca from "../../../services/froca"; import froca from "../../../services/froca";
import contextMenu from "../../../menus/context_menu"; import contextMenu from "../../../menus/context_menu";
import type { CommandData, CommandListenerData, FilteredCommandNames } from "../../../components/app_context"; import type { CommandData, FilteredCommandNames } from "../../../components/app_context";
import { AttributeType } from "@triliumnext/commons"; import { AttributeType } from "@triliumnext/commons";
import attributes from "../../../services/attributes"; import attributes from "../../../services/attributes";
import note_create from "../../../services/note_create"; import note_create from "../../../services/note_create";
@ -75,6 +75,7 @@ const mentionSetup: MentionFeed[] = [
interface AttributeEditorProps { interface AttributeEditorProps {
api: MutableRef<AttributeEditorImperativeHandlers | null>;
note: FNote; note: FNote;
componentId: string; componentId: string;
notePath?: string | null; notePath?: string | null;
@ -82,7 +83,13 @@ interface AttributeEditorProps {
hidden?: boolean; hidden?: boolean;
} }
export default function AttributeEditor({ note, componentId, notePath, ntxId, hidden }: AttributeEditorProps) { export interface AttributeEditorImperativeHandlers {
save: () => Promise<void>;
refresh: () => void;
renderOwnedAttributes: (ownedAttributes: FAttribute[]) => Promise<void>;
}
export default function AttributeEditor({ api, note, componentId, notePath, ntxId, hidden }: AttributeEditorProps) {
const [ currentValue, setCurrentValue ] = useState(""); const [ currentValue, setCurrentValue ] = useState("");
const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">();
const [ error, setError ] = useState<unknown>(); const [ error, setError ] = useState<unknown>();
@ -257,13 +264,6 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi
} }
}), [ notePath ])); }), [ notePath ]));
// Interaction with the attribute editor.
useLegacyImperativeHandlers(useMemo(() => ({
saveAttributesCommand: save,
reloadAttributesCommand: refresh,
updateAttributeListCommand: ({ attributes }: CommandListenerData<"updateAttributeList">) => renderOwnedAttributes(attributes as FAttribute[], false)
}), []));
// Keyboard shortcuts // Keyboard shortcuts
useTriliumEvent("addNewLabel", ({ ntxId: eventNtxId }) => { useTriliumEvent("addNewLabel", ({ ntxId: eventNtxId }) => {
if (eventNtxId !== ntxId) return; if (eventNtxId !== ntxId) return;
@ -274,6 +274,13 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi
handleAddNewAttributeCommand("addNewRelation"); handleAddNewAttributeCommand("addNewRelation");
}); });
// Imperative API
useImperativeHandle(api, () => ({
save,
refresh,
renderOwnedAttributes: (attributes) => renderOwnedAttributes(attributes as FAttribute[], false)
}), [ save, refresh, renderOwnedAttributes ]);
return ( return (
<> <>
{!hidden && <div {!hidden && <div