feat(react): render raw react components

apps/client/src/widgets/react/react_utils.tsx

@@ -0,0 +1,42 @@
+import { createContext, render, type JSX, type RefObject } from "preact";
+import Component from "../../components/component";
+
+export const ParentComponent = createContext<Component | null>(null);
+
+/**
+ * Takes in a React ref and returns a corresponding JQuery selector.
+ *
+ * @param ref the React ref from which to obtain the jQuery selector.
+ * @returns the corresponding jQuery selector.
+ */
+export function refToJQuerySelector<T extends HTMLElement>(ref: RefObject<T> | null): JQuery<T> {
+    if (ref?.current) {
+        return $(ref.current);
+    } else {
+        return $();
+    }
+}
+
+/**
+ * Renders a React component and returns the corresponding DOM element wrapped in JQuery.
+ *
+ * @param parentComponent the parent Trilium component for the component to be able to handle events.
+ * @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 renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) {
+    render((
+        <ParentComponent.Provider value={parentComponent}>
+            {el}
+        </ParentComponent.Provider>
+    ), container);
+    return $(container) as JQuery<HTMLElement>;
+}
+
+export function disposeReactWidget(container: Element) {
+    render(null, container);
+}