From 564adb9a5791b8f7f3965d4bd3578bafcbb60ac9 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Fri, 2 Feb 2024 14:57:57 -0800
Subject: [PATCH] Desktop: Fixes #9829: Fix mermaid save button creates
 additional space above diagrams (#9830)

---
 packages/renderer/MdToHtml/rules/mermaid.ts | 22 ++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/renderer/MdToHtml/rules/mermaid.ts b/packages/renderer/MdToHtml/rules/mermaid.ts
index abae6869e5..43c4b5bc24 100644
--- a/packages/renderer/MdToHtml/rules/mermaid.ts
+++ b/packages/renderer/MdToHtml/rules/mermaid.ts
@@ -19,9 +19,17 @@ export default {
 				// Export button in mermaid graph should be shown only on hovering the mermaid graph
 				// ref: https://github.com/laurent22/joplin/issues/6101
 				text: `
-				.mermaid-export-graph { visibility: hidden; } 
-				.joplin-editable:hover .mermaid-export-graph { visibility: visible; }
-				.mermaid-export-graph:hover { background-color: ${theme.backgroundColorHover3} !important; }
+				.mermaid-export-graph {
+					opacity: 0;
+					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(),
 				mime: 'text/css',
 			},
@@ -69,7 +77,7 @@ const exportGraphButton = (ruleOptions: RuleOptions) => {
 	// Clicking on export button manually triggers a right click context menu event
 	const onClickHandler = `
 		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;
 		const $mermaid_elem = button.nextElementSibling;
 		const rightClickEvent = new PointerEvent("contextmenu", {bubbles: true});
@@ -87,7 +95,11 @@ const exportGraphButton = (ruleOptions: RuleOptions) => {
 		border: ${theme.buttonStyle.border};
 	`.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 = () => {