feat(client/render_note): basic setup for with note picker

apps/client/src/stylesheets/theme-next/forms.css

@@ -838,7 +838,7 @@ input[type="range"] {
     text-align: center;
 }
 
-.tn-centered-form input,
+.tn-centered-form .input-group,
 .tn-centered-form button {
     margin-top: 12px;
-}
+}

apps/client/src/translations/en/translation.json

@@ -1067,8 +1067,7 @@
     "click_on_canvas_to_place_new_note": "Click on canvas to place new note"
   },
   "render": {
-    "note_detail_render_help_1": "This help note is shown because this note of type Render HTML doesn't have required relation to function properly.",
-    "note_detail_render_help_2": "Render HTML note type is used for <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripting</a>. In short, you have a HTML code note (optionally with some JavaScript) and this note will render it. To make it work, you need to define a <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relation</a> called \"renderNote\" pointing to the HTML note to render."
+    "setup_title": "Display custom HTML or Preact JSX inside this note"
   },
   "web_view_setup": {
     "title": "Create a live view of a webpage directly into Trilium",

apps/client/src/widgets/type_widgets/Render.tsx

@@ -5,10 +5,11 @@ import { useEffect, useRef } from "preact/hooks";
 import attributes from "../../services/attributes";
 import { t } from "../../services/i18n";
 import render from "../../services/render";
-import Alert from "../react/Alert";
+import FormGroup from "../react/FormGroup";
 import { useNoteRelation, useTriliumEvent } from "../react/hooks";
-import RawHtml from "../react/RawHtml";
+import NoteAutocomplete from "../react/NoteAutocomplete";
 import { refToJQuerySelector } from "../react/react_utils";
+import SetupForm from "./helpers/SetupForm";
 import { TypeWidgetProps } from "./type_widget";
 
 export default function Render(props: TypeWidgetProps) {
@@ -16,7 +17,7 @@ export default function Render(props: TypeWidgetProps) {
     const [ renderNote ] = useNoteRelation(note, "renderNote");
 
     if (!renderNote) {
-        return <SetupRenderContent />;
+        return <SetupRenderContent {...props} />;
     }
 
     return <RenderContent {...props} />;
@@ -60,11 +61,18 @@ function RenderContent({ note, noteContext, ntxId }: TypeWidgetProps) {
     return <div ref={contentRef} className="note-detail-render-content" />;
 }
 
-function SetupRenderContent() {
+function SetupRenderContent({ note }: TypeWidgetProps) {
     return (
-        <Alert className="note-detail-render-help" type="warning">
-            <p><strong>{t("render.note_detail_render_help_1")}</strong></p>
-            <p><RawHtml html={t("render.note_detail_render_help_2")} /></p>
-        </Alert>
+        <SetupForm
+            icon="bx bx-extension"
+            inAppHelpPage="HcABDtFCkbFN"
+        >
+            <FormGroup name="render-target-note" label={t("render.setup_title")}>
+                <NoteAutocomplete noteIdChanged={noteId => {
+                    if (!noteId) return;
+                    attributes.setRelation(note.noteId, "renderNote", noteId);
+                }} />
+            </FormGroup>
+        </SetupForm>
     );
 }

apps/client/src/widgets/type_widgets/helpers/SetupForm.tsx

@@ -25,7 +25,7 @@ export default function SetupForm({ icon, children, onSubmit, inAppHelpPage }: S
                 {inAppHelpPage && (
                     <LinkButton
                         text={t("setup_form.more_info")}
-                        onClick={() => openInAppHelpFromUrl("1vHRoWCEjj0L")}
+                        onClick={() => openInAppHelpFromUrl(inAppHelpPage)}
                     />
                 )}
             </form>