UBERF-8200 Show codeblock lang selector on hover only (#6749)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
This commit is contained in:
Alexander Onnikov 2024-09-26 23:12:07 +07:00 committed by GitHub
parent 8ac0555654
commit d284414f2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 1 deletions

View File

@ -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;

View File

@ -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)