From 84adb5409d2f9bf3fb28d98b83299bbd18d1586d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Wed, 1 Apr 2026 16:56:13 +0400
Subject: [PATCH] Make mermaid toolbar invisible in preview mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 packages/ui/src/RichEditor/MermaidNodeView.tsx |  2 +-
 packages/ui/src/rich-editor.css                | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/RichEditor/MermaidNodeView.tsx b/packages/ui/src/RichEditor/MermaidNodeView.tsx
index d9e2df89f..8e7bf4ea2 100644
--- a/packages/ui/src/RichEditor/MermaidNodeView.tsx
+++ b/packages/ui/src/RichEditor/MermaidNodeView.tsx
@@ -95,7 +95,7 @@ function MermaidBlock({ node }: { node: ReactNodeViewProps["node"] }) {
 
   return (
     <NodeViewWrapper>
-      <div className="mermaid-block">
+      <div className={`mermaid-block ${mode === "code" ? "editing" : ""}`}>
         <div className="mermaid-toolbar">
           <button
             type="button"
diff --git a/packages/ui/src/rich-editor.css b/packages/ui/src/rich-editor.css
index 2e8d66241..a77676f4f 100644
--- a/packages/ui/src/rich-editor.css
+++ b/packages/ui/src/rich-editor.css
@@ -97,7 +97,16 @@
     }
 
     .mermaid-block {
-        @apply my-4 border border-border-mid rounded-lg overflow-hidden;
+        @apply my-4 rounded-lg relative
+               border border-transparent transition-colors;
+
+        &:hover, &.editing {
+            @apply border-border-mid;
+        }
+
+        &:not(.editing) {
+            caret-color: transparent;
+        }
 
         pre {
             @apply my-0 rounded-none border-none;
@@ -105,7 +114,11 @@
     }
 
     .mermaid-toolbar {
-        @apply flex gap-1 px-2 py-1.5 bg-subtle border-b border-border-mid;
+        @apply flex gap-1 p-1.5 absolute top-0 right-0 z-10 opacity-0 pointer-events-none transition-opacity;
+
+        .mermaid-block:hover &, .mermaid-block.editing & {
+            @apply opacity-100 pointer-events-auto;
+        }
     }
 
     .mermaid-toolbar-btn {