Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 15:55:52 +01:00
Code Issues Packages Projects Releases Activity

chore(react): prototype for note context

Browse Source
This commit is contained in:
Elian Doran
2025-08-25 11:48:56 +03:00
parent 89d2fcb81e
commit 660db3b3ab
6 changed files with 61 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/react/ReactBasicWidget.tsx
View File

@@ -6,7 +6,10 @@ export default abstract class ReactBasicWidget extends BasicWidget {
abstract get component(): JSX.Element;
doRender() {
this.$widget = renderReactWidget(this, this.component);
this.$widget = renderReactWidget({
parentComponent: this,
noteContext: null
}, this.component);
}
}

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

@@ -17,9 +17,13 @@ import { CSSProperties } from "preact/compat";
export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
const parentComponent = useContext(ParentComponent)!;
parentComponent.registerHandler(eventName, handler);
useEffect(() => {
parentComponent.registerHandler(eventName, handler);
return (() => parentComponent.removeHandler(eventName, handler));
}, [eventName, handler]);
useDebugValue(eventName);
return (() => parentComponent.removeHandler(eventName, handler));
}
export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler: (data: EventData<T>, eventName: T) => void) {
@@ -199,7 +203,6 @@ export function useNoteContext() {
}, [ notePath ]);
useTriliumEvent("activeContextChanged", ({ noteContext }) => {
setNoteContext(noteContext);
setNotePath(noteContext.notePath);
});
useTriliumEvent("setNoteContext", ({ noteContext }) => {

19
apps/client/src/widgets/react/react_utils.tsx
View File

@@ -1,9 +1,14 @@
import { ComponentChild, createContext, render, type JSX, type RefObject } from "preact";
import Component from "../../components/component";
import { EventData, EventNames } from "../../components/app_context";
import { useContext } from "preact/hooks";
import { type default as NoteContextType } from "../../components/note_context";
export const ParentComponent = createContext<Component | null>(null);
export const NoteContext = createContext<NoteContextType | null>(null);
interface ComponentContext {
parentComponent: Component | null;
noteContext: NoteContextType | null;
}
/**
* Takes in a React ref and returns a corresponding JQuery selector.
@@ -26,14 +31,16 @@ export function refToJQuerySelector<T extends HTMLElement>(ref: RefObject<T> | n
* @param el the JSX element to render.
* @returns the rendered wrapped DOM element.
*/
export function renderReactWidget(parentComponent: Component, el: JSX.Element) {
return renderReactWidgetAtElement(parentComponent, el, new DocumentFragment()).children();
export function renderReactWidget(context: ComponentContext, el: JSX.Element) {
return renderReactWidgetAtElement(context, el, new DocumentFragment()).children();
}
export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) {
export function renderReactWidgetAtElement({ parentComponent, noteContext }: ComponentContext, el: JSX.Element, container: Element | DocumentFragment) {
render((
<ParentComponent.Provider value={parentComponent}>
{el}
<NoteContext.Provider value={noteContext}>
{el}
</NoteContext.Provider>
</ParentComponent.Provider>
), container);
return $(container) as JQuery<HTMLElement>;