self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-23 22:36:32 +02:00
Code Issues Releases Activity

Desktop: Fixes #9829: Fix mermaid save button creates additional space above diagrams (#9830)

Browse Source
This commit is contained in:
Henry Heino
2024-02-02 14:57:57 -08:00
committed by GitHub
parent 987417502f
commit 564adb9a57
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/renderer/MdToHtml/rules/mermaid.ts
View File

@@ -19,9 +19,17 @@ export default {
// Export button in mermaid graph should be shown only on hovering the mermaid graph // Export button in mermaid graph should be shown only on hovering the mermaid graph
// ref: https://github.com/laurent22/joplin/issues/6101 // ref: https://github.com/laurent22/joplin/issues/6101
text: ` text: `
.mermaid-export-graph { visibility: hidden; } .mermaid-export-graph {
.joplin-editable:hover .mermaid-export-graph { visibility: visible; } opacity: 0;
.mermaid-export-graph:hover { background-color: ${theme.backgroundColorHover3} !important; } height: 0;
}
.joplin-editable:hover .mermaid-export-graph,
.joplin-editable .mermaid-export-graph:has(:focus-visible) {
opacity: 1;
}
.mermaid-export-graph > button:hover {
background-color: ${theme.backgroundColorHover3} !important;
}
`.trim(), `.trim(),
mime: 'text/css', mime: 'text/css',
}, },
@@ -69,7 +77,7 @@ const exportGraphButton = (ruleOptions: RuleOptions) => {
// Clicking on export button manually triggers a right click context menu event // Clicking on export button manually triggers a right click context menu event
const onClickHandler = ` const onClickHandler = `
const target = arguments[0].target; const target = arguments[0].target;
const button = target.closest("button.mermaid-export-graph"); const button = target.closest("div.mermaid-export-graph");
if (!button) return false; if (!button) return false;
const $mermaid_elem = button.nextElementSibling; const $mermaid_elem = button.nextElementSibling;
const rightClickEvent = new PointerEvent("contextmenu", {bubbles: true}); const rightClickEvent = new PointerEvent("contextmenu", {bubbles: true});
@@ -87,7 +95,11 @@ const exportGraphButton = (ruleOptions: RuleOptions) => {
border: ${theme.buttonStyle.border}; border: ${theme.buttonStyle.border};
`.trim(); `.trim();
return `<button class="mermaid-export-graph" onclick='${onClickHandler}' style="${style}" alt="Export mermaid graph">${downloadIcon()}</button>`; return `
<div class="mermaid-export-graph">
<button onclick='${onClickHandler}' style="${style}" alt="Export mermaid graph">${downloadIcon()}</button>
</div>
`;
}; };
const downloadIcon = () => { const downloadIcon = () => {