gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 13:39:01 +01:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

Revert "chore(react): prototype for note context"

Browse Source 
This reverts commit 660db3b3ab4ff97ba173594092a737bab656cdc8.
This commit is contained in:
Elian Doran 2025-08-25 13:51:43 +03:00
parent 660db3b3ab
commit 1eaeec8100
No known key found for this signature in database
6 changed files with 19 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/components/component.ts
View File

@ -15,7 +15,7 @@ type EventHandler = ((data: any) => void);
* event / command is executed in all components - by simply awaiting the `triggerEvent()`.
*/
export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
$widget!: JQuery<HTMLElement | DocumentFragment>;
$widget!: JQuery<HTMLElement>;
componentId: string;
children: ChildT[];
initialized: Promise<void> | null;

33
apps/client/src/widgets/basic_widget.ts
View File

@ -3,9 +3,9 @@ import Component, { TypedComponent } from "../components/component.js";
import froca from "../services/froca.js";
import { t } from "../services/i18n.js";
import toastService from "../services/toast.js";
import { renderReactWidgetAtElement } from "./react/react_utils.jsx";
import { type default as NoteContextType } from "../../components/note_context";
import { EventData } from "../components/app_context.js";
import { renderReactWidget } from "./react/react_utils.jsx";
import { EventNames, EventData } from "../components/app_context.js";
import { Handler } from "leaflet";
export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedComponent<T> {
protected attrs: Record<string, string>;
@ -281,8 +281,6 @@ export function wrapReactWidgets<T extends TypedComponent<any>>(components: (T |
export class ReactWrappedWidget extends BasicWidget {
private el: VNode;
private noteContext: NoteContextType | null;
private fragment: DocumentFragment = new DocumentFragment();
constructor(el: VNode) {
super();
@ -290,30 +288,7 @@ export class ReactWrappedWidget extends BasicWidget {
}
doRender() {
renderReactWidgetAtElement({
parentComponent: this,
noteContext: this.noteContext
}, this.el, this.fragment);
this.$widget = $(this.fragment);
}
activeContextChangedEvent({ noteContext }: EventData<"activeContextChanged">) {
this.noteContext = noteContext;
this.doRender();
}
setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
this.noteContext = noteContext;
this.doRender();
}
noteSwitchedAndActivatedEvent({ noteContext }: EventData<"noteSwitchedAndActivated">) {
this.noteContext = noteContext;
this.doRender();
}
noteSwitchedEvent({ noteContext }: EventData<"noteSwitched">) {
this.doRender();
this.$widget = renderReactWidget(this, this.el);
}
}

12
apps/client/src/widgets/note_title.tsx
View File

@ -1,4 +1,4 @@
import { useContext, useEffect, useRef, useState } from "preact/hooks";
import { useEffect, useRef, useState } from "preact/hooks";
import { t } from "../services/i18n";
import FormTextBox from "./react/FormTextBox";
import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEvent } from "./react/hooks";
@ -8,13 +8,9 @@ import "./note_title.css";
import { isLaunchBarConfig } from "../services/utils";
import appContext from "../components/app_context";
import branches from "../services/branches";
import { NoteContext, ParentComponent } from "./react/react_utils";
export default function NoteTitleWidget() {
const parentComponent = useContext(ParentComponent);
const noteContext = useContext(NoteContext);
const { noteId, note, componentId, viewScope } = noteContext ?? {};
const { note, noteId, componentId, viewScope, noteContext, parentComponent } = useNoteContext();
const title = useNoteProperty(note, "title", componentId);
const isProtected = useNoteProperty(note, "isProtected");
const newTitle = useRef("");
@ -35,7 +31,7 @@ export default function NoteTitleWidget() {
// Manage the title for read-only notes
useEffect(() => {
if (isReadOnly) {
noteContext?.getNavigationTitle?.().then(setNavigationTitle);
noteContext?.getNavigationTitle().then(setNavigationTitle);
}
}, [isReadOnly]);
@ -82,7 +78,7 @@ export default function NoteTitleWidget() {
// Focus on the note content when pressing enter.
if (e.key === "Enter") {
e.preventDefault();
parentComponent?.triggerCommand("focusOnDetail", { ntxId: noteContext?.ntxId });
parentComponent.triggerCommand("focusOnDetail", { ntxId: noteContext?.ntxId });
return;
}

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

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

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

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

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

@ -1,14 +1,9 @@
import { ComponentChild, createContext, render, type JSX, type RefObject } from "preact";
import Component from "../../components/component";
import { type default as NoteContextType } from "../../components/note_context";
import { EventData, EventNames } from "../../components/app_context";
import { useContext } from "preact/hooks";
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.
@ -31,16 +26,14 @@ 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(context: ComponentContext, el: JSX.Element) {
return renderReactWidgetAtElement(context, el, new DocumentFragment()).children();
export function renderReactWidget(parentComponent: Component, el: JSX.Element) {
return renderReactWidgetAtElement(parentComponent, el, new DocumentFragment()).children();
}
export function renderReactWidgetAtElement({ parentComponent, noteContext }: ComponentContext, el: JSX.Element, container: Element | DocumentFragment) {
export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) {
render((
<ParentComponent.Provider value={parentComponent}>
<NoteContext.Provider value={noteContext}>
{el}
</NoteContext.Provider>
</ParentComponent.Provider>
), container);
return $(container) as JQuery<HTMLElement>;