diff --git a/apps/client/src/services/render.ts b/apps/client/src/services/render.ts index adfd8a4949..f09d26532d 100644 --- a/apps/client/src/services/render.ts +++ b/apps/client/src/services/render.ts @@ -6,7 +6,7 @@ import bundleService, { type Bundle } from "./bundle.js"; import froca from "./froca.js"; import server from "./server.js"; -async function render(note: FNote, $el: JQuery) { +async function render(note: FNote, $el: JQuery, onError?: (e: unknown) => void) { const relations = note.getRelations("renderNote"); const renderNoteIds = relations.map((rel) => rel.value).filter((noteId) => noteId); @@ -21,12 +21,14 @@ async function render(note: FNote, $el: JQuery) { $scriptContainer.append(bundle.html); // async so that scripts cannot block trilium execution - bundleService.executeBundle(bundle, note, $scriptContainer).then(result => { - // Render JSX - if (bundle.html === "") { - renderIfJsx(bundle, result, $el); - } - }); + bundleService.executeBundle(bundle, note, $scriptContainer) + .catch(onError) + .then(result => { + // Render JSX + if (bundle.html === "") { + renderIfJsx(bundle, result, $el).catch(onError); + } + }); } return renderNoteIds.length > 0; diff --git a/apps/client/src/widgets/type_widgets/Render.css b/apps/client/src/widgets/type_widgets/Render.css index 2595da0d84..7597b47cd2 100644 --- a/apps/client/src/widgets/type_widgets/Render.css +++ b/apps/client/src/widgets/type_widgets/Render.css @@ -1,8 +1,7 @@ .note-detail-render { position: relative; -} -.note-detail-render .note-detail-render-help { - margin: 50px; - padding: 20px; -} \ No newline at end of file + &>.admonition { + margin: 1em; + } +} diff --git a/apps/client/src/widgets/type_widgets/Render.tsx b/apps/client/src/widgets/type_widgets/Render.tsx index 563a2342c6..4d4fd4cd8e 100644 --- a/apps/client/src/widgets/type_widgets/Render.tsx +++ b/apps/client/src/widgets/type_widgets/Render.tsx @@ -1,6 +1,6 @@ import "./Render.css"; -import { useEffect, useRef } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import FNote from "../../entities/fnote"; import attributes from "../../services/attributes"; @@ -8,6 +8,8 @@ import { t } from "../../services/i18n"; import note_create from "../../services/note_create"; import render from "../../services/render"; import toast from "../../services/toast"; +import { getErrorMessage } from "../../services/utils"; +import Admonition from "../react/Admonition"; import Button, { SplitButton } from "../react/Button"; import FormGroup from "../react/FormGroup"; import { FormListItem } from "../react/FormList"; @@ -47,10 +49,12 @@ export default function Render(props: TypeWidgetProps) { function RenderContent({ note, noteContext, ntxId }: TypeWidgetProps) { const contentRef = useRef(null); + const [ error, setError ] = useState(null); function refresh() { if (!contentRef) return; - render.render(note, refToJQuerySelector(contentRef)); + setError(null); + render.render(note, refToJQuerySelector(contentRef), setError); } useEffect(refresh, [ note ]); @@ -80,7 +84,16 @@ function RenderContent({ note, noteContext, ntxId }: TypeWidgetProps) { resolve(refToJQuerySelector(contentRef)); }); - return
; + return ( + <> + {error && ( + + {getErrorMessage(error)} + + )} +
+ + ); } function DisabledRender({ note }: TypeWidgetProps) {