diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index bccf7ab6d4..2fc8a39dbd 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/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; -} \ No newline at end of file +} diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 341e3ed579..f5926aa4b1 100644 --- a/apps/client/src/translations/en/translation.json +++ b/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 scripting. 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 relation 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", diff --git a/apps/client/src/widgets/type_widgets/Render.tsx b/apps/client/src/widgets/type_widgets/Render.tsx index 1f9d61d218..1f05820008 100644 --- a/apps/client/src/widgets/type_widgets/Render.tsx +++ b/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 ; + return ; } return ; @@ -60,11 +61,18 @@ function RenderContent({ note, noteContext, ntxId }: TypeWidgetProps) { return
; } -function SetupRenderContent() { +function SetupRenderContent({ note }: TypeWidgetProps) { return ( - -

{t("render.note_detail_render_help_1")}

-

-
+ + + { + if (!noteId) return; + attributes.setRelation(note.noteId, "renderNote", noteId); + }} /> + + ); } diff --git a/apps/client/src/widgets/type_widgets/helpers/SetupForm.tsx b/apps/client/src/widgets/type_widgets/helpers/SetupForm.tsx index 69e491fb6c..771b8de612 100644 --- a/apps/client/src/widgets/type_widgets/helpers/SetupForm.tsx +++ b/apps/client/src/widgets/type_widgets/helpers/SetupForm.tsx @@ -25,7 +25,7 @@ export default function SetupForm({ icon, children, onSubmit, inAppHelpPage }: S {inAppHelpPage && ( openInAppHelpFromUrl("1vHRoWCEjj0L")} + onClick={() => openInAppHelpFromUrl(inAppHelpPage)} /> )}