opensource/yn
3
0
Fork 0
mirror of https://github.com/purocean/yn.git synced 2026-09-24 15:46:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix Mermaid HTML export

Browse Source
This commit is contained in:
purocean
2022-03-22 13:45:05 +08:00
parent e7a2a99992
commit 1140cc2d28
1 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/plugins/markdown-mermaid.ts
+31 -2
View File
@@ -41,6 +41,7 @@ const Mermaid = defineComponent({
const imgRef = ref<HTMLElement>()
const result = ref('')
const img = ref('')
const errMsg = ref('')
function getImageUrl (code?: string) {
const svg = code || container.value?.innerHTML
@@ -56,9 +57,11 @@ const Mermaid = defineComponent({
try {
mermaid.render(`mermaid-${mid++}`, props.code, (svgCode: string) => {
result.value = svgCode
errMsg.value = ''
img.value = getImageUrl(svgCode)
}, container.value)
} catch (error) {
errMsg.value = '' + error
logger.error('render', error)
}
}
@@ -109,7 +112,7 @@ const Mermaid = defineComponent({
})
return () => {
return h('div', { ...props.attrs, class: 'mermaid-wrapper' }, [
return h('div', { ...props.attrs, class: `mermaid-wrapper${errMsg.value ? ' error' : ''}` }, [
h('div', { class: 'mermaid-action skip-print' }, [
h('button', { class: 'small', onClick: exportSvg }, 'SVG'),
h('button', { class: 'small', onClick: exportPng }, 'PNG'),
@@ -125,7 +128,8 @@ const Mermaid = defineComponent({
ref: imgRef,
alt: 'mermaid',
class: 'mermaid-image',
})
}),
h('pre', { class: 'mermaid-error skip-export' }, errMsg.value)
])
}
}
@@ -154,10 +158,12 @@ export default {
register: ctx => {
ctx.theme.addStyles(`
.markdown-view .markdown-body .mermaid-wrapper {
--skip-contain: 1;
position: relative;
}
.markdown-view .markdown-body .mermaid-wrapper .mermaid-action {
--skip-contain: 1;
position: absolute;
right: 10px;
top: 10px;
@@ -168,18 +174,22 @@ export default {
}
.markdown-view .markdown-body .mermaid-wrapper:hover .mermaid-action {
--skip-contain: 1;
opacity: 1;
}
.markdown-view .markdown-body .mermaid-wrapper .mermaid-container {
--skip-contain: 1;
visibility: hidden;
}
.markdown-view .markdown-body .mermaid-wrapper .mermaid-container > svg {
--skip-contain: 1;
display: block;
}
.markdown-view .markdown-body .mermaid-wrapper .mermaid-image {
--skip-contain: 1;
filter: none;
position: absolute;
width: 100%;
@@ -188,6 +198,25 @@ export default {
left: 0;
display: block;
}
.markdown-view .markdown-body .mermaid-wrapper .mermaid-error {
--skip-contain: 1;
display: none;
white-space: pre-wrap;
}
.markdown-view .markdown-body .mermaid-wrapper.error .mermaid-action,
.markdown-view .markdown-body .mermaid-wrapper.error .mermaid-image {
--skip-contain: 1;
display: none;
}
.markdown-view .markdown-body .mermaid-wrapper.error .mermaid-error,
.markdown-view .markdown-body .mermaid-wrapper.error .mermaid-container {
--skip-contain: 1;
display: block;
visibility: visible;
}
`)
ctx.markdown.registerPlugin(MermaidPlugin)