gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-22 15:24:24 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

fix(right_pane): custom widgets not rendering after being expanded

Browse Source
This commit is contained in:
Elian Doran 2025-12-20 11:09:59 +02:00
parent aac4316fb8
commit e1df65adce
No known key found for this signature in database
2 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -605,11 +605,10 @@ export function useNoteBlob(note: FNote | null | undefined, componentId?: string
return blob; return blob;
} }
export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, { noteContext, containerClassName, containerStyle, noAttach }: { export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, { noteContext, containerClassName, containerStyle }: {
noteContext?: NoteContext; noteContext?: NoteContext;
containerClassName?: string; containerClassName?: string;
containerStyle?: CSSProperties; containerStyle?: CSSProperties;
noAttach?: boolean;
} = {}): [VNode, T] { } = {}): [VNode, T] {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const parentComponent = useContext(ParentComponent); const parentComponent = useContext(ParentComponent);
@ -632,13 +631,12 @@ export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, {
// Attach the widget to the parent. // Attach the widget to the parent.
useEffect(() => { useEffect(() => {
if (noAttach) return;
const parentContainer = ref.current; const parentContainer = ref.current;
if (parentContainer) { if (parentContainer) {
parentContainer.replaceChildren(); parentContainer.replaceChildren();
renderedWidget.appendTo(parentContainer); renderedWidget.appendTo(parentContainer);
} }
}, [ renderedWidget, noAttach ]); });
// Inject the note context. // Inject the note context.
useEffect(() => { useEffect(() => {

32
apps/client/src/widgets/sidebar/RightPanelContainer.tsx
View File

@ -71,15 +71,26 @@ function useSplit(visible: boolean) {
function CustomWidget({ originalWidget }: { originalWidget: LegacyRightPanelWidget }) { function CustomWidget({ originalWidget }: { originalWidget: LegacyRightPanelWidget }) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
return (
<RightPanelWidget
id={originalWidget._noteId}
title={originalWidget.widgetTitle}
containerRef={containerRef}
>
<CustomWidgetContent originalWidget={originalWidget} />
</RightPanelWidget>
);
}
function CustomWidgetContent({ originalWidget }: { originalWidget: LegacyRightPanelWidget }) {
const [ el ] = useLegacyWidget(() => { const [ el ] = useLegacyWidget(() => {
originalWidget.contentSized();
// Monkey-patch the original widget by replacing the default initialization logic. // Monkey-patch the original widget by replacing the default initialization logic.
originalWidget.doRender = function doRender(this: LegacyRightPanelWidget) { originalWidget.doRender = function doRender(this: LegacyRightPanelWidget) {
if (!containerRef.current) {
this.$widget = $("<div>"); this.$widget = $("<div>");
return; this.$body = this.$widget;
};
this.$widget = $(containerRef.current);
this.$body = this.$widget.find(".card-body");
const renderResult = this.doRenderBody(); const renderResult = this.doRenderBody();
if (typeof renderResult === "object" && "catch" in renderResult) { if (typeof renderResult === "object" && "catch" in renderResult) {
this.initialized = renderResult.catch((e) => { this.initialized = renderResult.catch((e) => {
@ -91,14 +102,7 @@ function CustomWidget({ originalWidget }: { originalWidget: LegacyRightPanelWidg
}; };
return originalWidget; return originalWidget;
}, {
noAttach: true
}); });
return (
<RightPanelWidget return el;
id={originalWidget._noteId}
title={originalWidget.widgetTitle}
containerRef={containerRef}
>{el}</RightPanelWidget>
);
} }