Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-11 02:42:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(mermaid): add an error display continer

Browse Source
This commit is contained in:
Elian Doran 2025-03-22 01:56:30 +02:00
parent d4cd550b7a
commit f42a89a548
No known key found for this signature in database
3 changed files with 52 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
View File

@ -7,8 +7,13 @@ import { DEFAULT_GUTTER_SIZE } from "../../services/resizer.js";
const TPL = `\ const TPL = `\
<div class="note-detail-split note-detail-printable split-horizontal"> <div class="note-detail-split note-detail-printable split-horizontal">
<div class="note-detail-split-editor"></div> <div class="note-detail-split-first-col">
<div class="note-detail-split-preview"></div> <div class="note-detail-split-editor"></div>
<div class="note-detail-error-container alert alert-warning hidden-ext"></div>
</div>
<div class="note-detail-split-second-col">
<div class="note-detail-split-preview"></div>
</div>
<style> <style>
.note-detail-split { .note-detail-split {
@ -16,13 +21,23 @@ const TPL = `\
height: 100%; height: 100%;
} }
.note-detail-split-first-col {
display: flex;
}
.note-detail-split .note-detail-split-editor { .note-detail-split .note-detail-split-editor {
width: 100%; width: 100%;
flex-grow: 1;
}
.note-detail-split .note-detail-error-container {
font-family: var(--monospace-font-family);
margin: 0.1em;
} }
/* Horizontal layout */ /* Horizontal layout */
.note-detail-split.split-horizontal > .note-detail-split-preview { .note-detail-split.split-horizontal > .note-detail-split-second-col {
border-left: 1px solid var(--main-border-color); border-left: 1px solid var(--main-border-color);
} }
@ -31,6 +46,14 @@ const TPL = `\
width: 50%; width: 50%;
} }
.note-detail-split.split-horizontal .note-detail-split-preview {
height: 100%;
}
.note-detail-split-first-col {
flex-direction: column;
}
/* Vertical layout */ /* Vertical layout */
@ -50,7 +73,10 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
private splitInstance?: Split.Instance; private splitInstance?: Split.Instance;
protected $preview!: JQuery<HTMLElement>; protected $preview!: JQuery<HTMLElement>;
private $firstCol!: JQuery<HTMLElement>;
private $secondCol!: JQuery<HTMLElement>;
private $editor!: JQuery<HTMLElement>; private $editor!: JQuery<HTMLElement>;
private $errorContainer!: JQuery<HTMLElement>;
private editorTypeWidget: EditableCodeTypeWidget; private editorTypeWidget: EditableCodeTypeWidget;
constructor() { constructor() {
@ -62,9 +88,12 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
doRender(): void { doRender(): void {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$firstCol = this.$widget.find(".note-detail-split-first-col");
this.$secondCol = this.$widget.find(".note-detail-split-second-col");
this.$preview = this.$widget.find(".note-detail-split-preview"); this.$preview = this.$widget.find(".note-detail-split-preview");
this.$editor = this.$widget.find(".note-detail-split-editor"); this.$editor = this.$widget.find(".note-detail-split-editor");
this.$editor.append(this.editorTypeWidget.render()); this.$editor.append(this.editorTypeWidget.render());
this.$errorContainer = this.$widget.find(".note-detail-error-container");
this.#setupResizer(); this.#setupResizer();
super.doRender(); super.doRender();
@ -91,7 +120,7 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
} }
this.splitInstance?.destroy(); this.splitInstance?.destroy();
this.splitInstance = Split([ this.$preview[0], this.$editor[0] ], { this.splitInstance = Split([ this.$firstCol[0], this.$secondCol[0] ], {
sizes: [ 50, 50 ], sizes: [ 50, 50 ],
direction: "horizontal", direction: "horizontal",
gutterSize: DEFAULT_GUTTER_SIZE, gutterSize: DEFAULT_GUTTER_SIZE,
@ -108,6 +137,11 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
return {}; return {};
} }
setError(message: string | null | undefined) {
this.$errorContainer.toggleClass("hidden-ext", !message);
this.$errorContainer.text(message ?? "");
}
getData() { getData() {
return this.editorTypeWidget.getData(); return this.editorTypeWidget.getData();
} }

13
src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
View File

@ -65,7 +65,18 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
return; return;
} }
const svg = await this.renderSvg(content); let svg: string = "";
try {
svg = await this.renderSvg(content);
} catch (e: unknown) {
// Rendering failed.
this.setError((e as Error)?.message);
return;
}
// Rendering was succesful.
this.setError(null);
if (svg === this.svg) { if (svg === this.svg) {
return; return;
} }

9
src/public/app/widgets/type_widgets/mermaid.ts
View File

@ -25,13 +25,8 @@ export class MermaidTypeWidget extends AbstractSvgSplitTypeWidget {
}); });
idCounter++; idCounter++;
try { const { svg } = await mermaid.render(`mermaid-graph-${idCounter}`, content);
const { svg } = await mermaid.render(`mermaid-graph-${idCounter}`, content); return postprocessMermaidSvg(svg);
return postprocessMermaidSvg(svg);
} catch (e) {
console.warn(JSON.stringify(e));
return "";
}
} }
} }