Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 02:02:29 +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 = `\
<div class="note-detail-split note-detail-printable split-horizontal">
<div class="note-detail-split-editor"></div>
<div class="note-detail-split-preview"></div>
<div class="note-detail-split-first-col">
<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>
.note-detail-split {
@ -16,13 +21,23 @@ const TPL = `\
height: 100%;
}
.note-detail-split-first-col {
display: flex;
}
.note-detail-split .note-detail-split-editor {
width: 100%;
flex-grow: 1;
}
.note-detail-split .note-detail-error-container {
font-family: var(--monospace-font-family);
margin: 0.1em;
}
/* 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);
}
@ -31,6 +46,14 @@ const TPL = `\
width: 50%;
}
.note-detail-split.split-horizontal .note-detail-split-preview {
height: 100%;
}
.note-detail-split-first-col {
flex-direction: column;
}
/* Vertical layout */
@ -50,7 +73,10 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
private splitInstance?: Split.Instance;
protected $preview!: JQuery<HTMLElement>;
private $firstCol!: JQuery<HTMLElement>;
private $secondCol!: JQuery<HTMLElement>;
private $editor!: JQuery<HTMLElement>;
private $errorContainer!: JQuery<HTMLElement>;
private editorTypeWidget: EditableCodeTypeWidget;
constructor() {
@ -62,9 +88,12 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
doRender(): void {
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.$editor = this.$widget.find(".note-detail-split-editor");
this.$editor.append(this.editorTypeWidget.render());
this.$errorContainer = this.$widget.find(".note-detail-error-container");
this.#setupResizer();
super.doRender();
@ -91,7 +120,7 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
}
this.splitInstance?.destroy();
this.splitInstance = Split([ this.$preview[0], this.$editor[0] ], {
this.splitInstance = Split([ this.$firstCol[0], this.$secondCol[0] ], {
sizes: [ 50, 50 ],
direction: "horizontal",
gutterSize: DEFAULT_GUTTER_SIZE,
@ -108,6 +137,11 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
return {};
}
setError(message: string | null | undefined) {
this.$errorContainer.toggleClass("hidden-ext", !message);
this.$errorContainer.text(message ?? "");
}
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;
}
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) {
return;
}

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

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