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

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

View File

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

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 { t } from "../../../services/i18n";
import server from "../../../services/server";
@ -15,7 +15,7 @@ import { escapeQuotes, getErrorMessage } from "../../../services/utils";
import link from "../../../services/link";
import froca from "../../../services/froca";
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 attributes from "../../../services/attributes";
import note_create from "../../../services/note_create";
@ -75,6 +75,7 @@ const mentionSetup: MentionFeed[] = [
interface AttributeEditorProps {
api: MutableRef<AttributeEditorImperativeHandlers | null>;
note: FNote;
componentId: string;
notePath?: string | null;
@ -82,7 +83,13 @@ interface AttributeEditorProps {
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 [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">();
const [ error, setError ] = useState<unknown>();
@ -257,13 +264,6 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi
}
}), [ notePath ]));
// Interaction with the attribute editor.
useLegacyImperativeHandlers(useMemo(() => ({
saveAttributesCommand: save,
reloadAttributesCommand: refresh,
updateAttributeListCommand: ({ attributes }: CommandListenerData<"updateAttributeList">) => renderOwnedAttributes(attributes as FAttribute[], false)
}), []));
// Keyboard shortcuts
useTriliumEvent("addNewLabel", ({ ntxId: eventNtxId }) => {
if (eventNtxId !== ntxId) return;
@ -274,6 +274,13 @@ export default function AttributeEditor({ note, componentId, notePath, ntxId, hi
handleAddNewAttributeCommand("addNewRelation");
});
// Imperative API
useImperativeHandle(api, () => ({
save,
refresh,
renderOwnedAttributes: (attributes) => renderOwnedAttributes(attributes as FAttribute[], false)
}), [ save, refresh, renderOwnedAttributes ]);
return (
<>
{!hidden && <div