Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

refactor(react/ribbon): use custom method for injecting handlers

Browse Source
This commit is contained in:
Elian Doran
2025-08-23 20:44:03 +03:00
parent 82914fc2aa
commit a934760960
2 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/widgets/react/hooks.tsx
View File

@@ -538,4 +538,11 @@ export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Toolti
}, [ elRef ]);
return { showTooltip, hideTooltip };
}
export function useLegacyImperativeHandlers(handlers: Record<string, Function>) {
const parentComponent = useContext(ParentComponent);
useEffect(() => {
Object.assign(parentComponent as any, handlers);
}, [ handlers ])
}

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

@@ -1,10 +1,10 @@
import { useContext, useEffect, useRef, useState } from "preact/hooks"
import { useContext, useEffect, 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";
import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete";
import CKEditor, { CKEditorApi } from "../../react/CKEditor";
import { useLegacyWidget, useTooltip, useTriliumEventBeta } from "../../react/hooks";
import { useLegacyImperativeHandlers, useLegacyWidget, useTooltip, useTriliumEventBeta } from "../../react/hooks";
import FAttribute from "../../../entities/fattribute";
import attribute_renderer from "../../../services/attribute_renderer";
import FNote from "../../../entities/fnote";
@@ -77,9 +77,6 @@ const mentionSetup: MentionFeed[] = [
export default function AttributeEditor({ note, componentId, notePath }: { note: FNote, componentId: string, notePath?: string | null }) {
const parentComponent = useContext(ParentComponent);
injectLoadReferenceLinkTitle(parentComponent, notePath);
const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">();
const [ error, setError ] = useState<unknown>();
const [ needsSaving, setNeedsSaving ] = useState(false);
@@ -227,6 +224,28 @@ export default function AttributeEditor({ note, componentId, notePath }: { note:
useEffect(() => {
setTimeout(() => editorRef.current?.focus(), 0);
}, []);
// Interaction with CKEditor.
useLegacyImperativeHandlers(useMemo(() => ({
loadReferenceLinkTitle: async ($el: JQuery<HTMLElement>, href: string) => {
const { noteId } = link.parseNavigationStateFromUrl(href);
const note = noteId ? await froca.getNote(noteId, true) : null;
const title = note ? note.title : "[missing]";
$el.text(title);
},
createNoteForReferenceLink: async (title: string) => {
let result;
if (notePath) {
result = await note_create.createNoteWithTypePrompt(notePath, {
activate: false,
title: title
});
}
return result?.note?.getBestNotePathString();
}
}), [ notePath ]))
return (
<>
@@ -373,25 +392,3 @@ function getClickIndex(pos: ModelPosition) {
return clickIndex;
}
function injectLoadReferenceLinkTitle(component: Component | null, notePath?: string | null) {
if (!component) return;
(component as any).loadReferenceLinkTitle = async ($el: JQuery<HTMLElement>, href: string) => {
const { noteId } = link.parseNavigationStateFromUrl(href);
const note = noteId ? await froca.getNote(noteId, true) : null;
const title = note ? note.title : "[missing]";
$el.text(title);
}
(component as any).createNoteForReferenceLink = async (title: string) => {
let result;
if (notePath) {
result = await note_create.createNoteWithTypePrompt(notePath, {
activate: false,
title: title
});
}
return result?.note?.getBestNotePathString();
}
}