From d284414f2b1a603477de05459d910caf4b6f0abe Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@xored.com>
Date: Thu, 26 Sep 2024 23:12:07 +0700
Subject: [PATCH] UBERF-8200 Show codeblock lang selector on hover only (#6749)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
---
 packages/theme/styles/prose.scss                     | 12 ++++++++++++
 .../src/components/extension/codeblock.ts            |  6 +++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/theme/styles/prose.scss b/packages/theme/styles/prose.scss
index cc905be1b4..2955a62328 100644
--- a/packages/theme/styles/prose.scss
+++ b/packages/theme/styles/prose.scss
@@ -368,6 +368,18 @@ pre.proseCodeBlock {
   word-break: normal;
 }
 
+pre.proseCodeBlock {
+  button:not(.hovered) {
+    opacity: 0;
+  }
+
+  &:hover {
+    button {
+      opacity: 1;
+    }
+  }
+}
+
 // Fixes for MessageViewer
 pre.proseCodeBlock > pre.proseCode {
   padding: 0;
diff --git a/plugins/text-editor-resources/src/components/extension/codeblock.ts b/plugins/text-editor-resources/src/components/extension/codeblock.ts
index e7fb284c08..e9153f7a1b 100644
--- a/plugins/text-editor-resources/src/components/extension/codeblock.ts
+++ b/plugins/text-editor-resources/src/components/extension/codeblock.ts
@@ -141,7 +141,7 @@ function createDecorations (doc: ProseMirrorNode, options: CodeBlockLowlightOpti
             button.addEventListener('click', (e) => {
               e.preventDefault()
               e.stopPropagation()
-              handleLangButtonClick(e, node, pos, view, options)
+              handleLangButtonClick(e, node, pos, view, button, options)
             })
           } else {
             button.disabled = true
@@ -181,6 +181,7 @@ function handleLangButtonClick (
   node: ProseMirrorNode,
   pos: number,
   view: EditorView,
+  button: HTMLButtonElement,
   options: CodeBlockLowlightOptions
 ): void {
   const language = node.attrs.language
@@ -191,6 +192,8 @@ function handleLangButtonClick (
     label: language
   }))
 
+  button.classList.add('hovered')
+
   showPopup(
     DropdownLabelsPopup,
     {
@@ -199,6 +202,7 @@ function handleLangButtonClick (
     },
     getEventPositionElement(evt),
     (result) => {
+      button.classList.remove('hovered')
       if (result != null) {
         const tr = view.state.tr.setNodeAttribute(pos, 'language', result)
         view.dispatch(tr)