feat(ck-mermaid): use default mermaid config

This commit is contained in:
Elian Doran
2025-01-07 18:24:14 +02:00
parent 4b35f8174c
commit 19c90445fa
4 changed files with 27 additions and 19 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -16,13 +16,13 @@ const TPL = `<div class="mermaid-widget">
margin-bottom: 10px;
flex-basis: 0;
}
.mermaid-render {
overflow: auto;
height: 100%;
text-align: center;
}
.mermaid-render svg {
width: 95%; /* https://github.com/zadam/trilium/issues/4340 */
}
@@ -58,22 +58,10 @@ export default class MermaidWidget extends NoteContextAwareWidget {
this.$errorContainer.hide();
await libraryLoader.requireLibrary(libraryLoader.MERMAID);
const documentStyle = window.getComputedStyle(document.documentElement);
const mermaidTheme = documentStyle.getPropertyValue('--mermaid-theme');
mermaid.mermaidAPI.initialize({
startOnLoad: false,
theme: mermaidTheme.trim(),
securityLevel: 'antiscript',
flow: { useMaxWidth: false },
sequence: { useMaxWidth: false },
gantt: { useMaxWidth: false },
"class": { useMaxWidth: false },
state: { useMaxWidth: false },
pie: { useMaxWidth: true },
journey: { useMaxWidth: false },
git: { useMaxWidth: false },
...getMermaidConfig()
});
this.$display.empty();
@@ -146,3 +134,21 @@ export default class MermaidWidget extends NoteContextAwareWidget {
utils.downloadSvg(this.note.title, svg);
}
}
export function getMermaidConfig() {
const documentStyle = window.getComputedStyle(document.documentElement);
const mermaidTheme = documentStyle.getPropertyValue('--mermaid-theme');
return {
theme: mermaidTheme.trim(),
securityLevel: 'antiscript',
flow: { useMaxWidth: false },
sequence: { useMaxWidth: false },
gantt: { useMaxWidth: false },
"class": { useMaxWidth: false },
state: { useMaxWidth: false },
pie: { useMaxWidth: true },
journey: { useMaxWidth: false },
git: { useMaxWidth: false },
};
}

View File

@@ -13,6 +13,7 @@ import dialogService from "../../services/dialog.js";
import { initSyntaxHighlighting } from "./ckeditor/syntax_highlight.js";
import options from "../../services/options.js";
import toast from "../../services/toast.js";
import { getMermaidConfig } from "../mermaid.js";
const ENABLE_INSPECTOR = false;
@@ -259,7 +260,8 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
enablePreview: true // Enable preview view
},
mermaid: {
lazyLoad: async () => await libraryLoader.requireLibrary(libraryLoader.MERMAID)
lazyLoad: async () => await libraryLoader.requireLibrary(libraryLoader.MERMAID),
config: getMermaidConfig()
}
});
}